Total Pageviews

Monday 15 December 2014

EXPLANATION ABOUT MARKUP AND ABOUT TAGS IN HTML ....HOW IT IS USED


DESCRIPTION OF TAGS AND ITS SIGNIFICANCE IN HTML:


WHAT IS MEANT BY TAG?

"TAG" in html is nothing but element surronded by angular brackets .

Which indicate the starting and end of content(i.e., text,images,audio,graphic content)....


Description of markup language and explaining various types of markups:


WHAT IS MEANT BY MARKUP?

Markup comprises a set of symbols, or a language, that can be used to provide instructions.
 The use of markup is supported by rules that define the symbols and how they should be used: a specification.

A webpage is created by marking-up content (text, images, etc.) using the HyperText Markup Language (HTML).

The markup provides instructions to the software used for viewing a webpage (web browser) on how the page should look and work.

Html is the hypertext markup language..as everything in html  is indicated with specific set of format or instructions....

Markup content may include text,images,links,graphic contents.....

HTML MARKUP:

To create an HTML document, content is marked-up into information elements.
Specific tags, denoted by characters within angle brackets, are used to signify the beginning, and end of each element.

For example, to tell the web browser that 'hello’ is a heading, the text is marked-up into a heading element, using level-one heading tags.
<h1> Hello</h1> //level -1 heading
The look of the heading, the typeface, type size and colour, are set using a separate, supplementary presentation language: Cascading Style Sheets (CSS).
HTML elements include;
  • headings,
  • lists,
  • tabulated data (tables),
  • anchors,
  • images, and
  • quotations.

Presentational markup:

Presentional tags are used in these ...like
 paragraph tag<p>,
heading tag<h>
,bold tag<b>,
italic tag<i>,
underline tag<u>.....
Although the HTML language specification defines the markup that can be used to create a webpage, the webpage author decides which elements they will use to markup content.
If a webpage author is using software that enables a webpage to be edited visually, rather than at a code level, they may be more inclined to use markup that achieves a visual effect—this is referred to presentational markup.
Heading can be created with different colour ,size,different font and aligned.....

 The appearance of a heading may be created by making text larger, bold and a different colour..


Heading tag<h>:
It is used to make the text as heading..

syntax:
<h1....h6> text to be appeared as heading</h1...h6>

heading tag<h>:
It consists of levels:      
<h1> some text </h1>  //large size text
<h2> some text </h2>   //less than h1 size
<h3> some text </h3>      //less than h2 size
<h4> some text </h4>      //less than h3 size
<h5> some text </h5>       //less than h4 size
<h6>some text</h6>         //less than h5 size

//program to illustrate headings of webpage..

<HTML>
<HEAD>
<TITLE>MY WEB</TITLE>
</HEAD>
<BODY>

<h1><font size=18 color="red">THe world is so large</h1>


</BODY>
</HTML>
output:



//program illustrating presentational markup....
<HTML>
<HEAD><TITLE>MY WEB</TITLE>
</HEAD>
<BODY>

<p><font size=18 color="pink" style="bold" face="verdana">plants are wealth of nature</p>


</BODY></HTML>

output:
















STRUCTURAL MARKUP:
In structural tags we use  ordered and unordered tags.....
The structural markup 
 uses an unordered list element, <ul></ul> and list-item elements, <li></li>
The structural markup 
 uses an ordered list element, <ol></ol> and list-item elements, <li></li>

structural tags <ol> //ordered list
structural tags <ul> //unordered list
structural tags <li> //represents list

<!doctype html> is necessary to know that which type of document it belongs to...



//program to illustrate structural tags


<!DOCTYPE html>    <!..doc type tells about type of the document..>
<HTML>
<HEAD>
<TITLE>MY WEB</TITLE>
</HEAD>



<BODY>
<ol>

<li>plants</li>  <!..represents ordered list of data..>
<li> wealth</li> 
<li> nature</li>
</ol>
 <br><br>


<ul>

<li>plants</li>  <!..represents unordered list of data..>
<li> wealth</li> 
<li> nature</li>
</ul>

</BODY></HTML>

OUTPUT:




conclusion:
with the use of the presentational  tags,structural tags with markup language... we can text to appear more attractive format.....

INSERTING AN IMAGE IN TO A WEBPAGE

INSERTING GRAPHIC CONTENT IN A WEB PAGE: 


How To Add Images To Your Web Pages:

By now you know enough to write a very nice, text-based home page, but it is the ability of the Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how place an image on your page and also how to turn an image into a link to another page.


Placing An Image On Your Page

The command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in a sub directory called "images". 
Here's the format for placing an image:


syntax to insert an image:

<IMG  SRC= "image.gif"  ALT="some text"  WIDTH=32  HEIGHT=32 BORDER=2>



SYNTAX EXPLANATION:

 IMG: IS AN HTML ELEMENT ...WHICH USED TO INSERT AN IMAGE......

SRC: means source of the image file...it could be in directory or else in sub directory....or in a folder........

In computing, a directory is a file system cataloging structure which contains references to other computer files, and possibly other directories. On many computers directories are known as folders

Files are organized by storing related files in the same directory. In a hierarchical file system (that is, one in which files and directories are organized in a manner that resembles a tree), a directory contained inside another directory is called a sub directory


HEIGHT:  
IT IS THE ATTRIBUTE OR PROPERTY WHICH USED TO SET HEIGHT OF THE IMAGE.....

WIDTH: 
IT IS ATTRIBUTE OR PROPERTY WHICH IS USED TO SET THE WIDTH OF IMAGE......

BORDER
IT ATTRIBUTE WHICH USED TO SET BORDER FOR THE IMAGE....

ALT:  
MEANS (ALTERNATE) IS AN ATTRIBUTE WHICH USED TO DISPLAY MESSAGE IN THE BROWSERS 
THAT   ARE UNABLE DISPLAY  PARTICULAR IMAGE...... 


//EXAMPLE PROGRAM ILLUSTRATING ABOUT INSERTING AN IMAGE IN TO HTML PAGE:



<HTML>
<HEAD>
<TITLE>MY WEB</TITLE>
</HEAD>
<BODY>

<img src="C:\Users\Public\Pictures\Sample Pictures\1.jpg" height=100 width=100 border=2 alt="image cannot displayed">

THIS A WONDERFUL PIC...

</BODY>

</HTML>

output:




conclusion:
*Thus simple image tag WITH ATTRIBUTES we can insert image in to html page and make it look attractive page*