Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Bagian Dasar HTML Fungsi dan Contohnya

Dipublikasikan Oleh: elfanmauludi 6 komentar
Pada artikel ini akan dipelajari segala dasar dari Kode HTML. Ada berbagai tag-tag dasar yang harus dipahami dan dimasukkan ketika membuat kode HTML. Dimana tag-tag dasar tersebut membantu dalam pengorganisasian dan pemformatan dasar dari elemen dalam skrip atau laman web. 

Sebelum lebih lanjut mempelajari materi tentang Bagian dasar HTML Fungsi dan Contohnya, terlebih dahulu pelajari materi tentang: Komponen HTML dan Fungsinya, Editor HTML Terbaik yang Dapat Digunakan oleh Pengembang Website, dan Tag Semantics mathML HTML5 Beserta Fungsinya.

HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa markup yang digunakan pada proses pembuatan dan perancangan halaman web. Ini adalah bahasa dasar yang digunakan untuk struktur dasar suatu halaman web, memungkinkan pengguna untuk menambahkan teks, gambar, tautan, dan elemen-elemen lainnya ke dalam sebuah halaman.

HTML menggunakan serangkaian tag (tanda yang dilingkari dengan <dan >) untuk menandai elemen-elemen pada halaman web. Setiap tag memiliki fungsi tertentu dan mengatur bagaimana konten ditampilkan di browser. Misalnya, tag <p> digunakan untuk paragraf, <h1> hingga <h6> untuk judul, <img> untuk gambar, dan sebagainya.

Selain itu, HTML bekerja bersama dengan CSS (Cascading Style Sheets) dan JavaScript untuk memberikan tampilan dan interaksi yang lebih dinamis pada halaman web. CSS digunakan untuk mengatur tata letak dan gaya visual elemen HTML, sedangkan JavaScript memberikan fungsi interaktif dan dinamis seperti validasi formulir, efek animasi, dan banyak lagi. 

Kombinasi dari HTML, CSS, dan JavaScript membentuk dasar dari sebagian besar halaman web yang ada di internet saat ini.

Dasar Dokumen HTML

Berikut ini akan disebutkan dasar-dasar dari tag HTML yang akan membagi kode program ke dalam beberapa variasi seperti head, body, dan lain sebagainya.
  • Setiap dokumen HTML selalu diawali dengan sebuah tag dokumen HTML. Meskipun bukan sebuah keharusan tetapi ini merupakan permulaan yang bagus untuk memulai membuat dokumen dengan menyebutkan atau memanggil tag tersebut: <!DOCTYPE html>
  • <html>: setiap kode HTML harus berada diantara kedua tag dasar HTML. Tag tersebut dimulai dengan <html> dan diakhiri dengan </html>.
  • <head>: tag head muncul setelah tag <html> yang mengandung semua informasi header dari laman web atau dokumen seperti title dan berbagai informasi lainnya. Informasi tersebut terletak diantara tag head yang dimulai dengan <head> dan diakhiri dengan </head>. Konten dari tag head akan dijelaskan pada sesi lain dari materi HTML.
  • <title>: Judul dari sebuah laman web dapat dipanggil menggunakan tag <title>. Ini adalah informasi yang terdapat pada header yang dipanggil bersamaan dengan tag header. Tag judul diawali dengan <title> dan diakhiri dengan </title>.
  • <body>: Tahap selanjutnya adalah tahapan yang paling penting dari semua tag yang dipelajari sejauh ini. Tag body mengandung bentuk aktual dari laman web yang terlihat langsung oleh pengguna. Bagian ini diawali dengan <body> dan diakhiri dengan </body>. Setiap konten yang terletak diantara tag akan ditampilkan pada laman web baik itu tulisan, gambar, audio, ataupun link. Selanjutnya akan dijelaskan bagaimana menggunakan berbagai jenis tag untuk memanggil konten pada laman web.

Baca Juga:

<!DOCTYPE html>

<html>

<!-- Dasar HTML -->

  

<head>

<!-- Informasi tentang halaman -->

<!-- Ini adalah tag komentar -->

<title>

Muhammad Nasution

</title>

</head>

 

<body>

<!-- Komentar bagian konten web -->

</body>

</html>


Kode html yang telah ditulis sebelum ini tidak akan menampilkan apapun pada browser. Kode tersebut hanya menampilkan bentuk dasar dari cara menulis kode HTML dan akan dinamai dengan judul dari page sebagai Muhammad Nasution. <!-- comment here--> adalah tag komentar pada HTML dan tidak akan dibaca apapun yang terdapat didalamnya (tag komentar).

HTML Heading

Tag ini membantu untuk memberikan heading ke konten dari laman web. Tag tersebut umumnya ditulis di dalam tag body. HTML menyediakan enam jenis heading tag, mulai dari <h1> hingga <h6>. Setiap tag akan menampilkan heading dengan gaya dan ukuran huruf yang berbeda.

Contoh:

<!DOCTYPE html>

<html>

<!-- Dasar HTML -->

  

<head>

<title>

Html Judul

</title>

</head>

 

<body>

<h1>

Selamat data di Indomaret, Selamat berbelanja!

</h1>

 

<h2>

Selamat data di Indomaret, Selamat berbelanja!

</h2>

 

<h3>

Selamat data di Indomaret, Selamat berbelanja!

</h3>

 

<h4>

Selamat data di Indomaret, Selamat berbelanja!

</h4>

 

<h5>

Selamat data di Indomaret, Selamat berbelanja!

</h5>

 

<h6>

Selamat data di Indomaret, Selamat berbelanja!

</h6>

</body>

</html>

Output: 

Selamat data di Indomaret, Selamat berbelanja!

Selamat data di Indomaret, Selamat berbelanja!

Selamat data di Indomaret, Selamat berbelanja!

Selamat data di Indomaret, Selamat berbelanja!

Selamat data di Indomaret, Selamat berbelanja!
Selamat data di Indomaret, Selamat berbelanja!

HTML Paragraph

Tag ini membantu membuat statement paragraf pada sebuah laman web dengan menggunakan tag <p>...</p>. Tag <br> digunakan untuk keluar barisan (enter). <br> adalah sebuah tag kosong. 

Contoh:

<!DOCTYPE html>

<html>

<!-- Dasar HTML -->

 

<head>

<title>

Dasar HTML

</title>

</head>

 

<body>

<h1>

Selamat datang di Indomaret, Selamat berbelanja!

</h1>

 

<p>

Rotinya sekalian kak?<br>

Rotinya sekalian kak?<br>

Rotinya sekalian kak?<br>

</p>

</body>

</html>

Output:

Selamat datang di Indomaret, Selamat berbelanja!

Rotinya sekalian kak?
Rotinya sekalian kak?
Rotinya sekalian kak?


HTML Garis Horizontal

Tag <hr> digunakan untuk keluar dari laman menjadi beberapa bagian berbeda dengan cara menciptakan margin horizontal dengan bantuan dari garis horizontal yang membentang dari kiri ke kanan sisi dari laman web. Tag <hr> adalah tag kosong dan tidak membutuhkan penambahan statement apapun. 

Contoh:

<!DOCTYPE html>

<html>

<!-- Dasar HTML -->

 

<head>

<title>

Bukan kaleng-kaleng

</title>

</head>

 

<body>

<h1>

Aku adalah seorang raja bajak laut!

</h1>

 

<p>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

</p>

 

<hr>

 

<p>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

</p>

 

<hr>

 

<p>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.<br>

</p>

 

<hr>

 

</body>

</html>

Output:

Aku adalah seorang raja bajak laut!

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.

kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.
kakekku adalah seorang kapiten, tapi pedangnya tidak panjang.


HTML Image

Tag image digunakan untuk memasukkan gambar ke dalam laman web. Sumber dari gambar yang akan dimasukkan adalah terletak didalam tag <img src=" sumber alamat gambar pada komputer">.

Contoh:

<!DOCTYPE html>

<html>

<!-- Dasar HTML -->

 

<head>

<title>

Jumanji

</title>

</head>

 

<body>

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KqWQ9W-NsuYhRTmKpacJOMA3rH8dKb24OrXjgrKssUmp7ixW7XCr4kPYPIkdyvXu84vCD-t4x6Mgo2v3LbfioNeAXtUNy05rsmC3MrcWsWydigMaayLlNZ4Cdl8p3hNgQtsmJqzR2xE/s113/IMG-20190205-WA0015.jpg">

 

</body>

</html>


Referensi Tambahan:

Artikel ini didedikasikan kepada: Lusi Kristiana, Mauluda Muhammad Rizky, Muchamad Mukharom Arijal, Muhammad Irfan Pratama, dan Nadya Putri Al-Fath.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Bagian Dasar HTML Fungsi dan Contohnya"

  1. AnonimSelasa, 18 Mei 2021 pukul 11.00.00 WIB

    Apa yang dimaksud dengan tag pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 11.00.00 WIB

      Tag HTML umumya didefinisikan sebagai sekumpulan karakter yang membentuk perintah yang diformat untuk halaman web. Pada inti HTML, tag tersebut akan memberikan arahan-arahan atau resep untuk konten visual yang akan ditampilkan atau yang akan dilihat oleh user pada web.

      Hapus
  2. AnonimSelasa, 18 Mei 2021 pukul 11.01.00 WIB

    Secara sederhana apa yang dimaksud dengan tag html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 11.02.00 WIB

      Tag juga dapat dimaksud sebagai label, dimana label tersebut digunakan sebagai penanda dari tampilan apa yang akan diperlihatkan pada halaman web.

      Hapus
  3. AnonimSelasa, 18 Mei 2021 pukul 11.04.00 WIB

    Ada berapa banyak tag yang terdapat dalam html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 11.04.00 WIB

      Umumnya terdapat 10 jenis tag yang paling sering atau paling umum digunakan pada HTML, namun demikian dalam perkembangannya ada lebih dari 100 tag pada HTML5, dimana umumnya hanya sebagian kecil saja dari keseluruhan tag tersebut yang digunakan.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -