Scribd
Upload
15 views

Chapter III Introduction To Computer

Uploaded by

Jerwin Taguinod
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Chapter III Introduction To Computer

Uploaded by

Jerwin Taguinod
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

CHAPTER III

INTRODUCTION TO HTML
OBJECTIVES

• At the end of this chapter students are expected to:


• Identify and describe HTML document structure
• Execute the basic tags elements and attributes of HTML.
• identify and label the parts of a Tag;
• Interpret how HTML document is used in Web pages.
• Create a simple webpage using HTML document structure elements
and attribute.
• Creating an HTML document is easy. To begin coding
HTML you need only two things: First is a simple text
editor. Notepad is the most basic of simple-text editors
and you will probably code a fair amount of HTML
with it. Second is a web browser, program that allows
you to view web pages such as Internet Explorer,
Mozilla Firefox, Google Chrome etc.
CREATING HTML DOCUMENTS

• Open a text editor


• Type the following text on your text editor
<html>
<head>
<title>This is document title</title>
</head>
<body>
<p>Document description goes here</p>
</body>

</html>
CREATING HTML DOCUMENTS

• In the File menu, choose Save.


• In the Save as Type option box, choose All Files.
• Set the Filename as “My First” followed by the
extension name .htm or .html.
HTML DOCUMENT STRUCTURE

• An HTML document starts and ends with <html> and </html> tags.
• These tags tell the browser that the entire document is composed in HTML. Inside these
two tags, the document is split into two sections:
• 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.
HTML TAGS AND ELEMENTS

• HTML documents are defined by HTML elements and tags.


• Tags are the indicators of how a certain object or property will appear on output page.
• HTML Element – everything between the start and the end tag. The start tag is often called
the opening tag. The end tag is often called the closing tag

OPENING TAG ELEMENT CONTENT CLOSING TAG


<title> My First Document </title>
<font face=”arial”> This is Arial </font>
HTML TAGS AND ELEMENTS

• Every tag consists of a tag name, sometimes followed by an optional list of tag’s att
• Empty Tags – are tags that do not require closing tags. Ex: <Br> tags
• Container Tags – require an opening tag to designate the start of the tag and a closing tag to
denote the end of that tag. </Body > ributes, all placed between opening and closing brackets
(< and >).
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
THE <HTML>TAG

• The <html> tag is the containing tag for the whole HTML document. Each
HTML document should have one <html> and each document should end with a
closing </html> tag.
• As such, start and end HTML tags enclose all the other HTML tags you use to
web page describe the Following two tags appear as direct children of an <html>
tag:
• <head>
• <body>
THE <HEAD> TAG

• The <head> tag is just a container for all other header elements.
It should be the first thing to appear after the opening <html>
tag.
Example:
Following is the example of head tag.
<head>
<title>HTML Basic tags</title>
</head>
THE <TITLE> TAG

• You should specify a title for every page that you write inside the <title> tag. This tag is a
child of the <head> element). It is used in several ways:
• 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> TAG

• The <body> tag appears after the <head> tag 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> tag 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 and the following five chapters 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>
THE <BODY> TAG

• Now that you have the list of using attributes in tags, this should
make perfect sense. Remember the <body> tag from the
first page, which everything visible on your page goes into?
That is the tag we'll be adding to in this, as it's been left
untouched up until now. There are 7 attributes to be added here,
and they all change how your page looks.
7 ATTRIBUTES OF A BODY TAG

• bgcolor
- This is the colour of the BG, or BackGround, of your page. You need to
put the colour in as a HEX code, like the rest of these colours.
- bgcolor="#FFFFFF"
- Note that, even though the default BG is white, you should still code
in #FFFFFF, because older browser's default BG is a nasty grey.
• Text
- This will change the colour of all the text on your whole
page, unless you have changed the colour manually (find out
how in the text section). Your best bet here is to leave it black,
because that's the easiest to read. Code!
- text="#000000"
• background
-If you want to put an image as your background, use this attribute, and
set the value to the same as you would for an image src (don't know
how? Read the preceding lesson on images). You can also link to an
image from another site, by giving the entire URL.

background="http://www.yoursite.com/media/BACKGROUND.gif"
• margins
- There are two sets of margins on a page, the ones at the sides and
the ones at the top and bottom. The two main browsers use different
attributes to put in these margins, so when you change one, change the other
as well.
- For Internet Explorer: topmargin="0" and leftmargin="0"
- For Netscape: marginheight="0" and marginwidth="0"
PUTTING ALL TOGETHER:

<html>

<head>

<title>HTML Basic tags</title>

</head>

<body bgcolor =”blue” text=”white”>

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

</body>

</html>
HTML ATTRIBUTES

• Attributes are another important part of HTML mark-


up. An attribute is used to define the characteristics of
an element and is placed inside the element's opening
tag. All attributes are made up of two parts: a name and
a value:
HTML ATTRIBUTES

• The name is the property you want to set. For example, the
<font> element in the example carries an attribute whose name
is face, which you can use to indicate which typeface you want
the text to appear in.
• The value is what you want the value of the property to be. The
first example was supposed to use the Arial typeface, so the
value of the face attribute is Arial.
• The value of the attribute should be put in double quotation
marks, and is separated from the name by the equals sign. You
can see that a color for the text has been specified as well as the
typeface in this <font> element:
CORE ATTRIBUTES:

The four core attributes that can be used on the majority of


HTML elements (although not all) are:
• id
• title
• class
• style
The id Attribute
The id attribute can be used to uniquely identify any element
within a page (or style sheet). There are two primary reasons
that you might want to use an id attribute on an element:
• If an element carries an id attribute as a unique identifier it
is possible to identify just that element and its content.
If you have two elements of the same name within a Web page
(or style sheet), you can use the id attribute to distinguish
between elements that have the same name.
<p id="html">This paragraph explains what is
HTML</p>
<p id="css">This paragraph explains what is
Cascading Style Sheet</p>
• Note that there are some special rules for the value
of the id attribute, it must:
• Begin with a letter (A.Z or a.z) and can then be
followed by any number of letters, digits (0.9),
hyphens, underscores, colons, and periods.
• Remain unique within that document; no two
attributes may have the same value within that
HTML document.
The title Attribute
The title attribute gives a suggested title for the
element. The syntax for the title attribute is similar as
explained for id attribute:
The behaviour of this attribute will depend upon the
element that carries it, although it is often displayed
as a tooltip or while the element is loading.
For example:
<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

Above code will generate following result:

Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and see the
result.
The class Attribute
The class attribute is used to associate an
element with a style sheet, and specifies the
class of element. You learn more about the use
of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can
avoid it.
The value of the attribute may also be a space-separated list of
class names. For example:

class="className1 className2 className3

The style Attribute


The style attribute allows you to specify rules within
the element.
For example:
<face= “arial” color= “FF0000”>Some text...</font>
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, Vertically aligns tags within an HTML
bottom element.
Bgcolor numeric, Places a background color behind an
hexidecimal, RGB element
values
background URL Places an background image behind an
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.
Height Numeric Value Specifies the height of tables, images,
or table cells.
Title User Defined "Pop-up" title for your elements.
LABORATORY ACTIVITY 1

You might also like