Basic HTML - Pengenalan Struktur HTML

3 Basic HTML - Pengenalan Struktur HTML

Pengenalan Struktur HTML

Setiap bahasa pemrograman memiliki strukturnya masing-masing, termasuk bahasa markup seperti HTML. HTML di analogikan seperti kerangka, yang menyusun setiap bagian pada halaman website. Struktur ini yang akan menjadi pondasi terbentuknya sebuah halaman website. Seperti apakah struktur HTML tersebut? yuk kita bahasa sekarang.

Penulisan Struktur HTML

Menulis kode program biasanya para programmer menggunakan text editor untuk mempermudah penulisan barisan kode. Bukalah text editor kesayangan anda, pada penjelesan sebelumnya, kita sudah menginstall sebuah text editor yang bernama Visual Studio Code. jadi kita akan menggunakan text editor tersebut.

Buatlah folder baru dan beri nama dengan html.

Masukkan folder tersebut kedalam text editor visual studio code Pilih File > Open Folder > Klik oke, atau juga bisa dengan drag and drop folder tersebut ke dalam visual studio code dengan cara, klik tahan folder > tekan tombol + lalu pilih tab text editor dan lepaskan klik pada text editor

Buatlah sebuah file yang bernama index.html atau juga memberi nama dengan yang lain.

Menulis struktur HTML dengan mudah menggunakan snippet text editor Visual Studio Code. caranya ketik html > pilih html:5 >
Maka struktur HTML secara otomatis akan buat pada text editor. Mudah bukan, okee sekarang saya akan jelaskan satu persatu fungsi dari script tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=df, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Penjelasan Script

<!DOCTYPE> merupakan singkatan dari DTD (Document Type Declaration), lalu apa fungsi DTD? fungsinya yaitu memberikan informasi pada browser bahwasanya versi dokumen HTML yang digunakan adalah HTML5. Lalu bagaimana dengan versi sebelumnya? setiap versi juga memiliki DTD-nya atau pendeklarasian masing-masing, contohnya pada versi HTML4
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
Bagaimana jika tidak membuat <!DOCTYPE> ? maka browser menganggap website yang tidak menggunakan <!DOCTYPE> hanya bisa menggunakan CSS versi standar lama atau quirks mode. Jika programer mempercantik website menggunakan CSS yang sesuai standar W3C cukup menulis doctype saja di file HTML, agar browser bisa mengetahui informasi pada website tersebut ditampilkan sesuai standar W3C strict mode (atau standard mode).

<html lang="en"> Dokumen HTML dimulai dengan <html> dan di akhiri dengan tanda garis miring di nama element </html>. Pada bagian lang disebut dengan atribut dan bernilai atau value en. atribut ini akan memberikan sebuah browser informasi bahwa konten yang dibuat memiliki bahasa inggris. Bisa saja di ganti dengan ID jika konten tersebut memiliki bahasa indonesia.

<head> Mungkin ini tidak akan menjadi asing bagi kamu yang paham dengan bahasa inggris. head jika diartikan kedalam bahasa indonesia berati kepala. Tag <head> sendiri berfungsi sebagai tempat diletakkan meta data atau informasi pada sebuah halaman website. Tag ini sangat penting untuk digunakan sebagai Search Enggine Optimize SEO yang menjadikan sebuah standart pada HTML W3C. Akan tetapi tidak hanya meta data saja yang dapat di sisipkan pada <head>, Kamu juga bisa menyisipkan <title>, <link>, <script>. Tag <head> tidak akan tampilkan ke dalam halaman.

<title> Berfungsi untuk memberikan sebuah judul pada halaman website, dan juga memberikan informasi kepada pengunjung website, misalkan kamu sedang membuka halaman web ini. Kamu bisa melihatnya seperti gambar berikut.

<meta> Pada bagian ini sangat penting jika website sudah di deploy atau bisa di akses oleh pengunjung lain, agar website yang dibangun dapat terindeks oleh search enggine. Tags <meta> memberikan sebuah informasi data dari sebuah dokumen HTML. Tag ini juga memiliki attribute dan value untuk memberikan informasi kepada Search Enggine, contohnya seperti berikut:
```
<meta name="description" content="Tutorial Programming Para Linux di TDF Programming">
```
Script tersebut menjelaskan deskripsi pada dokumen HTML.
<body> Tag ini merupakan sebuah wadah untuk element yang akan di tampilkan ke halaman pada sebuah website, kamu bisa menuliskan sebuah text di dalam body tanpa menuliskan tag/elemet. Text tersebut akan di tampilkan secara default dengan teks biasa atau plaintext. Jadi cara tersebut sangat tidak di rekomendasikan untuk digunakan. Contohnya pada script dibawah ini, kamu ingin menuliskan sebuah text dalam sebuah paragraf cukup menambahkan tag <p> dan di tutup dengan </p>.

See the Pen by Triadmoko Denny Fatrosa (@triad-moko) on CodePen.

Kesimpulan

Struktur HTML merupakan sebuah pondasi yang sangat penting untuk diketahui. script ini tidak sulit karena sudah memiliki snipet pada beberapa text editor seperti Visual Studio Code, Sublime Text, dan yang lainnya untuk dibuatkan secara otomatis, humm mudah bukan. ayoo lanjutkan lagi untuk belajarnya.

Referensi

W3Shcools

Apa selanjutnya ? Pengenalan Element dan Attributes HTML