II.
Format Teks pada Halaman Web
A. Dasar-Dasar HTML
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang
untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style
Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript. Peramban (Browser) internet
menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen
menjadi halaman web multimedia. HTML menggambarkan struktur halaman web secara semantik
dan isyarat awal yang disertakan untuk penampilan dokumen.
Pada intinya, HTML adalah bahasa yang cukup sederhana yang terdiri dari elemen-elemen,
yang dapat diterapkan pada potongan-potongan teks untuk memberi mereka arti yang berbeda
dalam sebuah dokumen (Apakah itu paragraf? Apakah itu daftar berpoin? Apakah itu bagian dari
tabel? ), menyusun dokumen menjadi beberapa bagian logis (Apakah dokumen memiliki tajuk? Tiga
kolom konten? Menu navigasi?), dan menyematkan konten seperti gambar dan video ke dalam
halaman.
B. Format Dokumen HTML
1. Struktur Penulisan HTML
semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>.
Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </html>. Bagian yang
terlihat dari dokumen HTML adalah antara <body> dan </body>.
Contoh
Keterangan:
<!DOCTYPE mendefinisikan jenis dokumen atau menginstruksikan
html> browser tentang versi HTML.
<html> Tag ini menginformasikan browser bahwa itu adalah
dokumen HTML
<head> Tag Ini harus menjadi elemen pertama di dalam elemen
<html> , yang berisi metadata (informasi tentang dokumen).
<title> Tag ini digunakan untuk menambahkan judul halaman HTML
yang muncul di bagian atas jendela browser. Itu harus
ditempatkan di dalam tag kepala dan harus segera ditutup.
(Opsional)
<body> Tag ini digunakan untuk menambahkan Teks, di antara tag
body menjelaskan isi halaman yang dapat dilihat oleh
pengguna akhir. Tag ini berisi konten utama dari dokumen
HTML.
<h1> Tag ini mendefinisikan heading
<p> Tag ini mendefinisikan paragraf
Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat
digunakan di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah
untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag:
<!-- Ini baris komentar, tidak diproses -->
2. Aturan Dasar HTML
- semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen:
<!DOCTYPE html>.
- Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </html>.
- Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </body>.
a) Tag <!DOCTYPE>
Deklarasi <!DOCTYPE html> mewakili jenis dokumen, dan membantu browser
untuk menampilkan halaman web dengan benar.
b) Tag <Head>
Elemen <head> adalah wadah untuk metadata (data tentang data) dan
ditempatkan di antara tag <html> dan tag <body>. Metadata adalah data tentang
dokumen HTML. Metadata tidak ditampilkan. Metadata biasanya menentukan judul
dokumen, kumpulan karakter, gaya, skrip, dan informasi meta lainnya. Elemen berikut
dapat masuk ke dalam elemen <head>:
- <title> (required in every HTML document)
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
c) Tag Headings
Tag <header> mewakili wadah untuk konten pengantar atau sekumpulan
tautan navigasi. Elemen <header> biasanya berisi:
- satu atau lebih elemen heading (<h1> - <h6>)
- logo atau ikon
- informasi pengarang.
d) Tag Body
Tag <body> mendefinisikan isi dokumen. Elemen <body> berisi semua konten
dokumen HTML, seperti heading, paragraf, gambar, hyperlink, tabel, daftar, dll.
Contoh
3. Pengaturan Properti HTML
Dokumen HTML merupakan fila atau berkas berbentuk teks murni. Artinya, berbagai
pengaturan tampilan dokumen juga dilakukan dengan menggunakan teks atau tulisan
tertentu sesuai ketentuan.
a) Elements
File HTML terbuat dari elemen. Elemen-elemen ini bertanggung jawab untuk
membuat halaman web dan menentukan konten di halaman web itu. Sebuah elemen
dalam HTML biasanya terdiri dari tag awal <tag name>, tag penutup </tag name> dan
konten yang disisipkan di antaranya. Secara teknis, elemen adalah kumpulan tag awal,
atribut, tag akhir, konten.
Contoh
Start Tag Element Content End Tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
Elemen HTML dapat bersarang (ini berarti elemen dapat berisi elemen lain). Semua
dokumen HTML terdiri dari elemen HTML bersarang.
Contoh berikut berisi empat elemen HTML (<html>, <body>, <h1> dan <p>):
Keterangan:
Elemen <html> adalah elemen root dan mendefinisikan seluruh dokumen HTML.
Tag awal ditandai dengan <html> dan tag akhir dengan </html>.
Kemudian, di dalam elemen <html> ada elemen <body> :
Keterangan:
Elemen <body> mendefinisikan isi dokumen.
Tag awal ditandai dengan <body> dan tag akhir dengan </body>.
Kemudian, di dalam elemen <body> ada dua elemen lainnya: <h1> dan <p>:
b) Atribut HTML
Atribut HTML adalah teks khusus yang memberikan informasi tambahan tentang
elemen atau atribut pengubah dari elemen HTML. Setiap elemen atau tag dapat
memiliki atribut, yang mendefinisikan perilaku elemen tersebut. Atribut harus selalu
diterapkan dengan tag awal. Atribut harus selalu diterapkan dengan nama dan
pasangan nilainya. Nama dan nilai Atribut peka terhadap huruf besar/kecil (case
sensitive), dan direkomendasikan agar ditulis dalam Huruf Kecil saja. Anda dapat
menambahkan beberapa atribut dalam satu elemen HTML, tetapi perlu memberi
ruang di antara dua atribut.
Syntax:
<element attribute_name="value">content</element>
Contoh:
Sebelum di tambahkan atribut
Sesudah di tambahkan atribut
(1) Judul (title) Atribut dalam HTML
Atribut judul digunakan sebagai tooltip teks di sebagian besar browser. Ini
menampilkan teksnya ketika pengguna memindahkan kursor ke tautan atau teks apa
pun. Anda dapat menggunakannya dengan teks atau tautan apa pun untuk
menampilkan deskripsi tentang tautan atau teks itu.
Contoh
(2) Atribut href
Atribut href adalah atribut utama dari tag anchor <a>. Atribut ini memberikan
alamat tautan yang ditentukan dalam tautan itu. Atribut href menyediakan hyperlink,
dan jika kosong, maka akan tetap berada di halaman yang sama.
Contoh
Tugas
1. Buatlah file HTML dengan nama tugas1 !
a. Masukan kode berikut pada file HTML !
b. Jalankan kode di atas dengan browser/ peramban kemudian screenshoot hasilnya!
2. Buatlah file html dengan nama tugas2 !
a. Masukan kode berikut pada file HTML !
b. Jalankan kode di atas dengan browser/ peramban kemudian screenshoot hasilnya!
3. File HTML dan Screenshot Tugas no 1 san 2 di kumpulkan di MS.Teams pada kantung Tugas.
