Transcript Web Design
Web Design Web Design Using HTML Web Design-Lecture1-QN-2003 Introduction Qonita MS, S.Kom room 1228 (building A) [email protected] Course homepage: http://www.cs.ui.ac.id/kuliah/webdesign/ Web Design-Lecture1-QN-2003 Course Outline HTML Introduction Microsoft FrontPage / Netscape Composer Enhancing a Website Project: building a website Web Design-Lecture1-QN-2003 First Lecture Create web pages as simple as possible Use Notepad to create HTML files Use HTML codes Web Design-Lecture1-QN-2003 What is HTML? HyperText Markup Language How web browser displays its multimedia documents Documents contain plain text (ASCII characters) with special tags or codes Browser interprets tags/codes how to display on the screen Web Design-Lecture1-QN-2003 HTML Tags (1) All HTML codes are written using tags Tags: surrounded by angular brackets “<“ and “>” Generally: opening & closing tags E.g. <tag> some text </tag> “/” tells the code to stop tagging Unrecognisable tags are ignored Web Design-Lecture1-QN-2003 HTML Tags: example (1) <html> <head> <title> My first web page </title> </head> <body> <center> <h1> My first web page </h1> </center> <p> This is as simple as a web page can get. </p> </body> </html> Web Design-Lecture1-QN-2003 HTML Tags: example (2) Web Design-Lecture1-QN-2003 HTML Tags (2) A web browser does not care if you use upper or lower case. E.g. <H3> text </H3> is no different from <h3> text </h3> Web Design-Lecture1-QN-2003 Experiment Open Notepad Write HTML codes Save as .htm or .html Double-click file to display in browser Web Design-Lecture1-QN-2003 More Tags (1) <html> <head> <title> Web Page Basic </title> </head> <body bgcolor ="white" text = "blue"> <center> <!show the different height tags> <h1>Basic Web Page Design</h1> <h3>Basic Web Page Design</h3> <h5>Basic Web Page Design</h5> </center> Web Design-Lecture1-QN-2003 More Tags (2) <!show the type of text tags> <hr> <p> This is an example of a very simple web page. <i> This is an example of a very simple web page. </i> <b> This is an example of a very simple web page. </b> <em> This is an example of a very simple web page. </em> This is an example of a very simple web page. Another line </body> Web Design-Lecture1-QN-2003 </html> More Tags (3) Web Design-Lecture1-QN-2003 Tags to Watch (1) <html> ... </html> to show that the code inside it is HTML <title> tag located in the <head> ... </head> portion of the code not visible in browser <body> (after <head>) is the part that is visible in browser bgcolor & text (inside <body>) indicating colour of background and text Web Design-Lecture1-QN-2003 Tags to Watch (2) <h1>, <h3>, <h5> heading types (size) <center> <hr> horizontal rule <p> paragraph <i> <b> <em> (bold/italics depending on your browser) Web Design-Lecture1-QN-2003 Special Characters ISO characters, such as: ü é, < or > Some already defined to create HTML codes Should write them in different way, e.g. < becomes < (less than) Try putting a lot of space (press space bar), what happening? needs nonbreaking space character, i.e. Web Design-Lecture1-QN-2003 Why Learning HTML? Those who say that it’s not needed: there are many WYSIWYG tools for HTML Why you need to learn it? It’s always useful to understand the basics before understanding the complexity of any ‘language’ or codes Helps you to get used to ‘the codes’ when you learn web programming Web Design-Lecture1-QN-2003 Read more... List of HTML tags: http://www.cs.ui.ac.id/kuliah/webdesign/htmltags.html List of HTML special characters: http://www.cs.ui.ac.id/kuliah/webdesign/special-char.html Web Design-Lecture1-QN-2003