HTML lesson 2

Document Sample
HTML lesson 2 Powered By Docstoc
					                                             Lecture 2

                                Basic Text formatting
Block formatting elements are used for the formatting of whole blocks of text within an HTML
document, rather than single characters. They should all (if present) be within the body of the
document (that is, within the <BODY>...</BODY> elements). The essential block formatting
elements are:

Text Formatting Elements                            Description
<Hx>...</Hx>                                        Format six levels of heading

<P>...</P>                                          Specify what text constitutes a paragraph and it's


<BR>                                                Force a line break

<ADDRESS>...</ADDRESS>                              Format an address section

<BASEFONT SIZE=...>                                 Specifying the 'default' font size for the document

<BLOCKQUOTE>...</BLOCKQUOTE>                        To quote text from another source

<CENTER>...</CENTER>                                Centering text on the page

<COMMENT>...</COMMENT>                              To enclose text as a comment

<DFN>...</DFN>                                      Defining Instance

<DIV>...</DIV>                                      Allow centering, or left/right justification of text

<FONT ...>...</FONT>                                Setting/changing the font size, color and type

<HR>                                                Renders a sizeable hard line on the page

<LISTING>...</LISTING>                              Text formatting

<MARQUEE>                                           Highlighted scrolling text

<NOBR>                                              Specifying that words aren't to be broken

<PLAINTEXT>                                         For text formatting

<PRE>...</PRE>                                      Use text already formatted

<WBR>                                               Specifying that a word is to be broken if necessary

<XMP>...</XMP>                                      Text formatting
Header tag: <Hx>...</Hx>

HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks
before and after, and white space necessary to render the heading. The highest level of headings is
<H1>, followed by <H2>...<H6>.

   <H1>...</H1>     Bold, very-large font, centered. One or two blank lines above and below.

   <H2>...</H2>    Bold, large font, flush-left. One or two blank lines above and below.

   <H3>...</H3>  Italic, large font, slightly indented from the left margin. One or two blank lines
   above and below.

   <H4>...</H4>    Bold, normal font, indented more than H3. One blank line above and below.

   <H5>...</H5>    Italic, normal font, indented as H4. One blank line above.

   <H6>...</H6>    Bold, indented same as normal text, more than H5. One blank line above.

Code for Heading                                     Appearance at the browser


                                                     This is heading 1
                                                     This is heading 2
<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
                                                     This is heading 3

<h3>This is heading 3</h3>                           This is heading 4

<h4>This is heading 4</h4>                           This is heading 5

<h5>This is heading 5</h5>                           This is heading 6
<h6>This is heading 6</h6>



Paragraphs: <P>...</P>

The paragraph element indicates a paragraph of text. No specification has ever attempted to define
exactly the indentation of paragraph blocks and this may be a function of other elements, style sheets,
and so on. One can also format paragraph with align elements. HTML paragraphs are defined with
the <p> tag.
Code for paragraph                                            Appearance at the browser

<html>                                                        In coding HTML tags you can use capital
                                                              letters, lower case, or a combination of both.
                                                              For easy editing it is recommended that you
                                                              use capital letters for most purposes and
                                                              lower case letters for special cases.
<p>In coding HTML tags you can use capital letters,
lower case, or a combination of both. For easy editing        Browsers treat white spaces in HTML
it is recommended that you use capital letters for most       documents as a single blank space; defining
purposes and lower case letters for special cases.</p>        the layout of your web page with the
                                                              necessary white space requires the use of the
<p>Browsers treat white spaces in HTML documents
as a single blank space; defining the layout of your
                                                              appropriate tags
web page with the necessary white space requires the
use of the appropriate tags. </p>



The “align” attribute
The align attribute indicates whether the heading appears to the left, center, or right of the page (the
default is the left). It can take the three values discussed in the table that follows.

Value      Meaning                                                      Example

left       The heading is displayed to the left of the browser          < h1 align=”left” > Left-Aligned Heading < /h1 >
           window (or other containing element if it is nested within
           another element). This is the default value if the align     < p > This heading uses the align attribute with a
           attribute is not used.                                       value of left. < /p >

center*    The heading is displayed in the center of the browser        < h1 align=”center” > Centered Heading < /h1 >
           window (or other containing element if it is nested within
           another element).                                            < p > This heading uses the align attribute with a
                                                                        value of center. < /p >

right      The heading is displayed to the right of the browser         < h1 align=”right” > Right-Aligned Heading < /h1 >
           window (or other containing element if it is nested
           within another element).                                     < p > This heading uses the align attribute with a
                                                                        value of right. < /p >

* <center></center) is also used as separate tag to denote the same.
Line Breaks Using the < br / > Element
The line break element specifies that a new line must be started at the given point.

Mary had a little lamb<BR/>
Its fleece was white as snow<BR/>
Everywhere that Mary went<BR/>

She was followed by a little lamb.


<HR> Element - Inserting a      Horizontal line

A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or
equivalent graphic. The <HR> element specifies different horizontal rules.

        <HR ALIGN=left|right|center> set to display centered, left, or right aligned.

        <HR COLOR=name|#rrggbb>          specifying of the hard rule color

        <HR NOSHADE>                     specify that the horizontal rule should not be shaded at all.

        <HR SIZE=number>                 specifies how thick the rule will be, in pixels

        <HR WIDTH=number|percent>        specify an exact width in pixels

Code                                            Appearance

<h1>Using Horizontal Line </h1>

<HR ALIGN=”left”>

<HR COLOR=”blue”>


<HR SIZE=”1”>

<HR WIDTH=”50%”>
Presentational Elements
These are used to format the text in the page like word processor. In the web page they are used to
make text bold, italic, or underlined etc. The tags elements for presentation are < b > , < i > , < u > , <
s > , and < tt > etc.

i. The < b > Element

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

The following word uses a <b> bold</b> typeface. The contents of a < b > element will be displayed
in the same way as the contents of the < strong >.

ii. The < i > Element

The content of an < i > element is displayed in italicized text, like the word “italic” here. The
following word uses an <i>italic</i> typeface. It can also be performed using <em> </em> element.

iii. The < u > Element (Deprecated)

The content of a < u > element is underlined with a simple line. The following word would be < u >
underlined < /u >. The < u > element is deprecated, although it is still supported by current browsers.

iv. The < s > and < strike > Elements (deprecate)

The content of an < s > or < strike > element is displayed with a strikethrough, which is a thin line

through the text ( < s > is just the abbreviated form of < strike > ). The following word would have a <
s > strikethrough < /s > . Both the < s > and < strike > elements are deprecated, although they are still
supported by current browsers.

v. The < tt > Element

The content of a < tt > element is written in monospaced font (like that of a teletype machine). The
following word will appear in a < tt > monospaced < /tt > font.

vi. < sup > Element

The content of a < sup > element is written in superscript; it is displayed half a character’s height
above the other characters and is also often slightly smaller than the text surrounding it.

Written on the 31 < sup > st < /sup > February. The < sup > element is especially helpful in adding
exponential values to equations, and adding the st , nd , rd , and th suffixes to numbers such as dates.

vii. The < sub > Element

The content of a < sub > element is written in subscript; it is displayed half a character’s height
beneath the other characters and is also often slightly smaller than the text surrounding it. The < sub >
element is particularly helpful to create footnotes.
viii. The < big > Element

The following word should be < big > bigger < /big > than those around it. When this element is used,
it is possible to nest several < big > elements inside one another, and the content of each will get one
size larger for each element.

ix. The < small > Element

The < small > element is the opposite of the < big > element, and its contents are displayed one font
size smaller than the rest of the text surrounding it. The following word should be < small > smaller <
/small > than those around it.


HTML Code                                        Appearance in the browser



<h1>This is Presentational Elements</h1>

<p><i>This is an italic paragraph.</i> </p>

<p><b>This is a bold or strong

<p><u>This is a underlined paragraph.</u> </p>

<p><s>This is a striked paragraph.</s> </p>

<p><tt>This is teletype paragraph.</tt> </p>

<p>This is 31<sup>st</sup> Jamuary.</p>

<p>This is H<sub>2</sub>O i.e. Warer.</p>

<p><big>This is big font.</i> </p>

<p><small>This is small font.</small> </p>


Phrase Elements
Some of the elements in this section are displayed in a manner similar to the Presentational Elements < b > , < i > , < pre > ,
and < tt > that you have just read about, but the following elements are not just for presentational purposes; they also
describe something about their content.

<em> and < strong > for     emphasis

< cite > ,   and < q > for quotations and citations

< abbr > , < acronym > ,   and < dfn > for abbreviations, acronyms, and key terms

< address > for    addresses

The < em > ... </em> Element Adds Emphasis

The content of an < em > element is intended to be a point of emphasis in your document,
and it is usually displayed in italicized text. The kind of emphasis intended is on words such
as “must” in the following sentence: <p> You <em> must </em> remember to close elements
in XHTML. </p>

The < acronym > Element Is for Acronym Use

The < acronym > element allows to show the acronym and indicates the elaboration when pointing to
the acronym. For example:

Use of Acronym

HTML Code                                                  Appearance in the browser



<acronym title = "Extensible Hypertext Markup
Language"> XHTML </acronym>



The < q > Element Is for Short Quotations

The < q > element is intended to be used when you want to add a quote within a sentence, rather than
as an indented block on its own. For example:

The < cite > Element Is for Citations

If you are quoting a text, you can indicate the source by placing it between an opening < cite > tag and

closing < /cite > tag. For example:
HTML Code                                         Appearance in the browser

<H2>Use of cite</H2>


This chapter is taken from <cite> Beginning Web
Development </cite>


<H2>Use of quotation </h2>

<p>Teacher said, <q> Close the book. </q> </p>

Address <ADDRESS>...</ADDRESS>

As its name suggests, the <ADDRESS>...</ADDRESS> element can be used to denote
information such as addresses, authorship credits and so on. Typically, an Address is
rendered in an italic typeface and may be indented, though the actual implementation is at the
discretion of the browser. The <ADDRESS> element implies a paragraph break before and
after, as shown in the following example:

Use of Address tag.

HTML Code                                    Appearance in the browser




<strong>Dr. Saiful Alam</strong><BR>

Associate Professor<BR>

Dept of Information Science<BR>

University of Dhaka<BR>

Dhaka 1000<BR>





Font tag supports different types of font, size, colors etc. its attributes are:

SIZE= “value”

FACE= “name”

COLOR = “color name”

Code                                         Appearance in Browser



<font size="5" face="arial" color="red">

This paragraph is in Arial, size 5, and in
red text color.




<font size="3" face="verdana"

This paragraph is in Verdana, size 3, and
in blue text color.



<p>The font element is deprecated in
HTML 4. Use CSS instead!</p>


NB: The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations
and suggested to include in CSS

Preformatted text <PRE>...</PRE>

It allows the browser to show as formatted between <pre> and </pre>. For example

HTML Code                                  Appearance in the browser

This is P R E F O R M A T T E D





SPACES       are ok! So are



HTML Style Attribute

The purpose of the style attribute is to provide a common way to style all HTML elements.

Note that, Styles was introduced with HTML 4, as the new and preferred way to style HTML
elements. With HTML styles, styles can be added to HTML elements directly by using the style
attribute, or indirectly in separate style sheets (CSS files). However, for the learning purpose, we

aspire to mention the tags and attributes and details are further discussed in the CSS section. It is
recommended to avoid using deprecated tags and attributes in future versions of HTML and XHTML.

Tags                                          Description

<center>                                      Defines centered content

<font> and <basefont>                         Defines HTML fonts

<s> and <strike>                              Defines strikethrough text

<u>                                           Defines underlined text

Attributes                                    Description
Align                                       Defines the alignment of text

Bgcolor                                     Defines the background color

Color                                       Defines the text color


The following entity names are used in HTML, always prefixed by ampersand (&) and followed by a
semicolon. They represent particular graphic characters which have special meanings in places in the
markup, or may not be part of the character set available to the writer.

                  HTML Entity
Punctuation                         ISO code Name or meaning

          –       &ndash;           &#8211; en dash

        —         &mdash;           &#8212; em dash

          ¡       &iexcl;           &#161; inverted exclamation

          ¿       &iquest;          &#191; inverted question mark

          "       &quot;            &#34;      quotation mark

          “       &ldquo;           &#8220; left double curly quote

          ”       &rdquo;           &#8221; right double curly quote

          '                         &#39;      apostrophe (single quote)

          ‘       &lsquo;           &#8216; left single curly quote

          ’       &rsquo;           &#8217; right single curly quote

          «       &laquo;           &#171;
                                               guillemets (used as quotation marks in some
                                               languages, e.g., French)
          »       &raquo;           &#187;

(Its there, but you &nbsp;          &#160; non-breaking space
   can't see it!)

    &        &amp;      &#38;    ampersand

    ¢        &cent;     &#162; cent

    ©        &copy;     &#169; copyright

    ÷        &divide;   &#247; divide

    >        &gt;       &#62;    greater than

    <        &lt;       &#60;    less than

    µ        &micro;    &#181; micron

    ·        &middot;   &#183; middle dot

    ¶        &para;     &#182; pilcrow (paragraph sign)

    ±        &plusmn;   &#177; plus/minus

    €        &euro;     &#8364; Euro

    £        &pound;    &#163; British Pound Sterling

    ®        &reg;      &#174; registered

    §        &sect;     &#167; section

   ™         &trade;    &#153; trademark

    ¥        &yen;      &#165; Japanese Yen


    á        &aacute;   &#225; lower-case "a" with acute accent

    Á        &Aacute;   &#193; upper-case "A" with acute accent

    à        &agrave;   &#224; lower-case "a" with grave accent

    À        &Agrave;   &#192; upper-case "A" with grave accent
â   &acirc;    &#226; lower-case "a" with circumflex

   &Acirc;    &#194; upper-case "A" with circumflex

å   &aring;    &#229; lower-case "a" with ring

Å   &Aring;    &#197; upper-case "A" with ring

ã   &atilde;   &#227; lower-case "a" with tilde

à  &Atilde;   &#195; upper-case "A" with tilde

ä   &auml;     &#228; lower-case "a" with diaeresis/umlaut

Ä   &Auml;     &#196; upper-case "A" with diaeresis/umlaut

æ   &aelig;    &#230; lower-case "ae" ligature

Æ   &AElig;    &#198; upper-case "AE" ligature

ç   &ccedil;   &#231; lower-case "c" with cedilla

Ç   &Ccedil;   &#199; upper-case "C" with cedilla

é   &eacute;   &#233; lower-case "e" with acute accent

É   &Eacute;   &#201; upper-case "E" with acute accent

è   &egrave;   &#232; lower-case "e" with grave accent

È   &Egrave;   &#200; upper-case "E" with grave accent

ê   &ecirc;    &#234; lower-case "e" with circumflex
Ê   &Ecirc;    &#202; upper-case "E" with circumflex

ë   &euml;     &#235; lower-case "e" with diaeresis/umlaut

Ë   &Euml;     &#203; upper-case "E" with diaeresis/umlaut

í   &iacute;   &#237; lower-case "i" with acute accent

Í   &Iacute;   &#205; upper-case "I" with acute accent

ì   &igrave;   &#236; lower-case "i" with grave accent

Ì   &Igrave;   &#204; upper-case "I" with grave accent

î   &icirc;    &#238; lower-case "i" with circumflex

Î   &Icirc;    &#206; upper-case "I" with circumflex

ï   &iuml;     &#239; lower-case "i" with diaeresis/umlaut

Ï   &Iuml;     &#207; upper-case "I" with diaeresis/umlaut

ñ   &ntilde;   &#241; lower-case "n" with tilde

Ñ   &Ntilde;   &#209; upper-case "N" with tilde

ó   &oacute;   &#243; lower-case "o" with acute accent

Ó   &Oacute;   &#211; upper-case "O" with acute accent

ò   &ograve;   &#242; lower-case "o" with grave accent
Ò   &Ograve;   &#210; upper-case "O" with grave accent

ô   &ocirc;    &#244; lower-case "o" with circumflex

Ô   &Ocirc;    &#212; upper-case "O" with circumflex

ø   &oslash;   &#248; lower-case "o" with slash

Ø   &Oslash;   &#216; upper-case "O" with slash

õ   &otilde;   &#245; lower-case "o" with tilde

Õ   &Otilde;   &#213; upper-case "O" with tilde

ö   &ouml;     &#246; lower-case "o" with diaeresis/umlaut

Ö   &Ouml;     &#214; upper-case "O" with diaeresis/umlaut

ß   &szlig;    &#223; ess-tsett

ú   &uacute;   &#250; lower-case "u" with acute accent

Ú   &Uacute;   &#218; upper-case "U" with acute accent

ù   &ugrave;   &#249; lower-case "u" with grave accent

Ù   &Ugrave;   &#217; upper-case "U" with grave accent

û   &ucirc;    &#251; lower-case "u" with circumflex

Û   &Ucirc;    &#219; upper-case "U" with circumflex

ü   &uuml;     &#252; lower-case "u" with diaeresis/umlaut
         Ü         &Uuml;           &#220; upper-case "U" with diaeresis/umlaut

         ÿ         &yuml;           &#255; lower-case "y" with diaeresis/umlaut

         ´                          &#180; acute accent with no letter

         `                          &#96;         grave accent/reversed apostrophe with no letter


There are many reasons one can add a list to the pages. Modern HTML has three basic forms of

   i. Unordered lists (<ul>)- which are like lists of bullet points
  ii. which use a sequence of numbers or letters instead of bullet points
 iii. Definition lists (<dl>)- which allow you to specify a term and its definition

Unordered lists (<ul>): An unordered list, signified by <ul> and </ul>, is used for lists of
items in which the ordering is not specific. A browser typically adds a bullet of some sort (a
filled circle, a square, or an empty circle) for each item and indents the list. A type attribute
can be used to set the bullet type for a list. The allowed values for type are disc, circle, or
square. Ex

             < ul type="square">

             < li > Bullet point number one < /li >

             < li > Bullet point number two < /li >

             < li > Bullet point number three < /li >

             < /ul >

Ordered lists (<ol>)- An ordered list, as enclosed by <ol> and </ol>, defines a list in which
order matters. Ordering typically is rendered by a numbering scheme, using Arabic numbers,
letters, or Roman numerals. Ordered lists are suitable for creating simple outlines or step-by-
step instructions because the list items are automatically numbered by the browser. The <ol>
tag has three basic attributes, none of which is required: compact, start, and type. The
compact attribute simply suggests that the browser attempt to compact the list, to use less
space onscreen and most browsers ignore the compact attribute. Each <li> tag can have a
local type attribute set to a, A, i, I, or 1. The <ol> element also has a start attribute that takes
a numeric value to begin the list numbering e.g. <ol type="a" start="10">. Ex.

                <ol type="a" start="10">.

                < li > Point number one < /li >
                 < li > Point number two < /li >

                 < li > Point number three < /li >

                 < /ol >

Definition Lists

The definition list is a special kind of list for providing terms followed by a short text
definition or description for them. Definition lists are contained inside the < dl > element.
The < dl > element then contains alternating < dt > and < dd > elements. The content of the <
dt > element is the term you will be defining. The < dd > element contains the definition of
the previous < dt > element. For example,
   <dd>A useless device used in many HTML examples.</dd>

   <dd>Another useless device used in a few HTML examples.</dd>

Nesting Lists

You can nest lists inside other lists. For example, you might want a numbered list with
separate points corresponding to one of the list items. Each nested list will be numbered
separately unless you specify otherwise using the start attribute. Example:

Code                                                 Appearance

<ol type=”I”>

<li> Item one </li>

<li> Item two </li>

<li> Item three </li>

<li> Item four

<ol type=”i”>

<li> Item 4.1 </li>

<li> Item 4.2 </li>

<li> Item 4.3 </li>


<li> Item Five </li>


Understanding Block and Inline Elements

Now that you have seen many of the elements that can be used to mark up text, it is important
to make an observation about all the elements that live inside the < body > element, because
each one can fall into one of two categories:

  i. Block - level elements
 ii. Inline elements

i. Block - level elements appear on the screen as if they have a carriage return or line break
before and after them. For example, the < p > , < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , <
h6 > , < ul > , < ol > , < dl > , < pre > , < hr / > , < blockquote > , and < address > elements
are all block - level elements. They all start on their own new lines, and anything that follows
them appears on its own new line, too.

ii. Inline- elements can appear within sentences and do not have to appear on new lines

of their own. The < b > , < i > , < u > , < em > , < strong > , < sup > , < sub > , < big > , <
small > , < ins > , < del > , < code > , < cite > , < dfn > , < kbd > , and < var > elements are
all inline elements.

Shared By:
Description: Learn HTML simply