HTML Style Attribute

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

Note that, styles were 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

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:

Block - level elements

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.

Special Characters

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;

&nbsp; &#160; non-breaking space

(Its there, but
you can't see it!)

Symbols

& &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

Diacritics

Á &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

Image Handling in HTML

Images are the staples of any web designer, so it is very important to understand how to use them
properly. The attributes commonly supported by the IMG element have had some recent additions to
allow Client side Image Maps.

The Image element <IMG….> is used to incorporate in-line graphics (typically icons, images) into an
HTML document. Browsers that cannot render in-line images ignore the Image element unless it
contains the ALT attribute. The <img> tag is empty, which means that it contains attributes only, and
has no closing tag. The image element has the following essential attributes:

Image element Description

attributes

SRC Specify the URL of the image to be displayed

ALT Specify an alternate text for an image/video, if the image cannot be

displayed.

HEIGHT Define the height of a graphics element.

WIDTH Define the width of a graphics element.

ALIGN Specify the alignment of images.

BORDER control the thickness of the border around an image displayed

SRC

SRC is the only mandatory attribute implied as source of image in the <IMG> element. The value of the
SRC attribute tells the browser where to find the image. i.e. the URL of the image to be displayed. The
image source may be a file reference in local machine or a remote url reference.

<IMG SRC ="du.gif">

<IMG SRC ="www.w3schools.com/images/w3schools_green.jpg">

ALT

This attribute allows the setting of text as an alternative to the graphic (image/video) for rendering in
non-graphical environments, or when the user has de-activated the auto-loading of images. Alternate
text should be provided by the browser whenever the graphic is not rendered.
<IMG SRC="triangle.gif" ALT="Warning:">

WIDTH and HEIGHT

The HEIGHT and WIDTH attributes are used to define the height and width of the image, rather than
letting the browser compute the size, which can significantly speed up display of the document text.

<IMG SRC="sunset.gif" HEIGHT="50" WIDTH="100">

Above we have defined the src, height and width attributes. By informing the browser of the image
dimensions it knows to set aside a place for that image. Without defining an image's dimensions your
site may load poorly; text and other images will be moved around when the browser finally figures out
how big the picture is supposed to be and then makes room for the picture.

Align

The ALIGN attribute accepts the values left, right, top, texttop, middle, absmiddle, baseline, bottom,
and absbottom, which specifies the alignment of the image. These attribute values to the ALIGN option
require some explanation. First, the values "left" and "right". Images with those alignments are a
floating image type.

ALIGN=left will align the image on the left hand edge of the browser display window and subsequent
text will wrap around the right hand side of that image.

ALIGN=right will align the image on the right hand edge of the browser display window and subsequent
text will wrap around the left hand side of that image.

Image Wrap Around Example

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image
alignment works.

The image will appear along the right hand side of the paragraph. As you can see this is very nice
for adding a little eye candy that relates to the specified paragraph. If we were talking about
beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's
rather a waste, isn't it?

This is the third paragraph that appears below the paragraph with the image!
The use of floating images and wrap around text can cause some formatting problems. Using <BR
CLEAR=left|right|all> is recommended to achieve the desired page formatting effect.

 ALIGN=top allows any text following the image to align itself with the top of the tallest item in
the line. That is, the top of the image.
 ALIGN=texttop allows any text following the image to align itself with the top of the tallest text
in the line (this is usually but not always the same as ALIGN=top).
 ALIGN=middle aligns the baseline of the current line with the middle of the image.
 ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
 ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
 ALIGN=bottom aligns the bottom of the image with the baseline of the current line.
 ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

Border

This lets the document author control the thickness of the border around an image displayed. It is useful
is the image is to be a hyperlink, in that the BORDER can be set to 0 to avoid the display of the standard
blue hypertext link border.

Inserting images into an HTML document

<html>

<body>

Code <p>An image from another folder:</p>

<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"

/>

<p>An image from W3Schools:</p>

<img src="http://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" width="104" height="142" />

</body>

</html>

An image from another folder:

 An image from W3Schools:
Result

Aligning an image within

hin the text

<html>

<body>

Code <p>An image

<img src="smiley.gif" alt="Smiley face" align="bottom" width="32"

height="32" />

with align="bottom".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="middle" width="32"

height="32" />

with align="middle".</p>
ign="middle".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />

with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

An image before
efore the text.</p>
 <p>An image after the text.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

</body>

</html>

An image with align="bottom".

Result

An image with align="middle".

An image with align="top".

Tip: align="bottom" is default!

An image before the text.

An image after the text.

Floating an image to the

he left or right of a paragraph

<html>

<body>

Code <p>

<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />

A paragraph with an image. The align attribute of the image is set to "left". The
image will float to the left of this text.

</p>

<p>

<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />

 A paragraph with an image. The align attribute of the image is set to "right". The
image will float to the right of this text.

</p>

</body>

</html>

Result

Links and Anchors

The web got its spidery name from the plentiful connections between web sites called links. Text,
Images, and Forms may be used to create these links called hyperlinks that enable one to jump to a new
document or a new section within the current document. Links are specified in HTML using the anchor
<A> element. The <A>…</A> tag can be used in two ways:

To create a link to another document, by using the href attribute

To create a bookmark inside a document, by using the name attribute

These connections are made using anchor tags to create links. In its most basic form, this element needs
two pieces of information: the URL of the target resource page, and the document content or object
needed to activate the hyperlink. Assigning a URL value to an <a> tag's href attribute specifies the target
resource like so: <a href="url">Link text</a>. For example, to link to Library of Congress

Ex: Anchor with href attributes

Code Output

<html> Library of Congress

<body>
<a href=http://www.loc.gov.> Library of Congress </a>
</body>
</html>
The <a> element has many possible attributes besides href. They are as shown in the following table
and have been discussed in the following sections:

Attribute Possible Description

Name Value

HREF URL Sets the URL of the destination object for the anchor.

NAME Text Names the anchor so that it can be a target of another anchor or
script. Traditional HTML superceded by id.

ID Text Identifies the anchor for target by another anchor, style sheet access,
and scripting exposure. HTML 4 or XHTML attribute.

TARGET A frame name Defines the frame or window destination of the link.

TITLE Text Sets advisory text.

REL Text Defines the relationship of the object being linked to.

REV Text Defines the relationship of the current object to the object being
linked to. In short, rev defines the reverse relationship.

HREF

Abbreviated from Hypertext Reference used to hypertext link to another document or URL

<a href=http://www.loc.gov.> Library of Congress </a>

Hypertext references can be Internal, Local, or Global

Reference Description Example Code

Type

Internal Links to anchors on the current page. Usually uses name href="#anchorname"
attribute.

Local Links to other pages within your domain. it refers to href="../pics/picturefile.jpg"

specific page at the root or subdirectories. In coding the
use “..” for root and “/” for subdirectories followed by
file name.

Global Links to other domains outside of your site e.g. URL of href="http://www.tizag.com/"
specific site.
NAME

The name attribute specifies the name of an anchor. The NAME attribute allows the anchor to be the
target of a link. The value of the NAME attribute is an identifier for the anchor, which may be any
arbitrary string but must be unique within the HTML document. The name attribute is used to create a
bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible
to the reader.

A named anchor inside an HTML document can be defined as:

<a name="tips">Useful Tips Section</a>

Then create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>

ID

For providing more facilities in programming, the ID attribute can be used like the name attribute. The syntax
and reference is follows:

To define ID in anchor:

<a id= “chap1”> HTTP</a>

To define ID and name in the same anchor:

<a id= “chap1” name= “HTTP”> HTTP</a>

Then create a link to the ID in the href attribute:

<a href= “#chap1”> HTTP</a>

TARGET

The target attribute is used in conjunction with frames. To target a link so that the result loads in a
particular frame or window, the target attribute is added to an <a> tag. e.g.

<a href="http://www.yahoo.com/" target="display_frame">Yahoo</a> loads the object referenced

by the URL into the frame named "display_frame". The target attribute also accepts special values:
_blank, _self, _parent, and _top.
 Opens new page in a new browser window
_blank"

Loads the new page in current window

_self"

Loads new page into a frame that is superior to where the link lies
_parent"

_top" Loads new page into the current browser window, canceling all frames

TITLE

The TITLE attribute is informational only. If present, the TITLE attribute provides the title of the
document whose address is given by the HREF attribute. The following code fragment provides the title
information while move pointer on the link “staff”.

<a href="staff/index.html" title="Resumes and information about our staff">Staff</a>

REL

The REL attribute gives the relationship(s) described by the hypertext link from the anchor to the
target. The value is a comma-separated list of relationship values, which will have been registered by the
HTML registration authority. The REL attribute is only used when the HREF attribute is present.

Using an image as a link

<html>

<body>

<p>Create a link of an image:

Code <a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

<p>No border around the image, but still a link:

<a href="default.asp">
 <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

</body>

</html>

Create a link off an image:

Result

No border around the image, but still a link:

Linking to a mail message (will only work

w if you have mail installed)

<html>

<body>

<p>

Code This is an email link:

<a href="mailto:[email protected]?Subject=Hello%20again">

Send Mail</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the
browser will display the text properly.

</p>

</body>

</html>

This is an email link: Send Mail

Result Note: Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly.
Html download link

Code <a href="http://www.tizag.com/pics/htmlT/blanktext.zip">Text Document</a>

Result Text Document

Html- default links base

Use the <base> tag in the head element to set a default URL for all links on a page to go to. It's always a
good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set
your base to your home page.

<head>
<base href="http://www.tizag.com/">
</head>

Images as Buttons

One of the most important aspects of images is how they can be combined with the a element to create
buttons. To make an image "pressable," simply enclose it within an anchor.

<a href="http://www.univdhaka.edu"><img src="du.gif"

alt="Dhaka University" /></a>