HTML

Download Report

Transcript HTML 

Hypertext Markup Language
Platform: - Independent
 This means it can be interpreted on any
computer regardless of the hardware or
operating system.
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

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>
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.
SAMPLE WEB PAGE

Your 2nd web page should include:
 A centered heading
○ Use <head> and <center> tags
 A paragraph of text in the body
○ Use <body> and <p> tags
 At least 2 horizontal lines of different size
○ See previous slides
 At least 1 hyperlink to another site
○ Use <a href> tag
PRACTICE HTML
Go to
http://www.w3schools.com/html/default.a
sp
 Try some of the HTML Tutorials given
(save for future reference)
 These will be helpful when you start
your website!!


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