Selasa, Mei 18, 2021

Dasar HTML

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. 

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.

  • satu, 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>
  • dua, <html>: setiap kode HTML harus berada diantara kedua tag dasar HTML. Tag tersebut dimulai dengan <html> dan diakhiri dengan </html>.
  • tiga, <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.
  • empat, <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>.
  • lima, <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 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. Dimulai dengan tag <p> dan diakhiri dengan </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://3.bp.blogspot.com/-zNO07fkjK6k/YHqJPdHNfiI/AAAAAAAANrI/DtkJcA7aZU0qijCblBJ9cB9DZUSujN7RACK4BGAYYCw/s113/IMG-20190205-WA0015.jpg">

 

</body>

</html>

Output: 

6 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

Respon komentar 7 x 24 jam, so please be patient :D