Html ppt
- 1. Introduction HTML by M. Supriya
- 2. Introduction to HTML Creating and publishing a Web page Main HTML elements Block-level HTML elements Text-level HTML element Creating hypertext links Adding images to documents Building tables Post and Get Methods
- 3. HTML stands for Hyper Text Markup Language, the language used to design web pages. Two type of tags in html . Paired tags (Open And Close Tags. Ex: <H1>Some Text</H1>) Unpaired tags. (Ex: <br>) Text Mixed with Markup Tags. Tags Enclosed in Angle Brackets <H1>Introduction</H1>
- 4. What Dose Markup describe? Appearance Layout Content(can`t Enforce an Exact Look) Changes in html 3.2 to html 4.0 Standardization of frames Deprecation of formatting elements (vs. style sheets) Improved cell alignment and grouping in tables Mouse and keyboard events for nearly all elements Internationalization features
- 5. HTML Example Html Main Tags HEAD BODY
- 6. DOCTYPE HTML HEAD TITLE element required Optional elements : BASE META BGSOUND SCRIPT, NOSCRIPT STYLE LINK Main HTML Elements
- 7. BODY Element <BODY BGCOLOR="YELLOW"> HTML Attributes and Attribute Values BACKGROUND BGCOLOR TEXT LINK, VLINK, ALINK OnLoad, OnUnload, OnFocus, OnBlur Elements inside BODY element <BODY> Remaining HTML elements </BODY>
- 8. Headings H1 to H6 ALIGN Basic Text Sections P ALIGN PRE WIDTH ADDRESS BLOCKQUOTE Block-Level Elements
- 9. Lists OL ( Ordered (Numbered) Lists ) LI ( List entries ) UL ( Unordered (Bulleted) Lists ) Heading Types <H1 ...> ... </H1> <H2 ...> ... </H2> <H3 ...> ... </H3> <H4 ...> ... </H4> <H5 ...> ... </H5> <H6 ...> ... </H6> Attributes: ALIGN Values: LEFT (default), RIGHT, CENTER
- 10. Heading Examples Nesting tags Headings and other block-level elements can contain text-level elements, but not vice versa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1> Level-1 (H1) </H1> <H2 ALIGN="CENTER"> Level-2 (H2) </H2> <H3> <U>Level-3 (H3)</U> </H3> <H4 ALIGN="RIGHT"> Level-4 (H4) </H4> <H5> Level-5 (H5) </H5> <H6> Level-6 (H6) </H6> </BODY> </HTML>
- 11. Attributes: ALIGN LEFT (default), RIGHT, CENTER. Same as headings. Whitespace ignored (use <BR> for line break) Consecutive <P>’s do not yield multiple blank lines End Tag is Optional: P-The Basic Paragraph Fully-Specified <BODY> <P>Paragraph 1</P> <P>Paragraph 2</P> <P>Paragraph 3</P> </BODY> Equivalent with Implied Tags <BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 </BODY>
- 12. Links can contain images and other text- level elements (i.e., <A HREF…> ... </A>) Link to Absolute URL Use a complete URL beginning with http:// <A HREF="http://host/path/chapter2.html">Click Here</A>. Link to Relative URL Use a filename or relative path to filename Interpreted with respect to location of current file <A HREF="chapter2.html">Click Here</A>. Hypertext Link
- 13. Link to Section Use a section name (see below) preceded by # Images are discussed in <A HREF="#Section2">Section 2</A>. Link to Section in URL Use absolute or relative URL, then #, then section name Images are discussed in <A HREF="chapter1.html#Section2">Sec. 2 of Chap. 1</A>. Hypertext Link
- 14. Example <IMG SRC="Somename.gif" ALT="My Doll” WIDTH=400 HEIGHT=300> Attributes: – SRC (required) – ALT (technically required) – ALIGN (see <BR CLEAR="ALL">) – WIDTH, HEIGHT – HSPACE, VSPACE – BORDER – USEMAP, ISMAP IMG: Embedding Images
- 15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE>Image Alignment</TITLE></HEAD> <BODY> <H1 ALIGN="CENTER">Image Alignment</H1> <TABLE BORDER=1> <TR><TH>Alignment <TH>Result <TR><TH><CODE>LEFT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the right side, with text flowing around it on the left. ... </TABLE> </BODY> Image Alignment, Example
- 16. Template <TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR> <TH>Heading1</TH> <TH>Heading2</TH> </TR> <TR> <TD>Row1 Col1 Data</TD> <TD>Row1 Col2 Data</TD> </TR> </TABLE> Tables
- 17. TR – Table row. TH – Table header. TD – Table data. ALIGN – The ALIGN attribute gives the horizontal alignment of the table as a whole. – Legal values are LEFT, RIGHT, and CENTER, with LEFT being the default BORDER – This specifies the width in pixels of the border around the table – This is in addition to the border around each cell (the CELLSPACING). – The default is zero, which also results in the visible 3D divider between cells being turned off CELLSPACING – This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used – The default is usually about 3 TABLE Element Attributes
- 18. Frame Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD><TITLE>Document Title</TITLE></HEAD> <FRAMESET ...> <!-- FRAME and Nested FRAMESET Entries --> <NOFRAMES> <BODY> <!-- Stuff for non-Frames browsers --> </BODY> </NOFRAMES> </FRAMESET> </HTML>
- 19. • Certain parts of the interface (e.g., a TOC) are always on the screen • Can avoid retyping common sections of multiple Web pages • Consistent use across a large site sometimes simplifies user navigation • A convenient way to mix text-oriented HTML with Java applets • Image maps are more convenient if the map image remains on screen and only the results section changes Frame Advantages
- 20. • The meaning of the “Back” and “Forward” buttons can be confusing • Poorly designed frames can get the user lost • Hard to find real URL of a page you want – Printing problems! • Hard to bookmark "configuration" • Some very old browsers do not support frames Frame Disadvantages
- 21. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Frameset//EN"> <HTML> <HEAD><TITLE>Frame Example 1</TITLE></HEAD> <FRAMESET ROWS="55%,45%“><FRAMESET COLS="*,*,*"> <FRAME SRC="Frame-Cell.html“><FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="Frame-Cell.html“><FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES><BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">non-frames version</A>. </BODY></NOFRAMES> </FRAMESET> </HTML> Frame Example
- 22. Frame Example Result
- 23. Controls Text Box Password Radio Button Check Box Dropdown List Upload Button Syntax Of above Controls <input type=“ text” value=“VSP” /> Here type is show the control list above. Input Controls
- 24. Text Box Example: <html> <body> First name: <input type="text" name="firstname" /> </body> </html>
- 25. Pass Word Example: <html> <body> Username: <input type="text" name="user" /><br /> Password: <input type="password" name="password" /> </body> </html>
- 26. Checkbox Example: <html> <body> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </body> </html>
- 27. Radio Button Example: <html> <body> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </body> </html>
- 28. Dropdown Example: <Html> <Body> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </body> </html>
- 29. Text Area Example: <html> <body> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>
- 30. Button Example: <html> <body> <input type="button" value="Hello world!"> </body> </html>
- 31. Post and Get Methods In HTML, one can specify two different submission methods for a form. . GET : GET sends the data as part of the URL The value entered in the "town" field is tacked on to the end of the CGI's URL like this: ../cgi-bin/mycgi.pl?town= West+Rochester POST :
- 32. POST : POST is the preferred method for sending lengthy form data.. When a form is submitted POST the user does not see the form data that was sent : <FORM METHOD=POST ACTION="../cgi-bin/mycgi.pl">
- 33. Reference urls: Content URL: http://www.echoecho.com/documentationframe.htm?http&&&www.echoecho.com/html20/html-spec_toc.html Tags with Explanation : http://www.quackit.com/html/tutorial/ With Examples: http://www.w3schools.com/html/html_examples.asp
- 34. Thank You !