Langsung ke konten utama

2.1 Belajar HTML [ Pengenalan, dan Dasar Dasar HTML ]

1. Pengenalan Dasar

Apa itu HTML?

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa skrip lainnya seperti JavaScript, VBScript, dan PHP.

Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web. Penanda atau markup ini, nanti akan kita sebut dengan Tag. HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web. Kalau kita ibaratkan, HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga menjadi fondasi dasar.

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi pelengkapnya, yakni CSS dan Javascript. CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web. Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.

2. Membuat Dokumen Pertama HTML

Pertama, search website Petani Kode untuk mengikuti tutorial dasar dasar HTML.


Kemudian mengikuti tutorial pertama, yaitu membuat dokumen pertama HTML. Dokumen pertama HTML adalah membuat sejumlah kode dengan output "Hello World". Berikut adalah kodenya


Keterangan : 
  • <!DOCTYPE html> adalah bagian deklarasi type dan versi html
  • <html lang="en> menyatakan bahwa konten HTML ini akan menggunakan bahasa Inggris
  • <head> adalah bagian kepala HTML, ditutup dengan </head>
  • <body> adalah bagian yang akan ditampilkan pada web browser
  • </html> adalah penutup untuk <html>

3. Apa itu Tag, Elemen, dan Atribut dalam HTML?

Apa itu Tag?

Tag adalah penanda awalan dan akhiran dari sebuah elemen pada HTML. Tag dibuat dengan kurung siku (<...>) didalamnya terdapat nama tag. Tag selalu ditulis berpasangan dengan tag akhiran yang diberi tanda (</...>). Sebagai contoh tag <p>; <head>; <body>, dengan pasangannya misalkan </p>; </head>; </body>.

Contoh penerapan tag.

Keterangan :
  • <title> yang berguna untuk menambahkan judul pada bagian head output. 
  • <p align="center"> untuk membuat teks pada body dengan posisi rata tengah.
  • <p> untuk menambahkan paragaf/teks pada body
  • <p> diakhiri dengan </p>
Dalam <body>, terdapat <p align="center"> yang dimana align="center"  adalah atribut dengan pembagian align  adalah nama atribut, dan "center" adalah nilai atribut.

Adapun penambahan tag <a> dalam kode tersebut, tag <a> adalah tag untuk menyisipkan link dan wajib disertai dengan href  untuk menyatakan halaman tujuan dari link.

Terdapat pula tag <img> dan atribut <src> adalah tag untuk menambahkan dan menentukan gambar yang akan dipilih. Lalu atribut widht  dan height  adalah untuk mengatur ukuran panjang dan lebar dari gambar tersebut.

4. Membuat Paragraf di HTML

Paragraf pada HTML menggunakan tag <p>. Selain itu, dapat pula menggunakan tag pendukung seperti <hr>; <dif>; <br>; dan <pre>.

Contoh :


dan, berikut adalah output dari kode diatas


Atribut untuk Paragraf

Biasanya ditambahkan beberapa atribut antara lain align, id, class, dll.
Contoh :

Atribut align="center"  berfungsi untuk membuat teks paragraf berada posisi rata tengah, adapun nilai atribut yang dapat ditambahkan yaitu align="right"  yang berfungsi untuk mengatur posisi paragraf posisi rata kanan.

Tag <br> untuk Membuat Paragraf

Fungsi utama tag <br> adalah untuk membuat baris baru pada paragraf.


Dengan ditambahkannya tag <br /> maka teks yang ditampikan pada web browser posisi teksnya akan membentuk baris baru, dan diakhiri </p> sebagai tag akhiran.
Berikut hasilnya :


~ Terima Kasih ~

Komentar

Posting Komentar