Html basic

 What is Markup ?
Markup is information that is added to a
document to convey information about documents
structure or presentation.

Markup Elements are made of start tag <strong>
and Also might also have closing tag </strong>.

E.G:
<strong> HTML </strong>

What is Html ?
Html stands for hyper Text Markup Language
used widely to develop web pages over internet
to publish the information.
It is a basic Markup language to develop web
pages over internet .
Html has Well defined syntax .
All documents should follow a format
structure.

The World Wide Web Consortium (W3C) is the
primary organization that attempts to standardize
Html.

W3C has defined Html As an Application Of the
Standard Generalized Markup Language (SGML).

SGML is the language which is used to define
other languages by specifying document structure
in the form of DATA TYPE DEFINITION (DTD) .

<html>
<head>
<title>
Document Title Goes Here
</title>
…….Head Information Goes Here
</head>
<body>
….Document content & markup go Hear
</body>
</html>

Html Document is a simple text file saved
with the (.html ) extension .

The html document is well structured and
designed format as an application.

 Within <html> tag Basic Structure of the
document relates two primary sections the
“head” & the “body”.

Contains meta-information.
Search engines use meta-information to index
web pages.
Apart from it head element can include
author contact info. , scripts , style sheets,
comments and most importantly a page title.
The starting <head> tag must contain closing
</head> tag , because it enclose some content
of the document.

Contains information about title bar at the
top of the browser window .
Regardless of specification variations , the
<title> tag must be used in every HTML
document as it gives an HTML document a title
by which it is known to browsers and indexing
robots.
E.G :
<title> Document title </title>

The body of the document is delimited by <body>
and</body> .

Under the HTML 4.01 specification and many
browsers, the body element is optional .

Only one body element can appear per document .

The body element delimits the document itself ,its
attributes are primarily used to effect change across
the entire document such as setting background
images , background colors , and link , text colors .

Block level elements :
<p> , <h1> these elements include line break .

Inline elements :
<b> (bold) , <strong> <strong>.

Miscellaneous elements :
<img> , used to render image to the document.

Browser specific elements :
<marquee> , used to make the text to mobile into
the browser window .

 Easy to use, learn and implement .
 Do not contain any complex programming
structure .
Do not need any software tool or specific
application to make the document , it simply use
any text editor to write the coding .
Almost 100% compatibility with the browser’s
till now published .
Important tool for the beginner’s in the web
development field .

 Considered as poor language for web
development.
Concept of dynamic web pages is ignored in
this language .
Hand coding makes the work tedious as
compare to other web development technique.
Using html interactive programming can not be
done as it is not a programming language.
Traditional html is going away .
Html is WYSIWYG( what you see is what you
get).

Html is not case sensitive :
E.G :
<b> Go boldly </b>
<B>Go boldly </B>
Html attribute values may be case sensitive.
E.G:
<img SRC=“test.gif ”>
Is same as
<img src=“test.gif ”>
but
will not be same as
<img src=“TEST.GIF”>

Html is sensitive to single white space character .
E.G :
<b>T e s t o f S p a c e s </b> <br/>
o/p = T e s t o f S p a c e s
Html follows content model .
E.G :
<ol>
<li> Element 1</li>
</ol>
Elements must have close tag unless empty.
E.G :
<p> This is closed </p>

A few tags such as horizontal rule <hr> or line break
<br> .
E.G:
This isn’t closed <br>

Elements should be nested properly .
E.G:
<b><i>Nested tags are here <i></b>

Attribute value should be Quoted .

Headings :

The heading element are used to create
“headlines” in documents. There are six different
levels of headings Supported by html.

<h1>……….</h1> ( first heading)
.
.
.
<h6>………..</h6> ( sixth heading)

<html>
<head>
<title>
Document Title Goes Here
</title>
</head>
<body>
<h1> Heading 1 </h1>
</body>
</html>

<p> Tag :
 It generally rendered f lush left, with a ragged
right margin.

<br> Tag:
Empty element , do no have closing tag.
Used to break a line in a document.

<div> Tag:
Used to divide large section of group text.

<center> Tag :
To keep the alignment of text to center of web
page.

<pre> Tag :
Stands for preformatted text.
The <pre> tag can be used to indicate text that
should not be formatted by the browser.
It retains all spacing and returns ,
It does not ref low when browser resized .
Tag requires to be closed with </pre> tag .
E.G:
<pre> T
E
A
</pre>

What is URL ?
Stands for uniform resource locators .
It is uniform way to refer to objects and services over internet
.

E.G :
www.yahoo.com
It’s url of yahoo website which uniquely
identifies
It’s services .

In html the main way to define hyperlinks is
with the anchor element.
In hypertext end points of link typically called
as anchors.
For linking purpose anchor <a> tag is used
which again requires href attribute .

The href attribute is set to the url of the target
resource.
The text enclosed within the a tag is called
hotspot.

E.G :
<a href=“hubble.html”> Visit image </a>

Attributes for anchors :
<a href=“logo.html” title=“Hubble Telescope”>
Hubble Telescope
</a>

 To insert or render the image to the html
document <img> tag is used by setting it’s src
attribute to the url of the image.
It is an empty element , so no need to have a
closing tag.

Syntax:
<img src=“f lower.jpg”>

The above element will render the image
named f lower to the document.

height :
Used to set the height of the image .
width :
Used to set the width of the image.
alt :
Incase if image is not rendered properly instead
of broken image it will show some message of
text.
Border :Used to make the border to the image .

(Note :Values of attributes above are measured in pixel unit.)

hspace :
Used to create horizontal space between image
and other html objects or window from both
sides.
 vspace :
Used to create vertical space between image and
other html objects or window from both sides.

Eg:
<img src=“image.jpg” height=“100” width=“150”
alt=“robot” border=“1” hspace=“50” vspace=“50”>

In its simplest form , a table places information
inside the cells formed by dividing a rectangle
into rows and columns .

In markup , a table tag pair <table>
…..</table>, contains an optional caption
element followed by one or more rows,
<tr>……</tr>.

Each row contains cells by holding a heading.
<th>…..</th> or data <td>….</td>.

Attributes :
width :
Used to set the width of the table .
height :
Used to set the height of the table .
cellspacing :
used to set the space between two cells in a table.
cellpadding :
Used to set the padding between cell and wall .

Note : above attribute values are are measured in
terms of pixel or percentage.

rowspan and colspan attributes :

By adding rowspan and colspan attributes to the
table elements , it is possible to create data cells that
span a given number of rows or columns.

Widely used attribute to create interactive web
pages
By making the whole window as a table collection .

A frame is an independent scrolling region , or window
, of a web page can be divided into many individual
frames , which can even be nested within other frames.

Each frame can be separated from other frame using
border attribute .

Each separate frame can contain a different document,
referenced by a unique URL .

Each frame can provide scrollbar and other controls to
manipulate the size of the frame .

 A framed document divides a browser window into
multiple panes , or smaller window frames .

Frames offer many useful navigation possibilities
such as a table of content , site index , and lists of
link.

Frames offer fixed-screen navigation .

The lack of scrolling and minimization of screen
refresh afforded by framed documents can provide
great advantage over the single window approach.

Each frame can contain different document.

It uses <frameset> tag instead of <body>
tag .

The frameset element uses totally different doctype
statement which refer to frameset DTD .

Major attributes for frameset element are rows and
cols .

<html>
<head>
<title>My Frame</title>
</head>
<frameset cols=“50,50”>
<frame src=“first.html” name=“parent”>
<frame src=“second.html” name=“child”>
</frameset>
</html>

Note :the above code will divide window into two parts each of 50 pixel ,
in terms of columns.

Cols :
It is used to make the partition of the window in terms
of columns .
Syntax :
<frameset cols=“200,100”>
.
.
</frameset>
Rows :
It is used to make the partition of the window in terms
of rows .
Syntax :
<frameset rows=“200,100”>
.
.
</frameset>

name :
Value of this attribute makes nomenclature
to the individual frame .
Used to target the contain of one frame in to
the other frame .

Id :
Works same as name attribute but id Is
unique for all the frames .
Used for the purpose of style sheets and
scripting activities .

Use the target attribute in an <a> tag to set the
target for the anchor.

For example a link such as
<a href=“www.yahoo.com” target=“display”>

It will load the site into the window called
“display” , if such a frame exists .

If the target specified by the name doesn’t exist ,
the link typically loads in to a new window .

Up to now all the frames shown has been
attached to the sides of the browser (left , right,
top, bottom).
Another form of frame is known as a f loating
frame but more appropriately called as inline
frame .
An inline frame is defined by the iframe
element and can occur anywhere within the
<body> of an HTML document.

Syntax :
<iframe src=“greet.html”>
</iframe>

Some of the attributes of <iframe> tag are
src
name
Width
Height
vspace
hspace
align

Frames contain numerous problem regarding design .

Problems with bookmarks.

Site navigation is confusing .

Makes webpage difficult and reserved while printing.

Problem with url context and search engine
compatibility .

Tedious work for the developer to keep maintaining
frame target contains .

Html basic

Related slideshows

More Related Content

Html basic