Jumat, 26 Juni 2015

Belajar HTML Dasar

Halo sobat, kali ini saya akan membahas tentang HTML. Saya yakin istilah HTML ini sudah sering kita dengar, apalagi pada zaman teknologi seperti saat ini, istilah ini sudah lah tidak asing lagi. Kata HTML merupakan singkatan dari HyperText Markup Language, yaitu sebuah bahasa yang digunakan untuk membuat sebuah halaman web yang berisikan sejumlah informasi-informasi di dalam sebuah penjelajahan web.

HTML memiliki struktur tubuh tersendiri, yang berupa gabungan dari beberapa tag/elemen yang berisikan sejumlah teks informasi. Berikut adalah struktur dari sebuah HTML:

Struktur dasar HTML

Sebuah halaman HTML harus memiliki 4 tag utama, yaitu tag htmlheadtitle dan body. Pada gambar di atas, dapat dilihat bahwa ada 2 tag html, yaitu <html> dan </html><html> merupakan tag permbuka, sedangkan </html> merupakan tag penutup. Pada HTML, sebuah tag atau elemen di mulai dengan tag pembuka dan diakhiri dengan tag penutup. Di dalam tag <html>terdapat tag <head> dan <body>. Di dalam tag <head> terdapat tag <title> yang berisikan judul title dari halaman HTML tersebut. Judul halaman yang di letakkan di tag <title> nantinya akan tertera pada tab browser. Dan tag <body> ini lah yang merupakan bagian dari HTML yang menampilkan segala informasi di dalam nya.

Selain dari keempat tag utama, masih banyak lagi tag-tag yang digunakan untuk membangun sebuah halaman HTML. Berikut saya sertakan table dari tag-tag HTML yang pada umumnya digunakan untuk membangun sebuah halaman HTML.


Nama Tag Tag / Elemen Penjelasan Cara Penggunaan Contoh Penggunaan
Paragraf <p> untuk membuat sebuah paragraf. Tag ini di letakkan di dalam tag <body>. <p>…</p> <p>Ini merupakan sebuah paragraf.</p>
Anchor <a> Untuk membuat sebuah link. Tag ini di letakkan di dalam tag <body> <a href="..."></a> <a href="https://www.facebook.com">Facebook Link</a>
Bold <b> Untuk membuat teks dengan huruf yang tebal. <b>...</b> <b>Ini teks tebal</b>
Italic <i> Untuk membuat teks dengan huruf yang miring. <i>...</i> <i>Ini teks miring</i>
Underline <u> Untuk membuat teks dengan garis bawah. <u>…</u> <u>Ini teks garis bawah</u>
Header <h1> s/d <h6> Untuk membuat teks header dengan ukuran yang besar(<h1>) sampai terkecil(<h6>) <h1>…</h1> s/d <h6>…</h6> <h3>Ini header ukuran H3</h3>
List Berurut <ol>, <li> Untuk membuat list berurut, dapat menggunakan angka(1, 2, 3, dst) ataupun huruf urutan(a, b, c, dst).  <ol><li>...</li><li>...</li></ol> <ol><li>List pertama</li><li>List kedua</li><li>List selanjutnya</li></ol>
List Tak Berurut <ul>, <li> Untuk membuat list tidak berurut, dapat menggunakan tanda titk atau tanda kotak.  <ul><li>...</li><li>...</li></ul> <ul><li>List pertama</li><li>List kedua</li><li>List selanjutnya</li></ul>
Tabel <table>, <tr>, <td> atau <th> Untuk membuat Table, untuk membuat baris table gunakan tag <tr>, sedangkan untuk membuat cell table gunakan tag <td> atau <th> <table><tr><th>...</th><td>...</td></tr></table> <table><tr><th>Table Header 1</th><td>Table Data 1</td></tr><tr><th>Table Header 2</th><td>Table Data 2</td></tr></table>
Image <img> Untuk menyisipkan gambar <img src="" width="" height=""> <img src="gambar1.jpg" width="120" height="120">

Untuk referensi lengkap dari tag-tag HTML lainnya, dapat dilihat pada halaman w3schools.

Sebuah halaman HTML dapat di buat menggunakan teks editor sederhana seperti notepad ataupun textpad. File halaman HTML pada umumnya di simpan dengan format file .html. Sekian informasi mengenai HTML dasar ini, semoga bermanfaat bagi sobat sekalian.

Salam hangat,

angel

Tidak ada komentar:

Posting Komentar