Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
<html>
<head>
<title>web technology</title>
</head>
<body>
Welcome to my web page
</body>
</html>
<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
Emphasis
You can emphasise text in a paragraph using em
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
Text Styles
Bold:-Displays text in bold face style.The tags
Text Effects
Font tag:-All text specified within the tags <font> and
Lists
There are three types of list;
unordered lists
ordered lists
definition lists.
Unordered Lists
An unordered list or bulleted list starts with
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
Definition list
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt>
<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
<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
Inline element
It does not create a visual
difference.
A <span> tag cannot
contain <p> tags.A<p>
element can contain
several span elements.
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.
NAME attributes
META tags with a name attribute are used for the types which
Name attribute
Description:A short, plain language
Name attribute
Keywords:Keywords used by search engines
HTTP-EQUIV attribute
META tags with an HTTP-EQUIV attribute are
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
Objectives
Understand table basics
Format tables
Follow table pointers to create well-designed
tables
Create a page template
Evaluate examples of page templates
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>
DESCRIPTION
BGCOLOR
ALIGN
BORDER
HEIGHT
WIDTH
BORDERCOLOR
Cell spacing
Cell Padding
<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
Colgroup tag
The <colgroup> tag specifies a group of one or more columns in
<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>
Spanning Columns
The colspan attribute lets you create cells
Spanning Rows
The rowspan attribute lets you create cells
Formatting Tables
Image tag
Html embeds images in your web page using
Description
Vspace
Hspace
Alt
Src
Border
Align
Valign
Img tag
<html>
<head>
</head>
<body>
The koala(Phascolarctos cinereus) is an arboreal herbivorous marsupial
Align =left
Align=right
Inserting links
The main purpose of web page is to create the
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>
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
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
_self
_parent
_top
<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>
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
next
nofollow
alternate
noreferrer
prev
<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/" >