HTML Dasar

Mahasiswa mampu memahami struktur dan tag HTML serta membuat halaman web sederhana.

PreviousPengenalan HTML NextHTML Lanjutan

Last updated 1 year ago

Was this helpful?

HTML Dasar

Mahasiswa mampu memahami struktur dan tag HTML serta membuat halaman web sederhana.

Pendahuluan

HTML merupakan singkatan dari Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis web, HTML menjadi pondasi dasar pada halaman website. File HTML disimpan dengan ekstensi .html (dot html) dan dapat diakses menggunakan web browser seperti Google Chrome, Mozilla Firefox, dan lain-lain.

Jika halaman web dibuat hanya menggunakan HTML saja maka halaman web tersebut disebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola web tersebut. Untuk mengubah isi dari halaman web statis tersebut, web developer harus mengubah isi / kode sumber (source code) file webnya. Tentu hal ini sangat merepotkan bagi web developer. Untuk membuat sebuah web dinamis yang memiliki fungsi-fungsi yang dapat mengelola web tersebut, tidak cukup hanya menggunakan HTML saja, diperlukan bantuan Javascript, PHP dan Database.

HTML memiliki beberapa element yang tersusun dari tag yang memiliki fungsinya masing-masing, seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya.

Berikut versi HTML dari pertama kali s.d sekarang dapat dilihat pada gambar di bawah ini.

Penulisan Syntax Dokumen HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
  
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  
  </body>
</html>

Penjelasan dari syntax di atas sebagai berikut:

Deklarasi <!DOCTYPE html> mendefinisikan tipe dokumen yaitu HTML5
Elemen <html> adalah elemen root dari halaman HTML
Elemen <head> berisi informasi meta tentang dokumen
Elemen <title> menentukan judul untuk dokumen
Elemen <body> berisi konten atau isi halaman yang terlihat
Elemen <h1> mendefinisikan heading dengan tipe 1
Elemen <p> mendefinisikan sebuah paragraf

Text Editor

Dokumen HTML dapat ditulis menggunakan software text editor. Beberapa software text editor antara lain Notepad, Notepad++, Sublime, Atom, Netbeans, atau Visual Studio Code (VS Code). Disarankan menggunakan VS Code dikarenakan gratis, ringan, mudah mengelola extension, linter (penanda bagian error), intelisense (auto complete) dan terintegrasi dengan git.

Tampilan dari VS Code dapat dilihat pada gambar 1.2.

Dokumen HTML pada gambar 1.2 jika dijalankan pada browser web akan tampil seperti gambar 1.3.

Tag, Elemen dan Atribut

Tag

Tag merupakan kode untuk memperkenalkan text HTML yang ditulis pada text editor pada web browser. Dalam penulisan tag, hampir semua menggunakan tag pembuka dan tag penutup, dan ada juga tanpa tag penutup atau disebut juga single tag.

Beda antara tag pembuka dan penutup, yaitu adanya garis miring pada tag penutup, sementara pada tag pembuka tidak ada. Kemudian konten ditempatkan di antara tag pembuka dan tag penutup.

Berikut contoh penulisan tag pada HTML.

<tag> Konten </tag>

Perhatikan penulisan syntax di atas: <tag> adalah tag pembuka </tag> adalah tag penutup

Elemen

Elemen adalah mulai dari tag pembuka sampai dengan tag penutup, dengan konten yang disisipkan diantara tag.

<h1> Pemrograman Web I </h1>

Perhatikan penulisan syntax di atas: <h1> adalah tag pembuka Pemrograman Web I adalah konten elemen </h1> adalah tag penutup

Atribut

Atribut merupakan informasi tambahan dari sebuah element. Atribut diletakkan di dalam tag pembuka. Atribut dapat digunakan untuk memberi judul, efek warna, ketebalan, mengatur panjang dan tinggi, dll. Atribut memiliki name dan value.

Adapun contoh penulisan name dan value, yaitu name=”value”.

<img src = ”logo-mdp.png”  width = ”100px” height = ”80px”>

Perhatikan penulisan syntax di atas: <img> adalah tag image src, width, dan height adalah nama atribut logo-mdp.png adalah nilai/value dari atribut src 100px adalah nilai/value dari atribut width 80px adalah nilai/value dari atribut height

Heading

Heading merupakan tag yang berfungsi untuk menunjukkan bagian penting pada halaman web. Heading didefinisikan dengan tag <h1> s.d <h6>. Tag <h1> biasanya digunakan untuk penulisan judul utama. Tag <h2> biasanya digunakan untuk penulisan sub judul dari tag <h1>. Tag <h3>, <h4>, <h5> dan <h6> digunakan sesuai dengan keperluan tampilan pada halaman web.

Berikut contoh penggunaan tag heading.

<!DOCTYPE html>
<html>
<head>
    <title>Heading</title>
</head>

<body>
    <h1>Ini adalah Heading 1</h1>
    <h2>Ini adalah Heading 2</h2>
    <h3>Ini adalah Heading 3</h3>
    <h4>Ini adalah Heading 4</h4>
    <h5>Ini adalah Heading 5</h5>
    <h6>Ini adalah Heading 6</h6>
</body>

</html>

Hasil dari syntax di atas dapat dilihat pada gambar 1.4.

Paragraph, Line Break dan Pre-formatted

Paragraph

Tag <p> digunakan untuk membuat sebuah paragraf. Penggunaan tag <p> dapat dikombinasikan dengan atribut. Berikut contoh penggunaan tag <p>.

<!DOCTYPE html>
<html>
<head>
    <title>Paragraf, Line Break dan Preformatted</title>
</head>

<body>
    <p>Ini adalah paragraf pertama.</p>
    <p>Ini adalah paragraf kedua</p>
    <p align="right">Ini adalah paragraf rata kanan</p>
    <p align="center">Ini adalah paragraf rata tengah</p>
    <p align="left">Ini adalah paragraf rata kiri</p>
    <p align="justify">Ini adalah paragraf rata kiri kanan - Ini adalah paragraf rata kiri kanan - Ini adalah paragraf rata kiri kanan - Ini adalah paragraf rata kiri kanan - Ini adalah paragraf rata kiri kanan - Ini adalah paragraf rata kiri kanan - </p>
</body>

</html>

Hasil dari syntax di atas dapat dilihat pada gambar 1.5.

Line Break

Tag <br> digunakan sebagai pemisah baris (line break). Berikut contoh penggunaan tag.

<!DOCTYPE html>
<html>
<head>
    <title>Line Break</title>
</head>
<body>
    Contoh penggunaan<br>line break

    <p>Ini adalah<br>paragraf<br>dengan line break</p>    
</body>
</html>

Hasil dari syntax dapat dilihat pada gambar 1.6.

Pre-formatted

Tag <pre> digunakan untuk menampilkan teks sesuai dengan penulisannya. Berikut contoh penggunaan tag <pre>

<!DOCTYPE html>
<html>
<head>
    <title>Preformatted</title>
</head>
<body>
    <pre>
        Paragraf ini 
        terdiri dari         banyak spasi
        dalam       syntax, 
        tidak   diabaikan
        oleh    browser
    </pre>
    <p>
        Paragraf ini 
        terdiri dari         banyak spasi
        dalam       syntax, 
        tetapi   diabaikan
        oleh    browser
    </p>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar 1.7.

Format Text

Berikut tag-tag yang digunakan untuk melakukan format text dalam HTML

Tag

Deskripsi

<b>

Menebalkan teks

Menebalkan teks

<i>

Membuat teks miring

<em>

Membuat teks miring

<mark>

Memberi highlight teks

<small>

Mengecilkan teks

<del>

Memberi garis tengah pada teks

<u>

Memberi garis bawah pada teks

<ins>

Memberi garis bawah pada teks

<sub>

Membuat teks subscript

<sup>

Membuat teks superscript

Berikut contoh penggunaan tag format text.

<!DOCTYPE html>
<html>
<head>
    <title>Format Text</title>
</head>
<body>
    <b>Ini format text bold</b><br>
    <strong>Ini format text strong</strong><br>
    <i>Ini format text italic</i><br>
    <em>Ini format text em</em><br>
    <mark>Ini format text highlight</mark><br>
    <small>Ini format text small</small><br>
    <del>Ini format text del</del><br>
    <u>Ini format text underline</u><br>
    <ins>Ini format text insert</ins><br>
    Ini format text <sub>subscript</sub><br>
    Ini format text <sup>superscript</sup>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar 1.8.

Style

Atribut style dapat digunakan untuk mengatur style elemen HTML. Berikut syntax atribut style.

<tag style="property:value;">

Perhatikan penulisan syntax di atas: property adalah property CSS value adalah value CSS

Berikut contoh penggunaan atribut style.

<!DOCTYPE html>
<html>
<head>
    <title>Atribut Style</title>
</head>
<body style="background-color: aqua">
    <h1 style="color: blue">Ini adalah heading dengan atribut style color</h1>
    <p style="color: red; font-family: calibri">Ini adalah paragraf dengan atribut style color dan font-family</p>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar 1.9.

Materi CSS akan dibahas pada pertemuan berikutnya.

PreviousPengenalan HTML NextHTML Lanjutan

Last updated 1 year ago

Was this helpful?