Document 15006563
advertisement
Matakuliah Tahun : Web Programming : 2009 Web Design Fundamental Pertemuan 2 Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Menjelaskan elemen dasar Desain web • Membuat halaman web statis sederhana 3 Outline Materials • • • • • • • Web Design Fundamental HTML Basic HTML Structure Tags & Elements Text Formatting Lists, Hyperlinks, Images Tables, Frames 4 Web Design Fundamental • Web Design play important role in successful Web Application, it is the interface from computer to human world • Web Application = Web Design + Web Programming A web site designer must start by structuring the information content in ways that allow for connection, interaction and interference. This principle concerns the format of a web site: the structure, sensemaking, navigation and interface 5 Web Design Fundamental • Important about designing web : – Information Design – User Interface Design – Graphics design • Tools for Web Design: – Content Authoring (HTML Editor) – Adobe Photoshop, Illustrator 6 HTML Basic • HTML – Hypertext Markup Language – Not procedural – Markup language • Identify elements of a page so that a browser can render that page on your computer screen • Used to format text and information – Marked up with elements, delineated by tags – Tags: keywords contained in pairs of angle brackets • HTML tags – Not case sensitive – Good practice to keep all the letters in one case • Forgetting to close tags is a syntax error 7 HTML Structure • Always include the <HTML>…</HTML> tags • Comments placed inside <!--…--> tags • HTML documents – <HEAD>… </HEAD> section • Info about the document • Info in header not generally rendered in display window • <TITLE>… </TITLE> element names your Web page – <BODY>… </BODY> section • Page content • Includes text, images, links, forms, etc. • Elements include backgrounds, link colors and font faces • <P> element forms a paragraph, blank line before and after 8 Simple HTML Pages <html> <head> <Title> Web Programming </Title> </head> <body bgcolor=silver> <font color=blue> <H2> Saya Mahasiswa UBinus </h2></font><br> <p> Selamat Datang di Web Saya</p> </body> </html> 9 Result 10 Text Formatting • List (bullet) • Text Style: – – – – Italic Font Underline Bold, etc • Paragraph control • Etc 11 Font Formatting <Title> Web Programming </Title> </head> <body bgcolor=#00FF00> <font color=blue size=5> <b> Saya Mahasiswa UBinus</b></font><br> <p> <i> Selamat Datang di Web Saya</i> </p> </body> 12 Result 13 Marquee <title>Contoh marquee</title> </head> <body bgcolor=yellow> <h3><font color=silver></font> <marquee behavior=alternate >UBinus Cute HomePage</marquee></font></h3> </body> 14 Result 15 Ordered List <p>Tiga hal yang harus diperhatikan Siswa <ol type=1> <li> Sayangilah <b>Ibumu</b> melebihi sayangmu dengan do’i mu <li> Hormatilah dosenmu melebihi hormatmu pada<u> Pak Polisi</u> <li> Jangan<i> malas </i>belajar text book dan internet </ol> 16 Unordered List <p>Produk kami terdiri dari :</p> <ul> <li>Training</li> <li>Konsultasi</li> </ul> 17 Result 18 Hyperlink and Images • We can use Hyperlink to let user jump to other location or resources • Hyperlink can used internally (within same page) or externally • Syntax: <a href=”www.widodo.com”> Situs Saya</a> <img src=”widodo.jpg” width=300 height=400></img> 19 Advanced Formatting • • • • Table Frame Cascade Style Sheet (CSS) XSL (XML Style Sheet) 20 Table <table > <tr> <td>no</td> <td>nama</td> </tr> </table> 21 Table <table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" > <tr> <td width="16%" bgcolor="#FFFF00"><b>No</b></td> <td width="19%" bgcolor="#FFFF00"><b>Nama</b></td> <td width="65%" bgcolor="#FFFF00"><b>Kelas</b></td> </tr> <tr> <td width="16%">1</td> <td width="19%">Iwan</td> <td width="65%">Web Programming</td> 22 Result 23 Inputbox and Password Inputbox and password are usefull for inserting data Masukkan nama Anda :<input name=name type=text size=20 maxlength=40><br> dan Password :<input name=passwd type=password size=8 maxlength =8><br> 24 Check and Radio Button Negara mana yang ingin anda kunjungi:<br> <input type="Checkbox" name="cb value="1">Asia<br> <input type="checkbox" name=cb value="2" >Afrika<br> <input type="checkbox" name="cb value="3">North Amerika<br> <input type="Checkbox" name=cb value="4" >Europe<br> Jenis kelamin Anda ?<br> <input type="radio" name="cb value="pria">Laki-Laki<br> <input type="radio" name=cb value="wanita" >Wanita<br> 25 Text Area TextArea is usefull for entering complete data Mohon masukkan alamat lengkap Anda:<br> <textarea name="address" rows=5 cols=50></textarea> 26 Reset and Submit Button Reset Button for clearing message, submit button for submitting data <input type=reset value="Clear fields"> <input type=submit value="Kirim"> 27 Frame <title>UBinus Homepage</title> </head> <frameset rows="64,*"> <frame name="banner" scrolling="no" noresize target="contents" src="banner.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="menu.htm"> <frame name="main" src="utama.htm"> <body> </body> </frameset> 28 References • Internet & WWW How to Program, Deitel & Deitel • “Fundamental Web Design Principles”, http://ausweb.scu.edu.au/aw99/papers/turner/paper.html • “Introduction to Web Programming 4 days”: http://www.wdvl.com/Authoring/Scripting/Tutorial • Introduction to Web Design 3 days: http://www.wdvl.com/Authoring/HTML/Tutorial/index.html • http://www.w3schools.com 29
