artikel html
Posted in artikel html, drag matic on July 14th, 2010 by andry666
BAB 1
PENGERTIAN WEB & HTML
World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan informasi pada beberapa server komputer yang terhubung satu dengan yang lain dalam jaringan internet. Bekerja dengan web mencakup 2 hal penting yaitu sofware web browser ( browser ) dan software web server.
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:
1. baris yang berisi informasi versi HTML yang digunakan
2. deklarasi bagian header dengan elemen body
3. deklarasi bagian body dengan elemen body atau frameset
top
BAB 2
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 :
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 :
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:
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–>
top
BAB 3
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:
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:
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
r RADIO Kita hanya diizinkan memilih satu pilihan. Berikut ini adalah bentuk perintah untuk RADIO:
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:
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:
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:
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.
3.2. FRAME
Contoh yang akan kita buat seperti berikut:
header.html
menu.html isi.html
Dalam satu layar monitor sebenarnya kita menampilkan tiga buah file yang berbeda, yaitu file judul.html, file menu.html dan file isi.html. Agak mirip dengan waktu pembahasan tabel (membuat layout halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan frame ini tiga file. Disini tidak ada tag “BODY” karena file induk memang tidak memerlukannya. Formatnya seperti berikut:
……
Atribut-atribut yang dapat digunakan:
1. BORDERCOLOR berguna untuk menentukan warna pembatas antar frame.
2. BORDER yang menentukan tebal batas antar frame.
3. ROWS berfungsi membagi bidang. Bedanya ROWS membagi menjadi beberapa baris bisa dalam persen maupun dalam pixel.
4. COLS akan membagi bidang menjadi beberapa kolom. Kita dapat menulis COLS=”30%,70%” untuk membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%.
5. SRC adalah atribut yang utama, yaitu memanggil file yang akan mengisi frame. Pada file indeks.html, dengan atribut SRC kita telah memanggil file header.html, menu.html dan file isi.html.
top
BAB 4
CASCADING STYLE SHEET
Cascading Style Sheet ( CSS ) digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML. Sebagai contoh, kode HTML murni tidak memungkinkan untuk menggunakan sebuah definisi font yang diterapkan pada setiap sel dan bahkan tag pun tak berpengaruh pada sel-sel tabel. Misalnya, diinginkan untuk mengaturukuran font pada setiap sel sebesar 2. Dengan menggunakan tag semua sel harus diformat dengan menggunakan font size=”2″. Tentu saja tindakan seperti ini tidak praktis. Namun, dengan menggunakan CSS, kita hanya perlu mendefinisikan style sekali saja dan style akan berlaku untuk setiap sel dalam tabel. Kode-kode CSS:
digunakan untuk mendefinisikan style sheet dengan menggunakan CSS. Di dalam tag ini terdapat atribut “text/css”.
Komentar dalam CSS menggunakan pasangan /* dan */.
1. Mengatur font dan teks
Dalam pengaturan font dan teks, CSS mendukung sejumlah property seperti:
l Font-family = untuk menentukan nama font
Contoh: font-family:arial;
Atau bisa juga nama font yang disebutkan lebih dari satu.
Contoh: font-family:verdana,arial,Helvetica;
Yang berarti font yang digunakan adalah verdana, apabila verdana tidak ada maka akan digunakan font arial dan seterusnya.
l Font-size = untuk menentukan ukuran font
Nilai yang dapat dimasukkan dalam property ini:
xx-small = sangat kecil
x-smal = agak lebih kecil
small = kecil
medium = sedang
large = besar
x-large = agak lebih besar
xx-large = sangat besar
atau dapat juga dengan menggunakan satuan:
px = pixel in = inchi cm = centimeter mm = millimeter pt = titik pc = pica em = tinggi font en = separuh tinggi font
l Text-decoration
None = teks tidak diapa-apakan
Underline = teks digarisbawahi
Line-through = teks dicoret
Blink = teks berkedip
Overline = teks diberi garis diatasnya
Font-style = normal, italic, oblique
Text-align = left, center, right, justify
Font-weight = normal, bold, bolder, lighter
l Text-transform
None = teks tidak dikonversi
Capitalize = awal setiap kata dikonversi menjadi huruf capital
Uppercase = setiap huruf kecil akan diubah menjadi huruf capital
Lowercase = setiap huruf capital akan diubah menjadi huurf kecil
1. mengatur bingkai
l border-style
none = nilai default
solid = bentuk 2 dimensi
double = bentuk 2 dimensi
inset = bentuk 3 dimensi
outset = bentuk 3 dimensi
groove = bentuk 3 dimensi
ridge = bentuk 3 dimensi
dotted = berupa titik-titik
dashed = berupa dash
l border-width = diisi sesuai dengan keinginan kita atau bisa juga dengan satuan px ( pixel )
l border-color
aqua = 00ffff; black = 000000; blue = 0000ff; fuchsia = ff00ff; gray = 808080; green = 008000; lime = 00ff00; maroon = 800000; navy = 000080; olive = 808000; purple = 800080; red = ff0000; silver = c0c0c0; teal = 008080; yellow = ffff00; white = ffffff
1. memberi jarak
l padding-top = menentukan jarak dari tepi atas
l padding-right = menentukan jarak dari tepi kanan
l padding-bottom = mennetukan jarak dari tepi bawah
l padding-left = menentukan jarak dari tepi kiri
1. mengatur warna kita dapat mengatur warna sesuai dengan keinginan kita. Kita dapat menggunkan kode seperti disebutkan dalam border-color diatas atau bias juga dengan menuliskan langsung warna yang kita kehendaki.
2. mengatur background
cara penulisan kode background = background-image:url(gambar.jpg)
3. mengatur link
l a : link [ link yang belum dikunjungi ]
l a : visited [ link yang sudah dikunjungi ]
l a : active [ link yang sedang aktif ]
1. penggunaan atribut id dalam tag
#nama_id{property_1:nilai_1;…;property_n:linai_n;}
Nama id dapat mengandung huruf, angka, atau karakter garis bawah. Karakter petama harus berupa huruf atau karakter garis bawah
1. penggunaan kelas
.kelas{property_1:nilai_1;…;property_n:nilai_n;}
dapat mengandung huruf, angka, atau karakter garis bawah karakter pertama harus berupa huruf atau karakter garis bawah
1. tag span
Tag span dapat digunakan untuk mmeperluas kemampuan suatu style. Penerapannya dapat digunakan bersama-sama atribut style, class, dan id.
l span dengan atribut style
…
l span dengan atribut class
…
l span dengan atribut id
..
Tidak ada komentar:
Posting Komentar