(Standard Generalized Markup Language)

(1)

HTML DAN CSS

PEMROGRAMAN BERBASIS WEB

PERTEMUAN KE

HTML DAN CSS

PEMROGRAMAN BERBASIS WEB

PERTEMUAN KE

PERTEMUAN KE--33

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

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

bahasamarkupberupa kode-kode tag yang

untuk menghasilkan tampilan sesuai

yang digunakan secara luas untuk

dan HTML kini merupakan standar

dikendalikan oleh World Wide Web Consortium

file HTML dapat dibuka dengan

webseperti

Mozilla

Firefoxatau

HTML 4.01, meskipun saat ini telah

(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

NAMA BERKAS

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

menunjukkan pranala ke bagian dari dokumen dokumen lain (contoh, <a org/">Wikipedia</a> akan menampilkan hyperlinkke URLtertentu),

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

menandai suatu paragraf. Suatu paragraf akan sebelum dan sesudahnya.

(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

10 10

(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

12 12

(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

14 14

(15)

Paragraf Paragraf Paragraf Paragraf Ganti Baris 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

16 16

(17)

(18)

28 Maret 2015 Pemrograman WebPemrograman Web

18 18

(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

dengan nomor urut (1,2,3), apitlah

(20)

28 Maret 2015 Pemrograman WebPemrograman Web

20 20

(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

22 22

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

(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

26 26

(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

FRAME

Pemrograman Web

30 30

(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

32 32

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

Form

Textarea

Textarea))

Pemrograman Web 34 34 Keroncong

(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

dan mudah, karena kita cukup sheet global yang berisiaturan-aturan CSS seluruh dokumen-dokumen HTML pada

(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

36 36

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

size>|<relative-size> |<length>| <percentage>

small |small|medium| large|x-large |

(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

38 38

(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

40 40

(41)