AMBAR
Mengenai Saya
HTML
Author: DIAH AMBARWATI
Minggu, 08 Mei 2011
PENGERTIAN WEB & HTML
Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer
0
komentar
Hypertext Markup Language ( HTML ) adalah suatu system penulisan perintah dan formatting hypertext sederhana yang ditulis kedalam dokumen teks ASCII agar dapat menghasilkan tampilan visual yang terintegrasi. Dengan kata lain, dokumen yang dibuat dalam aplikasi pengolah kata dan disimpan ke dalam format ASCII normal sehingga menjadi homepage dengan tambahan perintah-perintah HTML. Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menetukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Dengan menggunakan perintah-perintah HTML memungkinkan user untuk melakukan fungsi-fungsi berikut ini :
l Menentukan ukuran dan alur teks
l Mengintegrasikan gambar dengan teks ( in-line )
l Membuat links
l Mengintegrasikan file audio dan video Membuat form interaktif
HTML lebih menekankan pada penggambaran komponen-komponen, struktur dan formatting di dalam halaman web daripada menentukan penampilannya. Sedangkan web browser digunakan untuk menginterpretasikan perintah-perintah HTML yang disisipkan ke dalam teks dan menampilkan susunan halaman ke style built-in browser dengan menggunkan font, tab, warna, garis, dan perataan teks yang dikehendaki ke komputer yang menampilkan halaman web.
Struktur penulisan pemrograman HTML yang baik pada dokumen HTML adalah penulisan tag-tag yang ditempatkan pada dokumen yang terbagi ke dalam area deskriptif dan fungsional.
Perintah-perintah HTML biasa disebut dengan tag. Tag merupakan cara untuk memodifikasi dokumen teks normal yang akan ditampilkan di dalam web browser. Tag HTML ditulis ke dalam dokumen ASCII dan menyediakan instruksi-instruksi ke browser yang berhubungan dengan formatting halaman, termasuk yang di luar tag, seperti gambar, audio, dan video. Tag HTML selalu dimunculkan sebagai suatu kata atau frase yang ditempatkan diantara tanda kurung sudut ( < > ). Isi dari tanda kurung sudut adalah perintah HTML itu sendiri. Struktur dokumen HTML terdiri dari:
- baris yang berisi informasi versi HTML yang digunakan
- deklarasi bagian header dengan elemen body
- deklarasi bagian body dengan elemen body atau frameset
PENJELASAN TAG-TAG DALAM FILE HTML
A. Listing Program
< HTML >
< HEAD >
< TITLE > judul < / TITLE >
< /HEAD >
< BODY >
Perintah-perintah HTML
< / BODY >
< / HTML >
B. Penjelasan
< HTML >
< !--Tag ini merupakan inisialisasi file HTML. Setiap akan membuat web harus diakhiri dengan tag < HTML >. Untuk membedakan tag awal dan tag akhir, digunakan karakter slash ( / ) pada tag akhir, dan ditempatkan sebelum nama tag. Misalnya < / HTML >-->.
< HEAD >
< !--Tag ini merupakan pembuka dari dokumen HTML yang berisi informasi yang menjelaskan dokumen HTML-->
< TITLE >
< !--tag ini bukan merupakan bagian dari teks dokumen dan tidak boleh mengandung tag lain. Tag ini sebagai label untuk jendela dari browser-->
< BODY >
< !--tag ini memiliki atribut bgcolor ( untuk menentukan warna background ) , text ( untuk menentukan warna teks ) , size ( untuk menentukan ukuran huruf )-->
< H1 >
< !--ini adalah heading. Mulai dari h1 sampai dengan h6-->
< FONT COLOR >
< !--ini adalah tag untuk menentukan warna tulisan-->
< FONT SIZE >
< !--ini adalah tag untuk menentukan ukuran huruf-->
< FONT FACE >
< !--ini adalah tag untuk menentukan jenis huruf yang dipilih-->
< P >
< !--sebagai awal suatu paragraph. Tag ini mempunyai atribut align, seperti "left" yang membuat paragraf menjadi rata kiri, "right" yang membuat paragraf menjadi rata kanan dan "center" membuat paragraf menjadi berada di tengah-->
< BR >
< !-->menyatakan ganti baris-->
< PRE >
< !--untuk menmpilkan teks persis seperti yang diketikkan dalam HTML-->
< B >
< !--cetak huruf tebal-->
< I >
< !--cetak huruf miring-->
< U >
< !--cetak huruf dengan garis bawah-->
< SUB >
< !--ini adalah tag untuk menuliskan subscript-->
< SUP >
< !--ini adalah tag untuk menuliskan superscript-->
< TT >
< !--untuk menampilkan tulisan seperti mesin ketik-->
< CITE >
< !--untuk menampilkan teks kutipan-->
< EM >
< !--untuk memberikan penekanan pada suatu kata, biasanya dicetak miring-->
< CODE >
< !--untuk menampilakn suatu contoh kode program secara logical dan biasanya dicetak miring-->
< BLOCKQUOTE >
< !--tag ini digunakan untuk mengkuot paragraph, sehingga sedikit lebih menjorok / indent-->
< MARQUEE >
< !--untuk menampilkan teks berjalan. Marquee memiliki atribut behavior yaitu slide, alternate, dan scroll-->
< HR >
< !--tag untuk membuat garis horizontal-->
HR memiliki atribut :
< HTML >
< !--Tag ini merupakan inisialisasi file HTML. Setiap akan membuat web harus diakhiri dengan tag < HTML >. Untuk membedakan tag awal dan tag akhir, digunakan karakter slash ( / ) pada tag akhir, dan ditempatkan sebelum nama tag. Misalnya < / HTML >-->.
< HEAD >
< !--Tag ini merupakan pembuka dari dokumen HTML yang berisi informasi yang menjelaskan dokumen HTML-->
< TITLE >
< !--tag ini bukan merupakan bagian dari teks dokumen dan tidak boleh mengandung tag lain. Tag ini sebagai label untuk jendela dari browser-->
< BODY >
< !--tag ini memiliki atribut bgcolor ( untuk menentukan warna background ) , text ( untuk menentukan warna teks ) , size ( untuk menentukan ukuran huruf )-->
< H1 >
< !--ini adalah heading. Mulai dari h1 sampai dengan h6-->
< FONT COLOR >
< !--ini adalah tag untuk menentukan warna tulisan-->
< FONT SIZE >
< !--ini adalah tag untuk menentukan ukuran huruf-->
< FONT FACE >
< !--ini adalah tag untuk menentukan jenis huruf yang dipilih-->
< P >
< !--sebagai awal suatu paragraph. Tag ini mempunyai atribut align, seperti "left" yang membuat paragraf menjadi rata kiri, "right" yang membuat paragraf menjadi rata kanan dan "center" membuat paragraf menjadi berada di tengah-->
< BR >
< !-->menyatakan ganti baris-->
< PRE >
< !--untuk menmpilkan teks persis seperti yang diketikkan dalam HTML-->
< B >
< !--cetak huruf tebal-->
< I >
< !--cetak huruf miring-->
< U >
< !--cetak huruf dengan garis bawah-->
< SUB >
< !--ini adalah tag untuk menuliskan subscript-->
< SUP >
< !--ini adalah tag untuk menuliskan superscript-->
< TT >
< !--untuk menampilkan tulisan seperti mesin ketik-->
< CITE >
< !--untuk menampilkan teks kutipan-->
< EM >
< !--untuk memberikan penekanan pada suatu kata, biasanya dicetak miring-->
< CODE >
< !--untuk menampilakn suatu contoh kode program secara logical dan biasanya dicetak miring-->
< BLOCKQUOTE >
< !--tag ini digunakan untuk mengkuot paragraph, sehingga sedikit lebih menjorok / indent-->
< MARQUEE >
< !--untuk menampilkan teks berjalan. Marquee memiliki atribut behavior yaitu slide, alternate, dan scroll-->
< HR >
< !--tag untuk membuat garis horizontal-->
HR memiliki atribut :
r align : untuk perataan ( left / center / right )
r width : untuk menentukan ukuran tebal tipisnya garis
r noshade : untuk menghilangkan bayangan abu-abu dibawah garis
r color : untuk menentukan warna garis
< ADDRESS >
< !--untuk memberikan informasi pembuat situs web / menampilkan alamat-->
< UL >
< !--ini digunakan untuk membuat list dengan bulletizing. Di dalam tag "UL" diisi dengan tag "LI", ditulis sebanyak list yang dibutuhkan. UL memiliki atribut tipe yaitu :
< ADDRESS >
< !--untuk memberikan informasi pembuat situs web / menampilkan alamat-->
< UL >
< !--ini digunakan untuk membuat list dengan bulletizing. Di dalam tag "UL" diisi dengan tag "LI", ditulis sebanyak list yang dibutuhkan. UL memiliki atribut tipe yaitu :
r circle ( berbentuk lingkaran )
r disc ( berbentuk bulatan penuh )
r square ( berbentuk kotak )
< OL >
< !--ini digunakan untuk membuat list dengan menggunakan nomor / bukan bullet _ _ > Di dalam tag "OL" diisi dengan tag "LI", ditulis sebanyak list yang dibutuhkan. OL memiliki atribut tipe yang terdiri dari:
< OL >
< !--ini digunakan untuk membuat list dengan menggunakan nomor / bukan bullet _ _ > Di dalam tag "OL" diisi dengan tag "LI", ditulis sebanyak list yang dibutuhkan. OL memiliki atribut tipe yang terdiri dari:
r a ( urutan secar alfabet dengan huruf kecil )
r i ( urutan secara i, ii, dan seterusnya )
r A ( urutan secar alfabet dengan huruf kapital )
< ACRONYM >
!--tag ini untuk menuliskan akronim-->
< IMG SRC >
< !--untuk menyisipkan gambar-->
< ACRONYM >
!--tag ini untuk menuliskan akronim-->
< IMG SRC >
< !--untuk menyisipkan gambar-->
MEMBUAT FORM & FRAME
3.1. FORM
Untuk membuat homepage yang interaktif, kita perlu menggunakan form. Form dapat digunakan untuk meminta input dari pengunjung tentang apapun. Baik mengisi angket, mengisi polling, mengisi guestbook juga mengisi form pembelian barang. Semua aplikasi tersebut menggunakan prinsip pembuatan form. Form selalu diawali dengan tag FORM dan ditutup dengan tag /FORM. Di antara tag pembuka dan penutup FORM tadi dapat diisi tag INPUT yang jenisnya ada beberapa macam. Formatnya seperti berikut:
<FORM METHOD="POST" ACTION="simpan.php">
<INPUT SIZE="30">
</FORM>
keterangan:
l FORM: kata ini akan menjelaskan kepada komputer bahwa anda sedang membuat form.
l METHOD: kata ini menentukan tentang bagaimana informasi akan dikirim. Kita memilih dengan cara "POST", artinya data langsung kita kirim begitu saja.
l ACTION: ke mana data akan dikirim. Pada form di atas kita menggunakan "simpan.php" yang berarti data akan dikirim ke alamat tersebut.
l INPUT: ini mendefinisikan bahwa kita sedang meminta input (masukan) kepada pengunjung situs.
l TYPE: ini menjelaskan jenis input yang kita minta. Di sini kita memilih jenis "text" yang akan menampilkan satu baris kotak input seperti terlihat di atas.
l NAME: yang ini berguna untuk memberikan nama kepada input ini. Kita bebas memberi nama apapun, tidak harus "nama" seperti yang tertulis di atas. NAME ini berguna untuk keperluan memproses input ini lebih lanjut.
l SIZE: ini adalah panjang kotak input di atas.
jenis-jenis (type) input yang lain adalah:
r CHECKBOX Kita dapat memilih lebih dari satu. Bentuk tag dari CHECKBOX adalah:
<INPUT NAME="hobi" VALUE="membaca">
untuk RADIO dan CHECKBOX kita dapat memberikan pilihan awal ( tampilan default ) dengan menggunakan kata CHECKED di dalam tag INPUT.
r PASSWORD Antara text dengan password tidak ada perbedaan apapun kecuali pada password apa yang kita ketikkan ditampilkan dalam bentuk * sehingga tidak terbaca. Bentuk tag dengan type password adalah sebagai berikut
<INPUT NAME="kunci" SIZE="10" VALUE=" ">
r RADIO Kita hanya diizinkan memilih satu pilihan. Berikut ini adalah bentuk perintah untuk RADIO:
<INPUT NAME="jenis_kelamin" VALUE="pria">
VALUE digunakan untuk memberikan nilai yang isinya tergantung pilihan kita.
r RESET Apabila tombol ini diklik, maka mereset semua isian kita di form, kembali ke defaultnya. Kode untuk RESET adalah sebagai berikut:
<INPUT NAME="reset" VALUE="hapus">
r SUBMIT Submit adalah tombol yang apabila diklik, isian di form akan langsung dikirim menggunakan cara tergantung atribut METHOD dan ACTION di dalam tag
Berikutnya SUBMIT memiliki kode seperti ini:
<INPUT NAME="submit" VALUE="Kirim ">
r SELECT berbeda dengan RADIO dan CHECKBOX karena tidak memakai tag INPUT, tapi langsung memakai tag SELECT. Dan juga penggunaan SELECT harus ditutup dengan tag /SELECT. Sama seperti pada RADIO dan CHECKBOX, pada SELECT kita juga dapat melakukan pilihan awal ( tampilan default ), dengan menambahkan kata SELECTED pada tag OPTION seperti ini:
OPTION SELECTEDTidak ada di pilihan
r TEXTAREA Bentuk umum tag textarea adalah sebagai berikut:
<TEXTAREA>
tulisan yang akan ditampilkan
</TEXTAREA>
Tulisan ini akan ditampilkan di dalam kotak.
Berbeda dengan text, kali ini kita tidak menggunakan tag INPUT, tetapi langsung menggunakan tag TEXTAREA. Juga sekarang kita harus menutup dengan tag . Di antara tag TEXTAREA dan tag /TEXTAREA kita dapat menuliskan apapun yang nantinya akan ditampilkan di dalam kotak yang tersedia. Atribut yang bisa kita atur di atas adalah ROWS yang akan menentukan jumlah baris dan COLS yang akan menentukan jumlah kolom. Juga ada atribut NAME yang fungsinya memberi nama, sama seperti pada input text.
Berbeda dengan text, kali ini kita tidak menggunakan tag INPUT, tetapi langsung menggunakan tag TEXTAREA. Juga sekarang kita harus menutup dengan tag . Di antara tag TEXTAREA dan tag /TEXTAREA kita dapat menuliskan apapun yang nantinya akan ditampilkan di dalam kotak yang tersedia. Atribut yang bisa kita atur di atas adalah ROWS yang akan menentukan jumlah baris dan COLS yang akan menentukan jumlah kolom. Juga ada atribut NAME yang fungsinya memberi nama, sama seperti pada input text.
3.2. FRAME
Contoh yang akan kita buat seperti berikut:
header.html | |
menu.html | isi.html |
Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer
0
komentar
Langganan:
Posting Komentar (Atom)