Desain Web dengan Tag HTML Formatting Text Tujuan

Desain Web dengan Tag HTML Formatting Text

Tujuan • Memahami tag yang digunakan untuk memformat text • Mampu menerapkan tag yang digunakan untuk memformat text • Mampu membuat daftar • Mampu memformat huruf

Elemen Header • Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. • Ada enam tingkatan header mulai dari H 1 hingga H 6 • Contoh: <H 3>Contoh</H 3>

Atribut Align • Tag header juga memiliki pensejajaran (alignment) yang sama maksudnya dengan paragraf • Alignment: – – Left Center Right Justify • Contoh: <H 1 align=center> </H 1>

Elemen Font • Font adalah huruf-huruf yang akan membentuk teks/tulisan. • Secara default font bergantung dari platform sistem operasinya • Contoh: <font>Contoh</font>

Atribut font • Face – Untuk membentuk type/jenis font – Bergantung yang tersedia di sistem operasi – Contoh: <font face=arial>Ini teks Arial </font> • Size – Untuk membentuk type/jenis font – Contoh: <font size=12>Ini teks ukuran 12 </font>

• Color – Untuk membentuk Warna font – Bergantung nama warna yang tersedia di sistem operasi atau memanfaatkan bilangan heksadesimal – Contoh: <font color=blue>Ini teks berwarna biru</font> – Contoh: <font color=#0000 FF>Ini teks berwarna biru</font>

Tag List • Ada dua macam daftar item yaitu daftar item tak berurut (bullet) dan daftar item berurut (numbering).

Unordered List • Daftar yang tak berurutan • Secara default menggunakan bullet • Contoh: – Soto Ayam – Rawon – Sop Merah – Asem daging

Contoh Menu Hari ini: <ul> <li> Soto Ayam </li> <li> Rawon </li> <li> Sop Merah </li> <li> Asem Daging </li> </ul>

Ordered List • Daftar yang berurutan • Secara default menggunakan angka • Contoh: Langkah menyimpan file di notepad: 1. Arahkan mouse ke menu bar, klik file 2. Klik Save 3. Beri nama pada file 4. Klik tombol Save

Langkah menyimpan file di notepad: <ol> <li>Arahkan mouse ke menu bar, klik file</li> <li>Klik Save</li> <li>Beri nama pada file</li> <li>Klik tombol Save</li> </ol>

Atribut List (Type) • Apabila menginginkan unordered list menggunakan jenis lain bukan bullet • Ada 4 atribut untuk bullet: – Square – Disc – Circle • Contoh: <ul type=square>. . . </ul>

• Apabila menginginkan ordered list yang berjenis lain bukan angka 1, 2, . . • Ada bermacam-macam atribut untuk ordered list: – A, B, C, . . . – I, III, . . . – i, iii, . . . • Contoh: <ol type=A>. . . </ul>

Tag Subscript • Untuk menulis huruf dibawah huruf yang lain • Teks atau kalimat yang dicetak dibawah huruf yanga lain diapit oleh tag <sub> • Tagnya: <SUB>. . . </SUB>

Tag Superscript • Untuk menulis huruf diatas huruf yang lain • Teks atau kalimat yang dicetak diatas huruf yanga lain diapit oleh tag <sup> • Tagnya: <SUP>. . . </SUP>

Tag Bold • Untuk cetak tebal • Teks atau kalimat yang dicetak tebal diapit oleh tag Bold • Tagnya: <B>. . . </B>

Tag Italic • Untuk cetak Miring • Teks atau kalimat yang dicetak miring diapit oleh tag Italic • Tagnya: <I>. . . </I>

Tag Underline • Untuk cetak tulisan yang digarisbawahi • Teks atau kalimat yang digarisbawahi diapit oleh tag Underline • Tagnya: <U>. . . </U>