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

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

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 My First Heading My first paragraph.

LOGO Output

TAG OF HTML  There are following important tag in HTML:  It require opening and ending. It is the starting tag and all others tag comes under it.  It also require opening and ending. In this part tag and come.  It gives the title to page.  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 to  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 Heading example My Fisrt heading with h1 my second heading with h2 My third heading with h3 My forth heading with h4 My fifth heading with h5 My Sixth heading with h6

LOGO OUTPUT

HEADING WITH ATTRIBUTES Heading example with attributes My name is shubham I m from bihar I m in diploma I love webdesiging

LOGO OUTPUT

Paragraph Paragraph School of polytechnic This school is under the LPU it is in block 57 it is haing more than thousand student

LOGO OUTPUT

Font Font School of polytechnic This school is under the LPU it is in block 57 it is having more than thousand student

LOGO OUTPUT

Marquee marquee School of polytechnic LOVELY PROFESSIONL UNIVERSITY This school is under the LPU

LOGO OUTPUT

hr horizontal line School of polytechnic LOVELY PROFESSIONL UNIVERSITY This school is under the LPU

LOGO OUTPUT

br horizontal line School of polytechnic LOVELY PROFESSIONL UNIVERSITY This school is under the LPU

LOGO OUTPUT

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 Image LPU IS ONE OF THE MOST FAMOUS UNIVERSITY

LOGO 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 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:  name  My company

LOGO Links Link LPU IS ONE OF THE MOST FAMOUS UNIVERSITY Click here to go on lpu website

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  bold  big  inclined  small  this is subscript and superscript

LOGO List  3 types:  Ordered lists.  Unordered lists.  Definition lists.  Unordered Lists:  There are three types of button in  Disc,square,circle  Starts with “ ” tag.  Each list item starts with tag.

LOGO Ul List   ul list   Shubham  Supriti  aryan  Avishek 

LOGO Ul List   Shubham  Supriti  aryan  Avishek   Shubham  Supriti  aryan  Avishek 

LOGO OUTPUT

Ol List  Ordered Lists:  There are following types of button in  A,a,i,1  Starts with “ ” tag. And end with “ ”.  Each list item starts with tag.

LOGO Ol List   ol list   Shubham  Supriti  aryan  Avishek 

LOGO Ol List   Shubham  Supriti  aryan  Avishek   Shubham  Supriti  aryan  Avishek 

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

LOGO Definition List dl list coffee black hot drink mild cold white drink

LOGO OUTPUT

Tables  The main tag which is used to create a table are as follows:  :for starting a table.starting and ending tag is required in this case.  :for creating rows in table. starting tag is required and but ending is optional.  :for giving table heading usually used in first row of table. starting tag is required and but ending is optional  :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 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 Simple table name Supriti Section jk0000

LOGO OUTPUT

LOGO 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 attributes tr table name Supriti Section jk0000

LOGO Output

LOGO 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 cell Rowspan:indicates how many rows of the table this cell should span.

LOGO Attributes Simple table name Supriti Section jk0000

LOGO OUTPUT

LOGO Attributes Td have the same attributes as the <th attribute have. A small demo showing and attribues part 1 A small demo showing and attributes part 2

LOGO Colspan And Rowspan  If we want to merge to column then we use colspan  Syntax My Info.  If we want to merge to row then we use rowspan  Syntax My Subject.

LOGO Colspan Simple table Student Info Name: Shubham

LOGO OUTPUT

LOGO ROWSPAN Simple table Collge Info Image LPU IS ONE OF THE MOST FAMOUS UNIVERSITY details

LOGO OUTPUT

LOGO Div and Span tag:  The tag defines a division or a section in an HTML document.  The 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 Div School of polytechnic Student Faculty

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 Name <input type= “submit”>

LOGO TEXTBOXES and PASSWORD FIELDS  Text field  It is used to input the text.  Synatx:  Password field  Its is used for password  Syntax:

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

LOGO CHECKBOXES  When a user clicks on a checkbox, it becomes checked, and in checkbox we can select more than a option.  Syntax I have a bike I have a car

LOGO DROP DOWN LIST/SELECTION LIST Volvo Saab Fiat Audi

LOGO TEXTAREA  It is a used to enter the large text entry  Syntax Address

LOGO Input types  There are many kind of input types  Text  Password  Files  Submit  Reset  Button

LOGO Filedset And Legend  Fieldset  It make a field for the form.  Legend  It gives the heading name of the field. Syntax: