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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html basic

Similar to Html basic (20)

Recently uploaded

Recently uploaded (20)

Html basic