PEMROGRAMAN BERBASIS WEB PERTEMUAN KE PERTEMUAN KE--33

(1)

HTML DAN CSS

PEMROGRAMAN BERBASIS WEB

PERTEMUAN KE

HTML DAN CSS

PEMROGRAMAN BERBASIS WEB

(2)

Mark Up Language

• _{Mark up : informasi tambahan yang}

menjelaskan bagaimana teks tersebut

• _{HTML (HyperText Markup Language)}

(Standard Generalized Markup Language)

Contoh subset lain dari SGML :

– SMIL (Synchronized Multimedia Integration

– XML (eXtensible Markup Language)

– MathML (Mathematical Markup Language)

– CML (Chemical Markup Language)

28 Maret 2015 Pemrograman

Mark Up Language

yang ditempatkan pada teks untuk

tersebut diinterpretasi

Language) merupakan subset dari SGML

Language)

Integration Language)

Language)

Pemrograman Web

(3)

HTML (

HTML (HyperText

HyperText

• _{HTML adalah sebuah bahasamarkupberupa}

menginstruksikan browser untuk

dengan yang diinginkan.

• _{HTML adalah sebuah standar yang}

menampilkan halaman web dan

Internet yang saat ini dikendalikan

(W3C).

• _{Sebuah file yang merupakan}

menggunakan

browser

webseperti

MicrosoftInternet Explorer.

• _{Versi terakhir dari HTML adalah}

Markup Language)

(4)

Penulisan

• _{Nama tag ditulis di dalam tanda <}

• _{Nama tag boleh ditulis dalam huruf}

– Contoh : <HTML> <html> <Html> Beberapa

dalamnya:

– Contoh : <P ALIGN = “CENTER”>

dimana

P : nam tag

ALIGN : nama atribut

CENTER : nilai atribut

• _{Hindari pasangan tag yang berpotongan}

28 Maret 2015 Pemrograman Web

Penulisan

Penulisan Tag

Tag

dan >

huruf kecil, kapital atau kombinasi.

Beberapa tag mengandung atribut di

berpotongan dengan pasangan lain.

Pemrograman Web

(5)

Skema

Skema Dasar

Dasar

JUDUL

TEKS DALAM BADAN DOKUMEN

Dasar

Dasar HTML

HTML

TEKS DALAM BADAN DOKUMEN

(6)

Skema

Skema Dasar

Dasar

<HTML> <HEAD>

<TITLE>Judul dokumen</TITLE> </HEAD>

<BODY>

Isi dokumen </BODY> </HTML>

Keterangan

<HTML> …. </HTML> menandai <HEAD> …. </HEAD> menandai <TITLE>Judul dokumen</TITLE> <BODY> Isi dokumen</BODY>

Dasar

Dasar HTML

HTML

Keterangan :

menandai awal dan akhir dokumen HTML menandai awal dan akhir header dokumen

</TITLE> memberi judul pada dokumen

menandai awal dan akhir isi dokumen

Pemrograman Web

(7)

Jenis

Jenis Elemen

Elemen

Secara garis besar, terdapat 4 jenis elemen

1. Structural. Tanda yang menentukan

(contoh, <h1>Golf</h1> akan memerintahkan "Golf" sebagai teks tebal besar yang menunjukkan

2. Presentational. _{Tanda yang menentukan}

peduli dengan level dari teks tersebut menampilkan bold. Tanda presentational oleh CSS dan tidak direkomendasikan

3. Hypertext. _{Tanda yang menunjukkan}

tersebut atau pranala ke

href="http://www.wikipedia.org/">Wikipedia</a> Wikipediasebagai sebuah hyperlinkke

Elemen

Elemen HTML

HTML

elemen dari HTML:

menentukan level atau tingkatan dari sebuah teks memerintahkan browser untuk menampilkan

menunjukkan sebagai Heading 1

menentukan tampilan dari sebuah teks tidak tersebut (contoh, <b>boldface</b> akan presentational saat ini sudah mulai digantikan direkomendasikan untuk mengatur tampilan teks,

(8)

Tag

Tag Judul

Judul

<Hn>Judul paragraf</Hn> dengan n = 1,2,3,4,5,6 (

(Heading)

n = 1,2,3,4,5,6 (tingkat besar huruf judul)

Pemrograman Web

(9)

Tag

Tag Paragraf

Paragraf

<p>paragraf</p> berfungsi untuk menandai terlihat dibatasi oleh satu baris kosong sebelum

Paragraf

Paragraf (Paragraph)

(Paragraph)

(10)

Tag

Tag Atribut

Atribut (Bold, Italic, Underline)

(Bold, Italic, Underline)

<b>Kalimat yang dicetak tebal</b>

<i>Kalimat yang dicetak miring</

<u>Kalimat yang digaris bawahi</u>

Untuk menandai bagian kalimat

atau digaris bawahi.

(Bold, Italic, Underline)

</b>

miring</i>

</u>

agar dicetak tebal, miring, dan/

Pemrograman Web

(11)

Tag

(12)

Tag

Tag Atribut

Atribut (Superscript, Subscript)

(Superscript, Subscript)

• <sup>bagian yang dicetak tinggi

• <sub>bagian yang dicetak rendah

• Untuk menandai bagian karakter

biasanya untuk rumus matematika

(Superscript, Subscript)

tinggi</sup>

rendah</sub>

karakter agar dicetak tinggi atau rendah,

matematika atau kimia.

Pemrograman Web

(13)

Tag

(14)

Tag Ganti Baris (Break line)

<br> : Untuk pindah ke baris berikutnya

Bentuk penulisan lain yang dianjurkan

Tag Ganti Baris (Break line)

berikutnya.

dianjurkan (XML style) :<br />

Pemrograman Web

(15)

Paragraf

Ganti Baris

(16)

Tag Font (Size, Face, Color)

Memformat suatu bagian kalimat dengan tertentu.

Tag : font Parameter : size, face, color

Tag Font (Size, Face, Color)

dengan ukuran, jenis huruf, atau warna

Pemrograman Web

(17)

(18)

28 Maret 2015 Pemrograman WebPemrograman Web

(19)

Tag Enumerasi

(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 Enumerasi

(List, Unnumbered List, Ordered List)

menandai suatu item dari daftar

simbol • (bullet)

oleh tag <ul> </ul> dalam daftar

(20)

28 Maret 2015 Pemrograman WebPemrograman Web

(21)

(22)

Tag Garis Mendatar (Horizontal Line)

<hr> : membentuk garis pemisah mendatar • Bentuk penulisan lain yang dianjurkan

Tag Garis Mendatar (Horizontal Line)

mendatar.

(XML style) :<hr />

Pemrograman Web

(23)

(24)

Tag

Tag Gambar

Gambar

<img src="NamaFileGambar

• _{NamaFileGambar= file gambar}

.JPG, atau .PNG.

• _{Untuk menampilkan sebuah file}

• _{Bentuk penulisan lain yang dianjurkan}

<img src="NamaFileGambar

Gambar

Gambar (Image)

(Image)

NamaFileGambar">

gambar yang mempunyai ekstensi .GIF,

file gambar.

dianjurkan (XML style) :

NamaFileGambar" />

Pemrograman Web

(25)

(26)

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju

Link = Alamat URL atau nama file

Acuan= Kata sembarang sebagai

URL/file/bagian dokumen lain.

Tag Link (Anchor)

click</a>

dituju</a>

dan/atau acuan yang dituju

sebagai penanda membentuk link ke

Pemrograman Web

(27)

Tag

Tag Tabel

Tabel (Table)

(Table)

<table> definisi

Tabel didefinisikan dengan cara menyatakan

• Tag untuk penanda baris adalah<tr> definisi

• Tag untuk penanda kolom adalah<td>data</td

(Table)

(Table) -- data

data

definisi tabel</table>

menyatakan baris-baris dan kolom-kolom. definisi baris</tr>

(28)

Tag

Tag Tabel

Tabel (Table)

(Table)

Untuk menata letak (layout) isi dokumen keperluan ini).

(Table)

(Table) -- layout

layout

Pemrograman Web

28 28

(29)

FRAME

Frame membagi layar k dalam beberapa

layar menampilkan web page yang berbeda

Tag Dasar :

• _{<frameset> ..</frameset>}

• _{<frame />}

• _{<noframes> .. </noframes>}

Basic attributes

• _{cols = “values” ….(value biasanya}

besar pembagian area)

• _{rows = “values”}

FRAME

beberapa jendela, dimana masing-masing

berbeda.

(30)

FRAME

</frameset>

FRAME

Pemrograman Web

(31)

FORM

Fungsi Form dalam Website :

• memperoleh data-data user baiknama

• untuk mendaftar pada service yang di

• memperoleh informasi pembelian secara

• memperoleh feedback dari user mengenai

FORM

baiknama, alamat dan data lainnya di sediakan.

secara online

(32)

Form

Form1.html

Info.html

Form

Form -- Text

Text

Pemrograman Web

(33)

Form

(Password,

(Password, Checkbox,Radio

Checkbox,Radio

Password :

<INPUT TYPE=“PASSWORD” NAME=“password” SIZE

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”

Form

Checkbox,Radio

Checkbox,Radio))

(34)

Form

(Select,

(Select, Textarea

Textarea

Select :

Musik yang Disukai :<BR> <SELECT NAME = “musik”> <OPTION VALUE = “Jazz”>Jazz <OPTION VALUE = “Rock”>Rock

<OPTION VALUE = “Keroncong”>Keroncong

Textarea

Komentar Anda : <BR>

TEXTAREA NAME =“komentar” ROWS =“5” COLS=40’

WRAP>123….ABC

Pemrograman Web

34 34

(35)

Cascading Style Sheets (CSS)

Cascading Style Sheets(CSS) adalah memperindah halaman website (situs),

mengubah keseluruhanwarna dan tampilan memformatulang situs kita.

CSS ini telah distandarkan oleh World digunakan diweb browser.

Keuntungan CSS

• Dapat di-update dengan cepat mendefinisikan sebuah style-sheet

tersebut untuk diterapakan pada seluruh halaman situs kita.

Cascading Style Sheets (CSS)

adalah suatu teknologi yang digunakan untuk ), dengan CSS kita dapat dengan mudah tampilan yang ada di situs kita sekaligus

World Wide Web Consortium (W3C) untuk

(36)

Cascading Style Sheets (CSS)

Sebuah style sheet terdiri dari beberapa terdiri dari satu atau lebih selektor (declaration block). Sebuah blok deklarasi dipisahkan oleh titik koma (;). Masing-titik dua (:) dan nilai (value).

Cascading Style Sheets (CSS)

beberapa aturan (rules). Masing-masing aturan (selector) dan sebuah blok deklarasi deklarasi terdiri dari beberapa deklarasi yang -masing deklarasi terdiri dari property,

Pemrograman Web

(37)

CSS : Font Property

Font

Syntax: font: <value>

Possible Values:[ <font-style>|| <font

size>[/<line-height>]? <font-family>

Contoh:

P { font: italic bold 12pt/14pt Times,

Syntax: font-size: <value>

Possible Values:<absolute-size>|<relative

• <absolute-size>:xx-small | x-small

larg

CSS : Font Property

variant>|| weight>]?

<font-serif }

(38)

xx-CSS : Font Property

CSS : Font Property

Font Style

Syntax: font-style: <value>

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 |

400 | 500 | 600 | 700 | 800 | 900

CSS : Font Property

Possible Values: normal | italic | oblique

Possible Values: normal | bold| bolder| lighter | 100 | 200 | 300 |

Pemrograman Web

(39)

CSS : Color & Background Property

Color

Syntax:color: <color>

Nilai (value) dari color adalah sebuah keyword dari palette Windows VGA: aqua, black, blue, purple, red, silver, teal, white, and yellow.

Ada 4 cara dalam menuliskan warna menggunakan

• #rrggbb(e.g., #00cc00)

• _{#rgb(e.g., #0c0)}

• rgb(x,x,x)dimanaxadalah integer antara 0 dan

• rgb(y%,y%,y%)dimanayis nomor antara 0.0

Background Color

Syntax: background-color: <value> Possible Values:<color>| transparent

CSS : Color & Background Property

keyword atau sebuah kode RGB. 16 keyword diambil fuchsia,gray, green, lime, maroon, navy, olive,

menggunakan kode RGB:

dan 255 (e.g., rgb(0,204,0))

(40)

CSS : Text Alignment & Box Property

Text Alignment

Syntax: text-align: <value>

Possible Values: left | right | center | justify

Box Properties

Bottom Border Width

Syntax:border-bottom-width: <value>

Possible Values: thin | medium | thick | <length>

Width

Syntax:width: <value>

Possible 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 | ]{1,4}

28 Maret 2015 Pemrograman

CSS : Text Alignment & Box Property

Values: left | right | center | justify

Values: thin | medium | thick | <length>

Values:<length>| <percentage>| auto

Pemrograman Web

(41)