Basic HTML Codes & Tags: Hypertext Markup Language

BASIC HTML
CODES & TAGS

Hypertext Markup Language
Platform: - Independent
This means it can be interpreted on any
computer regardless of the hardware or
operating system.
Home page
Is the starting point of the web site.
It contains links to the rest of the pages or other
web sites.
Web sites fall into one of the following

categories:
1.
2.
3.
4.
5.
6.
Personal
Corporate
E-Commerce
Informational
Discussion
Portal
Personal Web Site

Contains information about themselves,
hobbies, pets, family members, interest,

education, work experience, etc.
Corporate Presence Web Site

Displays information about the company, their
products and services
Informational Web Site

Created by individuals, companies,
government & organizations for the purpose of

displaying information about a particular topic.
(TSN, Weather, Fire Department).
E-Commerce Web site

Created by businesses for the purpose of selling
their products or services to consumers online.

(ie: Amazon.com, NLClassisifies.ca)
Discussion Web Site

Created by individuals, businesses, or
organizations for the purpose of creating a forum

for people to discuss a wide range of topics
Portal Web Site

Created by businesses for the purpose of
creating a starting point for people to enter the

Web. (ie MSN)
PARTS OF A WEBPAGE
A Banner Ad
Common to find Banner Ads on Web sites
for a small fee
URL (Uniform Resource Locator)

Is the address that is interpreted by a web
browser to identify the location of a page on

the Web.
PARTS OF A WEBPAGE
CONT
http://
This is the web protocol used to handle
requests and the transmission of pages

between a web server and a web browser
Domain Name:
Use to identify a particular web page and is
made up of a sequence of parts, or

subnames, separated by a period.
PARTS OF A WEBPAGE
CONT
Labels:
The subnames of a web site
Suffix:
of the domain name is called the top-level
domain and identifies the type of web site.
.GOV
In this case
government agency.
indicated
PARTS OF A WEBPAGE
CONT
The Web Browser Contains
Title Bar
Menu Bar
Address Bar
Status Bar
Scroll Bar
PARTS OF A WEBPAGE
CONT
Surfing
Means to browse the Internets web pages
The favorites list

Used to maintain a list of web pages
Search engines
is a program that searches a database of Web
Pages for words that you supply and then lists

hyperlinks to a page that contain those words.
CREATING AN HTML PAGE

HTML: - Hypertext Markup Language
This is a type of computer language

used to create Web Pages.
It is commonly known as HTML Code.
HTML
HTML is an abbreviation of Hyper Text Markup

Language
Hyper Text implies that the links in one

document connect it to another document
Markup implies that texts are edited in some

way to better their appearance
Language is a set of instructions for a computer
TWO METHODS IN
WRITING HTML CODE
1. HTML code written in plain text editor,

such as Notepad
2. HTML editor, which is a program that will

write the code for you. FrontPage, Microsoft
Expression
HTML TAGS
HTML codes are also referred to as

HTML tags.
The first tag that the beginner needs to

become familiar with is the <HTML>
tag.
This tag sets the beginning of the

hypertext document.
The </HTML> tag sets the end of the

hypertext document, this is the last tag
of the document.
Within these container tags there are

two positions of a web page: A header
and a body.
These tags are enclosed by the lesser

than < and greater than > brackets.
They are usually paired to indicate the

start and end of an instruction.
HTML TAGS
The opening bracket is followed by an

element
This element is a browser command
It ends with a closing bracket.
The tags can be written in capital or lower

case letters.
HTML TAGS
Start of the instruction has the tag and

element <font
size=2>.
An element may be followed by attributes
Attributes are words that describe the

properties of the element
It gives the instruction to the browser
Example of an attribute
<font size=2>
Attributes are only contained in the opening
of the HTML tags to the right of the element
They are separated by a space and
followed by equal = sign.
The value follows the equal sign
It is enclosed in quotes
<font size=2>.
End of the instruction the tag with a

forward slash (</>) and the element
</body>
IE: <body> Welcome to my Web Page

</body>
IMPORTANT NOTE:
Remember that a tag
should not have
any spaces between the opening bracket and

the element.
IE: <body> this is correct

< body > this is not correct
HTML
HTML is interpreted and viewed by a

WEB BROWSER such as Internet
Explorer or Google Chrome
HTML documents are plain text files and

can be created using any text editor one
of which is NOTEPAD
HTML TAGS
The first tag that the beginner needs to become

familiar with is the <HTML> tag.
This tag sets the beginning of the hypertext

document.
The </HTML> tag sets the end of the hypertext

document, this is the last tag of the document.
Within these container tags there are two

portions of a web page: a header and a body.
THE HEADER
The header contains information about the

page that is not displayed in the browser.
This information would include TITLE,

META tags for proper Search Engine
indexing, STYLE tags,
This will determine the page layout and

JavaScript coding for special effects.
THE TITLE
<TITLE> - The TITLE of your web page.
This will be visible in the title bar of the

viewers browser.
The next set of tags is the

<HEAD></HEAD> which should contain
the <TITLE></TITLE> tags.
Write the title of your masterpiece within the

title tags; the code for the title of this page
for example, looks like this
<TITLE>Using HTML to write a Web

Page</TITLE>
When you upload your next web page notice

how the title is displayed in your browser
THE BODY
The body is a container tag which contains information

about how the page will display in your browser
This is where you will begin writing your document and

placing your HTML codes.
<body
bgcolor=#000000text=#fffffflink=#0000ffvlink=#ff00
ff>
The code tells the browser to have a

black (#000000)
background and white(#ffffff)
text with blue(#0000ff)
links that turn purple (#ff00ff) after they have
been visited.
SOME TAGS TO REMEMBER

<HTML> begins your HTML document
<HEAD> contains information about the page
<TITLE> The title of your page
</TITLE> closes the HTML <TITLE> tag
</HEAD> closes the HTML <HEAD> tag
<BODY> this is where you begin placing your
</BODY> closes the HTML <BODY> tag
</HTML> closes the <HTML> tag
HTML codes.
BASIC HTML CODING LOOKS

LIKE
<HTML>
<HEAD> contains information about the page

<TITLE> The title of your page</TITLE>
<BODY>
Content
</BODY>
</HTML>
</HEAD>
HOW TO DECIDE WHAT

HTML CODES TO USE
If the HTML code do no enhance your

web page, it is probably best to leave it
out.
It is important to remember that the

more special effects you add to your
web page, the longer your web page will
take to load.
You should also ensure that the effect

you are trying to achieve does not
irritate your visitors.
Using excessive pop up windows,

frames and placing scrolling test within
the status bar can irritate your visitor,
causing them to leave your web page
and never return.
ADDITIONAL HTML TAGS
HEADINGS
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</H3>
You can use up to <h6></h6>
PARAGRAPHS
At the beginning of each paragraph you

should use the <p> tag.
It may be used with a </p> but not

necessarily.
Thus it may be a container tag but 1

used it as a separator tag.
CENTERING TEXT
The <center> tag enables you to center

text. You put the <center> tag before
the text you want entered, and the
</center> tag after youre done.
HEADING
IE: <center><h1>Welcome to my
second Web Page</h1></center>
HORIZONTAL LINE
This will insert 3 horizontal lines of

different thickness and length
The <hr>tag stand for horizontal rule

<hr size=4 width=70%>
LINKS
<a href=URL>text of link</a>
URL Universal Resource Locator,

contains the protocol http, ftp, etc for
locating the particular document the text
of the link (visible to the user) goes after
the > and before the </a>
IMAGES
The web allows you to serve interesting, colourful and

graphically intense documents across platforms. As
always discretion is the better part of valour. Most
people find images intensive documents to be
annoying.
To use an image in your Web Page, it must be in the

JPG, GIF or Bmp format. There are a number of tools
for doing that.
To make things easy on you, place your web images in

the same directory as your document.
IMAGES
To insert an image use the following code.

<IMG SRC=imagename.gif>
There are arguments to the IMG command that you

may want to use occasionally.
The width = x argument where x is the number of

pixels you want the image to display across the
screen.
The height =y argument where y is the number of

pixels you want the image to display up and down the
screen.
IMAGES
You can align an image with the

surrounding text using the align=
arguments. The options are top,
middle, or bottom, which indicate where
the bottom of the image should be in
relation to the base line of the text.
All of these arguments are placed between

<IMG and SRC=>
IMAGE
To add an image you can write the following code
<center><IMG SRC=pic2.bmp></center>
If you want to have a certain size of the image add the
following to the above code.
WIDTH=100 HEIGHT=80
Therefore the image line would look like this.
<IMG SRC =pic2.bmpWIDTH=100HEIGHT=80>
THE BREAK TAG

<BR>
A break tag inserts a line break in a web
page, which has the same effect as
pressing the Enter Key in a word
processor.
(NOTE: this tag do not need to be paired,
or turned off)
LISTS
List are used to place a list on your page

use the <ul></ul> tags for example, if
you want to add a list of your hobbies:
<UL>
<L1>Sports</L1>
<L1>Photography</L1>
<L1>Limbo Dancing</L1>
</UL>
NESTED LIST
<UL>
<L1>Sports</L1>
<UL>
<L1>Basketball</L1>
<L1>Soccer</L1>
<L1>Volleyball</L1>
</UL>
<L1>Limbo Dancing</L1>
<L1>Photography</L1>
</UL>
SAMPLE WEB PAGE
Open up Notepad
Type in the above codes
Save it in your webmaster folder
Remember to save the extension as
yournameWebPage2.html
Remember no spaces in the name of your
html.
NOTEPAD AND
ACCESSING IT
This is a text editor that comes with

Windows.
How to access Notepad

Start by selecting Programs from the start
menu
then selecting Accessories
Scroll down and find the program Notebook
Create a shortcut to your desktop
WORKING IN NOTEPAD
Establishing background color, text color,

link color, and vlink color.
Background (red), text(white), link(blue),

and the vlink(purple)
<body
bgcolor=#f0000ftext=#fffffflink=#0000
ffvlink=ff00ff>
TEST YOUR PAGE
Open up INTERNET EXPLORER
Select FILE from the menu bar

(if FILE is not there, right click next to the
menu bar, select the MENU BAR)
Select browse (you have to select the right

directory where you saved your html file)
Select the directory with your

UserName on the U drive
Open the directory and then the file
Click the OK button
NOTE:
Remember every time you make
changes and you want to view your
Web Page you have to resave your
work in Notepad with the extension
.html

Basic HTML Codes & Tags: Hypertext Markup Language

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Basic HTML Codes & Tags: Hypertext Markup Language

Încărcat de

Drepturi de autor:

Formate disponibile

BASIC HTML

CODES & TAGS

Web sites fall into one of the following

Personal Web Site

hobbies, pets, family members, interest,

Corporate Presence Web Site

products and services

Informational Web Site

government & organizations for the purpose of

E-Commerce Web site

their products or services to consumers online.

Discussion Web Site

organizations for the purpose of creating a forum

Portal Web Site

creating a starting point for people to enter the

for a small fee

URL (Uniform Resource Locator)

browser to identify the location of a page on

requests and the transmission of pages

made up of a sequence of parts, or

domain and identifies the type of web site.

The Web Browser Contains

The favorites list

Pages for words that you supply and then lists

CREATING AN HTML PAGE

This is a type of computer language

It is commonly known as HTML Code.

HTML is an abbreviation of Hyper Text Markup

Hyper Text implies that the links in one

Markup implies that texts are edited in some

Language is a set of instructions for a computer

1. HTML code written in plain text editor,

2. HTML editor, which is a program that will

HTML codes are also referred to as

The first tag that the beginner needs to

This tag sets the beginning of the

The </HTML> tag sets the end of the

Within these container tags there are

These tags are enclosed by the lesser

They are usually paired to indicate the

The opening bracket is followed by an

This element is a browser command

It ends with a closing bracket.

The tags can be written in capital or lower

Start of the instruction has the tag and

An element may be followed by attributes

Attributes are words that describe the

It gives the instruction to the browser

The value follows the equal sign

End of the instruction the tag with a

IE: <body> Welcome to my Web Page

Remember that a tag

should not have

any spaces between the opening bracket and

IE: <body> this is correct

HTML is interpreted and viewed by a

HTML documents are plain text files and

The first tag that the beginner needs to become

This tag sets the beginning of the hypertext

The </HTML> tag sets the end of the hypertext

Within these container tags there are two

The header contains information about the