4.format html (ok)
TRANSCRIPT
![Page 1: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/1.jpg)
Memformat HTML• Heading• Phisical Style• Font• Ganti Baris dan Garis Horizontal• List (Daftar)• List Definisi
![Page 2: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/2.jpg)
Heading
• Heading adalah sekumpulan kata atau frasa yangmenjadi judul atau subjudul dalam suatu dokumenHTML.
• HTML menyediakan enam buah tingkat heading.Heading level 1 biasanya merupakan judul yangpenting atau judul utama, sedangkan heading levelberikutnya merupakan bagian atau sub judul darijudul utama.
• Untuk menyatakan heading, digunakan tag <Hx>dimana x merupakan nomor level heading dari 1sampai 6, sedangkan untuk mengakhirinyadigunakan tag akhir </Hx>.
![Page 3: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/3.jpg)
Contoh:<html><head>
<title>Contoh Heading</title></head><body>
<H1>Heading Level 1</H1><H2>Heading Level 2</H2><H3>Heading Level 3</H3><H4>Heading Level 4</H4><H5>Heading Level 5</H5><H6>Heading Level 6</H6>
</body></html>
![Page 4: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/4.jpg)
Hasil
![Page 5: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/5.jpg)
Atribut Heading
• Atribut yang dapat ditambahkan pada elemenheading adalah ALIGN dimana memiliki nilaisebagai berikut :▫ Align=”left”, untuk meratakan heading ke kiri▫ Align=”center”, untuk meratakan heading di
tengah▫ Align=”right”, untuk meratakan heading ke
kanan• Contoh penulisan adalah
<H1 ALIGN=”center”>Heading di rata Tengah</H1>
![Page 6: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/6.jpg)
Phisical Style• Phisical style adalah suatu jenis format yang
diberikan pada teks tanpa tergantung padajenis dari elemen dasar teks tersebut.
• Elemen-elemen ini sudah sering kita pakaidalam program pengolah kata, sepertimenebalkan atau membuat miring suatu teks.
![Page 7: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/7.jpg)
Elemen Physical Style
![Page 8: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/8.jpg)
Contoh:<html><head>
<title>Contoh Physical Style</title></head><body>
<b>Contoh teks Bold</b><br/><I>contoh teks miring</I><br/><U>contoh teks garis bawah</U><br/><S>contoh teks dengan coretan</S><br/><BLINK>contoh teks berkedip</BLINK><br/><TT>contoh teks tipe writer<TT><br/>contoh teks <BIG> yang diperbesar<BIG><br/>contoh teks <SMALL> yang diperkecil<SMALL><br/>contoh teks <sub> subscript</sub><br/>contoh teks <sup> superscript</sup>
</body></html>
![Page 9: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/9.jpg)
Hasil
![Page 10: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/10.jpg)
Font – Menentukan Ukuran Teks
• Untuk mengatur ukuran suatu teks, elemenFONT menyediakan atribut SIZE dengan nilaidari 1 sampai 7.
• Semakin besar angka, maka semakin besarukuran teks tersebut.
![Page 11: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/11.jpg)
Contoh:<html><head>
<title>Contoh Mengubah ukuran font</title></head><body>
<font size=1>ukuran teks=1</font><font size=2>ukuran teks=2</font><font size=3>ukuran teks=3</font><font size=4>ukuran teks=4</font><font size=5>ukuran teks=5</font><font size=6>ukuran teks=6</font><font size=7>ukuran teks=7</font>
</body></html>
![Page 12: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/12.jpg)
Hasil
![Page 13: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/13.jpg)
Font – Mengubah Warna Teks• Untuk mengubah warna dapat menggunakan atribut
COLOR pada elemen FONT.• Pendefinisian warna dapat dilakukan dengan dua cara
yaitu, melalui nama warna atau menggunakan nilaiRGB warna.
• Kode warna dalam heksa.
black #000000 blue #0000FF olive #808000white #FFFFFF fuchsia #FF00FF green #008000red #FF0000 gray #808080 teal #008080yellow #FFFF00 silver #C0C0C0 navy #000080lime #00FF00 maroon #800000 purple #800080aqua #00FFFF
![Page 14: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/14.jpg)
Contoh:<html><head><title>Font-Mengubah warna teks</title></head><body><font color =”red”>teks berwarna merah</font><font color=”#8A2BE2”>Teks berwarna Blueviolet</font></body></html>
![Page 15: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/15.jpg)
Font – Mengubah Jenis Font• Atribut FACE pada elemen FONT dapat digunakan
untuk membuat bermacam-macam jenis font padasuatu page. Jenis-jenis font seperti ARIAL, TIMESNEW ROMAN, CENTURY GOTHIC, COURIER NEWdan sebagainya.
• Contoh:
<Font Face=”arial”>Font jenis Arial</font><Font Face=”Comic San MS”> Jenis Font Comic SanMS</font>
![Page 16: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/16.jpg)
Contoh Font:<html><body>
<p><font size="3" color="red" face="Times New Roman">Thisis some text!</font></p>
<p><font size="2" color="blue" face="Comic Sans MS">This issome text!</font></p>
<p><font face="Monotype Corsiva" color="green">This is sometext!</font></p>
</body></html>
![Page 17: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/17.jpg)
Hasil:
![Page 18: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/18.jpg)
Referensi Font
• http://www.bigoo.ws/help/help_font.aspx• http://www.tizag.com/htmlT/font.php
![Page 19: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/19.jpg)
Ganti Baris dan Garis Horizontal
• Elemen yang digunakan untuk ganti barisadalah BR (break rule) berguna untukmenuliskan teks pada baris berikutnya.Cara penulisan tag:<br> atau <br/>
contoh:<Font Face=”arial”>Font jenis Arial</font><br><Font Face=”Comic San MS”> Jenis Font Comic San MS</font>
![Page 20: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/20.jpg)
Ganti Baris dan Garis Horizontal
• Sedangkan untuk membuat garis horizontal,diperlukan elemen HR (horizontal rule).
• Ada beberapa atribut yang dapat digunakanuntuk mengubah tampilan garis seperti untukmengubah panjang, ketebalan, warna dan efekbayangan(3-D).
Cara penulisan tag:<hr> atau <hr/>
![Page 21: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/21.jpg)
Atribut HR• Atribut-atribut yang dapat ditambahkan pada elemen
HR:
![Page 22: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/22.jpg)
Contoh:
<html><body><hr align="left" width="500" size="10" noshade><hr><hr align="center" width="400" size="7" color="red"><hr align="right" width="500" size="20" noshade
color="green"></body></html>
![Page 23: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/23.jpg)
Hasil
![Page 24: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/24.jpg)
List (Daftar)
• Untuk menampilkan informasi dalam bentukdaftar, HTML menyediakan beberapa jeniselemen, yaitu : Ordered list/numbered list (daftar berurut/daftar
dengan nomor atau abjad) Unordered list/bulleted list (daftar tidak
berurut/menggunakan bullet) Menu list (daftar menu) Directory list Definition list (glossary/daftar istilah)
![Page 25: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/25.jpg)
List - Ordered list
• Ordered list atau numbered list adalah suatudaftar dimana item-item yang ada di dalamdaftar tersebut memiliki nomor secaraberurut.
• Ordered list dimulai dengan tag awal <OL>dan diakhiri dengan tag akhir </OL>.
• Sedang untuk menyatakan list item,menggunakan tag <LI>.
![Page 26: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/26.jpg)
Contoh:<html><body><h4>Contoh Ordered List:</h4><ol>
<li>Fakultas Teknologi Informasi danKomunikasi</li><li>Fakultas Ekonomi</li><li>Fakultas Psikologi</li><li>Fakultas Hukum</li><li>Fakultas Teknik</li>
</ol></body></html>
![Page 27: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/27.jpg)
Hasil:
![Page 28: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/28.jpg)
Atribut Ordered List
• Ordered list memiliki atribut-atribut yang dapatdigunakan untuk mengganti nomor menjadi huruf ataubilangan romawi juga dapat mengatur nomor awaluntuk daftar.
![Page 29: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/29.jpg)
Contoh:
![Page 30: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/30.jpg)
Hasil:
![Page 31: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/31.jpg)
List - Unordered list
• Unordered list/bulleted list adalah suatudaftar dimana urutan tidak diutamakan, jadiitem-item dalam daftar bisa muncul dalamsembarang urutan.
• Unordered list dimulai dengan tag <UL> dandiakhiri dengan tag </UL>.
• Sedang isi daftar menggunakan tag <LI>.
![Page 32: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/32.jpg)
Contoh:
<html><body><h4>Atribut Pada Unordered List</h4><ul >
<li>atribut Type="disc"</li><li>atribut Type="circle"</li><li>atribut Type="square"</li>
</ul></body></html>
![Page 33: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/33.jpg)
Hasil
![Page 34: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/34.jpg)
Atribut Unordered List
• Atribut yang dapat ditambahkan pada tagunordered list adalah atribut TYPE
![Page 35: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/35.jpg)
Contoh:
![Page 36: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/36.jpg)
Hasil
![Page 37: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/37.jpg)
Kombinasi Ordered List danUnordered ListContoh:<html><body><h4>Contoh Kombinasi Ordered List
dan Unordered List:</h4><ol>
<li>Kopi<ul type="square">
<li>Arabika</li><li>Capucino</li>
</ul></li>
<li>Teh<ul type="circle">
<li>Teh hitam</li><li>Teh hijau</li>
</ul></li><li>Susu</li></ol></body></html>
![Page 38: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/38.jpg)
Hasil:
![Page 39: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/39.jpg)
List Definisi
• List definisi digunakan untuk mendefinisikan ataumenjelaskan istilah-istilah, oleh karena itu disebutjuga daftar istilah (glossary list). Terdapat tiga tagyang digunakan untuk menyusun suatu daftar istilah :
![Page 40: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/40.jpg)
Contoh:
<html><body><h4>Contoh List Definisi:</h4><dl>
<dt>HTML</dt><dd>Hyper Text Markup Language, merupakan bahasa markup yangdigunakan untuk membuat halaman-halaman web. </dd>
<dt>Internet Explorer</dt><dd>Web browser yang merupakan bawaan dari sistem operasiWindows, digunakan untuk menampilkan halaman-halaman web.</dd></dl></body></html>
![Page 41: 4.format html (ok)](https://reader034.vdocuments.mx/reader034/viewer/2022042700/559569331a28ab3a2c8b4618/html5/thumbnails/41.jpg)
Hasil: