Perancangan Dengan HTML

HTML atau hypertext markup language bukan sebuah bahasa pemrograman, seperti namanya yaitu markup language artinya bahasa penandaan. HTML digunakan sebagai penanda apa yang harus ditampilkan di layar oleh komputer. Berbeda dengan bahasa pemrograman yang memiliki logika tertentu, HTML hanya bersifat ketikan yang berisi perintah ditampilkan atau tidak. Jadi yang membedakan antara markup language dan programming language adalah logika yang ada di dalamnya.

Markup language ini yang akan membangun konstruksi sebuah aplikasi. Jika dianalogikan markup language ini merupakan kerangka dari sebuah aplikasi. Ada beberapa jenis markup language yang ada seperti KML, MathML, SGML, XHTML (mirip seperti HTML namun huruf besar dan huruf kecil dibedakan, merupakan aplikasi dari XML), XML (fokus pada transfer data), dan tentu saja HTML (fokus pada penyajian data dan merupakan aplikasi dari SGML). Secara analogi sebelum membangun rumah tentu dibangun terlebih dahulu strukturnya atau pondasi awalnya, nah fungsi dari markup language adalah membuat struktur atau pondasi awalnya.

Struktur HTML terdiri atas beberapa elemen yang setiap elemen itu dibuat tag pembuka dan tag penutup. Nah, di antara tag pembuka dan tag penutup itulah dimungkinkan menaruh konten. Kemudian pada setiap elemen ini seringkali diperlukan informasi tambahan yang disebut attribute. Attribute tersebut ditulis di tag pembuka setelah nama elemen. Ada 2 jenis attribute, yaitu global dan specific. Contoh dari global attribute atau bisa digunakan pada setiap elemen adalah id, class, dan style. Elemen heading <h1> hingga <h6> merupakan elemen yang penting untuk mengembangkan teknik SEO atau search engine optimization.

Untuk memasukkan gambar digunakan tag <img src="..." alt="..." height="" width="">. Pada attribute src bisa dimasukkan halaman url atau alamat yang ada di folder dan nama filenya. Biasanya image ditempatkan di dalam folder bernama assets kemudian di dalam folder tersebut ada folder image. Dalam penulisan konten juga perlu diperhatikan teks yang terformat. Elemen <blockquote> digunakan untuk kutipan, kemudian <pre> digunakan untuk menampilkan teks sesuai yang tertulis di teks editor, dan <figcaption> digunakan untuk merepresentasikan konten tersendiri. Elemen lain:

• <a> : anchor untuk membuat hyperlink url atau id pada elemen lain
• <em> : emphasized untuk kata yang perlu penekanan
• <strong> : untuk menunjukkan kaya yang begitu penting
• <q> : quotation mirip dengan blockquote tetapi ini inline
• <cite> : citation untuk rujukan
• <dfn> : definition untuk mendefinisikan suatu istilah
• <sub> : subscript untuk membuat teks kecil di bawah
• <sup> : superscript untuk membuat teks kecil di atas
• <mark> : menandai teks yang perlu mendapat perhatian
• <br> : line break untuk membuat garis baru

Sebelum HTML5 pengorganisiran halaman konten menggunakan elemen <div>, jadi setiap bagian pada halaman konten dibungkus oleh tag tersebut. Kemudian pada HTML5 pengorganisiran halaman konten sudah dibedakan dengan <header>, <main>, <div>, <aside>, dan <footer>. Perhatikan pengorganisiran konten pada halaman:

• <header> : bagian pembuka dari konten (biasanya terdiri atas jumbotron dan navigasi)
• <footer> : bagian penutup dari konten
• <main> : bagian untuk menampung konten utama pada body
• <nav> : menampung navigasi
• <article> : menampung artikel
• <aside> : informasi yang berhubungan dengan artikel
• <section> : biasanya untuk artikel seksi1, artikel seksi2 dst
• Generic element:
• <div> : wadah atau container untuk menampung beberapa konten, biasanya untuk memudahkan styling
• <span> : mirip dengan div, bedanya ini inline

Secara struktur dari HTML pada elemen body terbagi atas 3 bagian besar, yaitu header, main, dan footer. Perhatikan struktur HTML di bawah:

sumber: anonim

Yang tidak kalah penting adalah struktur tabel yang terdiri atas <table>, <tr>, <th>, dan <td>. Kalau di perangkat pengolah kata semacam excel atau calc ada merge cell, nah, untuk tabel bisa juga menggunakan attribute colspan untuk menggabnungkan beberapa kolom dan rowspan untuk menggabungkan beberapa baris.

Sekarang akan mulai dibuat struktur HTML yang terdiri atas header, navigation, article, dan footer, ikuti langkah di bawah:

1. Buka text editor (misalnya VS Code) dan buat file index.html
2. Lalu buka file tersebut dan buat template HTML standar dengan SHIFT + 1 > pilih !
• Jika berhasil maka tampilan struktur akan menjadi seperti di bawah:

• 

  sumber: anonim

3. Pada tag <body></body> buat tag header dengan nama ini header, gunakan syntax di bawah:
• <body>
• <header><h2>Ini Header</h2></header>
• </body>
4. Sekarang tambahkan tag <section></section> untuk membuat navigasi dan artikel, gunakan syntax di bawah:
• <body>
• <header><h2>Ini Header</h2></header>
• <section>
• </section>
• </body>
5. Pada tag <section></section> tambahkan tag <nav> untuk membuat navigasi, gunakan syntax di bawah:
• <body>
• <header><h2>Ini Header</h2></header>
• <section>
• <nav><a href="#">Menu1</a><br><a href="#">Menu2</a><br><a href="#">Menu3</a></nav>
• </section>
• </body>
6. Sekarang buat tag <article></article> di bawah tag </nav>, gunakan syntax di bawah:
• <body>
• <header><h2>Ini Header</h2></header>
• <section>
• <nav><a href="#">Menu1</a><br><a href="#">Menu2</a><br><a href="#">Menu3</a></nav>
• <article>
• <h1>Judul</h1>
• <p>Paragraf pertama</p>
• <p>Paragraf kedua</p>
• </article>
• </section>
• </body>
7. Kemudian buat tag <footer></footer> di bawah tag </section>, gunakan syntax di bawah:
• <body>
• <header><h2>Ini Header</h2></header>
• <section>
• <nav><a href="#">Menu1</a><br><a href="#">Menu2</a><br><a href="#">Menu3</a></nav>
• <article>
• <h1>Judul</h1>
• <p>Paragraf Pertama</p>
• <p>Paragraf Kedua</p>
• </article>
• </section>
• <footer><p>Ini Footer</p></footer>
• </body>
8. Struktur awal sudah jadi! buka file index.html dengan browser maka akan tampil seperti di bawah:

• 
  

sumber: anonim

Struktur awal sudah jadi, namun masih terlihat kaku walaupun sudah berhasil mengirimkan informasi. Agar lebih terpisah antar bagian maka masing-masing elemen akan dibungkus oleh blok denga tag <div></div>. Ikuti langkah di bawah:

1. Bagian yang akan dibungkus tag <div></div> adalah <header>, <nav>, <article>, dan <footer>, perhatikan syntax di bawah:
• <body>
• <div>
• <header><h2>Ini Header</h2></header>
• </div>
• <section>
• <div>
• <nav><a href="#">Menu1</a><br><a href="#">Menu2</a><br><a href="#">Menu3</a></nav>
• </div>
• <div>
• <article>
• <h1>Judul</h1>
• <p>Paragraf Pertama</p>
• <p>Paragraf Kedua</p>
• </article>
• </div>
• </section>
• <div>
• <footer><p>Ini Footer</p></footer>
• </div>
• </body>
2. Sekarang setiap elemen sudah dibungkus dengan <div>, untuk dapat melihat elemen tersebut berikan warna dengan menggunakan syntax <style:"background-color=gainsboro;", perhatikan syntax di bawah:
• <body>
• <div style="background-color:gainsboro;">
• <header><h2>Ini Header</h2></header>
• </div>
• <section>
• <div style="background-color:gainsboro;">
• <nav><a href="#">Menu1</a><br><a href="#">Menu2</a><br><a href="#">Menu3</a></nav>
• </div>
• <div style="background-color:gainsboro;">
• <article>
• <h1>Judul</h1>
• <p>Paragraf Pertama</p>
• <p>Paragraf Kedua</p>
• </article>
• </div>
• </section>
• <div style="background-color:gainsboro;">
• <footer><p>Ini Footer</p></footer>
• </div>
• </body>
3. Sekarang struktur dari HTML sudah lebih terlihat bentuknya, perhatikan gambar di bawah:
• 
  

  

  sumber: anonim

4. Perancangan dengan HTML sudah berhasil!

Setelah perancangan awal dibuat maka terkadang ada tambahan seperti pembuatan tabel dan formulir. Untuk membuat tabel digunakan tag <table></table>. Di dalam tag tersebut ada tr (table row), th (table header), dan td (table data). Sedangkan untuk membuat formulir digunakan tag <form></form>. Di dalam tag tersebut ada label dan input. Khusus pada input terdapat berbagai tipe seperti text dan button.

Sekarang akan dicoba untuk membuat tabel pada paragraf  pertama dan 2 input dengan 1 tombol pada paragraf kedua, ikuti langkah di bawah:

1. Untuk membuat table sisipkan syntax di bawah paragraf pertama:
• <table>
•         <tr>
•             <th>Nama</th>
•             <th>Alamat</th>
•         </tr>
•         <tr>
•             <td>Jokourno</td>
•             <td>Tangerang</td>
•         </tr>
•         <tr>
•             <td>Purnomo</td>
•             <td>Banten</td>
•         </tr>
• </table>
2. Kemudian pada paragraf kedua sisipkan syntax di bawah paragraf kedua:
• <label>Masukan nilai matematika</label>
• <input type="text"><br>
• <label>Masukan nilai fisika</label>
• <input type="text"><br>
• <label>Masukan nilai biologi</label>
• <input type="text"><br>
• <input type="button" value="Rata-Rata">
3. Tabel dan formulir sederhana sudah terbuat!

Kerangka dari HTML ini sungguh masih belum baik secara penampilan dan operasi. Untuk memperbaiki tampilan maka diperlukan CSS dan untuk melakukan instalasi operasi maka diperlukan JS. Nah, untuk pemasangan JavaScript pada HTML diperlukan pemahaman DOM atau document object model.

ref:
https://www.w3schools.com/html/