HTML

 HTML

Pengertian dan Sejarah HTML

HTML merupakan singkatan dari HyperText Markup Language atau bahasa markup dasar berbasis teks yang digunakan untuk membuat halaman web menggunakan kode markup dan tag.
HTML sebagai bahasa markup biasa digunakan untuk membuat struktur dan menambahkan format konten ke dalam web yang telah digunakan hampir semua situs web di dunia.

Walau struktur HTML seperti coding, namun HTML bukanlah bahasa pemrograman. HTML tidak dianggap bahasa permograman karena tidak bisa memberikan fungsi yang dinamis. Namun walau tidak dianggap bahasa pemrograman, HTML dianggap sebagai standar web resmi yang dikelola oleh Worl Wide Web Consortium (W3C) yang bertugas merilis pembaruan HTML secara rutin.

HTML diciptakan oleh Tim Berners-Lee pada tahun 1991. Dan menjadi populer ynag membawa bahasa markup ini kini dianggap sebagai standar web resmi.

Fungsi HTML

  • Pengembangan Web (Mendesain tampilan elemen halaman web di browser seperti teks, hyprlink, dan file media)
  • Navigasi Internet (Pengguna bisa menelusuri dan menyisipkan link antara halaman dan website terkait karena HTML banyak digunakan untuk menyematkan hyperlink)
  • Dokumentasi Web (Mengatur dan memformat dokumen)

Struktur Dasar HTML

Struktur dasar HTML terdiri dari dua bagian utama, yaitu:

Head Part
Bagian ini dikenal sebagai inti atau kepala dari struktur HTML. Di dalam bagian ini, terdapat judul dan metadata dari dokumen website yang akan dituliskan dan termasuk dalam HTML tersebut.

Body Part
Bagian ini adalah badan dari dokumen dalam struktur dasar HTML. Bagian ini mencakup informasi yang ingin ditampilkan di halaman web. Untuk memastikan halaman web kompatibel dengan HTML 4, harus menyertakan deklarasi tipe dokumen (DTD) sebelum elemen HTML dituliskan.

Terdapat lima elemen dasar dalam struktur HTML yang penting untuk penulisan dan pembuatan HTML, yaitu:

<!DOCTYPE>
Elemen ini digunakan untuk memberi tahu browser tentang versi HTML yang digunakan pada halaman web. <!DOCTYPE> sebenarnya bukan tag/elemen, melainkan instruksi kepada browser mengenai jenis dokumen. 

<!DOCTYPE> adalah elemen null yang tidak memiliki tag penutup dan tidak boleh berisi konten apapun. Ada berbagai tipe HTML seperti HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, dan lainnya.

<html>
Elemen <html> digunakan untuk menentukan root halaman HTML dan XHTML. Tag <html> memberi tahu browser bahwa dokumen tersebut adalah dokumen HTML.

Elemen <html> adalah kontainer luar kedua untuk semua yang ada dalam dokumen HTML dan memerlukan tag pembuka dan penutup dalam penulisan sintaksisnya.

<head>
Elemen <head> digunakan untuk membuat metadata yang penting dalam pembuatan website. Elemen ini biasanya ditempatkan antara elemen <html> dan <body>.

Bagian dari dokumen ini tidak ditampilkan di browser saat halaman dimuat, karena hanya berisi metadata yang menentukan informasi tentang dokumen HTML.

<title>
Elemen <title> digunakan untuk menampilkan judul halaman website. Elemen ini juga membantu meningkatkan peringkat dalam hasil pencarian jika mengandung kata kunci yang relevan.

<title> adalah salah satu elemen terpenting untuk optimasi HTML, memberikan judul yang relevan dengan konten HTML.

<body>
Elemen <body> menentukan konten utama dokumen HTML yang muncul di browser. Elemen ini dapat berisi judul, teks, paragraf, foto, tabel, link, video, dan lainnya.

Elemen <body> harus muncul setelah <head>, atau disisipkan antara tag </head> dan </html>. Elemen ini sangat penting untuk semua dokumen HTML dan hanya boleh digunakan sekali di seluruh dokumen.

New Media Design

Dalam membuat halaman web dengan HTML, kita juga harus memahami elemen-elemen desain yaitu:
  • Text (The king of content. Teks harus bisa sesuai dengan desain konten)
  • Layout (Posisi penyusunan pada halaman web)
  • Icons (Tampilan objek yang merepresantasikan fungsi suatu objek)
  • Sound (Konten yang mampu di dengar berbentuk audio)
  • Color (Memperhatikan frequency, brightness and intensity, color uses, dan color vocabularies)
  • Video and Animation (Memposisikan letak video, kontrol video dan animasi)

Berikut proram sederhana yang telah saya buat menggunakan html dengan source code:

<!DOCTYPE html>

<html>

    <head> <title>Maya's Dump Gallery</title></head>

    <body>

        <header> <h1>Dump Image Gallery</h1></header>

        <nav>

            <a href="index.html">Index</a>

            <a href="gallery.html">Gallery</a>

            <a href="about.html">About</a>

        </nav>

        <article>

            <section>

                <p>About Me</p>

                <img src="https://media.licdn.com/dms/image/D5622AQEYSmKnQAHX8g/feedshare-shrink_800/0/1706505023130?e=2147483647&v=beta&t=wLM7OHOLF88CwX6s7bZDYuAbBS-_N0n5H7qUWd9temE" width="200" height="200"\>

            </section>

            <section>

                <p>Favorite</p>

                <img src="https://picsum.photos/seed/picsum/200/300" width="300" height="200"/>

            </section>

        </article>

        <footer> Created by: 333723007 - Zahra Ismaya</footer>

    </body>

    </html>


Hasilnya:



Source


Komentar

Posting Komentar