Scribd
Unggah
3 tayangan

Modul I-HTML

Dokumen ini menjelaskan tentang HTML, termasuk pengertian, struktur dasar, dan berbagai tag serta fungsinya dalam pembuatan halaman web. Selain itu, dokumen ini juga membahas tentang penggunaan web browser dan text editor untuk mengedit file HTML. Tugas praktikum di akhir modul meminta pembuatan tiga halaman web dengan konten yang berbeda.

Diunggah oleh

hanifudinsukri
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
3 tayangan

Modul I-HTML

Dokumen ini menjelaskan tentang HTML, termasuk pengertian, struktur dasar, dan berbagai tag serta fungsinya dalam pembuatan halaman web. Selain itu, dokumen ini juga membahas tentang penggunaan web browser dan text editor untuk mengedit file HTML. Tugas praktikum di akhir modul meminta pembuatan tiga halaman web dengan konten yang berbeda.

Diunggah oleh

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

Modul 1

HTML
Tujuan :
Mampu Menjelaskan pengertian, struktur dasar, tag-tag HTML dan
membuat aplikasi dengan perintah-perintah HTML.
Tugas Pendahuluan :
1. Jelaskan apa yang dimaksud dengan HTML dan fungsi utamanya!
2. Sebutkan dan jelaskan tiga tag penting dalam struktur dokumen HTML!
3. Bagaimana cara menambahkan gambar ke dalam halaman web dengan
menggunakan HTML?
4. Jelaskan fungsi atribut rowspan dan colspan dalam tabel HTML!
5. Sebutkan dan jelaskan 5 macam komponen input dalam form HTML!

1. Teori
1.1. Pengertian HTML
HTML adalah HyperText Markup Language merupakan sebuah bahasa
markah untuk membuat halaman web (Wikipedia). Dokumen HTML adalah file
text murni yang dapat dibuat dengan teks editor sembarang. Dokumen ini dikenal
sebagai web page. File-file HTML ini berisi instruksi-instruksi yang kemudian
diterjemahkan oleh browser yang ada dikomputer client (user) sehingga isi
informasinya dapat ditampilkan secara visual dikomputer pengguna (user).
HTML menggunakan serangkaian tag atau elemen untuk menandai berbagai
bagian dari halaman, seperti teks, gambar, link, dan tabel. Browser web kemudian
menginterpretasikan tag-tag ini untuk menampilkan halaman web dengan benar
kepada pengguna.
1.2. Web Browser
Web Browser adalah perangkat lunak yang digunakan untuk membuka file
HTML yang telah dibuat selain itu web broser juga digunakan untuk mengakses
informasi yang disimpan di internet. Ini adalah program yang memungkinkan
pengguna untuk melihat dan menavigasi halaman web, serta menampilkan konten
seperti teks, gambar, video, dan aplikasi web.
1.3. Text Editor
Sebuah text editor adalah perangkat lunak yang digunakan untuk membuat dan
mengedit berkas teks. Dalam konteks pembelajaran pemrograman website, editor
teks digunakan untuk menulis kode HTML, CSS, dan JavaScript. Editor teks dapat
bervariasi dari yang sederhana seperti Notepad (pada sistem Windows) hingga yang
canggih seperti Visual Studio Code, Sublime Text, atau Atom. Editor teks yang
baik biasanya dilengkapi dengan fitur-fitur seperti penyorotan sintaksis,
penyelesaian kode, dan pengelolaan proyek yang membantu siswa dalam menulis
dan mengorganisir kode mereka dengan lebih efisien.
1.4. Struktur dasar HTML
Struktur dasar HTML terdiri dari tag-tag yang diperlukan untuk memulai dan
mengakhiri halaman web. Setiap halaman HTML dimulai dengan tag <html> dan
diakhiri dengan tag </html>. Di dalamnya, terdapat tag <head> untuk informasi
tentang halaman dan tag <body> untuk konten utama yang akan ditampilkan kepada
pengguna. Jadi setiap dokumen html harus mempunyai pola dasar sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Setiap dokumen HTML harus diawali dengan menuliskan tag dan diakhir
dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah
dokumen HTML. Dalam satu dokumen hanya ada satu elemen HTML.
Section atau elemen head dimulai dengan tag diawal, dan tag diakhir.
Section ini berisi informasi tentang dokumen htmlnya. Minimal informasi yang
dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan
pada caption bar dari window browser, ditandai dengan menggunakan tag .
Sehingga bagian yang diapit oleh tag HEAD merupakan header dari halaman
HTML dan tidak ditampilkan pada browser. Sedangkan tag TITLE yang berfungsi
untuk mengeluarkan judul pada title bar window web browser.
Section atau elemen body ditandai dengan tag diawal dan tag diakhir.
Section body merupakan elemen terbesar didalam dokumen HTML. Pada bagian
ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam
format maupun gambar yang ingin disampaikan pada pengguna nantinya.
1.5. Tag-tag HTML dan Fungsinya
a. Warna latar belakang

<body bgcolor=#nnnnnn> . . . </body>

b. Menggunakan gambar

<body background=“nama_file_gambar”> . . . </body>

c. Heading
Untuk judul atau sub judul dalam dokumen HTML

<h1 [align=”left”|”center”|”right”]> . . . </h1>


<h2 [align=”left”|”center”|”right”]> . . . </h2>
<h6 [align=”left”|”center”|”right”]> . . . </h6>

d. Paragraph
Untuk mengatur perataannya (kiri, tengah, kanan):

<p [align=”left”|”center”|”right”]> . . . </p>

e. Break

Untuk menulis teks pada baris berikutnya: <br>

f. Font

Ukuran font
<font size=“n”> . . . </font>
Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>

g. Untuk format Teks


Bold:
<b> . . .</b>
Emphasized:
<em> . . . </em>
Italic:
<i> . . . </i>
Superscript:
<sup> . . .</sup>
Subscripted:
<sub> . . . </sub>
Struck trough:
<del> . . . </del>

h. Gambar
Untuk Memuat gambar ke dalam halaman Web

<img src=”URL”|”name” height=”n” width=”n”


align=”top”|”center”|”bottom”] />

i. Hypertext Link

Format:
<a href=”address” > . . . </a>
Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
Link ke bagian tertentu dalamdokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>

1.6. Tabel
Ketika membuat tabel dengan HTML ada beberapa tag atau elemen HTML
yang harus diketahui. Akan tetapi pada dasarnya sudah bisa membuat tabel dengan
hanya menggunakan 3 elemen HTML berikut :
a. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
b. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
c. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada
tabel
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga
menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut.
a. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel
b. Elemen <thead> digunakan untuk membungkus konten bagian judul atau
kepala tabel
c. Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh
dari tabel
d. Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah
dari tabel
Conton sintak membuat tabel :

<!DOCTYPE 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>

Pada kode di atas terdapat atribut border dalam tag table, atribut border
tersebut berfungsi untuk memberikan garis pada tabel. Sedangkan angka 1 di dalam
atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin
besar nilai tersebut maka semakin tebal garis yang ditampilkan.
Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk
menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel
menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa
kamu gunakan seperti berikut :
a. Atribut rowspan digunakan untuk menggabungkan baris pada tabel
b. Atribut colspan digunakan untuk menggabungkan kolom pada tabel
Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode
program berikut :

<!DOCTYPE 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>
<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>
</table>
</body>
</html>
1.7. Form
Elemen HTML <form> digunakan untuk membuat formulir HTML untuk
input pengguna:

<form>
.
form elements
.
</form>

Elemen <form> adalah wadah untuk berbagai jenis elemen masukan,


seperti: bidang teks, kotak centang, tombol radio, tombol kirim, dll.
Elemen HTML <input> adalah elemen formulir yang paling banyak
digunakan. Suatu <input> elemen dapat ditampilkan dalam berbagai cara,
bergantung pada atributnya type . Berikut beberapa contohnya:
Type Deskripsi

<input type="text"> Displays a single-line text input field


Displays a radio button (for selecting one of
<input type="radio">
many choices)
Displays a checkbox (for selecting zero or
<input type="checkbox">
more of many choices)
Displays a submit button (for submitting the
<input type="submit">
form)
<input type="button"> Displays a clickable button

Perhatikan contoh kode program berikut :


<form>

Formulir dengan kolom input untuk teks:


<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>

Formulir dengan tombol radio:


<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>

Formulir dengan kotak centang:


<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2"
value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>

Membuat tombol untuk mengirim formulir yang telah di isi


<input type="submit" value="Submit">
</form>

2. Tugas Praktikum
Buatlah 3 halaman web! Halaman pertama berisikan biodata anda terdiri dari
nama, alamat, tanggal lahir, pendidikan, hobby, dan lain-lain. Halaman kedua
berisikan tabel yang berisikan daftar nama dan NIM teman sekelas pada kelas
praktikum anda. Halaman ketiga buatlah form input sederhana yang akan diisi
dengan biodata terdiri dari nama, alamat, tanggal lahir, pendidikan, hobby, dan lain-
lain. Pada masing-masing halaman buatlah sebuah link yang berfungsi untuk
berpindah halaman.

Anda mungkin juga menyukai