Belajar html Blok Elemen.

Setelah sebelumnya kita telah mempelajari tentang Belajar html Frame., maka berikut ini kita akan lanjutkan Belajar html kita dengan materi Blok Elemen

Secara umum Elemen html dapat dikelompokkan ke dalam dua kelompok besar yaitu : Elemen Blok dan Elemen Inline.

Elemen Blok

Yang termasuk ke dalam elemen blok adalah : <h1>...<h6> (header), <p>, (paragraf), <ul> (unordered list), <ol> (ordered list), <table> (tabel), dan lainnya.

Elemen-elemen tingkat blok biasanya akan memberikan baris kosong sebelum dan sesudahnya ketika ditampilkan pada halaman browser.

Elemen Inline

Contoh yang termasuk elemen inline adalah : <b> ( bold=huruf tebal), <a> (anchor ), <td> (table data), <img> (image) dan lainnya.

Elemen-elemen tingkat inline ini tidak memberikan baris kosong baik sebelum maupun sesudahnya ketika tampil pada halaman browser. Elemen inline biasanya digunakan untuk memberi gaya pada text tertentu dan khusus diantara teks di dalam kalimat ataupun paragraf.

Elemen <div>

Unsur <div> adalah tingkat elemen blok yang dapat digunakan sebagai wadah untuk mengelompokan elemen html lainnya.

Unsur <div> tidak memiliki arti khusus. Kecuali itu, karena elemen <div> merupakan elemen tingkat blok, maka pemakaian elemen ini secara otomatis akan memberikan baris kosong sebelum dan sesudahnya ketika tampil pada halaman browser.

Ketika digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur gaya atribut pada konten blok besar.

Sebagai contoh, misalnya kita akan mengatur letak gambar pada halaman, maka kita bisa menggunakakan elemen <div> dengan menerapkan atribut style.

<div style="text-align:center">
<img src="http://alamat/nama.jpg" alt="gambar" style="width:200px; height:100px;" />
</div>

Pada contoh ini, elemen <div> digunakan untuk menempatkan sebuah gambar berada di tengah, menggunakan atribut style.

hasilnya seperti ini :

Penggunaan umum lainnya dari unsur <div> adalah untuk mengatur tata letak dokumen, ini menggantikan "cara lama" mendefinisikan tata letak menggunakan tag table. Menggunakan tag table bukanlah cara yang benar jika digunakan untuk mengatur tata letak. Tujuan dari elemen <table> adalah untuk menampilkan data tabular.

Elemen <span>

Elemen <span> merupakan elemen inline yang dapat digunakan sebagai wadah untuk teks yang khusus (unik) diantara teks dalam kalimat.

Elemen <span> tidak mempunyai arti khusus. Ketika digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk mengatur gaya pada bagian atribut dari teks.

Sebagai contoh, misalnya kita menggunakan elemen <span> untuk mengatur gaya pada teks tertentu dalam sebuah paragraf.

<p>
elemen <span style="color:blue"> <div> </span> tidak mempunyai arti khusus.
</p>

hasilnya adalah:

elemen <div> tidak mempunyai arti khusus.

Dari contoh dapat dilihat bahwa elemen <span> digunakan untuk memberi gaya warna biru pada teks "<div>" yang berada diantara teks "elemen" dan teks "tidak" dalam sebuah paragraf.

back to top.

Belajar html Frame.

ke bawah

Frame dalam dokumen html merupakan rancanngan atau pola yang mengatur tataletak atau susunan dari kontent-konten apapun yang akan ditampilkan pada suatu halaman web.
Dengan frame kita bisa menampilkan beberapa halaman html sekaligus dalam satu jendela browser. Maksudnya adalah dengan membuka satu halaman yang mengandung frame kita dapat melihat beberapa halaman sekaligus yang telah diatur pada sebuah halaman yang be-frame.
Selain mempercantik halaman, dengan frame dapat memudahkan navigasi untuk menuju pada jendela baru.
Ok, untuk memahami tentang hal ini, misalkan kita akan membuat halaman yang berframe seperti yang terlihat pada gambar berikut ini:

frame 1.

file judul.htm

frame 2.

file menu.htm

frame 3.

file isi/content.htm

Kita anggap saja gambar diatas merupakan sebuah halaman yang mengandung 3 frame, masing2 berisi frame 1 yang diisi dengan file judul.htm, frame 2 berisi file menu.htm dan frame 3 yang berisi file isi.htm. Maka kita harus membuat 4 buah file.htm, yaitu: 3 file yang disebutkan diatas sebagai file yang ditampilkan, dan 1 file yang menampilkan.File yang menampilan ini kita sebut saja file utama.htm. File utama inilah yang disebut Frame halaman, yaitu seperti gambar contoh diatas.
Untuk membuat file utama ini kita hanya membutuhkan 2 tag, yaitu:
Tag <frameset>:Tag ini berfungsi untuk mengatur pembuatan halaman yang berframe. Dan
Tag <frame> : tag ini berfungsi untuk mengatur dan menentukan file target bagi setiap frame.
Kode html untuk halaman yang berframe atau file "utama.htm" adalah:
<html>
<head>
<title>halaman utama
</title>
</head>
<frameset>
</frameset>
</html>
Dari cara penulisannya, halaman yang berframe tidak memerlukan tag <body> karena yang menjadi isi dari halaman yg berframe adalah isi dari halaman lain yang menjadi target dari setiap frame.
Coba perhatikan kembali gambar contoh halaman berframe diatas. Halaman itu terdapat 3 frame terdiri dari dua baris (anggap baris pertama tingginya 30% dan baris kedua 70%) dan dua kolom pada baris kedua (kolom sebelah kiri anggap saja 40% dan sebelah kanan 60%).
Untuk pembagian baris digunakan atribut <rows> dan untuk pembagian kolom digunakan atribut <cols> Jadi gambar diatas kode htmlnya adalah:
<frameset rows="30%,70%">
<frame>
<frameset cols="40%,60%">
<frame>
<frame>
</frameset>
</frameset>
Seperti halnya dalam pembuatan table, nilai dari pembagian rows dan cols selain menggunakan persen (%), juga bisa menggunakan ukuran pixel misalnya rows="120,480". Bahkan kita juga bisa menulisnya dengan hanya satu ukuran didepan, dan yang lain adalah sisanya dari lebar jendela browser pengguna. Misalnya cols="120,*".
Untuk selanjut nya kita isi setitap <frame> dengan file target yang tentunya sudah dibuat sebelumnya yaitu: file judul.htm, file menu.htm dan file isi.htm, seperti ini:
<frameset rows="30%,70%">
<frame src="http://.../judul.htm">
<frameset cols="40%,60%">
<frame src="http://.../menu.htm">
<frame src="http://.../isi.htm">
</frameset>
</frameset>
Perhatikanlah kode html diatas, pada tag frame terdapat atribut src, ini berfungsi untuk merujuk alamat dari isi frame yang akan ditempatkan pada frame yang telah disediakan tersebut.
Selain atribut src yang merupakan atribut yang sangat penting, dalam tag <frameset> dan tag <frame>, biasanya juga dilengkapi dengan atribut lainnya, yaitu :
Frameborder: Atribut ini berfungsi untuk memilih apakah frame akan diberi border atau tidak. Dan nilai dari atribut ini adalah: "yes" atau "no".
Border: Berfungsi untuk menentukan ketebalan garis tepi pada tiap frame, satuan/nilainya adalah pixel.
Bordercolor: Ini berfungsi untuk memberi warna pada border.
Marginwidth: Atribut ini berfungsi untuk memberi jarak antara tepi kiri frame atau tepi kanan frame dengan isi frame.
Marginheight: berfungsi memberi jarak antara tepi atas frame atau tepi bawah frame dengan isi frame.
Noresize: Dengan adanya atribut ini artinya ukuran frame tidak bisa diubah atau tidak bisa digeser, jika layar browser tidak sesuai atau lebih kecil maka sebagian isi halaman tidak akan terlihat.
Scrolling : ini berfungsi sebagai penggulung layar, Ada tiga pilihan value/nilai yang disediakan yaitu:
yes : artinya fasilitas penggulung selalu tersedia,
no : artinya tidak ada fasilitas penggulung, dan
auto : berarti fasilitas ada bila diperlukan.
Name : atribut name berfungsi untuk memberi nama pada frame.
Atribut name diperlukan sebagai pengarah navigasi pada target yang ditentukan, misalnya frame isi diberi nama "isi", lalu setiap link pada halaman ini ditentukan dengan target="isi" maka apabila sebuah link diklik, maka halaman yang dipanggil akan muncul pada halaman dengan frame isi.
Adapun target untuk memunculkan halaman dapat pula ditempatkan pada:
Target="blank" : halaman yang dipanggil akan muncul pada jendela baru, artinya: tidak lagi mengisi halaman yang berframe tadi.
Target="self" : halaman yang dipanggil akan menempati tempat dimana link itu berada. Misalnya kita mengklik satu link pada daftar menu, maka halaman akan menempati frame menu.
Target="parent" : halaman yang dipanggil akan mengisi framset, satu tingkat lebih tinggi dari frame tempat dimana link itu berada.
Berikut contoh html dalam penerapan atribut tersebut diatas.
<framset rows="30%,70%" bordercolor="warna" frameborder="yes" border="pixel">
<frame src="/judul.htm" name="judul" border="10" bordercolor="warna" marginwidth="angka" marginheight="angka" noresize>
<frameset cols="40%,60%" scrolling="no" frameborder="yes">
<frame src="/menu.htm" name="menu" target="isi" scrolling="no" noresize>
<frame src="/isi.htm" name="isi" marginwidth="angka" marginheight="angka">
</frameset>
Apabila kita ingin agar setiap link pada file menu akan diarahkan pada frame isi maka pada penulisan link tsb harus disisipkan atribut target yang mengarah pada frame isi. Misalnya ada salah satu link pada file menu seperti ini:
<a href="/List_item"> List Item
</a>
Dan apabila link yang dipanggil ini ingin diarahkan pada frame isi apabila diklik, maka kita harus menyisipkan atribut target=isi pada link tsb seperti ini:
<a href="/List_item" target="isi"> List Item
</a>
Apabila anda ingin agar semua link yang ada pada halaman yang mengisi halaman yang berframe ini akan diarahkan pada frame isi, anda bisa menambahkan atribut:
<basetarget="isi">
sehingga kita tidak perlu menuliskan atribut target pada setiap link. Atribut basetarget harus ditempatkan diantara tag <head> dan </head>.
Demikianlah sekelumit saya sajikan tentang cara membuat frame halaman. Tentu saja masih banyak variasi lainnya dengan atribut2 yang lain pula.
Semoga bermanfaat.
back to top

Belajar html Layout.

ke bawah

Homepage sebuah situs web ditata sedemikian rupa sehingga tampilannya menjadi bagus dan menarik.
Konten-konten kelompok ditempatkan di dalam kolom-kolom untuk memudahkan dalam melihat kategori navigasi dan lain-lain.
Untuk itulah penataan tata-letak pada halaman web menjadi sangat penting.


Untuk membuat kolom-kolom tata letak konten-konten dapat digunakan elemen <div> maupun elemen <table>. Namun demikian penggunaan elemen table untuk membuat tata letak halaman, hal ini tidak dibenarkan. Elemen tabel adalah diperuntukkan membuat daftar tabular.


Kehadiran css dalam hal ini dapat digunakan untuk memposisikan elemen, mebuat latarbelakang dan membuat tampilan warna-warni pada halaman.

Layout html menggunakan elemen <div>.

Elemen div adalah tingkat elemen blok dalam hal ini digunakan untuk mengelompokkan elemen.

Di bawah ini adalah contoh menggunakan lima elemen <div> dalam menyusun tataletak elemen lainnya pada halaman.

<!DOCTYPE html >

<html>

<body>

<div id="container" style="width:300px">

<div id="header" style="background-color:#00ff88; height:60px;">

<h2 style="margin-bottom:0; text-align:center;"> judul halaman web
</ h2>

</div>


<div id="menu" style="background-color:#00DD55; height:200px; width:80px; float:left;" >

<b>Menu:</b> <br> html <br /> css <br /> javascript

</div>


<div id="content" style="background-color:#00EEDE; height:200px; width:220px; float:left;" >

<h3 style="text-align:center;" > di sini isi konten </h3>


</div>

<div id ="footer" style="background-color: #0055d5; text-align: center;">

Hak Cipta © DoMain.com


</div>

</div>

</ body>

</ html>



Dengan kode html diatas akan menampilkan halaman seperti berikut ini.

judul halaman web

Menu :

html
css
javascript

di sini isi konten

Hak Cipta © DoMain.com

Layout html menggunakan elemen <table>.

Jalan yang singkat dalam membuat layout menggunakan elemen html <table>. Penggunaan tag <table> dalam membuat layout halaman bukanlah cara yang benar, tag <table> hanya diperuntukan membuat tabel data.

Untuk membuat layout dalam multi-kolom dapat digunakan elemen <table> atau <div>. CSS digunakan untuk mengatur posisi elemen, background dan memberi warna.

Berikut ini contoh membuat layot menggunakan tag <table> dengan 3 baris dan 2 kolom.



<! D OCTYPE html >

< html>

< body>

<table style="width:300; border:0px;">

<tr>

<td colspan="2" style="background-color:#00d5d5; text-align:center;">

<h2>judul halaman web </h2>
</td>

</tr> <tr>

<td style="background-color:#00dd55; width:80px;text-align:top;">
<b> Menu </b> html <br> css <br> javascript
</td>

<td style="background-color:#00ffee; height:200px;width:220px; text-align:center;">
di sini konten halaman

</td>

</tr> <tr>

<td colspan="2" style="background-color:#00d5d5; text-align:center;">
Copyright © DoMain.com
</td>

</tr> </table>

</ body>

</ html>

Berikut ini yang tampil di browser.

judul halaman web
Menu: html css javascript	di sini konten halaman
Copyright © DoMain.com

Demikianlah cara membuat layout html halaman. Semoga bermanfaat.

kembali ke atas

Belajar html Cara Membuat Teks/Obyek Bergerak.

ke bawah


Marquee merupakan salah satu tag dalam html yang berguna untuk menampilkan sesuatu yang bergerak pada halaman web, bisa berupa teks biasa, gambar dan yang lainnya.

Dengan adanya tag ini, tampilan halaman menjadi sangat interaktif karena menampilkan sesuatu yang bergerak, sehingga menarik perhatian para pengunjung. Tag ini akan sangat baik bila digunakan untuk kepentingan pengumuman-pengumuman, iklan dan yang lainya.

Susunan html sederhana tag marquee :

<marquee>
tulisan ini tampil berjalan
</marquee>
Maka akan tampak pada halaman seperti ini :

tulisan ini tampil berjalan
Agar tampilan lebih atraktif lagi bisa ditambahkan atribut-atributnya yaitu: BGCOLOR, WIDTH, HEIGHT, DIRECTION, BEHAVIOUR, SCROLL, VSPACE, HSPACE dan lainnya.

bgcolor :

atribut bgcolor berguna untuk memberi latar belakang warna pada objek yang bergerak. Atau menggunakan atribut style dengan properti background-color. Value dari atribut ini adalah warna.


<marquee style="background-color:yellow">
teks berjalan dengan latarbelakang warna kuning
</marquee>

teks berjalan dengan latarbelakang warna kuning

width dan height:

Atribut ini berguna untuk menentukan ukuran dari objek yang ditampilkan bergerak. Width: untuk menentukan lebar, dan height: untuk menetukan tingginya.


<marquee width="100" height="40">
objek berjalan dengan lebar:100 dan tinggi:40
</marquee>

teks berjalan dengan width:100 dan height:40

vspace dan hspace :

Kedua tag ini berfungsi untuk menentukan jarak antara obyek yang bergerak dengan tulisan, kiri-kanan untuk hspace dan atas-bawah untuk vspace.

direction :

Atribut ini berfungsi untuk menentukan arah gerakan, value dari atribut direction dapat dipilih: left (ke kiri), right (ke kanan), up (ke atas) dan down (ke bawah).

<marquee direction="left" |"right" |"up" |"down">
objek berjalan ke kiri, ke kanan, ke atas atau ke bawah
</marquee>

tulisan ini tampak berjalan kekanan.

behaviour:

Atribut ini berguna untuk menentukan bagaimana tampilan itu bergerak. Jika pada atribut direction menentukan arah dari gerakan, maka pada atribut behaviour yang ditentukan adalah prilaku gerakannya. Value dari atribut ini adalah : scroll, slide, alternate.


behaviour=scrool : dengan atribut behaviour=scroll maka obyek akan bergerak sesuai arah yang ditentukan, dan mengulangi gerakannya dari titik awal.


behaviour=slide : Dengan cara ini, maka obyek akan bergerak sesuai arah yang ditentukan dan berhenti di titik akhir dan tidak mengulangi gerakannya.


behaviour=alternate : Dengan penentuan behaviour=alternate maka obyek akan melakukan gerakan bolak-balik.

<marquee behaviour="scroll" |"slide" |"alternate"> obyek bergerak dengan prilaku gerakan
</marquee>

tulisan ini tampak berjalan dengan prilaku behaviour

loop :

Dengan atribut loop maka obyek yang bergerak akan diatur jumlah gerakannya. Dengan kata lain, tanpa menggunakan atribut ini maka obyek yang bergerak akan melakukan gerakannya secara terus menerus.
Sebagai contoh:

<marquee width="200" height="60"
vspace="8" hsvace="6" bgcolor="yellow"
direction="left" loop="8"> teks berjalan dengan 8kali gerakan
</marquee>

Gerakan dengan loop:8, dan berhenti setelah 8 kali gerakan :

contoh teks bergerak dengan latar belakang warna kuning dan atribut lainnya

Itulah beberapa contoh cara membuat text /obyek bergerak pada halaman web.

back to top

Belajar html Cara Membuat Form.

ke bawah

Form atau Borang ( dalam istilah bahasa Indonesia ) adalah merupakan daftar isian yang digunakan untuk berbagai keperluan, misalnya untuk pengumpulan data, login, registrasi dan bahkan survey.

Tag Form dan Atributnya.
Tag <form> merupakan sebuah tag yang digunakan untuk menandakan sebuah formulir isian pada dokumen html.
Pada tag ini, atribut yang digunakan yaitu: atribut action dan atribut method.

Action:

Atribut ini berfungsi untuk menindaklanjuti data yang yang dibuat dan dikirim, yang nantinya akan diproses melalui dokumen proses.php.

Method:

Atribut ini berfungsi untuk menentukan cara pengiriman sebuah dokumen formulir isian. ada dua methode yang digunakan yaitu: Methode Get dan Methode Post.


Berikut adalah contoh kerangka penulisan html sebuah form:


<form id="form" name="form"
action="proses.php"

method="get"|"post">

<input type="....">

<input type="....">
. . . . . . . . . . . . . .

<input type=".....">

<input type="submit"....>

<input type="reset"....>

</form>


Input type yang sering digunakan diantaranya adalah:

Type text : merupakan kolom untuk memasukan data text biasa dengan ukuran atau jumlah karakter yang sedikit, misalnya untuk memasukan data berupa nama, alamat email, alamat tempat tinggal dan lain-lain.

Cara menuliskan htmlnya sbb:


Nama Anda:

<input type="text"

name="nama" size="25">

Alamat Email:

<input type="text" name="e_mail" size="25">

Dan inilah hasilnya yang tampil dihalaman web.

Nama Anda :



Alamat Email :


Dalam penulisan html diatas terlihat atribut name : ini berfungsi untuk memberitahukan pada server bahwa input data yang terkirim adalah sebuah nama.

Sedangkan atribut size berfungsi menentukan lebar kolom untuk menuliskan data.

Input type: Password.

Dalam type password ini tidak jauh beda dengan type text biasa, hanya saja setelah pengunjung menuliskan data maka karakter yang dituliskan akan langsung berubah menjadi karakter lain yaitu berupa tanda bintang atau titik( * ).
Ini diperuntukkan menjaga kerahasiaan sebuah password atau kata sandi.

Penulisannya adalah sbb:

Kata Sandi :

<input type="password"

name="password" size="20">

Inilah hasil yang dapat ditampilkan pada halaman browser.

Kata Sandi :


Input type: Select.

Input select dimaksudkan agar pengunjung hanya memilih salah satu dari beberapa pilihan yang disediakan.

Pada tag ini terdapat pula atribut selected dan value yang telah ditentukan. Karakater dari atribut selected adalah: apabila pengunjung tidak memilih satupun dari pilihan yang ada, maka otomatis data yang ditentukan oleh selected itulah yang dimasukkan sebagai pilihan.

Seperti pada contoh berikut, selected menentukan Jakarta sebagai pilihan jika tak satupun yang dipilih oleh pengunjung.

Berikut adalah cara menuliskan htmlnya:

Kota Asal:


<select name="kota_asal">

<option selected> Jakarta
</option>

<option> Bandung

</option>

<option> Semarang

</option>

<option> Surabaya

</option>

</select>

Berikut penampilannya:


Kota Asal :


Jakarta

Bandung
Semarang
Surabaya


Input type: Radio.

Option dengan type radio digunakan apabila diharuskan memilih satu diantara dua atau beberapa pilihan yang disediakan. Pada tag dengan type radio selalu disertakan atribut value yang merupakakan pilihan atau option yang disediakan.

Type radio biasanya digunakan untuk mengambil data pilihan dari pengunjung halaman web, misalnya status perkawinan, jenis kelamin dll.

Berikut cara menuliskan htmlnya misalnya untuk mengambil data jenis kelamin :

Jenis Kelamin :


<input type="radio" name="jenis_kelamin" value="pria"> Pria

<input type="radio" name="jenis_kelamin" value="wanita"> Wanita

Berikut yang ditampilkan pada halaman web.

Jenis Kelamin :

Pria


Wanita


Type checkbox :
Sebenarnya type ini mirip dengan type radio maupun select, yang berbeda pada type ini, pengunjung bisa menentukan pilihannya lebih dari satu, semua, bahkan tidak memilih sama sekali. Tentu saja jika tidak memilih maka tidak ada data yang terkirim.

Cara menuliskan htmlnya adalah seperti dibawah ini:

Hobbi Anda:

<input type="chackbox" name="hobi" value="olah_raga"> Olah Raga

<input type="chackbox" name="hobi" value="jalan_jalan"> Jalan-jalan

<input type="chackbox" name="hobi" value="computer"> Komputer

<input type="chackbox" name="hobi" value="lainnya"> Lainnya

Inilah penampakannya dihalaman web browser:

Hobi Anda :

Olah Raga
Jalan-jalan
Computer
Lainnya

Text Area :

Text area merupakan suatu papan atau kolom yang disediakan untuk mengambil data dari pengunjung, yang sifatnya memiliki tulisan yang lebih panjang jika dibandingkan dengan input yang lainnya.

Pada papan text area biasanya data yang dimasukkan adalah descriptsi diri, kesan-kesan, komentar dan yang lainnya.
Berikut cara menuliskan htmlnya.

Tentang Anda :

<textarea name="descript"cols="20" rows="10">
Tulis tentang diri anda disini.
</textarea>
Berikut adalah penampilannya:

Tentang Anda :

Tulis tentang diri anda. <br />

Submit dan Reset :

Type Submit berfungsi menyediakan tombol untuk mengirim data ke server untuk diproses melalui kode pemroses pada sistem php.

Type ini merupakan hal yang sangat penting karena tanpa adanya type submit data yang telah dibuat tidak dapat diproses pada server. Sehingga data yang telah kita buat tidak akan berarti apa-apa tanpa diproses.

Berbeda dengan type submit yang berguna untuk mengirim data, maka type reset adalah justru menyediakan tombol yang berfungsi untuk menghapus semua data yang telah ditulis oleh pengguna, hal ini dimaksudkan misalnya untuk mengatur ulang data dan sebagainya.

Berikut cara menuliskan htmlnya:

<input type="submit" name="submit" value="Kirim">
<input type="reset" name="reset" value="Hapus">

Inilah penampakannya di halaman web browser.

 

Itulah beberapa input type yang banyak digunakan dalam Form.


Semoga bermanfaat.


kembali ke atas

Belajar html Table ( Tabel ).

ke bawah


Table dalam html digunakan untuk mengatur urutan atau susunan klasifikasi data dalam satu format data yang terpadu, sehingga dengan mudah kita dapat melihat data secara akumulatif hanya dengan melihat satu halaman berkas saja.misalnya berupa buku kas, daftar nama, data penduduk dsb.


Tag dasar table

Untuk membuat table yang sederhana, tag pokok yang digunakan terdiri dari Tag <table>, tag <tr> dan tag <td>.

• tag <table>: berfungsi untuk membuat tabel yang selalu diikuti dengan tag <tr> dan tag <td>.
• tag <tr> (table rows) digunakan untuk membuat baris pada tabel.
• tag <td> (table data) berfungsi untuk menulis data sekaligus untuk membuat kolom data.
  
• Ruang yang dihasilkan oleh tr dan td itu disebut table cell. Table cell inilah yang digunakan untuk menyimpan data.
• Untuk berbagai keperluan, ketiga tag diatas dapat dilengkapi dengan atribut-atribut.

Susunan html sederhana untuk membuat tabel adalah sebagai berikut:
<table>

<tr>
<td> susunan dasar table
</td>

</tr>
</table>

Susunan html di atas hanya menghasilkan satu ruang cell saja.
Dan hasilnya seperti ini :

susunan dasar table

Contoh berikut ini adalah cara menulis html untuk membuat tabel dengan 3 baris dan 2 kolom.

<table border="1">
<tr>

<td> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>
</tr>
</table>

Dalam contoh ini dicantumkan atribut border: berguna untuk memberikan ketebalan garis, nilai satuan dapat digunakan pixel (px ) atau persen (%).

hasilnya :

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Menentukan ukuran tabel
Untuk mengatur lebar tabel digunakan digunakan atribut width dan untuk mengatur tingginya digunakan atribut height, atau menggunakan atribut style dengan properti width dan height. Sedang nilai satuan dapat menggunakan satuan pixel (px) atau persen (%).

Misalnya kita akan mengatur contoh tabel diatas dengan lebar tabel:200px, lebar td (table data):50% dari lebar tabel dan tinggi td pada baris pertama (cell 1 dan 2): 40px. Cara penulisannya seperti ini:

<table border="1" style="width:200px;">
<tr>

<td style="width:50%; height:40px> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Untuk mengatur lebar dan tinggi td, jika kita hanya mengatur pada cell 1 saja, maka secara otomatis tinggi td pada kolom berikutnya mengikuti tinggi td pada cell 1, dan lebar td pada baris berikutnya akan otomatis mengikuti lebar td pada cell diatasnya (cell 1).

Menggabungkan baris dan kolom

Baris-baris dan kolom-kolom dapat digabungkan sesuai kebutuhan.
Untuk menggabungkan 2 kolom atau lebih digunakan atribut collspan dan untuk menggabungkan 2 baris atau lebih digunakan atribut rowspan. Sedangkan nilai dari kedua atribut itu menyatakan berapa baris atau berapa kolom yang akan digabungkan.

Pada contoh berikut cell 1 dan cell 2 dalam baris pertama disatukan (colspan=2).
code html :

<table border="1" width="220">

<tr>

<td colspan="2"> cell 1 dan 2 </td>
</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>

cell 1 dan cell 2
Cell 3	cell 4

Contoh berikut adalah menyatukan cell 1 dan cell 2 pada kolom ke1 (colspan=2)

code html :

<table border="1" width="220">

<tr>

<td width"50%" rowspan="2"> cell 1 dan 3
</td>

<td> cell 2

</td>
</tr>
<tr>
<td> cell 4

</td>
</tr>

</table>
hasilnya :

bidang 1 dan 3	sell 2
	cell 4

Gambar ini menyatukan cell 1 dan cell 3 yang terletak dalam kolom 1 (rowspan=2)

Contoh dibawah ini, dua kolom yaitu: cell 1 dan cell 2 digabungkan (colspan=2), dan dua baris pada kolom ke-1 yaitu: cell 3 dan cell 5 digabungkan (rowspan=2). Dan cara menyusun html-nya seperti ini.

<table border="1" style="width:220px;">
<tr>

<td colspan="2"> cell 1 dan cell 2 </td> </tr>

<tr>

<td rowspan="2"> cell 3 dan cell 5 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1 dan cell 2
cell 3 dan cell 5	cell 4
	cell 6

colspan = 2 dan rowspan = 2

Menentukan jarak cell

Untuk mengatur jarak cell digunakan atribut cellpadding dan atribut cellspacing.

• cellpadding: atribut ini digunakan untuk mengatur jarak pada bagian dalam cell yaitu jarak antara cell dengan text data.
• cellspacing: digunakan untuk mengatur jarak antar cell yaitu jarak bagian luar cell.
  

<table border="1" style="width:160px;" cellpadding="14px" cellspacing="8px" >
<tr>

<td style="width:50%;"> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>
Pada contoh ini jarak cell diatur dengan cellpadding=14px dan cellspacing=8px. Ukuran cell sengaja dibuat besar dan tidak seimbang, hal ini untuk memperjelas pemahaman penggunaan atribut cellpadding dan cellspacing saja.

maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4

Perhatikanlah :
jarak antara text dengan cell (cellpadding=14px)
jarak antara cell dengan cell (cellspacing=8px).

Membuat judul pada table
Cara untuk membuat tabel yang dilengkapi dengan kop dan judul cell, dalam menulis html-nya menggunakan tag <caption> yang diletakan setelah tag <table> untuk membuat kop dan tag <th> (table header) sebagai ganti dari tag <td> untuk membuat header cell.

Sebagai contoh kita akan membuat tabel dilengkapi dengan kop dan table header.

<table border="1" style="width:200px;">

<caption> tabel contoh </caption>
<tr>

<th> header 1 </th>

<th> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>

maka hasilnya seperti ini:

tabel contoh

header 1	header 2
cell 3	cell 4
cell 5	cell 6

Secara otomatis tag <caption> dan tag <th> akan membuat text berada di tengah dan huruf tebal.

Membuat background tabel
Pada tabel kita bisa memasang background, baik background dengan warna maupun dengan background gambar.

Untuk membuat background pada tabel, digunakan atribut style yang dipasang pada tag <table> (untuk keseluruhan) dan tag <td> untuk backgroud tiap cell.


Berikut ini cara pemasangannya :

<table border="1" style="background-image:url(..../image.jpg); width:200px;">


<caption> tabel contoh </caption>

<tr>

<th style="background-color:aqua;"> header 1 </th>

<th style="background-color:aqua;"> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
Semoga bermanfaat.

Belajar html Entitas.

ke bawah

Entitas merupakan cara penulisan karakter teks khusus yang tidak dijumpai dalam karakter teks ASCII.



Misalnya kita ingin menampilkan karakter "<" (tanda kurang dari) pada halaman web, maka kita tidak bisa dengan cara menuliskanya langsung seperti itu, karena browser tidak mengenalinya dan pada halaman web tidak menampilkan apa-apa. Untuk itu ada cara untuk menuliskan karakter seperti itu, yaitu dengan menuliskan kode-kode tertentu yang direkomendasikan W3C. Kode-kode itu disebut Entitas.

Sebagai contoh kita ingin menampilkan pertidaksamaan matematika seperti ini :

Sepuluh dikurang x kurang dari 8

dan kita langsung menulisnya seperti ini:

10 - x < 8

maka yang akan muncul pada browser adalah:

10 - x 8

ternyata tanda < tidak muncul. Untuk itu kita ganti tanda < dengan kode &lt; , sehingga kalimat matematika di atas kita ketik seperti ini.

10 - x &lt; 8

cobalah sendiri apa yang muncul di browser.



Contoh lain, misalnya kita membutuhkan lebih dari satu spasi secara berurutan diantara kata dalam suatu kalimat, tentu saja kita tidak bisa hanya menggunakan tab spasi untuk membuat beberapa spasi berurutan, karena browser secara otomatis hanya mengizinkan satu spasi saja.

Untuk mendapatkan beberapa spasi berurutan caranya adalah dengan menuliskan kode &amp; (sebagai pengganti satu spasi), sebanyak spasi yang kita butuhkan.


Berikut beberapa kode entitas yang paling banyak digunakan dalam menulis dokumen html.

Entitas karakter

Hasil	Penje- lasan	Nama entitas	Nomor entitas
(     )	spasi	 	 
( < )	kurang dari	&lt;	&#60;
( > )	lebih dari	&gt;	&#62;
( " )	kutif ganda	&quot;	&#34;
( ' )	kutif tunggal	&apos;	&#39;
( & )	dan	&amp;	&#38;

Sekarang timbul pertanyaan, lalu bagaimana cara menuliskannya agar di browser menampilkan tulisan &amp; ?

Mudah saja, kita ganti karakter & dengan kode &amp; diikuti dengan tulisan amp;, sehingga kita tulis &amp;amp; (ingat: tanpa spasi), gampang kan?.


kembali ke atas

Belajar html Daftar Item ( List Item ).

ke bawah


Ada dua macam Daftar item yang dapat digunakan dengan html, yaitu: Daftar Tak Berurut (unordered list/bullet) dan Daftar Berurut (Ordered list).

Contoh Daftar tak berurut :

• item kesatu
• item kedua
• item ketiga

Contoh Daftar berurut :

1. item kesatu
2. item kedua
3. item ketiga

Kode html Daftar tak berurut untuk contoh diatas sbb :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ul>

Sedangkan kode html Daftar berurut untuk contoh diatas adalah sbb :

<ol>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ol>

Untuk membuat Daftar tak berurut (bullet) digunakan tag <ul> dan untuk membuat Daftar berurut (numberic) digunakan tag <ol> . Sedangkan tag <li> digunakan untuk menempatkan item. Tentusaja masing2 tag tersebut harus disertai dengan tag penutupnya masing -masing.

Ada 3 type tanda bullet dalam Daftar tak berurut yaitu: type "disc "(bulat hitam), type "circle" (lingkaran) dan type "scuare" (kotak hitam), sedangkan untuk Daftar berurut (numberic) adalah : type "I"(romawi besar), type "¡" (romawi kecil), type "A" (huruf besar), type "a" (huruf kecil), dan type "1" (angka decimal).

Dengan tag-tag tersebut diatas, kita juga bisa membuat Daftar item bertingkat, baik untuk Daftar tak berurut maupun Daftar berurut.


Contoh Daftar item bertingkat:

• item kesatu
• item kedua
• sub item kesatu
• sub item kedua
• sub sub item kesatu
• sub sub item kedua
• sub sub item ketiga
• sub item ketiga
• item ketiga

Daftar item bertingkat dengan numberik:

1. item kesatu
2. item kedua
1. sub item kesatu
2. sub item kedua
1. sub sub item kesatu
2. sub sub item kedua
3. sub sub item ketiga
3. sub item ketiga
3. item ketiga

Untuk membuat Daftar item bertingkat, tidak ada penambahan tag, yang perlu diperhatikan adalah cara penyusunan saja. Perhatikanlah susunan penempatan tag html untuk contoh daftar item bertingkat seperti diatas.

kode html :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<ul>

<li> sub item kesatu </li>

<li> sub item kedua </li>

<ul>

<li> sub sub item kesatu </li>

<li> sub sub item kedua </li>

<li> sub sub item ketiga </li>

</ul>

<li> sub item ketiga </li>
</ul>

<li> item ketiga </li>

</ul>

Cara penulisan yang sama juga untuk membuat source html list item bertingkat untuk numberik (bernomor urut).


ke atas

Belajar html Menyisipkan Script CSS Pada HTML.

Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web.


Dengan css, tag-tag html yang harus ditulis secara berulang-ulang dapat dipersingkat hanya dengan membuat satu file css.

Untuk menyisipkan css kedalam dokumen html, ada 3 cara yang dapat kita lakukan. Yaitu :

• Eksternal style.
• Internal style
• Inline style

Cara eksternal style.

Cara eksternal merupakan cara yang ideal dalam menyisipkan file css ke dalam dokumen html karena lebih mudah dalam pengelolaannya. Misalnya untuk mengedit tampilan halaman, kita cukup mebuka file cssnya saja.

File css dibuat secara terpisah dari dokumen html dan disimpan dalam format file .css dengan nama misalnya gayaku.css.

Contoh css script :

body
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}

#header
{

border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}

#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}

#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}

h1 { font-size:24px; }
h2 { font-size:20px; }

h3 { font-size:16px; }

h4 { font size: 12px; }

#footter
{

background-color:#00CED1;
color:blue;
text-align:center;
}

/* dan seterusnya */

Simpanlah file tersebut dalam format css dan berilah nama dengan nama file misalnya: gayaku.css, pada folder yang sama dengan folder tempat menyimpan file dokumen html.


Untuk menerapkan script css tersebut ke dalam dokumen html, adalah dengan membuat link pada dokumen html yang merujuk pada file gayaku.css. Link tersebut ditempatkan diantara tag dan tag , dan harus dibuat pada tiap halaman.

<html>

<head>

<link rel="stylesheet"

type="text/css"

href="gayaku.css">

</head>

<body>


<div id="">

</div>


<div id="">

</div>


<div id="">

</div>


</body>

</html>

Cara internal style.

Menyisipkan css denagn cara internal style adalah dengan menyisipkan script css pada dokumen html yang ditempatkandi bagian header, yaitu diantara tag dan tag . Disini kita langsung menuliskan gaya/css untuk mengatur style halaman yang kita inginkan didahului dengan menuliskan tag <style> dan diakhiri dengan tag </style>.



Berikut ini adalah contoh menyisipkan script css pada dokumen dengan cara internal.

<html>

<head>

<style type="text/css">

body

{
bacground-color:#7fffd4;

/*7FFFD4=Aquamarine*/

font-size:12px;

padding-left:3px;

}

#header

{

border:1px #DC143C solid;

background-color:#00CED1;

color:blue;

text-align:center;

margin-top:20px;

}

#menu

{

background-color:#40E0D0;

text-align:left;

padding-left:6px;

border:1px #800080 solid;

}

h1 { font-size:24px; }

h2 { font-size:20px; }

h3 { font-size:16px; }

h4 { font size: 12px; }

#footter

{

background-color:#00CED1;

color:blue;

text-align:center;

}


</style>

</head>

<body>

<div id="">

</div>


<div id="">

</div>


<div id="">

</div>


</body>

</html>

Cara inline style.

Memasukan css kedalam dokumen html dengan cara inline style dapat dilakukan apabila kita menginginkan gaya/style pada kejadian tunggal yang unik atau khusus. Gaya inline diletakan pada elemen html yang relevan, misalnya kita memasukan gaya tulisan pada sebuah paragraf tertenu, maka properti css ini kita terapkan pada tag

dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css.

<p style="color:blue; margin-left:40px;"> ini sebuah paragraf
</p>

Contoh diatas dapat dijelaskan bahwa kita memberi gaya pada paragraf tersebut dengan properti css yaitu color: dan margin-left: dengan nilai/value masing-masing blue dan 40px. Dan gaya tersebut haya berlaku untuk paragraf ini saja, sedang paragraf yang lain tidak mengikuti gaya ini.



Contoh lainnya :

<body style="color:black; background-color:#FFD700; font-size:12px; padding:3px; "> menerapkan style css pada bagian tubuh

</body>

back to top

Belajar html Image.

ke bawah



Selain memperindah halaman, kadang gambar juga dibutuhkan sebagai ilustrasi pada artikel atau promosi suatu product. Tapi perlu diingat bahwa semakin banyak gambar yang disimpan pada halaman maka semakin lama saat loading.

Tag <img>, Atribut "src:" dan atribut "alt:"

Untuk menempatkan gambar pada halaman, dalam penulisan dokumen html digunakan tag <img>, atribut src dan atribut alt.

<img src="http://alamat_gambar/
gambarku.jpg" alt="gambarku" />

Syntact di atas merupakan contoh cara penulisan html untuk menempatkan gambar dengan nama gambarnya adalah: "gambarku.jpg" dan alamat gambarnya adalah: "http://alamat_gambar/".

• tag<img>: berfungsi untuk menempatkan gambar pada halaman.
• atribut src: (source=sumber) untuk menginformasikan dimana letak (sumber) gambar itu berada.
• atribut alt yang merupakan singkatan dari kata "alternate", berfungsi sebagai informasi alternatif apabila karena satu dan lain hal gambar yang kita tempatkan tidak muncul, sebagai gantinya adalah teks tersebut.
  
• tag <img> tidak menggunakan tag penutup, sebagai gantinya adalah ditutup pada tag awal yaitu dicantumkannya tanda slash ( / ) sebelun tanda >, yang sebelumnya harus diberi spasi.

Memposisikan gambar

Posisi gambar dapat diatur menggunakan atribut style dengan properti: float dan dengan value /nilai: left (untuk posisi sebelah kiri), dan right (untuk posisi sebelah kanan.)

<img src="http://...../gambarku.jpg" alt="gambarku" style="float:left \right" />

letak gambar sebelah kiri

letak gambar sebelah kanan.


Untuk meletakan gambar dengan posisi ditengah halaman, kita bisa memasukan elemen img pada blok elemen, misalnya pada tag <p>, elemen <div> tag <table> dan lainnya, menggunakan atribut style dengan properti text-align.

Sebagai contoh, misalnya kita menggunakan elemen div seperti ini.

<div style="text-align:center"> <img src="http://..../gambarku.jpg" alt="gambarku">
</div>

gambar terletak ditengah.

Menentukan ukuran gambar

Untuk menentukan ukuran gambar digunakan atribut width untuk menentukan lebar gambar dan atribut height untuk menentukan tinggi gambar. Sedangkan nilai ukurannya bisa menggunakan satuan pixel (px) atau persen (%).

<img src="http://..../gambarku.jpg" alt="gambarku" width="....px" height="....px" />

gambar diperkecil.

gambar diperbesar

Membuat bingkai gambar

Untuk membuat bingkai/border gambar kita perlu menambahkan properti border pada atribut style, dengan nilai dalam satuan "px" kemudian diikuti dengan tulisan solid dan nilai warna (sebagai warna bingkai), yang penulisannya diantarai dengan spasi.

Berikut ini adalah Contoh bagaimana membuat bingkai/border setebal:5px, dengan warna border: lemon.

<img src="http://...../gambarku.jpg" alt="gambarku" width="60%" style="border:5px solid #00FF00" />

hasilnya seperti berikut ini :

gambar dengan bingkai.

Gambar sebagai Background.

Cara memasang gambar sebagai background sama saja dengan background warna, kita hanya mengganti propertinya saja dengan "background-image" dengan value : "url(http://..../gambarku.jpg)" pada atribut style yang dapat dipasang pada tag <p>, tag <hx> dan tag <body>.

<p style="background-image:
url(http://.../gambarku.jpg)"> Tulisan pada paragraf ini dilatarbelakangi oleh gambar.
</p>

alamat gambar harus berada dalam tanda kurung.
hasilnya seperti ini :

Tulisan pada paragraf ini dilatarbelakangi oleh gambar.

Demikian juga untuk background gambar pada heading dan body.
back to top

Belajar HTML Hyperlink.

ke bawah

Hampir di semua halaman web kita akan menemukan link. Ya, tentu saja internet kan bekerja dari link ke link.
Sebuah link adalah yang apabila kita arahkan kursor diatasnya kemudian diklik maka akan mengarahkan kita pada tempat yang lain.
Dengan kata lain sebuah hyperlink atau disingkat dengan link adalah merupakan akses untuk menuju tempat lain pada halaman web.
Sebuah link dapat berupa text atau gambar.
Link didefinisikan menggunakan tag <a> dengan atribut href:


Tag <a> dapat digunakan untuk 2 tujuan :

• Untuk membuat link ke dokumen lain menggunakan atribut href.
• Untuk membuat bookmark dalam dokumen, menggunakan atribut name:

Contoh berikut adalah pola sederhana cara menulis kode html membuat link :

<a href="url"> text_link </a>

Link ke homepage situs lain.

Untuk membuat link ke homepage (halaman pertama) suatu situs web, kita kita cukup menuliskan alamat url-nya saja.

Sebagai contoh misalnya kita akan membuat link ke situs yahoo mobile , alamatnya adalah: "http://m.yahoo.com/". Maka untuk membuat link-nya adalah seperti berikut ini:

Link menuju situs

<a href="http://m.yahoo.com"> yahoo mobil </a>

hasilnya :
Link menuju situs yahoo mobil

Link ke bagian tertentu halaman yang sama.

Untuk membuat link menuju bagian atas halaman yang sama, caranya cukup mudah yaitu kita cukup menuliskan alamat "#top" setelah atribut href. Cara menulis html nya seperti berikut ini:

<a href="#top">
Kembali ke atas

</a>

hasilnya :

Kembali ke atas



Sedangkan untuk membuat link ke bagian bawah halaman, maka pada tempat yang akan dituju kita harus menempatkan nama dari tempat yang akan dituju oleh link tersebut. Misalnya kita akan memberi nama pada bagian paling bawah halaman dengan nama "bawah", maka pada bagian paling bawah halaman kita harus mencantumkan:

<a name="bawah"> </a>

Dan untuk membuat link nya seperti ini :

<a href="#bawah"> ke bawah </a>

hasilnya : ke bawah .

Link menuju topik tertentu pada situs yang sama.

Seperti halnya pada cara membuat link menuju bagian tertentu pada halaman yang sama di atas, untuk membuat Link menuju topik tertentu pada situs yang sama, kita juga harus menempatkan nama atau id pada judul topik yang akan dituju oleh link tersebut. Misalnya pada topik dengan nama judul: "cara membuat", maka sebelumnya kita harus menuliskan nama topik di sekitar judul topik tersebut (sebelum atau sesudah) seperti ini :

<a name="cara membuat"> </a>

Atau kita juga bisa menambahkan atribut "id" pada tag yang ditempati oleh judul topik tersebut, misalnya judul topik cara membuat berada pada tag h3, maka kita bisa menambahkan atribut id pada tag tersebut seperti ini :

<h3 id="cara membuat"> cara membuat </h3>

Dan untuk membuat linknya ditulis seperti ini :
Kita menuju ke topik :

<a href="#cara membuat"> cara membuat </a>

hasilnya :

Kita menuju ke topik: cara membuat

Cara diatas berlaku apabila tempat yang dituju berada pada folder yang sama dengan dokumen tempat pembuatan link. Tetapi jika folder dokumen yang dituju berbeda folder dengan tempat link dibuat, tetapi masih pada satu situs, maka harus ditulis "nama folder"nya diikuti dengan "nama topik" yang dituju.

<a href="/nama_folder/
#nama topik"> nama topik
</a>

Link menuju ke topik tertentu pada situs lain.

Untuk membuat link menuju topik tertentu pada situs lain, kita harus menulisnya dengan lengkap dan tepat, yaitu "alamat url" dan "nama topik"nya. Dan cara membuat link-nya seperti ini

<a href="http://alamat_url/
nama_topik.htm"> nama topik
</a>

Link menuju situs Aneka Cara dengan topik:
Belajar HTML/CSS

Email link

Email link dimaksudkan untuk akses mengirim pesan email dari alamat email milik pengunjung situs ke alamat email tempat layanan milik situs. Untuk membuat email link digunakan atribut mailto.

<a href="mailto: alamat-email"> link teks </a>

Jika ada pertanyaan, silakan kirim email ke bagian pelayanan kami.

Link dengan gambar.

Selain dengan teks biasa, untuk membuat link juga bisa menggunakan gambar, gambar yang digunakan dapat berformat gif, png jpg atau format lainnya.

<a href="http://url_situs">
<img src="alamat_gambar/
nama_gambar.jpg"
alt="gambar" />
</a>

Klik gambar berikut utuk menuju facebook mobile:

Thumbnail link.

Thumbnail link adalah sebuah link dengan gambar yang diperkecil untuk melihat gambar asli ( ukuran sebenarnya ) yang jauh lebih besar dari gambar yang digunakan pada link. Gambar duplikat yang ukurannya kecil yang digunakan untuk link ini disebut Thumbnail . Ukuran gambar yang sebenarnya itu baru dapat dilihat setelah kita meng-klik linknya.

<a href="lokasi gambar asli">
< img src="lokasi gambar thumbnail" alt="thumbnail" />
</a>

klik gambar ini untuk melihat gambar ukuran sebenarnya.

Target link.

Secara default sebuah link apabila diklik akan menempati jendela yang sama dengan jendela (halaman) tempat link itu berada, artinya halaman yang dituju oleh link tersebut akan menggantikan halaman tempat link yang di klik tadi berada.

Agar halaman dari sebuah link yang apabila di klik muncul di jendela baru ( halaman baru ) maka dalam pembuatan link harus ditambahkan atribut target="_blank" pada tag <a>.

<a href="alamat_url" target="_blank"> halaman-situs </a>

Lebih jelas tentang target link akan dibahas pada topik rmembuat Frame.

ke atas

Belajar html Format Teks.

ke bawah


Jika pada topik sebelumnya membahas tentang memberi variasi gaya/style pada huruf. Kali ini kita akan membahas tentang formasi dari teks atau tulisan dalam suatu kalimat, paragraf maupun alinea. Pembahasan ini meliputi perataan teks dalam paragraf, definisi dan lain-lain.

Perataan teks.

Alignment atau perataan teks dimaksudkan untuk mengatur posisi teks yang terdiri dari: rata kiri (left), rata kanan (right) dan rata tengah (center) dalam suatu paragraf atau tulisan.

Sebelumnya, yaitu pada versi html 3.2 ke bawah, untuk mengatur perataan teks digunakan atribut align,
namun atribut tersebut tidak lagi digunakan untuk perataan teks pada versi html 4 ke atas, sebagai gantinya digunakan atribut style dengan properti text-align:left (untuk rata kiri), text-align:right (untuk rata kanan) dan text-align:center (untuk teks berada ditengah). Kitapun bisa mengatur teks menjadi rata bagian kiri dan kanan, yaitu dengan properti text-align:justify pada atribut style.

Di bawah ini adalah bagaimana cara mengatur teks rata kiri, tengah, rata kanan dan rata kiri-kanan.

Mengatur teks rata kiri.

<p style="text align:left;">

Teks ini diatur dengan atribut style menjadi rata kiri.
</p>

Mengatur teks berpusat di tengah:

<p style="text-align:center">

Teks ini diatur dengan atribut style menjadi berpusat ditengah.

</p>

Mengatur teks rata kanan

<p style="text-align:right">

Teks ini diatur dengan atribut style menjadi rata kanan.
</p>

Mengatur teks rata kiri-kanan.

<p style="text-align:justify">

Text ini diatur dengan atribut style menjadi rata kiri dan rata kanan.
</p>

Di bawah ini adalah hasilnya yang tampil di halaman web.

Rata kiri.

Teks ini diatur dengan atribut style menjadi rata kiri.

Rata tengah.

Teks ini diatur menggunakan atribut style menjadi berpusat ditengah.

Rata kanan.

Teks ini diatur dengan atribut style menjadi rata kanan.

Rata kiri-kanan.

Teks diatur dengan atribut style menjadi rata kiri dan rata kanan.

Mengatur perataan teks ini, tidak hanya diterapkan pada elemen paragraf saja, tetapi kita juga bisa menerapkannya pada elemen body, heading, table, image dan lainya.


Berikut ini contoh mengatur heading berada di tengah.

<h2 style="text-align:center"> ini heading </h2>

hasilnya:

ini heading

Daftar Definisi.

Daftar definisi (Definition List) merupakan serangkaian atau kumpulan definisi dari kata atau istilah penting pada sebuah buku dan lainnya. Membuat daftar definisi dimaksudkan untuk memudahkan pembaca mencari pengertian dari kata atau istilah yang baru dikenalnya, juga untuk membuat penampilan menjadi menarik.

Berikut ini satu contoh penampilan definisi.

HTML

Merupakan singkatan dari HyperText Markup Language

Notepad

Adalah sebuah aplikasi untuk menulis dan mengedit teks.

Untuk membuat daftar definisi seperti pada pola teks diatas digunakan 3 (tiga) tag, yaitu tag <dl>, <dt> dan tag <dd>.

• 
  tag <dl> berguna untuk menandakan dimulainya pembuatan daftar definisi, dan tag </dl> sebagai akhir pembuatan daftar definisi.
• tag <dt> merupakan tempat untuk menyimpan teks/istilah yang akan diterangkan, dan teks ini akan berada pada posisi paragraf normal.
  
• 
  tag <dd> adalah tempat untuk menyimpan uraian definisi atau penjelasan. Karakter dari tag ini membuat teks menjorok ke dalam.
  
• 
  tag <dt> dan tag <dd> tidak menggunakan tag penutup.
  

Berikut ini cara menulis htmlnya.

<dl>

<dt> HTML

<dd> Merupakan singkataan dari HyperText Markup Language.

<dt> Notepad

<dd> Adalah sebuah aplikasi untuk menulis dan mengedit teks.
</dl>

Blockquote

Untuk membuat tulisan, dimana teks awal pada tiap baris masuk ke dalam, digunakan tag <blockquote>.

Berikut cara menulis htmlnya.

<blockquote>

Karakter dari tag blockquote
adalah membuat teks pada semua baris akan masuk ke dalam.

</blockquote>

Dan inilah hasilnya.

Karakter dari tag blockquote adalah membuat teks pada semua baris akan masuk ke dalam.

back to top

Belajar Html Format Huruf.

ke bawah

Pada html versi 3.0, untuk membuat variasi huruf seperti warna huruf, ukuran huruf, jenis huruf dll, diatur menggunakan tag <font>. Namun dengan perkembangannya, sejak terciptanya html v.4.01 dan seterusnya cara seperti itu sudah mulai ditinggalkan dan merupakan deprecated tag (usang). Dan sebagai gantinya yang lebih baik dan inovatif digunakan Atribut "style" . Atribut style dapat diterapkan pada tag <body>, tag <p> maupun tag <h> .

Di bawah ini adalah cara-cara menulis html dalam memformat huruf atau tulisan menggunakan atribut style

Jenis huruf.

Untuk menentukan jenis huruf digunakan atribut style dengan properti fon-family

<body style="font-family:verdana">

tulisan dg jenis huruf verdana
</body>

<p style="font-family:arial">

tulisan dg jenis huruf arial

</p>

Ukuran huruf.

Untuk menentukan ukuran huruf digunakan atribut style dengan properti font-size

<p style="font-size:12px">

membuat ukuran huruf 12px

</p>

hasilnya :

membuat ukuran huruf 12 pixel

ukuran huruf 16px

ukuran huruf 20px

ukuran huruf 24px

Menentukan ukuran huruf juga bisa dilakukan dengan mencantumkan nilai/value : big (ukuran huruf lebih besar dari ukuran normal) dan small (ukuran huruf lebih kecil dari ukuran normal).

Huruf lebih besar :

<p style="font-size:big">

ukuran huruf lebih besar dari ukuran normal
</p>

hasilnya :

ukuran huruf lebih besar dari ukuran normal

Huruf lebih kecil :

<p style="font-size:small">

ukuran huruf lebih kecil dari ukuran normal

</p>

hasilnya :

ukuran huruf lebih kecil dari ukuran normal

Huruf tebal.

Untuk membuat huruf tebal digunakan tag <strong> atau atribut style dengan properti font-weight

<p style="font-weight:bold">

tulisan dengan huruf tebal.

</p>

hasilnya :

tulisan dengan huruf tebal

Huruf miring.

Untuk membuat tulisan miring digunakan atribut style dengan properti font-style.

<p style="font-style:italic">

tulisan dg huruf miring

</p>

hasilnya :

tulisan dg huruf miring

garis bawah.

Untuk membuat tulisan bergaris bawah digunakan properti text-decoration yang diletakan pada atribut style.

<p style="text-decoration:underline">

tulisan bergaris bawah

</p>

hasilnya :

tulisan bergaris bawah

garis atas.

Untuk membuat text dengan garis atas, digunakan atribut style dengan properti text-decoration; dengan value overline

<.p style="text-decortation:overline">

tulisan dengan garis atas.

</p>

hasilnya :

teks dengan bergaris atas

Tulisan tercoret.

Untuk membuat huruf/tulisan tercoret, digunakan atribut style dengan properti text-decoration dengan value: line-through.

<p style="text-decoration:line-through">

tulisan ini tercoret

</p>

hasilnya :

tulisan ini tercoret.

Huruf berwarna.

Untuk membuat tulisan berwarna digunakan atribut style dengan properti color .

<p style="color:red">
Tulisan ini berwarna merah

</p>

hasilnya:

Tulisan ini
berwarna merah

Untuk nilai warna dapat ditulis dengan Nama warna (dalam B.Inggris), kode hexadecimal atau nilai rgb. Seperti contoh diatas nilai warna kita ganti dengan kode hexadecimal, maka hasilnya akan sama.

<p style="color:#FF0000;background-color:white;">
Tulisan ini berwarna merah
</p>

hasilnya :

Tulisan ini berwarna merah

Latar belakang warna

Untuk membuat tulisan berlatar belakang warna, digunakan properti background-color: yang diterapkan pada atribut style

<p style="background-color:yellow"> tulisan ini berlatarbelakang warna kuning </p>

hasllnya:

tulisan ini berlatarbelakang warna kuning

Menerapkan beberapa properti dalam satu deklarasi atribut style.

Dalam satu deklarasi atribut style, kita bisa memasukkan bebrapa properti sekaligus, misalnya: font-size, color, font-style, text-decoration dan lainnya :

<p style="font-size:10px; color:deeppink; text-decoration:underline; font-style:italic;">

tulisan dengan beberapa properti, yaitu: font-size, color, text-decoration dan font-style.

</p>

tulisan dengan beberapa properti, yaitu: font-size, color, text-decoration dan font-style.

Membuat huruf lebih keatas dan lebih kebawah

Huruf yang lebih ke atas dan yang lebih ke bawah dari posisi normal ini banyak digunakan untuk menuliskan rumus-rumus dalam matematika, kimia maupun keperluan lainnya.

Untuk membuat huruf lebih keatas dari posisi normal, digunakan tag <sup> (superscript), dan untuk membuat tulisan lebih ke bawah digunakan tag <sub> (subscript). Secara otomatis kedua tag ini membuat tulisan kebih kecil dari ukuran huruf normal.
Di bawah ini contoh cara penulisannya :

normal ^{lebih keatas} normal

normal _{lebih kebawah} normal

Rumus kimia: Air = H₂O.

Matematika: 12³ = 1728

Berikut hasilnya:


normal ^{lebih keatas} normal

normal _{lebih kebawah} normal

Rumus kimia: Air = H₂O.

Matematika: 12³ =1728.



back to top

Belajar html Atribut.

ke bawah

Elemen html dapat dipoles dengan berbagai gaya agar elemen tersebut dapat tampil menarik yang akan ditampilkan pada halaman browser. Ketika kita menginginkan sebuah paragraf dengan tulisan berwarna:merah, maka itulah identitas yang dicantumkan pada elemen paragraf tersebut. Pasangan warna dan merah itu juga menjelaskan tentang pararagraf tersebut , penjelasan informasi inilah yang disebut Atribut .

Penjelasan tentang atribut sebagai informasi pada elemen adalah :

• 
  bahwa elemen html dapat memiliki Atribut.
• atribut memberikan informasi tambahan tentang elemen, misalnya bagaimana sebuah elemen diberi warna, ukuran maupun style.
• atribut dalam penulisannya selalu ditentukan dalam tag awal.
• atribut datang dalam pasangan nama atribut dan nilai atribut . Misalnya sebuah elemen akan diberi gaya dengan "warna: merah" dan "size: 24 px" disini warna:dan size: merupakan nama atribut, sedangkan merah dan 24px adalah nilai/value dari atribut tadi.
• nilai atribut harus berada diantara dua tanda petik ( " ), boleh tanda petik ganda maupun tunggal.

.

<p style="color:red; font-size:24px">

paragraf dengan tulisan warna:merah dan ukuran:24px

</p>

yang tampil di browser spt ini:

paragraf dengan tulisan warna:merah ukuran:24px

Paragraf diatas memiliki atribut style dengan properti warna:merah dan size:24px.




Berikut ini adalah contoh bagaimana sebuah elemen heading diberi gaya dengan warna: biru .

<h3 style="color:blue">
ini judul
</h3>

hasilnya :

ini judul

elemen heading mempunyai atribut style, dengan properti warna:biru.


Contoh lain misalnya pada elemen link.

<a href="http://almat-link.com"> ini sebuah link </a>

contoh link ke :
yahoo mobile.
link dengan atribut style dan atribut href.


Elemen link didefinisikan dengan tag <a> sedangkan alamat link ditetapkan dengan atribut href.




Contoh berikutnya adalah elemen img


Untuk menempatkan gambar pada halaman digunakan tag <img>, alamat gambar ditetapkan dengan atriibut src: dan atribut alt: sebagai alternatif berupa tulisan ketika karena satu dan lain hal gambar tidak muncul.

<img src="alamat-gambar/gambar.jpg;" alt="ini-gambar;" />

Elemen img tidak disertai tag penutup, sebagai gantinya dicantumkan tanda slash ( / ) sebelum tanda tutup ( > ).


Back To Top

Belajar HTML Elemen

Element html

ke bawah

Pemahaman.

Dokumen html didefinisikan oleh elemen html . Sebuah elemen html adalah segala sesuatu yang terdapat dari tag awal sampai tag akhir .

<tag-awal>
konten elemen
</tag-akhir>

Sebuah elemen dimulai dengan tag awal dan diakhiri dengan tag-akhir, dan yang ada diantara itu adalah merupakan isi konten elemen.

<p> ini sebuah paragraf </p>

<a href="default.htm"> ini sebuah link </a>

kedua contoh di atas adalah elemen html:

• <p> dan <a> disebut tag pembuka.
• </p> dan </a> disebut tag penutup.
• sedangkan tulisan " ini sebuah paragraf" dan "ini sebuah link" adalah konten/isi dari elemen.
• Sebagian besar elemen memiliki atribut.
• sebuah atribut datang dengan pasangan nama atribut dan nilai atribut.

Beberapa elemen ada yang tidak disertai tag penutup, dan memiliki konten kosong. Elemen kosong ditutup pada tag awal.

<br /> ini adalah baris baru

<img src="alamat gambar.jpg" alt="gambar">

Elemen html

Sebagian besar elemen html dapat memuat elemen lainnya misalnya: elemen paragraf, elemen heading, elemen link dan lainya. Dokumen html terdiri dari elemen html dan konten yang ada didalamnya.

Contoh dokumen html :

<!DOCTYPE html>
<html>
<body>
<h1> ini sebuah judul </h1>
<p> ini paragraf pertama saya
</p>
</body>
</html>

Dokumen html diatas memuat 4 elemen, yaitu: elemen "html", elemen "body", elemen"heading" dan elemen "paragraf".

elemen body

<body>
<h1> ini sebuah judul </h1>
<p> ini paragraf pertama saya </p>
</body>

• elemen <body> mendefinisikan sebuah badan atau tubuh dari dokumen html.
• elemen dimulai dengan tag <body> dan diakhiri dengan tag </body>
• elemen tersebut diatas memuat 2 elemen lain yaitu elemen heading (<h1>) dan elemen paragraf (<p>) yang merupakan isi/konten elemen dari elemen body.

elemen heading :

Elemen heading diawali dengan tag <hx> dan diakhiri dengan tag </hx>, sedangkan isi konten heading adalah sebuah rangkaian teks yang berfungsi sebagai judul sebuah halaman.

<hx> ini sebuah judul </hx>

elemen paragraf :

<p>
ini paragraf pertama saya
</p>

• Elemen <p> mendefinisikan sebuah paragraf di dalam dokumen html.
• Elemen dimulai dengan tanda <p> dan diakhiri dengan tanda </p>
• Konten elemen yaitu tulisan : ini paragraf pertama saya.

Back To Top
Next : Atribut html

==o0o==

Belatar HTML Tag Dasar

Tag Dasar html

ke bawah

Pengertian tag.




Seperti telah dibahas sedikit mengenai tag dalam html, bahwa Tag merupakan bahasa penandaan standar yang membuat text ASCII menjadi sebuah dokumen html. Dengankata lain dengan tag html kita bisa memoles atau memark-up file *.txt menjadi sebuah dokumen html yang dapat diterjemahkan oleh browser, sehingga browser akan menampilkannya pada halaman web.



Sebuah tag ditandai dengan tanda " < " (di awal tag) dan tanda " > " (di akhir tag). Dan diantara kedua tanda tersebut adalah Nama elemen. Sebagai contoh untuk tag body, kita dapat menulisnya seperti : <body>


Sebuah tag umumnya berpasangan, yaitu tag pembuka dan tag penutup. Misalnya tag body dapat ditulis <body> sebagai tag pembuka, dan </body> sebagai tag penutupnya, dimana tag penutup ditandai dengan dicantumkannya tanda slash (garis miring) sebelum nama tag. Namun ada juga tag yang tidak memakai tag penutup, misalnya tag <br>, tag <img> dan beberapa tag lainnya. Kedepan tampaknya setiap penulisan tag tidak dibenarkan tanpa tag penutup, sebagai solusinya pada tag tsb dicantumkan tanda slash yang diletakkan setelah nama tag dan spasi, misalnya: <br /> untuk breakline dan <hr /> untuk horizontal line.





Struktur dasar dokumen html



Agar browser menampilkan sebuah halaman dari sebuah dokumen html, maka struktur minimal dari sebuah dokumen html dapat dicontohkan sbb.

<html>

<head>

<title> ini titel halaman </title>

</head>

<body>
tulisan ini akan tampak dalam browser.

</body>

</html>

Dari contoh tulisan dokumen html diatas dapat dijelaskan sbb :


Tag <html>



Tag <html> dan </html> diletakkan diawal dan diakhir atau mengapit seluruh isi dokumen. Tag ini mendefinisikan dan memberitahukan pada browser bahwa isi yang ada didalamnya adalah sebuah dokumen html. Tanpa kedua tag ini kita tidak akan menemukan apa-apa dalam browser/web.



Tag <head>



Tag <head> dan </head>. berguna untuk menampilkan titel halaman . Nama yang terdapat pada tag ini tidak akan terlihat pada halaman web, tetapi jika kita melihat bagian paling atas, kita akan melihat tulisan tsb, tetapi bukan bagian dari isi dokumen. Dan hanya merupakan nama dari halaman. Mencantumkan nama halaman ditempatkan diantara tag <title> dan </title>.



Tag <body>



Isi dokumen yang sesungguhnya berada diantara tag <body> dan </body>. Konten yang ada diantara tag ini akan ditampilkan pada halaman web. Kita bisa menempatkan berbaga konten seperti: artikel (file text biasa), gambar (image), gambar animasi, grafik dan konten lainnya yang ingin ditampilkan dihalaman web.




Selain tag utama diatas, terdapat juga tag-tag html penting lainnya yang diperlu
kan untuk membangun sebuah Dokumen html. Dibawah ini beberapa tag yang banyak digunakan dalam membuat dokumen html.


Heading.



Heading atau judul didefinisikan dengan tag <h1> sampai </h6>

<h1> mendefinisikan ukuran huruf yang paling besar dan <h6> mendefinisikan ukuran huruf yang paling kecil.

<hx> ini judul hx </hx>

x =1, 2, 3, 4, 5, 6.

ini judul h1

ini judul h2

ini judul h3

ini judul h4

ini judul h5

ini judul h6

Perlu diketahui, bahwa browser akan secara otomatis memberikan satu baris kosong sebelum dan sesudah heading. Tag Heading dalam pemakaiannya hanya diperuntukkan untuk membuat heading, jangan membuat tag heading untuk membuat tulisan tebal (bold) atau tulisan besar (big). Akan tetapi kita bisa menambahkan gaya/style pada heading, misalnya memberi warna, garis-bawah maupun huruf miring menggunakan atribut style .

.

<hx style="color:red;font-style:italic;">
heading dengan style.
</hx>

judul dengan penambahan style.


paragraf.



Paragraf didefinisikan dengan tag <p>.

<p> ini sebuah paragraf </p>

Pada tag paragraf dapat memiliki atribut yang memberi gaya atau style pada paragraf tersebut yaitu atribut style.

<p style="color:red">
ini paragraf dengan tulisan berwarna merah.

</p>

ini paragraf dengan tulisan berwarna merah

Seperti halnya pada heading, browser juga secara otomatis memberikan satu baris kosong sebelum dan sesudah paragraf.


Back To Top


Next :
Elemen html

==o0o==

Belaja HTML Pendahuluan

Pengenalan html.

ke bawah

next.--->

HTML.

HTML ( Hypertext Markup Language ) adalah bahasa penandaan standar untuk membuat suatu dokumen html. Dokument html ini tersusun secara terpadu dari kode-kode singkat tertenu yang nantinya dapat diterjemahkan oleh browser, sehingga dengan perintah dari kode-kode tsb, browser akan menampilkannya pada halaman web yang dapat dibaca (berupa text biasa), dilihat (file gambr dan video),didengar (file suara) maupun berupa kontent lainnya. Dengan html, teks ASCII ( file *.txt ) di mark-up atau dipoles menggunakan kode-kode tertentu (yang disebut tag ) menjadi sebuah dokumen html ( file *.htm atau *.html )


Standar dari html mengacu pada standar yang dibuat oleh W3C , sebuah konsorsium yang menangani masalah tentang html. Dimana dalam setiap penyusunan dokumen harus mengacu pada standar yang direkomendasikan oleh konsorsium tersebut.

Dalam perkembangannya, standar penulisan dokumen html kini sudah berada pada html versi 5.0, tentu saja dalam membuat dokumen html, kita harus mengacu dan beradaptasi dengan versi yang baru tsb. Jika tidak maka dikhawatirkan dokumen tsb tidak dapat tampil pada browser, karena browser-brows juga terus berkembang.

Notepad :

Dalam belajar menulis dokumen html sebaiknya langsung dipraktekkan dengan mengetikkan, meng-copy paste text-text html sehingga menjadi terbiasa dan hafal tentang kode-kode html. Untuk belajar menulis html kita menggunakan text editor yang sederhana dan mudah dalam penggunaannya yaitu Notepad .

Bukalah program Notepad anda dengan meng-klik : Start > Programes > Accessories lalu Notepad . Kemudian mulailah mengetikkan karakter demi karakter sehingga terbentuk suatu dokumen html.

Pengenalan kode html :

Sekarang mulailah dengan mengetikkan seperti yang terlihat dibawah ini.

< html >

</html>

Cobalah anda perhatikan dua baris tulisan aneh diatas. Tiap baris tulisan diatas disebut Tag . Tiap tag diapit oleh dua tanda kurung siku ( < dan > ) dan diantara keduanya ditulis nama dari tag tersebut yang disebut Elemen. Sebuah elemen umumnya terdiri dari tag pembuka dan tag penutup. Pada contoh diatas pada baris pertama <html> disebut Tag pembuka dan pada baris kedua </html> disebut Tag penutup ( yang ditandai dengan tanda slash atau garis miring sebelum nama tag nya )


Sekarang cobalah tambahkan pada contoh kode-kode diatas sehingga menjadi seperti ini :

<html>

<head>

<title> latihan1 </title>

</head>

<body>

<h1> ini judul pertama saya </h1>

<p> dan ini paragraf pertamanya </p>

</body>

</html>

Contoh html di atas merupakan Struktur dasar dari struktur penulisan html, dan dapat dijelaskan sebagai berikut :

Tag <html> dan </html> terlihat diletakan diawal dan diakhir seluruh isi dokumen html. Tag ini mendeskripsikan dan memberitahukan bahwa isi yang ada didalamnya adalah dokumen html. Tanpa kedua tag ini maka browser tidak akan menampilan apa-apa.

Tag <head> dan </head> berfungsi menempatkan title dari halaman yang diletakkan diantara tag <title> dan </title>. Tulisan title ini tidak menyatu dengan halaman web, tapi akan terlihat dibagian paling atas halaman browser dan memberitahukan inilah nama dari halaman web.

Isi dokumen yang tampil pada halaman web sesungguhnya berada diantara tag <body> dan </body>. Didalam tag inilah kita menempatkan isi dari halaman yang ingin ditampilkan, bisa berupa artikel atau teks biasa, gambar, animasi dan lain-lain.

Selanjutnya simpanlah file html diatas: klik menu file lalu save as . Pada kotak dialog yang muncul klik anak panah kecil di ujung kanan kotak save as type > pilih all file (*.*) . Setelah itu isilah File name dengan nama file yang diinginkan, misalnya : latihan1.htm. Jangan lupa menambahkan .htm dibelakang nama file tsb. Kemudian klik tombol save .
Kini file tersebut tersimpan sebagai Dokumen html.
Tutuplah program notepad, lalu buka program Browser .

Klik Menu > File lalu klik Open . Pada kotak Dialog, klik tombol Browse. Cari dan pilih file latihan1.htm yang tadi disimpan lalu klik Open . Maka muncullah dihalaman web anda tulisan :

ini judul pertama saya dan ini paragraf pertamanya

Begitulah cara kerja html, penggunaan Notepad dan bagaimana Browser menampilkan Dokumen html pada halaman web.



Back To Top

Next :
Tag Dasar

==o0o==