05 xhtml css
DESCRIPTION
Materi Kuliah Internet & Disain Web Teknik Elektro Universitas Brawijaya MalangTRANSCRIPT
TKE 42 Disain & Pemrograman WebHerman Tolle, ST., [email protected]://elektro.brawijaya.ac.id
Informatika & KomputerTeknik Elektro
Universitas Brawijaya Malang
XHTMLXHTML (eXtensible HTML) adalah standar
baru untuk HTML yang bertujuan:memungkinkan sebuah dokumen web dapat
dibaca oleh divais baru seperti PDA, ponsel, dll
Crossbrowser: ditampilkan sama untuk semua jenis browser
Versi terakhir: XHTML 1.1
XHTML & CSS
Web dapat diakses dengan baik pada berbagai perangkat dan browser
XHTML & CSSXHTML = XML + HTMLSalah satu sifat XML yang diwarisi oleh
XHTML yaitu sangat ketat dalam menerapkan aturan penulisan sintaks.
Penggunaan XHTML & CSS dapat memisahkan kontent dengan presentasi (desain tampilan)
Struktur XHTMLDOCTYPE, HTML, HEAD, BODYDOCTYPE menentukan bagaimana dokumen
tersebut dibaca oleh browser. Apakah browser membaca dokumen tersebut dalam modus Standard atau Quirks.
Pada prinsipnya XHTML = HTML, hanya ada perbaikan pada aturan-aturan penulisan dan penggunaan elemen & atribut HTML
XHTML: Document Type DefinitionsXHTML - Strict / strict doctype
declaration: Kontrol seluruh layout dan format sebuah halaman Web melalui CSS. Tidak menggunakan tag font, align dan table
XHTML - Transitional / transitional doctype declaration: masih menggunakan sebagian besar tag-tag HTML seperti font dan table untuk melayout halaman.
XHTML - Frames / frameset declaration: Penggunaan Frame pada halaman Web.
Penulisan Doctype<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Aturan XHTMLSemua TAG harus berpasangan (ada
pembuka dan penutup) Jika TAG tunggal harus diakhiri dengan />Semua atribut harus memakai quoted (“ “).Semua atribut harus dalam bentuk pasangan
nama=value (mis: noshade noshade=“noshade”)
Semua tag dan atribut dalam huruf kecil (lowercase)
Semua tag img harus mempunyai atribut alt=” ”
Benar: <b> Tutup tag <i>italic</i> dahulu</b>. Salah: <b>Well formed, this is <i>not!</b></i> is not well
formed.
Nesting restrictions The <a> tag cannot contain another <a> tag. The <pre> tag cannot contain <img>, <object>, <big>,
<small>, <sub>, or <sup> tags. The <button> tag cannot contain <input>, <select>,
<textarea>, <label>, <button>, <form>, <fieldset>, <iframe>, or <isindex> tags.
The <label> tag cannot contain other <label> tags. The <form> tag cannot contain other <form> tags.
Single Tag<area /> <base /><basefont /> <br /><col /> <frame /><hr />
<img /><input /> <isindex /><link /><meta /><param />
Minimal Dokumen XHTML<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head> <title>Setiap dokumen harus ada titel</title></head> <body> ...konten web disini... </body> </html>
Cek Validitas<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html><head><meta http-equiv=”Content-Type”
content=”text/html;charset=us-ascii”><title>Validation Test</title></head><body><h2>There are some errors in this file</h2><div style=”color:blue”>Can you spot all the mistakes in this
simple HTML file?</div><center><p><a href=”http://validator.w3.org/check/referer”><img
border=”0”src=”http://www.w3.org/Icons/valid-html401”alt=”Valid HTML 4.01!” height=”31” width=”88”> </a></p></center></body></html>
CSS (Cascading stylesheet)CSS adalah bagian dari sebuah website yang
khusus dibuat untuk mengatur tampilan sebuah website.
Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.
Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya.
CSS adalah aset sangat berharga dalam Disain Web Site
CSSTeknologi CSS dimaksudkan untuk
mempermudah perancangan web yang indah dan fleksibel.
Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja.
Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS
Sejarah CSS1996, Konsorsium W3C
merekomendasikan penggunaan CSS dalam dokumen web.
Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web. (karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri)
1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini.
Kapabilitas CSSMengatur ukuran baku (exact point) teksMenambahkan indentasi/tabulasi teksMengatur marginMenambahkan elemen format baru pada
halaman webMenggunakan unit ukuran yang presisi seperti
inchi dan centimeterMembuat style baru yang kreatif pada halaman
web kita
Merubah tampilan standar dari sebuah tag Mengatur secara presisi bagaimana
background image ditampilan, apakah perlu berulang (repeated) atau no-repeated
Menambahkan jarak antar huruf, jarak antar kata maupun spasi antar baris,
Membuat layout halaman web yang standar sehingga dapat ditampilkan sama pada semua jenis browser, termasuk pada browser media tertentu seperti pada PDA
dll
STYLEStyle merupakan corak/mode/gaya yang
diberikan pada suatu elemen dari dokumen (html)
Secara default semua komponen sudah mempunyai style standar (template)
Misalnya tag <H1> mempunyai style: Font : Times New Roman; Size : 6 (24pt); Text Decoration : Bold; Line-height = 24pt; INI JUDUL DENGAN H1 STANDAR
Style SheetKita dapat melakukan modifikasi dari style
default sesuai keinginan kita Modifikasi style dapat dilakukan secara
tunggal per halaman, atau menggunakan file terpisah (style sheet)
Style sheet merupakan tempat dimana kita mengontrol dan memanage style-style yang ada.
Implementasi CSS CSS dapat ditambahkan dalam halaman
web kita dengan 3 cara:1. Inline CSS: menulis style langsung pada
tag HTML2. Embedded CSS: menulis CSS di dalam
bagian HEAD sebuah dokumen HTML3. External File CSS: menggunakan file CSS
terpisah
STYLE FORMAT selector { property1: value;
property2:value, . . .} H1{ color:green; background-
color:orange}
Style terdiri dari dua bagian:1. Selector : Bagian pertama sebelum
tanda “{ }” disebut selector (TAG atau ELEMEN HTML)
2. Declaration : property dan nilainya.
INLINE STYLE Style pada Tag tunggal: langsung
menambahkan modifikasi style dalam tag tersebut.
Misalnya :<P STYLE =“FONT-SIZE:12pt; FONT-
FAMILIY:COURIER;FONT-VARIANT: NORMAL; COLOR: NAVY;”>
<H1 STYLE=”color:red; font-size:18pt”>
<BODY STYLE=“FONT-SIZE:X-LARGE”>
EMBEDDED STYLEStyle dipisah dan dikumpulkan pada bagian
HEADContoh:
<head><style>body { color:#ffffff; background:black; font-family:Verdana, Arial; font-size:12px;}p { line-height:20px; }h1{ color:brown; } </style></head>
STYLE SCRIPT (GROUP)Modifikasi Style dapat digunakan secara
bersama oleh beberapa tag:Misalnya :
<HEAD><STYLE> H1, H2, H3 { FONT-FAMILIY: Verdana;} P, TD, BODY { LINE-HEIGHT: 20px; MARGIN-
RIGHT:20px; MARGIN-LEFT: 10px; }</STYLE></HEAD>
STYLE SCRIPT (CLASS) Modifikasi Style dapat digunakan secara bersama oleh
beberapa tag. Menggunakan CLASS atau ID Misalnya :
<HTML><HEAD><STYLE> H1.GREEN { COLOR: GREEN;} #GREEN { COLOR : #33FF33; FONT-WEIGHT: BOLD }</STYLE></HEAD><BODY><H1>NORMAL HEADER</H1><H1 CLASS=“GREEN”>A DARK GREEN HEADER</H1><H1 ID=“GREEN”>LIGT GREEN, BOLD HEADER</H1><H1 CLASS=“green”>ANOTHER DARK GREEN</H1></BODY></HTML>
External File CSS Sama seperti embedded style tetapi dibuat
pada file terpisah dengan ekstension .css Sebuah dokumen bisa menggunakan lebih
dari satu file CSS Di-import (dipanggil) pada bagian HEAD Ada dua cara:1. <link rel="stylesheet"type="text/css”
href="style.css" />2. <style>@import "style.css";</style>
Komentar dalam Style SheetsComments biasanya di gunakan oleh
programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya,
Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:/* isi Comments */Contoh:H1 { color:blue;} /* H1 elements akan menjadi
biru */Tags.H1.color = “blue”; /* H1 menjadi biru */
USER DEFINED STYLEStyle yang kita definisikan sendiri, selain dari
TAG standar yang ada.Kita menentukan nama dan isi / format style
nyaContoh
<STYLE> txtData { LINE-HEIGHT: 20px; MARGIN-RIGHT:20px;
MARGIN-LEFT: 10px; } strTanggal { COLOR : #33FF33; FONT-WEIGHT:
BOLD }</STYLE>
<SPAN> & <DIV>style dapat digunakan dengan memakai tag
kontainer <SPAN> dan <DIV>Digunakan secara inlineTag ini biasanya berfungsi untuk meng-
override style yang sudah ada sebelumnya
METRICSDalam CSS metrics yang digunakan adalah:
Inchi : INMilimeter : MMCentimeter : CMPicas : PCPixel : PXM-length : EMX-height : EX
Penggunaan CSS saat iniKontrol aspek visual keseluruhan halaman
websiteMembuat Layout yang standart (kolaborasi
dengan XHTML)
Teknik membuat layout HTML:Frame cara lama, jarang digunakanTabel disukai oleh designerCSS metode baru, menjadi standar
Layout: CSS vs TABELItem Tabel based CSS based
Ukuran file Besar Kecil
Fleksibilitas Kurang fleksibel, perubahan isi sering kali mengharuskan perubahan layout
Sangat fleksibel
Kemudahan dalam desain
Sangat mudah Relatif lebih sulit
Accessibility Sulit digunakan dengan peralatan non-konvensional (screenreader, text-based browser)
Mudah dibaca dengan berbagai device
Referensi HTML & CSSCSS-1: http://www.w3.org/TR/CSS1CSS-2: http://www.w3.org/TR/CSS2 HTML: http://www.w3.org/TR/html41 XHTML: http://www.w3.org/TR/xhtml11
ReferensiShengili-Roberts, Keith.,”Core Cascading
Style Sheet”, Prentice Hall, New Jersey, 2000.
Nurhasyim, “HTML & CSS”, http://www.ilmukomputer.com, diakses Januari 2004.
TUGASModifikasi website personal dari tugas web
pribadi sebelumnya dengan XHTML dan menambahkan CSS (gunakan link sheet)
Implementasikan tips-tips untuk aksesibilitas dan usabilitasTitle yang spesifikPenggunaan ALT
Cek validitas code, sertakan hasil validasinya!