HTML DAN CSS - Gunadarma Universitylisetyo.staff.gunadarma.ac.id/Downloads/files/42260/MATERI... · JenisElemen Secaragarisbesar,terdapat4jeniselemen 1. Structural.Tandayangmenentukan

HTML DAN CSSHTML DAN CSS

PEMROGRAMAN BERBASIS WEBPEMROGRAMAN BERBASIS WEB

PERTEMUAN KEPERTEMUAN KE

HTML DAN CSSHTML DAN CSS

PEMROGRAMAN BERBASIS WEBPEMROGRAMAN BERBASIS WEB

PERTEMUAN KEPERTEMUAN KE--33

Mark Up LanguageMark Up Language

• Mark up : informasi tambahan yangmenjelaskan 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 LanguageMark Up Language

yang ditempatkan pada teks untuktersebut diinterpretasi

Language) merupakan subset dari SGMLLanguage)

Integration Language)

Language)

Language)

Pemrograman Web

22

HTML (HTML (HyperTextHyperText

• HTML adalah sebuah bahasamarkupberupamenginstruksikan browser untukdengan yang diinginkan.

• HTML adalah sebuah standar yangmenampilkan halaman web danInternet yang saat ini dikendalikan(W3C).

• Sebuah file yang merupakanmenggunakan browser websepertiMicrosoftInternet Explorer.

• Versi terakhir dari HTML adalahberkembang XHTML yang merupakanSpesifikasi HTML standar :http://www


Markup Language)Markup Language)

bahasamarkupberupa kode-kode tag yanguntuk menghasilkan tampilan sesuai

yang digunakan secara luas untukdan HTML kini merupakan standar

dikendalikan oleh World Wide Web Consortium

file HTML dapat dibuka denganwebseperti Mozilla Firefoxatau

HTML 4.01, meskipun saat ini telahmerupakan pengembangan dari HTML.

//www.w3.org/TR/html4

Pemrograman Web

33

PenulisanPenulisan

• Nama tag ditulis di dalam tanda <

• Nama tag boleh ditulis dalam huruf

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

– Contoh : <P ALIGN = “CENTER”>

dimana

P : nam tag

ALIGN : nama atribut

CENTER : nilai atribut

• Hindari pasangan tag yang berpotongan

28 Maret 2015 Pemrograman Web

PenulisanPenulisan TagTag

dan >

huruf kecil, kapital atau kombinasi.

Beberapa tag mengandung atribut di

berpotongan dengan pasangan lain.

Pemrograman Web

44

SkemaSkema DasarDasar


JUDUL

TEKS DALAM BADAN DOKUMEN

DasarDasar HTMLHTML

Pemrograman Web

55

TEKS DALAM BADAN DOKUMEN

NAMA BERKAS

SkemaSkema DasarDasar<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>


DasarDasar HTMLHTML

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

66

JenisJenis ElemenElemenSecara 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 menentukanpeduli dengan level dari teks tersebutmenampilkan bold. Tanda presentationaloleh CSS dan tidak direkomendasikan

3. Hypertext. Tanda yang menunjukkantersebut atau pranala kehref="http://www.wikipedia.org/">Wikipedia</a>Wikipediasebagai sebuah hyperlinkke

4. Elemen widget yang membuat objeklist (<li>), dan garis horizontal (<hr>)


ElemenElemen HTMLHTMLelemen dari HTML:

menentukan level atau tingkatan dari sebuah teksmemerintahkan browser untuk menampilkan

menunjukkan sebagai Heading 1

menentukan tampilan dari sebuah teks tidaktersebut (contoh, <b>boldface</b> akan

presentational saat ini sudah mulai digantikandirekomendasikan untuk mengatur tampilan teks,

menunjukkan pranala ke bagian dari dokumendokumen lain (contoh, <a

org/">Wikipedia</a> akan menampilkanhyperlinkke URLtertentu),

objek-objek lain seperti tombol (<button>),(<hr>)

Pemrograman Web

77

Tag Tag JudulJudul<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)

Pemrograman Web

88

Tag Tag ParagrafParagraf<p>paragraf</p> berfungsi untuk menandaiterlihat dibatasi oleh satu baris kosong sebelum


ParagrafParagraf (Paragraph)(Paragraph)menandai suatu paragraf. Suatu paragraf akan

sebelum dan sesudahnya.

Pemrograman Web

99

Tag Tag AtributAtribut (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 kalimatatau digaris bawahi.


(Bold, Italic, Underline)(Bold, Italic, Underline)

</b>

miring</i>

</u>

agar dicetak tebal, miring, dan/

Pemrograman Web

1010

Tag Tag AtributAtribut (Bold, Italic, Underline)(Bold, Italic, Underline)


(Bold, Italic, Underline)(Bold, Italic, Underline)

Pemrograman Web

1111

Tag Tag AtributAtribut (Superscript, Subscript)(Superscript, Subscript)

• <sup>bagian yang dicetak tinggi

• <sub>bagian yang dicetak rendah

• Untuk menandai bagian karakterbiasanya untuk rumus matematika


(Superscript, Subscript)(Superscript, Subscript)

tinggi</sup>

rendah</sub>

karakter agar dicetak tinggi atau rendah,matematika atau kimia.

Pemrograman Web

1212

Tag Tag AtributAtribut (Superscript, Subscript)(Superscript, Subscript)


(Superscript, Subscript)(Superscript, Subscript)

Pemrograman Web

1313

Tag Ganti Baris (Break line)Tag Ganti Baris (Break line)

<br> : Untuk pindah ke baris berikutnya

Bentuk penulisan lain yang dianjurkan


Tag Ganti Baris (Break line)Tag Ganti Baris (Break line)

berikutnya.

dianjurkan (XML style) :<br />

Pemrograman Web

1414


Paragraf

Pemrograman Web

1515

Paragraf

Paragraf

Paragraf

Ganti Baris

Ganti Baris

Tag Font (Size, Face, Color)Tag Font (Size, Face, Color)Memformat suatu bagian kalimat dengantertentu.

Tag : font Parameter : size, face, color


Tag Font (Size, Face, Color)Tag Font (Size, Face, Color)dengan ukuran, jenis huruf, atau warna

Pemrograman Web

1616

28 Maret 2015 Pemrograman WebPemrograman Web

1717


1818

Tag EnumerasiTag Enumerasi(List, Unnumbered List, Ordered List)(List, Unnumbered List, Ordered List)

• <li>item</li> : Untuk menandai(enumerasi), diawali dengan simbol

• Kelompok item harus diapit olehbertingkat.

• Untuk menomori enumerasi dengandengan tag <ol> </ol>


Tag EnumerasiTag Enumerasi(List, Unnumbered List, Ordered List)(List, Unnumbered List, Ordered List)

menandai suatu item dari daftarsimbol • (bullet)

oleh tag <ul> </ul> dalam daftar

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

Pemrograman Web

1919


2020


2121

Tag Garis Mendatar (Horizontal Line)Tag Garis Mendatar (Horizontal Line)<hr> : membentuk garis pemisah mendatar

• Bentuk penulisan lain yang dianjurkan


Tag Garis Mendatar (Horizontal Line)Tag Garis Mendatar (Horizontal Line)mendatar.

(XML style) :<hr />

Pemrograman Web

2222


2323

Tag Tag GambarGambar

<img src="NamaFileGambar

• NamaFileGambar= file gambar

.JPG, atau .PNG.

• Untuk menampilkan sebuah file

• Bentuk penulisan lain yang dianjurkan

<img src="NamaFileGambar


GambarGambar (Image)(Image)

NamaFileGambar">

gambar yang mempunyai ekstensi .GIF,

file gambar.

dianjurkan (XML style) :

NamaFileGambar" />

Pemrograman Web

2424


2525

Tag Link (Anchor)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 sebagaiURL/file/bagian dokumen lain.


Tag Link (Anchor)Tag Link (Anchor)click</a>

dituju</a>

dan/atau acuan yang dituju

sebagai penanda membentuk link ke

Pemrograman Web

2626

Tag Tag TabelTabel (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) -- datadata

Pemrograman Web

2727

definisi tabel</table>

menyatakan baris-baris dan kolom-kolom.

definisi baris</tr>

<td>data</td>

Tag Tag TabelTabel (Table) (Table)


Untuk menata letak (layout) isi dokumenkeperluan ini).

(Table) (Table) -- layoutlayout

Pemrograman Web

2828

dokumen (walaupun hakikatnya bukan untuk

FRAMEFRAME


Frame membagi layar k dalam beberapalayar menampilkan web page yang berbeda

Tag Dasar :• <frameset> ..</frameset>• <frame />• <noframes> .. </noframes>

Basic attributes• cols = “values” ….(value biasanya

besar pembagian area)• rows = “values”• name = “frame_name”• src = “frame_source(url)”• target = “frame_name”

FRAMEFRAME

Pemrograman Web

2929

beberapa jendela, dimana masing-masingberbeda.

biasanya dituliskan dalam % menunjukkan

FRAMEFRAME<frameset rows=“30%,*”>

<frame src=“banner.htm” />

<frameset cols = “25%,75%” >

<frame src=“menu.htm” />

<frame src=“content.htm” />

</frameset>

</frameset>


FRAMEFRAME

Pemrograman Web

3030

FORMFORM


Fungsi Form dalam Website :

• memperoleh data-data user baiknama

• untuk mendaftar pada service yang di

• memperoleh informasi pembelian secara

• memperoleh feedback dari user mengenai

FORMFORM

Pemrograman Web

3131

baiknama, alamat dan data lainnya

di sediakan.

secara online

mengenai website anda

Form Form


Form1.html

Info.html

Form Form -- TextText

Pemrograman Web

3232

Form Form (Password, (Password, Checkbox,RadioCheckbox,Radio


Password :

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

Checkbox

Buah yang Anda sukai : <BR>

<INPUT TYPE = “CHECKBOX”

NAME = “anggur” CHECKED> Anggur <BR>


NAME = “jeruk”> Jeruk<BR>


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 Checkbox,RadioCheckbox,Radio))

Pemrograman Web

3333

SIZE=“8” MAXLENGTH=“8”>

Form Form (Select, (Select, TextareaTextarea


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 Form TextareaTextarea))

Pemrograman Web

3434

Keroncong

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)Cascading Style Sheets(CSS) adalah

memperindah halaman website (situs),mengubah keseluruhanwarna dan tampilanmemformatulang situs kita.

CSS ini telah distandarkan oleh Worlddigunakan diweb browser.

Keuntungan CSS

• Dapat di-update dengan cepatmendefinisikan sebuah style-sheettersebut untuk diterapakan pada seluruhhalaman situs kita.

• User yang berbeda dapat mempunyai

• Ukuran dan kompleksitas document


Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)adalah suatu teknologi yang digunakan untuk

), dengan CSS kita dapat dengan mudahtampilan yang ada di situs kita sekaligus

World Wide Web Consortium (W3C) untuk

dan mudah, karena kita cukupsheet global yang berisiaturan-aturan CSS

seluruh dokumen-dokumen HTML pada

mempunyai style-sheet yang berbeda pula.

code dapat diperkecil.

Pemrograman Web

3535

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

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


Cascading Style Sheets (CSS)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

3636

CSS : Font PropertyCSS : Font Property


FontSyntax: font: <value>Possible Values:[ <font-style>|| <fontsize>[/<line-height>]? <font-family>Contoh:P { font: italic bold 12pt/14pt Times,

Font SizeSyntax: font-size: <value>Possible Values:<absolute-size>|<relative• <absolute-size>:xx-small | x-small

larg• <relative-size> : larger | smaller• <percentage>(in relation to parent


Pemrograman Web

3737

<font-variant>|| <font-weight>]? <font-

serif }

size>|<relative-size> |<length>| <percentage>small |small|medium| large|x-large | xx-

element)

CSS : Font PropertyCSS : Font PropertyFont 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



Possible Values: normal | italic | oblique

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

Pemrograman Web

3838

CSS : Color & Background PropertyCSS : Color & Background PropertyColor

Syntax:color: <color>

Nilai (value) dari color adalah sebuah keyworddari 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

Background

Syntax: background: <value>

Possible Values:<background-color>|| <background<background-attachment>|| <background-position>


CSS : Color & Background PropertyCSS : Color & Background Property

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

menggunakan kode RGB:

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

0 dan 100.0 (e.g., rgb(0%,80%,0%))

<background-image>|| <background-repeat>||position>

Pemrograman Web

3939

CSS : Text Alignment & Box PropertyCSS : Text Alignment & Box PropertyText Alignment

Syntax: text-align: <value>Possible Values: left | right | center | justify

Box PropertiesBottom Border WidthSyntax:border-bottom-width: <value>Possible Values: thin | medium | thick | <length>

WidthSyntax:width: <value>Possible Values:<length>| <percentage>| auto

HeightSyntax:height: <value>Possible Values:<length>| auto

Border StyleSyntax: border-style: <value>Possible Values: [ none | dotted | dashed | solid | double | groove | ]{1,4}


CSS : Text Alignment & Box PropertyCSS : Text Alignment & Box Property

Values: left | right | center | justify

Values: thin | medium | thick | <length>

Values:<length>| <percentage>| auto

Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset

Pemrograman Web

4040


TERIMAKASIH

Pemrograman Web

4141

TERIMAKASIH

Lilis Setyowati

HTML DAN CSS - Gunadarma Universitylisetyo.staff.gunadarma.ac.id/Downloads/files/42260/MATERI... · JenisElemen Secaragarisbesar,terdapat4jeniselemen 1. Structural.Tandayangmenentukan

Documents