Gusdwi dot Info » belajar html

Pengertian Tag Span pada HTML

Gusdwi — Thu, 16 Jul 2009 04:28:35 +0000

Apa itu tag Span?
Penggunaan Tags dalam HTML tidak akan memberikan efek pada elemen bila dilihat dalam browser, kecuali diberikan style khusus seperti Inline CSS , ID atau CLASS selector, Contoh: (…).
Tag biasanya digunakan pada elemen-elemen yang lain di antara tag HTML.

Misalnya ada sebuah paragraf yang berbunyi seperti ini

Buah Apel biasanya berwarna Hijau Muda

Untuk menambahkan efek yang berbeda pada kata Hijau Muda , kita tambahkan tag span dengan inline style seperti ini:

Buah Apel biasanya berwarnaa1ee55; font-size:1.6em; font-weight:bold;“>Hijau Muda

Jadi, jika dilihat pada browser anda akan menjadi:

Buah Apel biasanya berwarna Hijau muda

Pengertian Div pada HTML

Gusdwi — Wed, 15 Jul 2009 04:11:30 +0000

Kalau kita perhatikan source Code sebuah website saat ini, Tag HTML yang paling banyak ditemukan adalah tag div. Masih Banyak orang yang belum mengetahui secara jelas tentang fungsi tag div, Saya sendiri sulit mengartikan secara jelas dalam bahasa indonesia tentang div walaupun saya paham cara membuat dan meletakan tag div tersebut. Mungkin saja setiap orang akan mempunyai pengertian yang berbeda tentang div namun saya yakin maksudnya sama.

Setelah saya Browsing di beberapa website yang berhubungan dengan div, saya dapat menyimpulkan bahwa tag div yang dimaksud adalah singkatan dari Division yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah para web developer memberi style pada setiap bagiannya. Misalnya, sebuah halaman Web yang terdiri dari 4 bagian: Header,Side Bar, Content dan Footer. Untuk mengelompokannya kita dapat menggunakan tag div. Contoh:

Header

Side Bar

Content

Footer

Kalau kita lihat pada Browser kode HTML diatas akan menjadi seperti ini:

Header

Side Bar

Content

Footer

Untuk membedakan masing masing bagian, kita harus memberi Style pada setiap tag div dengan CSS. Contoh:

pengertian div tag

Header

Side Bar

Content

Footer

Hasil yang terlihat pada browser akan menjadi seperti ini:

Header

Side Bar

Content

Footer

Membuat Layout Web dengan Div.
Tag div juga dapat berfungsi untuk menggantikan fungsi Table. Maksudnya, layout halaman web dengan Table adalah cara kuno yang mulai ditinggalkan dan sebagai penggantinya adalah dengan menggunakan tag div. Alasannya adalah:

Kode HTML menjadi lebih pendek daripada menggunakan Table.
Ukuran File menjadi lebih kecil.
Lebih Fleksibel karena tidak dibatasi oleh baris dan Kolom.
Lebih competible pada semua browser saat ini.

Jadi, jika anda ingin membuat layout halaman web tanpa Table gunakanlah cara yang seperti saya contohkan diatas.

Didalam tag div kita juga bisa meletakan tag div lagi, dan elemen HTML yang lainnya seperti gambar, animasi atau video.

How to create a link on the html

Gusdwi — Tue, 14 Jul 2009 04:26:29 +0000

Link is an HTML element is most important to create a web page.
Links are made to the document on the web with other documents. How do I create a link in HTML?
Link on the HTML tag is created with a word that word that given link

Here I try to create html code for the link:

First, you must determine which sentence will be given a link on your web page.
for example the word “email_mu@gmail.com” in the sentence:

If you have any questions about our website, you can Contact Us via E-mail: email_mu@gmail.com

Second, among the words that will be given feedback link link tags as follows:

If you have any questions about our website, you can Contact Us via E-mail:

email_mu@gmail.com

and finally, if you see in the browser will be like below:

If you have any questions about our website, you can Contact Us via E-mail: email_mu@gmail.com

Mengatur style table HTML dengan CSS

Gusdwi — Wed, 01 Jul 2009 00:42:05 +0000

Secara default, Biasanya Table pada HTML akan tampak pada browser seperti contoh yang ditampilkan pada Tag untuk membuat Table. Tetapi dengan menggunakan CSS Table, kita dapat mengatur elemen elemen yang ada didalam Table seperti Teks, Gambar dan Backgroundnya. Misalnya kita ingin membuat Table seperti dibawah ini:

Daftar Siswa Kelas IIIA
Nama	Alamat	Tgl Lahir
Andy. R	Jl. Setia Budi, 20A	22-4-1992
Budianto	Jl. Merdeka, 23B	12-2-1993
Brandy. W	Jl. Anyelir, 11C	10-1-1992
Cyntia Dewi	Jl. Pahlawan. 10C	13-8-1993

Solusinya adalah sebagai berikut:
Pertama, kita buat kode HTML nya dengan menggunakan Class dan ID Selector, contoh:

Daftar Siswa Kelas IIIA

Nama Alamat Tgl Lahir

Andy. R>
Jl. Setia Budi, 20A 22-4-1992>

Budianto>
Jl. Merdeka, 23B 12-2-1993>

Brandy. W>
Jl. Anyelir, 11C 10-1-1992

Cyntia Dewi Jl. Pahlawan. 10C 13-8-1993

Kedua, kita buatkan file CSS nya seperti berikut:

table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}

table.listItem th {
font-size:1.4em;}

table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}

table .oldRow {
background:#009999;}

table .evenRow {
background: #00CC99;}

Nah, Coba anda Download kode HTML dan Download kode CSS diatas, dan jika anda lihat dibrowser maka hasilnya akan seperti Table di atas.
Selamat Mencoba….!

Membuat Form dengan Tag HTML

Gusdwi — Wed, 01 Jul 2009 00:21:30 +0000

Form adalah salah satu bagian penting dalam sebuah halaman web. Ketika kita mengisi alamat email, mengisi komentar, ataupun kita login pada halaman web, sebenarnya elemen tersebut adalah Form.
Sebelum kita ingin merancang sebuah Form, ada beberapa komponen didalam Form yang harus kita pahami cara pembuatannya menggunakan kode HTML.
Berikut adalah daftar komponent pada Form :

Contoh Komponen	Nama Komponen
	Text Field/Text Box
Musik Olah Raga Membaca Novel	Check Box
Laki – Laki Perempuan	Radio Button
	Text Area
Musik Olah Raga	Radio Group
	Jump Menu
	Button
Catatan Penting Untuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya…	Fieldset

1. Membuat Text Field

Kode HTML untuk membuat Text Field didalam Form adalah sebagai berikut :

2. Membuat Check Box

Kode HTML untuk membuat Check Box didalam Form adalah sebagai berikut :

Musik
Olah Raga
Membaca Novel

3. Membuat Radio Button

Kode HTML untuk membuat Radio Button didalam Form adalah sebagai berikut :

Laki – Laki
Perempuan

4. Membuat Text Area

Kode HTML untuk membuat Text Area didalam Form adalah sebagai berikut :

5. Membuat Radio Group

Kode HTML untuk membuat Radio Group didalam Form adalah sebagai berikut :

Musik
Olah Raga

6. Membuat Jump Menu

Kode HTML untuk membuat Jump Menu didalam Form adalah sebagai berikut :

7. Membuat Button

Kode HTML untuk membuat Button didalam Form adalah sebagai berikut :

8. Membuat Fieldset

Kode HTML untuk membuat Fieldset didalam Form adalah sebagai berikut :

Catatan Penting
Untuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya…

Form-form diatas adalah contoh form yang sederhana, karena dari tag tag html diatas bisa dikembangkan lagi menjadi form dinamis bila digabung dengan form php atau javascript form.

Menggabungkan Baris/Kolom pada Table HTML

Gusdwi — Fri, 26 Jun 2009 01:24:49 +0000

Table tidak selalu harus berbentuk kotak yang berbaris sejajar secara horizontal dan vertical, tetapi bisa juga kita buat dengan bentuk yang bervariasi, misalnya pada baris pertama berisi 1 kolom, baris kedua berisi 3 kolom dan baris ketiga berisi 2 kolom. Untuk menggabungkan Kolom kita memakai atribut colspan pada tag TD sedangkan untuk menggabungkan Baris kita memakai atribut rowspan.

Kalau anda bingung membayangkan, cobalah lihat contoh TABLE dibawah ini:

HEADER
LEFT BOX	CONTENT	RIGHT BOX
	FOOTER

Untuk membuat Table seperti diatas, pertama anda harus lihat berapa jumlah kolom terbanyak pada Table kemudian digabungkan menjadi 1 kolom. pada kasus diatas, kolom terbanyak adalah 3, kemudian kita buat kodenya seperti berikut:

Selanjutnya kita lihat pada baris kedua, berapa banyak baris yang digabung menjadi 1 baris?
pada kasus diatas ada 2 baris, selanjutnya kita buat kode seperti berikut:

Dan langkah terakhir, kita perhatikan sekali lagi pada baris ketiga, berapa kolom yang di gabung menjadi satu kolom?
pada kasus ini adalah 2 kolom, jadi kodenya akan menjadi seperti ini:

HEADER

LEFT BOX CONTENT RIGHT BOX

FOOTER

Jadi kalau digabungkan kode diatas akan menjadi seperti berikut:

HEADER

LEFT BOX CONTENT RIGHT BOX

FOOTER

Hasilnya akan menjadi sebuah Table dengan kolom bervariasi seperti contoh diatas.
Nah, kira kira seperti itu penjelasan saya tentang cara menggabungkan kolom atau baris pada Table HTML.
SELAMAT MENCOBA……