Some Definitions: Web Pages vs Paper Pages LECTURE 2 (BASIC HTML)

Some Definitions: A machine or a program that provides services such as files, remote Server: connection, e-mail delivery. A machine or a program that...
Author: Alisha Palmer
3 downloads 0 Views 957KB Size
Some Definitions: A machine or a program that provides services such as files, remote Server: connection, e-mail delivery. A machine or a program that reaches and uses the services provided by Client: a server (Web Browsers such as IE). Hypertext: Hypertext means text stored in electronic form with cross-reference links between pages.

LECTURE 2 (BASIC HTML)

HyperText Markup Language. In HTML itself, there is no HTML: programming-just the "marking up" of regular text for emphasis and organization. Web browser: A Web browser is a computer program that interprets HTML commands to collect, arrange, and display the parts of a Web page. Web Page: A page created to be seen by a Web browser. (=HTML page)

Web Pages vs Paper Pages When you are viewing Web pages, they look a lot like paper pages. The difference is that Web pages can be dynamic, interactive and entertaining. : The information they contain can change instanty. Dynamic (Flexibility).

Netscape Navigator 3.0

The HTML File

Interactive : They can execute actions upon users request (hyperlinks, ordering forms, databases etc.) Entertaining : They can include multimedia effects.

On the editing site Web pages are usually a compilation of several files. DOS-LYNX

Netscape Navigator 1.2

Every Web page you create must include the , , , and tags (containers).

Tags: An HTML tag is a coded command used to indicate how part of a Web page should be displayed. Tags start with “” delimeters.

and tags contain the whole document. and tags contain the essential information about the document such as TITLE, keywords, author etc. and tags contain the main body of the document to be displayed.

Most HTML tags have two parts: an opening tag, to indicate where a piece of text begins, a closing tag, to show where the piece of text ends.



Closing tags start with a / (forward slash) just after the < symbol.

My My First First Web Web Page Page

Tags with a corresponding closing tag are called containers, since they contain parts of text.

Hello World! World! Hello

Basic Text Layout

To control where line and paragraph breaks actually appear, you must use HTML tags.

When a Web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words.

can be used as a container or just as a single tag at the end of the paragraph.

Address Address Richard Richard

Smith Smith

14234 Main Main Street Street 14234 Anycity, ST ST 00001 Anycity, 00001

The
tag forces a line break, and the tag creates a paragraph break.

Richard Smith
Smith
Richard 14234 Main Street
14234 Main Street
Anycity, ST ST 00001
00001
Anycity,

Headers Header Level Level One One is is the the largest largest for for headlines headlines or or page page titles titles Header Level Two is a little smaller for major subheads Level Two is a little smaller for major subheads Level Three Three is is again again smaller, smaller, for for minor minor subheads subheads Level This is is regular regular text. text. This

Text Emphasis It is possible to emphasize certain parts of text using emphasis tags. There are two kinds of such tags physical and logical.

Level Four Four is is about about the the same same size size as as regular regular text, text, but but emphasized emphasized Level Level Five: Five: again again emphasized, emphasized, but but smaller smaller than than regular regular text text Level

•Physical tags defines the way emphasis to be used.

Level Six Six is is generally generally the the smallest smallest header header Level

•Logical tags leave this to browsers. PHYSICAL EMPHASIS TAGS

This This is is aa test test of of the the bold bold tag
tag
This is is aa test test of of the the strong strong emphasis emphasis tag
tag
This This This is is aa test test of of the the italics italics tag
tag
This is a test of the emphasis tag
This is a test of the emphasis tag
This This is is aa test test of of the the bold bold and and italics italics tags tags together
together
This is a test of the strong and emphasis tags together together This is a test of the strong and emphasis tags

While While we're we're at at it, it, does does underlined underlined text text appear appear in in this this browser?
browser?
And what what does does teletype teletype text text look look like?
like?
And

LOGICAL EMPHASIS TAGS

Tags

Meaning

,

Bold Text

Tags

Meaning

,

Italic Text

, Strong Emphasis (Bold Text)

,

Underlined text

,

Emphasis (Italic Text)

,

Teletype (Monospaced text)

Other Text Formatting Tags ,

Bibliographical citation (Italic)

,

Block of quoted text (Indented)

,

Term definition (Regular)

,

Street or e-mail address (Italic)

,

Programming lines (Monospaced)

,

Variable (Italic)

,

Preformatted text (spaces, tabs and breaks are kept as they are)

To set the size and color of any text on a Web page, use the tag: