Hypertext Markup Language. Platform: - Independent This means it can be interpreted on any computer regardless of the hardware or operating system.

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 pageIs 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. Personal

2. Corporate

3. E-Commerce

4. Informational

5. Discussion

6. Portal

Personal Web SiteContains information about themselves,

hobbies, pets, family members, interest, education, work experience, etc.

Corporate Presence Web SiteDisplays information about the company, their

products and services

Informational Web SiteCreated by individuals, companies,

government & organizations for the purpose of displaying information about a particular topic.

(TSN, Weather, Fire Department).

E-Commerce Web siteCreated by businesses for the purpose of selling

their products or services to consumers online. (ie: Amazon.com, NLClassisifies.ca)

Discussion Web SiteCreated by individuals, businesses, or

organizations for the purpose of creating a forum for people to discuss a wide range of topics

Portal Web SiteCreated by businesses for the purpose of

creating a starting point for people to enter the Web. (ie MSN)

PARTS OF A WEBPAGE

A Banner AdCommon 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.

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.

In this case .GOV indicated government agency.


The Web Browser Contains

•Title Bar•Menu Bar•Address Bar•Status Bar•Scroll Bar


SurfingMeans to browse the Internet’s web pages

The favorites listUsed 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.

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

HTML TAGS

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=“#000000”text=“#ffffff”link=“#0000ff”vlink=“#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.

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 HTML codes.

</BODY> closes the HTML <BODY> tag

</HTML> closes the <HTML> tag

BASIC HTML CODING LOOKS LIKE…

<HTML>

<HEAD> contains information about the page

<TITLE> The title of your page</TITLE>

</HEAD>

<BODY>

Content

</BODY>

</HTML>

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.

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>

ADDITIONAL HTML TAGS

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 you’re 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%>

<hr size=3 width=40%>

<hr size=2 width=10%>

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.

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=…>

IMAGES

IMAGETo 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”>

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 – AccessoriesScroll down and find the program NotebookCreate 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=“#f0000f”text=“#ffffff”link=“#0000ff”vlink=“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

Hypertext Markup Language. Platform: - Independent This means it can be interpreted on any computer regardless of the hardware or operating system.

Documents