Pengenalan Dasar HTML
Langkah awal yang harus diketahui ketika kita memilih belajar bahasa pemrograman web adalah pengenalan dasar HTML. HTML atau Hyper Text Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, secara teknis HTML bukanlah bahasa pemrograman namun bahasa terstruktur yang fungsinya untuk menandai (Mark) bagian-bagian halaman, HTML terdiri dari beberapa susunan yaitu Tag, Elemen, dan Atribut sehingga browser dapat menerjemahkan dokumen HTML ke bentuk visual dan suara. Dalam pengenalan HTML disini, kita akan membahas mengenai struktur serta tag-tag yang ada didalam HTML.
- Struktur Utama HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Pelatihan 1 </title></head><body></body></html>
- <!DOCTYPE html> …. </html>
Bagian ini berfungsi untuk menentukan tipe dokumen apa yang akan dikerjakan. Identifikasi merupakan hal yang perlu dan penting untuk dilakukan agar web browser kita dapat mengenali codingan seperti apa yang kita tulis pada compiler. Jika pada awal penulisan kode tidak disertakan tag seperti gambar diatas, maka kode HTML dipastikan tidak akan berjalan karena compiler tidak bisa mendefinisikan kode apa yang ditulis.
- <head> … </head>
Pada tag head ini, biasanya banyak elemen-elemen meta yang ditempelkan di dalamnya. Meta ini yang berguna untuk menentukan judul dokumen, rangkaian karakter, skrip, gaya, tautan, dan informasi-informasi meta lainnya. Metadata pada HTML juga merupakan data-data yang ada dan berisikan dokumen yang saling berkaitan dan menunjang satu sama lainnya, tanpa ditampilkan pada halaman browser web sedikitpun. Hanya satu yang akan tampil pada tab browser web kalian, yaitu <title> … </title>. Tag ini berfungsi untuk menampilkan judul atau nama halaman website kalian pada tab browser yang digunakan.
- <body> … </body>
Pada tag body ini lah semua bagian website dibangun. Pada tag ini pula seluruh konten utama yang buat akan muncul. Semua bagian akan terlihat dan tampil menjadi bagian per bagian yang membuat sebuah halaman bisa disebut sebagai website. Bagian-bagian dari body dapat dibagi menjadi 3 bagian yaitu :
Bagian Header
<header> element bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain. Biasanya didalam header terdapat navigation atau navbar.
<body><!-- header --><header><h1> Cara Mendapatkan Dia </h1><nav><ul><li><a href="#"> PDKT </a></li><li><a href="#"> Modus </a></li><li><a href=""> Pelet </a>
Hasil :
Bagian Main
Berisi konten utama dari website contohnya seperti article,dan lain lain.
<!-- main --><main><h1>Mengenal Dia</h1><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita, laborum.</p><article><h2>Lorem, ipsum.</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p></article><article><h2>Lorem, ipsum.</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></article></main>
Hasil :
Bagian Footer
HTML <footer> element merepresentasikan sebuah catatan kaki (bagian kaki / footer) untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada sebuah <article> element, <section> element, catatan kaki untuk induk dokumen (<body> element) dan lain sebagainya. <footer> tidak boleh ditulis di dalam <address>, <header> dan <footer> element lainnya (bertumpuk / nested).
<footer><ul><li><a href="contact.html">Kontak</a></li><li><a href="about.html">Mengenai</a></li><li><a href="copyright.html">Copyright</a></li><li><a href="privacy.html">Privacy Policy</a></li><li><a href="sitemap.xml">Sitemap</a></li></ul></footer>
Hasil :
2. Tag Heading
Heading adalah sebuah judul yang biasanya diberikan pada halaman web atau beberapa bagian dari artikel. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>. Tag heading mempunyai atribut: [ left | center | right ] default left.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1> Judul 1 </h1><h2> Judul 2 </h2><h3> Judul 3 </h3><h4> Judul 4 </h4><h5> Judul 5 </h5><h6> Judul 6 </h6></body></html>
Hasil :
3. Tag Paragraf
Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel. Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web. Atribut : align=left , center ,right (untuk mengatur posisi teks).
<body><p> ini paragraf tanpa atribut </p><p align="center"> ini paragraf dengan atribut center </p><p align="right"> ini paragraf dengan atribut right </p><p align="left"> ini paragraf dengan atribut left </p></body>
Hasil :
4. Tag Favicon
Favicon digunakan untuk menambahkan icon pada html, juga berguna untuk mempercantik tampilan website yang kita buat. Cara menggunakan favicon yaitu dengan menambahkan :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">Link ini ditempatkan pada tag head html, dan link ini memanggil icon yang dikumpulkan di website font awesome, cara menggunakan nya dengan menambahkan tag “i”
<h1> <i class="fa-brands fa-facebook"></i> Hello World </h1>Hasil :
5. Tag Komentar
Komentar digunakan untuk menandai code, clean code, dan memperjelas code. Shortcut untuk membuat komentar adalah ctrl+/ .Cara menggunakan komentar yaitu :
<!-- Ini adalah komentar -->6. Tag Link
Tag <link> digunakan untuk membuat “hubungan” antara halaman HTML dengan file lain. Tag <link> sering digunakan untuk menghubungkan dengan file CSS secara eksternal. Dan tag ini juga tidak memerlukan tag penutup. Apabila ingin menghubungkan file HTML dengan file CSS yang berada di eksternal maka dapat menggunakan tag ini. Atribut yang diberikan dan sering digunakan pada tag link :
- href (hypertext reference) digunakan untuk menulis alamat lokasi file external yang dituju. <a href=”http://amcc.or.id">Amikom Computer Club</a>
- Title merupakan atribut yang berfungsi sebagai keterangan pada sebuah link yang muncul dalam bentuk tool tip. Keterangan tersebut akan muncul jika cursor mouse diletakkan pada link yang mempunyai atribut title. Untuk penulisannya juga diapit dengan tanda kutip.
<a href=”http://amcc.or.id" title=”Web AMCC’’ >Amikom Computer Club</a>
- Alt Biasanya atribut yang satu ini di pakai untuk sebuah gambar. Fungsi dari atribut alt adalah untuk memberikan deskripsi link atau gambar kepada search engine.
<a href=”https://amcc.or.id"><img alt=”logo resmi amcc” src=”https://amcc.or.id/ s400/logoamcc.jpg”/></a>
- Target merupakan atribut yang berfungsi untuk memberikan perintah kepada web browser apakah link yang dituju dibuka melalui jendela browser saat ini atau dibuka melalui jendela baru (tab baru). Secara default, link yang kita tulis akan terbuka pada jendela yang sama. Apabila kita ingin halaman tersebut terbuka pada tab baru kita harus menggunakan atribut target=”_blank”.
<a href=”http://freewelkin.blogspot.com" target=”_blank”>Blog Freewelkin</a>
7. Tag Iframe
Iframe merupakan tag yang berfungsi untuk menampilkan halaman website orang lain sebagai contoh :
Cara menggunakan tag iframe sebagai berikut :
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>8. Tag Image
Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. Atributnya ada width dan height dalam tag <img> yang digunakan untuk mengatur tinggi dan lebar gambar yang akan ditampilkan.
<img src="mobil.jpg" alt="mobil" >Hasil :
9. Tag Form & Table
Tag Form digunakan untuk menampung element yang berkaitan dengan sebuah form. Dalam sebuah form biasanya terdapat kotak input (control) dan element lainnya yang dapat diedit kemudian ditulis untuk dikirim pada sebuah server lalu diproses guna mendapatkan informasi tertentu dari atau untuk user.
Atribut pada tag form :
- accept-charset
Menentukkan character encodings yang diterima oleh server sebelum form dikirim.
Value: character_set
- action
Menentukkan alamat (URL) yang memproses data form ketika dikirim. Tindakan ini dapat diganti dengan menyebutkan attribute formaction pada <button> atau <input> element.
Value: URL
- Autocomplete
Menentukkan apakah input (control) secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak. Hal ini dilakukan otomatis (jika on) oleh browser untuk menampilkan tulisan yang sebelumnya telah diinput untuk menghindari penulisan berulang kali.
Value: on atau off.
- Method
Menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form Value:
POST : berkaitan dengan HTTP POST method.
Metode ini digunakan untuk mengirim data form yang disisipkan pada body form dan dikirim pada server.
GET : berkaitan dengan HTTP GET method.
Metode ini digunakan untuk mengirim data form yang disisipkan pada URI action attribute dengan tanda tanya (?) sebagai pemisah kemudian dikirim ke server. karakter yang digunakan adalah ASCII.
- Name
Menentukkan nama untuk sebuah form. Value: teks
- Novalidate
Menunjukkan bahwa form tidak perlu divalidasi ketika dikirim pada sebuah server.
Value: novalidate
- Target
Menentukkan tempat dari respon yang diterima setelah mengirim form.
Value: _blank | _self | _parent | _top
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Pelatihan ke 2</title></head><body><form action=""><fieldset><legend> Registrasi </legend><p><label for=""> Email </label><input type="text" name="Email" placeholder="Email kamu"></p><p><label for="">Username</label><input type="text" name="userrname" placeholder="username kamu dong"></p></fieldset></form></body></html>
Hasil :
Tag table digunakan untuk menampilkan informasi, tabel juga paling sering digunakan untuk kebutuhan backend website, berikut cara membuat tabel :
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
- Tag <table> untuk membungkus tabelnya
- Tag <thead> untuk membungkus bagian kepala tabel
- Tag <tbody> untuk membungkus bagian body dari tabel
- Tag <tr> (tabel row) untuk membuat baris
- Tag <td> (table data) untuk membuat sel
- Tag <th> (table head) untuk membuat judul pada header
<table><thead><tr><th> No. </th><th> Nama </th></tr></thead><tbody><tr><td> 1 </td><td> Zakkan Ativana </td></tr></tbody></table>
kok engga ada garisnya nih?
Iya, karena kita tidak menambahkan atribut border pada tabelnya.Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.Sehingga akan menjadi seperti ini:
Mengatur Jarak Sel dengan Cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel. Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Atribut ini dapat kita berikan kepada tag <table>.
