Dasar-dasar Memahami Dasar Hypertext Markup Language
bradinformatika
7 views
31 slides
Sep 15, 2025
Slide 1 of 31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About This Presentation
Modul 1 HTML
IT Club SMAN 1 Ciawigebang
Slide Content
Dasar-dasar HTML
SMAN 1 CIAWIGEBANG
SMAN 1 CIAWIGEBANG
A. HTML
HTML (Hypertext Markup LanguageHypertext Markup Language) merupakan
bahasa yang digunakan untuk membangun
halaman websitehalaman website.
HyperText: Text yang ditampilkan pada komputer atau
alat elektronik lainnya dengan merujuk ke text lainnya
yang dapat diakses, biasanya dengan meng-klik mouse atau
menekan tombol tertentu (hyperlink).
HyperText tidak terbatas pada text, tapi juga dapat berisi
tabel atau gambar. HyperText merupakan dasar dari
struktur web.
HTML (Hypertext Markup LanguageHypertext Markup Language) merupakan
bahasa yang digunakan untuk membangun
halaman websitehalaman website.
HyperText: Text yang ditampilkan pada komputer atau
alat elektronik lainnya dengan merujuk ke text lainnya
yang dapat diakses, biasanya dengan meng-klik mouse atau
menekan tombol tertentu (hyperlink).
HyperText tidak terbatas pada text, tapi juga dapat berisi
tabel atau gambar. HyperText merupakan dasar dari
struktur web.
1. Teks Editor untuk Menulis HTML
Teks editor digunakan untuk menulis kode-kode
HTML. Contohnya Notepad, Visual Studio Code.
Teks editor digunakan untuk menulis kode-kode
HTML. Contohnya Notepad, Visual Studio Code.
2. Web Browser untuk Membuka HTML
Disarankan menggunakan web browser terbaru, karena
HTML yang digunakan sekarang versi terbaru.
Disarankan menggunakan web browser terbaru, karena
HTML yang digunakan sekarang versi terbaru.
3. Struktur Dasar HTML
Struktur dasar kode HTML terdiri dari tiga bagian penting:
a.Bagian Deklarasi = tipe dokumen dan versinya HTML 5
b.Bagian HEAD = Dimulai dari tag
<head> dan ditutup dengan </head>
c.Bagian BODY = Bagian yang akan ditampilkan pada web browser
Struktur dasar kode HTML terdiri dari tiga bagian penting:
a.Bagian Deklarasi = tipe dokumen dan versinya HTML 5
b.Bagian HEAD = Dimulai dari tag
<head> dan ditutup dengan </head>
c.Bagian BODY = Bagian yang akan ditampilkan pada web browser
<title>This is a title</title>
TagTag adalah kode penanda seperti
<title>
yang digunakan
untuk membuka dan menutup sebuah konten, sedangkan
Elemen Elemen adalah seluruh unit yang terdiri dari tag pembuka,
konten di dalamnya, dan tag penutup.
Tag Tag adalah instruksi, sedangkan elemen elemen adalah hasil dari
instruksi tersebut yang membentuk struktur halaman web.
Elemen HTML
4. Elemen dan Tag HTML
TagTag adalah kode penanda seperti
<title>
yang digunakan
untuk membuka dan menutup sebuah konten, sedangkan
Elemen Elemen adalah seluruh unit yang terdiri dari tag pembuka,
konten di dalamnya, dan tag penutup.
Tag Tag adalah instruksi, sedangkan elemen elemen adalah hasil dari
instruksi tersebut yang membentuk struktur halaman web.
Elemen HTML
4. Elemen dan Tag HTML
5. Atribut
Atribut adalah kata kunci khusus yang berada di
dalam tag pembuka. Atribut juga disebut
sebagai modifier yang akan menentukan perilaku
dari elemen.
<p align=“center”>Belajar HTML</p>
Tag awal Tag akhir/tag penutup
Isi/konten Nama
atribut
Nilai
atribut
Atribut adalah kata kunci khusus yang berada di
dalam tag pembuka. Atribut juga disebut
sebagai modifier yang akan menentukan perilaku
dari elemen.
<p align=“center”>Belajar HTML</p>
Tag awal Tag akhir/tag penutup
Isi/konten Nama
atribut
Nilai
atribut
Atribut dapat ditambahkan pada elemen manapun.
Ada juga elemen yang mewajibkan menggunakan
atribut seperti elemen <a>, <img>, <video>, dan
lain-lain.
Contoh:
<a href="https://youtube.com">Youtube</a>
Ada juga elemen yang mewajibkan menggunakan
atribut seperti elemen <a>, <img>, <video>, dan
lain-lain.
Contoh:
<a href="https://youtube.com">Youtube</a>
B. Membuat Paragraf pada HTML
Paragraf adalah kumpulan dari beberapa kalimat.
Pada web, paragraf biasanya digunakan untuk
menampilkan teks atau artikel.
Paragraf pada HTMLHTML dibuat dengan tag <p>.
Selain tag ini, ada juga tag pendukung lain
seperti <div>, <hr>, <br>, dan <pre>.
Paragraf adalah kumpulan dari beberapa kalimat.
Pada web, paragraf biasanya digunakan untuk
menampilkan teks atau artikel.
Paragraf pada HTMLHTML dibuat dengan tag <p>.
Selain tag ini, ada juga tag pendukung lain
seperti <div>, <hr>, <br>, dan <pre>.
1. Membuat Perataan Paragraf
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML #1</title>
</head>
<body>
<p align="center">Ini adalah sebuah paragraf yang berisi
beberapa kalimat. Saya sedang belajar HTML di
Ekstrakurikuler IT Club </p>
<p align="right">Paragraf dibuat dengan menentukan ide pokok
terlebih dahulu, lalu diikuti dengan kalimat-kalimat
pendukung.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML #1</title>
</head>
<body>
<p align="center">Ini adalah sebuah paragraf yang berisi
beberapa kalimat. Saya sedang belajar HTML di
Ekstrakurikuler IT Club </p>
<p align="right">Paragraf dibuat dengan menentukan ide pokok
terlebih dahulu, lalu diikuti dengan kalimat-kalimat
pendukung.</p>
</body>
</html>
2. Membuat Baris Baru dan Garis
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraf di HTML #2</title>
</head>
<body>
<p>Ke pasar malam beli asbak baru<br/>
Tidak lupa membeli sebuah gelas<br/> <hr/>
Dengarkanlah nasihat ibu bapak guru<br/> Agar pintar dan
juara kelas</p>
</body>
</html>
<br/> untuk membuat baris baru.
<hr/> merupakan tag yang digunakan untuk membuat garis lurus secara
horizontal (horizontal rule).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraf di HTML #2</title>
</head>
<body>
<p>Ke pasar malam beli asbak baru<br/>
Tidak lupa membeli sebuah gelas<br/> <hr/>
Dengarkanlah nasihat ibu bapak guru<br/> Agar pintar dan
juara kelas</p>
</body>
</html>
<br/> untuk membuat baris baru.
<hr/> merupakan tag yang digunakan untuk membuat garis lurus secara
horizontal (horizontal rule).
3. Heading dan Baris Pertama Menjorok
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Paragraf Indentasi</h1>
<p style="text-indent: 45px;">Contoh ini baris pertama
yang ditulis masuk ke dalam. <br/> Baris kedua tetap
ditulis seperti biasa. <br/> Begitu pula dengan baris
ketiga ditulis seperti biasa.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Paragraf Indentasi</h1>
<p style="text-indent: 45px;">Contoh ini baris pertama
yang ditulis masuk ke dalam. <br/> Baris kedua tetap
ditulis seperti biasa. <br/> Begitu pula dengan baris
ketiga ditulis seperti biasa.</p>
</body>
</html>
4. Warna Huruf dan Latar pada Paragraf
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Warna untuk Paragraf</h1>
<p style="color: blue;">Paragraf dengan warna teks berwarna biru.
Semua teks yang ada di dalam paragraf ini akan berwarna
biru.</p>
<p style="color: white; background-color:purple">Paragraf dengan
warna teks putih dan warna background-nya ungu. Semua teks
yang ada di dalam paragraf ini akan berwarna putih.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Warna untuk Paragraf</h1>
<p style="color: blue;">Paragraf dengan warna teks berwarna biru.
Semua teks yang ada di dalam paragraf ini akan berwarna
biru.</p>
<p style="color: white; background-color:purple">Paragraf dengan
warna teks putih dan warna background-nya ungu. Semua teks
yang ada di dalam paragraf ini akan berwarna putih.</p>
</body>
</html>
5. Mengubah Jenis Huruf (Font)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Font untuk Paragraf</h1>
<p style="font-family: Arial;">Ini adalah contoh paragraf yang
menggunakan font Arial.</p>
<p style="font-family: 'Times New Roman'">Ini adalah paragraf
yang menggunakan font Times New Roman. </p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Font untuk Paragraf</h1>
<p style="font-family: Arial;">Ini adalah contoh paragraf yang
menggunakan font Arial.</p>
<p style="font-family: 'Times New Roman'">Ini adalah paragraf
yang menggunakan font Times New Roman. </p>
</body>
</html>
C. Membuat List di HTML
HTML menyediakan elemen untuk membuat list.
Ada tiga macam jenis list yang bisa dibuat pada
HTML:
•Ordered List adalah list yang terurut;
•Unordered List adalah list yang tak terurut;
•Descriptiona List adalah list yang berisi definisi.
HTML menyediakan elemen untuk membuat list.
Ada tiga macam jenis list yang bisa dibuat pada
HTML:
•Ordered List adalah list yang terurut;
•Unordered List adalah list yang tak terurut;
•Descriptiona List adalah list yang berisi definisi.
1. Ordered List
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya
diisi dengan item-item yang akan dimasukkan ke
dalam list. Item dibuat dengan tag <li> (list item).
Untuk membuat yang seperti itu, kita bisa
menggunakan atribut type pada tag ol dan berikut
ini nilai yang bisa diberikan:
•a untuk alfabet a, b, c, dan seterusnya;
•A untuk alfabet A, B, C, dan seterusnya;
•i untuk angka romawi i, ii, iii, dan seterusnya;
•I untuk angka romawi I, II, III, dan seterusnya.
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya
diisi dengan item-item yang akan dimasukkan ke
dalam list. Item dibuat dengan tag <li> (list item).
Untuk membuat yang seperti itu, kita bisa
menggunakan atribut type pada tag ol dan berikut
ini nilai yang bisa diberikan:
•a untuk alfabet a, b, c, dan seterusnya;
•A untuk alfabet A, B, C, dan seterusnya;
•i untuk angka romawi i, ii, iii, dan seterusnya;
•I untuk angka romawi I, II, III, dan seterusnya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li>
<li>Pepaya</li> <li>Mangga</li> </ol>
</body>
</html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li>
<li>Pepaya</li> <li>Mangga</li> </ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li> </ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di
HTML</li> <li>Tutorial Tabel di HTML</li> </ol>
<h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial
List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial
Tabel di HTML</li> </ol>
</body>
</html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li> </ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di
HTML</li> <li>Tutorial Tabel di HTML</li> </ol>
<h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial
List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial
Tabel di HTML</li> </ol>
</body>
</html>
2. Unordered List
HTML menyediakan elemen untuk membuat list.
Ada tiga macam jenis list yang bisa dibuat pada
HTML:
•Ordered List adalah list yang terurut;
•Unordered List adalah list yang tak terurut;
•Descriptiona List adalah list yang berisi definisi.
HTML menyediakan elemen untuk membuat list.
Ada tiga macam jenis list yang bisa dibuat pada
HTML:
•Ordered List adalah list yang terurut;
•Unordered List adalah list yang tak terurut;
•Descriptiona List adalah list yang berisi definisi.
3. Description List
Unordered list adalah list yang tak terurut yang
menggunakan simbol-simbol pada item-
nya. Unordered list dibuat dengan tag <ul> dan untuk
item-nya dibuat juga dengan tag <li>.
Unordered list adalah list yang tak terurut yang
menggunakan simbol-simbol pada item-
nya. Unordered list dibuat dengan tag <ul> dan untuk
item-nya dibuat juga dengan tag <li>.
Elemen dan Tag
Tag penutup tidak harus selalu ada, terutama untuk
tag-tag yang tidak memiliki konten teks.
Contohnya:
<img/> = tag untuk menampilkan gambar
<hr/> = tag untuk membuat garis horizontal
<br/> = tag untuk loncat ke baris baru
Tag penutup tidak harus selalu ada, terutama untuk
tag-tag yang tidak memiliki konten teks.
Contohnya:
<img/> = tag untuk menampilkan gambar
<hr/> = tag untuk membuat garis horizontal
<br/> = tag untuk loncat ke baris baru
<!DOCTYPE html>
<html>
<head>
<title>Halaman 1</title>
</head>
<body>
<h1>Heading Pertama</h1>
<p>Paragraf Pertama</p>
<hr />
</body>
</html>
Struktur HTML
<html>
<head>
<title>Halaman 1</title>
</head>
<body>
<h1>Heading Pertama</h1>
<p>Paragraf Pertama</p>
<hr />
</body>
</html>
Struktur HTML
Struktur HTML
<html> merupakan root atau induk dari seluruh tag
html.
<head> ,merupakan kepala dari halaman html,
pada bagian ini biasanya digunakan untuk
elemen-elemen yang tidak ditampilkan oleh
browser.
<body>, merupakan isi dari halaman website, apa
pun yang akan ditampilkan oleh browser,
ditempatkan di bagian ini.
<html> merupakan root atau induk dari seluruh tag
html.
<head> ,merupakan kepala dari halaman html,
pada bagian ini biasanya digunakan untuk
elemen-elemen yang tidak ditampilkan oleh
browser.
<body>, merupakan isi dari halaman website, apa
pun yang akan ditampilkan oleh browser,
ditempatkan di bagian ini.
Latihan
<html>
<head>
<title>Web Pertama</title>
</head>
<body>
<h1>Web Pertama Saya</h1>
<h2>Aplikasi IT-1</h2>
</body>
</html>
Simpan dengan nama latihan1.html
<html>
<head>
<title>Web Pertama</title>
</head>
<body>
<h1>Web Pertama Saya</h1>
<h2>Aplikasi IT-1</h2>
</body>
</html>
Simpan dengan nama latihan1.html
Tag Heading
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
Tag Paragraph
<p>Dari 66.778 desa yang tersebar di Indonesia, baru
sekitar 24.000 atau 36% di antaranya yang sudah
terjangkau layanan telekomunikasi. Sedangkan sisanya,
42.778 desa atau sekitar 64% di antaranya, masih dalam
tahap rencana pembangunan.</p>
<p>Demikian dipaparkan Eddy Kurnia, Head of Corporate
Communication Telkom. Rencana pembangunan ini
akan digarap Telkom bersama anak perusahaan
selulernya, Telkomsel, dalam program Universal Service
Obligation (USO).</p>
<p>Dari 66.778 desa yang tersebar di Indonesia, baru
sekitar 24.000 atau 36% di antaranya yang sudah
terjangkau layanan telekomunikasi. Sedangkan sisanya,
42.778 desa atau sekitar 64% di antaranya, masih dalam
tahap rencana pembangunan.</p>
<p>Demikian dipaparkan Eddy Kurnia, Head of Corporate
Communication Telkom. Rencana pembangunan ini
akan digarap Telkom bersama anak perusahaan
selulernya, Telkomsel, dalam program Universal Service
Obligation (USO).</p>
Karakter Khusus
Dalam HTML dapat digunakan
simbol tertentu yang dapat
digunakan untuk
mewakili/mengganti suatu
karakter.
Sebagai contoh, tag html
menggunakan karakter < dan >.
Maka, agar browser dapat
menampilkan karakter tersebut,
digunakan simbol khusus, yaitu
< untuk karakter < dan >
untuk karakter >
Dalam HTML dapat digunakan
simbol tertentu yang dapat
digunakan untuk
mewakili/mengganti suatu
karakter.
Sebagai contoh, tag html
menggunakan karakter < dan >.
Maka, agar browser dapat
menampilkan karakter tersebut,
digunakan simbol khusus, yaitu
< untuk karakter < dan >
untuk karakter >
Contoh Karakter Khusus
<p>Dalam matematika, tanda lebih besar
diwakili oleh simbol > dan tanda lebih
kecil diwakili oleh simbol <.</p>
<p>Dalam matematika, tanda lebih besar
diwakili oleh simbol > dan tanda lebih
kecil diwakili oleh simbol <.</p>
Contoh Tabel 1
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris ke 1 - Kolom ke 1</td>
<td>Baris ke 1 - Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 - Kolom ke 1</td>
<td>Baris ke 2 - Kolom ke 2</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris ke 1 - Kolom ke 1</td>
<td>Baris ke 1 - Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 - Kolom ke 1</td>
<td>Baris ke 2 - Kolom ke 2</td>
</tr>
</table>
</body>
</html>
Contoh Tabel 2
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
•https://www.dicoding.com/blog/cara-memb
uat-table-di-html/
•https://www.petanikode.com/html-
paragraf/
uat-table-di-html/
•https://www.petanikode.com/html-
paragraf/
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7
- Slides 31
- Age 81 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
33 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
36 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
33 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views