Typography dan link
Sekilas tentang typography
Tipography adalah seni dari tata huruf, biasanya istilah ini digunakan oleh vendor
dari css, seperti bootstrap, ionic, prettify dan jenis framework lainnya. Namun, html
juga telah memiliki tampilan standar terkait tata huruf ini.
1. Paragraph
Paragraf hanya diwakili oleh elemen <p>, elemen paragrap dirancang untuk
mengorganisir konten dengan teks yang panjang. Karena elemen ini adalah block
elemen maka elemen ini akan selalu ditampilkan dalam baris baru. Kemudian
browser akan otomatis memberikan jarak pada sebelum dan sesudah elemen ini.
Idealnya sebuah paragrap diwakili oleh satu elemen <p>.
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<strong>paragraf hanya diwakili oleh 1 elemen p</strong>
<p>Lorem ipsum dolor sit ame....
Nulla facilisi. Mauris molestie...
Vestibulum ante ipsum primis in...
Vivamus ut dolor sit amet ...
Integer iaculis augue ...</p>
<br /><br />
<strong>paragraf yang masing-masing diwakili oleh elemen p</strong>
<p>Lorem ipsum dolor sit ame....</p>
<p>Nulla facilisi. Mauris molestie, ...</p>
<p>Vestibulum ante ipsum primis in...</p>
<p>Vivamus ut dolor sit amet ...</p>
<p>Integer iaculis augue ...</p>
</body>
</html>
2. Heading
Heading atau judul diwakili oleh elemen <h1> sampai <h6>. Pada banyak kasus
elemen heading tidak mengalami banyak perubahan biasanya yang berubah hanya
ukuran font nya saja. Perlu dicatat adalah kebanyakan mesin pencari atau search
engine menyimpan informasi website melalui elemen heading ini, elemen <h1>
mewakili judul paling atas atau judul utama menyusul hingga subjudul diwakili
oleh <h2> dan seterusnya.
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
3. Font
Elemen <font> berfungsi untuk merubah ukuran, jenis huruf dan warna font, baik
yang berada di paragraph maupun header atau tulisan dalam elemen lainnya.
Untuk merubah warna, jenis tulisan maupun ukran tulisan dengan cara
menambah atribut dari elemen font.
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<p><font color="red" face="Verdana, Geneva, sans-serif"
size="+1">Your formatted text goes here</font></p>
</body>
</html>
Atribut color untuk mengatur nilai warna font dapat diganti dengan nama warna
yang lain misal “green, blue” dan lain-lain.
Atribut face berfungsi untuk mengatur jenis tulisan font, misalnya “arial, times
new roman” dan lainnya
Sedangkan atribut size untuk mengatur ukuran font, nilai “+1” artinya nilai yang
sekarang ditambah dengan 1, dapat juga diisi dengan nilai “12”,”13” dan
seterusnya.
4. Style
Style yang biasa digunakan dalam pemformatan teks biasaya tebal, miring, garis
bawah, teks di atas, teks di bawah dan lainnya.
Masing-masing dari pemformatan tersebut diwakili oleh elemen tertentu.
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Berikut daftar lengkap elemen-elemen yang berfungsi sebagai pemformatan teks :
<b> - teks tebal
<strong> - teks tebal
<i> - teks miring
<em> - teks miring/penekanan
<mark> - teks stabilo
<small> - teks mengecil
<del> - teks terhapus/coret
<ins> - teks garis bawah
<sub> - teks bawah
<sup> - teks atas
<center> - teks rata tengah
5. Quote
Teks quote atau kutipan sebenarnya termasuk salah satu dari style di atas, namun
elemen elemen jenis ini spesial hingga memiliki pembahasan terpisah. Ada
beberapa elemen yang berhubungan dengan kutipan, mengutip yaitu antara lain :
a. Elemen <blockquote>, berfungsi untuk menandai teks sebagai kutipan biasanya
teks akan bergeser lebih ke kanan.
b. Elemen <q>, berfungsi untuk menambahkan tanda kutip di pada teks.
c. Elemen <abbr>, berfungsi untuk mendefenisikan sebuah singkatan
d. Elemen <address>, berfungsi untuk menandakan informasi alamat, biasanya
teks akan menjadi miring.
e. Elemen <cite>, berfungsi untuk menandakan teks sebagai kutipan dari buku,
jurnal dan lain-lain, biasanya teks hanya berubah jadi miring.
f. Elemen <bdo>, berfungsi untuk menganti arah penulisan teks misalnya dari
kanan ke kiri.
di bawah ini adalah contoh untuk keseluruhan elemen Quote :
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100 countries and
is supported by more than one million members in the United States and
close to five million globally.
</blockquote>
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo dir="rtl">This text will be written from right to left</bdo>
</body>
</html>
6. List
Dalam dokumen html terdapat tiga jenis daftar atau list yaitu ordered list dan
unordered list serta description list. Ordered list biasanya ditandai dengan angka,
huruf ataupun romawi sedangkan unordered list ditandai dengan titik bulat,
lingkaran dan lainnya. Contoh list dalam html :
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Atrbiut type pada ordered list
Atribut type pada elemen ol, berfungsi untuk menentukan pendanda dari list,
bawaan elemen ini adalah list dengan angka.
Type Deskripsi
type="1" Angka (bawaan)
type="A" List dengan A besar
type="a" List dengan a kecil
type="I" List dengan romawi besar
type="i" List dengan romawi kecil
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers, letter and roman</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
7. Link
Link dapat ditemukan hampir di semua website, link memungkinkan pengguna
untuk menklik agar dapat pindah ke halaman lain. Istilah link disebut juga dengan
hyperlink. Saat mouse digerakkan di atas elemen link ini maka cursor akan
berubah menjadi tangan penunjuk (). Format umum link :
<a href="url">link text</a>
Yang paling penting dari elemen link adalah atribut href yang mana adalah alamat
tujuan website. Konten link yaitu link text akan ditampilkan di browser
sedangkan teks “url” tidak ditampilkan (disembunyikan). berikut adalah contoh
penggunaan link :
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p>Lanjut Ke <a href="https://www.unimed.ac.id/">Universitas Negeri
Medan</a></p>
</body>
</html>
Penggunaan link tidak harus berada dalam elemen <p>, malah link dapat
digunakan hampir diseluruh elemen.
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<div>Lanjut Ke <a href="https://www.unimed.ac.id/">Universitas Negeri
Medan</a></div>
<br />
<a href="https://facebook.com">Facebook</a>
</body>
</html>
Atribut target dari link :
_self - bawaan. Buka halaman di jendela yang sama
_blank - buka halaman di tab baru
_parent - buka halaman di tab yang sama (sama dengan _self)
_top - buka halaman di seluruh jendela browser (sama dengan _self)
Contoh kode :
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.unimed.ac.id/" target="_blank">Visit Unimed!</a>
<p>If target="_blank", the link will open in a new browser window or
tab.</p>
</body>
</html>
