web design-lecture1-qn-2003 web design web design using html
TRANSCRIPT
![Page 1: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/1.jpg)
Web Design-Lecture1-QN-2003
Web Design
Web Design Using HTML
![Page 2: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/2.jpg)
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/
![Page 3: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/3.jpg)
Web Design-Lecture1-QN-2003
Course Outline
HTML IntroductionMicrosoft FrontPage / Netscape ComposerEnhancing a WebsiteProject: building a website
![Page 4: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/4.jpg)
Web Design-Lecture1-QN-2003
First Lecture
Create web pages as simple as possibleUse Notepad to create HTML filesUse HTML codes
![Page 5: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/5.jpg)
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
![Page 6: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/6.jpg)
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
![Page 7: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/7.jpg)
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>
![Page 8: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/8.jpg)
Web Design-Lecture1-QN-2003
HTML Tags: example (2)
![Page 9: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/9.jpg)
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>
![Page 10: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/10.jpg)
Web Design-Lecture1-QN-2003
Experiment
Open NotepadWrite HTML codesSave as .htm or .htmlDouble-click file to display in browser
![Page 11: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/11.jpg)
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>
![Page 12: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/12.jpg)
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>
![Page 13: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/13.jpg)
Web Design-Lecture1-QN-2003
More Tags (3)
![Page 14: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/14.jpg)
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
![Page 15: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/15.jpg)
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)
![Page 16: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/16.jpg)
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.
![Page 17: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/17.jpg)
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
![Page 18: Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML](https://reader035.vdocument.in/reader035/viewer/2022062314/56649ea95503460f94baccd9/html5/thumbnails/18.jpg)
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