Sie sind auf Seite 1von 99

HTML

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

Tags, Attributes, and Elements


The basic structure of an HTML document includes

tags, which surround content and apply meaning to


it.
HTML tags are keywords surrounded by angle
brackets like <html>
HTML tags normally come in pairs like <h1> and
</h1>
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

Tags, Attributes, and Elements

Tags
<html>
<head>
<title>web technology</title>
</head>
<body>
Welcome to my web page
</body>
</html>

Tags, Attributes, and Elements


Attributes
Tags can also have attributes, which are extra bits of

information. Attributes appear inside the opening tag and their


their value is always inside quotation marks .
They look something like <tag attribute="value">text</tag>.
<html>
<head>
<title>web technology</title>
</head>
<body bgcolor="yellow" text="red">
Formatting my web page
<font face="comic sans MS" color="blue" size="4"><b>changing
the font</b></font>
</body>
</html>

Tags, Attributes, and Elements


Elements
Tags tend not to do much more than mark the

beginning and end of an element.


Elements are the bits that make up web
pages.
You would say, for example, that everything
that is in-between and includes the <body>
and </body> tags is the body element.
Example <title>Rumple Stiltskin</title>' is a
title element.

<html> Element...</html>
<html> begins and ends each and every web

page.
Its sole purpose is to encapsulate all the
HTML code and describe the HTML
document to the web browser.
One should close our HTML documents with
the corresponding </html> tag at the bottom
of the document.

Paragraphs
If we want text to appear on different lines, we

need to explicitly state that.


The p tag is for paragraph.
<p>This is my first web page</p> <p>How
exciting</p>

Emphasis
You can emphasise text in a paragraph using em

(emphasis) and strong (strong emphasis).


These are two ways of doing pretty much the same
thing,
although traditionally, browsers display em in italics
and strong in bold.

Line breaks
The line-break tag can also be used to

separate lines .
If we want more than one line breaks instead
of the paragraph tag we should use the line
break tag.
Example: <br><br>break tag can give more
than one line break while paragraph tag can
provide only one

Headings
If we have documents with genuine

headings,
then there are HTML tags specifically
designed just for them.
They are h1, h2, h3, h4, h5 and h6,

Headings example

<html>
<head>
<title>web technology</title>
</head>
<body>
<h1>Introduction</h1>
<h2>HTML</h2 >
<h3>DHTML</h3>
<h4>XHTML</h4>
</h5>VBscript</h5>
<h6>JavaScript</h6>
<h7>ASP</h7>
</body>
</html>

Drawing Lines
The tag <hr> draws lines and horizontal rules.
The attributes of <hr> tag are: Align :Aligns line on the browser screen which is by

default aligned to the center.


Align=left :will align the line to the left of screen
Align=right :will align the line to the right of screen
Align= center :will align the line to the center of
screen
Size:Changes the size of the rule.
Width:Sets the width of the rule to a percentage of
available screen width.

Text Styles
Bold:-Displays text in bold face style.The tags

used are <b></b>


Italics:-Displays text in italics.The tags used
are between <I></I>
Underline:-Displays text as underlined.The
tags used are between <U>.</U>
Example:<B><I><U>Welcome to our home
page </U></I></B>

Text Effects
Font tag:-All text specified within the tags <font> and

</font> will appear in the font ,size and color as


specified as the attributes of the tag <font>.
Attributes
Face:Sets the font to the specified font name.
Size:Sets the size of the text.(range 1 to 7)
Color:Sets the color of the text
Example: <font face=comic sans MS size=6
color=red>Welcome to our home page</font>

Lists
There are three types of list;
unordered lists
ordered lists
definition lists.

Unordered Lists
An unordered list or bulleted list starts with

the tag <UL> and </UL>


Each list item starts with the tag <LI>
The attributes with the tag<UL> are: Type=fillround
Type=square

Example UL list
<ul type=fillround>types of memories</ul>
<li>floppy
<li>hard disk
<li>CDROM
</ul>

Ordered lists
Ordered lists or lists with numbering starts

with <OL> and ends with </OL>


Attributes
Type=1:will give counting numbers(1,2)
Type=A will give uppercase letters(A,B,C.)
Type=a will give lowercase letters(a,b,c.)
Type=I:will give uppercase roman numerals
Type=I:will give lowercase roman numerals

Definition list
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt>

(definition term) and <dd> (definition


description)

<dl>

<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Div
The <div> tag acts as a container for the

other tags.
The div element can contain any type of
HTML tags.
They structure the HTML document using
unique divisions that can be identified with
unique ids.

Example

<html>
<head>
<title>Delta engineering company</title>
<h1 align =center>Delta Engineering company pvt ltd</h1>
</head>
<body bgcolor="yellow" >
<hr align=left width=100% size=5 color=violet>
<div>
<p>
IDENTIFY METRICS CUSTOMERS
</p>
<p>
Functional Management: Interested in applying greater control to the software
development process, reducing risk and maximizing return on investment.
</p>
</div></body></html>

Span
The HTML <span> element is a generic

inline container for structuring content.


It can be used to group elements for styling
purposes (using the class or id attributes),
<span> is very much like a <div> element,
but <div> is a block-level element whereas
a <span> is an inline element.

<html>
<head>
<title>Delta engineering company</title>
<h1 align =center>Delta Engineering company pvt ltd</h1>
</head>
<body bgcolor="yellow" >
<hr align=left width=100% size=5 color=violet>
<div>
<p>
IDENTIFY METRICS CUSTOMERS
</p>
<p>
Functional Management:
</p></div>
<div>Interested in applying greater control to the<span> software development
process</span>, reducing risk and <span>maximizing return on
investment.</span></div></body></html>

Div Tag

Span Tag

Block level element


It creates a line break.

Inline element
It does not create a visual

A <div> tag can contain

difference.
A <span> tag cannot
contain <p> tags.A<p>
element can contain
several span elements.

several <p> element but


a <p> tag cannot contain
div element.

Attributes supported by <div> and


<span> tags
Id
class
Align
Bgcolor
Width
Height
Title
Style

Meta Tag
Metadata means data which is stored about

data.
Metadata help search engines in finding a
match when it performs the search.
The search engines will look at any meta data
attached to a page.
We can add metadata to our web pages by
placing meta tags within the <head> tags.

Attributes of the meta tag


Name
Content
Scheme
http-equiv

NAME attributes
META tags with a name attribute are used for the types which

do not correspond to HTTP headers.


Value Robots:Controls Web robots on a per-page basis
<META NAME="ROBOTS"
CONTENT="NOINDEX,NOFOLLOW">
NOINDEX prevents anything on the page from being indexed.
NOFOLLOW prevents the crawler from following the links on the
page and indexing the linked pages.
NOIMAGEINDEX prevents the images on the page from being
indexed but the text on the page can still be indexed.
NOIMAGECLICK prevents the use of links directly to the
images, instead there will only be a link to the page.

Name attribute
Description:A short, plain language

description of the document. Used by search


engines to describe your document.
<META NAME="description"
CONTENT="Citrus fruit wholesaler.">

Name attribute
Keywords:Keywords used by search engines

to index your document in addition to words


from the title and document body. Typically
used for synonyms and alternates of title
words. E.g.
<META NAME="keywords"
CONTENT="oranges, lemons, limes">

HTTP-EQUIV attribute
META tags with an HTTP-EQUIV attribute are

equivalent to HTTP headers.


Typically, they control the action of browsers,
may be used to refine the information provided
by the actual headers

HTTP-EQUIV attribute cont


Expires:The date and time after which the document should be considered

expired.
Dates must be given in in GMT.
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57
GMT">
Content-Type:The HTTP content type may be extended to give the
character set.
As a META tag, it causes Netscape Navigator to load the appropriate
charset before displaying the page.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO2022-JP">
It is now recommended to always use this tag,Failure to do so may cause
display problems

HTTP-EQUIV attribute cont


Content-Script-Type:Specifies the default

scripting language in a document.


<META HTTP-EQUIV="Content-Script-Type"
CONTENT="text/javascript">
Content-Language:May be used to declare
the natural language of the document.
languages are specified as the pair (languagedialect); here, English-British
<META HTTP-EQUIV="Content-Language"
CONTENT="en-GB">

Refresh:Specifies a delay in seconds before

the browser automatically reloads the


document. Optionally, specifies an alternative
URL to load. E.g.
<META HTTP-EQUIV="Refresh"
CONTENT="3;URL=http://www.some.org/so
me.html">

Working with Tables

Objectives
Understand table basics
Format tables
Follow table pointers to create well-designed

tables
Create a page template
Evaluate examples of page templates

Understanding Table Basics

Using Table Elements


To build effective page templates, you must

be familiar with the HTML table elements


and attributes
The <table> element contains the table
information, which consists of table row
elements <tr> and individual table data cells
<td>

These are the three elements you will use


most frequently when you are building tables

Basic Table Code


<table border="1">
<tr><td>Breed</td><td>Description</td><td>Group</td>
</tr>
<tr><td>French Bulldog</td><td>Loyal Companion</td>
<td>Non-Sporting</td></tr>
<tr><td>Wheaten Terrier</td><td>High energy,

friendly</td>
<td>Terrier</td></tr>
<tr><td>English Pointer</td><td>Hunting companion</td>
<td>Sporting</td></tr>
<tr><td>Australian Cattle Dog</td><td>Guarding,
herding</td>
<td>Working</td></tr>
</table>

Captions and Table Header


<caption> lets you add a caption to the top or

bottom of the table


By default, captions display at the top of the
table; you can use the align=bottom attribute
to align the caption at the bottom of the table
The <th> tag lets you create a table header cell
that presents the cell content as bold and
centered

Global attributes of table tag


ATTRIBUTES

DESCRIPTION

BGCOLOR

Sets the background color of the table

ALIGN

Indicates the position of the table on the web


page Left/Right/Center

BORDER

Indicates the thickness of the table.

HEIGHT

Indicates the height of the Table in pixels

WIDTH

Indicates the width of the Table in pixels

BORDERCOLOR

Specifies the color for the table border.

Cell spacing

Indicates the distance between edges of the


cells

Cell Padding

Indicates the distance between edges of cells


and contents.

Table Grouping Attributes


The primary use of the grouping elements is

to let you apply styles to groups of either


rows or columns

Headers and Footers


thead, tfoot and tbody allow you to separate

the table into header, footer and body,


which can be handy when dealing with larger
tables.

<html>
<body>
<table border="6"
bordercolor="blue" bgcolor="pink"
cellpadding="20" cellspacing="8">
<thead>
<td>Roll</td>
<td>Name</td>
<td>Percentage</td>
</thead>
<tfoot>
<td>Today</td>
<td>is</td>
<td>wednesday</td>
</tfoot>

<tbody>
<tr>
<td>101</td>
<td>sagar</td>
<td>85.5%</td>
</tr>
<tr>
<td>102</td>
<td>Rekha</td>
<td>90.0%</td>
</tr>
<tr>
<td>103</td>
<td>Tina</td>
<td>56%</td>
</tr>
</tbody>
</table>
</body>
</html>

Formatting columns
the colgroup and col tags have come to their

used to format columns.


These tags allow you to define the table
columns and style them as desired, which is
particularly useful
if you want certain columns aligned or colored
differently, as, without this, you would need to
target individual cells.

Colgroup tag
The <colgroup> tag specifies a group of one or more columns in

a table for formatting.


The <colgroup> tag is useful for applying styles to entire
columns, instead of repeating the styles for each cell, for each
row.
The <colgroup> tag must be a child of a <table> element, after
any <caption> elements and before any <thead>, <tbody>,
<tfoot>, and <tr> elements.
To define different properties to a column within a <colgroup>,
use the <col> tag within the <colgroup> tag.

<html>
<body>
<table border="6"
bordercolor="blue" bgcolor="pink"
cellpadding="20" cellspacing="8">
<colgroup >
<col span=2 style="backgroundcolor:red">
<col style="backgroundcolor:yellow"></colgroup>
<thead>
<td>Roll</td>
<td>Name</td>
<td>Percentage</td>
</thead>
<tfoot>
<td>Today</td>
<td>is</td>
<td>wednesday</td>
</tfoot>

<tbody>
<tr>
<td>102</td>
<td>Rekha</td>
<td>90.0%</td>
</tr>
</tbody>
</table>
</body>
</html>

Defining Table Attributes


Table attributes let you further define a

number of table characteristics


You can apply attributes at three levels of
table structure: global, row level, or cell level

Global Table Attributes


Global attributes affect the entire table

Row-Level Table Attributes


Row-level attributes affect the entire table

Cell-Level Table Attributes


Cell-level attributes affect only the contents
of one cell

Spanning Columns
The colspan attribute lets you create cells

that span multiple columns of a table


Column cells always span to the right

Spanning Rows
The rowspan attribute lets you create cells

that span multiple rows of a table


Rows always span down

Formatting Tables

Choosing Relative or Fixed Table


Widths
Set relative table widths as percentages in

the table width attribute

If you choose relative table widths, your


tables will resize based on the size of the
browser window

Set absolute table widths as pixel values in

the table width attribute

Fixed tables remain constant regardless of


the browser window size

Determining the Correct Fixed


Width for a Table
The most common width for page template

tables is approximately 975 pixels


This width supports the 1024 x 768 screen
resolution

Adding White Space in a Table


You can add white space into a table with the

cellpadding and cellspacing attributes

Removing Default Table Spacing


Default spacing values are included in the

table even when you dont specify values for


the tables border, cellpadding, or cellspacing
attributes
Depending on the browser, approximately
two pixels are reserved for each of these
values
You can remove the default spacing by
explicitly stating a zero value for each
attribute

Image tag
Html embeds images in your web page using

the <img> tag.


Image exists in different file formats: JPEG :Join photographic experts group
BMP:bitmap
PNG:portable network graphics
TIFF:Tagged Image File Format

Attributes of <img> tag


Attribute

Description

Vspace

Indicates the amount of space left to


the top and the bottom of the image.

Hspace

Indicates the amount of space left to


the left and the right of the image.

Alt

Will display alternate text when the


image is not found.

Src

Indicates the source file.

Border

Specify the size of the border


around the image.

Height and width

Indicates the dimension of the


image in pixels.

Align

Controls the horizontal alignment of


the image.

Valign

Controls the vertical alignment of the


image.

LONGDESC--Points to a resource that

contains a longer description of the images


content.
ISMAP--Identifies the image as being used as
part of a server-side imagemap.
USEMAP--Set equal to the name of the
client-side imagemap to be used with the
image.

Img tag
<html>
<head>
</head>
<body>
The koala(Phascolarctos cinereus) is an arboreal herbivorous marsupial

native to Australia, and the only extant


representative of the family Phascolarctidae. It is classified in the suborder
Vombatiformes within the order Diprotodontia, and its closest living relatives
are the wombats.
<br>
<img src="Koala.jpg" border="4" align="right" valign="bottom" height="400"
width="500" vspace="100" hspace="50"
longDesc="koala.html">
<script>
Document.write(Document.longDesc);
</script></body>
</html>

Align =left

Align=right

Image with border

Inserting links
The main purpose of web page is to create the

documents that navigate in any order.


Hypertext document is a document which links to the
other documents through hyperlinks.
The browser distinguishes the hyperlinks from normal
text.
The hyperlink appears blue in color.
Hyperlink is underlined.
When the mouse cursor moves over the hyperlink ,it
changes to the shape of a hand.

Hyperlink types
There are three types of hyperlinks:1. Internal: Links to anchors in the current

page.
2. It is necessary to mark the location with the
help of <a> tag using name attribute.
3. Then link with the help of href attribute
followed by # symbol.
4. <a href=#top>

<html>
<head>
<title>Delta engineering company</title>
<h1 align =center>Delta Engineering company pvt ltd</h1>
</head>
<body bgcolor="yellow" >
<hr align=left width=100% size=5 color=violet>
<div>
<p>
<a name="top">IDENTIFY METRICS CUSTOMERS
</p>
<p>
Functional Management:
</p></div>
<a href="#top">top</a>
</body></html>

Local
Links to the other pages within your domain

or web site.
<html>
<body>
<a href="list.html">link to a list</a>
<br>
<a href="frame.html">link to a frame</a>
<br>
<a href="img.html">link to an image</a>
</body>
</html>

Global links
Links to domains outside your web site.
<html>
<body>
<a href="list.html">link to a list</a>
<br>
<a href="frame.html">link to a frame</a>
<br>
<a href="img.html">link to an image</a>
<br>
<a href="http://www.google.com">link to Google</a>
</body>
</html>

Attributes of the body tag to change the default color


of the hyperlink
Link :Changes the default color of the

hyperlink
Alink:Changes the default color of the active
hyperlink.
Vlink:Changes the default color of the visited
hyperlink.

Anchor tag
The <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

HTML Links - The target Attribute


The target attribute specifies where to open the

linked document.
The example below will open the linked
document in a new browser window or a new
tab:
<a href=" http://www.mu.ac.in "
target="_blank">Visit mumbaiuniversity</a>

Target
Value

Description

_blank

Opens the linked document in a new window or tab

_self

Opens the linked document in the same frame as it


was clicked (this is default)

_parent

Opens the linked document in the parent frame

_top

Opens the linked document in the full body of the


window

framename Opens the linked document in a named frame

Attribute of <A >tag


ACCESSKEY--An access key is a shortcut key a

reader can use to activate the hyperlink.


If you set the access key to the letter "C",
for example, Windows users can press shift +Alt+C
on their keyboards to activate the link.
CHARSET--Denotes what character encoding to use
for the linked document.

HREF--Gives the URL of the Web resource to which the

hyperlink should point.


HREFLANG--Denotes the language context of the linked
resource.
NAME--Specifies the name of the anchor being set up.

<html>
<body link="red" alink="green" vlink="cyan">
<a href="list.html" target="_blank" accesskey="A">link to a

list</a>
<br>
<a href="frame.html" accesskey="B">link to a frame</a>
<br>
<a href="img.html" accesskey="C">link to an image</a>
<br>
<a href="http://www.google.com">link to Google</a>
<br>
<a href="html1.html" > <img src="koala.jpg"></a>
</body>
</html>

REL--Describes the nature of the


forward link.
Value

author
bookmark
help

Description
Links to an alternate version of the document (i.e. print
page, translated or mirror)
Links to the author of the document
Permanent URL used for bookmarking
Links to a help document

license

Links to copyright information for the document

next

The next document in a selection

nofollow

Links to an unendorsed document, like a paid link.


("nofollow" is used by Google, to specify that the Google
search spider should not follow that link)

alternate

noreferrer
prev

Specifies that the browser should not send a HTTP referer


header if the user follows the hyperlink
The previous document in a selection

<html>
<head>
<title>Write title of document.</title>
</head>
<body>
<p>rel attribute of anchor tag in HTML5.</p>
<a rel="nofollow" href="http://www.google.co.in/" >

Do not follow this link.</a><br>


<a rel="alternate" href=ass1.html"
hreflang="en">English version of document</a><br>
<a rel="next" href=frame.html">Open previous document</a
><br>
<a rel="prev" href=img.html">Open next document</a><br>
</body>
</html>

TABINDEX--Specifies the link's position in the

document's tabbing order.


TARGET--Tells the browser into which frame
the linked document should be loaded.