LESSON 2

WRITING OUT THE WEBPAGE

• Format Tags
• More Text Tags
• Tags for Lists
• Preformatted Text and Horizontal Rule
• HTML Links
 Format Tags
• Heading
When you make webpages, you’ll need to use headings in order to catch the attention of the Web users
browsing your site. Headings are formatted big and bold because they need to “stand out” from the rest
of the page’s contents. They help the users figure out the different topics covered by your site.

Heading elements have opening and closing tags to enclose the topic or section title to be used. There
are six levels of headings and all except the first level (i.e., <h1>) can be employed over and over
throughout the HTML document. The first level heading should be your main or umbrella topic, and the
other levels only your subtopics, so that the Web users will not be confused.

The <h4> heading usually displays in the default font size (which is 12pt) and in bold.
 Format Tags
• Paragraph
Headings may be used to introduce paragraphs
Use <p> and </p>
What is HTML?

HyperText Markup Language is popularly known as

HTML. It is the language that the web browser
understands. Every web developer should learn this
language and it is the basic language to start with.

Every web page you see on the internet is written in

the HTML language. Even the page you are reading now
uses HTML.

HTML is the common language that is understood by all

web browsers today.
 Format Tags
• Space
&nbsp; can be used to add more spaces between
each word. It can also be used as a special character
set that the browser translates as non-breaking space.

Example blink&nbsp;182
 Example blink&nbsp;182

Spacing in HTML is overlooked by browsers. For example, browsers interpret an entry

like with two spaces between each letter as only with only one space between each
letter, because multiple spaces are still considered as one.
You can, however tell the browser to register spaces by typing “&nbsp;” for each space
that you want.

You can also use the “&nbsp;” command to connect two words that should always be
seen together in the same line, rather than having those two words broken up by a line
break if it reaches the limit of the paragraph length allowed in the browser window
display.

To make sure that “blink” and “182” are not split in the second sentence due to space
constraints of the browser window, you need to type out “blink&nbsp;182” instead of
simply typing “blink 182”.
 Format Tags
• Line Break
Use <br />

To introduce line breaks between texts,

insert the break empty tag <br />.
Remember that there is always a line break
between paragraphs so you do not have to put
<br />, unless you want another ENTER key effect.
 More Text Tags
You can also use tags for other text effects.

<sup> - superscript
<sub> - - subscript
FILO applies to tags as well. Any combination of tags can be used, as long as
you close the innermost tag before closing its enclosing tag.
 Tags for Lists
You can also display groups of texts as lists in HTML.
Here are a few tags for lists.

• unordered lists are displayed with solid round bullets. The bullet type can be
changed by using the type attribute.
• ordered lists use Arabic numerals with a value “1” for the first list item. ,”2” for the
second item, and so on. As with unordered lists, the appearance of these numerals
can be changed by changing the type attributes. You can also change the starting
point of an ordered list by adding the start attribute in the initial <ol> tag.
• each item in a list is enclosed in <li> </li> tags.
• Unordered or Bulleted List

<ul>Voltage
<li>100V</li>
<li>110V</li>
<li>115V</li>
<li>120V</li>
<li>220V</li>
<li>230V</li>
<li>240V</li>
</ul>
• Ordered or Numbered List

<ol>Pet hates:
<li>waking up early</li>
<li>drinking hot tea</li>
<li>cleaning my room</li>
<li>the day of doom</li>
</ol>
• Definition List

This kind of list is enclosed in <dl> </dl> tags. The term to be defined is within <dt>
</dt> tags, while the term’s definition is noted inside <dd> </dd> tags
Definition lists are not lists of items.
 Nested List
Nested Lists

You can nest lists within lists to create a hierarchy of

information, putting unordered or ordered lists inside the first
list’s item (<li> </li>) tags.
 Preformatted Text
The preformatted text element tells the
browser to display the text in fixed‑width and
makes it appear exactly as it was typed in
Notepad.

Tags: <pre> </pre>

Example , monospace or typewriter typeface
Preformatted Text
 Horizontal Rule
• Horizontal Rule creates a horizontal line in an HTML page.
It is normally used to separate contents.

• Tag: <hr />

<p>text above the horizontal line</p>
<hr />
<p>text below the horizontal line</p>

By default, horizontal rules fully expand to the width of a

browser window, appear shaded, and are a few pixels high.

You may change the style of horizontal rule by changing its

attribute
 HTML Links
• Links or hyperlinks are pointers to the pages they
reference.

• Anchor Tags <a> </a>

• The anchor tag must include a hypertext

reference or href attribute, which is a URL
enclosed in quotes
Links or hyperlinks are some of the most essential parts of the
Web, since a large part of the Internet’s success is due to its ability
to link one webpage to other webpages.

The anchor tag has no meaning on its own.

In HTML, there are two valid types of links, external and internal,
depending on the page your Web browser is trying to access.
 HTML Links
• External Link
An external link is a link to a file or to a webpage
that does not belong to the webpage’s own site.

<a href=“http://www.gov.ph”>Republic of the Philippines</a>

In the browser, the absolute URL or the address itself (in this example,
http://www.gov.ph) will not be displayed; instead, the anchor text
(Republic of the Philippines) will be shown. Clicking on the anchor
text link will transfer you to the URL itself, which in this case is the
official government website of the Republic of the Philippines.
 HTML Links
• Internal Link
An internal link is a link to a file or a webpage
within the webpage’s own site, or to any part of
the webpage itself.
<a href=“project.html”>
this links to my project
</a>
Ex. 1
Both the webpage you are editing and the project.html file need to be located in
the same directory or folder, so when someone clicks on the “this links to my
project” hyperlink, the project. html file will be opened.
 HTML Links
• Internal Link
An internal link is a link to a file or a webpage
within the webpage’s own site, or to any part of
the webpage itself.
<a href=“pony.gif”>In another window my pony is. See it you must.</a>
Ex. 2

Links can be used to load not only .html files but also any file
type you want, such as image files.
When the user clicks on that link, it will then open the pony.gif
file properly, unless the file is not located in the same directory
as the webpage file itself.
 HTML Links
• Internal Link
An internal link is a link to a file or a webpage
within the webpage’s own site, or to any part of
the webpage itself.
<a href=“Images/pony.gif”>
In another window my pony is. See it you must.
</a>
Ex. 3
if pony.gif was placed in a sub-folder called Images, the HTML would be modified.
You may want to organize your folders so that all image files are placed in the same
directory and all .html files are kept in another.
 HTML Links
• Link Target: New Window
To make a link, open a page or a file in
a new window, target=“_new” must be
added to the href attribute.

<a href=“pony.gif” target=“_new”>

In another window my pony is. See it you must.
</a>
 HTML Links
• Linking to Other Parts of the Same Page

<p>
<a href=“#bottom”>
More on the Yanomami Indians of the Amazon</a>
</p>
• Link Target: New Window

You can make links refer to an e-mail address by using

Syntax the following syntax structure:

<a href=“mailto:email_address”> content </a>

or
<a href=“mailto:email_address?subject=subject> …</a>

Example

<a href=“mailto:[email protected]”>e-mail Minari</a>

<a href=”mailto:[email protected]?subject=whatever”> E-mail

Minari</a>
 • Image as Link

A hyperlink does not always need to be a text. It

can actually be anything that can be clicked on,
so even an image can be a link.

<a href = ‘’www.cyberspace.com’’><img src=‘’pony.jpg’’ /> </a>

A hyperlink does not always need to be a text. It can actually be anything that
can be clicked on, so even an image can be a link.