LAPORAN PRAKTIKUM
MATERI WEBSITE
MODUL 2
Komponen HTML Lanjut
Oleh
·
Aldini Vida Steivia
TKJ
8
SMK
INDUSTRI AL KAAFFAH
Praktikum Ke-2
A. TUJUAN
1.
Memahami
komponen komponen html
2.
Memiliki
strategi penggunaan komponen html
3.
Mamu
menyelesaikan kasus kasus yang berhubngan dengan komponen html
B. HASIL TUGAS PRAKTIKUM
1. Atribut
Link
a.
Masukkan
script di bawah ini pada notepad ++
<HTML>
<html
lang="en">
<head>
<title>Demo
Atribut Link</title>
</head>
<body>
<a
href="link2.html" target="_blank" title="Title link">Klik
di
sini</a>
</body>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
2. Link
Internal
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en">
<head>
<title>Demo
Link Internal</title>
</head>
Menu
<ul>
<li><a
href="#pendahuluan">Pendahuluan</a></li>
<li><a
href="#pembahasan">Pembahasan</a></li>
<li><a
href="#kesimpulan">Kesimpuln</a></li>
</ul>
<h3
id="pendahuluan"><Pendahulluan<</h3.
<p>
loren
ipsum dolor sit amet, consecteur adipisicing elit,
set do
euisumd tempor incididunt ut labore et dolore magna
aliqua
Ut enim ad
minim veniam, quis notsurd exercitation ullamco
laborisnisi
ut aliquip ex ea commodo consequat.
<h3
id="pembahasan">Pembahasan</h3>
<p>
Loren
ipsum dolor sit amet,consecteur adipisicing elit,
sed so
eisumod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad
minim veniam, quis notsurd exercation ullamco
laborisnisinisi
ut aliquip ex ea commodo consequat.
<h3
id="kesimpulan">Kesimpulan</h3>
<p>
Loren ipsum
dolor sit amet, concesteur adipisicing elit,
sed do
eisumod tempor incididunt ut labore et dolore magna
aliquaUt
enim ad minim veniam, quis notsurd exercation ullamo
laborenis
nisi ut
aliquip ex ea commodo consequat
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
3. Link
E-Mail
a.
Masukkan
script di bawah ini dala notepad++
<HTML>
<html
lang="en">
<head>
<title>Demo
Link Email</title>
</head>
<body>
<a
href="mailto:didik@um.ac.id" >didik at um at dot
id</a>
</body>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
4. Link
Gambar
a.
Masukkan
script di bawah ini dalam notepad++
<HTML>
<html
lang="en">
<head>
<title>Demo
Link Gambar</title>
</head>
<body>
<a
href="http://google.co.id" title="Search with Google">
<img
src="goggle.jpg" border="0" />
</a>
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
5. Menciptakan
Tabel
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en".
<head>
<title>Demo
Tabel</title>
</head.
<body>
<table
border=1>
<caption>Label
dari tabel</caption.
<!--
Header -->
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!--
Baris data Pertama -->
<tr>
<td>1</td>
<td>Herlambang</td>
<td>Bojonegoro</td>
</tr>
<!--
Baris data Kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
6. Pemformatan
Tabel
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en">
<head>
<body>
<table
border=1 align="center" cellspacing=0
cellpadding=10>
<caption>Label
dari tabel</caption>
<!-- Header
-->
<tr>
<!--
Mengatur lebar kolom -->
<th
width="50">No</th>
<th
width="150">Nama</th>
<th
width="200">Alamat</th></tr>
<!--
Baris data pertama -->
<tr>
<td>1</td>
<td>Herlamabang</td>
<td>Bojonegoro</td>
</tr>
<!--
Baris data kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
7. Mendesain
Tabel
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en">
<head>
<title>Demo
Span/Merge Sel</title>
</head>
<body>
<table
border=1 align="center" cellspacing=0
cellpadding=5>
<tr>
<th
width="50">No</th>
<!--
Gabung kolom nama dan alamat -->
<th
width="350" colspan=2>Span Nama dan Alamat</th>
</tr>
<!-- Baris
data pertama -->
<tr>
<!--
Gabung baris 1 dan 4 -->
<td
rowspan=4>Span baris 1 dan 4</td>
<td>Herlamabang</td>
<td>Bojonegoro</td>
</tr>
<!--
Baris data kedua -->
<tr>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
<!--
Baris data ketiga -->
<tr>
<td>Bian</td>
<td>Zimbabwe</td>
</tr>
<!--
Baris data keempat -->
<tr>
<td>Sony</td>
<td>Pantai
gading</td>
</tr>
</table>
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
8. Menggunakan
Form
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en">
<head>
<title>Template
Desain Form</title>
</head>
</body>
<h3>Formulir
Pendaftaran PTI-Mail.com</h3>
<form
action="" method="post">
<table
border=0>
<tr>
<td>NIK</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td>Nama</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td>Jenis
Kelamin</td>
<td>
<input
type="radio"/>Pria
<input
type="radio"/>Wanita
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select
name="job">
<option>Guru</option>
<option>Wiraswasta</option>
<option>Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>
<input
type="submit" value="ok"/>
<input
type="submit" value="cancel"/>
</td>
</tr>
</table>
</form>
</body>
</html>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
.
9. Studi
Kasus
a.
Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang=en">
<head>
<title>Studi
kasus II</title>
</head>
<body>
<font
face="comic sans MS">
<h1
align="center" size="25">Download Dataku</h1>
<table
border="0" width="400" align="center">
<tr>
<td
bgcolor="#ffcb87" width="200"
align="center"><a
href="load1.html">Pilem</a></td>
<td
bgcolor="turquoise" width="200"
align="center"><a
href="load2.html">Dokumen</a></td>
<td
bgcolor="turquouise" width="200"
align="center"><a
href="load3.html">Music</a></td>
</tr>
<tr>
<td
colspan="3" bgcolor="ffcb87">
<ol>
<li><a
href="#Movie 1" title="Download this file">Fight of The
Road</a></li>
<li><a
href="#Movie 2" title="Download this file">Fight of The
Road
2</a></li>
<li><a
href="#Movie 3" title="Download this file">Memory In The
Jungle</a></li>
<li><a
href="Movie 4" title="Download this file">Memory In The
jungle
2</a></li>
<li><a
href="#Movie 5" title="Download this file">Sabtu Bersama
Bapak</a></li>
</ol>
</td>
</tr>
</table>
</body>
</HTML>
b.
Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
10.
Praktikum
a. Masukkan
script di bawah ini pada notepad++
<HTML>
<html
lang="en">
<head>
<title>Grafik
Zn Mode</title>
</head>
<body>
<table
align = "center" width = 1200 cellpadding = 15
background="graf.gif">
<tr>
<th
align = "center" colspan = 50>
<h1>GRAFIK
MATA PELAJARAN FAFORIT</h1>
</th>
</tr>
<tr>
<td
background="rating.jpg" rowspan=15 width=100></td>
</tr>
<tr><!--
11 -->
<td
bgcolor="black" rowspan=12 width=0></td>
<td
rowspan=11></td>
<td
colspan=30></td>
</tr>
<tr><!--
10 -->
<td
colspan=30></td>
</tr>
<tr><!--
9 -->
<td
colspan=13></td>
<td
rowspan=9 bgcolor="black"></td>
<td
colspan=9></td>
<td
rowspan=9 bgcolor="grey"></td>
<td
colspan=3></td>
</tr>
<tr><!--
8 -->
<td></td>
<td></td>
<td
rowspan=8 bgcolor="black"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
rowspan=8 bgcolor="grey"></td>
<td></td>
<td></td>
<td
rowspan=8 bgcolor="turquoise"></td>
<td></td>
<td
rowspan=8 bgcolor="blue"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--
7 -->
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
rowspan=7 bgcolor="black"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
rowspan=7 bgcolor="grey"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
rowspan=7 bgcolor="turquoise"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--
6 -->
<td></td>
<td></td>
<td></td>
<td></td>
<td
rowspan=6 bgcolor="black"></td>
<td
colspan=12></td>
<td
rowspan=6 bgcolor="grey"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--
5 -->
<td></td>
<td
rowspan=5 bgcolor="black"></td>
<td
colspan=12></td>
<td
rowspan=5 bgcolor="grey"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--
4 -->
<td></td>
<td
rowspan=4 bgcolor="turquoise"></td>
<td></td>
<td
rowspan=4 bgcolor="blue"></td>
<td
colspan=12></td>
</tr>
<tr><!--
3 -->
<td></td>
<td></td>
<td
rowspan=3 bgcolor="black"></td>
<td></td>
<td></td>
<td
rowspan=3 bgcolor="grey"></td>
<td></td>
<td
rowspan=3 bgcolor="turquoise"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><!--
2 -->
<td
rowspan=2 bgcolor= "turquoise"></td>
<td
colspan=13></td>
</tr>
<tr><!--
1 -->
<td></td>
<td></td>
<td
bgcolor="black"></td>
<td
colspan=12></td>
</tr>
<tr>
<td
bgcolor="grey" colspan = 31></td>
</tr>
<tr>
<td
bgcolor="grey" colspan = 31
background="racer.jpg"></td>
</tr>
</table>
<h2>
<table
align= "center" width=500 cellpadding=15>
<tr>
<th><h3>keterangan:</h3></th>
<th></th>
<th></th>
</tr>
<tr>
<td
width=75 bgcolor="black"></td>
<td>:
MATEMATIKA</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td
bgcolor="grey"></td>
<td>:
FISIKA</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td
bgcolor="turquoise"></td>
<td>:
BIOLOGI</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td
bgcolor="blue"></td>
<td>:
KIMIA</td>
<td></td>
</tr>
</h2>
</table>
</body>
</html>
b. Save
dalam bentuk html
c.
Buka
script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
Tidak ada komentar:
Posting Komentar