Belajar HTML Dasar

   Pada postingan kali ini saya telah mempersiapkan tutorial HTML dasar yang ditujukan untuk pemula yang ingin mempelajari HTML mulai dari awal. Dalam tutorial ini kita akan mempelajari tentang pengertian HTML, cara membuat file HTML, berkenalan dengan yang namanya tag dan atribut HTML, hingga membahas tag-tag penting pada HTML, seperti tag <a>, tag <img>, <table>, dan tag <form> HTML.   

   Dalam mempelajari HTML, harap diingat bahwa HTML dirancang untuk membuat struktur dasar dari halaman web. Jika kita ingin merubah tampilan dari sebuah tag, misalnya ingin membuat background paragraf berwarna merah, atau ingin memberi efek bayangan pada gambar, sebaiknya menggunakan CSS, bukan langsung melalui kode HTML. Apasih CSS ??? nanti kita akan bahas setelah menguasai HTML. :D Admin pelitnih , bukan pelit memang itu tahapannya :) hhi admin gila, #ngomong sendiri

   Langsung aja dimulai ya :) , apasih HTML , HTML adalah singkatan dari HyperText Markup Language yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. lebih lengkapnya bisa baca disini.

  Sebelum Start ada yang perlu kita siapkan :

1. Browser (Mozilla, Chrome, IE) direkomendasikan memakai browser versi terbaru, karena kita akan belajar HTML versi 5. Browser type lama tidak support dengan HTML 5. 
2. Text Editor : adalah tempat dimana kita menulis kode-kode HTML. Saya anjurkan jika kamu pemula gunakan Notepad++. kamu bisa download disini. free kok nggak bayar :) enakan belajar koding banyak yang gratis.

   Perlu diketahui kita akan menemukan beberapa fitur baru yang besar pada HTML5 tawarkan. Pertama kamu akan belajar tentang elemen semantik baru yang bertujuan untuk memberi maknake berbagai bagian dari suatu halaman Web modern: headers, footers, navigation bars, sidebars, dan sebagainya.

Unsur-unsur semantik baru yang disediakan HTML5 adalah:

<article> Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.

<section> Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian kita baca sekarang bisa dikelilingi oleh elemen <section> di HTML5.

<nav>Ini adalah wadah untuk link navigasi utama pada halaman Web

<aside> Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan.

<hgroup> Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana kita memiliki judul dan subjudul.

<canvas> Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal sepertiAdobe Flash.

<audio> dan <video> Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

masih banyak perbedaan HTML 5 dengan versi sebelumnya , namun pada intinya kita lebih diuntungkan jika belajar di versi terbaru ini :) .

Langsung saja mulai 

1. TAG dan HTML

   Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”. 

Berikut adalah format dasar penulisan tag HTML:

• <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
• </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tandabackslash(/)

Jika kita lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal ini memudahkan kita, namun tidak disarankan.

Contoh lainnya, jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

1 2	<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>. Paragraf ini terdiri dari <b>3 kalimat</b></p>.

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold).

Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untukbreak (pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan sebutan self closing tag atau void tag, untuk penulisannya bisa ditulis dengan <br>,  maupun <br />.

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag. Dalam HTML5, aturan ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer saat ini adalah menggunakan huruf kecil untuk seluruh tag.

Pengertian Element dalam HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup (termasuk tag itu sendiri). Sebagai contoh perhatikan kode HTML berikut:

1	<p> Ini adalah sebuah paragraf </p>




Pada contoh diatas, “<p> Ini adalah sebuah paragraf </p>” merupakan element p. Element tidak hanya berisi text, namun juga bisa tag lain.

   Oke . coba tulis kode pertama kita, buka notepad++ yang sudah diinstall lalu tulis kode dibawah ini dan save dengan nama  belajarweb.html 

coba buka file yang sudah disimpan dengan web browser kesayangan kamu :)

maka akan tampil seperti gambar diatas : 

Keterangan 

1.  Seperti kita pelajari sebelumnya setiap tag yang ditulis biasa akan pasang-pasangkan contoh <html> dan </html>. pada contoh 1 setelah tag <html> ditulis tag <head><title>Page Title</title></head>. Tag <head> digunakan untuk memberikan informasi tentang dokumen tersebut lalu didalam tag <head></head> ada tag <title>, tag title ini digunakan Membuat judul untuk dokumen HTML. Coba kamu lihat pada tab browser kamu fungsi title ini akan terlihat untuk apa fungsinya. 

Fungsi title ->  

Tulisan "Page Title" tampil pada tab browser hal ini menandakan bahwa judul halaman kita adalah "Page Title". Kamu bisa merubah judul halaman tersebut sesuai keinginan, contoh judul halaman yang ingin kamu buat adalah "web pertama saya", maka penulisannya sperti berikut :                 

              <head>

              <title>web pertama saya</title>

              </head>

2. pada contoh 1 terdapat tag <body>, apasih tag <body> itu ? fungsinya untuk mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animasi, link dan seterusnya. pada kasus contoh pertama kita ,isi dokumennya adalah:

                            <h1>This is a Heading</h1>

             <p>This is a paragraph.</p>

isi dokumen html kita ternyata berupa teks yang diformat dalam bentuk heading dan paragraf / <p>.

3. Teks "This is a Heading" ukurannya akan tercetak lebih besar dari "This is paragraph" .

jika dilihat pada kode teks "This is a Heading" diapit oleh dua tag <h1> dan </h1> . apasih tag <h1> itu ? dan apa yang dimaksudkan dengan Heading?

"Heading adalah perlengkapan SEO sederhana yang berfungsi untuk menyusun level-level heading dan subheading pada website. Header mempunyai tingkatan yang ada 6 dan dimulai dari H1 hingga H6. H1 yaitu header yang paling besar dan yakni H6 header yang paling kecil.Penggunaan H1 biasanya digunakan untuk judul blog, dan h2 digunakan untuk judul posting, serta h3 untuk widget. Jika dilihat dalam tingkatan heading, maka level header pertama seharusnya mengandung keyword yang utama pada blog atau pada artikel." lengkapnya kamu bisa baca disini. 

Tingkatan yang ada pada heading:

4. Tag <p> ini fungsinya untuk membuat paragraf kontennya tentu berupa teks. penulisannya harus dipasangkan-pasangkan <p> dan  </p> Di akhir paragraf kita gunakan tag </p> sebagai penutup. 

Oke cukup dulu sampai disini nanti kita lanjutkan lagi dipostingan berikutnya :)