Belajar Pengertian Kode HTML Dasar Pada Website Statis

HTML adalah singkatan dari Hypertext Markup Language. Fasilitas hypertext merupakan metode yang menghubungkan (link) satu dokumen ke dokumen lain melalui suatu teks atau gambar. HTML merupakan halaman yang berada pada suatu situs internet atau web. Jadi, suatu situs terdiri atas beberapa halaman HTML atau web page. Semakin menarik isi halaman suatu web, semakin sering website itu dikunjungi. HTML pada dasarnya merupakan kumpulan kode-kode yang ditampilkan dalam format tag untuk ditamplkan di halaman web atau blog.

Biasanya, hyperlink ada pada halaman web atau blog yang jika di klik oleh penggunanya, browser akan menampilkan dokumen yang terhubung dengan link tersebut. Untuk membuat suatu dokumen HTML biasanya menggunakan program Text Editor Notepad,Notepad++,atau Adobe Dreamweaver, dan juga Text Editor opensource seperti Sublime text editor,Kali ini saya akan membahas tentang cara membuat dokumen HTML atau belajar menulis kode HTML dengan menggunakan editor teks Notepad.

Sebelum menulis kode kode HTML ada baiknya kita mengetahui terlebih dahulu mengenal 4 istilah pada HTML yaitu: Element,Tag,Attribut,dan Value

1. Elemet

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.

Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke halaman lain:

<a>

2. Tag

Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.

Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

3. Attribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.

Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.

Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.

Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen tersebut (href):

<a href=``http://www.adelano21.blogspot.co.id''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan

4. Value

Value merupakan nilai dari pada suatu attribut yang yang didefinisikan pada suatu tag HTML misalnya pada attribut href=”value’’

Contoh nya pada kode dibawah ini :

<a href=”http://www.adelano21.blogspot.co.id”> ini adalah sebuah link </a>

Kesimpulannya didalam element terdapat tag,didalam tag terdapat attribut,didalam attribut harus berisi nilai,semuanya itu memiliki pasangan masing masing

Cara Menulis Kode HTML

Langkah pertama, Klik Start>All Programs>Accessories>Notepad atau klik Windows+R di keyboard dan ketik 'notepad' tanpa tanda petik
pada notepad ketikan teks seperti gambar di bawah :
Tag dasar HTML

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.

Elemen DOCTYPE

Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.

Elemen HTML

Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.

Elemen head

Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.

Elemen title

Memberikan judul dokumen.

Elemen body

Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.

Jangan Lupa Setiap penulisan pada tag HTML Ada Tag Pembukan <nama_tag> dan harus diakhiri dengan tag penutup </nama_tag>
lalu simpan hasil nya dengan klik Ctrl+S di keyboard dan beri nama file tesebut dengan exstensi .html Contoh : "belajar.html" lalu ubah save as type menjadi all files, dan klik OK.

Untuk melihat hasilnya, cari file tersebut yang telah anda simpan tadi, biasanya type file tersebut firefox document. klik 2x file itu, sehingga hasilnya akan terbuka di web browser mosilla firefox.