Dalam membuat web, hal umum yang harus kalian tahu adalah dokumen pertama kali yang muncul sebagai muka adalah dokumen dengan nama index.html. Adapun untuk mengembangkan Web kalian harus tahu dengan istilah mockup. Mockup adalah sketsa sederhana sebagai bayangan untuk menulis dokumen HTML, sedangkan pada mockup hal yang pertama kali harus kalian perhatikan adalah anatomi yang berada pada mockup dokumen tersebut, dimana isi dokumen di mulai, dan apa saja yang ada didalam dokumen HTML tersebut. Mari mulai membuat anatomi pada mockup dokumen yang akan kalian buat:
Section Artikel
Mockup dokumen HTML sederhana: Kerangka dan kepala dokumen HTML
Hal umum yang kalian tahu bahwa HTML memiliki kerangka atau skeleton yang menjadi dasar browser untuk menterjemah dokumen HTML beserta isinya. Pada umumnya baris kode yang digunakan sebagai kerangka, seperti yang sebelumnya kalian pelajari, tag doctype, html, head, meta, title, body, footer. Maka mockup yang akan kalian buat adalah:
- Kalian ingin membuat halaman muka website berbentuk dokumen HTML, maka yang digunakan <!DOCTYPE html>.
- Seluruh isi dokumen dibuat dengan dan didalam bahasa markup atau HTML, maka yang digunakan <html></html>
- Kalian ingin memberi informasi kepada search engine bahwa isi website kalian tentang sebuah topik dan tema, maka yang digunakan pertama kali <header> karena berada pada kepala dokumen HTML, lalu yang kedua membuat <meta charset=”UTF-8″ name=”description” content=”Sebuah Topik”>.
- Kalian ingin membuat judul pada website kalian, maka yang digunakan adalah <title>Judul Website</title> yang berada didalam head tag.
- Kalian mempunyai isi konten, maka yang digunakan adalah <body>.
- Kalian ingin menambahkan footer untuk memberi informasi pada akhir website, maka yang digunakan adalah <footer>
Mockup dokumen HTML sederhana: Isi dokumen HTML atau Konten Website
Setelah kerangka atau skeleton pada dokumen HTML telah dibuat maka selanjutnya kalian menentukan isi dari dokumen HTML yang nantinya akan di terjemahkan oleh browser dan mesin pencari menjadi konten website kalian. Mockup sederhana yang akan penulis buat disini adalah, website yang berjudul DosenIT | Blog, dengan konten website yang berisi artikel – artikel bermanfaat berikut nama penulisnya. Maka mockup tersebut berisi:
- Main, <main>, tag yang digunakan untuk memberi tahu browser dan mesin pencari bahwa didalam tag tersebut berisikan isi dokumen atau konten daripada halaman website yang kalian buat.
- Section, <section>, tag yang digunakan untuk memberi tahu browser dan mesin pencari bahwa didalam tag main, terdapat berbagai seksi sebagai strukturnya.
- Article, <article>, tag yang digunakan untuk memberi tahu browser dan mesin pencari bahwa pada seksi tersebut terdapat merupakan isi halaman website yang berjenis artikel.
- Headings dan Paragraph, untuk membentuk struktur di dalam tag Article
- A, <a>, tag a yang diikuti dengan “href” untuk membentuk satu link guna memperindah dan memperbanyak informasi yang kalian berikan.
- Span, <span>, untuk memberikan anchor text pada baris a tag.
Mockup dokumen HTML sederhana: Membuat kaki dokumen HTML
Terakhir untuk menyelesaikan mockup dokumen HTML yang dibuat adalah dengan membuat kaki dokumen HTML tersebut sehingga pengunjung halaman website kalian bisa mengetahui informasi lebih lanjut tentang website yang kalian miliki. Pada umumnya, isi dari kaki dokumen HTML adalah informasi tentang hak cipta dari konten website yang terdapat dalam website. Adapun, hal lain selain dari informasi hak cipta tersebut, beberapa halaman – halaman website umum memberikan link yang berkaitan dengan sosial media dari website tersebut. Maka mockup tersebut berisi:
- Tag a yang digunakan untuk menyertakan link
- Img, <img>, adalah tag yang diikuti dengan src, digunakan untuk menyertakan gambar
Maka dari mockup diatas kita dapat membuat baris kode sebagai berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="description" content="Belajar IT">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DosenIT</title>
</head>
<body>
<main>
<section>
<article>
<h1>Belajar IT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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</p>
<a href="link ke profil penulis">Nama Penulis</a>
<h1>Belajar Pemrograman</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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</p>
<a href="link ke profil penulis">Nama Penulis</a>
</article>
</section>
</main>
<ul>
<li><img src="link foto social media"><a href="link social media website">Social Media</a></li>
</ul>
</body>
<footer id="main-footer">
<p>Copyright © Dosen IT</p>
</footer>
</html>Diatas adalah website sederhana yang memenuhi standar struktur atau skeleton pada dokumen HTML. Mulai gunakan berbagai tag, modifikasi dokumen kalian, sehingga kalian makin mahir dalam membuat halaman website.
