HTML Programming 2 - Font dan Align Pada HTML
Assalamu'alaikum
Selamat sore, melanjutkan kembali pembahasan mengenai html. Di kesempatan kali ini kita akan mencoba latihan dasar mengenai bagaimana mengubah jenis font, heading font, informasi font, dan peletakkan rata kiri dan rata kanan.
Tag Heading
Heading merupakan peletakan judul sebuah dokumen. Dimana seperti yang kita tau, judul setiap dokumen menggunakan ukuran font lebih besar dari ukuran font paragram biasa dan umumnya bernotasikan Bold pada tulisan judul. Secara standar sendiri heading terbagi menjadi 6 model. Mulai dari yang terbesar H1 sampai ukuran terkecil H6. Tag heading sendiri diapit oleh <h1>..</h1> Berikut contoh htmlnya.
| <html> <head> <title>Latihan Heading</title> </head> <body> <h1>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h1> <h2>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h2> <h3>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h3> <h4>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h4> <h5>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h5> <h6>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</h6> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Heading Align
Tag heading memiliki elemen elemen yang bisa di gunakan salah satunya element untuk mengubah align yang di inginkan. Pada dasarnya bukan hanya tag heading saja yang bisa menggunakan element Align, artinya setiap tag yang ada pada scripting html tentu memiliki elemen elemen yang bisa mengkustumosasi suatu tag. Dan untuk elemen align memiliki 3 value yaitu left, center dan right. Berikut contoh tag heading dengan elemen align setiap value.
| <html> <head> <title>Latihan Heading</title> </head> <body> <h1 align="left">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - rata kiri</h1> <h2 align="center">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - rata tengah</h2> <h3 align="right">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - rata kanan</h3> </body> </html> |
Tag <hr>
Selanjutnya tag hr, digunakan untuk membuat garis horizontal. Di sini kita akan mengkustomisasi tag hr dengan elemen width untuk membuat garis horizontal dengan panjang width yang kita inginkan. Untuk elemen width sendiri miliki value yang bisa di gunakan antara value menggunakan px atau menggunakan persentase. Selain elemen width, saya juga menambahkan lain seperti :
- Size : untuk tebal garis horizontal yang dibuat
- Color : untuk memberi warna pada garis hr. Value color bisa berupa warna yang di inginkan atau code warna.
- Align : untuk mengarahkan rata tertentu garis hr yang dibuat.
Berikut contoh htmlnya dan lihat perbandingan perbedaan setiap value yang di masukan ke masing masing elemen yang dibuat.
| <html> <head> <title>Latihan Width</title> </head> <body> <hr align="left" width="50%" size="5" color="red"></hr> <hr align="center" width="1904px" size="2" color="#aaaaaa"> </body> </html> |
Tag <font>
Masuk ke tag font, tag font ini merupakan salah satu tag yang di perlukan untuk menuliskan tulisan kedalam sebuah web. Tag font sendiri lebih banyak digunakan untuk mengganti jenis font. Tentu font sendiri memiliki beberapa elemen seperti :
- Face : Untuk memilih jenis font
- Size : Menentukan ukuran font
- Color : Menentukan warna font
Langsung saja berikut contohnya script html font dengan menggunakan 3 elemen yang di sebutkan dan lihat sendiri perbandingannya.
| <html> <head> <title>Latihan Font</title> </head> <body> <font face="verdana" size="6" color="red">Verdana</font> <font face="Times New Roman" size="5" color="blue">Times New Roman</font> <font face="Arial" size="4" color="green">Arial</font> <br><br> <font face="verdana" size="6" color="red">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</font> <br> <font face="Times New Roman" size="5" color="blue">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</font> <br> <font face="Arial" size="4" color="green">Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</font> </body> </html> |
Tag Penekanan Pada Text
Diluar dari tag font ada beberapa tag yang bisa digunakan untuk mengkustomisasi penekanan pada text atau font seperti menebalkan atau tulisan miring ynag kita kenal denga italic dll. Berikut beberapa tag penekanan untuk text :
- <b>...</b> atau <strong>...</strong> : Untuk menebalkan text
- <u>...</u> : untuk memberikan garis bawah
- <i>...</i> : untuk membuat tulisan miring
- <strike>...</strike> : untuk coret text
- <small>...</small> : untuk membuat font berukuran kecil
- <sub>...</sub> : untuk cetak bawah
- <sup>...</sup> : untuk cetak atas
| <html> <head> <title>latihan 5</title> </head> <body> <strong>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - tulisan tebal</strong><br> <u>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - garis bawah</u><br> <i>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - tulisan miring</i><br> <strike>Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 - tulisan coret</strike><br> </body> </html> |
Demikian penjelasan mengenai tag dasar font, heading dan elemen elemen dasar yang perlu di ketahui. Kita lanjutkan di pertemuan berikutnya. Sekian dari saya saran dan pertanyaan bisa letakkan di kolom komentar baru update nih kolom komentar nya :v. Salam programming!!
Unknown