HTML dan Tag-tag Dasar

Agus Suratna

5 years ago

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).

HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.

Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa)

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan kita menjelajah internet dan melihat halaman web.

Upgrade HTML besar-besaran terjadi pada tahun 2014, dan hasilnya adalah pengenalan HTML5. Pada upgrade tersebut, terdapat semantic baru yang memberitahukan arti dari kontennya sendiri, seperti <artcile>, <header>, dan <footer>.

Untuk menulis kode HTML kita bisa menggunakan software text editor seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam format HTML yaitu .htm atau .html.

Daftar Isi

Toggle

Fungsi HTML (HyperText Markup Language)

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

Membuat halaman web.
Menampilkan berbagai informasi di dalam sebuah browser Internet.
Membuat link menuju halaman web lain dengan kode tertentu (hypertext)

Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Berikut adalah beberapa hal yg dapat dilakukan dengan HTML:

Menentukan format suatu teks
Membuat list tentang sekelompok hal
Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama
Menyisipkan citra/gambar
Menampilkan informasi dalam table
dll

Struktur Dasar HTML

Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”). Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut :

<tag>Teks yang akan dipengaruhi oleh tag</tag>

Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah :

<b>Tulisan yang tercetak tebal</b>

Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.

Attribut Tag

Tag dapat mempunyai attribut.
Attribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
Attribut setiap tag akan berbeda-beda.
Secara umum tag dengan attributnya adalah sebagai berikut :

<namatag atr1=“nilai-atr1” atr2=“nilai-atr2” …> … </namatag>

contoh:

<table> : Tag tersebut tidak mempunyai attribut:

<table border=“1”> : Tag tersebut mempunyai attribut

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

1. <HTML>

Sebagai tanda awal dokumen HTML. Tag yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan </HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML.

<HTML> 
   Teks
</HTML>

2. <HEAD>

Sebagai informasi page header. Untuk mendefinisikan head, kita dapat menambahkan tag <HEAD> dan </HEAD> setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :

<HTML>

   <HEAD>
   </HEAD>

</HTML>

3. <TITLE>

Sebagai title atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Misalkan kita akan membuat sebuah page dengan judul “Latihan HTML” maka kita harus menambahkan :

<title>Latihan HTML</title>

Tag <title> dan </title> ini harus diletakkan pada bagian head.

4. <BODY>

Body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Kedua tag ini diletakkan sesudah tag </HEAD.

Contoh dokumen HTML dasar :

<html>
    <head>
        <title>Latihan HTML</title>
    </head>

    <body>
        Teks yang akan ditampilkan pada bagian body
    </body>
</html>

Hasil dari script di atas ketika dibuka dengan browser adalah :

Di dalam tag body ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut Body :

Berikut ini merupakan Contoh tag body dengan attribut text, bgcolor dan topmargin :

<html>
    <head>
        <title>Contoh Tag Body</title>
    </head>

    <body text="red" bgcolor="cyan" topmargin="50">
        
        Hello world....!!!
    </body>
</html>

Hasil dari script di atas ketika dibuka dengan browser adalah :

Paragraph

Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </p> tapi juga bisa tidak diberi.
Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni <p>

Sebagai contoh kita dapat menampilkan beberapa paragraf sekaligus dalam satudo kumen HTML :

<html>
    <head>
        <title>Latihan Paragraf</title>
    </head>

    <body>
        
        Teks yang akan ditampilkan pada bagian body
        <p>Paragraf satu</p>
        <p align="center">Paragraf dua</p>
        <p align="right">Paragraf tiga</p>

    </body>
</html>

Hasil dari script di atas ketika dibuka dengan browser adalah :

Line Break

Digunakan untuk pindah ke baris baru.

Pada contoh berikut tag <BR> ini akan menyisipkan line break pada akhir baris sehingga kita dapat pindah ke baris berikutnya tanpa harus berganti paragraf.

<html>
    <head>
        <title>Line Break</title>
    </head>

    <body>
        
        Teks yang akan ditampilkan pada bagian body
        <p>Using BR to force a line break <br>
            Hi every body ! <br>
            My name is Jhon <br>
        </p>

    </body>
</html>

Horizontal Rule

Untuk menambah nilai estetika page maupun untuk memisahkan suatu bagian informasi dari bagian yang lainnya, kita dapat menyisipkan sebuah garis horisontal pada page.
Penyisipan garis ini dapat dilakukan dengan menambahkan tag <HR>.
Tag <HR> ini juga memiliki beberapa parameter tambahan/attribut yang memungkinkan kita untuk memodifikasi tampilan dari garis horisontal yang digunakan ini.

Contoh penggunaan tag hr dengan menggunakan attribut :

<html>
    <head>
        <title>Contoh Tag HR</title>
    </head>

    <body>
        
        Teks hr digunakan untuk mendefinisikan garis :
        <hr noshade>
        <p>Yang ini paragraf</p>
        <hr size="5" width="150" color="green" align="center">
        <p>Yang ini paragraf</p>
        <hr size="5" width="250" color="red" align="right">
        
    </body>
</html>

Headings

Terdapat enam tag yang dapat digunakan untuk membentuk format heading yakni mulai dari <H1> yang menggunakan ukuran font paling besar hingga ke <H6> yang ukuran font-nya paling kecil.

Contoh penggunaan heading dalam file HTML adalah sebagai berikut :

<!--heading.html-->
<html>
    <head>
        <title>Contoh heading</title>
    </head>

    <body>
        
        <h1>Ini heading 1</h1>
        <h2 align="center">Ini heading 2</h2>
        <h3 align="right">Ini heading 3</h3>
        <h4 align="center">Ini heading 4</h4>
        <h5>Ini heading 5</h5>
        <h6 align="center">Ini heading 6</h6>
        
    </body>
</html>

Daftar Pustaka :

Teach Yourself HTML 3.2 in 24 Hours
Betha Sidik, ir dan husni I Pohan, Ir., M.Eng, Pemrograman Web dengan HTML, informatika, 2005.