Dasar -Dasar HTML
yang gue pelajari kali ini adalah dasar2 html, tapi kalau teman2 ingin tau dasar2 nya udah gue taruh di bawah ini:
HTML merupakan bagian dasar dalam pembuatan web. dimana html akan di daahului dengan tag <html>dan diakhiri dengan tag </html>
Contoh:
<html>
</html>
Header(head)
befungsi sebagai tanda pengenal pada halaman web yang akan kita buat.dimana tagnya diawali dengan<head> dan diakhiri dengan</head>
contoh:
<html>
<head>
</head>
</html>
Body
berfungsi sebagai bagian untuk menulis text yang ingin ditampilkan di halamanweb.diawali dengan tag <body> dan diakhiri dengan</body>
contoh:
<html>
<head>
</head>
<body>
</body>
</html>
Untuk menamai judul pada halaman web menggunakan tag <tittle>diakhiri</tittle>
Heading<h1>….</h1>Sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokument HTML
Contoh:
<html>
<head>
<title> heading</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
<html>
Paragraf <p>….</p>
untuk membuat paragraf dalam HTML . untuk menentukan rata kiri, kanan, dan tengahgunakan Align=”rata apa“.
contoh:
<html>
<head>
<title>paragraf</title>
</head>
<p>dalam kehiduapan</p>
</body>
<html>
Blockquote <blockquote>….</blokquote>
untuk menulis kutipan teks. dengan menggunakan ini kita akan mendapati tampilan agak menjorok kedalam
contoh:
<html>
<head>
<title>blockquote</title>
</head>
<body>
<h…>misal<h2>aspek dalam</h2>
<blockquote>dalam
kehidupan…..</blockquote>
</body>
</html>
Preformated Text<pre>…</pre>
untuk meanmpilkan text seperti yang anda ketikkan dalam document HTML
contoh:
<html>
<head>
<title>preformated</title>
</head>
<body>
<pre>dalam kehidupan….</pre>
</body>
</html>
Begin Row<br>
Menulis text pada baris beikutnya.dimana dalam text ini memberikan ruang kosong di bawahnya.
contoh:
<html>
<head>
<title>begin row</title>
</head>
</body>
<p>dalam kehidupan….
<br>aspek – aspek penting…..
<br>dibawa ke negeri……
<br>dalam hasil dari rancangan
</p>
</body>
</html>
Ukuran Font<font size=”…”….</font>
Untuk mengatur besarnya huruf HTML .
<html>
<head>
<title>font size</title>
</head>
<body>
<font Size=”1″>ukuran font 1</font>
<font size=”2″>ukuran font 2</font>
<font size=”3″>ukuran font 3</font>
<font size=”4″>ukuran font 4</font>
<font size=”5″>ukuran font 5</font>
<font size=”6″>ukuran font 6</font>
<font size=”7″>ukuran font 7</font>
<font size=”8″>ukuran font 8</font>
<font size=”9″>ukuran font 9</font>
<font size=”10″>ukuran font 10</font>
<font size=”11″>ukuran font 11</font>
<font size=”12″>ukuran font 12</font>
<font size=”13″>ukuran font 13</font>
<font size=”14″>ukuran font 14</font>
<font size=”15″>ukuran font 15</font>
<font size=”16″>ukuran font 16</font>
</body>
Jenis Font<font face=”….”>…</font>
untuk mengubah jenis font/tulisan.
contoh:
<html>
<head>
<title>font face</title>
</head>
<body>
<font size=”6″>
<p><font face>=”arial”>arsenal, contoh font
arial</font></p>
<p><font face>=”verdana”>arsenal, contoh font verdana</font></p>
<p><font face>=”tahoma”>arsenal, contoh font tahoma</font></p>
<p><font face>=”monotype corsiva”>arsenal, contoh font tahoma</font></p>
</font>
</body>
</html>
Warna font<font color=”….”>…..</font>
untuk memberi warna pada huruf.
contoh:
<html>
<head>
<title>warna font</title>
</head>
<body>
<font size=”6″>
<p><font color=”red”> arsenal</font></p>
<p><font color=”green”> arsenal</font></p>
<p><font color=”yellow”> arsenal</font></p>
</font>
</body>
</html>
Link <a>…</a>
perintah untuk link.
contoh:
<html>
<head>
<title>link</title>
</head>
<body>
<a name=”lengkap”>pemain milan</a>
<blockquote>
<p>dida, <a href=”#dida”>info selengkapnya</a>
<p>maldini
<p>sheva
<p>renondo
<p>rivaldo
<p>
<a href=”../ms.front/is.htm”>info selanjutnya</a>
<blockqoute>
<a name=”dida”>klik aja !!!!!</a>
<blockqoute>
<p>kiper utama timnas brazil
</blockquote>
<a href=”#lengkap”>up</a>
</body>
</html>
orderlist<ol>…</ol>
untuk memberikan daftar dimana tiap bagian
memiliki nomor secara berurut.sedangkan
untuk tiap bagiannya digunakan tag<li>
type=1;daftar berurut dengan 1,2,3….
type=I;daftar berurut dengan I,II,III,…
type=a;daftar berurut dengan a,b,c,….
contoh:
<html>
<head>
<title>orderlist</title>
</head>
<body>
urutan mobil berdasarkan peminat:
<ol>
<li=a>mercedest benz
<li=b>bmw
<li=c>honda
<li=e>hyundai
</ol>
</body>
</html>
Unoderlist<ul>…</ul>
untuk memberikan tanda dengan bullet yang
merupakan default dari unodered list.
contoh:
<html>
<head>
<title>unodered list</title>
</head>
<body>
urutan mobil berdasarkan keinginan
<ul>
<li>bajaj
<li>kereta
<li>avanza
<li>kijang
</body>
</html>
Grafik dan Web<img>
untuk memberikan gambar dan grafik
border: memberikan suatu batas atau border pada gambar defaultnya=”0″
Height, Weight: menentukan tinggi dan lembar gambar dalam pixel
Align : mengatur rata gambar sesuai yang di inginkan.
contoh:
<html>
<head>
<title>image</title>
</head>
<body>
<img border=”0″ src=”images/5.jpg” width=”390″ height=”267″>
<p align=”center”>
</p>
</body>
</html>
Table <table>
digunakan untuk menampilkan informasi dalam bentuk ringkas.tagnya menggunakan <table>diakhiri</table>
<caption>…..</caption>digunakan untuk membentuk judul. dimana judul akan terletak di bawah atau di luar table.
<th>…</th>untuk meletakkan judul table di bagian paling atas atau paling kiri dari atas table.
<td>..</td>digunakan sebagai tempat menulis data atau informasi dalam table
contoh:
<html>
<head>
<title>table</title>
</head>
<body>
<table>
<caption>seputar liga italia</caption>
<tr>
<th width=”100″>nama klub</th>
<th width=”226″>berita</th>
</tr>
<tr>
<td width=”100″>ac milan</td>
<td width=”226″>ac milan mengalahkan
jerman</td>
<tr>
<td width=”100″>jerman </td>
<td width=”226″>jerman ke walahan</td>
</tr>
<tr>
<td width=”100″>belanda</td>
<td width=”100″>belanda menang</td>
</tr>
</body>
</html>
Table CELLSPACING dan CELLPADDING
atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua bauh cells. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar batas/ border dengan isi teks didalam cell tersebut.
contoh:
<html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width=”85%” border=”3″ cellpadding=”5″>
<tr>
<td width=”43%” rowspan=”2″>baris 1, kolom 1 <p>baris 2, kolom 1</td>
<td width=”57%”>baris 1, kolom 1</td>
</tr>
<tr>
<td width=”57%”>baris 2, kolom 1</td>
</tr>
<tr>
<td width=”100%” colspan=”2″>baris 3, kolom 1<p> baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
Table COLSPAN dan ROWSPAN
COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.ROWSPAN digunakan untuk menghubungkan beberapa baris jadi satu
contoh :
<html>
<head>
<title>colspan dan rowspan</title>
</head>
<body>
<table width=”100%” border=”3″ cellpadding=”5″ cellspacing=”5″ ordercolor=”black”>
<tr>
<td width=”50%” bgcolor=”yellow”> </td>
<td width=”50%”> </td>
</tr>
</body>
</html>
Table COLOR
selain warna pada bacgroud, border juga bisa ditentukan warnanya. untuk background BGCOLOR dan untuk memberi warna pada border digunakan COLOr
contoh:
<html>
<body>
<table width=”100%” border=”3″ cellpadding=”5″ cellspacing=”5″ bordercolor=”black”>
<tr>
<td width=”50%” bgcolor=”yellow”> </td>
<td width=”50%”> </td>
</tr>
<tr>
<td width=”50%”> </td>
<td width=”50%”>
<p align=”center”> </td>
</tr>
</body>
</html>
INPUT TEKS <input type=”text”>
Textbox adalah salah satu jenis control untuk memasukkan data. HTML menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak input. untuk atribut value digunakan untuk memberi nilai input, dan size digunakan untuk menentukan batas terpanjang dari sebuah amsukan.
Contoh :
<html>
<head>
<title>from input dengan textbox</title>
<body>
<p>rancangan awal buku tamu</p>
<table border=”0″ cellpadding=”0″ cellspacing=”2″>
<tr>
<td width=”11%”>nama</td>
<td width=”3%”>:</td>
<td width=”86″><input name=”nama” size=”20″></td>
</tr>
<tr>
<td width=”11%” height=”22″>alamat</td>
<td width=”3%”>:</td>
<td width=”86%”><input type=”text” name=”alamat” size=”20″></td>
</tr>
<tr>
<td width=”11%”>sekolah</td>
<td width=”3%”>:</td>
<td width=”86″><input type=”text” name=”sekolah” size=”20″></td>
</tr>
</table>
</body>
</head>
</html>
input ckeckbox<input type=”checkbox”>
untuk memberikan pilihan pada kita.
contoh:
<body>
<p>berikan poling !</p>
<p>daftar mobil</p>
<p>
<input type=”checkbox” value=”off” name=”dd”>mersedes<br>
<input type=”checkbox” checked value=”on”>bmw<br>
<input type=”checkbox” checked value=”ON” name=”honda”>honda<br>
<input type=”checkbox” checked value=”ON”>toyota<br>
<input type=”checkbox” checked value=”ON”>kijang<br>
</p>
</body>
</head>
</html>
input radio button<input type=”radio”>
jika type=”checbox” diganti dengan type=”radio” . maka user harus memilih salah satu pilihan yang tersedia.
contoh:
<body>
<p>berikan pilihan anda</p>
<p>rentang usia <br>
<p>
<input type=”radio” value=”V5″ checked name=”R1″>25-35 tahun<br>
<imput type=”radio” value=”V5″ checked name=”R1″>35-50 tahun<br>
<imput type=”radio” value=”V5″ checked name=”R1″>50-65 tahun<br>
<imput type=”radio” value=”V5″ checked name=”R1″>65-80 tahun<br>
<imput type=”radio” value=”V5″ checked name=”R1″>80-100 tahun<br>
</p>
</body>
<body>
<from method=”post/get” action=”url”>
<form>
<p><textarea NAME=”teksarea1″ ROWS=”10″ COLS=”40″>
Teks ini akan tertulis di dalam textarea
</textarea> </p>
</form>
</body>
<body>
<div ALIGN=”CENTER”>
<h1>This header is centered.</h1>
<p><img SRC=”file:///D:/HTML/Gambar.gif”><br>
So are the images above and this line of text.<br>
</p>
<p ALIGN=”RIGHT”>But this text is right-aligned.</div>
</body>
<body>
<pre><b> Ini adalah huruf tebal </b>
<i> Ini adalah huruf miring </i>
<tt> Huruf ini mirip dengan huruf mesin ketik </tt>
<u> Kalimat ini akan diberi garis bawah </u>
<strike> Kalimat ini akan diberi garis pada bagian tengah </strike>
<big> Huruf ini berukuran lebih besar </big>
<small> Huruf ini berukuran lebih kecil </small>
Ini adalah <sub> subscript </sub>
Ini adalah <sup> superscript </sup>
</pre>
</body>
<body>
<pre>Klasemen
Tim Main Menang Seri Kalah
========================================
Tim A 3 2 1 0
Tim B 3 2 0 1
Tim C 3 1 1 1
========================================
</pre>
</body>
</html>
iwan531 berkata,
September 30, 2007 pada 6:12 am
aku masih bingung gi mana neh
Buchori berkata,
Desember 12, 2007 pada 10:04 am
saya lagi kesulitan mencari form entry data yang menggunakan grid..
atau kalau ada contoh form transaksi saya bisa diberi tahu nggak
salam
mentari berkata,
Desember 18, 2007 pada 6:50 pm
bingunggg
pagi-mentari.blogspot.com