Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language

Tutorial Belajar Dasar - Dasar HTML: Hypertext Markup Language

Contoh :

<OL TYPE=I> 
<LI> Item nomer 1 
<LI> Item nomer 2
<LI> Item nomer 3
</OL> 

Hasil dari kode di atas adalah :

1. Item nomer 1 

2. Item nomerr 2 

3. Item nomerr 3  

Read More

Untuk TYPE Anda dapat juga menggunakan : 1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc. i- Romawi huruf kecil , i, ii, iii, etc. Definition Lists: <DL>  

Contoh :

<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama. <DT> Item kedua.
<DD> Penjelasan tentang item kedua </DL>

Hasil dari kode di atas adalah :

Item pertama.

Penjelasan tentang item pertama. 

Item kedua.

Penjelasan tentang item kedua  

Images
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :
<IMG src=”logo.gif” alt=”Ini adalah logo halaman pembuka dasar html” width=200 height=100> <IMG src=”logo.gif” hspace=10 vspace=5 align=right border=2>

Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh :

<A href=”halaman2.html”>Klik di sini</A> Untuk membuat link ke halaman lain.

<A href=”mailto:webmaster@klik-kanan.com”>Klik di sini</A> Untuk membuat link pada alamat e-mail.

<A href=”#aplikasi”>Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.

<A href=”halamanlain.html#aplikasi”>Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.

<A href=”halaman2.html”> <IMG src=”gambar.gif”></A>  Untuk membuat link dengan menggunakan gambar.  

Dasar HTML Tabel

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.


Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE>
Terdiri dari atribut :

* align – perataan : rata kiri (left), tengah (center) atau kanan (right).

* bgcolor – warna latar belakang (background) dari tabel.

* border – ukuran lebar border tabel (dalam pixel).

* cellpadding – jarak antara isi cell dengan batas cell (dalam pixel).

* cellspacing – jarak antar cell (dalam pixel).

* width – ukuran tabel dalam pixel atau percent.   Contoh : <TABLE align=”center” bgcolor=”#0000FF” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”>
<TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

* align – perataan : rata kiri (left), tengah (center) atau kanan (right). * bgcolor – warna latar belakang dari baris.

* valign – perataan vertikal : top, middle atau bottom.  

Contoh :

<TR align=”right” bgcolor=”#0000FF” valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel.

* align – perataan

* background – image yang digunakan sebagai latar belakang dari kolom.

* bgcolor – warna latar belakang

* colspan – lihat gambar contoh

* height – ukuran tinggi cell dalam pixels.

* nowrap – membuat supaya isi dari kolom tetap berada pada satu baris.

* rowspan – lihat gambar contoh

* valign – perataan vertikal :top, middle atau bottom.

* width – ukuran kolom dalam pixel atau percen.  

Contoh :

<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300"> <table width="100" border="1" cellspacing="2" cellpadding="2"> <tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr>
<td colspan="3" bgcolor="#FFCC99"> </td> </tr>
</table>   <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr>
<td colspan="3" bgcolor="#FFCC99"> </td> </tr>
</table>  

Dasar HTML Frames

Contoh 1

<FRAMESET cols="*,140">
<FRAME src="homepage.html" NAME="Frame1"> <FRAME src="menu.html" NAME="Frame2"> </FRAMESET>

Contoh 2

<FRAMESET cols="100,*">
<FRAME src="homepage.html" NAME="Frame1"> <FRAME src="menu.html" NAME="Frame2"> </FRAMESET>   

Contoh 3

<FRAMESET rows="100,*">
<FRAME src="homepage.htm" NAME="Frame1"> <FRAME src="menu.htm" NAME="Frame2"> </FRAMESET>   

Contoh 4

<FRAMESET rows="*,60">
<FRAME src="homepage.html" NAME="Frame1"> <FRAME src="menu.html" NAME="Frame2"> </FRAMESET>   

Contoh 5

<FRAMESET rows="*,60">
<FRAME src="homepage.html" NAME="Frame1"> <FRAMESET cols="50%,50%">
<FRAME src="menu.html" NAME="Frame2"> <FRAME src="menu2.html" NAME="Frame3"> </FRAMESET></FRAMESET>  

Contoh 6

<FRAMESET cols="*,50%">
<FRAME src="homepage.html" NAME="Frame1"> <FRAMESET rows="15%,15%,70%">
<FRAME src="menu.html" NAME="Frame2"> <FRAME src="menu2.html" NAME="Frame3"> <FRAME src="menu3.html" NAME="Frame4"> </FRAMESET></FRAMESET>   

Contoh 7

<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME src="homepage.html" NAME="Frame1"> <FRAME src="homepage2.html" NAME="Frame2"> </FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME src="menu.html" NAME="Frame3"> <FRAME src="menu2.html" NAME="Frame4"> </FRAMESET></FRAMESET>   

Contoh 8

<FRAMESET rows="15%,70%,15%">
<FRAME src="homepage.html" NAME="Frame1"> <FRAMESET cols="15%,70%,15%">
<FRAME src="menu.html" NAME="Frame2"> <FRAME src="menu2.html" NAME="Frame3"> <FRAME src="menu3.html" NAME="Frame4"> </FRAMESET>
<FRAME src="homepage.html" NAME="BIG"> </FRAMESET></FRAMESET>   

Kumpulan Tag Dasar HTML

<!– –>
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser  

<a href>
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut  

<a name>
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama  

<applet> Sebagai awal dari Java applets  

<area>
Mendefinisikan daerah yang dapat diklik (link) pada image map   <b>
Membuat teks tebal  

<basefont>
Membuat atribut teks default seperti jenis, ukuran dan warna font  

<bgsound>
Memberi (suara latar) background sound pada halaman web  

<big>
Memperbesar ukuran teks sebesar satu point dari defaultnya  

<blink>
Membuat teks berkedip  

<body>
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link  

<br>
Pindah baris  

<caption>
Membuat caption pada tabel  

<center>
Untuk perataan tengah terhadap teks atau gambar  

<comment>
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser  

<dd>  Indentitas teks   <div>
Represents different sections of text.  

<embed>
Menambahkan sound or file avi ke halaman web  

<fn>
Seperti tag <a name>  

<font>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks  

<form>
Mendefinisikan input form  

<frame>  Mendefinisikan frame  

<frameset>
Mendefinisikan attribut halaman yang akan menggunakan frame  

<h1> … <h6> 

Ukuran font  

<head>
Mendefinisikan head document  

<hr>
Membuat garis horizontal  

<html>
Berarti dokumen html  

<i>
Membuat teks miring  

<img>
Image, imagemap atau an animation  

<input>

Mendefinisikan input field pada form  

<li>
Membuat bullet point atau baris baru pada list ( berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )   <map>
Mendefinisikan client-side map  

<marquee>
Membuat scrolling teks (teks berjalan) – hanya pada MS IE  

<nobr>
Mencegah ganti baris pada teks atau images  

<noframes>
Jika browser user tidak mendukung frame  

<ol>
Mendefinisikan awal dan akhir list  

<p>
Ganti paragraf  

<pre>
Membuat teks dengan ukuran huruf yg sama  

<script>
Mendefinisikan awal script  

<table>  Membuat tabel  

<td>
Kolom pada tabel  

<title> 

Mendefinisikan title  

<tr>
Baris pada tabel

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *