Cara Host Website buatan Web Page Maker

Pada kesempatan kali ini saya akan berbagi info tentang "Cara Host Website buatan Web Page Maker" karena banyak teman-teman saya yang membutuhkan ini.

Aplikasi yang diperlukan :
- Web Page Maker
- Filezilla atau sejenisnya

      Pertama anda harus mempunyai file website anda yang anda buat di Web Page Maker yang akan di host, bisa berekstensi .html, .htm, .php, dll. Cara mendapatkannya mudah ikuti langkah dibawah ini:
 -Buka Web Page Maker, lalu buka file anda
 -Setelah terbuka, pilih File di navbar lalu pilih Export to HTML

 - Lalu pilih folder tujuan untuk tempak Export file" web anda

- Klik ok, dan lihat folder itu, apakah sudah ada isinya? jika sudah maka itulah file" web anda

      Langkah kedua, Daftar di salah satu web hosting, Web Hosting diperlukan untuk membuat website anda dapat dilihat oleh orang" diseluruh dunia, tapi anda juga butuh biaya untuk melakukannya, tapi ada juga yang gratis, salah satunya adalah idhostinger, disitu kita dapat layanan 2 GB file storage dan masih banyak lagi, berikut adalah cara mendaftar di idhostinger :
 -Pertama buka link hostinger
-Lalu pilih register tab
 -Setelah itu isi data-data yang sekiranya dibutuhkan
 -Setelah berhasil, check email anda utk mengaktifkan akun anda
 -Sekarang ada punya akun di hostinger

     Setelah anda membuat akun di Hostinger anda harus membuat akun host, caranya.....
 -Login di hostinger
 -Pilih Control Panel tab
 -Lalu klick Create New Account 

-Kemudian pilih Subdomain, jika anda telah membeli domain, pilih Domain

-Isikan semua yang diperlukan lalu klik Create
-Tunggu beberapa detik, dan anda punya akun host !! ingat-ingat akun host itu, misal www.dgenefo.tk

     Langkah ketiga adalah mengupload file" website anda ke web host
-Pertama anda harus punya Filezilla atau sejenisnya
-Kedua, buka Filezilla lalu masukan Nama pengguna, Password dll, untuk mengetahuinya, login ke idhostinger lalu pilih kontrol panel, pilih domain anda, lalu cari FTP Access.

 -Isikan semua itu di Filezilla lalu klick Connect/KoneksiCepat
-Setelah anda terhubung, anda akan melihat seperti ini

-Klik public_html di tab yang kanan
-Pada tab kiri browse file website anda
-Setelah ketemu blok semua filenya klick kanan lalu pilih Upload
-Tunggu hingga upload selesai, jika website anda banyak mengandung gambar, maka proses uploadnya juga lama.
-Setelah selesai coba buka website yang anda daftarkan tadi, contoh dgenefo.tk sprti yg diatas
-Jika isinya website anda maka jadilah web anda !!
-Jika ada yang ingin deperbaharui export lagi lalu upload lagi, tidak perlu membuat akun host lagi, pakai yang lama

Tutorial CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita  .

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).

• Selector adalah HTML element yang ingin dibuat style nya.

• Declaration  merupakan isi dari property dan nilai dari CSS.

• Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1
{
text-align:center;
color:red;
}

nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}

nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

Cara CSS

Tiga Cara untuk Insert CSS :

1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat  mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

dengan eksternal style sheet dapat ditulis dalam  bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :

hr {color:sienna;}

p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

nb: JANGAN  meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.

2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :

<head>
<style type=”text/css”>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>

</head>

3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

4. Multiple Style Sheet

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.

contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

contoh style sheet internal untuk pemilih h3 :

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.

Beberapa Styles Akan Cascade ke Satu :
gaya dapat ditentukan :

• didalam sebuah elemen HTML
• didalam bagian kepala halaman HTML
• didalam sebuahj file CSS eksternal

Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:

• Browser default
• Eksternal style sheet
• Internal style sheet (di bagian kepala)
• Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).

Tutorial Belajar HTML5 Paling Lengkap

Pada tutorial belajar html ini saya akan jelaskan dengan lengkap bagaimana cara membuat website dengan html beserta dengan contoh-contoh yang bisa anda coba sendiri.
Untuk dapat dengan mudah dalam belajar html anda disarankan memperlajarinya dari dasar. Sebenarnya sintak dasar dari html itu hanya sedikit. Namun banyak properti dan atribut yang bisa dipakai oleh masing-masing tag dan elemen pada html. Oleh karena itu untuk belajar html agar anda lebih mudah memahami struktur html maka anda harus benar-benar menguasai dasar bahasa html.
Baiklah di tutorial belajar html ini saya tidak akan menjelaskan apa itu html karena saya yakin anda sudah sering mendengar istilah html, namun kita langsung praktek bagaimana cara membuat halaman web menggunakan html.
Dalam tutorial belajar html ini saya menggunakan versi html terbaru yaitu html5. Jadi semua contoh kode html yang saya gunakan nantinya menggunakan html5.

Persiapan belajar html5

Yang harus anda siapkan pertamakali adalah program/software untuk editor html. Saya sarankan anda menggunakan editor yang biasa dipakai banyak desainer web seluruh dunia yaitu Sublime Text. Anda bisa mendownloadnya disini: www.sublimetext.com. Anda bisa juga menggunakan editor lain seperti notepad++, eclipse, Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor dan sebagainya sebagaimana yang anda sukai.

Contoh sederhana halaman html

Contoh sederhana halaman web html5 dapat anda lihat dibawah ini

<!DOCTYPE html> <html> <body> <h1> My First Heading</h1> <p> My first paragraph.</p> </body> </html>

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html> <body>   <h1>My First Heading</h1>   <p>My first paragraph.</p>   </body> </html>

Lihat hasilnya disini: http://jsfiddle.net/pc2qrrhf/

Dasar-Dasar HTML

Beberapa dasar-dasar html yang harus anda ketahui terlebihdahulu dalam belajar html adalah sintak dasar yang sering digunakan dalam halaman website. Diantara sintak dasar html adalah sebagai berikut:

1. Tipe dokumen html

Untuk html5 penulisan tipe dokumen html cukup dengan kode berikut:

<!DOCTYPE html> Contohnya seperti : <!DOCTYPE html> <html> <body> <h1> Belajar PHP</h1> <p> Dalam tutorial belajar php ini...</p> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!DOCTYPE html>   Contohnya seperti :   <!DOCTYPE html> <html> <body>   <h1>Belajar PHP</h1>   <p>Dalam tutorial belajar php ini...</p>   </body> </html>

2. HTML untuk header

Elemen header dalam html menggunakan tag <head>. Didalam tag <head> ini terdapat banyak elemen lainnya yang bisa dimasukkan. Maksud dari elemen <head> ini adalah hal yang paling pertama dibaca oleh browser sebelum isi halaman ditampilkan. Contoh penggunaan elemen <head> adalah seperti ini:

<head>    <title>Website Pertamaku – Belajar HTML</title> </head>

1 2 3

<head>    <title>Website Pertamaku – Belajar HTML</title> </head>

3. HTML untuk judul halaman

Elemen judul halaman html diawali dengan <title>. Elemen <title> ini akan muncul pada judul jendela halaman html. Contohnya seperti in:

<title>Website Pertamaku – Belajar HTML</title>

1	<title>Website Pertamaku – Belajar HTML</title>

4. HTML untuk tubuh halaman

Tubuh halaman adalah apa-apa yang akan ditampilkan oleh browser. Semuanya berada didalam tag <body>. Semua yang ada didalam tag <body> adalah isi dari tubuh halaman web. Contohnya seperti ini:

<body> <h1> Belajar PHP</h1> <p> Tutorial Belajar PHP ini...</p> </body>

1 2 3 4

<body> <h1>Belajar PHP</h1> <p>Tutorial Belajar PHP ini...</p> </body>

5. HTML untuk judul artikel

Untuk judul artikel atau untuk sub judul gunakan tag <h1> sampai <h6>. Contoh penggunaannya seperti berikut:

<h1> PROPOSAL</h1> <h2> BAB I</h2> <h3> 1.1. LATAR BELAKANG</h3>

1 2 3

<h1>PROPOSAL</h1> <h2>BAB I</h2> <h3>1.1. LATAR BELAKANG</h3>

6. HTML untuk paragraf

Dalam penulisan paragraf pada html anda bisa menggunakan tag <p> contohnya seperti ini:

<p> Belajar html.</p> <p> Tutorial belajar html.</p>

1 2	<p>Belajar html.</p> <p>Tutorial belajar html.</p>

7. HTML untuk gambar

Untuk memasukkan gambar kedalam halaman html anda bisa gunakan tag <img> contohnya seprti berikut;

<img src="pasfoto.jpg">

1	<img src="pasfoto.jpg">

Sekarang anda sudah mengenal sintak-sintak dasar html atau html5. Sekarang mari kita coba susun secara utuh sebuah halaman html sederhana menggunakan elemen dan tag yang sudah dijelaskan diatas. Perhatikan cotoh berikut ini:

<!DOCTYPE html> <html> <head> <title>Website Pertamaku – Belajar HTML</title> </head> <body> <h1> Belajar PHP</h1> <p> Untuk dapat dengan mudah dalam belajar html anda disarankan memperlajarinya dari dasar. Sebenarnya sintak dasar dari html itu hanya sedikit. Namun banyak properti dan atribut yang bisa dipakai oleh masing-masing tag dan elemen pada html. Oleh karena itu untuk belajar html agar anda lebih mudah memahami struktur html maka anda harus benar-benar menguasai dasar bahasa html.</p> <p>      <img src="pasfoto.jpg">      <br> <a href="http://www.waroengweb.co.id/">Kunjungi website saya</a> </p> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!DOCTYPE&nbsp;html> <html>   <head> <title>Website Pertamaku – Belajar HTML</title> </head>   <body>   <h1>Belajar PHP</h1>   <p> Untuk dapat dengan mudah dalam belajar html anda disarankan memperlajarinya dari dasar. Sebenarnya sintak dasar dari html itu hanya sedikit. Namun banyak properti dan atribut yang bisa dipakai oleh masing-masing tag dan elemen pada html. Oleh karena itu untuk belajar html agar anda lebih mudah memahami struktur html maka anda harus benar-benar menguasai dasar bahasa html.</p>   <p>      <img src="pasfoto.jpg">      <br>      <a href="http://www.waroengweb.co.id/">Kunjungi website saya</a> </p>   </body> </html>

Lihat hasilnya disini: http://jsfiddle.net/q15y3tvw/

8. HTML untuk Tabel

Untuk membuat table dalam html agak sedikit rumit kalau belum terbiasa. Berikut ini contoh sederhana table html:

<table style="width:100%" <span class="highATT">border=</span><span class="highVAL">"1"</span>> <tr> <td>Ali</td> <td>Badu</td> <td>50</td> </tr> <tr> <td>Eka</td> <td>Budi</td> <td>94</td> </tr> </table>

1 2 3 4 5 6 7 8 9 10 11 12

<table style="width:100%" <span class="highATT">border=</span><span class="highVAL">"1"</span>>   <tr>     <td>Ali</td>     <td>Badu</td>     <td>50</td>   </tr>   <tr>     <td>Eka</td>     <td>Budi</td>     <td>94</td>   </tr> </table>

pembuatan table diawali dengan tag <table>
kemudian diikuti dengan pembuatan baris dengan tag <tr>
Didalam setiap baris ada kolom/field dengan menggunakan tag <td>
Jumlah <td> anatara baris pertama dengan baris berikutnya harus sama banyak.

Pengenalan HTML

Sebelum belajar HTML, alangkah lebih baik jika kita memahami konsep dasar HTML terlebih dahulu.
Pengertian HTML
HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web.

• HTML merupakan singkatan dari Hyper Text Markup Language.
• HTML bukan merupakan bahasa pemrograman, HTML adalah suatu markup language (bahasa markah).
• Suatu markup language berupa serangkaian markup tags.
• HTML menggunakan markup tags untuk mendeskripsikan halaman web.

HTML Tags
HTML markup tags biasa disebut HTML tags.

• HTML tags berupa keywords atau kata kunci yang diapit oleh tanda kurung seperti <html>.
• HTML tags biasanya dipakai berpasangan seperti <b> dan </b>.
• Tag pertama dalam pasangan html tags adalah start tag atau tag awal, sedang tag kedua adalah end tag atau tag akhir.
• Start tags dan end tags biasa juga disebut opening tags dan closing tags.

HTML Documents = Web Pages

• HTML documents atau dokumen HTML mendeskripsikan suatu web pages atau halaman web.
• HTML documents berisi HTML tags dan plain text atau text biasa.
• HTML documents atau dokumen HTML juga biasa disebut web pages atau halaman web.

Tujuan dari sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk menterjemahkan isi dari halaman web.

1 2 3 4 5 6 7 8 9

<html> <body>   <h1>Judul Pertama</h1>   <p>Paragraf pertama</p>   </body> </html>

Coba contoh HTML diatas dengan HTML Editor.
Penjelasan Contoh

• Teks di antara <html> dan </html> mendeskripsikan web page.
• Teks di antara <body> dan </body> adalah konten halaman web yang akan tertampil.
• Teks di antara <h1> dan </h1> digunakan untuk menampilkan judul.
• Teks di antara <p> dan </p> digunakan untuk menampilkan paragraf.

Referensi

• w3schools.com