Hypertext Markup Language - Lec1 - Web1

HYPERTEXT
MARKUP
LANGUAGE
PREPARED BY:
REY M. CARANGUIAN
HYPERTEXT MARKUP LANGUAGE
Hyper refers to creating linked and nonlinear structures of
information.
Text refers to the words on the computer screen that we are
marking up.
Markup is the process of preparing the text to define how it
displays when viewed as pages on the WWW by marking them
with formatting directions conveyed by notations called “tags”.
Language is a system of signs used for communication- written
and oral.
HYPERTEXT MARKUP LANGUAGE
HTML is a document-layout and hyperlink-specification language.
HTML is a set of logical codes ( Markup) in a parentheses that
constitute the appearance of a web document and the information
it contains.
Example: <B> This text would appear bold in the browser</B>
HTML is a platform independent.
The basic syntax and semantics of HTML are defined in the
HTML standard.
TEXT EDITOR
Noted from Microsoft is the common HTML Text editor.
Microsoft Word and WordPerfect can also be used to

create HTML document.
HTML documents has a file extension .HTML or .HTM

Elements of a Web Page
Title: A web page’s title identifies the subject or purpose of
the page.
Body: The body of the web page contains information that
displays in the browser window.
Normal Text: The text that makes up the main content of a
Web page.
Headings: These are used to set off different paragraphs
of text or different sections of a page.
Elements of a Web Page
Image: It is another important element of a web page
such as an icon, bullet, line, photo, illustration or other
picture.
Hyperlink: It serves as a primary way to navigate

between pages.
Web Page Document Structure
The easiest way to create and develop a document is to
type the required elements in as a starting point.
In a notepad you should start with:
<HTML>
<HEAD> Although, HTML is not case
<TITLE> </TITLE> sensitive, it is a standard practice
</HEAD> To always type HTML tags in
<BODY></BODY> Uppercase letters
</HTML>
THE <HTML> Tag
The <HTML> and </HTML> tags serve to delimit the
beginning and ending of an HTML document.
<HTML> Function: Delimits a complete document.
Attributes: Version
End Tag:
</HTML>; may be omitted
When the <HTML> tag appears without the version attribute, the
HTML document server & browser assume the version of HTML
used in this document is supplied to the browser by the server.
THE <HEAD> Tag
The <HEAD> and </HTML> tag specifies that the lines
within the beginning a& ending points of the tag are the
prologue to the rest of the file.
<HEAD> has no attributes and serves only to encapsulate
the other header tags.
<HEAD>: Function: Defines the document header
Attributes: None
End Tag:</HEAD>; rarely omitted
THE <TITLE> Tag
The <TITLE> and </HTML> tags define the title for your document
<TITLE> Function: Defines the document title.
Attributes: None
End Tag:
</TITLE>; never omitted
Example: <HTML>
<HEAD>
<TITLE> Web Development</TITLE>
</HEAD>
</HTML>
THE <BODY> Tag
The document body is where you put the contents of your
document.
<BODY> Function: Defines the document body.
Attributes: ALINK ( Netscape only),
BACKGROUND(extension), BGCOLOR(Extension),
BGPROPERTIES( Internet Explorer only), LEFTMARGIN
( Internet Explorer only), LINK ( Extension), TEXT
( extension), TOPMARGIN( Internet Explorer only), &
VLINK(extension)
End Tag: </BODY>; maybe omitted
THE <BODY> Attributes
The document body is where you put the contents of your
document.
<BODY> Function: Defines the document body.
Attributes: ALINK ( Netscape only),
BACKGROUND(extension), BGCOLOR(Extension),
BGPROPERTIES( Internet Explorer only), LEFTMARGIN
( Internet Explorer only), LINK ( Extension), TEXT
( extension), TOPMARGIN( Internet Explorer only), &
VLINK(extension)
End Tag: </BODY>; maybe omitted
Background Color: Use the BGCOLOR attribute to set document’s
background color.
<BODY BGCOLOR=“#FFFFFF”></BODY>
Text Color: Use TEXT attribute to control the color of all the normal
text in the document.
This will affect all of the text within the document that is not being
colored by some element, such as link.
<BODY BGCOLOR= “#FFFFFF” TEXT=“#FF0000”></BODY>
LINK, VLINK, ALINK: These attributes control the colors of the different link
states:
LINK – Initial Appearance- default=Blue
VLINK- visited link- default=Purple
ALINK- active link being clicked- default=RED
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FFOOOO”LINK=”#0000FF”
VLINK=“#FF00FF” ALINK=“FFFF00”>
 Image Background: Use BACKGROUND attribute to set an
image background for the document. ( TILED)
<BODY BACKGROUND=“logo.gif” BGCOLOR=“#FFFFFF”>
HTML TAGS
• An element is a fundamental component of the structure of a text document
• It is the first word or character that appears inside the “<“ opening bracket.
• To denote the various elements in an HTML document, you use tags.
• HTML tags consist of a left angle bracket (<), a tag name, and a right angle
bracket (>).
• Tags are usually paired ( e.g., <H1> and </H1> to start and end the tag
instruction.
• The end tag looks like the start tag except a slash(/) preceded the text within
the brackets.
• Words that follow the element and are contained inside the “>” bracket of the
opening tag are called attributes.
Types of HTML Tags
There are two types of tags: container and empty.
Container tags have both an opening and closing and are used to
surround the text within your document for presentation by the tag.
The closing tag name is preceded by a forward slash.
E.g <TITLE> Welcome to my Homepage</TITLE>
Empty tags use only an opening and tell the browser to perform an
instruction such as breaking to the next line, inserting a horizontal
line or inserting an image.
E.g. <BR>, <HR>, <IMG src= “name”>
HEADINGS
HTML defines six levels of headings that can be used to structure
a text flow into a more readable, more manageable document.
Inside the BODY element, heading elements H1 through H6 are
generally used for major divisions of the document.
Headings are used in order of importance, not based on how they
render in the browser.
H1 is the most important; H6 is the least important.
The size of the text surrounded by a heading element varies from
very large in an <H1> tag to a very small in an <H6>tag.
EXERCISE
What would be the output of the following HTML code?
<HTML>
<HEAD>
<TITLE> Car Debugging</TITLE> </HEAD>
<BODY>
<H1> Engine Tune-up<H1>
<H2> Change the Oil <H2>
<H2> Change the Spark Plugs <H2> <H2>
EXERCISE Cont..
<H3>Prepare the New Plugs </H3>
<H4> Remove the guards <H4>
<H4>Check the Gap </H4>
</BODY>
</HTML>
.
PARAGRAPH
One of the most commonly used tags in HTML is the paragraph
marker, which is used to break apart blocks of text into separate
paragraphs.
Each paragraph starts with <P> and ends with the corresponding
</P> tag.
EG:
<Body>
This is the first paragraph, at the very beginning of the body this
document. <P> The tag above signals the start of this second
PARAGRAPH Cont…
Paragraph. When rendered by a browser, it will begin slightly below
the end of the first paragraph, with a bit of extra white space
between the two paragraphs. </P> This is the last paragraph in the
example. </BODY>
Line Break <BR>
Line breaks allow you to decide where the text will break on
a line or continue to the end of the window.
A <BR> is an empty element, which may contain attributes
but it does not contain any content.
Line Break <BR>
The <BR> element does not have a closing tag because it marks a
position and does not contain any content
<BODY>
This is the first paragraph, at the very beginning of the body
this document. <BR> The tag above signals the start of this
second paragraph. When rendered by a browser, it will begin
slightly below the end of the first paragraph, with a bit of extra
white space between the two paragraphs. <BR> This is the
last paragraph in the example. </BODY>
Horizontal Rule
The <HR> element causes the browser to display a horizontal line ( rule)
in your document.
Horizontal rules give you a way to visually separate sections of your
document
<BODY>
This text is directly above the rule. <HR>
And this text is immediately below.<P>
Whereas this text will have space before the rule.<P><HR><P> And this
has space after the rule. </BODY>
CHARACTER FORMATTING
Character formatting elements allows you to:
Specify the appearance of individual characters ( bold, italic,
typewriter)
Include special characters ( characters with accents, copyright and
registration marks, and so on)
Create preformatted text (text with spaces and tabs retained)
Align text left, right, justified, and centered.
Change the font, size, and color.
HTML provides two general ways to apply formatting to text, the
physical style and logical style.
Physical tags
Physical style tags indicate exactly the way text is to be formatted.
This tag indicates a specific change in appearance.
Below is the list of physical tags; they can be combined to create other
effect.
<B>- Bold <S>- Strike through
<I>- Italic <BIG>- Bigger print than the
<TT>- Monospaced typewriter font surrounding text
<U>- Underline <SMALL>Smaller print
<SUB>- Subscript <SUP>- Superscript
Logical tags
LOGICAL Style tags take the approach that what’s really important
is the type of information being displayed, rather than exactly how it
is displayed.
These are similar to the common element tags for paragraphs or
headings.
They don’t indicate how the text is to be formatted, just how it is to
be used in a document.
Logical style tags might, for example, indicate a definition, a
snippet of code, or an emphasized word.
Logical tags
<EM> emphasis<EM>
These tags adds emphasis to the inserted texts.
Using the <EM> and </EM> tags will usually display the indicated
text in italics.
However, remember that the logical tags, the actual appearance of
the text is determined by the user’s Web browser, not your HTML
document.
Eg. <P> Say it with<EM>emphasis</EM></P>
Logical tags
<STRONG> strong emphasis</strong>
To mark text/s as a very important note, use <STRONG> and <?
STRONG> tags.
Most browsers tend to display strongly emphasized text in boldface.
EG. <P>Say it with <STRONG>emphasis </STRONG></P>
<CITE>citation</CITE>
To insert a citation- give credit for a short quotation in the
body of the document.

PREFORMATTED TEXT
Preformatted text allows you to break away from the normal rules of HTML
and quickly specify exactly how a section of text will appear in the reader’s
Web browser.
When you’re using preformatted text, there is no need to use the HTML
markup tags.
The text will appear exactly as you’ve typed it, complete with spaces, line
breaks, and empty lines.
Preformatted text is always displayed in a monospaced, fixed width font.
 The PRE tag ( stands for preformatted), consists of the beginning and
ending tags<PRE> and </PRE>, allows you to format the text the way you
want it.
Font Element
<Font>tag lets you change the size, style, and color of text.
It must be used like any other physical or logical style tag for changing
the appearance of a short segment of text.
<FONT> Function: Set the font size for text.
Attributes: COLOR ( extension), FACE ( Internet Explorer) & size
( Extension)
End tag: </FONT>, always used
EG:
<FONT SIZE=5 COLOR=“Purple”> This will be big and purple.</FONT>
FACE ATTRIBUTE
The Font face displayed by the browser depends on which fonts are
available on the individual user’s system.
The browser parses the list of font names, one after the other, until it
matches one with a font name supported by the user’s system.
If none match, the text display defaults to the font style set by the user
in the browser’s Preferences.
EG.
<P>This text is the default font. But, <FONT face=“Braggadocio,
Machine”> heaven only knows</FONT>what font face is this one?<P>
SIZE ATTRIBUTE
The <FONT> tag is also use to change the size of the font
for a character, word, phrase, or on any range of text.
The <FONT>.. </FONT> tags enclose the text, and the size
attribute indicates the size to which the font is to be changed.
The values of SIZE are 1 to 7, with 3 being the default size.
EG.:
<P> Bored with your plain old font? <FONT SIZE=5>Change
it. </FONT></P>

TEXT ALIGNMENT
This is the ability to arrange a block of text such as heading or a
paragraph so that it is aligned against the left margin(left justification-the
default), aligned against the right margin(right justification), or centered.
Use the ALIGN attribute to that HTML element.
ALIGN has three values: LEFT, RIGHT, or CENTER.
Eg.
<H2 ALIGN = LEFT> Who We are</H2>

<H2 ALIGN = RIGHT> Who We Do</H2>
<H2 ALIGN = CENTER>How to reach Us</H2>

SPECIAL CHARS & SYMBOLS
These are not found on the average keyboard that can be inserted using
special character entities.
These special characters are specified in an internationally accepted
character known as ISO-Latin-1 ( ISO-889-1).
They are recognized in HTML as they begin with an ampersand and end
with a semi-colon e.g. &value;
The value will either be an entity name or a standard ASCII character
number.
EG: <P>Web programming © 2009 All Rights Reserved </P>
SPECIAL CHARS & SYMBOLS
OTHER CHARACTER
FORMATTING ELEMENTS
FORMATTING ELEMENTS
WRITING COMMENTS
THANK YOU AND
GOD BLESS

Hypertext Markup Language - Lec1 - Web1

Uploaded by

Document Information

Original Title

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

Hypertext Markup Language - Lec1 - Web1

Uploaded by

Copyright:

Available Formats

HYPERTEXT

Microsoft Word and WordPerfect can also be used to

HTML documents has a file extension .HTML or .HTM

Hyperlink: It serves as a primary way to navigate

<H2 ALIGN = LEFT> Who We are</H2>

You might also like