Scribd
Upload
16 views25 pages

Basic HTML Q1

This document serves as a guide for using an HTML module, outlining instructions for creating and understanding HTML documents. It covers essential HTML elements such as <html>, <head>, <title>, and <body>, as well as the use of headings and paragraphs. The document encourages hands-on practice and provides examples to help users learn HTML effectively.

Uploaded by

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

Basic HTML Q1

This document serves as a guide for using an HTML module, outlining instructions for creating and understanding HTML documents. It covers essential HTML elements such as <html>, <head>, <title>, and <body>, as well as the use of headings and paragraphs. The document encourages hands-on practice and provides examples to help users learn HTML effectively.

Uploaded by

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

091625310 Jayr faigao lfaigaojr@gmail.

com
How to use this Module?
Before you start answering the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instructions below to
successfully enjoy the objectives of this kit. Have fun!
• Follow carefully all the contents and instructions indicated in every page of
this module.
• Knowing the skills needed is important to develop and keep in mind.
• Perform all the provided activities in the module.
• Analyze conceptually the posttest and apply what you have learned.
• Enjoy studying!

Guide Icons

Table of Contents
LESSON 1
Introducing HTML
LESSON 2
Html Tags and Elements
LESSON 3
Creating Headings
LESSON 4
Creating Paragraphs
LESSON 5
Creating Line Breaks, Centering Content and Nonbreaking Spaces
LESSON 6
Presentational Tags
LESSON 7
Groupings
LESSON 8
HTML Fonts and Colors

091625310 Jayr faigao [email protected]


Lesson 1
Introducing HTML

Introducing HTML:

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages. As its name suggests, HTML is a markup
language.

• Hypertext refers to the way in which Web pages (HTML documents) are
linked together. When you click a link in a Web page, you are using
hypertext.
• Markup Language describes how HTML works. With a markup
language, you simply "markup" a text document with tags that tell a Web
browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers.

All you need to do to use HTML is to learn what type of markup to use to get
the results you want.

Hands-on Exercise: My First Webpage

Creating HTML Document


Creating an HTML document is easy. To begin coding HTML you need only two
things: a simple- text editor and a web browser. Notepad is the most basic of
simple-text editors and you will probably code a fair amount of HTML with it.

Here are the simple steps to create a basic HTML document:

• Open Notepad or another text editor.


• At the top of the page type <html>.
• On the next line, indent five spaces and now add the opening header tag:
<head>.
• On the next line, indent ten spaces and type <title> </title>.
• Go to the next line, indent five spaces from the margin and insert the
closing header tag: </head>.
• Five spaces in from the margin on the next line, type<body>.
• Now drop down another line and type the closing tag right below its mate:
</body>.
• Finally, go to the next line and type </html>.
• In the File menu, choose Save As.
• In the Save as Type option box, choose All Files.
• Name the file myfirstwebpage.htm.
• Click Save.

You have basic HTML document now, to see some result put the following code
in title and body tags.

091625310 Jayr faigao [email protected]


NOTE: You can view your html files using your browser (Chrome, Mozilla, or
Internet Explorer). You can edit your html files using NOTEPAD by right clicking
on your html files and then click open with, then select Notepad.
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>My First Webpage</h1>
<p>Document description goes here .... </p>
</body>
</html>

Now you have created one HTML page and you can use a Web Browser
(Chrome, Explorer, or Mozilla Firefox browser) to open this HTML file to see the
result. Hope you understood that Web Pages are nothing but they are simple
HTML files with some content which can be rendered using Web Browsers.

NOTE: One HTML file can have extension as .htm or .html. So you can use
either of them based on your comfort.

HTML Document Structure:

An HTML document starts and ends with <html> which is the opening tag and
</html> which is the closing tag. The closing tag is the same as the opening
tag, except for the slash. These tags tell the browser that the entire document
is composed in HTML. Inside these two tags, the document is split into two
sections:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

• The <head>...</head> elements, which contain information about the


document such as title of the document, author of the document etc.
Information inside this tag does not display outside.
• The <body>...</body> elements, which contain the real content of the
document that you see on your screen.

091625310 Jayr faigao [email protected]


Lesson 2
HTML Tags and Elements

HTML Tags and Elements:

HTML language is a markup language and we use many tags to markup text.
In the above example you have seen <html>, <body> etc. are called HTML tags
or HTML elements.

Every tag consists of a tag name, sometimes followed by an optional list of tag
attributes, all placed between opening and closing brackets (< and >). The
simplest tag is nothing more than a name appropriately enclosed in brackets,
such as <head> and <i>. More complicated tags contain one or more attributes,
which specify or modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-
sensitive. There's no difference in effect between <head>, <Head>, <HEAD>,
or even <HeaD>; they are all equivalent. But with XHTML, case is important:
all current standard tag and attribute names are in lowercase.

HTML Basic Tags

The basic structure for all HTML documents is simple and should include the
following minimum elements or tags:

• <html> - The main container for HTML pages


• <head> - The container for page header information
• <title> - The title of the page
• <body> - The main body of the page

Now we will explain each of these tags one by one. In this tutorial you will find
the terms element and tag are used interchangeably.

The <html> Element:

The <html> element is the containing element for the whole HTML document.
Each HTML document should have one <html> and each document should
end with a closing </html> tag.

Following two elements appear as direct children of an <html> element:

• <head>
• <body>

As such, start and end HTML tags enclose all the other HTML tags you use to
describe the Web page.

091625310 Jayr faigao [email protected]


The <head> Element:

The <head> element is just a container for all other header elements. It
should be the first thing to appear after the opening <html> tag.

Each <head> element should contain a <title> element indicating the title of the
document, although it may also contain any combination of the following
elements, in any order:

• The <base> tag is used to create a "base" url for all links on the page.
Check HTML Base tag.
https://lab.github.com/githubtraining/introduction-to-html
• The <object> tag is designed to include images, JavaScript objects,
Flash animations, MP3 files, QuickTime movies and other components
of a page. Check HTML Object tag.
https://www.tutorialspoint.com/html/html_object_tag.htm
• The <link> tag is used to link to an external file, such as a style sheet
or JavaScript file. Check HTML Link tag.
http://www.tutorialspoint.com/html/html_link_tag.htm
• The <style> tag is used to include CSS rules inside the document.
Check HTML Style tag.
http://www.tutorialspoint.com/html/html_style_tag.htm
• The <script> tag is used to include JAVAScript or VBScript inside the
document. Check HTML Script tag.
http://www.tutorialspoint.com/html/html_script_tag.htm
• The <meta> tag includes information about the document such as
keywords and a description, which are particularly helpful for search
applications. Check HTML Meta tag.
http://www.tutorialspoint.com/html/html_meta_tag.htm

Example:

Following is the example of head tag.

<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
_uacct = "UA-232293";
urchinTracker();
</script>
</head>

The <title> Element:

You should specify a title for every page that you write inside the <title>
element. This element is a child of the <head> element). It is used in several
ways:

091625310 Jayr faigao [email protected]


• It displays at the very top of a browser window.
• It is used as the default name for a bookmark in browsers such as IE and
Netscape.
• It is used by search engines that use its content to help index pages.

Therefore, it is important to use a title that really describes the content of your
site. The <title> element should contain only the text for the title and it may not
contain any other elements.

Example:

Here is the example of using title tag.

<head>
<title>HTML Basic tags</title>
</head>

The <body> Element

The <body> element appears after the <head> element and contains the part
of the Web page that you actually see in the main browser window, which is
sometimes referred to as body content.

A <body> element may contain anything from a couple of paragraphs under a


heading to more complicated layouts containing forms and tables.

Most of what you will be learning in this module will be written between the
opening <body> tag and closing </body> tag.

Example:

Here is the example of using body tag.

<body>
<p>This is a paragraph tag.</p>
</body>

Putting all together:

Now if we will put all these tags together, it will constitute a complete HTML
document as follows:

091625310 Jayr faigao [email protected]


<html>

<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
_uacct = "UA-232293";
urchinTracker();
</script>
</head>

<body>
<p>This is a paragraph tag.</p>
</body>

</html>

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/
Generic Attributes:

Here's a table of some other attributes that are readily usable with many of
HTML's tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML


element.
bgcolor numeric, hexidecimal, Places a background color behind an
RGB values element

backgrou URL Places an background image behind an


nd element
id User Defined Names an element for use with
Cascading Style Sheets.

class User Defined Classifies an element for use with


Cascading Style Sheets.

width Numeric Value Specifies the width of tables,


images, or table cells.

091625310 Jayr faigao [email protected]


height Numeric Value Specifies the height of tables,
images, or table cells.

title User Defined "Pop-up" title for your elements.

We will see related examples as we will proceed to study other HTML tags.

For a complete list of HTML Tags and related attributes please check reference
to HTML Tags List. https://www.tutorialspoint.com/html/html_tags_ref.htm
Lesson 3
Creating Headings

Create Headings - The <h> Elements:

Any documents start with a heading. You use different sizes for your headings.
HTML also have six levels of headings, which use the elements <h1>, <h2>,
<h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one
line before and after that heading.

Example:

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This will display following result:

This is heading 1
This is heading 2
This is heading 3

This is heading 4

This is heading 5

This is heading 6

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/

091625310 Jayr faigao [email protected]


Hands-on exercise: Do this on a notepad. Just fallow the instruction on how to
save your html files at hands-on exercise in lesson 1.

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Lesson 4
Creating Paragraphs
Create Paragraph - The <p> Element:
The <p> element offers a way to structure your text. Each paragraph of text
should go in between an opening <p> and closing </p> tag as shown below in
the example:

<p>Here is a paragraph of text.</p>


<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>

This will produce following result:

Here is a paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

091625310 Jayr faigao [email protected]


Hands-on exercise: Do this on a notepad.

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>


<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works when you have multiple lines in your paragraph
and you want to justfy all the lines so that they can look more nice.</p>

This will produce following result:

This is left aligned.

This is center aligned.

This is right aligned.

This is jutified. This works when you have multiple lines in your paragraph and you want to
justfy all the lines so that they can look more nice.

Hands-on exercise: Do this on a notepad.

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works when you have multiple lines in your paragraph
and you want to justfy all the lines so that they can look more nice.</p>
</body>
</html>

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/

091625310 Jayr faigao [email protected]


Lesson 5
Creating Line Breaks, Centering Content and
Nonbreaking Spaces

Create Line Breaks - The <br /> Element:


Whenever you use the <br /> element, anything following it starts on the next
line. This tag is an example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.

Note: The <br /> element has a space between the characters br and the
forward slash. If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and just use <br>
it is not valid XHTML

Example:
Hello<br />
You come most carefully upon your hour.<br />
Thanks<br />
Mahnaz

This will produce following result:

Hello

You come most carefully upon your hour.

Thanks

Mahnaz

Centering Content - The <center> Element:

You can use <center> tag to put any content in the center of the page

or any table cell. Example:

<p>This is not in the center.</p>


<center>
<p>This is in the center.</p>
</center>

This will produce following result:

This is not in the center.

This is in the center.

091625310 Jayr faigao [email protected]


Nonbreaking Spaces:

Suppose you were to use the phrase "12 Angry Men." Here you would not
want a browser to split the "12" and "Angry" across two lines:

A good example of this technique appears in the movie "12 Angry Men."

<p>A good example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>

In cases where you do not want the client browser to break text, you should use
a nonbreaking space entity (&nbsp;) instead of a normal space. For example,
when coding the "12 Angry Men" paragraph, you would use something similar
to the following code:

Horizontal Rules - The <hr /> Element

Horizontal rules are used to visually break up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.

For example, you may want to give a line between two paragraphs as follows:

<p>This is paragraph one and should be on top</p>


<hr />
<p>This is paragraph two and should be at bottom</p>

This will produce following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.

Note: The <hr /> element has a space between the characters br and the
forward slash. If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and just use <hr>
it is not valid XHTML

091625310 Jayr faigao [email protected]


Hands-on exercise: Do this on a notepad.
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Hello<br />
You come most carefully upon your hour.<br />
Thanks<br />
Mahnaz
<p>This is not in the center.</p>
<center>
<p>This is in the center.</p>
</center>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>

</body>
</html>

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/

Lesson 6
Presentational Tags

Presentational Tags:
If you use a word processor, you are familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to
indicate how text can appear in HTML and XHTML.

Bold Text - The <b> Element:

Anything that appears in a <b>...</b> element is displayed in bold, like the word
bold here:

<p>The following word uses a <b>bold</b> typeface.</p>

This will produce following result:

The following word uses a bold typeface.

Italic Text - The <i> Element:

091625310 Jayr faigao [email protected]


Anything that appears in a <i>...</i> element is displayed in italicized, like the
word italicized here:

<p>The following word uses a <i>italicized</i> typeface.</p>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text - The <u> Element:

Anything that appears in a <u>...</u> element is displayed with underline, like


the word underlined here:

<p>The following word uses a <u>underlined</u> typeface.</p>

This will produce following result:

The following word uses a underlined typeface.

Strike Text - The <strike> Element:

Anything that appears in a <strike>...</strike> element is displayed with


strikethrough, which is a thin line through the text:

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced font - The <tt> Element:

The content of a <tt> element is written in monospaced font. Most fonts are
known as variable- width fonts because different letters are of different widths
(for example, the letter m is wider than the letter i). In a monospaced font,
however, each letter is the same width.

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

091625310 Jayr faigao [email protected]


This will produce following result:

The following word uses a monospaced typeface.

Superscript Text - The <sup> Element:

The content of a <sup> element is written in superscript; the font size used is
the same size as the characters surrounding it but is displayed half a
character’s height above the other characters.

<p>The following word uses a <sup>superscript</sup> typeface.</p>

This will produce following result:

The following word uses a superscript


typeface.

Subscript Text - The <sub> Element:

The content of a <sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character’s height
beneath the other characters.

<p>The following word uses a <sub>subscript</sub> typeface.</p>

This will produce following result:

The following word uses a subscript typeface.

Larger Text - The <big> Element:

The content of the <big> element is displayed one font size larger than the rest
of the text surrounding it.

<p>The following word uses a <big>big</big> typeface.</p>

This will produce following result:

The following word uses a big typeface.

091625310 Jayr faigao [email protected]


Smaller Text - The <small> Element:

The content of the <small> element is displayed one font size smaller than the
rest of the text surrounding it.

<p>The following word uses a <small>small</small> typeface.</p>

This will produce following result:

The following word uses a small typeface.

Hands-on exercise: Do this on a notepad.


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <i>italicized</i> typeface.</p>
<p>The following word uses a <u>underlined</u> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>

</body>
</html>

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/

Lesson 7
Grouping
Grouping - The <div> and <span> Elements :
The <div> and <span> elements allow you to group together several

091625310 Jayr faigao [email protected]


elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div>
element to indicate that all of the elements within that <div> element relate to
the footnotes. You might then attach a style to this <div> element so that they
appear using a special set of style rules.

The <div> element is used to group block-level elements together:

<div id="menu" align="middle" >


<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here .... </p>
</div>

This will produce following result:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements
only. So, if you had a part of a sentence or paragraph you wanted to group
together you could use the <span> element.

<div><p>This is the example of <span style="color:green">span tag</span> and the <span


style="color:purple">div tag</span> alongwith CSS</p></div>

This will produce following result:

This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS to allow you to attach a style to a

section of a page. To Become more comfortable - Do Online Practice

For a complete list of HTML Tags and related attributes please check reference
to HTML Tags Reference.

091625310 Jayr faigao [email protected]


As you would expect in a print publication, the content of the <cite> element is
rendered in italicized text by default.

<p>This HTML Tutorial is derived from <cite>World Wide Web Standard for HTML</cite>.</p>

This will produce following result:

This HTML Tutorial is derived from World Wide Web Standard for HTML.

Hands-on exercise: Do this on a notepad.


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here .... </p>
</div>
<div><p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:purple">div tag</span> alongwith CSS</p></div>
</body>
</html>

To Become more comfortable - Do Online Practice. Websites where you can


practice basic html -https://www.w3schools.com/ and https://www.tutorialspoint.com/

Lesson 8
HTML Fonts and Color

HTML Fonts

091625310 Jayr faigao [email protected]


Font face and color depends entirely on the computer and browser that is being
used to view your page. But the <font> tag is used to add style, size, and color
to the text on your site.

The font tag is having three attributes called size, color, and face to customize
your fonts.

To change any of the font attributes at any time within your page, simply use
the <font> tag. The text that follows will remain changed until you close with the
</font> tag. You can change any or all of the font attributes at the one time, by
including all the required changes within the one <font> tag.

NOTE: The font tags are deprecated and it is supposed to be removed in a


future version of HTML. So it should not be used. Its is suggested to use css
styles to manipulate your font.

Font Size:

You can set the size of your font with size attribute. The range of accepted
values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example:

<font size="1">Font size="1"</font>


<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>

This will produce following result:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
SPECIFY THE RELATIVE FONT SIZE. <font size="+n"> or <font
size="-n">: You can specify how many sizes larger or how many sizes smaller

091625310 Jayr faigao [email protected]


than the preset font size should be.

Example:

<font size="-1">Font size="-1"</font>


<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
<font size="+4">Font size="+4"</font>

This will produce following result:

Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"
Font Face:

You can set any font you like using face attribute but be aware that if the user
viewing the page doesn't have the font installed, they will not be able to see it.
Instead they will default to Times New Roman of your font with size attribute.
See below few examples on using different font face

Example:
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>

This will produce following result:

091625310 Jayr faigao [email protected]


Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Specify alternate font faces:

A visitor will only be able to see your font if they have that font installed on their
computer. So, it is possible to specify two or more font face alternatives by
listing the font face names, separated by a comma.

Example:

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console>

When your page is loaded, their browser will display the first font face that it
has available. If none of your selections are installed, then it will display the
default font face Times New Roman.

Font Color:

You can set any font color you like using color attribute. You can specify the
color that you want by either the color name or hexadecimal code for that color.

Example:

<font color="#FF00FF">This text is hexcolor #FF00FF</font>


<font color="red">This text is red</font>

This will produce following result:

This text is hexcolor #FF00FF


This text is red

HTML Colors - Color Names:

You can specify direct a color name to set text or background color. W3C has
listed 16 basic color names that will validate with an HTML validator but there

091625310 Jayr faigao [email protected]


are over 200 different color names supported by Netscape and IE.

W3C Standard 16 Colors:

Here is the list of W3C Standard 16 Colors names and it is recommended to


use them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Hands-on exercise: Do this on a notepad.


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
<font size="+4">Font size="+4"</font>
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console>

<font color="#FF00FF">This text is hexcolor #FF00FF</font>


<font color="red">This text is red</font>

</body>
</html>

To Become more comfortable - Do Online Practice. Websites where

091625310 Jayr faigao [email protected]


you can practice basic html -https://www.w3schools.com/ and
https://www.tutorialspoint.com/

091625310 Jayr faigao [email protected]


091625310 Jayr faigao [email protected]

You might also like