bewoksatukosong.com | Halo Semua Balik dengan om bewok, kali ini om bewok bakal melanjutkan tutorial bootstrap mengenai tipografi atau huruf.
Yang tidak tau tipografi keterlaluan sekaliii, kalau kalian gatau, tanya sana sama yang tahu !! , om bewok juga ga tau soalnya haha.
Oh iya By the way Jika kamu ingin melihat tutorial bootstrap keseluruhan kamu bisa lihat di sini
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Yang tidak tau tipografi keterlaluan sekaliii, kalau kalian gatau, tanya sana sama yang tahu !! , om bewok juga ga tau soalnya haha.
Oh iya By the way Jika kamu ingin melihat tutorial bootstrap keseluruhan kamu bisa lihat di sini
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Tipografi adalah suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin. sumber : http://infoberita-21.blogspot.co.id/2012/11/pengertian-tipografi.html
Maaf om bewok cari di blog perngertianya tapi kurang lebih seperti itu lah artinya maklum om bewok ga pinter nulis.
Lah terus artikel yang udah di buat sebanyak 85 biji siapa yang buat coba ? lu kan wok dan teman lu si pak aji. :)), Yapp exactly
Lah terus artikel yang udah di buat sebanyak 85 biji siapa yang buat coba ? lu kan wok dan teman lu si pak aji. :)), Yapp exactly
Tidak usah basa basi lagi padahal memang artikel ini basi.
1. BELAJAR HEADING
1. BELAJAR HEADING
Mungkin kalau kalian sudah belajar html mungkin sudah tau seperti <h1>, <h2>, <h3>, <h4>, <h5> atau <h6> nah di bootstrap ini di sediakan juga, dan jika kita tambahkan yang lain seperti <small> maka ukuranya akan mengikuti dari heading tersebut.
Contoh ya : misalnya kita buat h1 nah ketika kita membuat small ya ukuranya sangat pas untuk kecilnya, beliau ini maksudnya (si small) akan mengikuti <h1> tersebut maksudnya kecil nya ahh bingung praktekin aja deh secara langsung. Biar ga bingung om kasih makanan ya, eh maksudnya kodingan ya.
Contoh ya : misalnya kita buat h1 nah ketika kita membuat small ya ukuranya sangat pas untuk kecilnya, beliau ini maksudnya (si small) akan mengikuti <h1> tersebut maksudnya kecil nya ahh bingung praktekin aja deh secara langsung. Biar ga bingung om kasih makanan ya, eh maksudnya kodingan ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1>halo nama aku <small>Bewok</small></h1>
<h2>Aku tinggal di <small>Bekasi</small></h2>
<h3>Makanan kesukaan saya <small>Nasi goreng</small></h3>
<h4>Hobby saya adalah <small>Makan</small></h4>
<h5>Saya tidak suka sama orang yang ngomongnya <small>Nyelekit/sakitin orang</small></h5>
<h6>kegagalan adalah proses yang <small>tertunda loh </small>jadi mumpung masih muda jangan putus semangat dan jangan menyerah</h6>
</body>
</html>
Maka Hasilnya seperti dibawah ini :
 |
| Gambar 1.1 Perhatikan Syntax Small. Small mengikuti heading |
2. INLINE TEXT ELEMENT
2.1 Marked Text ini yang mana jika ada kata yang penting maka huruf nya akan berbeda dari yang lain, kita bisa menggunakan <mark>tulis di sini</mark>. contoh codingnya dan hasilnya bisa lihat dibawah ini ya :
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1>halo nama saya <mark>bewok</mark> umur saya 22 tahun
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 2.1 Perhatikan tulisan bewok |
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
2.2 Coret Text maksudnya adalah gausah pake penjelasan contohnya aja yang om bewok kasih tau. nih Nah yang maksud di coret text nya seperti tulisan yang om bewok ketik ini, tapi masih bisa kebaca kan, . nah caranya gampang banget
<s>teks di sini</s>.
Kodinganya seperti di bawah ini ya.
<s>teks di sini</s>.
Kodinganya seperti di bawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<p>Halo nama saya <s>bewok umur saya 22</s> </p>
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 2.2 menggunakan syntax |
3. MEMBUAT GARIS BAWAH ATAU UNDERLINE
Caranya gampang banget loh bro, kamu tinggal memasukan coding seperti <u>teks di sini </u> Nah lengkapnya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<p><u>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</u> </p>
</body>
</html>
Maka, hasilnya seperti dibawah ini ya.
 |
| Gambar 3 Underline |
4. Membuat Alignment classes (align left ,right ,center and justify)
Mungkin ini jarang sekali digunakan, biasanya para front end membuat align pada css, tapi tidak apa - apa biar disini juga tau cara membuat align secara langsung di html. biar ga bingung kita praktekan saja secara langsung.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<p class="text-left">Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | Ini adalah align kiri | </p>
<p class="text-right">Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.Ini adalah align kanan |.</p>
<p class="text-center">Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.Ini adalah align tengah |.</p>
<p class="text-justify">Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.Ini adalah align justify |.</p>
<p class="text-nowrap">ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | ga pake semuanya | </p>
</body>
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 4 Membuat alignment class |
5. MEMBUAT TRANSFORMASI CLASS
Maksudnya gini jadi tiap huruf bisa di ubah ukuran nya, mau jadi hurufnya kapital semua, atau huruf kecil semua atau juga tiap kata huruf besarnya kapital, langsung saja kita coba praktekan.
Maksudnya gini jadi tiap huruf bisa di ubah ukuran nya, mau jadi hurufnya kapital semua, atau huruf kecil semua atau juga tiap kata huruf besarnya kapital, langsung saja kita coba praktekan.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<p class="text-lowercase">Tulisanya gede semua loh eh maksudnya kapital</p>
<p class="text-uppercase">tulisAn InI Dr AlaY MeNjadI KeCiL SemUa MaKaSih eAA</p>
<p class="text-capitalize">kalau ini tiap kata, kata depanya selalu gede - gede kayak badan kamuuu#ngomongSamaCEWE DASAR GENDUT#diPutusin </p>
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 5 Membuat Transformasi Class |
6. ABBREVIATIONS
Abbreviations adalah jika ada kata yang tersentuh maka muncul kepanjangan dari kata tersebut, biasanya ini untuk kata yang di singkat dan jika ingin kepanjangan nya bisa langsung di sentuh. Seperti contoh di bawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Tipografi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<p>Adi pingsan dan langsung dibawah ke
<abbr title="Unit Kesehatan Sekolah" class="initialism">UKS</abbr>
oleh teman - teman nya
</p>
</html>
Maka Hasilnya seperti dibawah ini ya.
 |
| Gambar 6 Abbreviations |
Itu saja tutorial untuk tipografi. Jika teman - teman ingin melihat semua tutorial series dari bootstrap ini, kamu bisa lihat di bawah ini ya
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
No comments:
Post a Comment