HTML berperan sebagai struktur untuk membangun sebuah halaman
website.
Di antara tag pembuka dan tag penutup elemen, kita dapat meletakkan
sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML
lain. Contohnya, elemen <html> memiliki konten yaitu elemen <head> dan
juga elemen <body>. Lalu, elemen <head> memiliki konten berupa
elemen <title> yang di dalamnya memiliki konten berupa teks dari judul
halaman yang ditampilkan.
Elemen <html>
Hirarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu
sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa
ini merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah
berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten
elemen ini.
Elemen <head>
Elemen <head> pada berkas HTML berfungsi sebagai tempat
disimpannya informasi dari dokumen HTML. Informasi dapat berupa
elemen meta, style, atau link. Dan juga elemen penting lainnya yang
berfungsi menampilkan judul dari dokumen HTML didefinisikan dengan
menggunakan elemen <title>. Berikut contoh elemen yang berada pada
konten head:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
Elemen <body>
Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada
halaman website. Maka dari itu, elemen ini digunakan untuk menampung
seluruh konten atau elemen yang ditampilkan ke dalam jendela browser.
Kecuali jika kita ingin menuliskan sebuah catatan kecil pada berkas HTML,
kita perlu gunakan commenting tag (<!-- -->). Semua yang dituliskan di
antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk
pada tampilan di jendela browser.
Lorem Ipsum
Lorem ipsum adalah teks standar yang ditempatkan untuk
mendemonstrasikan elemen grafis atau presentasi visual seperti font,
tipografi, dan tata letak. Tujuan penggunaan lorem ipsum sebagai berikut:
1. Sebagai pengisi sementara jika belum ada konten teks.
2. Jika ingin menunjukkan hasil website sementara di mana audiens
diharapkan lebih fokus kepada elemen desain yang dipresentasikan
dan bukan pada isi teks.
Berikut catatan penting yang sudah kita pelajari sejauh ini:
Website : Halaman yang menampilkan informasi kepada pengguna berupa teks atau
gambar. Website dapat diakses melalui internet dengan menggunakan browser.
Browser : Sebuah perangkat lunak yang dapat menerjemahkan berkas HTML, CSS,
dan JavaScript yang didapat dari web server untuk ditampilkan dalam bentuk
halaman website.
HTTP Server : Server berperan pada sebuah website sebagai sebuah software yang
dapat menerima transaksi dari HyperText Transfer Protocol.
DNS Server : Server yang dapat mengubah/mengarahkan website melalui sebuah
nama domain.
Client : Perangkat yang meminta (request) suatu layanan tertentu ke suatu server.
HTML : Salah satu bahasa markup (markup language) yang digunakan untuk
membuat struktur dan menampilkan konten pada World Wide Web (Website).
CSS : Bahasa markup yang digunakan untuk mengatur dan mempercantik tampilan
pada website.
JavaScript : Bahasa pemrograman yang digunakan untuk
membantu website menampilkan informasi secara dinamis.
Text Editor : Sebuah perangkat lunak yang digunakan untuk mengelola plain text.
Kode HTML, CSS, dan Javascript dituliskan menggunakan perangkat ini.
Plain Text : Teks yang tidak terformat. Format teks ini digunakan dalam penulisan
berkas HTML, CSS, dan Javascript.
Rich Text : Teks yang terformat. Format teks ini digunakan jika kita ingin menulis
menggunakan Microsoft Word atau teks editor berbasis WYSIWYG (What You See Is
What You Get).
Element : Sebuah komponen pada HTML yang ditandai dengan tag pembuka dan
penutup.
Atribut HTML
Atribut ini berfungsi memberikan informasi tambahan pada sebuah
elemen. Atribut dituliskan pada tag pembuka sebuah elemen setelah nama
dari elemennya tersebut ditulis.
1. Contoh :
<p lang="id">Kota metropolitan terbesar di Provinsi Jawa
Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
kita menetapkan artibut bahasa (dengan penulisan lang) dengan
nilai “id” atau Indonesia (kode bahasa bisa kita explore pada link
berikut: [Link] )
pada sebuah elemen paragraf.
Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa
menuliskan kembali seluruh struktur atribut di samping dari atribut
yang sudah ada.
Contoh:
<p lang="id" translate="no">Kota metropolitan terbesar di
Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi
tersebut.</p>
Pada elemen HTML terdapat dua jenis atribut, yaitu Global
Attribute dan atribut yang hanya bisa digunakan pada elemen
tertentu.
Paragraf
Paragraf adalah elemen paling mendasar dari sebuah dokumen teks.
Pada HTML, kita bisa menunjukkan sebuah paragraf dengan
menggunakan elemen <p>.
List
Seperti yang sudah disebutkan pada pembahasan paragraf, tidak semua
teks dibungkus oleh paragraf, salah satunya list.
Pada HTML terdapat tiga tipe list:
Unordered lists : daftar yang ditampilkan tidak memiliki urutan.
Ordered lists : daftar yang ditampilkan secara terurut.
Description lists : daftar yang terbuat dari beberapa istilah diikuti
dengan deskripsi dari istilah tersebut.
Unordered List
Seperti namanya, unordered list merupakan daftar yang tidak
mementingkan urutan. Standarnya, unordered
list menampilkan bullet pada tiap item list-nya (tetapi kita bisa
mengubahnya dengan styling).
Untuk menetapkan konten sebagai unordered list kita
gunakan <ul></ul> kemudian di dalam elemen tersebut kita gunakan
tags <li></li> untuk menetapkan item pada list
Di antara tag elemen <li>, kita dapat mengisikan konten apapun termasuk
elemen HTML lain.
Ordered List
Ordered list digunakan untuk membuat list yang mementingkan urutan.
Contohnya, membuat daftar instruksi langkah demi langkah sehingga
dibutuhkan urutan yang sesuai. Ordered list bekerja seperti unordered list,
namun perbedaanya pada tiap item menampilkan angka bukan
sebuah bullet.
Untuk menetapkan konten sebagai ordered list kita gunakan <ol></ol>.
Sama seperti Unordered list, tiap item dalam list ditetapkan dengan
menggunakan tags <li></li>