WEBPAGE AUTHORING WITH HTML
Editors that can be used for creating webpages are of two
types:
Text editors: text editors such as notepad, word pad, help
you create webpages by writing HTML code. When using
a text editor, you need to save the text file with the .htm
or .html extension. The following is a code written in
notepad:
<html>
<head><title>sample page</title></head>
<body>
<p>programming is fun. </p>
</body>
</html>
GUI Editors: Graphic User Interface editors are user
friendly editors. They provide various tools and
components that help you create HTML documents easily.
Basics
<html> Tag: Is the first tag in an html document. The
opening <html> and closing </html> marks the beginning
and end of a webpage.
<html>
…content of the page…
</html>
<head> Tag: Is contained within the <html> and
</html> tags. It is used to describe the header of an html
document.
<head>
Note: The <head> consists of the following tags:
<title>
<base>
<link>
<meta>
<title> Tag: <title> and </title> encloses the title of a
document that is displayed in the web browser’s title bar.
The syntax is:
<head>
<title>My homepage</title>
</head>
<base> Tag: Specifies the base of URL for all relative
hyperlinks used in the body of an HTML document. This
tag has the HREF attribute which identifies the base URL.
The syntax of <base> tag is: <base href=’URL’>
<meta> Tag: is an empty tag enclosed within the
opening of an <html> tag. It is a short description of the
contents of the webpage. The syntax for using <meta>
tag to provide keywords for search engine is
<meta name=”keywords” content=”keyword list”>
For description for webpage:
<meta name=”description” content “description for the
webpage”>
For author of webpage:
<meta name=”author” content=”Obasiolu Japheth
walker”>
To refresh webpage automatically after no. of seconds:
<met http-equiv=”refresh” content
“number of seconds”; URL of webpage”>
<body> tag: Sets the boundary for an HTML document.
When the webpage is displayed on the browser, users can
see the content encloser within the opening <body> and
closing </body> tags.
Syntax:
<body>
…content…
</body>
<script> tag: Specifies scripting languages used in the
webpage such as VBscripto or Javascript. The <script> tag
is optional
<!—
<script>
//scripting code
</script>
<!—
Formatting An HTML Document
Divided in two namely:
Block level tags
Text level tags
Block Level Tags
Note: Both block level and text level tags are used within the <body> and
</body> tag.
Paragraph tag <p>: Adds a new paragraph in the document e.g.
<body>
<p>This is the first paragraph</p>
<p> This is the second paragraph</p>
</body>
Line break tag <BR>: adds a new line within a paragraph and does not have
a closing tag
<body>
<p>This is the first paragraph</p>
<BR>This is the first line break
<BR>this is the second line break
</p>
<p>This is the second paragraph</p>
</body>
Horizontal rule tag<HR>: Is an empty tag e.g.
<HR width=”30%” size=15 align=right color=red NOSHADE>
Heading tag <h>: are <h1> to <h6> defines six levels of headings. It can be
used to specify font paragraph breaks before and after heading e.g.
<body>
<h1>this is heading 1</h1>
<h2>This is heading 2</h2>…
<h6>This is heading 6</h6>
But if you want to specify headings, this is an example
<h2><font size=40 color=blue><b><u><I>This is level 2
heading</i></u></b></font></h2>
Formatting tag <pre>: is used to present pre-formatted text.
Block quote tag<blockquote>: used to contain text quoted from another
source.
Center tag<center>/</center>: all lines of text between <center>…</center>
are center aligned
Text level tags:
Are used to format the entire text or a section of an html document.
<font> tag: used to change style of text by setting various attributes values.
Syntax: <font face=”typeface”>text</font>
For only font size:
<font size=”fontsize”>text></font>
e.g.
<body>
<p align=left>
Using<font size =”6” face=”monotype corsiwa”>The font tag</font>
</p>
</body>
<b> tag: used to make the text bold face. It is a container tag.
e.g.
<body>
<p align=right>
<b>I am a very tall and handsome boy. </b>
</p>
</body>
<I> tag: used to italicize text. Also a container tag
e.g.
<body>
<p align=right>
<I>I am a very tall and handsome boy. </I>
</p>
</body>
Output is: I am a very tall and handsome boy
<u> tag: used to underline text
e.g.
<body>
<p align=left>
<u> I am a handsome boy. </u>
<sub> and <sup> tags: are used to subscript and superscript texts.
e.g.
<body><p>H<sub>2</sub>is a chemical symbol for hydrogen</p>
<p>2<sup>3</sup> is equal to 8</p>
</body>
The output is: H2 is the chemical symbol for hydrogen
23 is equal to 8.
<strike> tag: is used to make text appear as strike through text. It is a
container tag.
e.g.
<body>
<p>this is a <strike> strikethrough </strike>text</p>
</body>
The output: This is a strikethrough text.
List tags
Ordered or numbered lists: is a list that represents a set of
items in a sequence or an order. The tag <OL> this tag contains list items
<body>
<OL>
<LI>click the web button to open the URL window
<LI>Enter the URL number in the text field of the open window. The web
document you specified is displayed
</OL>
</body>
Unordered or bulleted lists: To represent a set of related items, which do
not need to follow a specific sequence. The tags representing are <UL> and
</UL>. These tags contain within them the <LI> tags to represent individual
list items e.g.
<body>
<UL>
<LI>first list item
<LI>second list item
</UL>
</body>
Definition tag: used when a number of items and definitions are to be
included in the html document. It’s represented by <DL> tag. It comprises
two other tags <DT> and <DD>, where DT is data term an DD is data
definition.
DT is displayed on the left and DD is displayed slightly right. There is a
paragraph ident after the data term e.g.
<body>
<DL>
<DT>term<DD>definition of the first term.
<DT>term<DD>definition of the second term.
</DL>
</body>
<body>
<DL compact>
