ADVISER : UMAM
DEVELOPER : LAILATUL QOMARIYAH
LATIHAN PRAKTIKUM
PEMBUATAN WEBSITE
LATIHAN
1. A. Menggunakan Link1
kode - kode :
<!DOCTYPE HTML>
<html lang="en">
<haed>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
</html>
<html lang="en">
<haed>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
</html>
B. Link2
kode - kode
<!DOCTYPE HTML>
<html lamg="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="linkl.html">Klik di sini</a>
</body>
</html>
<html lamg="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="linkl.html">Klik di sini</a>
</body>
</html>
C. Link3
kode - kode
<!DOCTYPE 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>
<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>
2. LINK INTERNAL
kode - kode
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,
sed do eiusmod tempor incidunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat
<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, cosectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation uiiamco
laboris
nisi ut aliquip ex ea commodo consequat.
</body>
</html>
<html lang="en">
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,
sed do eiusmod tempor incidunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat
<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, cosectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation uiiamco
laboris
nisi ut aliquip ex ea commodo consequat.
</body>
</html>
3. Link Email
kode - kode
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Link Email</title>
</head>
<body>
<a href="mailto:didik@um.ac.id" >didik at um dot ac dot
id</a>
</body>
</html>
<html lang="en">
<head>
<title>Demo Link Email</title>
</head>
<body>
<a href="mailto:didik@um.ac.id" >didik at um dot ac dot
id</a>
</body>
</html>
4. Link Gambar
kode - kode
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://www.tabloidbintang.com/articles/film-tv-musik/kabar/58745-infotainment-awards-2017-angga-yunanda-raih-penghargaan-selebriti-pendatang-baru-paling-memikat">
<img src="google.jpg" border="0" />
</a>
</body>
</html>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://www.tabloidbintang.com/articles/film-tv-musik/kabar/58745-infotainment-awards-2017-angga-yunanda-raih-penghargaan-selebriti-pendatang-baru-paling-memikat">
<img src="google.jpg" border="0" />
</a>
</body>
</html>
5. Menggunakan Tabel
kode - kode
<!DOCTYPE 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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
6. Pemformatan Tabel
kode - kode
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Tabel</title>
</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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<title>Demo Tabel</title>
</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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
7. Mendesain Tabel
kode - kode
<!DOCTYPE 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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
<!-- Baris data ketiga -->
<tr>
<td>Lion</td>
<td>Inggis</td>
</tr>
<!-- Baris data keempat -->
<tr>
<td>Donny</td>
<td>Pantai Pasir Panjang</td>
</tr>
</table>
</body>
</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>Bambang</td>
<td>Surabaya</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
<!-- Baris data ketiga -->
<tr>
<td>Lion</td>
<td>Inggis</td>
</tr>
<!-- Baris data keempat -->
<tr>
<td>Donny</td>
<td>Pantai Pasir Panjang</td>
</tr>
</table>
</body>
</html>
8.Menggunakan From
kode - kode
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran PTI-Mail.com</h3>
<form actioan="" 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="cencel" />
</td>
</tr>
</table>
</form>
</body>
</html>
<html lang="en">
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran PTI-Mail.com</h3>
<form actioan="" 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="cencel" />
</td>
</tr>
</table>
</form>
</body>
</html>
Tidak ada komentar:
Posting Komentar