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
0
advertisement
Download
advertisement
Add this document to collection(s)
You can add this document to your study collection(s)
Sign in Available only to authorized usersAdd this document to saved
You can add this document to your saved list
Sign in Available only to authorized users