Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6

Delivered By:

Shubham Shrivastava.

Advisor :Department Of

CSE/IT (SOP).

Web Designing

Introduction1

Basics syntax , tags of HTML2

Lists3

Tables4

Div5

HTML

Forms6

LOGO3

Evolution of HTML

Internet is now 3 decades old. IBM wanted a system in which one can make title,

paragraph, heading, font faces and etc on web pages in late 1980's.

They came up with a mark-up system called GML(Generalized Mark-up Language).

In 1986 ISO took up this concept and standardized it as SGML(Standard Mark-up Language).

Tim Berners Lee and his team then designed the present form of this mark-up language called HTML

LOGO

Introduction

Hyper Text Mark-up Language.Used to develop web pages.Web pages are also called HTML

documents.It is a markup language for identifying the

elements of a page, so that web browsers can render that page on ur computer screen.

HTML is a scripting language.

LOGO

Basics Syntax of HTML

<html><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>

LOGO

Output

LOGO

TAG OF HTML

There are following important tag in HTML: <html></html>

• It require opening and ending.• It is the starting tag and all others tag comes under it.

<head></head>• It also require opening and ending.• In this part <meta> tag and <title> come.

<title></title>• It gives the title to page.

<body></body>• All the contents of the web pages come under it.

LOGO

TAG OF HTML

There are following others tag in HTML: Heading

• It require opening and ending.• It is having series of <h1> to <h6>

Paragraph• It also require opening and ending.

Horizontal line• It is used to create horizontal line in page.

Marquee• To create moving text on the screen

Br tag• To break the line.

LOGO

HEADING<html>

<head>

<title>Heading example</title>

</head>

<body>

<h1>My Fisrt heading with h1</h1>

<h2>my second heading with h2</h2>

<h3>My third heading with h3</h3>

<h4>My forth heading with h4</h4>

<h5>My fifth heading with h5</h5>

<h6>My Sixth heading with h6</h6>

</body>

</html>

LOGO

OUTPUT

LOGO

HEADING WITH ATTRIBUTES

<html>

<head>

<title>Heading example with attributes</title>

</head>

<body bgcolor="#040000" text="#CCCCCC">

<h1 align="center">My name is shubham</h1>

<h2 align="justify">I m from bihar</h2>

<h3 align="left">I m in diploma</h3>

<h4 align="right">I love webdesiging</h4>

</body>

</html>

LOGO

OUTPUT

LOGO

Paragraph

<html>

<head>

<title>Paragraph</title>

</head>

<body bgcolor="#040000" text="#00FF99" >

<h1 align="center">School of polytechnic</h1>

<p align="left">This school is under the LPU</p>

<p align="center"> it is in block 57</p>

<p align="right">it is haing more than thousand student</p>

</body>

</html>

LOGO

OUTPUT

LOGO

Font<html>

<head>

<title>Font</title>

</head>

<body bgcolor="#040000" text="#00FF99" >

<h1 align="center"><font color="#CCFF66" size="20px" face="Times New Roman">School of polytechnic</font></h1>

<font color="#FFCC00" face="Arial" ><p align="left">This school is under the LPU</p></font>

<p align="center"> it is in block 57</p>

<p align="right">it is having more than thousand student</p>

</body>

</html>

LOGO

OUTPUT

LOGO

Marquee<html>

<head>

<title>marquee</title>

</head>

<body bgcolor="#040000" text="#000000" >


<p align="center"><marquee behavior="alternate" bgcolor="#FFFFFF" direction="right" height="50px" width="100%" scrollamount="2">

LOVELY PROFESSIONL UNIVERSITY</marquee></p>


</body>

</html>

LOGO

OUTPUT

LOGO

hr<html>

<head>

<title>horizontal line</title>

</head>





<hr align="center" color="#FFFFFF" height="10px">


</body>

</html>

LOGO

OUTPUT

LOGO

br<html>

<head>

<title>horizontal line</title>

</head>





<hr align="center" color="#FFFFFF" height="10px">

<font color="#FFCC00" face="Arial" ><p align="left">This <br>school is<br> under the LPU</p></font>

</body>

</html>

LOGO

OUTPUT

LOGO

Image

This tag defines an image in html page. Images are not technically inserted into an

HTML page, images are linked to HTML pages.

Attributes: Alt: gives alternate text of image. Src: gives source of the image. Align:top, bottom, middle, left, right. Border: in pixels. Height: in pixels.

LOGO

Image Hspace: specifies whitespaces on the left

and right of image. Vspace: specifies whitespaces on top

and bottom of image. Width Title: Border:

LOGO

Image<html>

<head>

<title>Image</title>

</head>

<body>

<img src="85px-Lovely_logo.png" height="100px" width="200px" align="texttop"><br>

LPU IS ONE OF THE MOST FAMOUS UNIVERSITY</th>

</body>

</html>

LOGO

OUTPUT

LOGO

Links A hyperlink or a Link is a word or a group of

words or an image on which you can click to navigate to another page or another section within same page.

When you move the cursor over the link, the cursor will change into a hand.

Links are specified in html with <a> anchor tag.

LOGO

Links

Anchor tag can be used in 2 ways:- To create a link to other document. To create a bookmark inside a document.

Syntax: <a href=”url”>name</a>

<a href=”http://shubhaminfotech.in”>My company</a>

http://shubhaminfotech.in/

LOGO

Links<html>

<head>

<title>Link</title>

</head>

<body>

<img src="85px-Lovely_logo.png" height="100px" width="200px" align="texttop"><br>

LPU IS ONE OF THE MOST FAMOUS UNIVERSITY<br>

<a href="http://lpu.in" target="_parent">Click here to go on lpu website</a>

</body>

</html>

LOGO

Image and Links

LOGO

Links

Target Attribute: _top: targets entire browser window, will

remove all existing framesets in the window.

_blank: will open a new browser window and open link in it.

_parent: similar to _top, but removes only the frameset that directly contains this frame.

_self: default value, means in same page.

LOGO

MISC TAGS

<b>bold</b> <big>big</big> <i>inclined</i> <small>small</small> <p>this is <sub>subscript<sub> and

<sup>superscript</sup>

LOGO

List

3 types: Ordered lists. Unordered lists. Definition lists.

Unordered Lists: There are three types of button in <ul>

Disc,square,circle Starts with “<ul>” tag. Each list item starts with <li> tag.

LOGO

Ul List <html> <head> <title>ul list</title> </head> <body bgcolor="#040000" text="#CCCCCC" > <ul type="circle"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ul>

LOGO

Ul List <ul type="disc"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ul> <ul type="square"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ul> </body> </html>

LOGO

OUTPUT

LOGO

Ol List

Ordered Lists: There are following types of button in

<oll> A,a,i,1

Starts with “<ol>” tag. And end with “</ol>”.

Each list item starts with <li> tag.

LOGO

Ol List <html> <head> <title>ol list</title> </head> <body bgcolor="#040000" text="#CCCCCC" > <ol type="1"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ol>

LOGO

Ol List <ol type="a"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ol> <ol type="i"> <li>Shubham</li> <li>Supriti</li> <li>aryan</li> <li>Avishek</li> </ol> </body> </html>

LOGO

OUTPUT

LOGO

Definition List

Definition list:

Contains a list of items with description of each item.

Dl defines definition list. Dl is used in conjuction with dt and dd. Dt tag defines items in the list. Dd tag defines description in the list.

LOGO

Definition List<html>

<head>

<title>dl list</title>

</head>

<body bgcolor="#FF0000" text="#000000" >

<dl>

<dt>coffee</dt>

<dd>black hot drink</dd>

<dt>mild</dt>

<dd>cold white drink</dd>

</dl>

</body>

</html>

LOGO

OUTPUT

LOGO

Tables The main tag which is used to create a table are as follows:

<table>:for starting a table .starting and ending tag is required in this case.

<tr>:for creating rows in table. starting tag is required and but ending is optional.

<th>:for giving table heading usually used in first row of table. starting tag is required and but ending is optional

<td>:which specify the data in the table. starting tag is required and but ending is optional

LOGO

Attributes of table tag

1. Align:specify the horizontal alignment of the table can be center,right and left.

2. Background:in which we can specify the path of the image.

3. Bgcolor:sets the background color of the table.

4. Border:sets the border width by default it is 0.

5. Bordercolor:we can specify the border color in this attribute.

6. Cellpadding:sets the spacing between the cell walls and cell contents.

7. Cellspacing:Gives the distance between cells .

8. Height:Gives the height of the whole table.

9. Width:sets the width of the table.

LOGO

Simple table<html>

<head>

<title>Simple table</title>

</head>

<body>

<table width="778" border="1" height="167">

<tr>

<td height="82">name</td>

<td>Supriti</td>

</tr>

<tr>

<td height="77">Section</td>

<td>jk0000</td>

</tr>

</table>

</body>

</html>

LOGO

OUTPUT

LOGO

<TR> attributes

Align:alins the text horizontally center,right and left.

Bgcolor:gives color to the row in the table.

Bordercolor:sets the external border color of the row.

Valign:sets the vertical alignment of the text i.e. bottom,baseline and middle.

LOGO

<TR> attributes<html>

<head>

<title>tr table</title>

</head>

<body>


<tr align="center" bgcolor="#999999" bordercolor="#FF0000">

<td height="82">name</td>

<td>Supriti</td>

</tr>

<tr align="left" bgcolor="#0000FF" bordercolor="#00FFFF">


<td>jk0000</td>

</tr>

</table>

</body>

</html>

LOGO

Output

LOGO

<th > Attributes

Align:horizontal alignment of the text.Background:specify the background image for

the table cell.Bgcolor:sets the background color of the table

cell.Bordercolor:sets the external bordercolor for

the cell.Colspan:indicates how many cell columns of

the table this cell should span.Valign:vertically aligns the text in cell.Height and width:sets the height and width of

the cellRowspan:indicates how many rows of the table

this cell should span.

LOGO

<th > Attributes<html>

<head>

<title>Simple table</title>

</head>

<body>


<tr align="center" bgcolor="#999999" bordercolor="#FF0000">

<th height="82" background="85px-Lovely_logo.png" align="right" >name</th>

<th bgcolor="#993300">Supriti</th>

</tr>

<tr align="left" bgcolor="#0000FF" bordercolor="#00FFFF">


<td>jk0000</td>

</tr>

</table>

</body>

</html>

LOGO

OUTPUT

LOGO

<td > Attributes

Td have the same attributes as the <th attribute have.

A small demo showing <td> and <th> attribues part 1

A small demo showing <td> and <th> attributes part 2

LOGO

Colspan And Rowspan

If we want to merge to column then we use colspan Syntax

• <td colspan=“2” align=“center”>My Info.</td>

If we want to merge to row then we use rowspan Syntax

• <td rowspan=“2” align=“center”>My Subject.</td>

LOGO

Colspan

<html><head><title>Simple table</title></head><body><table width="778" border="1" height="167"><tr bgcolor="#00FF00" bordercolor="#0066FF"><th colspan="2" align="center">Student Info</th></tr><tr align="center" bgcolor="#999999" bordercolor="#FF0000"> <th height="82" align="center" >Name:</th> <th bgcolor="#993300">Shubham</th></tr></table></body></html>

LOGO

OUTPUT

LOGO

ROWSPAN

<html><head><title>Simple table</title></head><body><table width="778" border="1" height="204"><tr bgcolor="#0033CC" bordercolor="#0066FF"><th colspan="2" align="center">Collge Info </th></tr><tr align="center" bgcolor="#999999" bordercolor="#FF0000"> <th width="397" height="82" align="center" >Image</th> <th width="365" rowspan="2" bgcolor="#993300"><img src="85px-Lovely_logo.png" height="100px" width="200px" align="texttop"><br> LPU IS ONE OF THE MOST FAMOUS UNIVERSITY</th></tr><tr><td height="76" align="center" bgcolor="#00FFFF">details</td></tr></table></body></html>

LOGO

OUTPUT

LOGO

Div and Span

<div> tag: The <div> tag defines a division or a section in

an HTML document. The <div> tag is used to group block-elements

to format them with styles. Span tag:

Both div and span tags are used with css, so will be discussed with it.

LOGO

A simple div

<html><head><title>Div </title></head><body bgcolor="#0033CC" text="#999999"><div align="center" ><h1>School of polytechnic</h1></div><br><br>

<div> <div align="left" >Student</div> <div align="right">Faculty</div></div></body></html>

LOGO

OUTPUT

LOGO

Forms

Html forms are used to pass data to the server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea, fieldset, legend and label elements.

LOGO

Forms

Simple Syntax

<form >Name<input type=“text”><input type=“submit”></form>

LOGO

TEXTBOXES and PASSWORD FIELDS

Text field It is used to input the

text . Synatx:

<input type=“text”>Password field

Its is used for password

Syntax:<input type=“password”>

LOGO

RADIO BUTTONS

When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.

Syntax<input type="radio"

name="gender" value="male" > Male<br >

<input type="radio" name="gender" value="female" > Female

LOGO

CHECKBOXES

When a user clicks on a checkbox, it becomes checked, and in checkbox we can select more than a option.

Syntax<input type="checkbox"

name="vehicle" value="Bike" > I have a bike<br >

<input type="checkbox" name="vehicle" value="Car" > I have a car

LOGO

DROP DOWN LIST/SELECTION LIST

<select name="cars"><option

value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

LOGO

TEXTAREA

It is a used to enter the large text entry

Syntax

Address<textarea rows="10" cols="30"></textarea>

LOGO

Input types

There are many kind of input typesTextPasswordFilesSubmitResetButton

LOGO

Filedset And Legend

FieldsetIt make a field for the

form.Legend

It gives the heading name of the field.Syntax:

<form><fieldset><legend></legend></fieldset><form>

Documents

Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6