• Save
Basic HTML
Upcoming SlideShare
Loading in...5
×
 

Basic HTML

on

  • 104 views

 

Statistics

Views

Total Views
104
Views on SlideShare
104
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Basic HTML Basic HTML Presentation Transcript

  • Backbone Of Webpages! <html><head> <script language=javascript> var now=new Date,t1=0,t2=0,t3=0,t4=0,t5= 0,t6=0,ie5=0,hp=0,ao=0,cc=''; t1=now.getTime(); function err(a,b,c) { var img=new Image; img.src='http://srd.yahoo.com /hp5- err/'+escape(a)+','+escape(b) B R O W S E R HTML File Web Page
  • HTML Definition  HTML – H yper T ext M ark-up L anguage – The publishing language of the World Wide Web(WWW); the standard used to create webpages. HTML is a text formatting language. Markup Language that defines the structure of information by using a variety of tags and attributes. HTML is maintained by World Wide Web Consortium(W3C). Extended from SGML and extended to XHTML.
  • History Of HTML • IBM (international business machines corporation)sowed the seed of HTML in early 1980s,at that time it was known as GML(general mark- up language).it was a powerful language aimed at creating a document in which one could mark title , headings ,text , fonts etc. • In 1986,this concept got standardization by ISO(international organization for standardization)and was renamed to SGML(standard generalized mark-up language).
  • This first official document which showed users how to use HTML was called ‘HTML Tags’. It was released in 1991 by Tim Berners-Lee and contained information about 22 HTML elements. Tim Berners-Lee (CERN physicist) Creator of HTML &WWW In 1989 Tim Berners Lee and his team redesigned SGML and named it HTML(hyper text mark-up language).
  • Analyze HTML HYPER TEXT:- hyper text is the text used to link various web pages .It is the text on a web page , which on clicking opens a new web page. MARK – UP:-it means highlighting the text either by underlying or displaying it in different colors , or both. LANGUAGE :- it refers to the mode of communication between web pages .HTML has its own syntax and rules.
  • Different Types Of HYPER TEXT MARK-UP Languages: • Extended HTML (XHTML) • Dynamic HTML (DHTML) • Public_HTML (PHTML) • Compact HTML (CHTML)
  • HTML Versions Year Versions 1991 HTML 1993 HTML+ 1995 HTML 2.0 1997 HTML 3.2 1999 HTML 4.01 2000 XHTML 2012 HTML5 2013 XHTML5
  • Basic Tools Of HTML HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless. The most commonly used text editors are: • Notepad (Windows) Simple text (Mac) • WordPad (Windows) Adobe Dreamweaver (All) • Web Browser : list and view the created webpages. HTML Reference Book serve as guide for HTML tags.
  • The Basic HTML Rules: • HTML tags are enclosed by brackets “ <>” ; for example <HTML>. • Most tags require a closing tag <HTML>………</HTML> • Tags must be nested correctly <B> <I> The basic HTML rules</I> </B> first tag on last tag off. • HTML treats all white space as a single blank space. • Tags are not case sensitive but are generally written in uppercase, with the attributes and values in small letters enclosed by quotation marks. • Most tags have optional attributes with several possible values that modifies the tag behaviour. • File extension: Save file as “.htm” or “.html”
  • Tags Tags are used to mark-up certain information to be displayed in a browser. for the content to be marked-up it has to have an opening tag (<tag>) before the content and a closing tag (</tag>) afterwards. • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags
  • Elements An element consists of an opening tag, content and a closing tag. For example: <strong>Bold Text</strong> would be classed as an element (this HTML produces the • output Bold Text).A HTML element starts with a start tag / opening tag. • A HTML element ends with an end tag / closing tag. • The element content is everything between the start and the end tag. • Some HTML elements have empty content. • Empty elements are closed in the start tag. • Most HTML elements can have attributes. • For example: <p></p> <img> <body></body> Start tag Element content End tag <p> This is a paragraph </p> <a href="default.htm"> This is a link </a> <br>
  • Attributes An element can have one or several attributes. Attributes are placed within tags and are used to determine certain values of the HTML element. • Attributes provide additional information about an element. • Attributes are always specified in the start tag. • Attribute values must be contained in quotes. • Attributes come in name/value pairs like: name="value“. • Example <font size=“1” color=“green">This text would be green and smaller</font>
  • •There are two types of markup tags: • Empty/ ONE-SIDED tags – represent a single occurrence of an instruction. For example, the <BR> or break tag is used to indicate that you want to include a single space following the text. Examples: Breaking line tag: <br/> Horizontal line tag: <hr/> • Container /two-sided tags – Define a section of text using a start tag and an end tag. For example, text placed inside of these tags would appear in bold: <B>Hello</B>
  • HTML Syntax • HTML syntax: two-sided tag: <tag attributes>document content</tag> Starting tag Properties of the tag. Optional! Actual content appears in webpage. It could be empty Closing tag Examples: <p> An Introduction to HTML </p> <body bgcolor = “yellow”> HTML </body>
  • Structure Of The Web Page • Starting with the tag <html>...</html> <html> …………… </html> Everything about the web page should be enclosed here
  • Structure of HTML Inside the <html></html> tag Each web page has a head part described in <head></head> tag. Each web page has a body part described in <body></body> tag. <HTML> <HEAD> <TITLE> ---------- </TITLE> </HEAD> <BODY> --------------- --------------- --------------- </BODY> </HTML> Contains some fundamental information about the Web page. Title of the Web page is given here. Contains the tags that specify how the content should be displayed. Specifies to the browser that the code enclosed is a HTML code. Head Section Body SectionThe content of the whole web page should be put here
  • Basic Tags <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!--...--> Defines a comment
  • Sample Bare-Bones Document <html> <head> <Title>A Simple HTML Example</Title> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body> </html> sample.html Open Notepad Type the HTML code Save the file with extension .html as sample.html/”htm”
  • Title Body Result: Open sample.html in your browser. You can do this by opening the file via your browser or by opening the sample.html file directly.
  • HTML Headings Six Headers ( Header Elements): H1 Through H6 <body> <h1>Level 1 Header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> </body>
  • Html Paragraph Tag • HTML documents are divided into paragraphs. • Paragraphs are defined with the <p> tag i.e. <P>THIS IS A PARAGRAPH</P> <P>THIS IS ANOTHER PARAGRAPH</P> <PRE>THIS TEXT IS PREFORMATTED</PRE>
  • LINE BREAK & HORIZONTAL LINE TAG • For a line break or a new line without starting a new paragraph Use the <br> tag. • Defines a horizontal line use <hr>tag. • <br> & <hr> element are empty HTML elements. i.e. DEPARTMENT OF LIBRARY & INFORMATION SCIENCE<hr> UNIVERSITY OF <br> CALCUTTA
  • TEXT FORMATTING TAGS <b> <big> <em> <i> <small> <strong> <sub> <super> <ins> <del> <tt> <u> <strike> Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines teletype text Defines underline text Defines strike text
  • TEXT FORMATTING CODE & RESULT <HTML> <HEAD> </HEAD> <BODY> <B>This text is Bold</B> <BR><EM>This text is Emphasized</EM> <BR><I>This text is italic</I> <BR><SMALL>This text is small</SMALL> <BR>This is<SUB> Subscript</SUB> AND <SUP>Superscript</SUP> <BR><STRONG>This text is strong</STRONG> <BR><BIG>This text is big</BIG> <BR><U>This text is Underline</U> <BR><STRIKE>This text is Strike</STRIKE> <BR><TT>This text is Teletype</TT> </BODY> </HTML> Result of Text Formatting Code
  • Font Tag • This element is used to format the size, typeface and color of the enclosed text. • The commonly used fonts for web pages are Arial, Comic Sans MS , Lucida Sans Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana. • The size attribute in font tag takes values from 1 to 7.
  • COLORS • Background and text colors are attributes of the “body” of the document. • text=“#xxxxxx” determines your text color • Bgcolor=“#xxxxxx” determines your background color • Colors and codes for HTML can be found at http://hotwired.lycos.com/webmonkey/reference/col or_codes/
  • BASIC COLORS & COLOR CODES 1. WHITE 2. BLACK 3. RED 4. GREEN 5. BLUE 6. MAGENTA 7. CYAN 8. YELLOW 9. AQUAMARINE 10. BAKER’S CHOCOLATE 11. VIOLET 12. BRASS 13. COPPER 14. PINK 15. ORANGE 1. #FFFFFF 2. #000000 3. #FF0000 4. #00FF00 5. #0000FF 6. #FF00FF 7. #00FFFF 8. #FFFF00 9. #70DB93 10. #5C3317 11. #9F5F9F 12. #B5A642 13. #B87333 14. #FF6EC7 15. #FF7F00
  • Font Tag Code <HTML> <HEAD><TITLE> FONTS</TITLE></HEAD> <BODY> <BR><FONT COLOR=“#00FF00" SIZE="7" FACE="ARIAL"> LIBRARY & INFORMATION SCIENCE </FONT> <BR><FONT COLOR=“#000000" SIZE="6" FACE="COMIC SANS MS "> LIBRARY & INFORMATION SCIENCE </FONT> <BR><FONT COLOR=“#0000FF" SIZE="5" FACE="LUCIDA SANS UNICODE"> LIBRARY & INFORMATION SCIENCE </FONT> <BR><FONT COLOR=“#FF00FF" SIZE="4" FACE="COURIER NEW"> LIBRARY & INFORMATION SCIENCE </FONT> <BR><FONT COLOR=“#00FFFF" SIZE="3" FACE="TIMES NEW ROMAN"> LIBRARY & INFORMATION SCIENCE </FONT> <BR><FONT COLOR=“#FFFF00" SIZE="2" FACE="ARIAL BLACK"> LIBRARY & INFORMATION SCIENCE</FONT> <BR><FONT COLOR=“#FF6EC7" SIZE="1" FACE="IMPACT"> LIBRARY & INFORMATION SCIENCE </FONT> </BODY> </HTML> Result of Font Code
  • Background & Text Color Tag The attribute bgcolor is used for changing the back ground color of the page. <BODY BGCOLOR=“GREEN” > Text is use to change the color of the enclosed text. <BODY TEXT=“WHITE”>
  • Text Alignment Tag It is use to alignment of the text. Left alignment <align=“left”> Right alignment <align=“right”> Center alignment <align=“center”>
  • Hyperlink Tag  The HTML <A> Tag Defines A Hyperlink.  A Hyperlink (Or Link) Is A Word, Group Of Words, Or Image That You Can Click On To Jump To Another Document.  When You Move The Cursor Over A Link In A Web Page, The Arrow Will Turn Into A Little Hand.  The Most Important Attribute Of The <A> Element Is The Href Attribute, Which Indicates The Link’s Destination.  By Default, Links Will Appear As Follows In All Browsers:  An Unvisited Link Is Underlined And Blue  A Visited Link Is Underlined And Purple  An Active Link Is Underlined And Red EXAMPLE: <A HREF="URL">LINK TEXT</A>
  • Creating Links Two types of links 1. absolute: link to an outside website 2. relative: link to another page within your website HTML uses the <a> (anchor) tag to create a link to another document An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The correct Syntax of creating an anchor: <a href="url">Text to be displayed</a>
  • Creating Absolute Links <a href="url">Text to be displayed</a> Anchor Tag Href attribute used to address the document to link to Where this link will take you Text hyperlink that appears in browser Closing Anchor Tag
  • Creating Relative Links <a href=“nameofpage.html">Text to be displayed</a> Anchor Tag href attribute used to address the document to link to Where this link will take you (page within website name Text hyperlink that appears in browser Closing Anchor Tag
  • Image As A Link <a href=“url or file name”><img src = “imagefile.jpg” alt=“description”></a> Insert the img src tag in place of the clickable text on a normal link
  • Link Tag Example Html Links : Html links are defined with the <a> tag Syntax : <a href="http://www.gmil.com">Gmail</a> Example : <html> <body> <a href="http://www.gmail.com">Gmail</a> </body> </html> GmailO/P : If we click this link it goes to gmail account
  • Image Tag  IN HTML, IMAGES ARE DEFINED WITH THE <IMG> TAG.  THE <IMG> TAG IS EMPTY, WHICH MEANS THAT IT CONTAINS ATTRIBUTES ONLY, AND HAS NO CLOSING TAG.  TO DISPLAY AN IMAGE ON A PAGE, YOU NEED TO USE THE SRC ATTRIBUTE. SRC STANDS FOR "SOURCE". THE VALUE OF THE SRC ATTRIBUTE IS THE URL OF THE IMAGE YOU WANT TO DISPLAY.  <IMG SRC="URL" ALT="SOME_TEXT">  THE HEIGHT AND WIDTH ATTRIBUTES ARE USED TO SPECIFY THE HEIGHT AND WIDTH OF AN IMAGE.  THE ATTRIBUTE VALUES ARE SPECIFIED IN PIXELS BY DEFAULT:  THE ALT ATTRIBUTE PROVIDES ALTERNATIVE INFORMATION FOR AN IMAGE  <IMG SRC="PULPIT.JPG" ALT="PULPIT ROCK" WIDTH="304" HEIGHT="228 EXAMPLE: <IMG SRC ="URL"> <IMG SRC="PICTURE.GIF“>
  • Image Attributes - <Img> Tag <IMG> <SRC> <ALT> <WIDTH> <HEIGHT> <BORDER> <HSPACE> <VSPACE> <ALIGN> <BACKGROUND> Defines an image display an image on a page,Src stands for "source". Define "alternate text" for an image Defines the width of the image Defines the height of the image Defines border of the image Horizontal space of the image Vertical space of the image Align an image within the text Add a background image to an HTML page
  • Code & Result Of The Image <HTML> <BODY> <P><IMG SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="LEFT" WIDTH="48" HEIGHT="48"> </P> <P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="RIGHT" WIDTH="48" HEIGHT="48"></P> </BODY></HTML> <HTML> <<BODY BACKGROUND="FILE:///C:/WINDOWS/SOAP%20BUB BLES.BMP" TEXT="WHITE"> <BR><BR><BR> <H2> BACKGROUND IMAGE!</H2> </BODY> </HTML>
  • Code & Result Of The Image <HTML> <BODY> <P><IMG SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="BOTTOM" WIDTH="20" HEIGHT="20"> </P> <P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="MIDDLE" WIDTH="40" HEIGHT="40"></P> <P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="TOP" WIDTH="60" HEIGHT="60"></P> <P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP" WIDTH="80" HEIGHT="80"> </P> <P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP" WIDTH="100" HEIGHT="100"> </P> </BODY> </HTML>
  • HTML TABLE TAG <TABLE> <TR> <TD> <TH> <CAPTION> <COLGROUP> <COL> <THEAD> <TBODY> <TFOOT> <CELLSPACING> <CELLPADDING> <COLSPAN> <ROWSPAN> <BORDER> used to create table table is divided into rows each row is divided into data cells Headings in a table caption to the table Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer amount of space between table cells. space around the edges of each cell No of column working with will span No of rows working with will span attribute takes a number
  • HOW TABLES WORK <tr> </tr> <table> </table> <td> </td><td> </td> </td><td> <tr> </tr><td> </td><td> </td> </td><td> <tr> </tr><td> </td><td> </td> </td><td>  <table></table> Creates a table  <tr></tr> Sets off each row in a table  <td></td> Sets off each cell in a row  <table border=#> Sets width of border around table cells  <table width=“ ? %” or height=“ ? %”> Sets width and height of table - in pixels or as a percentage of document width
  • CODE & RESULT OF THE TABLE <HTML> <BODY> <H3>Table without border</H3> <TABLE> <TR> <TD>MILK</TD> <TD>TEA</TD> <TD>COFFEE</TD> </TR> <TR> <TD>400</TD> <TD>500</TD> <TD>600</TD> </TR> </TABLE> </BODY> </HTML>
  • Table Code With Border & Header <HTML> <BODY> <H4>Horizontal Header:</H4> <TABLE BORDER="1"> <TR> <TH>Name</TH> <TH>Loan No</TH> <TH>Amount</TH> </TR> <TR> <TD>Jones</TD> <TD>L-1</TD> <TD>5000</TD></TR> </TABLE><BR><BR> <H4>Vertical Header:</H4> <TABLE BORDER="5"> <TR> <TH>Name</TH> <TD>Jones</TD> </TR> <TR> <TH>Loan No</TH> <TD>L-1</TD> </TR> <TR> <TH>Amount</TH> <TD>5000</TD></TR> </TABLE> </BODY> </HTML>
  • Table Code With Colspan & Rowspan <HTML> <BODY> <H4>Cell that spans two columns:</H4> <TABLE BORDER="4"> <TR> <TH>Name</TH> <TH COLSPAN="2">Loan No</TH> </TR> <TR> <TD>Jones</TD> <TD>L-1</TD> <TD>L-2</TD> </TR> </TABLE> <H4>Cell that spans two rows:</H4> <TABLE BORDER="8"> <TR> <TH>Name</TH> <TD>Jones</TD></TR><TR> <TH ROWSPAN="2">LOAN NO</TH> <TD>L-1</TD></TR><TR> <TD>L-2</TD></TR></TABLE> </BODY> </HTML> ROWSPAN - it is used to span multiple rows. COLSPAN - it is used to span multiple columns.
  • Table Code With Caption & Cell Spacing <HTML> <BODY> <TABLE BORDER="1"> <CAPTION>My Caption</CAPTION> <TR> <TD>Milk</TD> <TD>Tea</TD> </TR> <TR> <TD></TD> <TD>Coffee</TD> </TR> </TABLE> </BODY> </HTML> CELLSPACING - defines the width of the border
  • Cell Padding , Image & Backcolour Code <HTML><BODY> <H3>Without cellpadding:</H3> <TABLE BORDER="2" BGCOLOR="GREEN"> <TR> <TD>Jones</TD> <TD>Smith</TD></TR> <TR> <TD>Hayes</TD> <TD>Jackson</TD></TR></TABLE> <H4>With cellpadding:</H4> <TABLE BORDER="8" CELLPADDING="10" BACKGROUND="FILE:///C:/WINDOWS/FEAT HERTEXTURE.BMP"> <TR> <TD>Jones</TD> <TD>Smith</TD></TR> <TR> <TD>Hayes</TD> <TD>Jackson</TD></TR></TABLE> </BODY> </HTML> CELLPADDING - offers opportunities of adjusting the white space of the table, that means the distance between cell borders and the content within.
  • HTML LIST TAG  Lists Are A Useful Way Of Presenting Information To The Reader In A More Presentable And Easy To Read Way. lists provide methods to show item or element sequences in document content. there are three main types of lists:-> 1.unordered lists:-unordered lists are bulleted. 2.ordered lists:- ordered lists are numbered. 3.definition lists:- used to create a definition list.
  • List Tags <LI> <OL> <UL> <DL> <DT> <DD> <LI> is an empty tag, it is used for representing the list items Ordered list Unordered list Defines a definition list Defines a term (an item) in a definition list Defines a description of a term in a definition list
  • Unordered List  TYPE attribute to the <UL> tag to show different bullets like:- • Disc • Circle • Square <UL TYPE =“DISC”>…..</UL> The attribute TYPE can also be used with <LI> element.
  • Code & Result Of The Unordered List <HTML> <BODY> <H4>DISC BULLETS LIST:</H4> <UL TYPE="DISC"> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></UL> <H4>CIRCLE BULLETS LIST:</H4> <UL TYPE="CIRCLE"> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></UL> <H4>SQUARE BULLETS LIST:</H4> <UL TYPE="SQUARE"> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></UL> </BODY> </HTML
  • Ordered List The TYPE attribute has the following value like:- 1.TYPE = "1" (Arabic numbers) 2.TYPE = "a" (Lowercase alphanumeric) 3.TYPE = "A" (Uppercase alphanumeric) 4.TYPE = "i" (Lowercase Roman numbers) 5.TYPE = "I" (Uppercase Roman numbers) By default Arabic numbers are used
  • 54 LIST ELEMENTS TYPE Numbering Styles 1 Arabic numbers 1,2,3, …… a Lower alpha a, b, c, …… A Upper alpha A, B, C, …… i Lower roman i , ii, iii, …… I Upper roman I, II, III, ……
  • Code & Result Of The Ordered List <HTML> <BODY> <H4>NUMBERED LIST:</H4> <OL> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></OL> <H4>LETTERS LIST:</H4> <OL TYPE="A"> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></OL> <H4>ROMAN NUMBERS LIST:</H4> <OL TYPE="I"> <LI>BLIS</LI> <LI>MLIS</LI> <LI>M.PHIL</LI> <LI>PH.D.</LI></OL> </BODY> </HTML>
  • Definition List • DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or more Definition Terms (DT elements), followed by one or more Definition Description (DD elements). <DL> <DT> HTML </DT> <DD> Hyper Text Mark-up Language </DD> </DL> HTML Hyper Text Mark-up Language
  • Nesting Lists • User can nest lists by inserting a UL, OL, etc., inside a list item (LI). Example <UL TYPE = “square”> <LI> List item …</LI> <LI> List item … <OL TYPE=“i” START=“3”> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> <LI> List item …</LI> </OL> </LI> <LI> List item …</LI>
  • HTML FRAMES • HTML frames help us to display multiple html documents in a web page. This frames are independent one of the other. A frameset is a file that specifies how the screen is divided into frames or specifies the Web Pages to display in each frame of the main web page. Here we have an example that divides the page into two horizontal frames, one having 30% of the page and other 70%. • <FRAMESET ROWS="30%,*"> </FRAMESET> FRAMESET ROWS - defines the height that each frame will have; FRAMESET COLS - defines the width that each frame will have; FRAME SRC - defines the location of the web page that will be loaded into the frame. 58 <frame> Defines a window (a frame) in a frameset <frameset> Defines a set of frames <noframes > Defines an alternate content for users that do not support frames <iframe> Defines an inline frame
  • HTML Form A form is an area that can contain form elements. Form elements are elements that allow the user to enter information in a form. like text fields, textarea fields, drop-down menus, radio buttons and checkboxes etc A form is defined with the <form> tag. The syntax:- <FORM> . Input Elements . </FORM>
  • FORM TAGS <FORM> <INPUT> <TEXT> <TEXTAREA> <PASSWORD> <LABEL> <OPTION> <SELECT> <BUTTON> <VALUE> <CHECKBOX> <DROPDOWN BOX> Defines a form for user input used to create an input field Creates a single line text entry field Defines a text-area (a multi-line text input control) Creates a single line text entry field. And the characters entered are shown as asterisks (*) Defines a label to a control Creates a Radio Button. Defines a selectable list (a drop-down box) Defines a push button attribute of the option element. select or unselect a checkbox A drop-down box is a selectable list
  • CODE OF THE HTML FORM <HTML><BODY><FORM> <H1>Create a Internet Mail Account</H1> <P>First Name <INPUT TYPE="TEXT" NAME="T1" SIZE="30"></P> <P>LAST NAME <INPUT TYPE="TEXT" NAME="T2" SIZE="30"></P> <P>Desired Login Name <INPUT TYPE="TEXT" NAME="T3" SIZE="20"> @MAIL.COM</P> <P>Password <INPUT TYPE="PASSWORD" NAME="T4" SIZE="20"></P> <INPUT TYPE="RADIO" CHECKED="CHECKED" NAME="SEX" VALUE="Male" /> Male</BR> <INPUT TYPE="RADIO" NAME="SEX" VALUE="Female" /> Female <P>BIRTHDAY <INPUT TYPE="TEXT" NAME="T6" SIZE="05"> <SELECT SIZE="1" NAME="D2"> <OPTION>-SELECT ONE-</OPTION> <OPTION>JANUARY</OPTION> <OPTION>FEBRUARY</OPTION> <OPTION>MARCH</OPTION> </SELECT> <INPUT TYPE="TEXT" NAME="T7" SIZE="10"></P> TypeYourself<TEXTAREA ROWS="4" NAME="S1" COLS="20"></TEXTAREA> <BR><INPUT TYPE="SUBMIT" VALUE="Accept" NAME="B1"> <INPUT TYPE="RESET“ VALUE="Cancel" NAME="B2"></BR> </FORM> </BODY> </HTML>
  • Advantages & Disadvantages Of HTML: • ADVANTAGES: 1. Ease to create a document. 2. Ease to tracing references. 3. Ease to displaying information 4. Ease to cresting new references. 5. Ease of information structuring. 6. Global views. 7. Ease for customising documents. 8. Ease of maintaining modularity of information. 9. Ease of maintaining consistency of information. 10.Task stacking facilities. 11.Collaboration.
  • • Disadvantages: 1. Users Non-interactivity. 2. Disorientation. 3. Cognitive overhead.
  • Some Shortcut Keys Of HTML Description Window, Linux Mac OS Edit attribute Click on name or value Click on name or value Edit text node Click on text Click on text Edit element Alt + Double-click tag name Alt + Double-Click tag name Next node in path Ctrl + . Ctrl + . Previous node in path Ctrl + , Ctrl + ,
  • Reference & Tutorial Websites • http://www.w3.org/html/ - World Wide Web Consortium W3C) • http://validator.w3.org/ - Official W3C validation page. • http://www.htmlcodetutorial.com/ • http://www.htmlgoodies.com/ • http://htmldog.com/ • http://reference.sitepoint.com/html • http://www.w3schools.com/html/DEFAULT.asp • http://www.tizag.com/htmlT/