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

Forms6

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

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.

Basics Syntax of HTML

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>

Output

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.

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.

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>

OUTPUT

HEADING WITH ATTRIBUTES

<html>

<head>

<title>Heading example with attributes</title>

</head>

<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>

OUTPUT

Paragraph

<html>

<head>

<title>Paragraph</title>

</head>

<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>

OUTPUT

Font<html>

<head>

</head>

<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>

OUTPUT

Marquee<html>

<head>

<title>marquee</title>

</head>

LOVELY PROFESSIONL UNIVERSITY</marquee></p>

</body>

</html>

OUTPUT

hr<html>

<head>

<title>horizontal line</title>

</head>

</body>

</html>

OUTPUT

br<html>

<head>

<title>horizontal line</title>

</head>

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

</body>

</html>

OUTPUT

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.

Image Hspace: specifies whitespaces on the left

and right of image. Vspace: specifies whitespaces on top

and bottom of image. Width Title: Border:

Image<html>

<head>

<title>Image</title>

</head>

<body>

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

</body>

</html>

OUTPUT

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.

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>

Links<html>

<head>

</head>

<body>

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>

Image and 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.

MISC TAGS

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

<sup>superscript</sup>

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.

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>

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>

OUTPUT

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.

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>

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>

OUTPUT

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.

Definition List<html>

<head>

</head>

<dt>coffee</dt>

<dd>black hot drink</dd>

<dd>cold white drink</dd>

</body>

</html>

OUTPUT

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

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.

Simple table<html>

<head>

<title>Simple table</title>

</head>

<body>

<td>Supriti</td>

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

</table>

</body>

</html>

OUTPUT

<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.

<TR> attributes<html>

<head>

<title>tr table</title>

</head>

<body>

<td>Supriti</td>

</table>

</body>

</html>

Output

<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.

<th > Attributes<html>

<head>

<title>Simple table</title>

</head>

<body>

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

</table>

</body>

</html>

OUTPUT

<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

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>

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>

OUTPUT

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>

OUTPUT

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.

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>

OUTPUT

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.

Simple Syntax

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”>

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

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

DROP DOWN LIST/SELECTION LIST

<select name="cars"><option

value="volvo">Volvo</option>

</select>

TEXTAREA

It is a used to enter the large text entry

Syntax

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

Input types

There are many kind of input typesTextPasswordFilesSubmitResetButton

Filedset And Legend

FieldsetIt make a field for the

form.Legend

It gives the heading name of the field.Syntax:

introduction 1 basics syntax, tags of html 2 lists 3 tables 4 div 5 html forms 6

html pages

logooutput logotag of

lpu logooutput logoimage

web pages

html documents

logoimage image lpu

logoheading heading

logobasics syntax of

Documents

blockquote, div, pre tags in html

html tags tutorial

html common tags

chapter two html tags

apostila- html e css - · pdf file1. o que são tags html?...

html introduction to html tags. html document my first html...

html tags and attributes

web html table tags

html and div

standard html tags

[basic html/css] 2. html - list tags

web page design lessons lesson 1: introduction to html...

html & css...html tags are used to mark-up html...

html tags

3. markup languages and formatting - kfupm · swe 444:...

html tags 2

html tags essentials

[basic html/css] 1. html - basic tags

html semantic tags

s11: html tags