New BAB II

BAB II
HYPER TEXT MARKUP LANGUAGE (HTML)
CAPAIAN PEMBELAJARAN
1. Capaian Pembelajaran Umum :
Mahasiswa dapat mengetahui dan memahami konsep dasar pemrograman berbasis web
menggunakan HTML.
2. Capaian Pembelajaran Khusus :
1. Mahasiswa dapat menjelaskan pengertian dan paham dalam pemrograman HTML.
2. Mahasiswa dapat menjelaskan struktur dokumen HTML.
3. Mahasiswa memahami tentang dasar-dasar HTML.
4. Mahasiswa dapat menjelaskan format text dalam HTML seperti cetak tebal, garis
bawah, teks berwarna dan lain-lain.
A. PENDAHULUAN/DESKRIPSI SINGKAT.
Pada bab ini akan dijelaskan pengertian dari HTML, dasar-dasar dari HTML, struktur
dokumen HTML, format tulisan atau text seperti membuat text menjadi tebal, text yang
bergaris bawah, text yang dicetak miring, mengecilkan huruf dan memberikan warna pada
text serta membuat text bergerak.
B. POKOK-POKOK ISI.
2.1 Pengenalan HTML

HTML singkatan dari Hyper Text Markup Language, HTML sendiri adalah sebuah
bahasa skrip yang digunakan untuk membuat sebuah halaman web atau situs. Untuk menulis
kode HTML bisa menggunakan editor teks seperti notepad++, sublime text, VS code dan
lain sebagainya. Cara menyimpan file HTML adalah, buat nama file kemudian tambahkan
ekstensi . HTML.
Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi
komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh dari elemen
adalah : head, body, table, paragraph. Elemen dapat berupa teks murni atau bukan teks, atau
keduanya.
2.2 Tag HTML
Untuk menandai berbagai elemen dalam suatu dokumen HTML menggunakan tag.
Tag HTML terdiri dari sebuah tanda kurung yang berpasangan < >. Tag umumnya
berpasangan misal <h1> dengan </h1>, tag yang menjadi pasangan selalu diawali dengan
karakter garing (/, garis miring). Tag yang pertama menunjukan tag awal yang berarti awal
elemen dan yang kedua menunjukan tag akhir, berarti akhir elemen. Nama elemen
ditunjukkan dengan nama tag nya. Suatu elemen didalam dokumen HTML harus ditandai
dengan penulisan tag nya yang berpasangan.
Ada beberapa eleman yang tidak mengharuskan tagnya dituliskan secara berpasangan.
Misalnya :
➢ Ganti baris – line break dengan tag .
➢ Garis datar – horizontal rule dengan tag <hr>.
2.3 Tag-tag Dasar HTML

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan
tag <html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas
tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen
body berisi teks yang sebenarnya yang tersusun dari link, paragraph dan elemen lainnya.
Berikut merupakan tag-tag dasar pada HTML :
1. DTD atau DOCTYPE
Tag paling awal dari struktur dokummen HTML adalah DTD atau biasa disebut
DOCTYPE. DTD merupakan singkatan dari Document Type Declaration yang
berfungsi untuk memberi tahu browser bahwa dokumen yang akan ditampilkan adalah
dokumen HTML. DTD memiliki berbagai versi cara penulisan yang dipengaruhi oleh
versi HTML yang digunakan. Pada materi ini menggunakan DTD versi HTML5.
Cara penulisannya <!DOCTYPE html>
2. HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen yang dibuat adalah
dokumen html.
Cara penulisanya, <html> diawal dokumen dan </html> diakhir dokumen.
3. Head
Untuk menjelaskan keterangan dokumen web yang akan ditampilkan.
Cara penulisannya, <head> setelah <html>, </head> diakhir section head
4. Title
Merupakan tag didalam head yang harus dibuat untuk memberikan judul pada browser
web.
Cara penulisannya, <title> judul dokumen </title>
5. Body
Merupakan section utama dalam dokumen web, pada bagian inilah semua isi dokumen
web yang akan ditampilkan.
Cara penulisannya.
<body> diawal, setelah tag </head>
</body> diakhir, diletakan sebelum tag </html>
6. Paragraph
Setiap paragraf harus dimulai dengan memberikan tag . Di akhir paragraf tidak
diharuskan menuliskan sebagai akhir paragraf, karena tag tidak didefinisikan
mempunyai tag akhir. Setiap pengantian paragraf harus dimulai dengan kembali.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Paragraf </title>
</head>
<body>
“ Selamat Datang Pada Mata Kuliah Praktek Pemrograman Web “ 
 “ Selamat Belajar “ 
 “ Ayo Kamu Bisa “ 
</body>
</html>
Gambar 2.1 Tampilan dari contoh paragraph.

7. Line Break.
Untuk membuat suatu teks yang bisa ditampilkan pada baris yang baru dalam suatu
paragraf maka harus menggunakan tag sebelum teks yang dimaksud tersebut
dituliskan.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Line Break </title>
</head>
<body>
“ Selamat Belajar Membuat Web “ nama kelas jurusan
</body>
</html>
Gambar 2.2 Tampilan Contoh Line Break.

8. Heading
Teks dalam dokumen biasanya mempunyai judul, pada dokumen html judul disebut
heading, heading tulisan akan ditampilkan dengan huruf yang lebih besar atau
ditebalkan.
<!DOCTYPE html>
<html>
<head>
<title> contoh heading </title>
</head>
<body>
<h1> Judul 1</h1>
<h2> Judul 2 </h2>
<h3> Judul 3 </h3>
<h4> Judul 4 </h4>
<h5> Judul 5 </h5>
<h6> Judul 6 </h6>
</body>
</html>
Gambar 2.3 Tampilan Contoh Heading
9. Garis mendatar (Horizontal).

Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai
pemisah antar bagian atau paragraf.
<!DOCTYPE html>
<html>
<head>
<title> contoh garis horizontal </title>
</head>
<body>
 Tag hr digunakan untuk mendefenisikan garis 
<hr>
 yang ini adalah paragraf 
<hr>
 yang ini juga paragraf 
<hr>
 paragraf juga 
</body>
</html>
Gambar 2.4 Tampilan Contoh Garis Horizontal.
10. Komentar
Tag komentar di tidak dieksekusi pada HTML, tag ini hanya digunakan untuk
mengomentari suati skrip.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Paragraf </title>
</head>
<body>

“ Selamat Datang Pada Mata Kuliah Praktek Pemrograman Web “ 
 “ Selamat Belajar “ 
 “ Ayo Kamu Bisa “ 
</body>
</html>
2.4 Format Text HTML

Ada beberapa pemformatan teks pada HTML diantaranya menebalkan huruf (bold),
memiringkan huruf (italic), garis bawah pada huruf (underline), mencoret huruf,
mengecilkan huruf, superscript, subscript dan lain sebagainya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Format Teks </title>
</head>
<body>
 "Selamat Belajar Membuat Web" 

 "Selamat Belajar Membuat Web" 
<hr>
 "Selamat Belajar" 

 "Selamat Belajar" 
<hr>
 " Ayo Kamu Bisa" 
<ins> " Ayo Kamu Bisa" </ins>
<hr>
<s> " Jangan Malas" </s> 
<del> " Jangan Malas" </del>
<hr>
 Hai...... 
Contoh penulisan senyawa kimia: CO2, CH4 
Contoh penulisan rumus matematika: A=πr2
</body>
</html>
Gambar 2.5 Tampilan format teks
2.5 Teks Preformat.

Jarak antara suatu teks atau kalimat didalam dokumen web adalah sebesar satu spasi.
Jarak antarkata atau kalimat didalam browser web adalah satu spasi, berapa pun jumlah spasi
ataupun jumlah baris dalam dokumen web yang sesungguhnya. Agar browser web
menampilkan sesuai dengan dokumen web tersebut didalam editor teks, maka teks yang
bersangkutan harus diberi tanda tag <pre> diawalnya, dan </pre> diakhir teks yang
bersangkutan. Dengan tag <pre> yang artinya “preformatted” teks akan ditampilkan dalam
browser dengan ukuran font dengan lebar-fix. Tag ini juga akan menjaga spasi, baris baru,
dan tab sesuai dengan aslinya pada saat ditampilkan dalam browser.
Contoh tanpa format pre:
<!DOCTYPE html>
<html>
<head>
<title> format tanpa pre </title>
<body>
Hallo,
ini teks tanpa format pre
</body>
</html>
Gambar 2.6 Tampilan format teks tanpa menggunakan tag pre
Contoh dengan format pre:

<!DOCTYPE html>
<html>
<head>
<title> format teks menggunakan pre </title>
<body>
<pre>
Hallo,
ini adalah teks dengan format pre
</pre>
</body>
</html>
Gambar 2.7 Tampilan format teks menggunakan tag pre
2.6 Alamat/ Address.

Alamat(address) merupakan salah satu elemen yang umum didalam suatu dokumen.
Dalam HTML disediakan secara khusus tag address. Dengan adanya tag ini maka penulisan
alamat dapat distandarkan. Diawali dengan tag <address>, dan diakhiri dengan </address>.
Setiap baris dalam penulisan alamat dipisahkan dengan menggunakan tag .
Contoh:
<!DOCTYPE html>
<html>
<head>
<title> contoh membuat alamat </title>
<body>
<address>
Pusat komputer Politeknik Negeri Sriwijaya 
Jl. Srijaya Negara Bukit Besar 
Palembang
</address>
</body>
</html>
Gambar 2.8 Tampilan Format Alamat

2.7 Perataan Teks.
Cara penulisan teks dapat diubah sesuai apa yang diinginkan,misal perataan kiri,
kanan, tengah, atau pun perataan kiri kanan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title> Contoh perataan teks </title>
</head>
<body>

Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Dolor doloribus aliquid
dicta illo, at velit in repellat optio sint earum mollitia modi, similique laudantium quo
soluta delectus labore nemo officia adipisci ut magni nihil repellendus temporibus
fugiat. Officiis perspiciatis corporis dolorem sequi libero accusamus, quam tempora,
velit, quod totam unde.


Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Omnis beatae ex eaque
pariatur, cum impedit, neque nesciunt expedita incidunt vel odio necessitatibus,
recusandae. Laborum corrupti, iste soluta rerum ipsa ducimus cum molestiae
voluptas commodi doloribus consequuntur assumenda, fugit magnam ratione
incidunt eligendi, sit fuga accusamus.


Lorem ipsum dolor sit amet consectetur adipisicing, elit. Consequuntur aut ea eos est
in quae dignissimos vero expedita minus, quam placeat possimus sit blanditiis nam
earum recusandae ex beatae alias quisquam adipisci veritatis qui sequi atque deserunt
amet. Dolorum nemo provident accusamus a quasi quibusdam corporis hic amet eum
aliquam!


Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Sed esse necessitatibus,
veniam, dolorum nihil earum totam doloremque, odio similique, recusandae pariatur
nulla eum! Soluta sint, rerum sunt non recusandae repellat explicabo quibusdam rem
quia quam esse fugit, necessitatibus dolor id praesentium, dolorum nulla alias quas?
Ea omnis nulla voluptate harum dignissimos minima perferendis ex earum.

</body>
</html>
Gambar 2.9 Tampilan Perataan Format Teks
2.8 Pengaturan Font

2.8.1 Jenis Font (Jenis Huruf).
Untuk menentukan jenis font atau huruf digunakan perintah Font Face.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Jenis Font</title>
</head>
<body>
Ini merupakan tulisan normal tanpa pengaturan font 
Ini adalah jenis tulisan Tahoma 
Ini adalah jenis tulisan Arial 
Ini adalah jenis tulisan Courier New 
Ini adalah jenis tulisan Century Gothic 
Ini adalah jenis tulisan Times New Roman 
Ini adalah jenis tulisan Poppins
</body>
</html>
Gambar 2.10 Tampilan Jenis Huruf
2.8.2 Ukuran Font

Untuk menentukan ukuran huruf/font digunakan perintah font size.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Ukuran Font</title>
</head>
<body>
Ini adalah ukuran font normal 
ini adalah ukuran Font 1 
</body>
</html>
Gambar 2.11 Tampilan Ukuran Huruf

2.8.3 Warna Font
Untuk menentukan warna huruf/font digunakan perintah font color.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Warna Tulisan</title>
</head>
<body>
Ini Adalah Warna Hitam 
Ini Adalah Warna Biru 
Ini Adalah Warna Merah 
Ini Adalah Warna Hijau 
Ini Adalah Warna Kuning 
Ini Adalah Warna Ungu <hr>
Ini Adalah Warna Putih 
Ini Adalah Warna Hitam 
Ini Adalah Warna Pink
</body>
</html>
Gambar 2.12 Tampilan Warna Huruf
2.9 Menentukan Latar Belakang atau Background

Untuk menentukan warna latar belakang atau background digunakan perintah
bgcolor.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Warna Background</title>
</head>
<body bgcolor="violet">
Ini Adalah Warna Ungu<hr>
Ini Adalah Warna Putih 
</body>
</html>
Gambar 2.13 Tampilan Warna Background
Untuk background/ latar belakang yang berupa gambar menggunakan perintah background
dan diisikan nama file gambarnya. Untuk gambar background bisa download di
https://www.toptal.com/designers/subtlepatterns/
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Background Gambar</title>
</head>
<body background="gambar/gambar1.png">
Ini Adalah Warna Ungu<hr>
</body>
</html>
Gambar 2.14 Tampilan Background Gambar
2.10 Teks Berjalan

Untuk membuat teks atau tulisan berjalan menggunakan perintah marquee.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee> Teks Ini Berjalan </marquee>
<marquee direction="right" bgcolor="yellow"> Teks Ini Berjalan Ke Kanan dengan
Backgroun Kuning </marquee>
<marquee direction="left"> Teks Ini Berjalan Ke Kiri</marquee>
<marquee behavior="alternate" style="color:blue"> Teks Ini Berwarna Biru
Berjalan Memantul </marquee>
<marquee behavior="slide"> Teks Ini Berjalan Lalu Stop</marquee>
<marquee scrolldelay="200"> Teks Ini Berjalan Dengan Lambat</marquee>
<marquee direction="up" scrolldelay="400"> Teks Ini Berjalan Ke Atas dengan
Lambat</marquee>
<marquee direction="down"> Teks Ini Berjalan Ke Bawah</marquee>
<body>
<html>
Gambar 2.15 Tampilan Teks Berjalan
2.11 Kutipan
Kutipan dalam dokumen HTML terbagi 2 yaitu kutipan Panjang dan kutipan pendek.
Untuk kutipan panjang menggunakan perintah blockquote.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Blockquote</title>
</head>
<body>
<h1>Kutipan</h1>
Edsger Dijkstra penemu algoritme jalan terpendek (shortest path-
algorithm), atau dikenal juga sebagai Algoritme Dijkstra, pernah berkata:
<blockquote>
If debugging is the process of removing software bugs,then programming must be
the process of putting them in.
</blockquote>
Dalam pemrograman harus ada proses melakukan debugging juga, untuk
memastikan bahwa program yang dibuat sudah benar atau belum.
</body>
</html>
Gambar 2.15 Tampilan Kutipan Panjang
Untuk kutipan pendek menggunakan perintah q.

Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Kutipan Pendek</title>
</head>
<body>
<h1>Kutipan Pendek</h1>
<q>Berkatalah yang benar walau itu pahit</q>. Kebenaran tetap diterapkan
walau ada celaan dan ada yang tidak suka. Inilah prinsip yang diajarkan dalam Islam
oleh Nabi Muhammad shallallahu 'alaihi wassalam. Nasehat ini beliau
sampaikan pada sahabat mulia Abu Dzarr.
</body>
</html>
Gambar 2.16 Tampilan Kutipan Pendek

2.12 Cite - Citation
Citation (cite) dalam HTML5 merupakan tag yang digunakan untuk mendefenisikan
judul dari suatu hasil kerja kreatif seperti judul buku, lagu, lukisan dan lain-lain.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Cite - citation</title>
</head>
<body>
<h1>Cite - citation</h1>
<cite>Pemrograman Web Dengan PHP7</cite> ditulis oleh Betha Sidik,
diterbitkan tahun 2018.
</body>
</html>
Gambar 2.16 Tampilan Cite-Citation
2.13 Karakter Entitas

Karakter entitas (entity character) merupakan kode yang disediakan oleh HTML untuk
memungkinkan pengembang web menampilkan karakter khusus semacam kode ASCII.
Salah satu penggunaan karakter entitas adalah untuk menampilkan tanda < dan >, karena
jika menuliskan < dan > didalam dokumen, maka browser akan menganggap sebagai awal
dan akhir dari suatu tag HTML.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Karakter Entitas</title>
</head>
<body>
<h1>Karakter Entitas</h1>
Saat ini kita telah mempelajari tentang elemen blok:
 <h1> sd <h6>
 
 <pre>

Saat ini kita telah mempelajari tentang elemen kosong:
 
 <hr>

Saat ini kita telah mempelajari tentang elemen inline:
 
 
 
 

</body>
</html>
Gambar 2.17 Tampilan Karakter Entitas

Contoh tag untuk Entitas karakter
Tampilan Deskripsi Nama Entitas Nomor Entitas

spasi kosong
< kurang dari < <
> lebih dari > >
& dan (ampersand) & &
" tanda petik/kutip (quotation mark) " "
' koma atas (apostrophe) ' '
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
§ Section § §
© Copyright © ©
® registered trademark ® ®
× Multiplication × ×
÷ Division ÷ ÷
C. RANGKUMAN.
• HTML adalah singkatan dari Hyper Text Markup Languange, HTML digunakan
untuk membuat sebuah halaman web atau situs.
• Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi
komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh dari
elemen adalah : head, body, table, paragraph.
• HTML terdiri dari sebuah tanda kurung yang berpasangan < >. Tag umumnya
berpasangan misal <H1> dengan </H1>, tag yang menjadi pasangan selalu diawali
dengan karakter garing (/, garis miring). Tag yang pertama menunjukan tag awal
yang berarti awal elemen dan yang kedua menunjukan tag akhir, berarti akhir
elemen.
D. SOAL LATIHAN/TUGAS.
1. Buatlah skrip HTML untuk tampilan diatas. Bebas menggunakan warna, jenis dan
ukuran font.
E. RUJUKAN.
Betha Sidik Ir, HTML5 Dasar-Dasar Untuk Pengembangan Aplikasi Berbasis Web,
2019, Penerbit Infomatika Bandung.
Rohi Abdulloh, 7 In 1 Pemrograman Web Untuk Pemula, 2019, Elex Media

Komputindo, Jakarta
F. BACAAN YANG DISARANKAN.

Candra Surya, Miftahul Jannah Desain Web bagi Pemula, 2020, Penerbit Elex Media
Komputindo.

New BAB II

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

New BAB II

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB II

HYPER TEXT MARKUP LANGUAGE (HTML)

2.1 Pengenalan HTML

2.3 Tag-tag Dasar HTML

Gambar 2.1 Tampilan dari contoh paragraph.

Gambar 2.2 Tampilan Contoh Line Break.

Gambar 2.3 Tampilan Contoh Heading

9. Garis mendatar (Horizontal).

2.4 Format Text HTML

Gambar 2.5 Tampilan format teks

2.5 Teks Preformat.

Gambar 2.6 Tampilan format teks tanpa menggunakan tag pre

Contoh dengan format pre:

2.6 Alamat/ Address.

Gambar 2.8 Tampilan Format Alamat

2.8 Pengaturan Font

2.8.2 Ukuran Font

Gambar 2.11 Tampilan Ukuran Huruf

Gambar 2.12 Tampilan Warna Huruf

2.9 Menentukan Latar Belakang atau Background

Gambar 2.13 Tampilan Warna Background

Gambar 2.14 Tampilan Background Gambar

2.10 Teks Berjalan

Untuk kutipan pendek menggunakan perintah q.

Gambar 2.16 Tampilan Kutipan Pendek

Gambar 2.16 Tampilan Cite-Citation

2.13 Karakter Entitas

Gambar 2.17 Tampilan Karakter Entitas

Tampilan Deskripsi Nama Entitas Nomor Entitas

Rohi Abdulloh, 7 In 1 Pemrograman Web Untuk Pemula, 2019, Elex Media

F. BACAAN YANG DISARANKAN.

Anda mungkin juga menyukai