Downloaded 27 times
Uploaded byNacha Evangelion
4.format html (ok)
Dokumen tersebut memberikan penjelasan tentang berbagai format penulisan HTML dalam 3 kalimat, yaitu penjelasan tentang penggunaan heading, physical style, dan berbagai jenis list seperti ordered list, unordered list, dan definition list.
More Related Content
4.format html (ok)
- 1. Memformat HTML • Heading • Phisical Style • Font • Ganti Baris dan Garis Horizontal • List (Daftar) • List Definisi
- 2. Heading • Heading adalahsekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML. • HTML menyediakan enam buah tingkat heading. Heading level 1 biasanya merupakan judul yang penting atau judul utama, sedangkan heading level berikutnya merupakan bagian atau sub judul dari judul utama. • Untuk menyatakan heading, digunakan tag <Hx> dimana x merupakan nomor level heading dari 1 sampai 6, sedangkan untuk mengakhirinya digunakan tag akhir </Hx>.
- 3. 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>
- 4.
- 5. Atribut Heading • Atributyang dapat ditambahkan pada elemen heading adalah ALIGN dimana memiliki nilai sebagai 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>
- 6. Phisical Style • Phisicalstyle adalah suatu jenis format yang diberikan pada teks tanpa tergantung pada jenis dari elemen dasar teks tersebut. • Elemen-elemen ini sudah sering kita pakai dalam program pengolah kata, seperti menebalkan atau membuat miring suatu teks.
- 7.
- 8. 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>
- 9.
- 10. Font – MenentukanUkuran Teks • Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan nilai dari 1 sampai 7. • Semakin besar angka, maka semakin besar ukuran teks tersebut.
- 11. 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>
- 12.
- 13. Font – MengubahWarna Teks • Untuk mengubah warna dapat menggunakan atribut COLOR pada elemen FONT. • Pendefinisian warna dapat dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB warna. • Kode warna dalam heksa. black #000000 blue #0000FF olive #808000 white #FFFFFF fuchsia #FF00FF green #008000 red #FF0000 gray #808080 teal #008080 yellow #FFFF00 silver #C0C0C0 navy #000080 lime #00FF00 maroon #800000 purple #800080 aqua #00FFFF
- 14. Contoh: <html> <head> <title>Font-Mengubah warna teks</title> </head> <body> <fontcolor =”red”>teks berwarna merah</font> <font color=”#8A2BE2”>Teks berwarna Blueviolet</font> </body> </html>
- 15. Font – MengubahJenis Font • Atribut FACE pada elemen FONT dapat digunakan untuk membuat bermacam-macam jenis font pada suatu page. Jenis-jenis font seperti ARIAL, TIMES NEW ROMAN, CENTURY GOTHIC, COURIER NEW dan sebagainya. • Contoh: <Font Face=”arial”>Font jenis Arial</font> <Font Face=”Comic San MS”> Jenis Font Comic San MS</font>
- 16. Contoh Font: <html> <body> <p><font size="3"color="red" face="Times New Roman">This is some text!</font></p> <p><font size="2" color="blue" face="Comic Sans MS">This is some text!</font></p> <p><font face="Monotype Corsiva" color="green">This is some text!</font></p> </body> </html>
- 17.
- 18. Referensi Font • http://www.bigoo.ws/help/help_font.aspx •http://www.tizag.com/htmlT/font.php
- 19. Ganti Baris danGaris Horizontal • Elemen yang digunakan untuk ganti baris adalah BR (break rule) berguna untuk menuliskan 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>
- 20. Ganti Baris danGaris Horizontal • Sedangkan untuk membuat garis horizontal, diperlukan elemen HR (horizontal rule). • Ada beberapa atribut yang dapat digunakan untuk mengubah tampilan garis seperti untuk mengubah panjang, ketebalan, warna dan efek bayangan(3-D). Cara penulisan tag: <hr> atau <hr/>
- 21. Atribut HR • Atribut-atributyang dapat ditambahkan pada elemen HR:
- 22. 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>
- 23.
- 24. List (Daftar) • Untukmenampilkan informasi dalam bentuk daftar, HTML menyediakan beberapa jenis elemen, 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)
- 25. List - Orderedlist • Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. • Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. • Sedang untuk menyatakan list item, menggunakan tag <LI>.
- 26. Contoh: <html> <body> <h4>Contoh Ordered List:</h4> <ol> <li>Fakultas Teknologi Informasi dan Komunikasi</li> <li>Fakultas Ekonomi</li> <li>Fakultas Psikologi</li> <li>Fakultas Hukum</li> <li>Fakultas Teknik</li> </ol> </body> </html>
- 27.
- 28. Atribut Ordered List •Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor menjadi huruf atau bilangan romawi juga dapat mengatur nomor awal untuk daftar.
- 29.
- 30.
- 31. List - Unorderedlist • Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan. • Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>. • Sedang isi daftar menggunakan tag <LI>.
- 32. Contoh: <html> <body> <h4>Atribut Pada UnorderedList</h4> <ul > <li>atribut Type="disc"</li> <li>atribut Type="circle"</li> <li>atribut Type="square"</li> </ul> </body> </html>
- 33.
- 34. Atribut Unordered List •Atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE
- 35.
- 36.
- 37. Kombinasi Ordered Listdan Unordered List Contoh: <li>Teh <html> <ul type="circle"> <body> <li>Teh hitam</li> <h4>Contoh Kombinasi Ordered List <li>Teh hijau</li> dan Unordered List:</h4> </ul> <ol> </li> <li>Kopi <li>Susu</li> <ul type="square"> </ol> <li>Arabika</li> </body> <li>Capucino</li> </html> </ul> </li>
- 38.
- 39. List Definisi • Listdefinisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istilah (glossary list). Terdapat tiga tag yang digunakan untuk menyusun suatu daftar istilah :
- 40. Contoh: <html> <body> <h4>Contoh List Definisi:</h4> <dl> <dt>HTML</dt> <dd>HyperText Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman-halaman web. </dd> <dt>Internet Explorer</dt> <dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman-halaman web. </dd> </dl> </body> </html>
- 41.