Scribd
Unggah
19 tayangan9 halaman

Materi 2 - HTML

Diunggah oleh

Widi Ya
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 PDF, TXT atau baca online di Scribd
19 tayangan9 halaman

Materi 2 - HTML

Diunggah oleh

Widi Ya
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

KEGIATAN PRAKTIKUM 2.

HTML

A. TUJUAN PEMBELAJARAN KHUSUS


Tujuan Pembelajaran Khusus dari materi ini adalah Mahasiswa mampu mempelajari
elemen-elemen dasar HTML serta dapat mengimplementasikan atau
menggunakannya.

B. PERSIAPAN PRAKTIKUM
1. Media pembelajaran perangkat komputer/Laptop dan LCD telah tersedia dengan
baik dan terkoneksi dengan jaringan internet.
2. Pastikan Program Aplikasi :
 Web Browser
seperti : Mozila Firefox, Internet Explorer, atau Google Chroome
 Software Developer
Macromedia Dreamweaver, Notepad ++
 Web Server
Xampp 1.7.3, Appserv, atau versi lainnya.

C. PETUNJUK PRAKTIKUM
1. Materi Pendahuluan
2. Praktek
3. Diskusi dan Tanya jawab
4. Mengerjakan Latihan Soal dan Tugas

D. DASAR TEORI
2.1 KOSEP DASAR HTML
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa
pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang
kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah
penjelajah web Internet (Browser) . HTML dapat juga digunakan sebagai link link antara

Buku Ajar Praktikum Pemrograman Web I 8


file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang
menghubungkan antar situs dalam dunia internet.
2.2 Fungsi HTML
Fungsi dari bahasa HTML adalah sebagai berikut :
a. Menentukan format suatu teks
b. Membuat list tentang sekelompok hal
c. Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
d. Menyisipkan citra atau gambar.
e. Menampilkan informasi dalam bentuk tabel
f. Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
g. Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh
dunia.
h. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
i. Menambahkan object-object seperti image, audi, video dan juga java applet
dalam dokumen HTML.

2.3 Struktur Penulisan HTML


HTML tersusun dari dua bagian, yaitu : bagian Elemen HTML dan bagian Tag HTML
a. Elemen HTML
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Contohnya untuk menampilkan judul dokumen HTML pada web browser
digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen
HTML. Selain itu dokumen HTML harus dibungkus dengan <HTML>. Artinya
dibagian awal anda harus menuliskan <HTML> dan dibagian akhir dokumen
tersebut juga harus ditutup denga </HTML> juga. Supaya dokumen yang kita buat
tersebut dikenali dengan baik oleh program browser yang digunakan.
b. Tag HTML
HTML tersusun atas tag yang berformat < isi tag > Struktur Umum Dokumen HTML
secara umum semua dokumen HTML (halaman web). Formatting TAGpada HTML
mengandung dua TAG, yaitu TAG pembuka dan TAG penutup dan TAG pembuka
saja. Formatting TAG pembuka adalah suatu TAG yang diawali dengan

Buku Ajar Praktikum Pemrograman Web I 9


<NAMA_TAG> dan diakhiri dengan </NAMA_TAG>. Sedangkan TAG pembuka
saja adalah TAG yang hanya dibuat dibagian awalnya saja yaitu
<NAMA_TAG> tanpa ditutup dengan tag
penutup lagi.
Yang merupakan tag-tag dasar dalam HTML adalah:
 <HTML> </HTML>
Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari
suatu file HTML.
 <TITLE> </TITLE>
Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan
oleh browser pada bagian title yang mana merupakan title dari jendela
browser.
 <HEAD> </HEAD>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara
HEAD tags.
 <BODY> </BODY>
Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag
ini memiliki sejumlah attribut dapat ditentukan.

Contoh :
Tuliskan script HTML sebagai berikut :

<html>
<head>
<title>Halaman Pertama HTML</title>
</head>
<body>
Ini body website.
</body>
</html>

Buku Ajar Praktikum Pemrograman Web I 10


 Simpan script tersebut dengan nama file halaman1.html pada salah satu
direktori yang telah disiapkan.
 Jalankan file halaman1.html dengan web browser (mozila firefox, internet
explorer, google chrome, dll).
 Setelah dijalankan pada browser, maka akan keluar tampilan sebagai berikut :

Pada buku ajar ini kita akan belajar penggunaan dari beberapa tag dasar yang
hampir akan selalu digunakan dalam setiap praktikum Anda nantinya. Perhatikan daftar
tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML.
1) Tag HTML dasar
Start Tag Kegunaan
<html> Mendefinisikan sebuah dokumen html
<body> Mendefinisikan isi/badan suatu dokumen
<h1>-<h6> Mendefinisikan heading ke 1 s/d heading ke 6
<p> Mendefinisikan sebuah paragraf
<br> Menyisipkan sebuah line break
<hr> Mendefinisikan sebuah garis horisontal
<tr> Membuat baris pada tabel
<td> Membuat kolom pada tabel

&nbsp; Menyisipkan spasi

Buku Ajar Praktikum Pemrograman Web I 11


Setelah itu, kita akan mempelajari penggunaan dari beberapa tag yang digunakan
dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengan
keinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag di
bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa
diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih
memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser
lama.
2) Tag untuk pemformatan teks dasar
Start Tag Kegunaan
<b> Mendefinisikan teks tebal
<big> Mendefinisikan teks yang lebih besar
<em> Mendefinisikan teks yang dimiringkan
<i> Mendefinisikan teks yang dimiringkan
<small> Mendefinisikan teks yang lebih kecil
<strong> Mendefinisikan teks tebal
<sub> Defines subscripted text
<sup> Mendefinisikan teks yang posisinya lebih ke atas
<u> Mendefinisikan teks yang digaris bawah

Buku Ajar Praktikum Pemrograman Web I 12


Ketika akan menulis suatu dokumen, mungkin terkadang perlu menuliskan kalimat
dalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu
halaman web, terkadang juga ingin melakukan hal yang sama. Terdapat tag khusus
untuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.
3) Tag untuk list
Start Tag Kegunaan
<ol> Mendefinisikan sebuah list ordered
<ul> Mendefinisikan sebuah list unordered
<li> Mendefinisikan sebuah item dalam list
<dl> Mendefinisikan sebuah list definisi
<dt> Mendefinisikan sebuah istilah list definisi
<dd> Mendefinisikan sebuah keterangan list definisi

Buku Ajar Praktikum Pemrograman Web I 13


E. LATIHAN
Petunjuk latihan
 Tuliskan script HTML berikut dan simpan dengan nama file lat1.html …… latn.html
pada folder yang telah disiapkan (WEB).
Script HTML 1. Paragraf dan line break

Simpan dengan nama file lat1.html

<html><body>
<p>Paragraf ini
mengandung banyak spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
</p>
<p>
Sedangkan yang ini memiliki &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
spasi panjang.
</p>
<p align=”center”>
Jumlah baris dalam setiap paragraf tergantung pada ukuran
window browser Anda. Bila Anda mengubah ukuran window browser,
jumlah baris dalam paragraf akan berubah.
</p>
<p align=”right”>
Untuk memotong <br>baris<br>dalam
sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body></html>

Script HTML 2. Background color dan heading


Simpan dengan nama file lat2.html

<html><body>
<body bgcolor="yellow">
<p>Perhatikan bahwa halaman ini seharusnya berwarna
kuning.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja.
Jangan menggunakan tag tersebut hanya untuk membuat tampilan
huruf tebal. Gunakan tag lain untuk keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah
halaman ini. </p>
</body></html>

Buku Ajar Praktikum Pemrograman Web I 14


Script HTML 3. List unordered dan ordered

Simpan dengan nama file lat3.htm

<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Soto</li>
<li>Bakso</li>
<li>Mie Ayam</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Es Teh</li>
<li>Es Jeruk</li>
<li>Kopi</li>
</ol>
</body>
</html>

Buku Ajar Praktikum Pemrograman Web I 15

Anda mungkin juga menyukai