Scribd
Unggah
10 tayangan10 halaman

Materi I HTML

Diunggah oleh

iccank17
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
10 tayangan10 halaman

Materi I HTML

Diunggah oleh

iccank17
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

MODUL I

HTML
(Pertemuan 1)

Tujuan :
1. Mahasiswa dapat mengenal dasar-dasar HTML
2. Mahasiswa dapat menguasai dasar-dasar HTML
3. Mahasiswa dapat mengenal dan memahami blok program HTML
4. Mahasiswa dapat memahami setiap object sebagai dasar pembuatan interface pada
halaman browser
5. Mahasiswa dapat membuat halaman web sederhana dengan HTML

Dasar Teori
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun
dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag
yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
1. Penamaan Dokumen HTML
Penamaan dokumen dapat dilakukan pada saat melakukan penyimpanan, pada saat mengetikkan
nama dile, maka file diberikan ekstensi .html, contoh : namafile.html.
2. Struktur Dokumen HTML
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML
yaitu HTML,HEAD dan BODY. Tag HTML berfungsi untuk menyatakan suatu dokumen HTML, tag
HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk
menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML.Elemen yang terdapat
pada sebuah dokumen HTML terbagi atas dua bagian yaitu Head dan Body.
a. Bagian Head
Bagian header dari dokumen HTML diapit dengan tag <HEAD>. </HEAD> di dalam bagian ini
biasanya dimuat tag <TITLE>. </TITLE> yang menampilkan judul dari halaman pada browser.
b. Bagian Body
Dokumen body diapit dengan tag <BODY>....</BODY>, bagian body digunakan untuk
menampilkan text, image, link dan semua yang akan ditampilkan pada web page.
Contoh Penulisan Struktur HTML :
<!doctype html>
<html> Bagian Head
<head>
<title>Disini Judul Dokumen HTML </title>
</head>
Bagian Body
<body>
Disini Penulisan Informasi Web
</body>
</html>

Penjelasan :
<! Doctype html>
Adalah tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser
bahwa dokumen yang sedang dibuka adalah dokumen HTML.

<html>......</html>
Awal dari isi dokumen HTML, semua kode HTML yang dibuat akan ditulis dalam tag ini.
<head>......</head>
Tag head digunakan untuk menyimpan informasi tentang dokumen HTML.
<title>.......</title>
Salah satu contoh informasi yang terdapat didalam tag HEAD adalah title. Title akan menampilkan
teks pada judul browser atau pada tab browser.
<body>......</body>
Merupakan tag pembuka dari badan dokumen HTML.
3. Elemen dan Tag Pada Dokumen HTML
Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML
dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang
dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan
oleh browser, seperti paragraf, list(daftar), tabel dan lain‐lain. Sedangkan tag dinyatakan dengan tanda
lebih kecil “ < “ (tag awal ) dan tanda lebih besar “ > “ (tag akhir). Dalam penggunaannya sebagian besar
kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan
diakhiri dengan
</namatag> (terdapat tanda "/").
Dokumen HTML terdiri dari elemen-elemen yang saling berkaitan untuk membentuk suatu dokumen
HTML yang utuh, antara lain elemen HTML, elemen Head, elemen Body yang masing-masing dapat
diapit tanda yang disebut delimeter(< >).
Elemen yang telah diapit dengan tanda delimeter disebut dengan Tag.
Contoh penulisan :
<nama elemen>

Misalnya : <html>
Perlu diingat juga bahwa pada setiap elemen atau tag harus selalu diakhiri atau ditutup dengan
menuliskan kembali tag dan menambahkan tanda garis miring “/”.
Cara penulisan :
Misalnya : </html>
</nama elemen>
Tag HTML dasar
Berikut adalah tag HTML dasar :
Tag Deskripsi
<html> Mendefinisikan sebuah dokumen HTML
<body> Mendefinisikan bagian body dokumen
HTML
<h1> sampai <h6> Mendefinisikan header 1 sampai 6
<p> Mendefinisikan paragraph
<br> Menambahkan line break (spasi baru)
<hr> Membuat garis datar (horizontal)
<!--> Mendefinisikan komentar

- Heading dan Paragraph


Heading digunakan untuk memberikan penjudulan pada suat dokumen HTML. Untuk melakukan
format heading maka menggunakan tag <h1>.......</h1> untuk judul utama dan untuk judul
sub
bab dapat menggunakan tag <h2>....</h2> sampai dengan <h6>.......</h6>.
Untuk membuat sebuah paragraph dalam dokumen HTML maka digunakan tag <p>.......</p>.
- Link
Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag
<a>........</a> serta atribut href agar link tersebut dapat menyimpan alamat web yang akan dituju
ketika link diklik. Sehingga sintaks link adalah :
<a href=’alamat web yang dituju’</a>
- List
Dalam dokumen HTML suatu daftar atau list adalah suatu kumpulan item tertentu, daftar item
dapat ditulis secara berurutan atau tidak. Jenis list dalam HTML adalah :
1. Ordered list
Ordered list dapat dibuat dengan menggunakan tag <ol>....</ol> dan untuk setiap listnya
menggunakan tag <li>....</li>.
2. Unordered list
Unordered list dapat dibuat dengan menggunakan tag <ul>....</ul> dan untuk setiap listnya
menggunakan tag <li>....</li>.
- Image
Dalam dokumen HTML kita dapat memuat dan menampilkan gambar. Untuk memuat gambar
menggunakan tag <img> untuk menentukan file gambar maka digunakan atribut src. Sehingga
sintaks image adalah :
<img src =’nama file gambar.jpg’>
- Form
Sebuah form dalam dokumen HTML dapat memiliki bermacam kontrol, mulai dari text input, combo
box, button dan lain sebagainya. Pembuatan sebuah form diawali dengan menggunakan tag :
<form>.. .</form>
Berikut beberapa kontrol form yang biasa digunakan dalam HTML:
a. Label
Label digunakan untuk memberikan keterangan pada setiap input yang ada. Sintaks form label adalah :
<label for=’nama’>keterangan input</label>
b. Text
Kontrol input ini dapat diisi dengan teks yang memiliki panjang kata terbatas, biasa digunakan dalam
form pencarian, nama dan lainnya. Sintaks form text adalah :
<input type=’text’ name=’nama’>
c. Combobox
Combobox adalah kontrol yang memiliki pilihan ketika diklik. Sintaks form combobox adalah :
<select>
<option value=”name value 1></option>
<option value=”name value 2></option>
<option value=”name value 3></option>
</select>
- Tabel
Untuk menampilkan data dengan tipe tabel dalam HTML, dapat menggunakan tag :
<table>. </table>
Sedangkan untuk menampilkan baris tabel maka digunakan tag :
<tr>. </tr>
Sedangkan untuk menentukan banyaknya kolom maka menggunakan tag :
<td>...</td>
- Div
Penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan
struktur lainnya. dalam struktur HTML terdapat bebrapa bagian antara lain :
a. Header
Bagian kepala website yang berisi logo, nama, slogan, menu dan lainnya. Sintaks <div>
untuk footer adalah :
<div id=’header’>............</body>
b. Content
Berisi isi website itu sendiri, contoh content berisi postingan terbaru atau informasi lainnya.
sintaks <div> untuk content adalah :
<div id=’content’>............</body>
c. Sidebar
Berada disamping content dan biasanya berisi iklan, kategori artikel dan widget dan lainnya.
Sintaks <div> untuk sidebar adalah :
<div id=’sidebar’>............</body>
d. Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut, misalnya
copyright©2018 by me. Sintaks <div> untuk footer adalah :
<div id=’footer’>............</body>

KEGIATAN PRAKTIKUM

1. Membuat Heading dan Paragraph


Langkah-langkah praktikum
 Buka direktori C > xampp > htdocs, kemudian buat folder dan beri nama “praktikum_web”
 Buka editor Notepad++ atau Sublime Text
 Buatlah file baru dengan membuka menu file > new atau dengan shortcut ctrl + N
 Tuliskan coding berikut
 Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
<!doctype html>
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
<html lang="en">
<head>
dengan <meta
“prak1.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
charset="UTF-8">
Save. <title> Belajar Membuat Heading dan Paragraph</title>
</head>
<body>
<h1>Heading ke-1</h1>
<h2>Heading ke-2</h2>
<h3>Heading ke-3</h3>
<h4>Heading ke-4</h4>
<h5>Heading ke-5</h5>
<h6>Heading ke-6</h6>

<p> <strong>ini adalah contoh paragraph</strong></p>


</body>
</body>
</html>

 Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada modul
Apache dan MySQL.
 Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak1.html
Maka pada browser akan muncul hasil sebagai berikut:

2. Praktikum membuat List, salin koding dibawah ini :


 Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
<!doctype html>
penyimpanannya
<html> pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
<head>
dengan <title>List</title>
“prak2.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
</head>
Save.
<body>
<h3>Membuat Unordered List</h3>
<strong><i><u>Bahan-bahan Memasak Telur Goreng</u></i></strong>
<ul>
<li>Telur 3 butir</li>
<li>Margarin (1 sdm)</li>
<li>Batang Daun bawang</li>
<li>Bawang merah (2 butir)</li>
<li>cabai merah keriting(2 buah)</li>
<li>lada 1/4 sdt</li>
<li>garam 1/4 sdt</li>
</ul>
<h3>Membuat Ordered List</h3>
<strong><i><u>Cara Memasak Telor Goreng</u></i></strong>
<ol>
<li>Campur semua bahan di atas</li>
<li>Kocok semua bahan hingga merata</li>
<li>Panaskan margarin</li>
<li>Goreng dan dadar hingga kuning keemasan (matang)</li>
<li>Selesai dan masakan di hidangkan</li>
</ol>
</body>
</html>
 Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada modul
Apache dan MySQL.

 Lakukan kompilasi program melalui browser dengan mengetikkan


http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak2.html
Maka pada browser akan muncul hasil sebagai berikut:

3. Praktikum gambar dan tabel, salin koding dibawah ini :


<!doctype html>
<html>
<head>
<title>Image & Table</title>
</head>
<body>
<h3>Daftar Barang</h3>
<table border="1">
<caption>Tabel Harga Produk</caption>
<tr>
<th>Kode Produk</th>
<th>Nama Produk</th>
<th>Harga</th>
<th>Gambar</th>
</tr>
<tr>
<td>P001</td>
<td>Kipas Angin</td>
<td>400.000</td>
<td><img src="kipasangin.jpg" width="145" height="150"></td>
</tr>
<tr>
<td>P002</td>
<td>Lemari Es</td>
<td>1700.000</td>
<td><img src="lemari_es.jpg" width="145" height="150"></td>
</tr>
<tr>
<td>P003</td>
<td>Mesin Cuci</td>
<td>2000.000</td>
<td><img src="mesincuci.jpg" width="145" height="150"></td>
</tr>
</table>
</body>
</html>

 Simpan coding yang telah dituliskan dengan membuka menu file > save as... pilih lokasi
penyimpanannya pada direktori C > xampp > htdocs > praktikum_web, dan beri nama file
dengan “prak3.html” atau pilih “Hypertext Markup Languange File” pada Save as type, klik
Save.
 Buka Xampp kemudian aktifkan Apache dan MySQL, dengan menekan tombol Start pada modul
Apache dan MySQL.
 Lakukan kompilasi program melalui browser dengan mengetikkan
http://localhost/namafolder/namafile , yaitu http://localhost/praktikum_web/prak3.html
Maka pada browser akan muncul hasil sebagai berikut:

TUGAS
1. Buatlah tampilan website Foodcourt dengan ketentuan:
- Header berisikan Nama foodcourt, Gambar
- Konten berisikan daftar menu makanan, harga dan gambar makanan dalam bentuk tabel
- Link untuk mengakses Foodcourt
- Footer yang berisikan Copyright nama anda

Anda mungkin juga menyukai