Artikel HTML Dasar. World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan

Universitas Muhammadiyah Sukabumi Artikel HTML Dasar

Oleh : Baden Badru Jaman

Artikel HTML Dasar Artikel HTML

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

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

PENJELASAN TAG-TAG DALAM FILE HTML

A. Listing Program

< HTML >

< HEAD >

< TITLE > judul < / TITLE >

rata kanan dan "center" membuat paragraf menjadi berada di tengah-->

< BR >

< !-->menyatakan ganti baris-->

< PRE >

< !--untuk menmpilkan teks persis seperti yang diketikkan dalam HTML-->



< !--cetak huruf tebal-->



< !--cetak huruf miring-->



< !--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-->

MEMBUAT FORM & FRAME

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:

<br /> <br /> tulisan yang akan ditampilkan<br /> <br />

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.

FRAME

Contoh yang akan kita buat seperti berikut:

header.html

menu.h

tml

isi.ht

ml

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.

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:

<STYLE>...

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

<span style="definisi">

...



l span dengan atribut class

<span>

...



l span dengan atribut id

<span>

..



ilmu dasar!! | artikel html

Copyright andry666 [email protected]

http://andry666.student.umm.ac.id/2010/07/14/artikel-html/