Intro To HTML

HTML in Web
Design
Prepared by:
Aimhee Martinez- Santos

What is HTML?
• HTML is a language for describing web
pages.
• HTML stands for Hyper Text Markup
Language
• HTML is not a programming language,
it is a markup language
• A markup language is a set of markup
tags
• HTML uses markup tags to describe
web pages
HTML Tags
• HTML markup tags are usually called
HTML tags
• HTML tags are keywords surrounded by
angle brackets like <html>
• HTML tags normally come in pairs like
<b> and </b>
• The first tag in a pair is the start tag,
the second tag is the end tag
• Start and end tags are also called
opening tags and closing tags.
HTML Documents
• HTML Documents = Web Pages
• HTML documents describe web
pages
• HTML documents contain HTML
tags and plain text
• HTML documents are also called
web pages
Example
Simple HTML Example Explained
<html> • The text between <html>
<body> and </html> describes the
web page
<h1>My First • The text between <body>
Heading</h1> and </body> is the visible
page content
<p>My first • The text between <h1> and
paragraph</p> </h1> is displayed as a
heading
</body>
• The text between <p> and
</html>
</p> is displayed as a
paragraph
Document Structure Tags
Opening Closing Attribute Description
Tag Tag
<HTML> </HTML> Identifies document as

HTML
<HEAD> </HEAD> Document Head contains
Title Tag
<TITLE> </TITLE> Title of Document
<BODY> </BODY> Contents of Document

Formatting Tags- BASIC
Opening Tag Closing Tag Attribute Description
<BODY> </BODY> Contents of Document
BGCOLOR="#color Background Color

code"
BACKGROUND="... .gif Background Image

"
TEXT="#color code" Text Color
<CENTER </CENTER> Centers Text and

Images
>
<H1> to <H6> </H1>to</H6> Heading
ALIGN="Left, Center, Align Text

Right"
Formatting Tags
<BASEFONT specify the overall font for your page :

SIZE="1 to7"> place <basefont> tag at the beginning of
the <body> section.
New Paragraph
<P> </P>
ALIGN="Left, Align Text
Center, Right"
Line Break
<BR>
Formatting Tags
Horizontal Rule
<HR>
ALIGN="Left, Align Text- 3 choices
Center, Right"
Thickness of Horizontal
SIZE = "number" Rule
WIDTH = % of Document to Span

"number %"
Removes Shading
NOSHADE
FONT tags
Section of Text
<FONT> </FONT>
COLOR="#color Font Color
code"
SIZE="number" Font Size
<B> </B> Bold Text

<U> <U> Underline Text
<I> </I> Italic Text

FONT tags
</STRIKE> Strikeout
<STRIKE>
<BLOCKQUOTE> </BLOCKQUOTE> Separates Text
</SUB>
<SUB> Superscript Text SUB
</SUP>
<SUP> Subscript Text SUP
HTML Headings
• Headings are defined with the <h1> to <h6>
tags.
 <h1> defines the largest heading.
 <h6> defines the smallest heading
•Use HTML headings for headings only. Don't use
headings to make text BIG or bold.
•Search engines use your headings to index the
structure and content of your web pages.
HTML Styles
The purpose of the style attribute is:
To provide a common way to style all HTML elements.
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 by in separate style sheets (CSS
files).
You can learn using styles with CSS
Examples:
1. style="background-color:yellow"
2. style="font-size:10px"
3. style="font-family:Times"
4. style="text-align:center"
Definition LISTS
Optional list header(LH), followed by one or
more terms(DT) and definitions(DD).
A definition list is a list of terms and corres-
ponding definitions.
Definition lists are typically formatted with the
term on the left with the definition following on
the right or on the next line.
The definition text is typically indented with
respect to the term.
Definition LISTS
The opening list tag must be <DL>. It is followed
by an optional list header (<LH>caption</LH>)
and then by term names (<DT>) and definitions
(<DD>).
For example:
<DL> <LH>My Favorites</LH>
<DT>Song<dd>This is My LIFE!!!<br> I love this one…
<DT>Author<dd>Carole Mortimer
<p>WOW!!! </DL>
LISTS
List tags define lists of elements that may
be displayed as bulleted or numbered
lists, glossary entries with definitions,
and menu formats. All of these layouts
are useful when organizing lists of items
or elements to improve their readability.
Unordered LISTS
An unordered list is a list of items. The list items
are marked with bullets (typically small black
circles).
An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
<html><body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body></html>
Ordered LISTS
Ordered Lists
An ordered list is also a list of items. The
list items are marked with numbers.
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Types of Ordered LISTS
<h4>Numbered list:</h4>
<ol> <h4>Roman numbers list:</h4>
<li>Apples</li>
<ol type="I">
<li>Bananas</li>
<li>Lemons</li> <li>Apples</li>
<li>Oranges</li> <li>Bananas</li>
</ol> <li>Lemons</li>
<li>Oranges</li>
<h4>Letters list:</h4>
</ol>
<ol type="A">
<li>Apples</li>
<li>Bananas</li> <h4>Lowercase Roman numbers
<li>Lemons</li> list:</h4>
<li>Oranges</li> <ol type="i">
</ol>
<li>Apples</li>
<h4>Lowercase letters list:</h4> <li>Bananas</li>
<ol type="a"> <li>Lemons</li>
<li>Apples</li> <li>Oranges</li>
<li>Bananas</li> </ol>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Types of Unordered LISTS
<h4>Disc bullets list:</h4> <h4>Square bullets
<ul type="disc“ >
<li>Apples</li>
list:</h4>
<li>Bananas</li> <ul type="square">
<li>Lemons</li> <li>Apples</li>
<li>Oranges</li>
</ul>
<li>Bananas</li>
<li>Lemons</li>
<h4>Circle bullets list:</h4> <li>Oranges</li>
<ul type="circle“ > </ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

The Graphics Images
The Image Tag and the SRC Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains
attributes only and it has no closing tag.
To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display on your
page.
The syntax of defining an image:
<img src="url"> The URL points to the location where

the image is stored. The browser puts the image where the
image tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first
paragraph, then the image, and then the second paragraph.
Attributes of Images
<p> <p>
An image
An image
<img src=”url/inage“
align="bottom" width="100" <img src ="/images/xhtml.gif"
height="50"> in the text align="top" width="100"
</p> height="50">
<p> in the text
An image </p>
<img src ="/images/xhtml.gif“
align="middle" width="100"
height="50"> in the text
</p>
Using Hyperlinks
 Link Tags: <A> ... </A>
Links on web pages are created using the anchor
<A> tag. These links can point to a different
document on the Internet or to some anchor on the
same page. Documents linked in this manner need
not be HTML (or PHP/ASP) files. You can place a link
to any kind of file, like in PPT or DOC files.
• Style Tip
Use hyperlinks liberally throughout your HTML pages
to create links to related resources and to
information on your own site as well as other
sites.
Links in Files
HTML documents contain certain 'hot spots'. These hot spots
provide the links to other documents/files on the Internet.
Lets look at this tag in detail.

<A HREF=http://www.webdevelopersnotes.com> Takes you to
Webdevelopersnotes.com's main page </A> is displayed as
This will take you to Webdevelopersnotes.com's main page.
 Anchor tags have a starting (<A>) and an (</A>) ending

tag.
 The HREF attribute is required and takes the URL address of
the destination page as value. Without this attribute-value, no
links will be created.
 Some text is enclosed between the anchor tags. This text
serves as the hot spot. When a visitor clicks on this 'hot spot',
he or she will be transported to the target page.
The Anchor Tag and
Hyperlinks
Hyperlinks are the colored, underlined words you find on a web
document. Clicking on these words will send you to a predefined
location on the same document, to another page on the same server
or to a location on another server.
Hyperlinks are created using the anchor tag.
<a command="target">Highlighted Text</a>
Commands for this tag can be:
• href - Signifies a hyperlink.
• name -Signifies a specified location on page.
• The anchor tag requires a closing tag- </a>
Links in Files
Linking in the same document
We employ the <A> tag in this case too, but its format changes slightly.
Instead of a URL in the HREF attribute, we use names.
First, an anchor is set at the desired place in the document using the
NAME attribute. In this case :
<A NAME="top"></A>
The value of NAME attribute can be anything you want use. Also note,
that it is not necessary to enclose any text or other HTML element if the
anchor tag is used in this manner.
8.After setting an anchor with its NAME attribute you employ another set
of <A> to make a link that points to it:
<A HREF="#top" CLASS="text">Click here to go to the
top</A>.
•On clicking this link, you will be taken to the top of the page where you
have put the anchor.
•The HREF attribute takes the value of the NAME attribute mentioned
before as its value; the name is prefixed with a # symbol.
Links in Files
a href Remo vin g the Un der lin e
Text links are defined with the The default underline can be removed from
the hyperlink using style sheets. Though,
hyperlink reference anchor. you should not remove the underline from
It looks like this in your code: links within your document body, there are
<a times when this practice is acceptable.
href="target">Destination</a
> The code:
a {text-decoration : none}
Lo cat ion on Sam e Si te
To link to another page on the same
site the code would be:
<a href="samesite.htm">
Another Page</a>
To l ink t o an ot her site:

Note: http:// is required.
<a
href="http://www.destination.
com/
Links in Files
Rollover Effect
You've seen hyperlinks that change colors when the
mouse is placed over them. We use this effect on links.
The code for assigning colors to the different states of
the hyperlink is shown below.
 It can be placed in a style sheet in the head section of
your document.
Change the specified colors to produce your own version
of rollovers.
a:link{color :#000000}
a:visted{color :#BFBFBF }
a:hover{color :#DFDFDF }
HTML Styles
The purpose of the HTML Style
style attribute is:
Examples
• To provide a common
way to style all HTML
elements.
style= "background-
color:yellow"
• Styles was introduced
style= “font-size:10px"
with HTML 4, as the new
and preferred way to style= "font-family:Times"
style HTML elements. style= "text-align:center"
With HTML styles, styles
can be added to HTML
elements directly by
using the style attribute,
or indirectly by in
separate style sheets
(CSS files).
Color Values
• HTML colors are defined using a
hexadecimal (hex) notation for the
combination of Red, Green, and Blue
color values (RGB).
• The lowest value that can be given to one
of the light sources is 0 (hex 00). The
highest value is 255 (hex FF).
• Hex values are written as 3 double digit
numbers, starting with a # sign.
Color Values
Color Color HEX Color RGB

#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Uses of Color Values
• The COLOR Values can be used
with:
2.<body background=“#00ff00”>
3. <font color= “#FF00FF”>
4.In table cells, <td background =
“#aa0099”>

Intro To HTML

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

Intro To HTML

Uploaded by

Copyright:

Available Formats

HTML in Web

Aimhee Martinez- Santos

<HTML> </HTML> Identifies document as

<BODY> </BODY> Contents of Document

<BODY> </BODY> Contents of Document

BGCOLOR="#color Background Color

BACKGROUND="... .gif Background Image

TEXT="#color code" Text Color

<CENTER </CENTER> Centers Text and

ALIGN="Left, Center, Align Text

<BASEFONT specify the overall font for your page :

WIDTH = % of Document to Span

SIZE="number" Font Size

<B> </B> Bold Text

<U> <U> Underline Text

<I> </I> Italic Text

<BLOCKQUOTE> </BLOCKQUOTE> Separates Text

<img src="url"> The URL points to the location where

Lets look at this tag in detail.

 Anchor tags have a starting (<A>) and an (</A>) ending

To l ink t o an ot her site:

Color Color HEX Color RGB

You might also like