PEMROGRAMAN BERBASIS WEB PERTEMUAN KE PERTEMUAN KE--33
HTML DAN CSS HTML DAN CSS
PEMROGRAMAN BERBASIS WEB PEMROGRAMAN BERBASIS WEB
PERTEMUAN KE PERTEMUAN KEHTML DAN CSS HTML DAN CSS
PEMROGRAMAN BERBASIS WEB PEMROGRAMAN BERBASIS WEB
Mark Up Language Mark Up Language Mark Up Language Mark Up Language
• Mark up : informasi tambahan yang yang ditempatkan pada teks untuk
menjelaskan bagaimana teks tersebut tersebut diinterpretasi• HTML (HyperText Markup Language) Language) merupakan subset dari SGML
(Standard Generalized Markup Language) Language) Contoh subset lain dari SGML :- – SMIL (Synchronized Multimedia Integration Integration Language)
- – XML (eXtensible Markup Language) Language)
- – MathML (Mathematical Markup Language) Language)
- – CML (Chemical Markup Language)
HTML (HyperText HTML ( HyperText Markup Language) Markup Language)
• HTML adalah sebuah bahasamarkupberupa bahasamarkupberupa kode-kode tag yang
menginstruksikan browser untuk untuk menghasilkan tampilan sesuai dengan yang diinginkan.• HTML adalah sebuah standar yang yang digunakan secara luas untuk
menampilkan halaman web dan dan HTML kini merupakan standar Internet yang saat ini dikendalikan dikendalikan oleh World Wide Web Consortium (W3C).• Sebuah file yang merupakan file HTML dapat dibuka dengan
menggunakan browser webseperti webseperti Mozilla Firefoxatau MicrosoftInternet Explorer.• Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah
berkembang XHTML yang merupakan merupakan pengembangan dari HTML. Spesifikasi HTML standar :http://www //www.w3.org/TR/html4
Penulisan Penulisan Penulisan Tag Penulisan Tag
- Nama tag ditulis di dalam tanda < dan >
- Nama tag boleh ditulis dalam huruf huruf kecil, kapital atau kombinasi.
– Contoh : <HTML> <html> <Html> Beberapa Beberapa tag mengandung atribut di
dalamnya:- – Contoh : <P ALIGN = “CENTER”> dimana P : nam tag ALIGN : nama atribut CENTER : nilai atribut • Hindari pasangan tag yang berpotongan berpotongan dengan pasangan lain.
Skema Dasar Skema Dasar Dasar Dasar HTML HTML
Skema Dasar Skema Dasar Dasar HTML Dasar HTML
<HTML> <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML>
Keterangan : Keterangan
<HTML> …. </HTML> menandai menandai awal dan akhir dokumen HTML <HEAD> …. </HEAD> menandai menandai awal dan akhir header dokumen <TITLE>Judul dokumen</TITLE> </TITLE> memberi judul pada dokumen <BODY> Isi dokumen</BODY> menandai awal dan akhir isi dokumen
66
Jenis Elemen Jenis Elemen Elemen HTML Elemen HTML
Secara garis besar, terdapat 4 jenis elemen elemen dari HTML:
1. Structural. Tanda yang menentukan menentukan level atau tingkatan dari sebuah teks
(contoh, <h1>Golf</h1> akan memerintahkan memerintahkan browser untuk menampilkan "Golf" sebagai teks tebal besar yang menunjukkan menunjukkan sebagai Heading 1
2. Presentational. Tanda yang menentukan menentukan tampilan dari sebuah teks tidak
peduli dengan level dari teks tersebut tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan direkomendasikan untuk mengatur tampilan teks,
3. Hypertext. Tanda yang menunjukkan menunjukkan pranala ke bagian dari dokumen
tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/">Wikipedia</a> org/">Wikipedia</a> akan menampilkan Wikipediasebagai sebuah hyperlinkke hyperlinkke URLtertentu),
4. Elemen widget yang membuat objek objek-objek lain seperti tombol (<button>),
list (<li>), dan garis horizontal (<hr>) (<hr>)
Tag Tag Judul Judul
<Hn>Judul paragraf</Hn> dengan n = 1,2,3,4,5,6 (
(Heading) (Heading)
n = 1,2,3,4,5,6 (tingkat besar huruf judul) Tag Tag Paragraf Paragraf
<p>paragraf</p> berfungsi untuk menandai terlihat dibatasi oleh satu baris kosong sebelum
Paragraf Paragraf (Paragraph) (Paragraph)
menandai suatu paragraf. Suatu paragraf akan sebelum dan sesudahnya.
Tag Tag Atribut Atribut (Bold, Italic, Underline) (Bold, Italic, Underline) (Bold, Italic, Underline) (Bold, Italic, Underline)
<b>Kalimat yang dicetak tebal</b> </b> <i>Kalimat yang dicetak miring</ miring</i> <u>Kalimat yang digaris bawahi</u> </u>
Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/
atau digaris bawahi.
Tag Atribut Tag Atribut (Bold, Italic, Underline) (Bold, Italic, Underline) (Bold, Italic, Underline) (Bold, Italic, Underline)
Tag Atribut Tag Atribut (Superscript, Subscript) (Superscript, Subscript) (Superscript, Subscript) (Superscript, Subscript)
- <sup>bagian yang dicetak tinggi tinggi</sup>
- <sub>bagian yang dicetak rendah rendah</sub>
• Untuk menandai bagian karakter karakter agar dicetak tinggi atau rendah,
biasanya untuk rumus matematika matematika atau kimia.
Tag Atribut Tag Atribut (Superscript, Subscript) (Superscript, Subscript) (Superscript, Subscript) (Superscript, Subscript)
Tag Ganti Baris (Break line) Tag Ganti Baris (Break line) Tag Ganti Baris (Break line) Tag Ganti Baris (Break line)
<br> : Untuk pindah ke baris berikutnya berikutnya.Bentuk penulisan lain yang dianjurkan dianjurkan (XML style) :<br />
Paragraf Paragraf Paragraf Paragraf
Ganti Baris Ganti Baris
Tag Font (Size, Face, Color) Tag Font (Size, Face, Color) Tag Font (Size, Face, Color) Tag Font (Size, Face, Color)
Memformat suatu bagian kalimat dengan dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font Parameter : size, face, color
Tag Enumerasi Tag Enumerasi (List, Unnumbered List, Ordered List) (List, Unnumbered List, Ordered List)
menandai suatu item dari daftar simbol • (bullet) oleh tag <ul> </ul> dalam daftar dengan nomor urut (1,2,3), apitlah
Tag Enumerasi Tag Enumerasi
(List, Unnumbered List, Ordered List) (List, Unnumbered List, Ordered List)
- <li>item</li> : Untuk menandai (enumerasi), diawali dengan simbol
- Kelompok item harus diapit oleh bertingkat.
- Untuk menomori enumerasi dengan dengan tag <ol> </ol>
Tag Garis Mendatar (Horizontal Line) Tag Garis Mendatar (Horizontal Line) Tag Garis Mendatar (Horizontal Line) Tag Garis Mendatar (Horizontal Line)
<hr> : membentuk garis pemisah mendatar mendatar.- Bentuk penulisan lain yang dianjurkan (XML style) :<hr />
Tag Gambar Tag Gambar Gambar Gambar (Image) (Image)
<img src="NamaFileGambar NamaFileGambar">
gambar yang mempunyai ekstensi .GIF,- NamaFileGambar= file gambar .JPG, atau .PNG.
file gambar.
- Untuk menampilkan sebuah file dianjurkan (XML style) :
- Bentuk penulisan lain yang dianjurkan
<img src="NamaFileGambar NamaFileGambar" />
Tag Link (Anchor) Tag Link (Anchor) Tag Link (Anchor) Tag Link (Anchor)
<a href="Link">Kata yang di-click</a> click</a> <a name="#Acuan">Kata yang dituju dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan= Kata sembarang sebagai sebagai penanda membentuk link ke
URL/file/bagian dokumen lain.
Tag Tabel Tag Tabel (Table) (Table) (Table) (Table) -- data data
<table> definisi definisi tabel</table>
Tabel didefinisikan dengan cara menyatakan menyatakan baris-baris dan kolom-kolom.- Tag untuk penanda baris adalah<tr> definisi definisi baris</tr>
- Tag untuk penanda kolom adalah<td>data</td
<td>data</td> Tag Tag Tabel Tabel (Table) (Table)
Untuk menata letak (layout) isi dokumen keperluan ini).
(Table) (Table) -- layout layout
dokumen (walaupun hakikatnya bukan untuk
Frame membagi layar k dalam beberapa beberapa jendela, dimana masing-masing
layar menampilkan web page yang berbeda berbeda.Tag Dasar :
- <frameset> ..</frameset>
- <frame />
- <noframes> .. </noframes>
Basic attributes
• cols = “values” ….(value biasanya biasanya dituliskan dalam % menunjukkan
besar pembagian area)- rows = “values”
- name = “frame_name”
- src = “frame_source(url)”
- target = “frame_name”
FRAME FRAME FRAME FRAME
<frameset rows=“30%,*”> <frame src=“banner.htm” /> <frameset cols = “25%,75%” > <frame src=“menu.htm” />
<frame src=“content.htm” /> </frameset> </frameset> Fungsi Form dalam Website :
- memperoleh data-data user baiknama baiknama, alamat dan data lainnya • untuk mendaftar pada service yang di di sediakan.
- memperoleh informasi pembelian secara secara online
- memperoleh feedback dari user mengenai mengenai website anda
Form -- Text Form Form Form Text
Form1.html Info.html
Form Form Form Form
(Password, Checkbox,Radio (Password, Checkbox,Radio Checkbox,Radio)) Checkbox,Radio
Password : <INPUT TYPE=“PASSWORD” NAME=“password” SIZE SIZE=“8” MAXLENGTH=“8”> Checkbox Buah yang Anda sukai : <BR> <INPUT TYPE = “CHECKBOX”NAME = “anggur” CHECKED> Anggur <BR> <INPUT TYPE = “CHECKBOX” NAME = “jeruk”> Jeruk<BR> <INPUT TYPE = “CHECKBOX” NAME = “melon”> Melon<BR>
Radio Agama : <BR> <INPUT TYPE = “RADIO”
NAME = “agama” VALUE "I>Islam<BR> <INPUT TYPE = “RADIO” NAME = “agama” VALUE "K>Kristen<BR>
Form Form Form Form
(Select, Textarea (Select, Textarea Textarea)) Textarea
Select :Musik yang Disukai :<BR> <SELECT NAME = “musik”> <OPTION VALUE = “Jazz”>Jazz <OPTION VALUE = “Rock”>Rock <OPTION VALUE = “Keroncong”>Keroncong Keroncong
Textarea
Komentar Anda : <BR> TEXTAREA NAME =“komentar”
ROWS =“5” COLS=40’ WRAP>123….ABC
</TEXTAREA>
Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Cascading Style Sheets (CSS)
Cascading Style Sheets(CSS) adalah adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), ), dengan CSS kita dapat dengan mudah mengubah keseluruhanwarna dan tampilan tampilan yang ada di situs kita sekaligus memformatulang situs kita.
CSS ini telah distandarkan oleh World World Wide Web Consortium (W3C) untuk digunakan diweb browser.
Keuntungan CSS
- Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet sheet global yang berisiaturan-aturan CSS tersebut untuk diterapakan pada seluruh seluruh dokumen-dokumen HTML pada halaman situs kita.
- User yang berbeda dapat mempunyai mempunyai style-sheet yang berbeda pula.
- Ukuran dan kompleksitas document code dapat diperkecil.
Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Cascading Style Sheets (CSS)
Sebuah style sheet terdiri dari beberapa beberapa aturan (rules). Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;). Masing- -masing deklarasi terdiri dari property, titik dua (:) dan nilai (value).
CSS : Font Property CSS : Font Property CSS : Font Property CSS : Font Property
Font
Syntax: font: <value>
Possible Values:[ <font-style>|| <font <font-variant>|| <font-weight>]? <font-
size>[/<line-height>]? <font-family> Contoh: P { font: italic bold 12pt/14pt Times, serif }Font Size
Syntax: font-size: <value>
Possible Values:<absolute-size>|<relative size>|<relative-size> |<length>| <percentage>
• <absolute-size>:xx-small | x-small small |small|medium| large|x-large | xx-
larg- <relative-size> : larger | smaller
- <percentage>(in relation to parent element)
CSS : Font Property CSS : Font Property CSS : Font Property CSS : Font Property
Font Style
Syntax: font-style: <value> Possible Values: normal | italic | oblique Possible Values: normal | italic | oblique
Font Variant
Syntax: font-variant: <value> Possible Values: normal | small-caps
Font Weight
Syntax: font-weight: <value> Possible Values: normal | bold| bolder| lighter | 100 | 200 | 300 | Possible Values: normal | bold| bolder| lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
CSS : Color & Background Property CSS : Color & Background Property CSS : Color & Background Property CSS : Color & Background Property
Color Syntax:color: <color>Nilai (value) dari color adalah sebuah keyword keyword atau sebuah kode RGB. 16 keyword diambil
dari palette Windows VGA: aqua, black, blue, fuchsia,gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow. Ada 4 cara dalam menuliskan warna menggunakan menggunakan kode RGB:- #rrggbb(e.g., #00cc00)
- #rgb(e.g., #0c0)
- rgb(x,x,x)dimanaxadalah integer antara 0 dan dan 255 (e.g., rgb(0,204,0))
- rgb(y%,y%,y%)dimanayis nomor antara 0.0 0 dan 100.0 (e.g., rgb(0%,80%,0%))
Background Color Syntax: background-color: <value> Possible Values:<color>| transparent Background Syntax: background: <value>
Possible Values:<background-color>|| <background-image>|| <background <background-repeat>||
<background-attachment>|| <background-position> position>
CSS : Text Alignment & Box Property CSS : Text Alignment & Box Property CSS : Text Alignment & Box Property CSS : Text Alignment & Box Property
Text AlignmentSyntax: text-align: <value> Possible Values: left | right | center | justify Values: left | right | center | justify Box Properties Bottom Border Width
Syntax:border-bottom-width: <value> Possible Values: thin | medium | thick | <length> Values: thin | medium | thick | <length> Width
Syntax:width: <value> Possible Values:<length>| <percentage>| auto Values:<length>| <percentage>| auto Height
Syntax:height: <value> Possible Values:<length>| auto Border Style
Syntax: border-style: <value> Possible Values: [ none | dotted | dashed | solid | double | groove | Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
TERIMAKASIH TERIMAKASIH Lilis Setyowati