Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Beranda
10-Pemrograman Web
HTML

Mengenal HTML

Mengenal HTML

(HyperText Markup Language)

 

HTML atau HyperText Markup Language adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman website. HTML memungkinkan para pengembang web untuk membuat struktur dasar dan merencanakan konten pada halaman web, seperti teks, gambar, video, tautan, formulir, dan elemen-elemen lainnya.

HTML menggunakan "markup" dalam bentuk tag-tag untuk memberitahu browser bagaimana mengatur dan menampilkan elemen-elemen pada halaman. Setiap elemen dalam HTML diberi tanda dengan tag yang terdiri dari tanda "kurung siku" (<...>) dan teks yang menggambarkan elemen tersebut. Beberapa tag dapat memiliki atribut yang memberikan informasi tambahan tentang elemen.

HTML terdiri dari kombinasi antara teks dan simbol yang disimpan dalam sebuah file. File HTML disimpan dengan ekstensi .html. Untuk membuat file HTML harus mengikuti standar atau format khusus sesuai Standar Kode Internasional atau ASCII (American Standard Code for Information Interchange).  

Sejarah dan Perkembangan

HTML pertama kali diperkenalkan oleh Tim Berners-Lee pada tahun 1993 sebagai bagian dari proyek World Wide Web (WWW) di CERN (Organisasi Eropa untuk Riset Nuklir). HTML pertama kali digunakan untuk membuat tautan yang memungkinkan para ilmuwan di CERN berbagi informasi dengan lebih efisien. Seiring waktu, HTML mengalami evolusi signifikan, dengan pembaruan dan revisi yang bertujuan untuk meningkatkan fungsionalitas dan kemampuan desain.

Fungsi HTML 

1. Membuat Struktur Halaman Web

2. Menambahkan Konten Website

3. Mengatur Format dan Tata Letak halaman web

4, Mengarahkan Pengguna ke Halaman lain

Struktur Dasar HTML

HTML berfungsi sebagai kerangka dasar untuk membangun halaman web. Struktur dasar dari sebuah dokumen HTML adalah sebagai berikut:


 <!DOCTYPE html>: Mendefinisikan jenis dokumen HTML yang digunakan, dalam hal ini adalah HTML5.

<html>: Memulai kode HTML yang membungkus seluruh konten halaman web.

<head>: Berisi informasi tambahan (meta) tentang halaman web, seperti judul, tautan ke stylesheet (CSS), dan skrip JavaScript.

<title>: Menentukan judul halaman yang akan ditampilkan di tab browser.

<body>: Berisi konten utama yang ditampilkan dari halaman web, seperti teks, gambar, video, dan elemen lainnya.

 

Contoh tag HTML yang umum digunakan adalah :

  • <html>: Memulai dokumen HTML.
  • <head>: Menyertakan informasi tentang dokumen seperti judul dan tautan ke berkas CSS.
  • <body>: Tempat konten yang akan ditampilkan di halaman web.
  • <h1> - <h6> : Judul pada isian web dengan tingkat ukuran huruf yang berbeda.
  • <p>: Membuat paragraf teks.
  • <a>: Membuat Tautan link atau hyperlink.
  • <img>: Menyisipkan gambar.
  • <ul>, <ol>, <li>: Membuat daftar tak berurutan (unordered) dan berurutan (ordered) dengan item-list (list items).
  • <table>, <tr>, <td>: Membuat tabel dan baris serta sel dalam tabel.

HTML bekerja sebagai bagian dari teknologi web yang lebih besar bersama dengan CSS (Cascading Style Sheets) untuk mengatur tampilan dan layout, serta JavaScript dan PHP untuk memberikan interaksi dinamis pada halaman web.

Berikut adalah beberapa konsep dasar mengenai HTML:

1. Elemen dan Tag HTML: HTML menggunakan elemen-elemen yang diberikan oleh tag-tag. Setiap elemen memiliki struktur dasar: sebuah tag pembuka, isi konten, dan tag penutup. Contohnya:

<h1>Isi konten di sini</h1>

2. Struktur Dasar HTML: Setiap halaman web biasanya dimulai dengan elemen <html> dan terbagi menjadi dua bagian utama: <head> dan <body>. Bagian <head> berisi informasi tentang dokumen, seperti judul dan meta tag, sementara bagian <body> berisi konten yang akan ditampilkan di halaman web.

3. Teks dan Paragraf: Elemen seperti <h1>, <h2>, <p>, <strong>, <em>, dan lainnya digunakan untuk mengatur teks dan paragraf. 

4. Gambar: Untuk menampilkan gambar di halaman web, Anda menggunakan elemen <img> dengan atribut src yang menunjukkan lokasi gambar.

5. Tautan: Tautan atau hyperlink dibuat menggunakan elemen <a>. Atribut href digunakan untuk menentukan URL tautan.

6. Daftar: Elemen <ul> (daftar tak terurut) dan <ol> (daftar terurut) digunakan untuk membuat daftar item.

7. Formulir: Elemen <form> digunakan untuk membuat formulir input, seperti kotak teks, tombol, dan pilihan.

8. Elemen Semantik: HTML5 memperkenalkan banyak elemen semantik baru seperti <header>, <nav>, <article>, <footer>, dan lainnya, yang membantu menggambarkan struktur konten secara lebih tepat.

9. Kommentar: Anda dapat menambahkan komentar di kode HTML dengan menggunakan sintaks <!-- komentar Anda di sini -->.

 

Penting untuk diingat bahwa HTML hanya berfokus pada struktur dan konten halaman. Untuk mengatur tampilan visual dan gaya, Anda juga akan membutuhkan CSS (Cascading Style Sheets), dan untuk interaktivitas, Anda akan memerlukan JavaScript. Kombinasi dari ketiga teknologi ini (HTML, CSS, dan JavaScript) memungkinkan pembuatan halaman web yang dinamis, menarik, dan berfungsional.

Komponen HTML

1. Tag

Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Penulisan tag menggunakan kurung siku <...> yang didalamnya berisi nama tag.

Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, bergaris bawah, dan lain sebagainya.

  1. <!DOCTYPE>: Mendefinisikan jenis dokumen dan versi HTML yang digunakan.
  2. <html>: Memulai elemen root dari dokumen HTML.
  3. <head>: Berisi informasi meta tentang dokumen, seperti judul, stylesheet, dll.
  4. <title>: Menentukan judul dokumen yang ditampilkan pada tab browser.
  5. <meta>: Menyediakan informasi meta tentang dokumen, seperti karakter encoding, deskripsi, dan lain-lain.
  6. <link>: Menghubungkan dokumen dengan stylesheet eksternal.
  7. <style>: Digunakan untuk menulis aturan CSS di dalam dokumen HTML.
  8. <script>: Digunakan untuk menulis kode JavaScript di dalam dokumen atau merujuk ke file eksternal.
  9. <body>: Berisi konten utama dokumen yang akan ditampilkan kepada pengguna.
  10. <h1>, <h2>, ..., <h6>: Tag untuk judul dengan tingkatan mulai dari yang tertinggi hingga terendah.
  11. <p>: Tag untuk paragraf teks.
  12. <a>: Membuat tautan (hyperlink) ke halaman atau sumber eksternal.
  13. <img>: Menyisipkan gambar ke dalam halaman.
  14. <ul>: Membuat daftar tak-berurutan (unordered list).
  15. <ol>: Membuat daftar berurutan (ordered list).
  16. <li>: Elemen dalam daftar (list item).
  17. <table>: Membuat tabel.
  18. <tr>: Membuat baris dalam tabel.
  19. <td>: Membuat sel data dalam tabel.
  20. <th>: Membuat sel header dalam tabel.
  21. <form>: Membuat formulir input dari pengguna.
  22. <input>: Membuat elemen input, seperti teks, checkbox, radio button, dsb.
  23. <textarea>: Membuat area teks multiline.
  24. <select>: Membuat dropdown list.
  25. <button>: Membuat tombol.
  26. <label>: Menyediakan label untuk elemen formulir.
  27. <div>: Membuat blok pembungkus untuk mengelompokkan elemen.
  28. <span>: Membuat inline pembungkus untuk mengelompokkan elemen.
  29. <header>: Menunjukkan bagian header dari halaman.
  30. <footer>: Menunjukkan bagian footer dari halaman.
  31. <nav>: Menunjukkan bagian navigasi.
  32. <article>: Menunjukkan konten artikel independen.
  33. <section>: Menunjukkan bagian dari dokumen.
  34. <aside>: Menunjukkan konten tambahan yang terkait dengan konten utama.
  35. <audio>: Memasukkan elemen audio ke halaman.
  36. <video>: Memasukkan elemen video ke halaman.
  37. <iframe>: Menyisipkan halaman web lain ke dalam halaman saat ini.
  38. <canvas>: Membuat area gambar dengan JavaScript.
  39. <svg>: Membuat grafik vektor.
  40. <blockquote>: Mengutip teks dari sumber lain.
  41. <hr>: Menyisipkan garis horizontal.

Posting Komentar

© ‧ Belajar TIK. All rights reserved. Premium By Raushan Design