introduction 1 basics syntax, tags of html 2 lists 3 tables 4 div 5 html forms 6
TRANSCRIPT
![Page 1: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/1.jpg)
Delivered By:
Shubham Shrivastava.
Advisor :Department Of
CSE/IT (SOP).
Web Designing
![Page 2: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/2.jpg)
Introduction1
Basics syntax , tags of HTML2
Lists3
Tables4
Div5
HTML
Forms6
![Page 3: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/3.jpg)
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
![Page 4: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/4.jpg)
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.
![Page 5: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/5.jpg)
LOGO
Basics Syntax of HTML
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
![Page 6: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/6.jpg)
LOGO
Output
![Page 7: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/8.jpg)
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.
![Page 9: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/9.jpg)
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>
![Page 10: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/10.jpg)
LOGO
OUTPUT
![Page 11: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/11.jpg)
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>
![Page 12: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/12.jpg)
LOGO
OUTPUT
![Page 13: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/13.jpg)
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>
![Page 14: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/14.jpg)
LOGO
OUTPUT
![Page 15: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/15.jpg)
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>
![Page 16: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/16.jpg)
LOGO
OUTPUT
![Page 17: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/17.jpg)
LOGO
Marquee<html>
<head>
<title>marquee</title>
</head>
<body bgcolor="#040000" text="#000000" >
<h1 align="center"><font color="#CCFF66" size="20px" face="Times New Roman">School of polytechnic</font></h1>
<p align="center"><marquee behavior="alternate" bgcolor="#FFFFFF" direction="right" height="50px" width="100%" scrollamount="2">
LOVELY PROFESSIONL UNIVERSITY</marquee></p>
<font color="#FFCC00" face="Arial" ><p align="left">This school is under the LPU</p></font>
</body>
</html>
![Page 18: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/18.jpg)
LOGO
OUTPUT
![Page 19: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/19.jpg)
LOGO
hr<html>
<head>
<title>horizontal line</title>
</head>
<body bgcolor="#040000" text="#000000" >
<h1 align="center"><font color="#CCFF66" size="20px" face="Times New Roman">School of polytechnic</font></h1>
<p align="center"><marquee behavior="alternate" bgcolor="#FFFFFF" direction="right" height="50px" width="100%" scrollamount="2">
LOVELY PROFESSIONL UNIVERSITY</marquee></p>
<hr align="center" color="#FFFFFF" height="10px">
<font color="#FFCC00" face="Arial" ><p align="left">This school is under the LPU</p></font>
</body>
</html>
![Page 20: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/20.jpg)
LOGO
OUTPUT
![Page 21: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/21.jpg)
LOGO
br<html>
<head>
<title>horizontal line</title>
</head>
<body bgcolor="#040000" text="#000000" >
<h1 align="center"><font color="#CCFF66" size="20px" face="Times New Roman">School of polytechnic</font></h1>
<p align="center"><marquee behavior="alternate" bgcolor="#FFFFFF" direction="right" height="50px" width="100%" scrollamount="2">
LOVELY PROFESSIONL UNIVERSITY</marquee></p>
<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>
![Page 22: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/22.jpg)
LOGO
OUTPUT
![Page 23: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/23.jpg)
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.
![Page 24: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/24.jpg)
LOGO
Image Hspace: specifies whitespaces on the left
and right of image. Vspace: specifies whitespaces on top
and bottom of image. Width Title: Border:
![Page 25: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/25.jpg)
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>
![Page 26: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/26.jpg)
LOGO
OUTPUT
![Page 27: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/27.jpg)
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.
![Page 28: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/28.jpg)
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>
![Page 29: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/29.jpg)
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>
![Page 30: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/30.jpg)
LOGO
Image and Links
![Page 31: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/31.jpg)
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.
![Page 32: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/32.jpg)
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>
![Page 33: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/33.jpg)
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.
![Page 34: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/34.jpg)
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>
![Page 35: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/35.jpg)
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>
![Page 36: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/36.jpg)
LOGO
OUTPUT
![Page 37: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/37.jpg)
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.
![Page 38: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/38.jpg)
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>
![Page 39: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/39.jpg)
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>
![Page 40: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/40.jpg)
LOGO
OUTPUT
![Page 41: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/41.jpg)
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.
![Page 42: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/42.jpg)
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>
![Page 43: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/43.jpg)
LOGO
OUTPUT
![Page 44: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/44.jpg)
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
![Page 45: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/45.jpg)
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.
![Page 46: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/46.jpg)
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>
![Page 47: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/47.jpg)
LOGO
OUTPUT
![Page 48: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/48.jpg)
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.
![Page 49: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/49.jpg)
LOGO
<TR> attributes<html>
<head>
<title>tr table</title>
</head>
<body>
<table width="778" border="1" height="167">
<tr align="center" bgcolor="#999999" bordercolor="#FF0000">
<td height="82">name</td>
<td>Supriti</td>
</tr>
<tr align="left" bgcolor="#0000FF" bordercolor="#00FFFF">
<td height="77">Section</td>
<td>jk0000</td>
</tr>
</table>
</body>
</html>
![Page 50: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/50.jpg)
LOGO
Output
![Page 51: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/51.jpg)
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.
![Page 52: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/52.jpg)
LOGO
<th > Attributes<html>
<head>
<title>Simple table</title>
</head>
<body>
<table width="778" border="1" height="167">
<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 height="77">Section</td>
<td>jk0000</td>
</tr>
</table>
</body>
</html>
![Page 53: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/53.jpg)
LOGO
OUTPUT
![Page 54: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/54.jpg)
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
![Page 55: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/55.jpg)
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>
![Page 56: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/56.jpg)
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>
![Page 57: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/57.jpg)
LOGO
OUTPUT
![Page 58: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/58.jpg)
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>
![Page 59: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/59.jpg)
LOGO
OUTPUT
![Page 60: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/60.jpg)
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.
![Page 61: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/61.jpg)
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>
![Page 62: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/62.jpg)
LOGO
OUTPUT
![Page 63: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/63.jpg)
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.
![Page 64: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/64.jpg)
LOGO
Forms
Simple Syntax
<form >Name<input type=“text”><input type=“submit”></form>
![Page 65: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/65.jpg)
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”>
![Page 66: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/66.jpg)
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
![Page 67: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/67.jpg)
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
![Page 68: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/68.jpg)
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>
![Page 69: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/69.jpg)
LOGO
TEXTAREA
It is a used to enter the large text entry
Syntax
Address<textarea rows="10" cols="30"></textarea>
![Page 70: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/70.jpg)
LOGO
Input types
There are many kind of input typesTextPasswordFilesSubmitResetButton
![Page 71: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/71.jpg)
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>
![Page 72: Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6](https://reader036.vdocument.in/reader036/viewer/2022070414/5697c01a1a28abf838ccf2ec/html5/thumbnails/72.jpg)