desain web desain web

23

Upload: lebao

Post on 12-Jan-2017

287 views

Category:

Documents


8 download

TRANSCRIPT

Sumber : Core WebProgrammingPengarang : Marty Hall – Larry BrownSlide : Riyanto Sigit

Desain WEBDesain WEB

Materi1. Internet dan WWW2. Pengenalan HTML3. Browser dan Editor4. Tag-tag HTML5. Kode Warna6. Heading, Paragraph dan Break7. Pemformatan Karakter8. Listing9. Menempelkan Image10. Membuat Link11. Membuat Table

Internet dan WWWWWWWWWWWW• Internet merupakan jaringan global yang

menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragamdi seluruh dunia untuk dapat berkomunikasi.

• World Wide Web (WWW) merupakan bagian dariinternet yang paling cepat berkembang dan paling populer karena kemampuan grafiknya.

• Dan HTML merupakan program yang dipakai untukmembuat document WWW yang bisa di aksesmelalui web.

PengenalanPengenalanPengenalanPengenalan HTMLHTMLHTMLHTML• Hypertext Markup Language merupakan standard

bahasa yang digunakan untuk menampilkandocument web, yang bisa dipakai untuk :– Mengontrol tampilan dari web page dan contentnya. – Mempublikasikan document secara online sehingga bisa di

akses– Membuat online form yang bisa di gunakan untuk

menangani pendaftaran, transaksi secara online.– Menambahkan object-object seperti image, audio, video

dan juga java applet dalam document HTML

Browser Browser Browser Browser dandandandan EditorEditorEditorEditor• Browser merupakan software yang di install di

mesin client yang berfungsi untuk menterjemahkantag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.

• Editor merupakan Program yang di gunakan untukmembuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

TagTagTagTag----tag HTMLtag HTMLtag HTMLtag HTML

• Command HTML biasanya disebutTAG, TAG digunakan untukmenentukan tampilan dari document HTML.

• Setiap document HTML di awali dan diakhiri dengan tag HTML

TagTagTagTag----tag HTMLtag HTMLtag HTMLtag HTML<HTML>

<HEAD><TITLE> berisi text yang akan muncul pada title bar browser </TITLE>

</HEAD><BODY>

berisi tentang text, gambar, atau apapun yang ingin ditampilkan</BODY>

</HTML>

Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

TagTagTagTag----tag HTMLtag HTMLtag HTMLtag HTML• Dalam tag HTML di dalamnya kita bisamemberikan element dan atribut yang melekat di dalamnya. Sintaxnya adalahsbb :

<ELEMENT ATTRIBUTE = value>• Element - nama tag• Attribute - atribut dari tag• Value - nilai dari atribut.

Program 1<HTML><HEAD>

<TITLE> text title </TITLE></HEAD><BODY>

<BODY BGCOLOR=lavender></BODY></HTML>

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender, yang artinya body html kita warna backgroundnya kitaberi warna lavender.Untuk memulai bekerja dengan HTML anda bisa gunakan editor NotePadatau editor lainya. Caranya:1. Ketikkan teks yang ada dalam box tersebut di notepad.2. Simpan dengan nama file satu.htm atau satu.html3. Buka dengan browser internet explorer atau yang lain file satu.htm

KodeKodeKodeKode WarnaWarnaWarnaWarna• Pengaturan warna di halaman HTML menggunakan

mode kombinasi RGB. Yang mana setiap warnaditampilkan dalam dua digit nilaiheksadesimal(0,1,2..F). Setiap bagian dua digit menunjukkan intensitas dari kombinasi warnamerah, hijau dan biru. Sebagai contoh 00 pada duadigit pertama berarti tidak ada warna merah dalamkombinasi warna ,dst.

• Color merupakan attribute yang bisa andatambahkan pada beberapa element seperti body, background, bgcolor, text, link, vlink, alink, font danlainya.

Tabel warna

Heading, Paragraph danBreak• Tag Heading <hx> digunakan untuk memformat heading (judul

dan sub judul) dari suatu halaman web. Heading ini akanmemperbesar ukuran huruf untuk setiap jenis heading. Adaenam buah heading yang dikenal di HTML, yaitu <h1> </h1>sampai <h6></h6>.

• Tag paragraph <p> </p> berfungsi layaknya untuk pengaturanantar paragraph dalam halaman web anda. Dalam elemenparagraph terdapat atribut align=[left|center|right] yang berfungsi pengaturan perataan paragraph.

• Tag Break <br> berfungsi untuk memberikan baris baru suatuparagraph dalam halaman web anda. Tag break ini tidakmemerlukan tag penutup break.

• Tag Horizontal ruler <hr> berfungsi untuk menampilkan garishorisontal tiga dimensi di dalam halaman web. Tag ini juga tidakmemerlukan penutup.

Program 2<HTML><HEAD>

<TITLE> paragrap, break dan hr </TITLE></HEAD><BODY BGCOLOR=#990066 text=#FFCCFF >

<h1>TOKO BUKU SERBA MURAH</h1><hr width=50% align=left><h2>Toko kami menyediakan</h2><h3>Alat Tulis</h3><p> Pensil <br>ballpoint<br>penggaris<br>dll</p> <h3>Buku buku Pelajaran</h3><p> Ilmu Pasti <br>Ilmu Bumi<br>Sejarah<br>dll</p> <h3>Alat Kantor</h3><p>Meja <br>Kursi<br>File Management<br>dll</p>

</BODY></HTML>

PemformatanPemformatanPemformatanPemformatan KarakterKarakterKarakterKarakter• Karakter/kalimat pada halaman HTML bisa diformat

sesuai design yang kita butuhkan, baik ukuran , jenis maupun warna dengan menggunakan tag <font> </font>.

• Atribut elemen font sbb :– Size=angka (ukuran huruf, default 3)– color=warna(warna huruf, default black)– face=jenis huruf (default Times New Roman)

• Elemen ragam karakter :– <b> teks disini </b> � menghasilkan huruf tebal– <i> teks disini </i> � menghasilkan huruf miring– <u>teks disini</u> � menghasilkan huruf bergaris bawah

Program 3<HTML><HEAD>

<TITLE> format karakter</TITLE></HEAD><BODY BGCOLOR=#000000 text=#FFFFFF >

<h1 align =center><font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font></h1>

<hr width=360 align=center><h2>Toko kami menyediakan</h2><h3><font color=red>Alat Tulis</font></h3><p align=center> Pensil <br>ballpoint<br>penggaris<br>dll</p> <h3 font color=red>Buku buku Pelajaran</h3><p align=right> Ilmu Pasti <br>Ilmu Bumi<br>Sejarah<br>dll</p> <h3>Alat Kantor</h3><p align=left>Meja <br>Kursi<br>File Management<br>dll</p>

</BODY></HTML>

ListingListingListingListing• Properti <li> digunakan untuk menampilkaninformasi dalam bentuk daftar/list. Ada duajenis daftar yang dikenal di HTML, yaitu :– <ul> daftar dalam format bullet/unordered listtype=[disc|square|circle|] � default disc

– <ol> daftar dalma format ordered listtype=[1|a|A|i|I] � default 1

Program 4<html>

<head><title>Ordered List</title>

</head><body>

<P>Shedule for HTML Course</P><ol start="1" type="I">

<li>Sunday</li><ol type="a"><li>Introduction to HTML</li><li>Creating List</li>

</ol><li>Monday</li><ol type="A">

<li>Creating table</li><li>Inserting Image</li>

</ol><li>Tuesday</li><ol type="I">

<li>Creating Link</li><li>Preparing Website</li>

</ol><li>Wednesday</li>

</body></html>

MenempelkanMenempelkanMenempelkanMenempelkan ImageImageImageImage• Kita dapat menempelkan gambar dalam html dengan

format file JPG atau GIF. Untuk menampilkannyadigunakan tag IMG :

<IMG SRC=namafilegambar>• atribut elemen gambar :

– SRC = lokasi dan nama gambar– Alt = teks (teks alternatif)– Width = lebar gambar dalam pixel– Height = tinggi gambar dalm pixel– Align =[top|middle|bottom|left|right] � perataan gambar– Border = pixel (tebal garis tepi gambar)

MembuatMembuatMembuatMembuat LinkLinkLinkLink• Elemen link berfungsi sebagai penghubung antara

suatu halaman dengan halaman yang lain, atau keURL lain, bahkan dalam satu halaman berpindah kesub judul yang lain. Format tag link adalah sbb :

<a href = URL_tujuan>hypertext</a>• URL_tujuan bernilai lokasi dan nama file yang akan

dituju• Hypertext nilainya akan ditampilkan dibrowser sbg

text link atau tombol penghubung.

MembuatMembuatMembuatMembuat TableTableTableTable• Tag <table> </table>digunakan untuk membuat table dalam

document HTML. Elemen tabel berisi property :<tr> … </tr> � untuk menentukan baris (table row)<td> .. </td> � untuk menampilkan data pada sel tabel (table

data)• Sedangkan atribut elemen tabel adalah :

– Width = dalam satuan panjang (dipakai untuk lebar table ukuran bisadalam pixel atau persen)

– Height = dalam satuan panjang (dipakai untuk tinggi tabel, ukuran bbisadalam pixel atau persen)

– Border = dalam satuan pixel (dipakai tebal garis tepi)– Cellspacing = dalam satuan pixel (dipakai untuk spasi antar sel)– Cellpading = dalam satuan pixel (dipakai untuk spasi di dalam sel)– Align = [left|center|right] (dipakai untuk perataan tabel)– Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar

belakang tabel)

MembuatMembuatMembuatMembuat TableTableTableTable• Atribut table row :

– Align = [left|center|right] (dipakai untuk perataan dalam satu baris sel secarahorizontal)

– Valign = [top|middle|bottom] (dipakai untuk perataan dalam satu baris sel secaravertikal)

– Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakangbaris)

• Atribut tabel data :– Rowspan = penggabungan baris– Colspan = penggabungan kolom– Align = [left|center|right] (dipakai untuk perataan sel secara horisontal)– Valign = [top|middle|bottom] (dipakai untuk perataan sel secara vertikal)– Width = dalam satuan panjang (dipakai untuk lebar sel ukuran bisa dalam pixel atau

persen)– Height = dalam satuan panjang (dipakai untuk tinggi sel, ukuran bbisa dalam pixel

atau persen)– Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang sel)

Program 5<html>

<head><title>Using Table</title>

</head><body>

<table bgcolor=”CCCCFF” width="62%" border="1" cellpadding="0">

<tr><td colspan="3" align="center">Quarter 1</td><td colspan="3" align="center">Quarter 2</td>

</tr><tr align="center">

<td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td>

</tr><tr>

<td>100</td><td>5000</td><td>200</td><td>1500</td><td>2500</td><td>1750</td>

</tr><tr>

<td>290</td><td>5050</td><td>2300</td><td>100</td><td>270</td><td>300</td>

</tr></table>

</body></html>

Tugas

• Membuat Halaman Web untuk JurusanTeknik Informatika

• Membuat Halaman Web untukProgram Studi Teknik Komputer