Adding text in html

Basics of HTML
Presented by Nobel Mujuji

• The baby step to learning the basics of any
new language is to learn the basics. HTML is
actually a very simple and easy to learn
language once the basics are advanced.
• HTML is made up of tags. There are two kinds
of tags; opening and closing tags. Opening
tags are pieces of text contained in <> and
looks like the following:

<tag>The closing tags have a structure like the
following with a /:
</tag>
• The whole structure of the tags are like the
following:
<opening tag>
</closing tag>

The information put in between the opening and
the closing tags are applied the functionality of the
tag.
For example:
The use of the <body> tag for the body of the web
page
<body>
Your web page body text here
</body>

Declaring HTML for a web page
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>

<head></head> tag
This tag contains the head elements of the web page. The head
elements within the <head></head> tags can include configuration
options like scripts, instruction to the browser to find and load Style
Sheets, meta information, etc. Some of these tags include:
•<base></base>
•<link></link>
•<meta></meta>
•<script></script>
•<style></style>
•<title></title>

<title></title> tag
• This tag defines the title of the HTML
document. The <title></title> tags are
required in all HTML/XHTML documents. This
element defines a title to the browser toolbar,
provide a title for a web page when it is added
to the favorites and displays a title for the
page in search-engine results.

<body></body> tag
This tag defines the body of the web page. The
<body></body> tag contains all the contents of
a HTML web page like text, hyperlinks, images,
tables, lists, etc. This is the most important tag
of the web/HTML document.

HTML Text tag
In this part of the tutorial you will learn how to handle
text in your HTML document. This part is broken down
into two section:
Adding Text Learn how to add text to your page and
format the color, size and font of it and display it on your
web page.
Positioning Text Learn how to align elements on the
paged making paragraphs. Learn other tags which will
help you further design your web page like lists etc.

Add Text in HTML
• In this part of the HTML tutorial you will learn
how to create a simple Home page for your
website and learn how to add text to your
page and format the color, size and font of it
and display it on your web page.
• All you need to do now is change the<title>
tag to My Home Page.

Challenge 1
<html>
<head>
<title>My Home Page</title>
</head>
<body>
</body>
</html>

tag
This tag sets the basic form to display text on your web page. To start
this tutorial, add this:
Welcome To My Personal Home Page between the
<body></body>
The following is a piece of code you get.
<body>
Welcome To My Personal Home Page
</body>
The tag will display the text in a standard font size, black,
in Times New Roman.

Face
These attributes for the tags are the basic attributes that you
will come across when programming using HTML. These attributes are used
to change the look and feel of the text within the tags.
The following is a piece of code with the Face attribute.
<body>
 Welcome To My Personal Home Page
</body>
Within the tags the font name can be enclose with quotation marks
(“”) after and equals mark (=).

Size
Many attributes can be added to a tag for
example different sizes for the font. There is a
difference between the normal font sizes (pt)
and the HTML font sizes. HTML font sizes are
single numbers which are related to a standard
font size. The following table shows this
relationship.

HTML Font Size Standard Font Size
1 8 pt
2 10 pt
3 12 pt
4 14 pt
5 16 pt
6 18 pt
7 24 pt

Color
Every tag has extra attributes to add extra features or options. If you wish to change
the color of the text, you can use the color tag. The color is spelt using the American
way.
Color is a little different from other attributes because it can be changes using a HTML
color Word. But only a few color names works, for example, red, blue, green etc. HEX
codes in the format of #000000 (# followed by 6 numbers) can also be used. The first 2
numbers are the amount of Red color, the next 2 are Green and the last 2 are Blue
color.
The following piece of code shows text color added to the previous code.
With HTML color Word:
 Welcome To My Personal Home
Page
With HEX codes:
 Welcome To My Personal Home
Page

Centering
Text can be changed into different sizes, color and even face (style). The other control
on text is alignment. Text can be aligned to center using the <center></center> tags.
Any text placed within these tags will be centered. The following shows a piece of
code with text aligned to the center.
<body>
<center>
 Welcome To My Personal Home
Page
</center>
</body>

challenge
<html >
<head>
<title>My Home Page</title>
</head>
<body>
<center>
 Welcome To My Personal Home Page
</center>
</body>
</html>

Adding text in html

More Related Content

What's hot

Similar to Adding text in html

More from nobel mujuji

Recently uploaded

Adding text in html