Scribd
Upload
4 views8 pages

Webpage Authoring With HTML

The document provides an overview of webpage authoring using HTML, detailing two types of editors: text editors and GUI editors. It explains the structure of an HTML document, including essential tags such as <html>, <head>, <body>, and various formatting tags. Additionally, it covers block level and text level tags for formatting content, as well as list tags for organizing information.

Uploaded by

japethobasiolu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views8 pages

Webpage Authoring With HTML

The document provides an overview of webpage authoring using HTML, detailing two types of editors: text editors and GUI editors. It explains the structure of an HTML document, including essential tags such as <html>, <head>, <body>, and various formatting tags. Additionally, it covers block level and text level tags for formatting content, as well as list tags for organizing information.

Uploaded by

japethobasiolu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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>

You might also like