Belajar HTML

Pengenalan HTML

HTML adalah bahasa dasar pembangunan web (web programming). Apa itu HTML ? HTML adalah singkatan dari Hyper Text Markup Language, merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan Web tersebut yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.

Hosting Unlimited Indonesia

Untuk kupon diskon nya pakai link ini aja Klik disini

Cara Membuat file HTML

Untuk membuat file HTML sangatlah mudah. Anda cukup menuliskan beberapa baris kata yang ingin anda tampilkan dan simpan filenya dengan ekstensi html. Tapi biasanya secara default, Windows menyembunyikan ekstension sehingga agak sulit bagi anda untuk mengubah extension-nya. Maka, kita perlu menampilkannya terlebih dahulu.

Coba ketik di Notepad anda seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>

Sekarang coba lihat preview nya.. sebelumnya, file notepad tersebut disimpan ke drive D:\ dengan nama websiteku.html dengan “save as type” pilih “all files”. Kemudian buka browser, dari menu File klik Open dan tujukan ke D:\websiteku.html “klik Ok” maka halaman website pertama anda akan ditampilkan..”Ini adalah dokumen HTML pertamaku“..  hehe…

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti : doctype, tag, atribut dan nilai. Doctype adalah deklarasi type documen HTML (DTD) yang digunakan. Tag terdiri dari lambang-lambang khusus seperti: ” <“, ” >” dan “/”, untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka “<html>” dan diakhiri dengan tag penutup ” </html>”. Kemudian segala sesuatu yang berada diantara tag pembuka dan tag penutup disebut dengan Elemen HTML.

Tag HTML kemudian ada yang memiliki atribut diikuti dengan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor=”0000ff”>, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).

Untuk menuliskan tag-tag HTML bisa menggunakan huruf besar maupun huruf kecil. Namun bila DTD atau type documen yang digunakan adalah XHTML maka penulisan tag-tag HTML dan CSS harus menggunakan huruf kecil. Biasanya penulisan tag-tag HTML dan CSS menggunakan huruf kecil walaupun doctype-nya adalah HTML karena akan terlihat lebih halus dan rapi.

XHTML adalah gabungan dari XML dan HTML jadi tetap menggunakan kode-kode HTML hanya ada peberapa perbedaan yang mudah dipelajari nantinya kalau sudah tahu dan mengerti tentang HTML.

Dalam pelajaran HTML selanjutnya kita akan membahas tentang tag-tag dasar HTML seperti contoh diatas diantaranya : <html>, <head> dan <body>..

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag-tag HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari tag-tag tersebut.

Doctype pada baris pertama diatas adalah deklarasi dari dokumen HTML yang digunakan jadi bukan tag HTML, sebagai contoh diatas DTD yang digunakan adalah HTML5.

Tag pertama pada dokumen HTML diatas adalah : ” <html>” tag ini merupakan awal dari suatu dokumen HTML, dan tag ” </html>” merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html> atau disebut juga dengan elemen HTML.

Kemudian tag ” <head>…</head>” (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.

Tag berikutnya adalah ” <title>…</title>” merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan “Ini adalah dokumen HTML pertamaku“..

Dengan cara anda masing-masing mulailah mencari ketiga tag diatas (HTML, HEAD dan BODY).. Dengan melihat kode sumber kita juga bisa belajar tentang tag-tag apa saja yang ada di antara tag <html>, tag <head> maupun yang berada di antara tag <body>.


Format Text dan Tulisan HTML

Format teks atau tulisan untuk membuat paragraf pada HTML adalan <p>, lantas bagaimana jika kita ingin menuliskan baris baru di dokumen HTML? coba tulis kode berikut di dokumen HTML anda :

<p>Aku sedang belajar membuat paragraf pada HTML dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>ngan baris baru.<br>Ini baris baru yang lain.</p>

Aku sedang belajar membuat paragraf pada HTML dan ini contohnya.

Ini contoh paragraf yang lainnya.

Ini juga paragraf mm…tapi de-
ngan baris baru.
Ini baris baru yang lain.

Jadi untuk membuat paragraf pada HTML adalah tag elemen <p>…</p>, dan untuk membuat baris baru adalah tag <br>, perlu diketahui bahwa sebagian tag HTML ada yang tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr> untuk membuat garis horisontal, <img> untuk menyisipkan gambar kedalam dokumen HTML.

Untuk mem-format text, ada beberapa tag yang biasa digunakan,  diantaranya :

<strong> Menebalkan huruf
<em> Memiringkan huruf
<ins> Menggarisbawahi huruf
<del> Mencoret huruf
<kbd> Membuat huruf keyboard
<sub> Membuat huruf subscripted
<sup> Membuat huruf superscripted
Hyperlink HTML
Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut adalah contoh Hyperlink di dokumen HTML :

Jika anda ingin mengunjungi YouTube <a href="https://www.youtube.com/">klik disini</a>

Jika anda ingin mengunjungi YouTube klik disini

Untuk membuat hyperlink dengan menggunakan gambar. Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :

<a href="https://www.yahoo.com"><img src="yahoo.gif" border="0" width="147" height="31"></a>

Tag img adalah tag untuk menyisipkan gambar pada dokumen HTML, border adalah garis yang mengelilingi sisi gambar, width dan height merupakan lebar dan tinggi dari image.

Kreatiflah untuk menganti nilai yang ada diantara tanda “…” sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align=”…”, left= kiri, center= tengah dan right= kanan.

<a href="https://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="right"></a>

 

Walaupun kelihatan agak rumit ketika kita melihat isi dari kode sumber tersebut tetapi kalau diperhatikan secara seksama bahwa rumus penulisan tag-tag html tersebut selalu sama.

Sumber  :

Pengenalan HTML dan Belajar HTML

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *