Presentation 1 - Desain dan pemrograman web 2

25
DESAIN DAN PEMROGRAMAN WEB 2 Pertemuan 1 MENINJAU ULANG (PENGENALAN html)

Transcript of Presentation 1 - Desain dan pemrograman web 2

Page 1: Presentation 1 - Desain dan pemrograman web 2

DESAIN DAN PEMROGRAMAN WEB 2 Pertemuan 1

MENINJAU ULANG(PENGENALAN html)

Page 2: Presentation 1 - Desain dan pemrograman web 2

HTML “HyperText Markup Language”

HTML = HyperText Markup Language merupakan standar bahasa yang digunakan untuk menampilkan dokumen web

Untuk membuat dokumen web yang bisa ditampilkan di browser, perlu menuliskan kode HTML baik secara langsung misal pada editor text (Notepad), maupun secara tidak langsung misal melalui software Frontpage

Page 3: Presentation 1 - Desain dan pemrograman web 2

Tag

Kode khusus yang merupakan komponen fundamental pada dokumen web dan akan dikenali oleh browser

Nama TAG ditulis di dalam tanda < dan > dan untuk TAG penutup ditambakan tanda /

Boleh dituliskan dengan huruf besar maupun kecil

Digunakan sepasang, contoh: <H1> dan </H1>

Page 4: Presentation 1 - Desain dan pemrograman web 2

Atribut dan Value Beberapa tag mengandung atribut

didalamnya, contoh: <p align=“center”> Pada contoh di atas, p adalah nama tag,

sedangkan align adalah nama atribut Atribut pada umumnya melibatkan value,

seperti pada contoh, “center” adalah value untuk atribut align

Page 5: Presentation 1 - Desain dan pemrograman web 2

Struktur Dasar Dokumen HTML Tag utama adalah HTML, HEAD, dan BODY Fungsi tag HTML adalah untuk menyatakan

bahwa dokumen tersebut adalah dokumen HTML

Fungsi tag HEAD adalah untuk memberikan informasi tentang dokumen HTML itu sendiri

Fungsi tag BODY adalah untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML

Page 6: Presentation 1 - Desain dan pemrograman web 2

Struktur Dasar Dokumen HTML

Struktur dokumen:<HTML>

<HEAD> bagian head</HEAD><BODY> bagian body</BODY>

</HTML>

Page 7: Presentation 1 - Desain dan pemrograman web 2

Title Untuk membuat judul pada suatu dokumen

web, digunakan tag <TITLE> .. </TITLE> TITLE bukanlah suatu bagian dari teks

dokumen dan hanya berada pada bagian HEAD

TITLE biasanya ditampilkan pada browser pada title bar dari jendela browser dan biasanya berfungsi sebagai label dari jendela browser tersebut

Page 8: Presentation 1 - Desain dan pemrograman web 2

Heading HTML menyediakan 6 (enam) buah tag yang

digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen

Tag-tag judul ini berupa:<H1> .. </H1> sampai dengan <H6> .. </H6>

Dapat ditambahkan atribut, misal align dengan value: left, right, justify

Page 9: Presentation 1 - Desain dan pemrograman web 2

Paragraf, Line Break, Comment Tag <P> digunakan untuk membuat

paragraf, dapat ditambahkan atribut semisal alignContoh:<P align=“center”> ..isi paragraf.. </P>

Untuk membuat garis baru atau berpindah baris digunakan tag <BR>

Untuk memberikan komentar yang nantinya statement tersebut akan diabaikan oleh browser, digunakan tanda <!- dan diakhiri dengan -->

Page 10: Presentation 1 - Desain dan pemrograman web 2

Garis Horizontal Untuk membuat garis horizontal pada

dokumen web digunakan tag <HR> Atribut pada tag <HR>

Size : Menentukan ketebalan garisWidth : Menentukan lebar garisAlign : Menentukan peletakan teks dalam barisNoshade : Mengatur agar baris tidak disertai bayangan

Page 11: Presentation 1 - Desain dan pemrograman web 2

Format Karakter Digunakan untuk melakukan format teks Tag yang digunakan:

<b> : Menebalkan teks<i> : Memiringkan teks<u> : Menggarisbawahi teks<s> : Memberi coretan teks<tt> : Membuat teks font courier (mesin ketik)<sup> : Membuat superscript<sub> : Membuat subscript<big> : Membesarkan teks<small> : Mengecilkan teks

Page 12: Presentation 1 - Desain dan pemrograman web 2

Font Digunakan untuk menentukan jenis, warna,

mau pun ukuran huruf Tag yang digunakan <font> Dapat menambah atribut:

Size : Ukuran hurufFace : Jenis hurufColor : Warna huruf

Page 13: Presentation 1 - Desain dan pemrograman web 2

Color Format

Page 14: Presentation 1 - Desain dan pemrograman web 2

Pemformatan Karakter BLOCKQUOTE

• Digunakan untuk membuat kutipan yaitu teks yang menjorok ke dalam dan baris kosong

• Tag yang digunakan <blockquote> PREFORMATTED

• Memerintahkan browser untuk menampilkan teks tepat seperti yang diketikkan dalam dokumen HTML

• Tag yang digunakan <pre>

Page 15: Presentation 1 - Desain dan pemrograman web 2

Karakter Khusus

HTML menyediakan sejumlah simbol yang berguna untuk menampilkan makna khusus bagi browser

Kode HTML yang digunakan:

Simbol HTML Simbol HTML

Ä &Auml; ä &auml;

Ë &Euml; ë &euml;

Ï &Iuml; ï &iuml;

Ö &Ouml; ö &ouml;

Ü &Uuml; ü &uuml;

β &szlig; ¼ &frac14;

© &copy; < &lt;

® &reg; > &gt;

™ &#8482 » &raquo;

Spasi &nbsp; « &laquo;

& &amp; ÷ &divide;

x &times;

Page 16: Presentation 1 - Desain dan pemrograman web 2

Daftar Item Tidak Berurut <ul> adalah tag untuk membuat daftar

item tidak berurut <li> adalah tag untuk membuat item dari

daftar urutan Tag list tersebut dapat ditambahkan atribut

TYPE dengan nilai:Disc : Bulatan hitam (●)Square : Kotak (■)Circle : Bulatan kosong (○)

Page 17: Presentation 1 - Desain dan pemrograman web 2

Daftar Item Berurut <ol> adalah tag untuk membuat daftar

item berurut <li> adalah tag untuk membuat item dari

daftar urutan Tag list tersebut dapat ditambahkan atribut

TYPE dengan nilai:1 : Angka latinA : Huruf Aa : Huruf aI : Angka romawi

Page 18: Presentation 1 - Desain dan pemrograman web 2

Daftar Item Berkalang Pada daftar item tidak berurut maupun

daftar item berurut dapat bersifat berkalang Dimana suatu daftar item dapat berada di

dalam daftar item yang lain

Page 19: Presentation 1 - Desain dan pemrograman web 2

Image (Jenis Gambar) GIF : Graphics Interchanger Format, hanya

mendukung 256 warna JPEG : Joint Photographics Expert Group,

menggunakan 24 bit untuk setiap warna PNG : Portable Network Graphics, dirancang

oleh W3C dengan format yang tidak tergantung jenis komputer dan OS yang digunakan

TIFF/TIF : Tangged Image File Format

Page 20: Presentation 1 - Desain dan pemrograman web 2

Menyisipkan Gambar Untuk membuat latar belakang pada

halaman web, digunakan atribut background pada tag <body ..> Contoh : <body background=“image_file”>

Tag yang digunakan <img src=“image_file”>

Atribut pada tag <img> Align : Mengatur perataan gambar Alt : Menyediakan teks pengganti gambar

Page 21: Presentation 1 - Desain dan pemrograman web 2

Menyisipkan Gambar lanjt.. Height : Menentukan tinggi gambar Width : Menentukan lebar gambar Border : Memberi bingkai pada gambar Hspace : Menentukan spasi horizontal suatu

gambar dengan objek sekitarnya Vspace : Menentukan spasi vertikal suatu

gambar dengan objek sekitarnya Membuat link dengan gambar, digunakan

tag <a href=“link_tujuan”><img src=“image_file”>Teks disini</a>

Page 22: Presentation 1 - Desain dan pemrograman web 2

Nilai Atribut Align pada <img> Bottom : Meratakan bagian bawah teks

dengan bagian bawah gambar Top : Meratakan bagian atas gambar

dengan bagian paling atas suatu item pada baris saat ini

Middle : Meratakan bagian tengah gambar dengan bagian bawah teks

Left : Meletakkan gambar di sebelah kiri teks

Right : Meletakkan gambar di sebelah kanan teks

Page 23: Presentation 1 - Desain dan pemrograman web 2

Hyperlink Penghubung ke halaman-halaman web/file

yang lain Tag yang digunakan adalah anchor tag,

contoh: <a href=“URL”>LABEL DISINI</a> Untuk menentukan warna hyperlink, dapat

digunakan atribut pada tag <body ..> Link : Menentukan warna link Alink : Menentukan warna link aktif Vlink : menentukan warna link sesudah

dikunjungi

Page 24: Presentation 1 - Desain dan pemrograman web 2

Contoh ..

Page 25: Presentation 1 - Desain dan pemrograman web 2

Link ke Protokol Lain http:// Web ftp:// Server ftp File:// Berkas ftp News:// Newsgroup UseNet mailto:// E-mail telnet:// Telnet