Presentation 1 - Desain dan pemrograman web 2
-
Upload
jacob-dwi-cristian-umboh -
Category
Documents
-
view
740 -
download
2
Transcript of Presentation 1 - Desain dan pemrograman web 2
DESAIN DAN PEMROGRAMAN WEB 2 Pertemuan 1
MENINJAU ULANG(PENGENALAN html)
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
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>
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
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
Struktur Dasar Dokumen HTML
Struktur dokumen:<HTML>
<HEAD> bagian head</HEAD><BODY> bagian body</BODY>
</HTML>
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
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
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 -->
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
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
Font Digunakan untuk menentukan jenis, warna,
mau pun ukuran huruf Tag yang digunakan <font> Dapat menambah atribut:
Size : Ukuran hurufFace : Jenis hurufColor : Warna huruf
Color Format
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>
Karakter Khusus
HTML menyediakan sejumlah simbol yang berguna untuk menampilkan makna khusus bagi browser
Kode HTML yang digunakan:
Simbol HTML Simbol HTML
Ä Ä ä ä
Ë Ë ë ë
Ï Ï ï ï
Ö Ö ö ö
Ü Ü ü ü
β ß ¼ ¼
© © < <
® ® > >
™ ™ » »
Spasi « «
& & ÷ ÷
x ×
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 (○)
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
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
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
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
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>
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
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
Contoh ..
Link ke Protokol Lain http:// Web ftp:// Server ftp File:// Berkas ftp News:// Newsgroup UseNet mailto:// E-mail telnet:// Telnet