HTML VIII - Form HTML

Source Code di atas adalah :

Nama File : latihan8.html

<!DOCTYPE html>

<html>

<body>

<form action="crud_latihan8.php">

<div>

Nama Depan:<br>

<input type="text" name="namaDepan" value="Mickey">

</div>

<div>

Nama Belakang:<br>

<input type="text" name="namaBelakang" value="Mouse">

<div>

<div>

Tempat Lahir:<br>

<input type="text" name="tempatLahir" value="Pekanbaru">

<div>

<div>

Tanggal Lahir:<br>

<input type="date" name="tanggalLahir" value="Mouse">

<div><br/>

<input type="submit" value="Submit">

</form> 

</body>

</html>

Nama File : crud_latihan8.php

<?php

echo"<div>

Nama Depan : $_GET[namaDepan]

</div>

<div>

Nama Belakang : $_GET[namaBelakang]

</div>

<div>

Tempat Lahir : $_GET[tempatLahir]

</div>

<div>

Tanggal Lahir : $_GET[tanggalLahir]

</div>";

?>

HTML VII - Responsive Javascript

Source Code diatas adalah :

<!DOCTYPE html>

<html lang="en-US">

<head>

<style>

.city {

float: left;

margin: 5px;

padding: 15px;

width: 300px;

height: 330px;

border: 1px solid black;

} 

</style>

<script>

function light(x) {

var pic;

if (x == 1) {

pic = "pku1.jpg"

}else if (x == 2) {

pic = "pku2.jpg"

}else if (x == 3) {

pic = "pku3.jpg"

}else if (x == 4) {

pic = "pku4.jpg"

}else if (x == 5) {

pic = "pku5.jpg"

}

document.getElementById('imgPKU').src = pic;

}

</script>

</head>

<body>

<h1>HTML VII - Responsive & JavaScript</h1>

<br>

<div class="city">

<h2>Indonesia</h2>

<p style='vertical-align:top;text-align:justify;'>

<img id='imgPKU' style='float:left;' width=150 height=140 src='mpr.jpg'>

Indonesia adalah Negara yang sangat besar. Wilayah Indonesia meliputi 17 ribu pula, enam ribu diantaranya malah belum memiliki nama. Penduduknya mencapai 240 juta, menempati urutan keempat terbesar didunia setelah Cina, India dan Amerika. Indonesia juga memiliki kekayaan alam yang sangat banyak dan membuat iri Negara-negara lain.</p>

</div>

<div class="city">

<h2>Jakarta</h2>

<p>bu kota Republik Indonesia, Jakarta adalah kota metropolitan yang luas dan besar dengan populasi lebih dari 9 juta jiwa. Pada siang hari jumlah ini bertambah 2 juta ketika para Komuter datang ke Jakarta untuk bekerja dan pulang lagi ke asal mereka pada malam hari.

Terletak di pantai utara bagian barat pulau Jawa, provinsi Jakarta telah berkembang pesat selama bertahun-tahun, menyerap banyak desa.</p>

</div>

<div class="city">

<h2>Pekanbaru</h2>

<p>Pekanbaru adalah ibu kota provinsi Riau...</p>

<p><img id='imgPKU' width=246 height=180 src='pku1.jpg'></p>

<button type="button" onclick="light(1)"> 1</button>

<button type="button" onclick="light(2)"> 2 </button>

<button type="button" onclick="light(3)"> 3</button>

<button type="button" onclick="light(4)"> 4 </button>

<button type="button" onclick="light(5)"> 5 </button>

</div>

</body>

</html>

HTML VI - Layout Website

Laihan membuat halaman website:

<!DOCTYPE html>

<html>

<head>

<title>Latihan 9</title>

<style>

table, th, td {

border: 1px solid black;

padding:5px;

background-color:red;

}

</style>

</head>

<body>

<h2 align=center>Latihan 9</h2>

<table width=80% align=center border=1px>

<tr style='background-color:red;'>

<td align=center><img src="pku.jpg" alt="Gambar" style="width:100px;height:100px"></td>

<td colspan=3>

<font size=24 style='color:yellow;'>Toko Buku Budi Antara</font>

</td>

</tr>

<tr >

<td colspan=4 style='background-color:black;'>

<div align=center><font size=24 style='color:yellow; text-align:center;' >Home | Produk | Gallery | Buku</font></div>

</td>

</tr>

<tr>

<td rowspan=4 width=250 style='background-color:black;'><img src="pku.jpg" alt="Gambar" style="width:200px;height:400px"></td>

<td style='background-color:yellow;text-align:center;'><img src="pku.jpg" alt="Gambar" style="width:100px;height:100px"></td>

<td style='background-color:yellow;'>Buku PHP</td>

<td style='background-color:yellow;'>Rp. 100.000</td>

</tr>

<tr>

<td style='background-color:yellow;text-align:center;'><img src="pku.jpg" alt="Gambar" style="width:100px;height:100px"></td>

<td style='background-color:yellow;'>Buku MYSQL</td>

<td style='background-color:yellow;'>Rp. 100.000</td>

</tr>

<tr>

<td style='background-color:yellow;text-align:center;'><img src="pku.jpg" alt="Gambar" style="width:100px;height:100px"></td>

<td style='background-color:yellow;'>Buku HTML</td>

<td style='background-color:yellow;'>Rp. 100.000</td>

</tr>

<tr>

<td style='background-color:yellow;text-align:center;'><img src="pku.jpg" alt="Gambar" style="width:100px;height:100px"></td>

<td style='background-color:yellow;'>Buku ASP</td>

<td style='background-color:yellow;'>Rp. 100.000</td>

</tr>

<tr>

<td colspan=4 align=center>Copyright&copy;budi.com</td>

</tr>

</table>

</body>

</html>

HTML V - Styles CSS

HTML - Styles adalah cara menampilkan informasi menggunakan HTML dengan memberikan sentuhan desain yang menarik.

Source code dari tampilan diatas adalah:

<!DOCTYPE html>

<html>

<head>

<style>

.pekanbaru {

background-color:gray;

color:white;

margin:20px;

padding:20px;

width:500px;

}

.pekanbaru p{

text-align:justify;

}

</style>

</head>

<body>

<div class="pekanbaru">

<h2>Kota Pekanbaru</h2>

<table width=500px>

<tr>

<td width=200px>

<img src="pku.jpg" alt="Mountain View" style="width:250px;height:200px">

</td>

<td>

<p>Nama Pekanbaru dahulunya dikenal dengan nama "Senapelan" yang pada saat itu dipimpin oleh seorang Kepala Suku disebut Batin. Daerah yang mulanya sebagai ladang, lambat laun menjadi perkampungan. Kemudian perkampungan Senapelan berpindah ke tempat pemukiman baru yang kemudian disebut Dusun Payung Sekaki yang terletak di tepi muara sungai Siak.</p>

</td>

</tr>

</table>

</div> 

</body>

</html>

HTML IV - Tables

HTML - table adalah dimaksukan untuk menampilkan data / informasi dalam format tabel.
berikut adalah contoh :

<html>

<head>

<title>Latihan 03 - Table</title>

</head>

<body>

<font face=arial size=6 color=blue>

<h3>Latihan 03 - Table</h3>

</font>

<hr>

<h2>Jadwal Mata Kuliah menggunakan Tabel:</h2>

<table border=1 width=400px>

<thead>

<tr>

<th width=50px>No</th>

<th width=100px>Hari</th>

<th width=200px>Mata Kuliah</th>

</tr>

</thead>

<tbody>

<tr>

<td align=center>1.</td>

<td align=center>Kamis</td>

<td align=center>HTML</td>

</tr>

<tr>

<td align=center>2.</td>

<td align=center>Minggu</td>

<td align=center>PHP & MySQL</td>

</tr>

<tr>

<td align=center>3.</td>

<td align=center>Selasa</td>

<td align=center>ASP</td>

</tr>

</tbody>

</table>

</body>

</html>

HTML II - Atribut & Tag

Struktur HTML :

<!DOCTYPE html>
<html>
<head>
<title>HTML Pendahuluan</title>
</head> 
<body>
<!-- tag <h1> digunakan untuk menampilkan judul header -->
<h1>HTML - Pendahuluan</h1>
<hr>
<!-- <hr> digunakan untuk menampilkan garis horizontal -->

<!-- <p> digunakan untuk menampilkan paragraph -->
<p>Isi Paragraph pertama.</p><br>
<!--tag <br> digunakan untuk pindah baris -->
<p>Isi Paragraph kedua.</p>
<p>Isi Paragraph ketiga.</p>
</body>
</html>

Beberapa HTML Tag Reference yaitu :

• <html>
• Menunjukkan html document
• <head>
• Menunjukkan bagian header
• <body>
• Menunjukkan bagian Body
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• tag untuk header mulai dari yang besar sampai yang kecil
• <hr>      
• tag untuk membuat garis horizontal
• <b>
• tag untuk menebalkan huruf pada kata atau kalimat
• <u>
• tag untuk memberikan garis bawah 
• <i>
• tag untuk memberikan garis miring

Beberapa atribut HTML antara lain:

• alt 
• disabled
• href
• id
• src
• style
• title
• value

Dasar Skrip Tag HTML

<html>
<head>
<title>Judul</title>
</head>
<body>
Selamat Mencoba HTML
</body>
</html>