MODUL 1
HTML (Hyper Text Marcup Language)
DASAR
A. TUJUAN
Mengetahui dan memahami dasar-dasar
bahasa HTML sebagai bahasa pemrograman untuk membuat halam web statis.
B. LANDASAN TEORI
HTML adalah singkatan dari adalah salah satu memerintahkan bahasa pemrograman web desain dan juga biasa disebut script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar HTML adalah sebagai berikut :
<html>
<head>
<title>
Modul 1 HTML Dasar</title>
</head>
<body>
Isi dokumen web
</body>
</html>
1.
Tag
Tag
adalah teks khusus (markup) berupa dua karakter “<” dan “>”, contoh
<body> tak dengan nama body. Tag
harus ditulis berpasangan, yang terdiri atas tag pembuka dan tag penutup
(ditambah karakter “/”) contoh tag pembuka <body> dan </body> tag
penutup.
2.
Element
Element
terdiri atas 3 bagian, yaitu tag pembuka, isi dan tag penutup.
a.
Elemen
HTML
Tag
yang berfungsi untuk membuka dan menutup seluruh isi dalam kode HTML. Isi
dokumen yang ingin ditampilkan di dalam browser harus berada di dalam tak ini.
<html>
Isi dokumen web
</html>
b.
Element
Head dan Title
Tag
Head mendefinisikan bagian kepala dokumen dari halaman web. Tag Head digunakan
untuk mendeklarasikan judul dokumen yang menggunakan tag Title.
<head>
<title>
Judul Dokumen Web
</title>
</head>
c.
Element
Body
Tag
yang mendefinisikan sebagai isi halaman web.
<body>
Isi Halaman Web
</body>
3.
Atribut
Atribut
didefinisikan sebagai property dari suatu element HTML yang terdiri atas nama
dan nilai.
<tag
Nama_atribut=”nilai_atribut”
Nama_atribut=”nilai_atribut”>
</tag>
Nilai
atribut harus berada dalam tanda petik satu atau dua. Contoh membuat warna teks
menjadi kuning dan latar belakang halaman berwarna hitam.
<body bgcolor=”black”
teks=”yellow”>....</body>
4.
Komentar
HTML
juga memilliki komentar yang dapat digunakan untuk menjelaskan bagian-bagian
dari isi dokumen web. Komentar dalam HTML diatur oleh tanda pembuka <!-- dan
ditutup oleh tanda -->.
<!—Isi Komentar -->
C. ALAT DAN BAHAN
1.
Laptop
2.
Sistem
Operasi Windows 7
3.
Browser
Chrome
4.
Notepad
++
5.
File
gambar ber-ekstensi .jpg
6.
Lembar
kerja percobaan
D. LANGKAH-LANGKAH PRAKTIKUM
Percobaan 1
(Dokumen HTML)
1.
Buka
Notepad++
2.
Ketik
script berikut didalam Notepad++
<html>
<head><title>Dokumen
HTML</title></head>
<body
bgcolor="skyblue">
Ini
adalah sebuah dookumen HTML dengan judul "Dokumen HTML" dan warna
latar/background biru langit.
Terima
kasih.
</body>
</html>
3.
Simpan
file dengan nama dokumen.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Print
screen hasilnya lampirkan dalam laporan
Percobaan 2 (Heading)
1.
Buka
Notepad++
2.
Ketik
script berikut didalam Notepad++
<html>
<head><title>Heading</title></head>
<body>
<h1>Teks
dengan ukuran Heading one</h1>
<h2>Teks
dengan ukuran Heading two</h2>
<h3>Teks
dengan ukuran Heading three</h3>
<h4>Teks
dengan ukuran Heading four</h4>
<h5>Teks
dengan ukuran Heading five</h5>
<h6>Teks
dengan ukuran Heading six</h6>
</body>
</html>
3. Simpan file dengan nama heading.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Print
screen hasilnya lampirkan dalam laporan
Percobaan 3 (Font)
1.
Buka
Notepad++
2.
Ketik
script berikut didalam Notepad++
<html>
<head><title>Font</title></head>
<body>
<font
face='comic sans ms'>
Teks
ini berukuran normal jenis Comic Sans MS dan warna hitam
</font></br>
<font
size='5' face='verdana' color='red'>
Teks
ini berukkuran 5 jenis Verdana dan warna merah
</font></br>
Teks
cetak <b>Tebal</b>
<i>Miring</i>
<u>Garis
Bawah</u>
<strike>Garis
tengah</strike>
<sup>Superscript</sup>
dan
<sub>Subcript</sub>
</font>
</body>
</html>
3.
Simpan
file dengan nama font.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Amati
hasilnya
6.
Print
screen hasilnya lampirkan dalam laporan
Percobaan 4 (Paragraf dan Align)
1. Buka Notepad++
2. Ketik script berikut didalam Notepad++
Percobaan 4 (Paragraf dan Align)
1. Buka Notepad++
2. Ketik script berikut didalam Notepad++
<html>
<head>
<title>Paragraf
dan Align</title>
</head>
<body>
<p
align="left">Format paragraf ini rata kiri</p>
<p
align="right">Format paragraf ini rata kanan</p>
<p
align="center">Format paragraf ini rata tengah</p>
<p
align="justify">Format paragraf ini rata kanan-kiri. Format
paragraf ini rata kanan-kiri.
Format
paragraf ini kanan-kiri. Format paragraf ini rata kanan-kiri. Format paragraf
ini rata kanan-kiri.
Format
paragraf ini rata kanan-kiri. Format paragraf ini rata kanan-kiri.
Format
paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.</p>
</body>
</html>
3. Simpan
file dengan nama align.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Print
screen hasilnya lampirkan dalam laporan
Percobaan 5 (Gambar)
1.
Letakkan
sebuah file ber-ekstensi .jpg dalam folder yang sama dengan file-file percobaan
dan beri nama file tersebut dengan nama gambar.jpg
2.
Buka
Notepad++
3.
Ketik
script berikut didalam Notepad++
<html>
<head><title>Gambar</title></head>
<body>
<p><img
src='Gambar.jpg' height='100' width='100'>
Perataan
teks dibawah secara defaul dan gambar asli dengan ukuran 100 x 100
pixel</p>
<p><img
src='Gambar.jpg' height='100' width='100' align='top' border='2'>
Perataan
teks diatas dan border gambar 2 pixel</p>
<p
align='center'><img src='Gambar.jpg' height='100' width='100'
align='middle'>perataan
teks ditengah</br>dan letak gambar di tengah dokumen</p>
</body>
</html>
4.
Simpan
file dengan nama gambar.html
5.
Buka
file yang sudah disimpan dengan browser
6.
Print
screen hasilnya lampirkan dalam laporan
1.
Buka
Notepad++
2. Ketik script berikut didalam Notepad++
3. Simpan file dengan nama daftar.html
4. Buka file yang sudah disimpan dengan browser
5. Print screen hasilnya lampirkan dalam laporan
Percobaan 7
(Daftar menggunakan Multilevel list)
Percobaan 6
(Daftar menggunakan Bullets dan Numbering)
2. Ketik script berikut didalam Notepad++
<html>
<head>
<title>Bullets
dan Numbering</title>
</head>
<body>
<p>Daftar
menggunakan Bullets</p>
<ul
type='circle'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ul>
<p>Daftar
menggunakan Numbering (Angka)</p>
<ol
type='1'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
<p>Daftar
menggunakan Numbering (Huruf)</p>
<ol
type='a'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
<p>Daftar
menggunakan Numbering (Huruf Romawi)</p>
<ol
type='I'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</body>
</html>
3. Simpan file dengan nama daftar.html
4. Buka file yang sudah disimpan dengan browser
5. Print screen hasilnya lampirkan dalam laporan
1.
Buka
Notepad++
2.
Ketik
script berikut didalam Notepad++
<html><head>
<title>Germanic
Languages</title>
</head>
<body>
<ul>
<li>West
Germanic Languages</li>
<ul><li>English</li>
<ul><li>British</li>
<ul><li>BBC</li>
<li>Cockney</li>
<li>Dubliner</li>
</ul>
<li>Amierican</li>
<ul><li>Newcaster</li>
<li>Drawl</li>
<li>Jive</li>
</ul></ul>
<li>Dutch</li>
<ul><li>Hollander</li>
<li>Flemish</li>
<li>Afrikaans</li>
</ul></ul></ul>
</body>
</html>
3.
Simpan
file dengan nama multilevel.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Print
screen hasilnya lampirkan dalam laporan
Percobaan 8 (Table)
Percobaan 8 (Table)
1.
Buka
Notepad++
2.
Ketik
script berikut didalam Notepad++
<html>
<head><title>Table</title></head>
<body>
Tabel
Biasa
<table
border="1">
<tr>
<td>cell
1a</td>
<td>cell
1b</td>
<td>cell
1c</td>
</tr>
<tr>
<td>cell
2a</td>
<td>cell
2b</td>
<td>cell
2c</td>
</tr>
</table>
Colspan
<table
border="1">
<tr>
<td
colspan="3" align="center"> Quarter 1
</td>
</tr>
<tr
align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
</table>
Rowspan
<table
border="1">
<tr>
<td
rowspan="3" align="center"> Quarter 1</td>
<td>Jan</td>
</tr>
<tr>
<td>Feb</td>
</tr>
<tr>
<td>Mar</td>
</tr>
</table>
</body>
</html>
3.
Simpan
file dengan nama table.html
4.
Buka
file yang sudah disimpan dengan browser
5.
Print
screen hasilnya lampirkan dalam laporan
E. TUGAS
- Tuliskan script HTML untuk membuat isi seperti Gambar dibawah dengan background dokumen dari file gambar. Nama file gambar yang digunakan adalah NIM anda. Kemudian print screen hasilnya lampirkan dalam laporan.
<html>
<head><title>Tugas1</title></head>
<body
background="l200120077.jpg">
<h1>Biodata
Diri</h1></br>
<p>Nama
: Graficha AK</p>
<p>NIM
: L200120077</p>
<p>Kota
: Sukoharjo</p>
</body>
</html>
- Jelaskan fingsi dari tag atau atribut berikut:
No
|
Tag/Atribut
|
Fungsi
|
1
|
bgcolor=’blue’
|
Memberikan
warna biru pada latarbelakang atau background
|
2
|
<h1> -
<h6>
|
Membuat header
1-6 dengan ukuran sesuai tingkat 1-6
|
3
|
<font>...</font>
|
Mendefinisikan
font,warna,dan ukuran teks
|
4
|
face=’verdana’
|
Memberikan
jenis teks verdana
|
5
|
Size=’10’
|
Ukuran teks 10
|
6
|
color=’blue’
|
Warna teks
biru
|
7
|
<b>...</b>
|
Membuat teks
tebal
|
8
|
<i>...</i>
|
Membuat teks
miring
|
9
|
<u>...</u>
|
Membuat teks bergaris bawah
|
10
|
<strike>...</stike>
|
Untuk memberi
garis tengah pada teks/mencoret teks
|
11
|
<sup>...</sup>
|
Memberikan
efek superscript pada teks
|
12
|
<sub>...</sub>
|
Memberikan
efek subscript pada teks
|
13
|
<p>...</p>
|
Membuat sebuah
paragraf
|
14
|
align=’center’
|
Format rata
tengah
|
15
|
<img>
|
Berfungsi
untuk menampilkan gambar pada dokumen HTML
|
16
|
src=’gambar.jpg’
|
Berfungsi
untuk menampilkan gambar yang bernama gambar.jpg
|
17
|
width=’100’
|
Mendefinisikan
lebar suatu gambar dengan lebar 100 pixel
|
18
|
height=’100’
|
Mendefinisikan
tinggi suatu gambar dengan lebar 100 pixel
|
19
|
alt=’alt’
|
membantu
mengurangi error / warnings valid pada HTML
|
20
|
<ul>...</ul>
|
Mendefinisikan
daftar dalam format bullet
|
21
|
<ol>...</ol>
|
Mendefinisikan
daftar dalam format penomoran
|
22
|
<li>...</li>
|
Digunakan
untuk menampilkan informasi dalam bentuk item daftar
|
23
|
type=’circle’
|
Tipe bullet
yang digunakan adalah lingkaran
|
24
|
<table>...</table>
|
Membuat tabel
|
25
|
<tr>...</tr>
|
Membuat baris
di dalam sebuah tabel
|
26
|
<td>...</td>
|
Mendefinisikan
sel di dalam sebuah tabel
|
27
|
border=’2px’
|
Memberikan
garis/bingkai pada tabel setebal 2px
|
28
|
colspan=’2’
|
Menggabungkan
2 kotak kesamping pada tabel
|
29
|
rowspan=’2’
|
Menggabungkan
2 kotak kebawah pada tabel
|
30
|
</br>
|
Break/spasi
satu baris
|
- Buat Multilevel list dengan kombinasi number dan huruf, print screen script dan tampilan yang anda buat dan tunjukkan kepada dosen/asisten praktikum!
<html>
<head>
<title>Multilevel
tugas no.3</title>
</head>
<body>
<ol
type='A'>
<li>West
Germanic Languages</li>
<ol><li>English</li>
<ol
type='a'><li>British</li>
<ol><li>BBC</li>
<li>Cockney</li>
<li>Dubliner</li>
</ol>
<li>Amierican</li>
<ol
type='1'><li>Newcaster</li>
<li>Drawl</li>
<li>Jive</li>
</ol></ol>
<li>Dutch</li>
<ol
type='a'><li>Hollander</li>
<li>Flemish</li>
<li>Afrikaans</li>
</ol></ol></ol>
</body>
</html>
0 comments:
Posting Komentar