1. Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML

2. Web Design-Lecture1-QN-2003 Introduction Qonita MS, S.Kom room 1228 (building A) niet@cs.ui.ac.id Course homepage: http://www.cs.ui.ac.id/kuliah/webdesign/

3. Web Design-Lecture1-QN-2003 Course Outline HTML Introduction Microsoft FrontPage / Netscape Composer Enhancing a Website Project: building a website

4. Web Design-Lecture1-QN-2003 First Lecture Create web pages as simple as possible Use Notepad to create HTML files Use HTML codes

5. 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

6. Web Design-Lecture1-QN-2003 HTML Tags (1) All HTML codes are written using tags Tags: surrounded by angular brackets “ ” Generally: opening & closing tags E.g. some text “/” tells the code to stop tagging Unrecognisable tags are ignored

7. Web Design-Lecture1-QN-2003 HTML Tags: example (1) My first web page My first web page This is as simple as a web page can get.

8. Web Design-Lecture1-QN-2003 HTML Tags: example (2)

9. Web Design-Lecture1-QN-2003 HTML Tags (2) A web browser does not care if you use upper or lower case. E.g. text is no different from text

10. Web Design-Lecture1-QN-2003 Experiment Open Notepad Write HTML codes Save as.htm or.html Double-click file to display in browser

11. Web Design-Lecture1-QN-2003 More Tags (1) Web Page Basic Basic Web Page Design

12. Web Design-Lecture1-QN-2003 More Tags (2) This is an example of a very simple web page. This is an example of a very simple web page. This is an example of a very simple web page. This is an example of a very simple web page. Another line

13. Web Design-Lecture1-QN-2003 More Tags (3)

14. Web Design-Lecture1-QN-2003 Tags to Watch (1)... to show that the code inside it is HTML tag located in the... portion of the code  not visible in browser (after ) is the part that is visible in browser bgcolor & text (inside )  indicating colour of background and text

15. Web Design-Lecture1-QN-2003 Tags to Watch (2),,  heading types (size)  horizontal rule  paragraph (bold/italics depending on your browser)

16. Web Design-Lecture1-QN-2003 Special Characters ISO characters, such as: ü é, 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 non- breaking space character, i.e.

17. 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

18. 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