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

Transkripsi

1 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

2 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:

3 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 >  < PRE >  < B >  < I >  < U >

4  < SUB >  < SUP >  < TT >  < CITE >  < EM >  < CODE >  < BLOCKQUOTE >  < MARQUEE >

5 < HR > OL memiliki atribut tipe yang terdiri dari:  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 >  < 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.

6 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 >  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: <FORM METHOD="POST" ACTION="simpan.php"> <INPUT SIZE="30">

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

8 ) 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

9 SELECTED pada tag OPTION seperti ini: isi.ht 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. FRAME Contoh yang akan kita buat seperti berikut: header.html menu.h tml

10 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: <FRAME COLSPAN=" " ROWSPAN=" ">... </FRAME> 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

11 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>...</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

12 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

13 Line-through = teks dicoret groove = bentuk 3 dimensi 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

14 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 = ; blue = 0000ff; fuchsia = ff00ff; gray = ; green = ; lime = 00ff00; maroon = ; navy = ; olive = ; purple = ; red = ff0000; silver = c0c0c0; teal = ; 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

15 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">... </span>

16 l span dengan atribut class <span>... </span> l span dengan atribut id <span>.. </span> ilmu dasar!! artikel html Copyright andry666 andry_666@webmail.umm.ac.id