Scribd
Unggah
202 tayangan

Modul HTML Dasar

1. Dokumen menjelaskan dasar-dasar pembuatan halaman web sederhana menggunakan HTML, meliputi pembuatan struktur dasar dokumen HTML, penambahan teks "Hello World", dan penggunaan editor kode Sublime Text 3. 2. Dokumen menjelaskan tag-tag dasar yang dapat digunakan dalam HTML seperti <head>, <body>, <title>, <h1-6>, <p>, <ul>, <ol>, <a> beserta contoh kode penggunaannya.

Diunggah oleh

Muhammad Marin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
202 tayangan

Modul HTML Dasar

1. Dokumen menjelaskan dasar-dasar pembuatan halaman web sederhana menggunakan HTML, meliputi pembuatan struktur dasar dokumen HTML, penambahan teks "Hello World", dan penggunaan editor kode Sublime Text 3. 2. Dokumen menjelaskan tag-tag dasar yang dapat digunakan dalam HTML seperti <head>, <body>, <title>, <h1-6>, <p>, <ul>, <ol>, <a> beserta contoh kode penggunaannya.

Diunggah oleh

Muhammad Marin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 13

HTML DASAR

1. Membuat halaman web pertama : menampilkan Hello World!


▪ Sebelum memulai menuliskan kode, langkah pertama yang harus kamu lakukan adalah membuat
folder baru dengan nama HTML.
▪ Selanjutnya buka aplikasi notepad, sebelum menuliskan apa-apa terlebih dahulu simpanlah file
notepad tersebut ke dalam folder HTML yang telah kamu buat dengan cara :
a. klik menu file – save as
b. Beri nama file tersebut
dengan halaman1.html
c. Save as type All Files
d. lalu klik save

c d

▪ kemudian ketiklah kode seperti di bawah ini :


<!doctype html> penjelasan :
<html> Ini adalah struktur dasar penulisan file HTML, yang akan menampilkan
<head> tulisan “Hello World!” di browser.
<title> </title>
</head>
Simpan file tersebut dengan cara menekan tombol Ctrl + S.
<body>
Hello World! Untuk membuka file yang telah tersimpan tadi, cari di folder HTML lalu
</body> doble click file ini maka browser akan menampilan
</html>
tulisan Hello World! Yang telah kamu buat tadi.

2. Membuat halaman web menggunakan code editor : Sublime Text 3


Langkah-langkahnya sebagai berikut :
▪ Buka aplikasi Sublime Text 3, sebelum
menuliskan kode apapun simpan
terlebih dahulu file tersebut di folder
HTML dengan cara klik menu file – save,
lalu simpan dengan nama
halaman2.html selanjutnya klik save.
▪ Untuk membuat sebuah dokumen html
dengan struktur dasar penulisannya
cukup hanya dengan mengetik “html”
lalu diikuti dengan menekan tombol tab,
maka dokumen html yang berisi tag
“html, head, title, dan body” akan otomatis muncul.
1|HTML DASAR
▪Pointer secara otomatis berada di
antara tag title, dengan begitu kita bisa
langsung memberikan judul dokumen
html yang ingin kita buat. Tuliskan
judulnya dengan “Pemrograman Web”.
▪Selanjutnya di antara tag body tuliskan :
<p>Selamat datang di halaman web
pertama saya</p>
▪Lalu tambahkan di bawahnya tuliskan
lagi :
<p>ini adalah paragraf kedua halaman
web saya</p>
(tag p digunakan untuk membuat
paragraf).

3. Tag apa saja yang ada di dalam tag “HEAD” dan “BODY”
a. Tag yang boleh di dalam tag “HEAD”
1) Judul halaman
<title></title>
2) CSS
<style></style>
3) Javasript
<script></script>
4) Metadata berguna untuk mendeskripsikan website.
<meta></meta>
Contoh penggunaan :
<head>
<meta charset=”UTF-8”>
<meta name=”description” content=”Belajar Pemrograman Web”>
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
<meta name=”author” content=”Muhammad Mar’in”>
</head>
b. Tag yang boleh di dalam tag “BODY”
1) Teks 7) Form
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> <form>, <input>, <select>, <button>, …
2) Pendukung teks 8) Script
<br>, <hr>, <em>, <strong>, … <script>
3) Gambar 9) Object
<img> <object>
4) Hyperlink 10) Grouping
<a> <div>, <span>
5) List 11) Komentar
<ul>, <ol>, <li>, <dl>, <dt>, <dd> <!—(komentar yang ingin ditulis) --!>
6) Tabel
<table>, <thead>, <tbody>, …

2|HTML DASAR
c. Struktur tag
<nametag atribut=”nilai”>
Contoh penggunaan : <body bgcolor=”lightblue”>
<body bgcolor=”lightblue” id=”myid” class=”myclass”>
Atribut global adalah atribut yang dimiliki oleh semua tag. Antara lain : accesskey, class, id, dir, lang,
style, tabindex, title.
4. Tag Paragraf HTML
PRAKTIK
▪ Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan simpan
dengan nama paragraf.html. Kemudian di dokumen tersebut tulislah kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>HTML paragraf</title>
</head>
<body>

<!-- contoh tag p, br, hr, b, i, u, strong, dan em -->


<p>ini adalah paragraf 1</p>
<br>
<p>ini adalah <br> paragraf 2</p>
<hr>

<!-- contoh tag b, i, dan u -->


<p><b>Selamat datang</b> di pelajaran <i>pemrograman web</i></p>
<p>Nama saya <u>Muhammad Mar'in</u></p>
<hr>

<!-- contoh tag strong dan em -->


<p><strong>Pengumuman</strong>, Pelajaran pemrograman web, senin 1 Maret 2021
<em>ditiadakan!</em></p>
</body>
</html>
▪ Simpan dan amati kode yang telah kamu ketik lalu buka dokumen itu menggunakan browser.

TUGAS

Identifikasi dan tuliskan fungsi tag-tag berdasarkan hasil yang ditampilkan oleh browser.

3|HTML DASAR
5. Tag Heading HTML
PRAKTIK
▪ Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan simpan
dengan nama heading.html. Kemudian di dokumen tersebut tulislah kode berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
TUGAS

• Jelaskan fungsi heading html!


• Buatlah sebuah halaman html yang berisi 6 level heading (h1, h2, h3, h4, h5, h6) dan level berisi 1
paragraf teks.
6. Tag List HTML
Terdiri dari :
a. <ol></ol> (ordered list) untuk membuat daftar terurut.
Contoh : <ol>
<li>item 1</li>
<li>item 2</li>
</ol>
Secara default daftar terurut yang tampil berupa angka ( 1, 2, 3, dan seterusnya). Adapun tipe daftar
terurut terdiri dari 1, A, a, I, dan i.
Untuk mengubah tipenya cukup dengan menambahkan atribut type dan value yang ingin dipakai ke
dalam tag <ol>. Contohnya jika ingin mengubah daftar menjadi huruf kapital : <ol type=”A”></ol>
b. <ul></ul> (unordered list) untuk membuat daftar tidak terurut
Contoh : <ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Secara default daftar tidak terurut yang tampil berupa symbol • (bullet). Adapun tipe daftar tidak
terurut terdiri dari disc, square, circle.
Untuk mengubah tipenya cukup dengan menambahkan atribut type dan value yang ingin dipakai ke
dalam tag <ul>. Contohnya jika ingin mengubah daftar menjadi disc : <ul type=”disc”></ul>
c. <dl></dl> (definition list) untuk membuat daftar terminology atau definisi
Contoh : <dl>
<dt>term 1</dt>
<dd>description 1</dd>
<dt>term 2</dt>
<dd>description 2</dd>
</dl>
4|HTML DASAR
7. Hyperlink HTML
Hyperlink atau sering juga disebut dengan link atau weblink adalah sebuah koneksi dari sebuah sumber
web ke sumber lain dengan kata lain jika tidak ada hyperlink maka tidak ada juga yang disebut dengan
web.
Pada sebuah html hyperlink dibuat dengan tag <a></a> (anchor). Atribut yang harus menyertai tag
anchor adalah href. Atribut href terdiri dari :
a. Eksternal link, yaitu link ke website lain. Contoh : <a href=”http://www.google.com”>google</a>
artinya link tersebut akan terhubung ke website google. Berikut langkah-langkah membuat hyperlink
menggunakan sublime text 3 :
 Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan
simpan dengan nama hyperlink1.html kemudian di dokumen tersebut tulislah kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink – halaman 1</title>
</head>
<body>

<p>Klik <a href=”http://www.google.com”>disini</a> untuk mengetahui


info lebih lanjut</p>

</body>
</html>
 Simpan dan bukalah menggunakan browser, lalu amati hasil yang ditampilkan browser.
b. Internal link / relative url, internal link yaitu link ke halaman website lain yang ada di dalam satu
folder website yang kita buat. Contoh : <a href=”hyperlink1.html”>halaman 1</a>. Sedangkan
relative url dibuat jika halaman website berada di folder lain. Contohnya jika misalnya dokumen
hyperlink1 dimasukkan ke dalam folder baru bernama admin maka agar dokumen tersebut bisa
diakses kode yang dituliskan adalah : <a href=”admin/hyperlink1.html”>halaman1</a>. Untuk link
ke folder yang sama dengan folder admin maka penulisan kodenya adalah : <a
href=”../hyperlink2.html”>halaman 2</a>
Langkah membuat internal link menggunakan sublime text 3 sebagai berikut:
 Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan
simpan dengan nama hyperlink2.html kemudian di dokumen tersebut tulislah kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink – halaman 2</title>
</head>
<body>

<p>Klik <a href=”hyperlink1.html”>disini</a> untuk menuju ke halaman 1</p>

</body>
</html>
 Simpan dan bukalah menggunakan browser, lalu amati hasil yang ditampilkan browser.
c. Page Anchor, yaitu link ke bagian tertentu dari sebuah halaman html. Contoh pembuatan page
anchor : <a href="#bagian1">Ke Bagian 1</a>
Langkah membuat page anchor menggunakan sublime text 3 sebagai berikut:

5|HTML DASAR
 Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan
simpan dengan nama hyperlink3.html kemudian di dokumen tersebut tulislah kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink - Halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 2</h1>
<ul>
<li><a href="#bagian1">Ke Bagian 1</a></li>
<li><a href="#bagian2">Ke Bagian 2</a></li>
<li><a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>

<h2 id="bagian2">Bagian 2</h2>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>

<h3 id="bagian3">Bagian 3</h3>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>

6|HTML DASAR
 Simpan dan bukalah menggunakan browser, lalu amati hasil yang ditampilkan browser.

Selain bisa link ke bagian artikel dalam sebuah dokumen html, page anchor juga bisa di link kan ke
bagian artikel dalam dokumen lain. Contohnya : <a href="halaman3.html#bagian1">Ke Halaman 3,
Bagian 3</a>

Hyperlink pada html dapat mengarah ke halaman dalam satu tab halaman browser dan dapat juga
diarahkan untuk ke tab baru browser dengan cara menambahkan atribut target pada tag anchor.
Value pada atribut target antara lain : _self, _blank, _parent, dan _top.

Contohnya : <a href="halaman3.html" target=”_blank”>

7|HTML DASAR
8. Image HTML
Image adalah menyimpan sebuah gambar ke dalam dokumen HTML. Tag image adalah <img> dan harus
disertai dengan atribut src (source), jadi minimal penulisan tag image adalah <img src=””>. File gambar
yang dapat disimpan terdiri dari :
a. Internal resource (png, jpg, jpeg) syaratnya file gambar yang ingin dimasukkan harus disiapkan di
dalam folder pembuatan website kita. Contohnya jika kita ingin memasukkan gambar logo SMK
Negeri 1 Sajingan Besar (smkn 1 sjb.jpg) yang ada di dalam satu folder: <img src=”smkn 1 sjb.jpg”>
b. Eksternal resource (hotlink), yaitu gambar yang dimasukkan berasal dari website lain. Artinya pada
saat user mengakses gambar kita maka yang akan tampil adalah gambar milik website lain.
Contohnya jika kita ingin memasukkan gambar logo SMK Negeri 1 Sajingan Besar yang berasal dari
situs lain yang didapatkan dari halaman facebook SMK Negeri 1 Sajingan Besar :
<img src=”https://m.facebook.com/SMKN1SJB/photos/a.452393448241140/609574255856391/
?type=3”>
Atribut yang dimiliki oleh tag <img> antara lain :
a. Src, menunjukkan dari mana sumber gambar yang dimasukkan
b. Alt, berguna untuk memberikan teks alternatif apabila gambar tidak bisa muncul disebabkan oleh
terjadi kesalahan penulisan nama pada gambar atau kerusakan pada gambar. Maka jika terjadi
kesalahan tersebut teks alternatif lah yang akan muncul di browser. Namun jika tidak terjadi
kesalahan teks alternatif tidak muncul. Contoh : <img src=”smkn 1 sjb.jpg” alt=”logo SMK”>
c. Title, digunakan untuk memberikan judul pada gambar. Judul yang kita tambahkan akan muncul
apabila kita mengarahkan kursor ke gambar. Contoh : <img src=”smkn 1 sjb.jpg” title=”Logo SMKN
1 Sajingan Besar”>
d. Width, berguna untuk mengatur lebar gambar, nilainya adalah px (pixel) dan % (relatif terhadap
halaman web) namun jika kita hanya menuliskan angka saja maka nilainya adalah px (pixel).
e. Height, berguna untuk mengatur tinggi gambar, nilainya adalah px (pixel) dan % (relatif terhadap
halaman web). Cara penulisan width dan height sama saja, yaitu <img src=”smkn 1 sjb.jpg”
width=”500”> atau <img src=”smkn 1 sjb.jpg” heigth=”50%”>
Bagaimana cara menggabungkan hyperlink dengan image?
Buka aplikasi Sublime Text 3, lalu buat sebuah dokumen html baru di dalam folder HTML dan simpan
dengan nama image.html kemudian di dokumen tersebut tulislah kode berikut ini :
<a
href="https://m.facebook.com/SMKN1SJB/photos/a.452393448241140/609574255856391/
?type=3">

<img src="smkn 1 sjb.jpg">

</a>

9. Table HTML
Berguna untuk menampilkan data berupa tabular, sama seperti di Microsoft Word atau Microsoft Excel.
Berikut ini adalah struktur tabel :
a. Baris, berupa kotak-kotak yang horizontal

8|HTML DASAR
b. Kolom, berupa kotak-kotak yang vertikal

c. Cell / Data, yaitu perpotongan antara baris dengan kolom

d. Header, yaitu judul dari tiap kolom/baris

Tag yang digunakan untuk membuat tabel adalah <table></table>, table row (<tr></tr>), table data
(<td></td>)
Susunan tag untuk membuat tabel dibagi menjadi :
a. Table simple, contohnya sebagai berikut :
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
…
</table>
b. Table complex, contohnya sebagai berikut :
<thead>
<tr>
<th></th>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Baris 1</th>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>

9|HTML DASAR
<tr>
<th>Baris 2</th>
<th>Baris 2, Kolom 1</th>
<th>Baris 2, Kolom 2</th>
</tr>
</tbody>
Atribut dari tag Table antara lain :
a. Border, berguna untuk menambahkan garis di sekitar cell. Contoh : <table border=”1”>
b. Cellspacing, berguna untuk menambah jarak antar cell. Contoh : <table border=”1”
cellspacing=”0”>
c. Cellpadding, berguna untuk memberi luas pada sebuah cell. Contoh : <table border=”1”
cellspacing=”0” cellpadding=”5”>
Atribut border, cellspacing dan cellpadding biasa dipakai di pengaturan css.
d. Colspan, berguna untuk menggabungkan dua buah atau lebih cell yang vertikal atau kolom.
Contoh :
Apabila kita punya sebuah tabel seperti ini.

<table border="1" cellspacing="0" cellspacing="5">


<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>

Lalu akan diubah menjadi seperti ini.


<table border="1" cellspacing="0" cellspacing="5">
<tr>
<td>1,1</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>

e. Rowspan, berguna untuk menggabungkan dua buah atau lebih cell yang horizontal atau baris.
Contoh :
Apabila kita ingin mengubah tabel menjadi seperti ini.
10 | H T M L D A S A R
Maka kode yang ditulis adalah :
<table border="1" cellspacing="0" cellspacing="5">
<tr>
<td rowspan=”3”>rowspan 3</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>

LATIHAN
Buatlah sebuah tabel seperti di bawah ini.

11 | H T M L D A S A R
10. Form HTML
Form adalah sebuah elemen pada html yang digunakan untuk mengelola data dari input yang dilakukan
oleh pengguna (user), baik itu input yang dilakukan pada kolom, memilih sesuatu pada combo box atau
drop down menu atau memilih pada radio button atau bahkan Ketika user menekan sebuah tombol.
Tag yang digunakan untuk membuat form adalah <form></form>. Penggunaan form pada sebuah
website antara lain disebut dengan : login form, form registrasi dan lain-lain. Contoh yang paling sering

kita temui adalah halaman awal facebook.


Elemen-elemen yang ada di form html antara lain :
a. Input, digunakan agar user bisa menginput sesuatu. Tag nya adalah <input type=” ”>. Tipe yang
sering digunakan antara lain : text, password, radio, dan checkbox. Contoh pembuatan elemen input
pada form :
- Buatlah dokumen baru pada sublime text dan beri nama : form.html lalu ketikkan kode berikut.
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>

<form>
<label for="username">username</label>
<input type="text" id="username">
<br>
<label for="password">password</label>
<input type="password" id="password">
<br>
<input type="radio" id="pria" name="jeniskelamin"><label for="pria">pria</label>
<input type="radio" id="wanita" name="jeniskelamin"><label
for="wanita">wanita</label>
<br>
<input type="checkbox" id="menyanyi"><label for="menyanyi">menyanyi</label>
<input type="checkbox" id="olahraga"><label for="olahraga">olahraga</label>
<input type="checkbox" id="ngoding"><label for="ngoding">ngoding</label>
</form>

</body>
</html>

b. Textarea, digunakan untuk mengisikan komentar atau pesan pada email, bentuknya kurang lebih
sama dengan input text namun pengisian teks lebih besar. Tag nya adalah <textarea></textarea>

12 | H T M L D A S A R
c. Select, digunakan untuk membuat drop down atau combo box. Tag nya adalah <select></select>
dan dilengkapi dengan tag <option></option> di dalamnya untuk menambahkan item pilihannya.
Contoh :
<select>
<option>opsi 1</option>
<option>opsi 2</option>
<option>opsi 3</option>
…
</select>
d. Button, digunakan untuk membuat tombol untuk mengirimkan data atau hal yang spesifik. Tag nya
adalah <button type=”submit”>…</button>
e. Label, digunakan untuk membuat menandai sebuah elemen. Tag nya adalah <label></label> tag ini
disertai dengan atribut for. Contoh : <label for=”username”>username</label>

LATIHAN

Buatlah form seperti di bawah ini.

13 | H T M L D A S A R

Anda mungkin juga menyukai