Scribd
Unggah
29 tayangan7 halaman

HTML Dasar

Diunggah oleh

wirda
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
29 tayangan7 halaman

HTML Dasar

Diunggah oleh

wirda
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Perkenalan

HTML adalah bahasa komputer yang digunakan untuk membuat kerangka


atau struktur untuk Web pages (halaman website) di internet.

HTML adalah singkatan dari Hyper Text Markup Language.

Fungsi HTML adalah sebagai 'kerangka' dari sebuah website.

Bagaimana HTML Bekerja di Web Browser?


Web browser seperti Chrome, Firefox, Edge, Safari, atau Opera akan
membaca dokumen HTML. Dokumen HTML yang berisi tag-tag HTML akan
memberitahu browser bagaimana cara menampilkan sebuah konten.

Selain HTML, ada juga bahasa CSS (Cascading Style Sheet) dan JavaScript
yang akan kita pelajari untuk membuat sebuah tampilan website yang
interaktif. Secara fungsi, ketiga bahasa tersebut bisa dianalogikan seperti
ini:
Fungsi HTML adalah sebagai 'kerangka', yang memberi struktur pada
website.

Fungsi CSS sebagai 'baju' , yang memberi warna dan layout pada website.

Fungsi JavaScript, sebagai element yang membuat website


menjadi interaktif.

HTML Tag
HTML terdiri dari komponen yang disebut HTML Tag.
Pada umumnya, ada 2 tipe HTML Tag:

 Opening Tag (tag pembuka) - contohnya adalah <p>.


 Closing Tag (tag penutup) - contohnya adalah </p>.

📝 Catatan:

Tag <p> digunakan untuk menampilkan paragraf. Topik ini akan kita
pelajari di bagian selanjutnya.
Berikut adalah format penulisan Opening Tag dan Closing Tag:

Struktur Dokumen HTML


Secara garis besar, struktur dokumen HTML dapat digambarkan sebagai
berikut:
Dokumen HTML memiliki 3 tag utama, yaitu <html>,<head>, dan <body>. Ketiga
tag tersebut harus diketik persis seperti contoh di bawah ini:

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Penjelasan dari contoh di atas:

 <!DOCTYPE> syntax mendefinisikan versi dari HTML yang digunakan


dan harus dideklarasi sebelum tag <html>. <!DOCTYPE
html>mendefinisikan bahwa dokumen ini adalah HTML5.
 <html></html> adalah root element dari halaman HTML. Semua HTML tag
lainnya harus dibungkus dengan tag ini.
 <head> pada umumnya berisi <meta>, <title> , konten css/js internal
maupun link ke file css/js eksternal.
 <body> berisi konten website yang ingin ditampilkan pada browser.
📝 Catatan:

Tag <meta> digunakan untuk menulis info tentang suatu dokumen HTML
seperti deskripsi, nama pengarang, keywords, dan tanggal terakhir
dokumen diperbaharui. Tag <meta> tidak akan tampil di halaman HTML.
Nah, di bawah ini adalah contoh sederhana file HTML yang sudah memiliki
title dan konten:

<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan


Code Editor.
Contoh di atas apabila dibuka pada browser akan terlihat seperti ini:

Perhatikan gambar di atas:

 Element <title>Website Pertamaku</title> akan menghasilkan tulisan "Website


Pertamaku" pada judul tab halaman browser
 Element <h1>Hello World!</h1> menghasilkan tulisan "Hello
World!" sebagai konten pada file HTML kita.

📝 Catatan:

Tag <h1> adalah salah satu tag dari tag HTML heading yang berfungsi
untuk menampilkan teks. Topik ini akan kita pelajari di bagian selanjutnya.
Selamat, kamu sudah berhasil membuat halaman website yang sederhana.
Mudah bukan?

HTML Element
HTML Element merupakan sebuah komponen dalam halaman web, bisa
berupa paragraf, judul, atau gambar.

Struktur dari sebuah HTML element dapat digambarkan seperti ini:

Pada umumnya, HTML Element terdiri dari:

 Opening Tag (tag pembuka) - contohnya adalah <p>.


 Closing Tag (tag penutup) - contohnya adalah </p>.
 Attribute - contohnya adalah style yang memiliki Value "color=red".
HTML Attribute akan kita pelajari di topik selanjutnya.
 Content (konten) yang ingin ditampilkan di browser - contohnya
adalah My first paragraph.

Ada dua jenis HTML Element, yaitu:

1. HTML Element yang memiliki Opening Tag (tag pembuka)


dan Closing Tag (tag penutup) - contohnya adalah <p> dan </p>.
2. Empty HTML Element: memiliki Self-closing Tag, yang hanya
memiliki Opening Tag (tag pembuka) dengan garis miring sebelum
kurung tutup - contohnya adalah <br /> atau <img />.

📝 Catatan:

Tag <br /> digunakan untuk berganti baris (spasi).


Tag <img /> digunakan untuk menampilkan element gambar.
Topik ini akan kita pelajari di bagian selanjutnya.
Agar lebih jelas, berikut adalah contoh penggunaan HTML dan Empty
HTML Element:

<!-- HTML Element yang memiliki tag pembuka dan tag penutup -->
<p style="color:red">This is a paragraph.</p>

<!-- Empty HTML Element yang memiliki self-closing tag -->


<img src="https://bit.ly/3laVBck" alt="kucing" />

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan


Code Editor.
Kalau kalian perhatikan, tag <img> tidak memiliki tag penutup </img> di
belakangnya. Bedanya, tag tersebut hanya memiliki / (tanda garis
miring) di bagian belakang tag pembukanya.

Anda mungkin juga menyukai