DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Bagian Dasar HTML Fungsi dan Contohnya

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. 

5 Bagian Dasar dalam Pembuatan Dokumen HTML
Ilustrasi Pembuatan Dokumen HTML

Dasar dokumen HTML
Berikut ini akan disebutkan dasar-dasar dari tag HTML yang akan membagi kode program ke dalam beberapa variasi seperti headbody, 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 headerTag judul diawali dengan <title> dan diakhiri dengan </title>.
  • <body>: Tahap selanjutnya adalah tahapan yang paling penting dari semua tag yang kita pelajari 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.

Secara umum seluruh kode HTML akan terlihat sebagai berikut:

<!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 webTag 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 webTag <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://3.bp.blogspot.com/-zNO07fkjK6k/YHqJPdHNfiI/AAAAAAAANrI/DtkJcA7aZU0qijCblBJ9cB9DZUSujN7RACK4BGAYYCw/s113/IMG-20190205-WA0015.jpg">

 

</body>

</html>


Komentar

  1. Apa yang dimaksud dengan tag pada HTML?

    BalasHapus
    Balasan
    1. 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. Secara sederhana apa yang dimaksud dengan tag html?

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

      Hapus
  3. Ada berapa banyak tag yang terdapat dalam html?

    BalasHapus
    Balasan
    1. 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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas