Bismillahirrahmanirrahiim
Dalam membuat kerangka web design tentunya kita menggunakan yang namanya Html. Dalam format html kita harus mengetahui banyaknya tag-tag,element-element dan attribut yang dibutuhkan ketika kita membuat layout halaman sebuah web, disini saya membahas tag tag html tersebut beserta contohnya yang langsung dapat sobat praktekan, dalam satu pembahasan saya tidak membahas semua tag tag yang ada di html melainkan beberapa darinya, karena jikalau kebayakan nanti sobat bosan membacanya, jadi saya putuskan untuk menyambungnya pada postingan selanjutnya untuk tag tag yang lain, dan pada postingan ini adalah lanjutan dari postingan yang lalu. Oke langsung saja
UKURAN FONT
Untuk mengatur huruf dokumen html digunakan tag . Tag memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan nama file font_size.html
<!Doctype Html> <html> <head> <title>Ukuran font</title> </head> <body> <font size=1>Ukuran 1 <font size=2>Ukuran 2 <font size=3>Ukuran 3 <font size=4>Ukuran 4 <font size=5>Ukuran 5 <font size=6>Ukuran 6 <font size=7>Ukuran 7 </body> </html>Hasilnya akan terlihat seperti gambar dibawah ini .
JENIS FONT
Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan nama file font_face.html
<!Doctype Html> <html> <head> <title>Jenis Font</title> </head> <body> <font size=5> <font face ="Comic Sans MS">Comic Sans MS ABCdef123</font><p> <font face ="Small Fonts">Small Fonts ABCdef123</font><p> <font face ="Symbol">Symbol ABCdef123</font><p> <font face ="WingDings">WingDings ABCdef123</font><p> </font> </body> </html>Hasilnya akan terlihat seperti gambar dibawah ini :
Manipulasi Teks
Untuk memberi efek, dekorasi atau pun manipulasi teks pada html diantaranya adalah menebalkan, tulisan miring(italic), memberi coretan dan lain-lainnya
Contoh :
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan nama file manipulasi_teks.html
<!Doctype Html> <html> <head> <title>Manipulasi Teks</title> </head> <body> <! PSYSICAL STYLE> <b>Tebal</B> <! untuk menebalkan teks > <i>Miring</I> <! untuk membuat teks terlihat miring> <u>Garis Bawah</U> <! untuk menggarisbawahi teks> <s>Tercoret</S> <! untuk memberikan coretan pada teks><strike>Tercoret juga</STRIKE> <! untuk memberikan coretan pada teks ><blink> Berkedip</BLINK> <! untuk membuat teks berkedip ><tt>Seperti mesin tik</TT> <! untuk menampilkan teks dalam font typewriter > <big>Tulisan Besar</BIG> <! untuk membesarkan teks > <small>Tulisan Kecil</SMALL> <! untuk mengecilkan teks > Teks <sub>subcript</SUB> <! untuk membuat teks subscript> Teks <sup>supercript</SUP> <! untuk membuat teks superscript> </body> </html>Hasil dari code html diatas terlihat seperti gambar dibawah ini .
WARNA FONT
Attribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan namafile warna_font.html
<!Doctype Html> <html> <head> <title>Warna Font</title> </head> <body> <font size=5> <font color="red">Warna merah... </font><p> <font color= "#FF0000" size="5">Yang ini warna merah </font><p> <font color= "#00FF00" size="5">Kalo yang ini hijau </font><p> </font> </body> </html>Hasilny akan terlihat seperti gambar dibawah ini .
ORDERED LIST
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan namafile ordered_list.html
<!Doctype Html> <html> <head> <title>Link</title> </head> <body> <! ORDERED LIST > ORDERED LIST <ol> <li>baris pertama</li> <li>baris kedua </li> <li>baris ketiga </li> <li>baris keempat </li> </ol> </body> </html>Hasilny akan terlihat seperti gambar dibawah ini .
UNORDERED LIST
Ketiklah dengan program notepa++ atau sublime text dan simpan dengan namafile unordered_list.html
<!Doctype Html> <html> <head> <title>Link</title> </head> <body> <! UNORDERED LIST > UNORDERED LIST HTML menyediakan beberapa jenis daftar/list, yaitu : <ul> <li> Ordered List / numbered list (daftar berurut / daftar dengan nomor)</li> <li> Unordered List / bulleted list (daftar tak berurut / daftar dengan titik)mempunyai beberapa variasi,yaitu: <ul> <li type="disc"> UnOrdered List dengan tanda cakram (TYPE=disc) </li> <li type="circle"> UnOrdered List dengan tanda bulatan (TYPE=circle) </li> <li type="square"> UnOrdered List dengan tanda kotak (TYPE=square) </li> </ul> </li> <li> Menu </li> <li> Direc </li> <li> Defin </li> </ul> </body> </html>Hasilny akan terlihat seperti gambar dibawah ini .
sampai disini dulu tutorial mengenai tag Html dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file pdfnya bisa didownload disini.
0 Comments
Berkomentarlah dengan baik dan sopan