Tugas HTML 3 dan 4
1. HTML IMAGES
Dalam HTML kita dapat menampilkan gambar pada halaman web kita. format penulisannya adalah:
<img src="Lokasi Gambar/.format" alt="alternatif" width="ukuran lebar px" height="ukuran panjang px">
contoh : <img src="PNJ.png" width="230" height="230">
--------------------------------------------------------------------------------------------------------------------------
2. HTML TABLES
Dalam html kita dapat membuat table pada halaman web kita. format penulisan untuk table adalah:
<table border="1">Dalam html kita dapat membuat table pada halaman web kita. format penulisan untuk table adalah:
<tr>
<th>Gunung</th>
<th>Pantai</th>
<th>Budaya</th>
</tr>
<tr>
<td>Mahameru</td>
<td>Kuta Bali</td>
<td>Baduy</td>
</tr>
<tr>
<td>Slamet</td>
<td>Seribu</td>
<td>Dayak</td>
</tr>
<tr>
<td>Ciremai</td>
<td>Sawarna</td>
<td>Anak dalam</td>
</tr>
</table>
- <table border="1"> = Untuk memberi border dengan ukuran 1px
- <tr> = Menunjukan baris tabel.
- <th> = Menunjukan header tabel.
- <td> = Menunjukan isi / data tabel.
--------------------------------------------------------------------------------------------------------------------------
3. HTML LIST
Pada html dapat membuat list, list merupakan sebuah cara untuk membuat point-point layaknya bullets and numbering pada MS.word. format penulisannya :
1. unordered list, yang seperti bullets
Pada html dapat membuat list, list merupakan sebuah cara untuk membuat point-point layaknya bullets and numbering pada MS.word. format penulisannya :
1. unordered list, yang seperti bullets
<ul>
<li>Mahameru</li>
<li>Slamet</li>
<li>Ciremai</li>
</ul>
2. orderedlist, berbentuk angka berurutan
<ol>
<li>Mahameru</li>
<li>Slamet</li>
<li>Ciremai</li>
</ol>
<ol>
<li>Mahameru</li>
<li>Slamet</li>
<li>Ciremai</li>
</ol>
3. definition list, untuk mendefinisikan sesuatu
<dl>
<dt>Gunung</dt>
<dd>- Mahameru</dd>
<dd>- Ciremai</dd>
<dd>- Slamet</dd>
<dt>Pantai</dt>
<dd>- Kuta</dd>
<dd>- Sanur</dd>
<dd>- Swarna</dd>
<dt>Budaya</dt>
<dd>- Baduy</dd>
<dd>- Dayak</dd>
<dd>- Anak Dalam</dd>
</dl>
<dl>
<dt>Gunung</dt>
<dd>- Mahameru</dd>
<dd>- Ciremai</dd>
<dd>- Slamet</dd>
<dt>Pantai</dt>
<dd>- Kuta</dd>
<dd>- Sanur</dd>
<dd>- Swarna</dd>
<dt>Budaya</dt>
<dd>- Baduy</dd>
<dd>- Dayak</dd>
<dd>- Anak Dalam</dd>
</dl>
--------------------------------------------------------------------------------------------------------------------------
4. <div> dan <span>
<div> digunakan untuk membuat grup untuk dokumen html. jadi apabila diberikan <div> maka akan ada jeda sebelum dan sesudah dokumennya.
contoh :
<div> <h1>saya sehat</h1>
<p> rajin berolahraga</p>
</div>
<span> digunakan untuk container pada text.
contoh:
<span> <h1>saya sehat</h1>
<p> rajin berolahraga</p>
</span>
5. HTML LAYOUT
layout digunakan untuk membuat atau mendesain halaman web agar dapat dilihat oleh pengunjung. pembuatan layout digunakan untuk mengelompokan isi pada web agar tersusun dengan baik. Layout dapat dibuat dengan <div> atau tabel.
1. Layout menggunakan div:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div
id="content"
style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
<div> digunakan untuk membuat grup untuk dokumen html. jadi apabila diberikan <div> maka akan ada jeda sebelum dan sesudah dokumennya.
contoh :
<div> <h1>saya sehat</h1>
<p> rajin berolahraga</p>
</div>
<span> digunakan untuk container pada text.
contoh:
<span> <h1>saya sehat</h1>
<p> rajin berolahraga</p>
</span>
5. HTML LAYOUT
layout digunakan untuk membuat atau mendesain halaman web agar dapat dilihat oleh pengunjung. pembuatan layout digunakan untuk mengelompokan isi pada web agar tersusun dengan baik. Layout dapat dibuat dengan <div> atau tabel.
1. Layout menggunakan div:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div
id="content"
style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
2. Layout menggunakan tabel:
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
5. FORM
form pada html digunakan untuk menginput data dari keyboard oleh pengunjung web.
contohnya:
1. Untuk menginput Username
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
</form>
2.Untuk menginput Password
<form>
Password: <input type="password" name="pwd">
</form>
3. Untuk menginput nama.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
4. Radio ( berbentuk lingkaran yang dapat diklik untuk memilih sesuatu)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
5. Checkbox untuk memilih atau mengaktifkan sesuatu
<form>
<input type="checkbox" name="vehicle" value="Bike">Indonesia<br>
<input type="checkbox" name="vehicle" value="Car">Asing
</form>
6. Submit, tombol untuk mengirim data yang sudah diinout pada form
<form>
<input type="submit" value="Submit">
</form>
contoh apabila script diatas digabungkan menjadi satu dokumen html adalah:
form pada html digunakan untuk menginput data dari keyboard oleh pengunjung web.
contohnya:
1. Untuk menginput Username
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
</form>
2.Untuk menginput Password
<form>
Password: <input type="password" name="pwd">
</form>
3. Untuk menginput nama.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
4. Radio ( berbentuk lingkaran yang dapat diklik untuk memilih sesuatu)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
5. Checkbox untuk memilih atau mengaktifkan sesuatu
<form>
<input type="checkbox" name="vehicle" value="Bike">Indonesia<br>
<input type="checkbox" name="vehicle" value="Car">Asing
</form>
6. Submit, tombol untuk mengirim data yang sudah diinout pada form
<form>
<input type="submit" value="Submit">
</form>
contoh apabila script diatas digabungkan menjadi satu dokumen html adalah:
--------------------------------------------------------------------------------------------------------------------------
7. IFRAME
Digunakan untuk memasukan halaman web lain didalam halaman web tertentu.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
setelah src dimasukannya link ke halaman web yang dituju. dengan penambahan width dan height maka kita dapat mengatur ukuran halaman web yang kita masukan ke halaman web tertentu.
Digunakan untuk memasukan halaman web lain didalam halaman web tertentu.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
setelah src dimasukannya link ke halaman web yang dituju. dengan penambahan width dan height maka kita dapat mengatur ukuran halaman web yang kita masukan ke halaman web tertentu.
--------------------------------------------------------------------------------------------------------------------------
8.Sekarang semua jenis tag html diatas kita gabungkan menjadi satu kesatuan dalam satu layout.
<!DOCTYPE html>
<html>
<body>
<table width="1500" border="0">
<tr>
<td colspan="2" style="background-color:#0000FF;">
<h1>COVENTURE</h1>
</td>
</tr>
<tr>
<td style="background-color:#00FFFF;width:100px;text-align:top;">
<b>BERANDA</b><br>
PEMBAYARAN<br>
AKUN SENDIRI<br>
ABOUT
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
<b><big><p>Pilihan Open Trip</p></big></b><table border="1">
<br>
<tr>
<th>Gunung</th>
<th>Pantai</th>
<th>Adat Budaya</th>
</tr>
<tr>
<td>Gunung Merbabu</td>
<td>Pantai Losari</td>
<td>Suku Baduy</td>
</tr>
<tr>
<td>Gunung Mahameru</td>
<td>Pantai Kuta</td>
<td>Suku Anak Dalam </td>
</tr>
<tr>
<td>Gunung Ciremai</td>
<td>Pantai Gealap</td>
<td>Suku Kaki Bau </td>
</tr>
</table>
<ol>
<dl>
<li><dt>Gunung Merbabu</dt></li>
<dd>- Gunung Merbabu by Asta Deca</dd>
<dd>- Gunung Merbabu by Himpala</dd>
<dd>- Gunung Merbabu by Mapala UI</dd>
<li><dt>Gunung Mahameru</dt></li>
<dd>- Gunung Mahameru by Kappa</dd>
<dd>- Gunung Mahameru by MewTech</dd>
<dd>- Gunung Mahameru by Blackstars</dd>
</dl>
</ol>
<form>
Nama Depan : <input type="text" name="firstname">
</form>
<br>
<form>
Nama Belakang : <input type="text" name="lastname">
</form>
<br>
<form>
Password : <input type="password" name="pwd">
</form>
<br>
<form>
<input type="radio" name="sex" value="male">Laki Laki
</form>
<br>
<form>
<input type="radio" name="sex" value="female">Perempuan
</form>
<br>
<form>
<input type="checkbox" name="vehicle" value="Bike">Orang Kaya
</form>
<br>
<form>
<input type="checkbox" name="vehicle" value="Car">Orang Miskin
</form>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © Coventure</td>
</tr>
</table>
</body>
</html>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.imannurachman-bmpnjbatch2.blogspot.co.id/" target="iframe_a">
Iman's Blog</a></p>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
![](http://pinterest.com/pin/create/button/?url=https://imannurachman-bmpnjbatch2.blogspot.com/2016/09/tugas-html-3.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR3cMmr33CD_3cRupPEN9EhmojUEl1ZF2l4vVCJowGq66gqeSlif9ZViLONmKKB0EO9OVpgGnHaWNW6wCKl1LySFutiSaFY7POXiqbuibGB_TenmXLmkyLjbSrOn68x_b00s4V8D6TVtM/s72-c/introhtml_thumnail_1x1.png&description= 1. HTML IMAGES Dalam HTML kita dapat menampilkan gambar pada halaman web kita. format penulisannya adalah: <img src="Lok...){kind=link}
0 komentar:
Posting Komentar