Week09 HTML

CC111
INTRODUCTION TO
COMPUTERS
Introduction To HTML
Instructor
Course
Contents
2
Getting Started..
What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
What the following term mean:
Web server: a system on the internet containg one or

more web site
Web site: a collection of one or more web pages
Web pages: single disk file with a single file name
Home pages: first page in website
Think about the followings before working

your Web pages.
Think about the sort of information(content) you want

to put on the Web.
Set the goals for the Web site.
Organize your content into main topics.
Come up with a general structure for pages and topics.
World Wide Web

4
WWW is a service on the Internet
WWW links information so that the

user can easily go from one piece of
information to another related piece.
WWW is based on HTML
Web Browser
is a computer program which is used to view a
Web page.
Browser implements the following functions:
Search and access to a Web-server;
Loading, formatting, and displaying HTMLdocument;
Hyperlink detection and moving from one
document to another;
Standard support tools.
Hypertext Mark-up Language

(HTML)
HTML is the standard mark-up language used
to create and organize documents on the
World Wide Web;
HTML lets users to format text, add graphics,
sound, video, and save it all in a TextOnly or
ASCII format that any computer can read.
Basic HTML Document Format

7
<HTML>
<HEAD>
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
See what it
looks like:
How to Create and View an HTML document?

8
1.Use an text editor such as Editpad to write the

document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open Netscape (or any browser) Off-Line
4.Switch to Netscape
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any other
Web page in Netscape.
7.You may now switch back and forth between the

Source and the HTML Document
switch to Notepad with the Document Source
make changes
save the document again
switch back to Netscape
click on RELOAD and view the new HTML
Document
switch to Notepad with the Document Source......
HTML Features
10
Hypertext,
Universality means that any computer can read a
that allows to create a link in a Web

page that leads to any other pages on the Web.
Hence information on the Web can be accessed from
many different locations
Web page regardless of platforms or operating
systems
HTML Files
11
Must be saved as text files with extension html or

htm. The extension tells the browser that file is to
be interpreted according to HTML standards
Have relatively small sizes
HTML Building Blocks

12
HTML tags are command words written between

symbols < >, that indicate how browser should
display the text.
Tags may have opening and closing version
Text is placed in a container (or HTML element),
which starts with opening tag and ends with closing.
<B> Bold text </B>
HTML Rules
13
Case insensitive
Spacing:
Browsers ignore extra spaces
Block-level tags include automatic line brakes

Examples:
P, H1, UL, TABLE
Tag Attributes
14
Attributes offer a variety of options

Attributes are entered between command word and
final symbol >
A single tag may have a few attributes
Attributes are placed one after the other in any
order
<IMG SRC=Image.bmp HSPACE=5>
Attribute Values
15
Attributes can accept the values of particular types

Values of attributes should be enclosed in straight
quotation marks
may be omitted if the value contains only letters,
digits, hyphen (-), and period (.)
Nesting Tags
16
Hierarchy tags that affect entire paragraph may

contain tags affecting individual words or letters
Order the current closing tag should correspond to the

last unclosed opening tag
Correct:
<H1> Information <I>System</I></H1>
Incorrect:
<H1> Information <I>System</H1></I>
Tags
17
in head
<HEAD>...</HEAD>-- contains information about the

document
<TITLE>...</TITLE>-- puts text on the browser's title
bar.
HTML Document
18
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
The HEAD Section

19
<HEAD>
- beginning of the head

section
<TITLE>
- page description
</TITLE>
- end of title

</HEAD>
- end of the head section
The BODY Section

20
<BODY>
{Text displayed by browser}

</BODY>
Tags
in Body
Let's talk Text
21
Heading:
<H1> </H1>
Center:<Center> </Center>
Line Break <P> ,<Br>
Phrase Markups: <I></I> ,<B></B>
Create a List
Unordered list : <UL><li>
Ordered list: <OL><li>
Nested
Commonly Used HTML Tags

22
<H1> </H1>
Heading.
<H2> </H2>
Heading.
<H3> </H3>
Heading.
<BLOCKQUOTE> </ BLOCKQUOTE >
Indents block of text one
tab.
Commonly Used HTML Tags

(continued)
23
<P> </P> : Paragraph.

<B> </B> : Bold
<I> </I>
: Italic
<U> </U> : Underline
<EM> </EM> : Emphasize (logical exact
effect depends on browser)
<BR/>
: Line break
<HR/>
: Horizontal Rule (line)
24
Changing the Font

<FONT FACE=FONTNAME SIZE=n>
{ Text } </FONT>
FONTNAME specifies the font
SIZE defines the size
N=3 corresponds to default value
Value of n
Size in pt.
10
12
14
18
24
36
Ordered List
25
<OL TYPE=x START=n>

Beginning
of an Ordered List
<LI> </LI> A list element
<LI> </LI> Another list element
</OL>
End of the Ordered List
TYPE, START are optional
X=A, a, I, i, 1 ( X=1 is default value)
n initial value for list items
26
Unordered List
<UL TYPE=shape > Beginning an
Unordered List
<LI> </LI> A list element
<LI> </LI> Another list element
</UL>
End of the Unordered List
TYPE is optional, shape represents the kind of
bullet, like circle, square
Uniform Resource Locator (URL)

27
http://www.atkinson.yorku.ca/~marina/itec.htm
Scheme
Server name
Path
File name
URL can be
Absolute contains all parts of URL;
Relative presents path and file name relatively
current file.
Scheme
28
http Hypertext Transfer Protocol to access Webpages

ftp File Transfer Protocol to download the file
from the net
mailto to send electronic mail
File to access file on a local hard disk (File scheme
uses ///).
and others
Absolute URL (examples)

29
http://www.site.com/dir/hpage.html
ftp://ftp.site.com/common/prog.exe
mailto:marina@yorku.ca
file:///Cdisk/ITEC1010/COL.html
Relative URL (examples)

30
A file from the same folder as current file:

file.htm
A file from a subfolder of current folder:
images/picture.gif
A file from another folder at the same hierarchical
level:
../info/data.htm
External Link
31
is a reference to another page

<A HREF=URL > Label text </A>
Label text will be underlined or highlighted, click upon
it will bring visitors to the page with given URL
Internal link
32
Is a reference to a particular part of the same

page.
Click upon the internal link will bring a visitor to the
particular part of the same page.
To create an internal link:
Create
an anchor
Add a hyperlink to the anchor
Creating Anchors
33
Place the cursor in the desirable part of a page,

where the link should bring visitors
Create an anchor
<A NAME=anchor name>Label text </A>

Label text is a text or image that should be
referenced.
Link to a specific anchor

34
Within a document
<A HREF=#anchor name> Label text </A>
To a separate document
<A HREF=URL#anchor name>Label text </A>
Link to E-mail address

35
<A HREF=mailto:name@website.ext>
Say HELLO!!!</A>
Click on hypertext Say HELLO!!! will invoke an
application such as MS Outlook to send E-mail to
the address
name@website.ext.
Images
36
<IMG SRC=image_URL>
SRC source of the image (file address)
Another attributes:
BORDER=n, n-thickness of the border in pixels
ALT alternative text
WIDTH width of an image in pixels
HEIGHT height of an image in pixels
ALIGN position on a page
<IMG SRC=images/pic1.bmp WIDTH=30
HEIGHT=30 ALT=Digimon
ALIGN=left >

37
How to make colors changes?

Hexadecimal
number :
Color names : <Font color=white>
Changing the Background color
<BODY BGCOLOR=#19378a>
Changing
Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66

VLINK=#66ffff>
Spot
color
<FONT COLOR=#66ffcc>WENT'99</FONT>
Image
Background
<BODY BACKGROUND=bgimg.gif >

Week09 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Week09 HTML

Uploaded by

Copyright:

Available Formats

CC111

How to create and View an HTML document?

Basic HTML Document Format

The HTML Basic tags

What the following term mean:

Web server: a system on the internet containg one or

Web site: a collection of one or more web pages

Web pages: single disk file with a single file name

Home pages: first page in website

Think about the followings before working

Think about the sort of information(content) you want

Set the goals for the Web site.

Organize your content into main topics.

Come up with a general structure for pages and topics.

World Wide Web

WWW is a service on the Internet

WWW links information so that the

Hypertext Mark-up Language

Basic HTML Document Format

How to Create and View an HTML document?

1.Use an text editor such as Editpad to write the

7.You may now switch back and forth between the

Universality means that any computer can read a

that allows to create a link in a Web

Must be saved as text files with extension html or

HTML Building Blocks

HTML tags are command words written between

Block-level tags include automatic line brakes

P, H1, UL, TABLE

Attributes offer a variety of options

Attributes can accept the values of particular types

Hierarchy tags that affect entire paragraph may

Order the current closing tag should correspond to the

<HEAD>...</HEAD>-- contains information about the

The HEAD Section

- beginning of the head

The BODY Section

{Text displayed by browser}

Let's talk Text

Commonly Used HTML Tags

Commonly Used HTML Tags

<P> </P> : Paragraph.

Changing the Font

<OL TYPE=x START=n>

Uniform Resource Locator (URL)

http Hypertext Transfer Protocol to access Webpages

Absolute URL (examples)

Relative URL (examples)

A file from the same folder as current file:

is a reference to another page

Is a reference to a particular part of the same

Place the cursor in the desirable part of a page,

<A NAME=anchor name>Label text </A>

Link to a specific anchor

<A HREF=#anchor name> Label text </A>

<A HREF=URL#anchor name>Label text </A>

Link to E-mail address

How to make colors changes?

<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66

<BODY BACKGROUND=bgimg.gif >

You might also like