Kamis, 21 April 2011

Belajar Buat Album

pada latihan ini kita akan membuat sebuah album foto, yang dimana nanti ketika kita klik pada foto akan nge-link ke halaman baru (gambar1.htm dan seterusnya) dengan catatan halaman tersebut telah kita buat sebelumnya.

Tag HTMLnya untuk membuat album :
<html>

<body>
<h1 align="center">
<p><font size="6" color="blue">Ini Album Foto</font></p><br>
<a href="gambar1.html"> <img src="samurai x.jpg" width="200" height="200"></a>
<a href="gambar2.html"> <img src="AlienFace.jpg" width="200" height="200"></a>
<a href="gambar3.html"> <img src="wlpr 1.jpg" width="200" height="200"></a>
<a href="gambar4.html"> <img src="kurnia.jpg" width="200" height="200"></a><br>
</body>
</html>

Tampilan tag yang ada diatas :
Diposting oleh di Tidak ada komentar:

Membuat List

Tag <li> digunakan untuk menandai suatu item adri daftar. Kelompok item harus diapit oleh tag <ul>/<ul> dalam daftar bertingkat, untuk menomori daftar dengan no urut (1,2,3) harus diapit dengan tag <ol>/<ol>
Misal :

<html>
<body>
<p>nama mahasiswa sif 6b</p>
<ol type="disc">
<li>kurnia</li>
<li>doni</li>
<li>riski</li>
<ul type="circle">
<li>yunzira</li>
<li>gunawan</li>
</ul>
<li>andi</li>
</ol>
<p>nama mahasiswi sif 6b</p>
<ul type="square">
<li>defi</li>
<li>widi</li>
<li>aini</li>
<li>juni</li>
<ul>
</body>
</html>

Tampilan dari tag diatas :

Diposting oleh di Tidak ada komentar:

Tabel

Menampilkan data dalam bentuk tabel. Tabel didefinisikan dengan cara menyatakan baris dank olomnya. 
Tag untuk penanda baris adalah <tr></tr> dan penanda kolom adalah<td></td>. 
Tag <th></th> dapat digunakan untuk mendefinisikan sel header tabel.


 Elemen-elemen pada tabel:



Elemen
Penjelasan
<table> … </table>
Mendefinisikan tabel HTML
<th> … </th>
Mendefinisikan sel header
<caption> … </caption>
Menuliskan judul tabel
<tr> … </tr>
Mendefinisikan baris tabel
<td> … </td>
Mendefinisikan sel data
Atribut tabel



Elemen
Penjelasan
align = [left|center|right]
Menentukan posisi horizontal
valign = [top|middle|bottom]
Menentukan posisi vertikal

colspan = n
Menyatukan sel n kolom

rowspan = n
Menyatukan sel n baris

misal :
<html>
<head>
<title>Table 1</title>
</head>
<body>
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
</body>
</html>

maka tampilan dari tag diatas :










misal :

<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td>Header Kiri</td>
<td align="center" width="50%">Header Tengah</td>
<td align="right">Header Kanan</td>
</tr>
<tr>
<td valign="top"rowspan="2">Menu Kiri</td>
<td align="center" colspan="2" height="200">Bagian Isi</td>
</tr>
<tr>
<td align="center">Footer Tengah</td>
<td align="right">Footer Kanan</td>
</tr>
</table>
</body>
</html>
Tampilan dari tag diatas :





Diposting oleh di Tidak ada komentar:

Membuat Form

Tag HTML Nama :
<html>
<body bgcolor="yellow">
<form>
<tr>
<td>Nama Depan :</td>
<input type="text" Nama="firstname"><br>
<br>
<td>Nama Belakang :</td>
<input type="text" Nama="lastname">
</tr>
</body>
</html>

Tampilan pada Tag Diatas :












Tag HTML untuk menceklis data :
<html>
<body bgcolor="yellow">
Nama Buah Favorit :
<form>
<input type="checkbox"name="Apel">apel
<br>
<input type="checkbox"name="Pisang">pisang
</form>
</body>
</html>

Tampilan dari Tag diatas :










Tag HTML untuk memilih dengan cara membulatkan pilihan :
<html>
<body>
<form>
<input type="radio" checked name="sex">Laki-Laki
<br>
<input type="radio" checked name="sex">Perempuan
</form>
</body>
</html>
Tampilan dari tag diatas :










Tag HTML untuk memilih dengan pilihan yang tersedia 

<html>
<body bgcolor="pink">
Nama Hewan :
<form>
<select name="Animal">
<option values="">
<option values="Kucing">Kucing
<option values="Singa">Singa
<option values="Anjing">Anjing
<option values="Kelinci">Kelinci
</select>
</form>
</body>
</html>

Tampilan Tag diatas :
Diposting oleh di Tidak ada komentar:

Rabu, 20 April 2011

Quis Qta nii (Buat Tabel)

Quis 1
Tag HTMLnya :
<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td align="center" colspan="2"> 1</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" valign="top">2</td>
<td align="center">3</td>
<td align="center"rowspan="3">7</td>
</tr>
<tr>
<td align="center"colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top">5</td>
<td align="center">6</td>
</tr>
</table>
</body>
</html>

Quis 2
Tag HTMLnya :
<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td align="center" colspan="4"> 1</td>
</tr>
<tr>
<td align="center" valign="top">2</td>
<td align="center" colspan="2">3</td>
<td align="center" rowspan="3" valign="top">8</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" colspan="3">7</td>
</tr>
</table>
</body>
</html>

Quis 3
Tag HTMLnya :
<html>
<header>
<title>Tabel 3</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" colspan="3">7</td>
</tr>
</table>
</body>
</html>

Quis 4
Tag HTMLnya :
<html>
<header>
<title>Tabel 4</title>
</header>
<body>
<table border="5" width="500">
<tr>
<td align="center" colspan="2">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center" rowspan="2">4</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
<tr>
<td align="center" colspan="2">5</td>
</tr>
</table>
</body>
</html>

Keterangan :
Pada Quis ini saya tidak menampilkan hasilnya, karena saya tidak mau aja dipublikasikan, tapi kalau teman ini tau juga hasil tampilannya bisa langsung konfirmasi ke saya. ^_^
Diposting oleh di Tidak ada komentar:

Mengatur Teks HTML

 Mengatur Teks Secara Fisik

HTML menggunakan sejumlah tag yang berguna untuk mengatur bentuk teks secara fisik. Dengan tag-tag ini antara lain kawan bisa membuat teks yang tebal, miring, diberi garis bawah, dan lain-lain.
Tag-tagnya adalah sbb :

<b> .. </b> : teks ditampilkan dalam keadaan ditebalkan
<i> .. </i> : teks ditampilkan dalam keadaan miring
<u> .. </u> : teks ditampilkan dengan diberi garis bawah
<big> .. </big> : teks ditampilkan dalam ukuran lebih besar dari ukuran normal
<small> .. </small> : teks ditampilkan dengan ukuran lebih kecil dari ukuran normal
<sub> .. </sub> : teks ditampilkan sebagai subskrip
<sup> .. </sup> : teks ditampilkan sebagi superskrip
<tt> .. </tt> : teks ditampilkan dalam bentuk ketikan seperti mesin ketik
Contoh penggunaan tag-tag diatas adalah sbb :

<html>
<head>
<title> Memformat Secara Fisik </title>
</head>
<body>
Teks dengan ukuran NORMAL<br>
<small> Teks dengan tag SMALL </small><br>
<big> Teks dengan tag BIG </big><br>
<hr>
Teks Normal<br>
<b> Teks Tebal </b><br>
<i> Teks Miring </i><br>
<u> Teks Garis Bawah </u><br>
Normal<sub>Teks dengan tag SUB</sub><br>
Normal<sup>Teks dengan tag SUP</sup><br>
<tt> Teks seperti ketikan mesin ketik </tt><br>
</body>
</html>

Kemudian simpan file yang kawan ketikkan tadi di folder Latihan HTML dengan nama latihan6.htm. Setelah file tadi disimpan, buka folder yang kawanku buat tadi kemudian open file tsb di browser yang kawan gunakan (ex: Mozilla Firefox).
Diposting oleh di Tidak ada komentar:

skema Proses kerja web




USER/pengguna yang akan mengakses suatu website berupa URL melalui WEB BROWSER (yaitu media untuk menuju URL yang diakses), kemudian WEB BROWSER tersebut mengirimkan permintaan/ request berupa HTTP REQUEST kepada WEB SERVER melalui layer-layer TCP/IP, kemudian WEB SERVER memberikan WEB FILES yang di-request jika ada.
WEB FILES yang telah diberikan tadi tidak langsung ditampilkan/di-display begitusaja, namun WEB SERVER memberikan respon kembali ke WEB BROWSER melalui HTTP RESPONSE yang juga melalui layer-layer TCP/IP, yang kemudian baru di terima oleh WEB BROWSER, dan kemudian dikirimkan kepada USER berupa DISPLAY.
-misalkan saya adalah seorang USER dan ingin membuka sebuah situs ,dalam hal ini misalnya metroNews.com
dari sebuah komputer yang berda d sebuah warnet,URL atau REQUEST yang saya ketik melalui aplikasi bROWSER yang kali ini dipakai adalah Mozilla firefox 3.0,maka URL/alamat yang saya tadi ingin masukkakn di klik di kolom (www)atau world wide web yang merupakan sebuah arsitektur krja untuk memasuki dokumen yang saling berhubungan.


setelah URL atau nama situs itu dimasukkan di mesin pencari(mozilla) maka akan secara otomatis "jika komputer terkoneksi"DATA/URL akan terkirim dan akan memasuli wlayah kerja TCP/IP
si sini data akan diperiksa sesuai alamat da permintaan nya..dan server akan mengambil HEader/judul sebagai patokan pencarian sehingga jelas dan tidak rumit setelah itu bODY akan di sesuaikan dan server akan memberikan data yang minta melalui alamat ip asal request tersebut jika data ada dan tidak valid ke client server sebelum akhirnya kembali lagi ke user.


Sebenar nya cara kerja web itu tidak sesimpel di atas karena cara kerja web berdasarkan tugas nya seperti untuk memproses dan menyimpan data di sisi client.
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)