Modul 3 STMIK IKMI CIREBON Oleh Dita rizki amalia
Konsep Dasar Typography Macam dan jenis typography Materi Pokok 1. Materi Pokok Konsep Dasar Typography Macam dan jenis typography Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> Implementasi Typography Styling menggunakan CSS Studi Kasus
2. Pengantar Ada dua cara untuk pengaturan style teks, yaitu menggunakan heading dengan tag <h> atau menggunakan font dengan tag <font>. Pengantar
3. Capaian Pembelajaran Mata Kuliah Kemampuan menguasai konsep Typography Kemampuan mengkonstruksi tag <h1>, <p> dan <blockquote> Kemampuan melakukan berbagai macam styling pada tag <h1>, <p>, <blockquote> seperti, merubah warna font, jenis font, text alignment, line height, text-shadow, text-transform, ukuran font dll menggunakan css . Capaian Pembelajaran
4. Kemampuan Akhir Mahasiswa mampu menjelaskan Konsep Typography Mahasiswa mampu mengkonstruksi tag <h1>, <p> dan <blockquote> Mahasiswa mampu Melakukan berbagai macam styling pada tag <h1>, <p>, <blockquote> seperti, merubah warna font, jenis font, text alignment, line height, text-shadow, text-transform, ukuran font dll menggunakan css Kemampuan Akhir
5. Kegiatan Belajar a. Uraian dan Contoh 1) Konsep Dasar Typography a) Style dari teks Ada dua cara untuk pengaturan style teks, yaitu menggunakan heading dengan tag <h> atau menggunakan font dengan tag <font>. Heading <h> menyediakan 6 style teks yang dapat diatur menggunakan angka dari 1 sampai 6, dimana angka 1 adalah ukurang yang paling besar, biasanya digunakan untuk judul atau sub judul, yang dicetak besar dan tebal (bold). Heading mempunyai attribut untuk mengatur perataan yaitu Align=”Left | Center | Right”. Sedangkan bila menggunakan cara kedua maka digunakan tag <font> dimana tersedia 7 style teks yang dapat dipilih menggunakan tingkatan dari 1 sampai 7, yang merupakan kebalikan dari heading, dimana 1 adalah ukuran terkecil sedangkan 7 adalah ukuran terbesar, dan tidak tebal. Kegiatan Belajar
1) Konsep Dasar Typography b) Pengaturan Format Tata Letak Pengaturan tata letak disni untuk mengatur tampilan teks agar terlihat rapi dan sesuai dengan keinginan, yaitu meliputi pengaturan paragraph, ganti baris baru, pengaturan posisi judul atau sub judul, yaitu diletakkan posisi kiri, tengah atau kanan dari halaman web, mencetak secara miring untuk penekanan suatu kata, dan lain sebagainya. Kegiatan Belajar
2) Macam dan jenis typography a) Style dari teks Di dalam tag <font> dapat ditambahkan attribut, diantaranya sebagai berikut : Ukuran : size=”angka 1 s/d 7” Warna Teks : color=”warna” Jenis font yang dikehendaki : face=”tipe_font” Kegiatan Belajar
2) Macam dan jenis typography a) Style dari teks Contoh: Kegiatan Belajar
2) Macam dan jenis typography a) Style dari teks Outputnya: Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Tag-tag yang digunakan disini adalah meliputi tag : Paragraf : <p> atrributnya adalah Align=”letak” Ganti baris : <br> Preformatted : <pre> . . . </pre> Indentasi (tabulasi) : <blockquote> . . . </blockquote> Huruf tebal : <b> . . . </b> atau <strong> . . . </strong> Huruf miring : <i> . . . </i> atau <em> . . . </em> Huruf garis bawah : <u> . . . </u> Subscript : <sub> . . . </sub> Superscript : <sup> . . . </sup> Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Huruf kecil : <small> . . . </small> Huruf Besar : <big> . . . </big> Perataan tampilan teks : <div align=”...”> Mencoret Teks : <strike> . . . </strike> Garis horisontal : <hr> memiliki atribut sebagai berikut : Align=”letak” Size=”angka ketebalan” Width=”angka Lebar” NoShade Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Teks dapat lebih dibuat menarik dengan menjalankan teks yang diinginkan. Teks berjalan dapat dibuat dengan tag : <marquee> . . . </marque> Adapun atribut yang dapat ditambahkan pada tag <marquee>, sebagai berikut : Mengatur warna background teks : bgcolor=”warna” Mengatur arah gerakan : direction=”left | right | up | down” Mengatur perilaku gerakan : behavior=”scroll | slide | alternate” Scroll : teks bergerak berputar, Slide : teks bergerak sekali lalu berhenti Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Alternate : teks bergerak ke kiri lalu ke kanan, dst Menampilkan pesan tool tip : title=”pesan” Kecepatan gerakan dlm pixel : scrollamount=”angka” {makin banyak, makin cepat} Waktu tunda gerakan : scrolldelay=”angka” {dalam milidetik} Mengatur lebar blok : width=”lebar” {dalam pixel atau persen} Mengatur tinggi blok : height=”tinggi” Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Contoh: Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Contoh: Kegiatan Belajar
2) Macam dan jenis typography b) Pengaturan Format Tata Letak Outputnya: Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> a) Membuat Heading Heading dapat diibaratkan sebagai judul bab dan subbab. Dalam dokumen XHTML terdapat heading sampai dengan kedalaman 6 level. Semakin besar levelnya, maka ukuran font yang tampil akan semakin kecil. Judul heading dituliskan di dalam blok body serta diapit dengan tag <hn> dan </hn>, dengan n=1, 2, 3, …, 6. Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> a) Membuat Heading Heading dapat diibaratkan sebagai judul bab dan subbab. Dalam dokumen XHTML terdapat heading sampai dengan kedalaman 6 level. Semakin besar levelnya, maka ukuran font yang tampil akan semakin kecil. Judul heading dituliskan di dalam blok body serta diapit dengan tag <hn> dan </hn>, dengan n=1, 2, 3, …, 6. Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> a) Membuat Heading Contoh : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> a) Membuat Heading Outputnya : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> a) Membuat Heading Outputnya : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> b) Membuat Paragraf Sebuah paragraf dapat di buat pada halaman HTML dengan mengapit teks paragraf dengan tag pembuka <p> dan diakhiri dengan </p>. Paragraf dituliskan pada blok body. Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> b) Membuat Paragraf Contoh : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> b) Membuat Paragraf Outputnya : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> c) Membuat blockquote Apabila ingin mempublish sebuah artikel yang didalamnya memuat pernyataan dari suatu sumber referensi maka sebaiknya gunakanlah kutipan. Dalam HTML terdapat dua jenis format kutipan, yaitu blockquote dan inline quote. Blockquote adalah kutipan yang di letakkan dalam blok tersendiri (tidak dalam satu paragraf d engan teks lain). Sedangkan inline quote adalah kutipan yan g terletak dalam suatu paragraf. Untuk membuat blockquote caranya dengan memberikan perintah <blockquote cite="url"> dan diak hiri dengan </blockquote>. Atribut cite digunakan untuk memberikan sumber referensi situs yang dikutip (sifatnya optional). Sedangkan untuk membuat inline quote caranya cukup dengan memberik an perintah <q> dan diakhiri dengan </q>. Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> c) Membuat blockquote Contoh : Kegiatan Belajar
3) Pengenalan Markup <h1>, <h2>, <h3>,<p>, <blockquote> c) Membuat blockquote Output Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Konten elemen HTML berupa teks bisa diatur tampilannya dengan melakukan pemformatan pada CSS. Property pada CSS yang digunakan untuk pemformatan teks antara lain : color, text-align, text-decoration, text-indent, dan text-transform Color Property “color” digunakan untuk mengatur tampilan warna konten / teks pada elemen HTML. Sintaks-nya : color: color-value; Keterangan : Color-value bisa menggunakan Hexadecimal, RGB ataupun color name. Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Contoh : Masing menggunakan file pada contoh sebelumnya (background styling), editlah Declaration pada bagian Selector “.artikel h1”, sehingga menjadi seperti berikut : .artikel h1 { background-color: maroon; color: #ffffff; } Note : ditambahkan property “color” Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Hasilnya, konten pada elemen H1 akan berwarna putih (#FFFFFF) seperti terlihat pada gambar di bawah ini : Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Heading Property “font-size” digunakan untuk menentukan ukuran dari font (huruf) yang akan ditampilkan. Property ini bisa diterapkan untuk elemen-elemen HTML yang berhubungan dengan pengolahan teks, seperti heading dan paragraf. Namun perlu dicatat bahwa, meskipun kita bisa melakukan pemformatan pada ukuran font, tetapi sangat tidak dianjurkan untuk menggunakan Property ini untuk menjadikan heading terlihat seperti paragraf dengan mengecilkan ukuran font-nya ataupun sebaliknya, menjadikan paragraf seperti heading dengan memperbesar ukuran font-nya. Tetap gunakan Tag Heading untuk membuat heading pada artikel. Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Contoh heading Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Output Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Contoh paragraf Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Output Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Font Pada CSS, dikenal dua jenis nama font family, yakni : a. Font Family; yaitu sebuah nama jenis font yang spesifik, seperti : “Times New Roman” atau “Arial”. b. Generic Family; yaitu kelompok font family yang memiliki kemiripan tampilan, seperti “serif”, “sans-serif” atau “monospace”. Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Font Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Font Untuk mengatur jenis font agar sesuai dengan yang diinginkan, pada CSS digunakan Property “font-family”. Sintaks-nya : font-family: <family-name> | <generic-family>; Keterangan : a. Value pada Property ini harus dinyatakan lebih dari satu jenis font (font-family), sebagai cadangan apabila font pertama tidak ditemukan, akan dicari font kedua, apabila tidak ditemukan juga akan dicari yang sejenis dengannya (generic-family) b. Jika nama font-family terdiri dari dua kata atau lebih, ditulis dengan menggunakan tanda petik ( “contoh nama font” ). Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Font Contoh : Edit Declaration untuk Selector “.artikel h1” dan “.artikel p”, sehingga menjadi seperti berikut : Kegiatan Belajar
4)Implementasi Typography Styling menggunakan CSS a)Text Styling Font Hasilnya, font pada elemen H1 akan ditampilkan dengan jenis font “Trebuchet MS” sedangkan pada elemen P dengan font “Palatino Linotype”. Perhatikan gambar di bawah ini: Kegiatan Belajar
b. Latihan Buatlah halaman web sederhana sebagai homepage pribadi, yang berisi tentang data pribadi misalkan NIM, nama, alamat rumah, tempat & tanggal lahir, riwayat pendidikan, email, hobby, karya-karya penelitian program yang pernah dibuat. Kegiatan Belajar
c. Rangkuman Typografi mengatur dua komponen dari teks yaitu: 1) Style dari teks 2) Pengaturan format tata letak Sedangkan Typografi pada css mengatur tentang 1) Color 2) Heading 3) Paragraf 4) Font Kegiatan Belajar
Dengan menggunakan css buatlah script untuk tampilan html berikut ini: d. Tes formatif Dengan menggunakan css buatlah script untuk tampilan html berikut ini: Kegiatan Belajar
e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang typography dengan html dan css Kegiatan Belajar
6. Kunci Jawaban tes formatif
6. Kunci Jawaban tes formatif
7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi