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:

tag dasar HTML


No
Tag HTML 4.0
fungsi
1
<!--...-->
Mendefinisikan komentar
2
<!DOCTYPE>
Mendefinisikan jenis dokumen
3
<a>
Mendefinisikan anchor
4
<abbr>
Mendefinisikan singkatan
5
<acronym>
Mendefinisikan singkatan
6
<address>
Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
7
<applet>
Mendefinisikan sebuah tertanam applet
8
<area />
Mendefinisikan area dalam peta-image
9
<b>
Mendefinisikan teks tebal
10
<base />
Mendefinisikan sebuah alamat default atau target standar untuk semua link pada halaman
11
<basefont />
Mendefinisikan default font, warna, atau ukuran untuk teks dalam halaman
12
<bdo>
Mendefinisikan arah teks
13
<big>
Mendefinisikan teks besar
14
<blockquote>
Mendefinisikan sebuah kutipan panjang
15
<body>
Mendefinisikan dokumen tubuh
16
<br />
Mendefinisikan sebuah line break single
17
<button>
Mendefinisikan tombol push
18
<caption>
Mendefinisikan sebuah judul tabel
19
<center>
Mendefinisikan teks berpusat
20
<cite>
Mendefinisikan kutipan
21
<code>
Mendefinisikan kode teks komputer
22
<col />
Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam tabel
23
<colgroup>
Mendefinisikan kelompok kolom dalam tabel untuk pemformatan
24
<dd>
Mendefinisikan deskripsi istilah dalam daftar definisi
25
<del>
Mendefinisikan teks yang dihapus
26
<dfn>
Mendefinisikan sebuah istilah definisi
27
<dir>
Mendefinisikan sebuah daftar direktori
28
<div>
Mendefinisikan sebuah bagian dalam dokumen
29
<dl>
Mendefinisikan sebuah daftar definisi
30
<dt>
Mendefinisikan sebuah istilah (item) dalam daftar definisi
31
<em>
Mendefinisikan teks menekankan
32
<fieldset>
Mendefinisikan sebuah perbatasan sekitar elemen dalam bentuk
33
<font>
Mendefinisikan font, warna, dan ukuran untuk teks
34
<form>
Mendefinisikan HTML formulir untuk input pengguna
35
<frame />
Mendefinisikan jendela (bingkai) dalam frameset
36
<frameset>
Mendefinisikan suatu set frame
37
<h1> to <h6>
Mendefinisikan HTML pos
38
<head>
Mendefinisikan informasi tentang dokumen
39
<hr />
Mendefinisikan garis horizontal
40
<html>
Mendefinisikan HTML dokumen
41
<i>
Mendefinisikan teks miring
42
<iframe>
Mendefinisikan frame inline
43
<img />
Mendefinisikan gambar
44
<input />
Mendefinisikan input kontrol
45
<ins>
Mendefinisikan teks yang disisipkan
46
<isindex>
Mendefinisikan sebuah indeks yang dapat dicari terkait dengan dokumen
47
<kbd>
Mendefinisikan teks keyboard
48
<label>
Mendefinisikan label untuk suatu elemen input
49
<legend>
Mendefinisikan keterangan untuk elemen fieldset
50
<li>
Mendefinisikan item daftar
51
<link />
Mendefinisikan hubungan antara dokumen dan sumber eksternal
52
<map>
Mendefinisikan gambar-map
53
<menu>
Mendefinisikan daftar menu
54
<meta />
Mendefinisikan metadata tentang dokumen HTML
55
<noframes>
Mendefinisikan kandungan alternatif untuk pengguna yang tidak mendukung frame
56
<noscript>
Mendefinisikan kandungan alternatif untuk pengguna yang tidak mendukung skrip-skrip sisi klien
57
<object>
Mendefinisikan sebuah objek tertanam
58
<ol>
Mendefinisikan ordered list
59
<optgroup>
Mendefinisikan kelompok opsi terkait dalam daftar pilih
60
<option>
Mendefinisikan pilihan dalam daftar pilih
61
<p>
Mendefinisikan paragraf
62
<param />
Mendefinisikan parameter untuk objek
63
<pre>
Mendefinisikan teks terformat
64
<q>
Mendefinisikan kutipan pendek
65
<s>
Mendefinisikan strikethrough teks
66
<samp>
Mendefinisikan sampel kode komputer
67
<script>
Mendefinisikan sebuah script sisi klien
68
<select>
Mendefinisikan daftar pilih (daftar drop-down)
69
<small>
Mendefinisikan teks kecil
70
<span>
Mendefinisikan sebuah bagian dalam dokumen
71
<strike>
Mendefinisikan strikethrough teks
72
<strong>
Mendefinisikan teks yang kuat
73
<style>
Mendefinisikan gaya informasi untuk dokumen
74
<sub>
Mendefinisikan teks subscript
75
<sup>
Mendefinisikan teks superscripted
76
<table>
Mendefinisikan tabel
77
<tbody>
Groups isi tubuh dalam tabel
78
<td>
Mendefinisikan sebuah sel dalam tabel
79
<textarea>
Mendefinisikan teks multi-line input kontrol
80
<tfoot>
Groups isi footer dalam sebuah tabel
81
<th>
Mendefinisikan sebuah sel header dalam sebuah tabel
82
<thead>
Groups isi header dalam sebuah tabel
83
<title>
Mendefinisikan judul dokumen
84
<tr>
Mendefinisikan sebuah baris dalam tabel
85
<tt>
Mendefinisikan teks teletype
86
<u>
Mendefinisikan teks bergaris bawah
87
<ul>
Mendefinisikan unordered list
88
<var>
Mendefinisikan bagian variabel teks
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)