web design-lecture1-qn-2003 web design web design using html
TRANSCRIPT
Web Design-Lecture1-QN-2003
Web Design
Web Design Using HTML
Web Design-Lecture1-QN-2003
Introduction
Qonita MS, S.Komroom 1228 (building A)[email protected]
Course homepage:http://www.cs.ui.ac.id/kuliah/webdesign/
Web Design-Lecture1-QN-2003
Course Outline
HTML IntroductionMicrosoft FrontPage / Netscape ComposerEnhancing a WebsiteProject: building a website
Web Design-Lecture1-QN-2003
First Lecture
Create web pages as simple as possibleUse Notepad to create HTML filesUse HTML codes
Web Design-Lecture1-QN-2003
What is HTML?
HyperText Markup LanguageHow web browser displays its multimedia documentsDocuments contain plain text (ASCII characters) with special tags or codesBrowser interprets tags/codes how to display on the screen
Web Design-Lecture1-QN-2003
HTML Tags (1)
All HTML codes are written using tagsTags: surrounded by angular brackets “<“ and “>”Generally: opening & closing tagsE.g. <tag> some text </tag>“/” tells the code to stop taggingUnrecognisable 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 NotepadWrite HTML codesSave as .htm or .htmlDouble-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> </html>
Web Design-Lecture1-QN-2003
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 browserbgcolor & 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 codesShould 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.
Web Design-Lecture1-QN-2003
Why Learning HTML?
Those who say that it’s not needed: there are many WYSIWYG tools for HTMLWhy you need to learn it?
It’s always useful to understand the basics before understanding the complexity of any ‘language’ or codesHelps 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