01 Struktur HTML1

PENGERTIAN, FUNGSI DAN STRUKTUR DASAR HTML
Hyper Text Markup Language atau yang biasa kita sebut HTML adalah
sebuah bahasa yang biasa digunakan untuk membuat sebuah web atau
untuk menampilkan suatu informasi - informasi yang ada di dalam
internet.
FUNGSI HTML :
1. Untuk membuat sebuah web.
2. Untuk menampilkan suatu informasi dimana bisa di isi gambar,
suara, teks ataupun video di internet
3. Membuat sebuah form di internet.
4. Membuat sebuah games sederhana walaupun bukan utama dan
dibutuhkan alat tambahan lain.
STRUKTUR DASAR HTML :

Tag, atribut dan elemen merupakan 3 komponen utama dalam
HTML. Semua kode HTML yang menyusun halaman web mengandung 3
komponen ini dan ketiganya saling berkaitan. Elemen tersusun dari tag
dan objek yang ada diapitnya. Sedangkan atribut memberi informasi
tambahan di dalam tag
elemen
tag pembuka
<a href=https://www.google.com”>Website Google</a>
atribut name atribut value tag penutup

Gambar di atas adalah contoh kode HTML untuk membuat link.
 Elemen adalah semua kode dari awal (tag pembuka) hingga
akhir (tag penutup).
 Sedangkan tag adalah kode yang berwarna biru yang terdiri
dari tag pembuka dan tag penutup.
 Atribut adalah yang berwarna merah (nama atribut) dan yang
berwarna hijau (nilai/value atribut).
Tidak semua elemen dalam dokumen HTML dalam penulisannya harus

menggunakan tag awal dan akhir secara berpasangan. Contohnya adalah
sebagai berikut:
~ untuk mencetak garis horizontal menggunakan tag <hr>

~ untuk mencetak kalimat pada baris selanjutnya menggunakan tag <br>
<html>
<head>
<title>Diisi dengan judul</Title>
</head>
<body>
Isi dari web yang dibuat
</body>
</html>
Keterangan
 <html> ini biasa disebut sebagai elemen root karena mengandung
semua elemen lain.
 <head> ini berisi informasi dasar pada web tersebut seperti title dan
meta tag.
 <title> berfungsi untuk memberikan judul dari dokumen atau
halaman tersebut.
 <body> adalah isi dari web tersebut.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Halaman Pertamaku</title>
</head>
<body>
Hello World. Ini adalah halaman pertama saya
</body>
</html>
Contoh Penggunaan Tag

1. Tag <br>
digunakan untuk membuat Baris baru atau berpindah baris
<!DOCTYPE html>
<html lang="en">
<head>
<title> Latihan tag br </title>
</head>
</body>
</html>
2. Tag <p>
digunakan untuk membuat paragraf.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Latihan tag p </title>
</head>
</body>
</html>
3. Tag <h>
HTML menyediakan 6 buah tag yang digunakan untuk mengatur
ukuran teks yang dijadikan sebagai judul dalam badan dokumen.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Latihan tag heading</title>
</head>
Ini adalah bentuk Heading1
</body>
</html>
4. Tag <hr>
Untuk mempercantik halaman, seringkali pembuat dokumen Web
menambahkan garis horisontal dengan menyertakan tag <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Latihan tag hr </title>
</head>
</body>
</html>
Kode Tag Fungsi
HTML
<!DOCTYPE> Menentukan jenis dokumen
<html> Pembuka dan penutup HTML
<head> Menentukan informasi halaman
<title> Menentukan judul halaman
<body> Tempat menampilkan konten
<h1>..</h6> Membuat judul teks
<p> Menentukan paragraf
<hr> Mebuat garis horizontal
<!–…–> Membuat komentar
<b> Menebalkan teks
<blockquote> Menentukan kutipan dari sumber lain
<code> Menentukan kode komputer
<em> Membuat teks miring atau ditekankan
<i> Membuat teks miring
<pre> Menentukan teks diformat
<q> Menentukan kutipan pendek
<s> Mencoret teks
<small> Menentukan teks yang lebih kecil
<strong> Membuat teks tebal atau teks penting
<sub> Menentukan teks langganan
<sup> Menentukan teks superscript
<time> Menentukan tanggal / waktu
<u> Membuat teks garis bawah
<form> Menentukan formulir HTML
<input> Membuat form input
<textarea> Membuat form teks yang lebih besar
<button> Menentukan tombol yang dapat diklik
<select> Menentukan daftar drop-down
<option> Menentukan opsi dalam daftar drop-down
<label> Menentukan label untuk elemen input
<iframe> Menentukan bingkai inline
<img> Menentukan gambar
<canvas> Digunakan untuk menggambar grafik
<figure> Menentukan konten mandiri
<svg> Menentukan wadah untuk grafik SVG
<audio> Menentukan konten suara
<source> Menentukan banyak sumber multimedia
<a> Mendefinisikan hyperlink
<link> Menentukan hubungan antara dokumen dan sumber daya
eksternal
<nav> Menentukan link navigasi
<ul> Menentukan daftar tidak terurut
<ol> Menentukan daftar yang terurut
<li> Menentukan item pada list
<dl> Menentukan daftar deskripsi
<dt> Menentukan istilah / nama dalam daftar deskripsi
<dd> Menentukan deskripsi istilah / nama dalam daftar
deskripsi
<table> Menentukan tabel
<th> Menentukan header dalam tabel
<tr> Menentukan baris dalam tabel
<td> Menentukan sel atau kotak dalam tabel
<thead> Mengelompokkan konten header dalam sebuah tabel
<tbody> Mengelompokkan konten isi dalam tabel
<tfoot> Mengelompokkan konten footer dalam sebuah tabel
<style> Menentukan informasi gaya untuk dokumen
<div> Membagi halaman dalam blok
<span> Membagi halaman dalam blok kecil
<header> Menentukan header untuk bagian halaman
<footer> Menentukan footer untuk bagian halaman
<main> Menentukan konten utama halaman
<section> Menentukan bagian dalam halaman
<artikel> Menentukan artikel
<aside> Menentukan konten selain dari konten halaman
<meta> Menentukan metadata halaman
<script> Menentukan skrip
<noscript> Menentukan konten alternatif untuk pengguna yang tidak
mendukung skrip
<embed> Menentukan wadah untuk aplikasi eksternal
<object> Menentukan objek yang disematkan
<caption> Menentukan keterangan tabel
<cite> Menentukan judul sebuah karya
<abbr> Menentukan singkatan atau akronim

01 Struktur HTML1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

01 Struktur HTML1

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGERTIAN, FUNGSI DAN STRUKTUR DASAR HTML

STRUKTUR DASAR HTML :

<a href=https://www.google.com”>Website Google</a>

atribut name atribut value tag penutup

Tidak semua elemen dalam dokumen HTML dalam penulisannya harus

~ untuk mencetak garis horizontal menggunakan tag <hr>

Contoh Penggunaan Tag

Anda mungkin juga menyukai