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

Web Design-Lecture1-QN-2003

Web Design

Web Design Using HTML


Introduction

Qonita MS, S.Komroom 1228 (building A)[email protected]

Course homepage:http://www.cs.ui.ac.id/kuliah/webdesign/


Course Outline

HTML IntroductionMicrosoft FrontPage / Netscape ComposerEnhancing a WebsiteProject: building a website


First Lecture

Create web pages as simple as possibleUse Notepad to create HTML filesUse HTML codes


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


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


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>


HTML Tags: example (2)


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>


Experiment

Open NotepadWrite HTML codesSave as .htm or .htmlDouble-click file to display in browser


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>


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>


More Tags (3)


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


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)


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.


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


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