1. Ukuran Font
Size=n adalah atribut yang digunakan untuk mengatur besarnya ukuran font. Nilai n berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7. Untuk lebih jelasnya tuliskan kode berikut kemudian simpan dengan nama ukuran_font.html.
< !DOCTYPE html >
< html >
< head >
< title > Ukuran Font < /title >
< /head >
< body >
< font size="1" > ini adalah ukuran Font 1 < /font > < br >
< font size="2" > ini adalah ukuran Font 2 < /font > < br >
< font size="3" > ini adalah ukuran Font 3 < /font > < br >
< font size="4" > ini adalah ukuran Font 4 < /font > < br >
< font size="5" > ini adalah ukuran Font 5 < /font > < br >
< font size="6" > ini adalah ukuran Font 6 < /font > < br >
< font size="7" > ini adalah ukuran Font 7 < /font > < br >
< /body >
< /html >
Berikut adalah tampilan dalam Text Editor SublimeText3:
Dan Ini adalah hasil dari ukuran_font.html:
2. Jenis Font
Untuk mengatur jenis font Anda dapat menggunakan atribut face dengan sintaksis face=string. Nilai string berupa string yang menunjukkan nama font dan biasa lebih dari satu. Ketikkan kode berikut untuk mengetahui hasil dari penulisan jenis font, kemudian simpan dengan nama jenis_font.html.
< !DOCTYPE html > < html > < head > < title > Jenis Font < /title > < /head > < body > < font face="Tahoma" > Ini adalah jenis tulisan Tahoma < /font > < br > < font face="Arial" > Ini adalah jenis tulisan Arial < /font > < br > < font face="Courier New" > Ini adalah jenis tulisan Courier New < /font > < br > < font face="Century Gothic" > Ini adalah jenis tulisan Century Gothic < /font > < br > < font face="Times New Roman" > Ini adalah jenis tulisan Times New Roman < /font > < /body > < /html >
Berikut adalah tampilan dari Text editor Sumblime Text:
Dan ini adalah hasil dari kode jenis_font.html:
3. Warna Font
Untuk mengatur warna font Anda dapat menggunakan atribut color dengan sintaksis color= #RRGGBB. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB). Anda juga dapat menggantikan #RRGGBB dengan konstanta warna yang ada pada browser.
Untuk lebih jelasnya silahkan ketik kode berikut kemudian simpan dengan nama font_color.html.
< !DOCTYPE html >
< html >
< head >
< title > Warna Tulisan < /title >
< /head >
< body >
< font color="black" > Ini Adalah Warna Hitam < /font > < br >
< font color="blue" > Ini Adalah Warna Biru < /font > < br >
< font color="red" > Ini Adalah Warna Biru < /font > < br >
< font color="green" > Ini Adalah Warna Hijau < /font > < br >
< font color="yellow" > Ini Adalah Warna Kuning < /font > < br >
< font color="purple" > Ini Adalah Warna Ungu < /font > < br > < hr >
< font color="#ffffff" > Ini Adalah Warna Putih < /font > < br >
< font color="#000000" > Ini Adalah Warna Hitam < /font > < br >
< font color="#f0f0g88f" > Ini Adalah Warna Pink < /font >
< /body >
< /html >
Berikut adalah tampilan dalam Text Editor SublimeText3:
Dan ini adalah hasil dari kode font_color.html:
B.Pengaturan Paragraf dan Format Karakter
Pengaturan Paragraf
Perataan Paragraf
Diwakili dengan tag < p align="..." > ...< /p >
Ada 4 jenis perataan yaitu left, center, right, dan justify.
Left -> Rata kiri
Center -> Rata tengah
Right -> Rata kanan
Justify -> Rata kiri kanan
Pengaturan Indentasi
Ada 3 macam bentuk indentasi :
- First Line < DD > - > membuat baris pertama menjorok ke dalam
- Hanging < BLOCKQUOTE > -> membuat semua baris menjorok ke dalam
- Daftar Definisi < DT > -> membuat suatu paragraf yang dijelaskan dengan paragraf lain yang menjorok ke dalam
Diwakili dengan tag < p align="..." > ...< /p >
Ada 4 jenis perataan yaitu left, center, right, dan justify.
Left -> Rata kiri
Center -> Rata tengah
Right -> Rata kanan
Justify -> Rata kiri kanan
Preformatted Text
Digunakan untuk menampilkan sama dengan apa yang kita tulis pada dokumen html.
Tag untuk preformatted text adalah < pre > ... < /pre >
Contoh :
< html >
< head >
< title > Paragraf < /title >
< /head >
< body >
< p align="left" > Paragraf ini merupakan paragraf rata kiri dengan
menggunakan align left. < /p >
< p align="center" > Paragraf ini merupakan paragraf rata tengah
dengan menggunakan align center. < /p >
< p align="right" > Paragraf ini merupakan paragraf rata kanan
dengan menggunakan align right. < /p >
< p align="left" > Paragraf ini merupakan paragraf rata kiri kanan
dengan menggunakan align justify. < /p >
< dd > Paragraf ini menggunakan tag DD sehingga baris
pertamanya menjorok ke dalam. Dimulai dengan tag & lt dd & gt
dan ditutup dengan tag & lt /dd & gt . < /dd >
< blockquote > Paragraf ini menggunakan tag blockquote,
sehingga tidak hanya baris pertamanya saja yang menjorok ke
dalam, melainkan semua barisnya juga ikut menjorok ke dalam.
< /blockquote >
< dl >
< dt > Daftar definisi < /dt >
< dd > Daftar definisi adalah susunan paragraf yang berselang-
seling antara paragraf normal dan paragraf yang menjorok ke
dalam yang merupakan penjelasan dari paragraf normal
tersebut. < /dd > < /dl >
< /body >
< /html >
C.Ordered list dan Unordered list
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada html. Sedangkan Unordered list adalah kebalikannya yaitu metode mengurutkan daftar dengan menggunakan simbol atau special character pada html. Pemburtan daftar pada ordered list dan unordered list pada html menggunakan < li > untuk menampilkan isi dari daftar.
Contoh :
Coba script dibawah ini untuk Ordered List :
< html >
< head > < title > ordered list < /title > < /head >
< body >
< ol >
< li > saya
< li > dia
< li > kamu
< /ol >
< /body >
< /html >
Maka hasilnya akan seperti di bawah ini :
Coba script dibawah ini untuk Unordered List :
< html >
< head > < title > unordered list < /title > < /head >
< body >
< ul >
< li > saya
< li > dia
< li > kamu
< /ul >
< /body >
< /html >
Maka hasilnya akan seperti di bawah ini :
Ordered list di bagi atas beberapa macam yaitu dengan tipe angka, abjad, angka romawi. Macam macam type ordered list :
Jika type="1" maka akan menampilkan 1,2,3,....
Jika type="a" maka akan menampilkan a,b,c,....
Jika type="A" maka akan menampilkan A,B,C,....
Jika type="i" maka akan menampilkan i,ii,iii,....
Jika type="I" maka akan menampilkan I,II,III,....
Coba script di bawah ini :
< html >
< head > < title > ordered list < /title > < /head >
< body >
< ol type="i" >
< li > saya
< li > saya
< li > saya
< /ol >
< ol type="A" >
< li > dia
< li > dia
< li > dia
< /ol >
< /body >
< /html >
Maka hasilnya akan seperti di bawah ini :
Unordered list di bagi atas beberapa macam yaitu dengan tipe berbentuk lingkaran dengan warna hitam (default), lingkaran berwarna putih dan bentuk kotak.
Macam macam type unordered list :
type="disc" (default) untuk bentuk lingkaran berwarna hitam
type="square" untuk bentuk lingkaran kotak
Coba script di bawah ini :
< html >
< head > < title > ordered list < /title > < /head >
< body >
< /ul >
< ul type="square" >
< li > dia
< li > dia
< li > dia
< /ul >
< ul type="disc" >
< li > saya
< li > saya
< li > saya
< /ul >
< /body >
< /html >
Maka hasilnya akan seperti di bawah ini :
0 komentar:
Posting Komentar