HTML Heading
HTML Heading berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dari yang terbesar hingga yang terkecil. Nilai untuk ukuran huruf yang paling besar adalah <h1>, sedangkan yang paling kecil adalah <h6>. Agar lebih jelas, mari kita praktekan! Ketikan skrip berikut pada notepad, lalu simpan dengan nama heading.html.<html> <head> <title>Latihan Heading</title> </head> <body> <h1> Belajar Heading </h1> <h2> Belajar Heading </h2> <h3> Belajar Heading </h3> <h4> Belajar Heading </h4> <h5> Belajar Heading </h5> <h6> Belajar Heading </h6> </body> </html>
Maka hasilnya akan seperti gambar dibawah :
HTML Paragraf
Untuk membuat paragraf HTML kita dapat menggunakan tag <p> dan </p>. Oke, Langsung saja kita praktekan sodara-sodara. Ketikan skrip berikut, simpan dengan nama paragraf.html, lalu jalankan dibrowser kesayangan anda.
<html> <head> <title>Latihan Paragraf HTML</title> </head> <body> <p> Belajar buat paragraf </p> <p> Belajar buat paragraf yak :D </p> <p> Tes buat paragraf yak :D </p> </body> </html>
Hasil penggunaan tag <p></p>
Ngomong2, kita bisa juga lho menggabungkan beberapa tag html pada 1 file .html. Misalnya seperti contoh berikut ini. Ketikan skrip berikut, lalu save dengan nama coba.html, kemudian jalankan dibrowser kesayangan anda dan lihatlah hasilnya.
<html> <head> <title>Contoh: Inilah HTML Sebenarnya</title> </head> <body> <b> Ini Judul cetak tebal </b> <p> <b> ini judul cetak tebal didalam paragraf </b> </p> <br /> <br /> <h1> ini judul heading 1 </h1> <p> <h1> ini judul heading 1 dalam paragraf </h1> </p> <hr /> <h4> hallo, aku heading 4, dan aku berada didalam tag body :D </h4> </body> </html>
Maka hasilnya akan seperti berikut :
HTML Format Teks
Untuk melakukan pemformatan terhadap suatu teks, kita dapat menggunakan beberapa tag html.
Lebih jelasnya, mari kita coba ketikan satu persatu tag html diatas pada notepad. Lalu save dengan nama format-text.html, kemudian jalankan dibrowser. jangan lupa berikan tag <br /> untuk membuat baris baru (line break/enter), agar text tidak terlihat kacau di browser.
<html> <head> <title>format teks</title> </head> <body> <b>Ini adalah huruf tebal</b> <br /> <u>Ini adalah huruf garis bawah</u> <br /> <i>Ini adalah huruf miring</i> <br /><br /> <strike> ini adalah huruf garis tengah </strike> <br /> <small> Ini adalah huruf yang sangat kecil </small> <br /> <big> Ini adalah huruf yang lebih besar dari normal </big> <br /> <sup> Ini adalah huruf superscript </sup> <br /> <sub> Ini adalah huruf subscript </sub> <br /> <br /> <em> Ini adalah huruf miring dengan tag em </em> <br /> <del> Ini adalah huruf garis tengah dengan tag del </del> <br /> <strong> Ini adalah huruf tebal dengan tag strong </strong> <br /> <ins> Ini adalah huruf garis bawah dengan tag ins </ins> </body> </html>
HTML Font
Untuk mendefinisikan suatu font, kita dapat menggunakan tag <font> dan </font>. Selain itu, untuk mengubah jenis huruf, ukuran, dan warna, kita dapat menggunakan beberapa attribute seperti yang tertera pada tabel dibawah ini.| Attribute | Deskripsi |
|---|---|
| size="nilai" | Digunakan untuk menentukan ukuran huruf. Contoh: <font> size=”3”> ini font ukuran 3pt </font> |
| face=”nilai” | Digunakan untuk menentukan jenis huruf. Contoh: <font face=”verdana”> ini font verdana </font> |
| Color=”nilai” | Digunakan untuk menentukan warna huruf. Contoh: <font color=”green”> ini font hijau </font> |
Contoh :
<html> <head> <title>HTML Font</title> </head> <body> <font size=”4”> Ini adalah font ukuran 4pt </font> <br /> <font color=”blue”> ini adalah font warna biru </font> <br /> <font face=”verdana”> ini adalah font jenis verdana </font> <br /> <br /> <font face=”arial” size=”4” color=”green”> ini adalah font warna hijau, dengan jenis huruf arial, dan berukuran 4pt :) </font> </body> </html>
HTML Preformatted Text
HTML Preformatted text di definisikan menggunakan tag <pre> dan </pre>. Tag ini berfungsi untuk menampilkan tulisan seperti yang kita tulis apa adanya di code editor.Contohnya :
<html> <head> <title>HTML Preformatted Text</title> </head> <body> <pre> Saya lagi belajar html preformatted text Menggunakan Tag pre, kamu mau ikutan nggak? Kalo mau ayo :D </pre> </body> </html>
Hasilnya :
HTML List
HTML List digunakan untuk membuat daftar (list), yang fungsinya untuk mengelompokan data baik secara (Ordered List) ataupun (Unordered List). Ordered list artinya data diurutkan secara berurutan contohnya seperti 1, 2, 3 dan seterusnya. Sedangkan Unordered list artinya data diurutkan secara tidak berurutan, dan biasanya ditandai dengan lambang bulatan hitam. Tag yang digunakan untuk ordered list adalah <ol> ... </ol> yang didalamnya terdapat elemen list yaitu tag <li> dan </li>, sedangkan tag yang digunakan untuk unordered list adalah <ul> ... </ul> yang didalamnya juga terdapat element list yaitu tag <li> dan </li>. Contohnya sebagai berikut:
<html> <head> <title>HTML List</title> </head> <body> Daftar belanjaan hari ini: <ol> <li> Gula </li> <li> Semen </li> <li> Marmer </li> <li> Magic Jar </li> </ol> Daftar Makan Sahur: <ul> <li> Telur dadar </li> <li> Nasi Goreng </li> <li> Rendang Ayam </li> <li> Soto dan Asbes </li> </ul> </body> </html>
taraaaa ... hasilnya :
Okee sampai di sini Belajar HTML Dasar Part 2: HTML Fundamental, jika ada yang ingin ditanyakan silahkan tanyakan di kolom komentar, bantu share ya!
Tidak ada komentar:
Posting Komentar