HTML Text Elements
BEGINNING WEB SITE DESIGN
SAINT BENILIDE INTERNATINAL SCHOOL INC.
TR. MHARVIE JANE FERNANDEZ
Objectives
At the end of the lesson, you should be able to:
1 Describe basic text elements.
2 Recognize the sematic text elements.
Structural Tags
<HTML>
These tags enclose the entire Web page document.
</HTML>
<HEAD>
These tags enclose the Head part of the document
</HEAD>
<TITLE>
These tags enclose the title of the document. This text appears in the title bar in the browser and on the
bookmark list if someone bookmarks your web page.
</TITLE>
Sample Structure of a Web Site
<HTML>
<HEAD>
<TITLE> John Q. Public's Web Page </TITLE>
</HEAD>
<BODY>
This is John Public's Webpage!
</BODY>
</HTML>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
► <b> - Bold text
► <strong> - Important text
► <i> - Italic text
► <em> - Emphasized text
► <mark> - Marked text
► <small> - Smaller text
► <del> - Deleted text
► <ins> - Inserted text
► <sub> - Subscript text
► <sup> - Superscript text
Header Tags
Header Tags -- Used for marking sections and subsections in a document.
<H1>Header 1 -- Giant-sized and bold </H1>
<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>
Header Tags (cont.)
H1 = Giant-sized and bold
H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold
Text Formatting Tags
Some basic text formatting styles:
Tag Result
<I> Italics </I> Italics
<B> Bold </B> Bold
<PRE> Preformatted Text </PRE> Preformatted Text
<STRONG> Strong </STRONG> Strong
<ADDRESS> Address </ADDRESS> Address
<CITE> Citations </CITE> Citations
<CODE> Source Code </CODE> Source Code
Breaking Lines and Paragraphs
► <P> text </P>
► Paragraph tag
► Most browsers render (process) this with blank lines between each paragraph
► <BR>
► Line break tag
► Used when the webmaster wants a carriage return but doesn't want a blank line to follow
Example: text a
<p>text a</p>
<p>text b</p> text b
<br>text c
<br>text d text c
text d
Horizontal Rule
The <HR> tag puts a graphical line across the page.
Ex:
Horizontal Rule Attributes:
NOSHADE -- A solid line with no shading
WIDTH="xx%/xx" -- Controls the width of the line. You may specify either
percentage of the width of a page or actual pixel length
SIZE="xx" -- Controls the height of the line. You need to specify the
dimension in pixels.
ALIGN="left/center/right" -- This allows the line to be aligned to the left,
right, or center of the page
More Examples
More Examples
More Examples
More Examples