Darmawan satyananda Mathematics department State university of malang Desain Web 2. HTML Darmawan satyananda Mathematics department State university of malang
HTML Web browser menampilkan informasi dalam bentuk web page (halaman web) Web page pada dasarnya disusun dengan menggunakan “bahasa” HTML (Hypertext Markup Language). HTML (pada awalnya) digunakan untuk (1) mendefinisikan struktur halaman dan jenis elemennya, dan (2) mendefinisikan cara menampilkan ke pengguna Pendefinisian struktur dilakukan dengan memberi tanda (markup) terhadap isi halaman: apa yang menjadi paragraf, tabel, image, dsb
HTML, XHTML, Stylesheet Saat ini, mulai dipisahkan fungsi markup dan fungsi presentasi. HTML hanya untuk kepentingan markup, bagaimana web ditampilkan adalah tugas dari stylesheet. Sayangnya pemisahan ini tidak bisa ketat, karena masih banyak web page yang menggunakan standar lama, dan masih ada yang tidak konsisten. Beberapa elemen untuk keperluan tampilan di HTML memiliki padanan di stylesheet. Gunakanlah stylesheet semaksimal mungkin.
Web saat ini didorong untuk menggunakan standar XHTML Web saat ini didorong untuk menggunakan standar XHTML. Untuk kompatibilitas, semua elemen di HTML masih dikenali di XHTML, dan masih bisa ditampilkan di browser. Pada saat merancang halaman web dengan software perancangan web, bisa ditentukan standar mana yang digunakan. Kode HTML bisa dihasilkan oleh software perancangan web, tetapi pembuatnya harus tahu kode apa yang ada dihasilkan.
Elemen HTML Suatu halaman web (dokumen HTML) terdiri dari isi (content) (termasuk karakter khusus) dan elemen. Setiap elemen ditandai dengan tag, dalam bentuk ‘<…>’ (titik-titik adalah nama elemen). Tag bisa dalam bentuk pasangan tag pembuka dan penutup, (misalnya: <h1>Chapter 1</h1>), atau sebagai tag tunggal (misalnya: <hr />)
Tag yang dikenakan terhadap isi digunakan sebagai markup (penanda). Tidak setiap elemen memiliki isi, ada elemen yang berupa elemen kosong. Nama markup di XHTML sebaiknya ditulis dengan huruf kecil (lowercase), walaupun hal ini tidak dipersyaratkan di HTML.
Tag mungkin memiliki pasangan attribute dan value sebaga informasi tambahan, misalnya: <img src='tes.jpg' />, atau <tr height='20px'> ... </tr>.
Struktur dasar dokumen Dua struktur utama setiap halaman web adalah: head dan body. Head berisi informasi tentang halaman itu, misalnya judul halaman, style sheet yang digunakan, script, dan jenis informasi “meta” yang lain. Bagian head ditandai dengan tag <head> ... </head>. Body berisi isi sebenarnya yang ditampilkan di browser. Bagian ini ditandai dengan tag <body> ... </body> Halaman web (dokumen web) itu sendiri ditandai oleh tag <html> ... </html> tag <!DOCTYPE html> digunakan utk memberi informasi pada browser bahwa dokumen yang dibuka adalah dokumen/halaman HTML
Struktur halaman web <!DOCTYPE html> <html> <head> <title> Judul halaman </title> <body> Isi halaman web </body> </html>
Bagian <head> Beberapa elemen di bagian ini: title: judul dokumen meta: meta-informasi (informasi tentang informasi) di document, untuk digunakan antara lain oleh search engine link: untuk menyisipkan dokumen eksternal script: untuk menuliskan kode Javascript atau kode dari file eksternal style: untuk menentukan stylesheet yang digunakan dokumen itu base: untuk menentukan URL dasar untuk URL relatif di halaman itu.
Bagian <body> Body berisi apapun yang ditampilkan di browser. Attribute untuk tag body: background: image untuk latar belakang dokumen. bgcolor: warna latar belakang text: warna teks default link: warna hyperlink default vlink: warna link yang sudah dikunjungi alink: warna link yang aktif Pada pembahasan selanjutnya, akan disajikan elemen di body sesuai dengan kegunaannya.
Block level & inline elements Elemen di body bisa berupa block-level elements atau inline elements. Block-level element: elemen yang dimulai pada baris baru, dan biasanya ditambahkan spasi di atas dan di bawah elemen. (Catatan: tabel dan form termasuk kelompok ini, pembahasannya secara terpisah)
Catatan untuk block-level elements Atribute tag h1-h6 adalah align, untuk menentukan perataan heading. Nilai yang mungkin: left, right, center. Atribut hr: align: perataan garis (nilai: left, right, center) width: lebar garis (dalam satuan pixel) height: tinggi garis (dalam satuan pixel) noshade: mengaktifkan/non aktifkan efek 3D color: warna garis
<ol> ... </ol> digunakan untuk ordered list (list yang muncul dalam urutan tertentu), <ul> ... </ul> adalah untuk unordered list (list tidak terurut) Di dalam elemen <ol> atau <ul> terdapat elemen <li> ... </li> yang menyatakan item untuk list tersebut. Atribut elemen ol: start: nilai awal type: jenis list (1, I, A, a) Atribute elemen ul: type: jenis bullet (nilai: circle, disk, square)
Definition list digunakan untuk daftar istilah dengan definisinya masing-masing. dl: awal definition list dt: istilah untuk definisi itu dd: definisi istilah
Semantic & presentational elements Inline element: elemen yang tidak diawali baris baru, hanya melanjutkan dari elemen sebelumnya. Dua kategori inline elements: semantic elements dan presentational elements. Dalam XHTML, semantic elements menjelaskan tentang arti, konteks, atau penggunaan dari teks yang dikenainya. Bagaimana tampilannya di browser tergantung pada style sheet, baik yang disediakan perancang atau sesuai tampilan default dari browser.
Presentational elements menjelaskan tentang style dari teks yang dikenainya. Kebanyakan elemen ini memiliki padanan properti stylesheet, dan beberapa elemen di antaranya berstatus deprecated (dibuang dari standar XHTML yang berlaku, walaupun masih dikenali oleh browser) Akan dibahas pada bab tentang CSS. Note: Termasuk dalam inline elements adalah link dan image. Pembahasannya pada bab berikutnya.
Font (nama tag: font) Font termasuk inline elements Atribut elemen font : face: nama font atau daftar nama font (sebagai alternatif) size: ukuran font, dalam skala 1 sampai 7 color: warna teks (warna dasar atau kombinasi warna dasar) Warna dasar: Aqua, Gray, Navy, Silver, Black, Green, Olive, Teal, Blue, Lime, Purple, White, Fuchsia, Maroon, Red, Yellow Kombinasi : kombinasi merah, hijau, biru. Masing-masing warna dinyatakan dalam heksadesimal dengan nilai 00-FF.