HTML TAGS

Download Report

Transcript HTML 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)

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.

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.

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.
In this case
agency.
indicated government

The Web Browser Contains
•Title Bar
•Menu Bar
•Address Bar
•Status Bar
•Scroll Bar

Surfing
 Means to browse the Internet’s 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.
HTML: - Hypertext Markup Language

This is a type of computer language
used to create Web Pages.

It is commonly known as HTML Code.

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

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 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.

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.

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>
:

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 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

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 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.

<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 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=“#000000”text=“#ffffff”link=“#0000ff”vli
nk=“#ff00ff”>

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.
<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 HTML codes.
</BODY> closes the HTML <BODY> tag
</HTML> closes the <HTML> tag
<HTML>
<HEAD> contains information about the page
<TITLE> The title of your page</TITLE>
</HEAD>
<BODY>
Content
</BODY>
</HTML>

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.
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>


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.

The <center> tag enables you to center
text. You put the <center> tag before
the text you want entered, and the
</center> tag after you’re done.
HEADING
 IE: <center><h1>Welcome to my
second Web Page</h1></center>


This will insert 3 horizontal lines of
different thickness and length

The <hr>tag stand for horizontal rule
<hr size=4 width=70%>
<hr size=3 width=40%>
<hr size=2 width=10%>

<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>

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.

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.

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=…>
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.bmp”WIDTH=“100”HEIGHT=“80”>
<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)

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>
<UL>
<L1>Sports</L1>
<UL>
<L1>Basketball</L1>
<L1>Soccer</L1>
<L1>Volleyball</L1>
</UL>
<L1>Limbo Dancing</L1>
<L1>Photography</L1>
</UL>
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.

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

Establishing background color, text
color, link color, and vlink color.

Background (red), text(white), link(blue),
and the vlink(purple)

<body
bgcolor=“#f0000f”text=“#ffffff”link=“#000
0ff”vlink=“ff00ff”>

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
 Click
the directory and then the file
the OK button
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