Kursus IT Dasar HTML 009_Hello HTML
Apa itu HTML?
Jaringan, atau lebih spesifiknya World Wide Web, terdiri dari banyak dokumen dan sumber daya yang saling terhubung. Dokumen dan sumber daya ini ditulis dalam HTML dan disebut halaman web. HTML adalah dasar dari halaman web dan mendefinisikan struktur serta konten halaman web.
Ketika Anda memasukkan URL di browser (misalnya, www.zhaojian.net), browser mengirimkan permintaan ke server yang menyediakan halaman web tersebut. Server merespons permintaan ini dan mengirimkan halaman web yang diminta (yaitu beberapa HTML) kembali ke browser. Kemudian, browser mengurai HTML ini dan menampilkannya sebagai halaman web yang biasanya Anda lihat.
HTML (HyperText Markup Language, Bahasa Markup Hiperteks) adalah bahasa markup yang digunakan untuk membuat dan merancang struktur halaman web. HTML terdiri dari serangkaian elemen yang dapat digunakan untuk membungkus bagian-bagian konten yang berbeda, membuatnya ditampilkan atau berfungsi dengan cara tertentu. Sepasang tag dapat menambahkan hyperlink ke teks atau gambar, mengatur teks menjadi miring atau tebal, membuat paragraf, daftar, dll.
[!Ringkasan]
- HTML bukan bahasa pemrograman, tetapi bahasa markup
- Dokumen HTML berisi tag HTML dan konten teks (mengapa tidak ada gambar?)
- Dokumen HTML juga disebut halaman web
Elemen HTML lengkap
Contoh:
<p>hello HTML!</p>Efek:
Analisis struktur:
[!Ringkasan]
- Elemen HTML lengkap terdiri dari tiga bagian: tag pembuka, konten, dan tag penutup;
- Tag pembuka (Opening tag): Berisi nama elemen (dalam contoh ini p), dikelilingi oleh tanda kurung sudut kiri dan kanan. Tag pembuka menandai di mana elemen dimulai atau mulai berlaku;
- Konten (Content): Konten elemen;
- Tag penutup (Closing tag): Mirip dengan tag pembuka, tetapi menyertakan garis miring sebelum nama elemen. Ini menandai akhir dari elemen. Tidak menyertakan tag penutup adalah kesalahan umum pemula dan dapat menghasilkan hasil yang aneh.
Halaman HTML lengkap
Contoh:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>Efek:
Analisis struktur:
[!Ringkasan]
<!DOCTYPE html>— Mendeklarasikan tipe dokumen HTML. Tipe dokumen adalah warisan sejarah yang memberi tahu browser versi dan tipe dokumen. Deklarasi DOCTYPE mode ketat HTML4:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>— Elemenhtml, semua konten halaman HTML, kadang disebut elemen akar.<head></head>— Elemenhead, kontennya tidak terlihat oleh pengguna dan berisi hal-hal seperti kata kunci pencarian untuk mesin pencari, deskripsi halaman, gaya CSS, file JavaScript, dan deklarasi encoding karakter.<meta charset="utf-8">— Elemenmeta, digunakan untuk menyediakan metadata tentang dokumen HTML. Atribut charset mengatur set karakter dokumen Anda ke UTF-8.<title></title>— Elementitle. Elemen ini mengatur judul halaman, ditampilkan di tab browser, dan juga berfungsi sebagai teks deskriptif untuk bookmark.<body></body>— Elemenbody. Elemen ini berisi konten yang diharapkan pengguna lihat saat mengunjungi halaman, termasuk teks, gambar, video, game, trek audio yang dapat diputar, atau konten lainnya.<p></p>— Elemen paragraf, mewakili paragraf teks.
Nama elemen | Fungsi | Contoh |
|---|---|---|
<!DOCTYPE html> | Mendefinisikan tipe dan versi dokumen HTML | <!DOCTYPE html> |
<html> | Mendefinisikan elemen akar dokumen HTML | <html lang="en"> |
<head> | Berisi metainformasi dokumen, seperti judul, deklarasi set karakter, tautan gaya dan skrip, dll. | <head>...</head> |
<title> | Mendefinisikan judul dokumen, ditampilkan di bilah judul atau tab browser | <title>My Web Page</title> |
<meta> | Menyediakan metainformasi tentang dokumen, seperti set karakter, pengaturan viewport, kata kunci, dll. | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | Merujuk sumber daya eksternal, seperti stylesheet dan ikon | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | Mendefinisikan gaya secara internal dalam dokumen | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | Mendefinisikan atau merujuk skrip, dapat terkandung dalam dokumen atau merujuk skrip eksternal | <script src="script.js"></script> |
<noscript> | Mendefinisikan konten yang ditampilkan ketika browser tidak mendukung skrip | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | Menentukan URL dasar untuk semua tautan relatif di halaman | <base href="https://www.zhaojian.net/"> |
Tautan:
Ekstensi VS Code: Remote - SSH Remote Development