Written Report in HTML

Polytechnic University of the Philippines
College of Education
Sta. Mesa, Manila

Written Report in
Fundamentals of Multi-Media & Web Page Development

Introduction to Web Page
Development Using HTML

Submitted to: Prof. Michelle Bandola Sotto

Submitted by: Aaron G. Dimaapi
Justine P. Macato

What is HTML?

HTML stands for HyperText Markup Language. Developed by scientist Tim
Berners-Lee in 1990.
HTML is the set of markup symbols or codes inserted in a file intended for
display on a World Wide Web browser page. The markup tells the Web browser how to
display a Web page's words and images for the user. Each individual markup code is
referred to as an element (but many people also refer to it as a tag). Some elements
come in pairs that indicate when some display effect is to begin and when it is to end.
HyperText is the method by which you move around on the web by clicking on
special text called hyperlinks which bring you to the next page.

Markup is what HTML tags do to the text inside them. They mark it as a certain
type of text (italicized text, for example).

HTML is a Language, as it has code-words and syntax like any other language.

The tools you need
Fortunately, HTML is written in plain text. That means you dont need any fancy
software programs like a word processor to create your HTML files. All you need is a
simple text-editor thats already on your system. For MACs, that would be SimpleText
and for Windows, Notepad.

2 Types of Tags

1. Container Tag - always wraps around text or graphics and comes in a set with an
opening and a closing tag.

Example : <head> opening tag
</head> closing tag

The forward slash (/) on the closing tag tells the browser that the tag has ended.

2. Empty Tag - An empty tag is a term used in web programming to refer to a
starting tag which does not have an ending tag.

Example: <br> & <hr>

Most Commonly Used Tags in HTML

Document Structure
<html> </html> HTML documents begin at the first tag and end at the second.
These tags tell the browser that what lies between is coded in
HTML.
<head> </head> Header information goes between these tags. The <title> tags are
used to create a title that appears at the top of the browser window.
The <meta> tag can be used to help webcrawlers index your site.
<body> </body> The contents of the main page are displayed between these tags.
You can set various attributes within this tag, including background
images and colors and colors for text and links.
Body tags
<h3> </h3> Medium-sized header line
H1 gives the biggest, h6 gives the smallest. Try them out to see
which suits any given application. Within this tag, the attribute
align= can be set to left, center, or right. For example: <h3
align="center"> </h3> centers the header.
<p> Starts a new paragraph: a blank line followed by a new line. You
should use the </p> tag to end the paragraph, but it isn't
necessary.
<br> or <br /> Starts a new line without a blank line in between.
<b> </b> Bold face any text between the tags.
<i> </i> Italic face any text between the tags.
<u> </u> Underline any text between the tags. Not widely used, because
most underlined text on HTML pages is hyperlinks
<sup> </sup>
Superscript
any text between the tags.
<sub> </sub>
Subscript
any text between the tags.
<tt> </tt> Any text between the tags is uniformly spaced: good for aligning
columns.
<hr> Draws a horizontal line. The attribute size="50%" (any percent will
do) draws a line of that percentage of the screen width. The
attribute align= can be used to move the line to left, center, or right.
<pre> </pre> Text between these
tags is "preformatted". Spaces and line breaks
appear as you entered
them.
Lists
<ul> </ul> Begin and end an un-numbered list. Each individual item on the list
begins with <li> and ends with </li>. Each item appears as a bullet
point.
<ol> </ol> Begin and end a numbered list. Each individual item on the list
begins with <li> and ends with </li>.
Insert Image
<img
src="filename"
title="text">
Insert the image file: .jpg, .gif, or .png files are supported by nearly
all browsers. The title attribute is displayed by the "tool tips"
function of the browser: when you run the mouse over the image.

Case sensitive

HTML is also not case sensitive. That means, you can use either lowercase or
uppercase. <HTML> is the same as <html>. For consistency, use either one or the
other. It's best not to mix and match. For our purposes, I have written our code in
lowercase.

Basic HTML Format

To build any web page you will need four primary tags: <html>, <head>, <title>
and <body>. These are all container tags and must appear as pairs with a beginning
and an ending.
<html></html>
Every HTML document begins and ends with the <html> tag. This tells the browser that
the following document is an html file. Remember, tags tell the browsers how to display
information.
<head></head>
The <head> tag contains the title of the document along with general information about
the file, like the author, copyright, keywords and/or a description of what appears on the
page.

<title></title>
Appears within the <head> tag and gives the title of the page. Try to make your titles
descriptive, but not more than 20 words in length. The title appears at the very top of the
browser page on the title bar.
<body></body>
The main content of your page is placed within the body tags: your text, images, links,
tables and so on.

Adding color

When you create a web page you will want to use different background and text
colors and to add images. This makes the site more attractive to visitors and generally
makes the website look better. Take care not to make the text and background color the
same!

In this exercise we will change the background color of your website you created
to blue. To do this you would add the following HTML code into the body of your text
file.

<body bgcolor = "#0000FF">

Notice how instead of saying <body bgcolor = blue> We have used some strange
looking code. Dont worry this is called "Hexadecimal color" and can be used for
inserting complex colors into your website.

Other sample of Hexadecimal color codes

As well as using the Hexadecimal method, you can also use good old-fashioned
English! Meaning that placing the following code into your HTML file would have the
exact same effect:
<body bgcolor = "blue">

When inserted into your code, the code should look like this:

<html>
<head>
<title>My Own Home Page </title>
</head>
<body>
<body bgcolor= "blue">
<H1> I am Your-Name and this is my web Page!</H1>
</body>

Your website should now look something like this:

Adding color to text

Adding color to text is the same way in adding background color. This is the code
we need to insert into our webpage:

<font color="Red">Text that you want to make red goes
here</font>

Notice that you must put </font> after the text has ended. If you didnt insert the </font>
then your entire document would have the text as red. This isnt too important for now
but if you ever have more than one text color on a page this may become a problem.

Here is how your code should now look:

<html>
<head>
<title>My Own Home Page </title>
</head>
<body>
<body bgcolor= "blue">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
</font>
</body>

IMPORTANT TIP: A common error when coding with colors and HTML in general are
simple spelling mistakes. Remember that when typing "color" it is the American spelling,
make sure you dont use the English spelling "colour" or your HTML wont work.

Written Report in HTML

Uploaded by

Copyright:

Available Formats

Written Report in HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Written Report in HTML

Uploaded by

Copyright:

Available Formats

Polytechnic University of the Philippines

You might also like