Membuat Web basic HTML

Ya kali ini kita akan membuat web sederhana dengan basic HTML, bahan yang dibutuhkan:

• Text Editor (disini kita menggunakan Sublime Text)
• Web browser
• beberapa cemilan dan minuman hangat

Buat sebuah folder di dekstop dengan nama html.

Selanjutnya buka sublime text yang telah di install,drag folder html tadi ke program Sublime Text editor, dan hasilnya seperti ini.

 Untuk kali ini kita akan membuat 3 halaman pada web sederhana ini yaitu home/index, profile, contact.

Pertama, kita buat dahulu tiga buah file dengan nama index.html, profile.html, dan contact.html dengan cara klik kanan pada logo folder dan klik "New File" berikut contohnya.

Kedua setelah di save kita cukup mengetikkan "html" kemudian enter supaya auto complete sublimenya yang akan langsung membuat tag dasar dari htmlnya, copy tag dasar html tersebut ke file lainnya.

setelah itu kita buat dua  bagian yaitu, bagian menu navigasi dan bagian footer dari websitenya.
  

Bagian menu navigasi

Bagian footer

dan jadinya seperti ini.

kemudian kita buat bagian konten atau isi dari webnya dengan membuat div berclass content

Div, class, ul, li, a maksudnya apa sih ?

Div
Merupakan suatu tag html yang tidak memiliki nilai, biasanya digunakan untuk mengkotakan atau membagi-bagi tag html menjadi beberapa bagian, agar saat mendesain halaman web menjadi lebih mudah.

Class
class merupakan atribut yang dapat digunakan sebagai penamaan untuk pemanggilan css atau jquery, selain class kita juga dapat menggunakan Id perbedaannya dalam segi pemanggilan css atau jquery class menggunakan tanda ".namaclass" sedangkan id menggunakan tanda "#namaid".

ul, ol, dan li
ul (unordered list) dan ol (ordered list) merupakan  pengurutan dari sebuah daftar, digunakan untuk memberikan nama atau penomoran suatu list.
li atau List merupakan tag html yang digunakan dalam membuat daftar.

a
merupakan tag html dengan atribut href="#" yang digunakan untuk men-link-an satu halaman ke halaman lainnya 

contoh penggunaan ketiga tag ul, ol, li dan a

hasil saat dibuka dibrowser 

hasil dari ul yang penomorannya memakai simbol

hasil dari ol yang pernomorannya memakai nomor

disini ada tiga list yang didalamnya terdapat tag a yang setiap kali di klik mengarahkan ke halaman lain, contohnya pada link profile yang saat di klik akan mengalihkan ke halaman profile.html, dan begitu juga pada link contact

copy dan pastekan codingan index.html ke kedua file lainnya (profile.html dan contact.html)

kemudian kita buat masing masing contentnya 

Content index.html

Content contact.html

Content profile.html

 disini ada tag html h1, h2, dan h3 apa sih itu ?

tag h atau header merupakan tag yang biasanya digunakan untuk memberi judul suatu artikel, yang memiliki tingkat tag dari h1 sampai h6.Sebenarnya kita bisa mengcustom tampilan judul dengan membuat div baru  dan di desain degan css namun untuk kali ini kita menggunakan tag header, maybe next time atau di artikel selanjutnya kita akan lanjutkan dengan desain with css, oke lanjut.

dan tag input tag input merupakan tag yang biasa digunakan saat kita mengisi sebuah informasi, atau melakukan login pada suatu website ada beberapa jenis input ada type="email", type="password", type="file", dan masih banyak lagi lainnya.

oke jika semua contentnya telah dibuat kemudian kita save dan coba kita buka dibrowser dan hasilnya seperti ini.

Halaman index.html

halaman profile.html

halaman contact.html

oke sekian dulu artikel kali ini next time kita lanjut dengan desain webnya dengan css Thanks.

sumber gambar utama : http://premiumwebfreebies.com/flat-web-design-psd/