LOGO Delivered By: Shubham Shrivastava. Advisor : Department Of CSE/IT (SOP). Web Designing
Jan 19, 2016
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" >
<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>
LOGO
OUTPUT
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>
LOGO
OUTPUT
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>
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>
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>
<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>
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>
<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>
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>