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 css Pendahuluan.

Memahami tentang script css memudahkan dalam memformat dokumen htm.

Assalaamu'alaikuum wr.wb.

Setelah sebelumnya saya membuat posting tentang Belajar html , dalam kesempatan ini kita lanjutkan dengan Belajar CSS.

Latar belakang.

CSS merupakan kependekan dari Cascading Steel Sheet yang diciptakan oleh W3C (World Wide Consorcium ) sebuah consorcium yang dibentuk untuk menangani masalah-masalah yang timbul pada saat html berada pada versi 3.2.

Pada html versi 3.2 ini dalam penggunaannya menjadi masalah besar bagi para pengembang web, karena untuk memberi gaya/style pada rancangan dokumen html, para pengembang harus menuliskan tag-tag , properti maupun atribut secara berulang-ulang untuk setiap style yang sama, hal ini menimbulkan kerepotaan pada saat membangun dokumen html dalam skala besar, karena akan menjadi sangat kompleks,rumit dan menjadi sangat mahal.

CSS mulai dikembangkan ketika html berada pada versi 4.0, tag-tag yang ada pada versi sebelumnya mulai ditinggalkan pemakaiannya dan diganti dengan cara yang lebih baik dan simple. CSS memudahkan dalam mendefinisikan penulisan dalam membuat dokumen html.
Dengan css pekerjaan html menjadi ramping, sehingga sangat membantu bagi para pengembang web.
Secara terpisah file css disimpan dalam format *.css .
Sebelum mempelajari CSS, seharusnya kita sudah mahir dan memahami cara-menulis html, karena css bukanlah materi yang berdiri sendiri, dan css tidak dapat membangun web sendiri, tetapi css membantu mempermudah dalam memberi gaya pada dokumen html. Jadi yang membangun halaman web adalah html, itulah sebabnya kita harus memahami cara-cara menulis html sebelum mempelajari css. Untuk belajar menulis html, silakan kunjungi Belajar html disini.

Contoh CSS

Source code:

<html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 24px;}
h2 {color: blue;}
p {margin-left: 50px;}
</ style>
</ head >
<body>
<h1> Header ini adalah 24px </h1>
<h2> Header ini berwarna biru</h2>
<p> ayat ini memiliki margin kiri 50 pixel </ p>
</ body>
</html>

Sintaks css.

Susunan sintaks css biasanya terdiri dari selector, properti dan value. Untuk jelasnya, cara penulisan css sintaks dapat digambarkan sebagai berikut:

selector { declaration; }

selector { properti:value; }

• selector (pemilih): adalah nama elemen html yang dipilih untuk diatur atau diberi gaya. Misalnya elemen: body, heading, paragraf dan lainnya.
• declaration (deklarasi) merupakan rincian gaya/style yang akan diberikan untuk selector.
  • Declaration terdiri dari pasangan properti dan value/nilai
  • setiap declaration harus diakhiri dengan tanda titik-koma ( ; ). Dan kelompok declaration harus berada diantara dua tanda kurung-kurawa ( { dan } )
• properti adalah atribut style atau gaya yang ingin anda ubah. Dan setiap properti memiliki nilai atau value.

Contoh css :

body { background-color:lime; }

h1 { font-familly:verdana; }

p { color:blue; font-size:16px; }

Dari 3 contoh sintaks css di atas dapat dijelaskan bahwa body, h1 dan p adalah selector yang dipilih untuk diberi gaya, "background-color:", "font-family:", "color:", "font-size:" adalah properti, sedangkan yang merupakan nilai/value dari properti tadi adalah "lime", "verdana","blue" ,dan "16px".

Satu hal yang harus diingat, jangan menyimpan spasi diantara pasangan value dengan satuannya, misalnya :

p { font-size:12 px }

Contoh diatas dapat kita lihat diantara teks value "12" dan teks satuan "px" terdapat satu spasi, ini tidak dibenarkan. Dan cara penulisan yang benar adalah :

p { font-size:12px; }

Komentar css.

Seperti halnya pada html, pada dokumen css juga kita bisa menyelipkan komentar pada dokument. Komentar memudahkan kita dalam mengedit kode-kode css dikemudian hari apabila serasa ingin mengeditnya.

Komentar dalam css, cara penulisannya dimulai dengan tanda " /* ", dan diakhiri dengan tanda " */ ". Kita dapat menyimpan komentar atau keterangan diantara kedua tanda itu. Kita dapat menempatkan komentar dimanapun yang kita perlukan, bahkan kita bisa menempatkannya diantara properti dalam deklarasi.
Contoh :

/* ini sebuah komentar */
p { text-align:center;
/* ini komentar yang lain */
color:blue; font-family:arial; }

Demikianlah sekedar pendahuluan tentang belajar css. Dan untuk melanjutkan ke materi berikutnya, silakan buka tentang Belajar css Id dan Class.
Semoga berhasil.

back to top
kembali ke atas

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

Cara Membuat file Dokumen html/css Menggunakan X-plore pada S60v3v5.

ke bawah
Tak ada rotan, akarpun jadi.
Tak ada Notepad, x-plole pun bisa.
Assalaamu'alaikum....
Pada kesempatan kali ini, saya share mengenai manfaat lain dari aplikasi X-plore yang ternyata selain digunakan sebagai manager file yang terdapat pada handphone, juga dapat digunakan sebagai text editor bisa menggantikan Notepad pada handphone.
Dengan sistim edit, dengan x-plore ini kita dapat membuat file dokumen html, dokumen css ataupun membuat halaman web.
Adapun langkah-langkah cara membuat dokumen html/css dapat diuraikan sebagai berikut:
pertama: anda harus punya file yang berekstensikan atau format .txt maupun format .xml.
Untuk mendapatkan file .txt atau file .xml, anda bisa meng-copy file .txt atau .xml yang ada pada dokumen file handphone, bisa dicari menggunakan x-plore pada folder private baik pada drive C maupun drive E, lalu di copy dan ditempatkan pada folder kosong (atau membuat folder baru).

kedua: ubahlah nama/rename file ekstensi txt atau xml tadi menjadi file dengan nama (terserah anda) tetapi dengan ekstensi .htm , .html ataupun .css tergantung kebutuhan anda. (jangan lupa memberi tanda titik ( . ) sesudah nama file sebelum nama ekstensi (misalnya: "halaman.htm ", "black.css" ).

ketiga: masih menggunakan x-plore, arahkan kursor pada file yang sudah di-rename tadi ->> klik option ->> klik file ->> arahkan kursor pada tulisan Edit ->> lalu klik.

Maka akan terbuka isi dari file yang telah anda copy dan rename tadi. Lalu hapus dan bersihkan.

keempat: Setelah bersih, mulailah membuat dokumen html maupun css dengan mengetikkan kode-kode html maupun css hingga selesai.

kelima: Setelah selesai mengetikkan isi dokumen ->> klik Option lalu arahkan kursor ke bawah ->> lalu klik Save.

Selesai sudah anda membuat dokumen html maupun css dengan memanfaatkan aplikasi x-plore yang difungsikan sebagai teks editor.
Semoga info kecil ini bermanfaat buat kita semua. kembali ke atas

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

Cara Menempel Banyak Gambar Dalam Satu Bidang Dengan IDesigner.

ke bawah




Assalaamu'alaikum....



Kali ini post yang akan saya sajikan adalah cara menempelkan banyak gambar dalam satu bidang menggunakan aplikasi handphone symbian s60 yaitu: IDesigner atau Image Designer seperti gambar berikut ini.





Bagi yang membutuhkan aplikasi IDesigner dalam bahasa INA silakan klik download di bawah ini.





Berikut ini langkah-langkahnya:


pertama : Buatlah bidang kosong dengan ukuran yang dapat menampung gambar-gambar yang akan ditempel.

Caranya:


(i). Buka IDesigner >> klik Options (softkey kiri) >> klik File >> lalu klik pada no.4 (Buat gambar baru). Maka akan muncul text area, isilah sesuai ukuran lebar dan tinggi bidang yang dikehendaki (misalnya: 240x320, 300x400, 480x640 dsb). Jangan lupa menambahkan ukuran jarak antar gambar. >> lalu klik Ok.






(ii). Simpan gambar dengan meng-klik softkey kiri >> klik File >> lalu klik no.6 (Simpan gambar),>> lalu klik ok.







Maka akan muncul pilihan folder tempat menyimpan gambar. >> lalu klik softkey kiri >> klik pada "Simpan gambar". Maka akan muncul textarea lalu tulis nama file >> klik ok .>> lalu pilih format file (pilih saja jpeg) >> klik ok.





Akan muncul textarea untuk menentukan kwalitas gambar, tulis saja 100 >> klik ok.





Maka bidang kosongpun tersimpan.


kedua: Menempel gambar pada bidang kosong yang telah di simpan tadi.

Sebelum gambar-gambar ditempelkan, sebaiknya gambar-gambar tersebut disamakan ukurannya agar hasilnya rapi.


Selanjutnya kita akan menempel gambar-gambar pada bidang kosong yang telah dibuat satu per satu.


Langkah-langkahnya:


Buka IDesigner lalu klik sofkey kiri >> klik File >> klik Buka/open lalu pilih gambar.





Kemudian klik angka 1 pada keypad hp lalu pilih dan klik icon kotak strip-strip.





Arahkan kursor dipojok kiri atas klik tombol tengah1 kali >> geser ke kanan lalu geser lagi ke bawah sampai pojok kanan bawah, lalu klik 1 kali, nanti akan muncul pilihan. Kemudian klik Kopi.





Selanjutnya tekan tombol sofkey kiri, pilih dan klik File >> klik open, dan cari gambar bidang kosong yang tadi dibuat lalu klik 1 kali.




Kemudian tekan sofkey kanan lalu pilih dan klik Tempel/Paste. Bisa di geser untuk mengatur posisi lalu klik tombol tengah 1 kali.




Jengjreeeng...satu buah gambar telah ditempelkan.





Sebelum menempelkan gambar-gambar berikutnya, simpan dulu gambar tadi yang telah menempel satu gambar >> klik softkey kiri >> klik File >> klik Simpan gambar.





Lakukanlah cara yang sama seperti di atas untuk menempel gambar-gambar selanjutnya.





Demikianlah cara menempel banyak gambar dalam satu bidang menggunakan Aplikasi IDesigner.


Semoga bermanfaat.




kembali ke atas

Mengganti Background Gambar Denagan IDesigner.

ke bawah



Dalam kesempatan kali ini saya ingin menyajikan dan share salah satu cara mengganti background gambar menggunakan IDesigner.


Mungkin bagi anda yang suka mengkoleksi gambar-gambar ataupun photo atau sekedar berkreasi dalam mendesain gambar/photo anda boleh mencoba cara ini untuk mengganti-ganti background-nya sesuai selera anda sesuka hati yaitu dengan menggunakan aplikasi ini.


Untuk yang belum memiliki aplikasinya silakan klik download di bawah ini.





Untuk mengganti background gambar tentu saja kita siapkan dua buah gambar yaitu gambar yang akan diganti backgroundnya dan gambar sebagai pengganti background. Dalam hal ini kedua gambar background sebaiknya mempunyai ukuran yang sama, agar rapi dan pas dalam penempelan gambarnya.


Semisal kita akan mengganti background gambar di bawah ini dengan background yang lain.





Langkah-langkahnya adalah:


Buka aplikasi idesigner >> klik menu softkey kiri >> klik file >> klik open/buka >> lalu cari gambar yang akan diganti backgroundnya. Dan klik pada gambar tersebut.

Setelah muncul gambarnya kemudian >> klik pada angka 1 keypad hp >> lalu arahkan kursor pada icon seperti pada gambar berikut untuk ditandai .





Arah kan kursor pada tepi gambar yang akan diambil >> klik tombol tengah 1 kali dan mulailah menandai mengelilingi tepi gambar dengan menggeser-geserkan kursor.

Perhatikan:

>> untuk berbelok arah tanda, klik dulu tobol tengah kemudian geser kursor.

>> jangan mengklik tombol tengah dua kali pada satu titik jika penandaan belum selesai, karena akan otomatis mengakhiri penandaan.

Setelah selesai penandaan pada sekeliling gambar, lalu klik 1 kali, maka akan muncul pilihan, pilih kopi dan klik 1 kali.





Selanjutnya klik softkey kiri >> klik file >> klik open/buka, lalu cari gambar yang akan dijadikan background baru lalu klik tombol tengah.





Setelah muncul gambarnya, lalu klik softkey kanan, maka akan muncul pilihan >> dan klik paste/tempel.>>lalu klik tombol tengah 1 kali.





>> lalu klik tombol tengah 1 kali. Geser kursor untuk mengatur posisi gambar.





Berikutnya simpan gambar: >> klik softkey kiri >> klik file >> klik open/buka >> pilih dan klik "simpan dengan format lain" >> pilih folder penyimpanan >> klik softkey kiri >> klik simpan gambar.


Selanjutnya anda akan dihadapkan pada pilihan dan isian, yaitu : nama file baru, format file dan lainnya. Silakan isi dan pilih sesuai keinginan anda.

Selesai.


Demikianlah uraian tentang mengganti background gambar menggunakan image designer.


Semoga bermanfaat.


oleh : Nurar


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