HTML by Suresh.N


Published on

HTML Tutorial for beginner

written by Suresh.N

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML by Suresh.N

  1. 1. HTML 1. Introduction: What is html?  Html is the “mother tongue” of your browser.  Html stands for Hypertext markup language. Why we need HTML? If you want to make websites, there is no way around HTML. Even if you are using a program to create website, such as Dreamweaver, a basic knowledge of Html can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. What software we need to learn Html? 1. Editor 2. Browser You have a “browser”. A browser is the program that makes it possible to browse and open websites. It is not important which browser you use. The most common is Microsoft internet explorer. But there are other browsers like Mozilla Firefox and Google chrome. To write Html code you need simple editor. If you are using windows you can use notepad, which is usually found in the start menu under programs. Page structure: The webpage consists of two sections 1. Head 2. Body  The head section is used for text and tags that don’t show directly on the page.  The body section is used for text and tags that are shown directly on the page. The basic structure for all HTML documents is simple and should include the following minimum elements or tags. <Html> -- The main container for html pages
  2. 2. <Head> -- The container for page header information <Title> -- The title of the page <Body> -- The main body of the page Remember that before an opening <Html> tag, an optional tag <Doctype> which declares the version of HTML and language it uses. Sample page: <! Doctype HTML PUBLIC “//w3c//DTD HTML 4.0 // EN//> <html> <head> <title>Welcome…..!</title> </head> <body> This is my first webpage </body> </html> The o/p will look like this…. 2. Basic Tags: Heading Tags : <h1>……. <h6>: Page headings are created with the <hn> tag, in which n is a number between 1 and 6. For example: <h1>Heading</h1> Unless otherwise specified, headings are displayed using a larger size of the default font. There are five levels of heading, each using a slightly smaller font size. The range of headings usually looks something like this: <html> <head> <title> Heading tags</title> </head> <body>
  3. 3. <h1> This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p><b>Tip:</b> Use the &lt;h1&gt; to &lt;h6&gt; tags only for headings. Do not use them just to make something bold. Use other tags for that.</p> </body> </html> The o/p will look like this…. Paragraph Tag: <p>... </P>: The paragraph tags are used to define a block of text as a paragraph. This HTML element is one of the basic HTML tags you should learn to use properly. When a block of text is surrounded by the paragraph tags, the browser automatically adds white space before and after the paragraph. <html> <head> <title> Heading tags</title> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
  4. 4. The o/p will look like this…. Line Break Tag :<br />  The line break tag is the <br> tag in HTML and <br /> in XHTML.  A br tag will insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser. <html> <head> <title>line break tags</title> </head> <body> <p>This is a paragraph without line break tags</p> <p>when you insert a br tag into your HTML coding it creates a line break.The text in this sentence is after a br tag.Here's a new sentence with the br tag inserted before it. </p> <p>this is a paragraph with line break tags </p> <p>when you insert a br tag into your HTML coding it creates a line break. <br /> The text in this sentence is after a br tag. <br /> Here's a new sentence with the br tag inserted before it. </p> </body> </html> The o/p will look like this….
  5. 5. Horizontal Line (<hr>) tag: The HTML <hr> tag is used for specifying a horizontal rule in an HTML document. <html> <head> <title>Horizontal line tag</title> </head> <body> <h1>HTML</h1> <p>HTML is a language for describing web pages.</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.</p> </body> </html> The o/p will look like this…. Comment <!--...--> Tag The HTML 'comments' tag is used for creating comments within your HTML code. Comments aren't displayed in the browser - they are simply there for the programmer's benefit. Comments can assist you, the HTML programmer, because you can write notes to yourself that explain what the code does. This is especially useful when you have a lot of code. <html> <head> <title>comment in html</title> </head> <body> <!--This is a comment. Comments are not displayed in the browser--> <p>This is a paragraph.</p>
  6. 6. </body> </html> The o/p will look like this…. <center> Tag: The HTML center tag is used to center-align HTML elements. <html> <head> <title>centre tag in html</title> </head> <body> <p>This is some text.</p> <center>This text will be center-aligned.</center> <p>This is some text.</p> </body> </html> The o/p will look like this…. Non-Breaking Space in HTML (&nbsp;): Have a look at this... <body> Something really cool </body>
  7. 7. The o/p will look like this…. The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid for it to be this way, but really, it's better like this. It gives you absolute control over the document's appearance. There is a nifty little code that means "space" to the browser: &nbsp; Try this instead... The & means we are beginning a special character, the ; means ending a special character, and the letters in between are sort of an abbreviation for what it's for. There are quite a few of these special characters. Here are five more. (Note: these should always be lower case.) &nbsp; non-breaking space &lt; < less-than symbol &gt; > greater-than symbol &amp; & ampersand &quot; “quotation mark 3. Formatting text: The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of the web page; however, too much variety in the text formatting can also look displeasing.
  8. 8. Bold - <b> </b>: The text in between the tags will be bold, and stand out against text around it, the same as in a word processor. Big- <big> </big>: The HTML big tag is used for specifying large text. Italic - <i> </i>: Italics display the text at a slight angle. Underline - <u> </u>: The HTML <u> tag is used for specifying underline text. Emphasis - <em> </em>: Used to emphasize text which usually appears in italics but can vary according to your browser. Strong Emphasis - <strong> </strong>: Used to emphasize text more, which usually appears in bold, but can vary according to your browser. Small - <small> </small>: Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it. Useful for displaying the 'fine-print'. Typewriter Text - <tt> </tt>: The text appears to have been typed by a typewriter, in a fixed-width font. For example: This text is written using the <tt></tt> tags. Cite- <cite> </cite>: The HTML cite tag is used for indicating a citation.
  9. 9. dfn- <dfn> </dfn>: The HTML dfn tag is used for indicating a definition. The dfn tag surrounds the word/term being defined. Strike-out - <strike> </strike> or <s> </s>: Puts a line right through the center of the text, crossing it out. Often used to show that text is old and no longer relevant. <del></del> and <ins> </ins>: Markup of deleted text can be useful in determining differences between multiple versions of the same document. Browsers will normally strike a line through deleted text and underline inserted text. <sup></sup> and <sub> </sub>: Subscripts and superscripts are often used in mathematical expressions and in languages such as French as a convention to represent some abbreviations. <html> <head> <title>text formatting in html</title> </head> <body> <p><b>This text is bold</b></p> <p><big>This text is big</big></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><u>This text is underlined</u></p> <p><em>This text is emphasized</em></p> <p><samll>This text is small</small></p> <p><cite>This text is citation</cite></p> <p><dfn>This text is definition text</dfn></p> <p><tt>This text is typewriter text</tt></p> <p><s>This text is striked</s></p> <p><strike>This text is striked</strike></p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
  10. 10. The o/p will look like this…. Few more tags: <html> <head> <title>text formatting in html</title> </head> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <samp>Sample text</samp> <br> <var>Computer variable</var>
  11. 11. <br> <blockquote>This text in block quote</blockquote> <br > <q>This text in quote</q> <br > <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> <address> Written by<br> <a href="">Email us</a><br> Address: Box 564, Disneyland<br> Phone: +12 34 56 78 </address> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html> The o/p will look like this….
  12. 12. 4. Lists: The most common HTML lists are ordered and unordered lists: An ordered list: 1. The first list item 2. The second list item 3. The third list item An unordered list: List item List item List item Unordered Lists: An unordered list is an unnumbered list. Unordered lists simply have a plain (or not so plain) bullet point for each item in the list. As the name suggests, unordered lists are not ordered - whether by number, letter, or any other ordering system. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul> How the HTML code above looks in a browser: Coffee Milk Ordered Lists: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> How the HTML code above looks in a browser:
  13. 13. 1. Coffee 2. Milk Definition Lists: A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the HTML code above looks in a browser: Coffee - black hot drink Milk - white cold drink More Examples: Different types of ordered lists: <html> <head> <title>Different types of ordered lists</title> </head> <body> <h4>Numbered list:</h4> <ol type="1" > <li>Apples</li> <li>Bananas</li> <li>Lemons</li>
  14. 14. <li>Oranges</li> </ol> <h4>Numbered list:</h4> <ol type="1" > <li value="5">Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>
  15. 15. The o/p will look like this…. Different types of unordered lists: <html> <head> <title>Different types of unordered lists</title> </head> <body> <h4>Disc bullets list:</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>
  16. 16. <h4>Circle bullets list:</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> The o/p will look like this…. Definition lists: <html> <head> <title>Definition list</title>
  17. 17. </head> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html> The o/p will look like this…. Nested list: <html> <head> <title>Nested list</title> </head> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
  18. 18. The o/p will look like this…. Nested list 2: <html> <head> <title>Nested list 2</title> </head> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html>
  19. 19. The o/p will look like this…. 5. Links: Links are found in nearly all Web pages. Links allow users to click their way from page to page. HTML Hyperlinks (Links): 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 HTML Link Syntax: The HTML code for a link is simple. It looks like this:
  20. 20. <a href="url">Link text</a> The href attribute specifies the destination of a link. Example: <a href="">Visit google</a> which will display like this: Visit google Clicking on this hyperlink will send the user to google homepage. Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element. HTML Links - The target attribute: The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab <a href="" target="_blank">Visit google!</a> Attribute Values: Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame <html> <head> <title>Html links</title> </head> <body> <a href="" target="_blank">Visit!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html>
  21. 21. The o/p will look like this…. Link to a location on the same page: <html> <head> <title>Link to a location on the same page</title> </head> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a id="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p>
  22. 22. <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> </body> </html> The o/p will look like this….
  23. 23. After clicking the link o/p look like this: 6. Images: HTML Images - The <img> Tag and the Src Attribute:  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. Syntax for defining an image: <img src="url" alt="some_text">  The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "" has the URL:  The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. HTML Images - The Alt Attribute: The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
  24. 24. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat"> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). HTML Images - Set Height and Width of an Image: 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: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load). Basic Notes - Useful Tips: Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully. Note: When a web page is loaded, it is the browser, at that moment, which actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image. Aligning images: <html> <head> <title>Aligning images</title> </head> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p> <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>
  25. 25. <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html> The o/p will look like this…. Make a hyperlink of an image: <html> <head> <title>Make a hyperlink of an image</title> </head> <body> <p>Create a link of an image: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> <p>border around the image,working as a link: <a href="default.asp"> <img border="2" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> </body> </html>
  26. 26. The o/p will look like this…. Syntax: <area coords="value"> Attribute Values: Value Description x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect") x,y,radius Specifies the coordinates of the circle center and the radius (for shape="circle") x1,y1,x2,y2,..,xn,yn Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly") Create an image map: <html> <head> <title>Create an image map</title> </head> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
  27. 27. The o/p will look like this…. 7. Tables: Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Table Example: <table border="1"> <tr> <td>row 1, cell 1</td> Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table
  28. 28. <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How the HTML code above looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tables without borders: <html> <head> <title>Tables without borders</title> </head> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
  29. 29. The o/p will look like this…. Table headers: <html> <head> <title>Table headers</title> </head> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>
  30. 30. The o/p will look like this…. Table with a caption: <html> <head> <title>Table with a caption</title> </head> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html> The o/p will look like this….
  31. 31. Table cells that span more than one row/column: <html> <head> <title>Table cells that span more than one row/column</title> </head> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> The o/p will look like this….
  32. 32. Tags inside a table: <html> <head> <title>Tags inside a table</title> </head> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> The o/p will look like this….
  33. 33. Cell padding: <html> <head> <title>Cell padding</title> </head> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The o/p will look like this….
  34. 34. Cell spacing: <html> <head> <title>Cell spacing</title> </head> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="0":</h4> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
  35. 35. The o/p will look like this…. create nested tables: <html> <head> <title>CREATE NESTED TABLES</title> </head> <body> <TABLE BORDER=3 CELLPADDING=5 ALIGN=CENTER> <TR> <TH ALIGN=CENTER>Product Name</TH> <TH ALIGN=CENTER>Price Per Unit</TH> <TH ALIGN=CENTER>Units Available</TH> </TR> <TR> <TD ALIGN=CENTER> <TABLE BORDER=1> <TR> <TD>Blue silk blouse-long sleeved</TD> </TR> <TR> <TD>Red silk blouse-long sleeved</TD> </TR> <TR> <TD>Black silk blouse-long sleeved</TD> </TR> </TABLE> </TD> <TD ALIGN=CENTER>$39.99</TD> <TD ALIGN=CENTER>120</TD> </TR> <TR> <TD ALIGN=CENTER>Pants</TD> <TD ALIGN=CENTER>$29.99</TD>
  36. 36. <TD ALIGN=CENTER>200</TD> </TR> </TABLE> </body> </html> The o/p will look like this…. 8. Frames: Frames have been around for a long time now, supported by every known browser. While some consider them annoying, nicely designed, frames could be very helpful when navigating a site. In this tutorial, we will talk about how to implement frames, and finish up with how to create borderless frames, and how to create links that load content into another frame. Everything you need to know to create frames: All frames are created using the <frameset> tag. This essentially makes up the "master" page, which will "contain" the pages that users actually see. The "master" page, with the <frameset> tag, replaces the <body> tag, meaning you DO NOT use the <body> tag anywhere inside this master page. This master page is than fitted with the individual pages that are "put" inside it. Ok, let’s have a look at how exactly this is done: The following example creates a page with two frames: //master page <html> <head> <title>My example</title> </head> <frameset cols="30%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </html> page1 page2
  37. 37. Page1.htm and Page2.htm are created separately as "normal" html pages, and are contained within this master page. We used the keyword "cols" to indicate that we want to define column frames. To create rows instead, simply use the keyword "rows": <html> <frameset rows="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </html> page1 page2 In both of these examples, we used percentage as the width measurement. You could also use pixels, with some caution, however: <html> <frameset cols="100,200,340"> <frame src="page1.htm"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </html> page1 page2 page3 If you add up the total width (100+200+340=640), this will equal the width of a screen at resolution 640*480. Most 14' screens are set as such, but how about people using screen resolutions of (800*600)? If they come along, how will your frame page be displayed? Well, the browser will have no choice but to stretch the width to exceed 640, in order to accommodate this larger screen. (All frames defined using percentage will be stretched, (or shrunk) depending on the user's screen resolution). This could lead to headaches for developers, since you never know how you frames will be displayed. Does that mean that you should never use pixels than? Absolutely not. Let’s see how we can get over this: <html> <frameset cols="100,200,*"> <frame src="page1.htm"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </html> page1 page2 page3 We used a special keyword "*", which means undefined. By using this, only this part will be stretched, if necessary. The other two, 100, and 200, will not be inadvertently stretched. That way, you can keep all pages with layout that do not want to be stretched on the left two frames, and the one that's ok with it, on the right frame. Creating complex frames: So far, we've only created simple, either all columns, or all rows, frames. Now let’s march on to ones with both, shall we?
  38. 38. The key to defining frames with both columns and rows is to place multiple pairs of <frameset></frameset> tags in your master page, each pair enclosing a "cols" or "rows" declaration. This can get a little tricky, so I'll try to explain using multiple examples. Let's start slicing <html> <frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> <frame src="page3.htm"> </frameset> </html> page1 page3 page2 Ok, what the heck is going on? First, in blue, we defined two columns. Then, for the first column, we sliced that even more-into two rows. As you can see, the rows and columns "chunk" all end with a </frameset> tag, two to be exact. Like I said, we started out the "framing" by defining cols="50%, 50%". Let’s see what happens if we defined the rows first, instead of the other way round: //master page <html> <frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> <frame src="page3.htm"> </frameset> </html> page1 page2 page3 As you may see, totally different outcomes! Confused? Here's a good rule to remember: Whenever you slice a frame, either into columns or rows, your slice will keep slicing until it hits a "wall". Complex frames step-by-step example: Let’s put the above rule into good use. Remembering this rule will save you a lot of trouble. Ok, assuming we want to create a frame like this: This may look overwhelming, but if you keep that sushi rule firmly in your head, you'll be fine. How shall we go about doing it? Start with rows? Columns? Well, first take out our knives, and remember, this knife will keep slicing until it hits a "wall". If we started with rows, we would have something like this:
  39. 39. This sushi knife keeps cutting until it hits an obstacle, in this case, the edge of the page. As you can see, starting off using rows would make it impossible to achieve our desired goal. Ok, let’s begin with columns then: <html> <frameset cols="33%,17%,17%,17%,17%"> </frameset> </html> Now we need to split the first column into two rows. Remember, this Swiss knife isn't really sharp, so it won’t cut through the walls of the first column. <html> <frameset cols="33%,17%,17%,17%,17%"> <frameset rows="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </frameset> </html> page1 page2 As you can see, the "rows" part is nested within the "cols" part, since the rows are a "subpart" of the columns declaration. Let’s continue our sushi chopping, shall we? <html> <frameset cols="33%,17%,17%,17%,17%"> <frameset rows="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> <frame src="page3.htm"> <frame src="page4.htm"> </frameset> </html> page1 3 4 page2
  40. 40. And finally: <html> <frameset cols="33%,17%,17%,17%,17%"> <frameset rows="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> <frame src="page3.htm"> <frame src="page4.htm"> <frameset rows="50%,50%"> <frame src="5.htm"> <frame src="6.htm"> </frameset> <frame src="7.htm"> </frameset> </html> page1 3 4 5 7 page2 6
  41. 41. 9. Forms: HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area, field set, legend, and label elements. Input element <input> </input>: The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. Simple form: <form name=”form1” action=”index.html” method=”post” > <input type=”text” name=”data” size=”20” maxlength=”10” value=”default value” disabled=”disabled” /> </form> In the above example form tag contains attributes: Name: describes the name of the form Action: used to specify the page to open after submitting the form Method: used to send the data to server (POST or GET). In the above example input tag contains attributes: Type: describes the type of input element we are using. there are several types like Text, password, checkbox, radio, submit, reset, button, file, image, hidden. Name: describes the name of the field. Size: used to specify the width of the text field or password field. Maxlength: used to specify number of characters allowed to enter in that text or password field. Value: used to display the default value in the text field.
  42. 42. Disabled: used to disable the text field or password field. Textbox and password: <html> <head> <title>text box and password fields</title> </head> <body> <h3>normal textbox</h3> <input type="text" /> <h3>text box with 10 characters width and max of 5 characters allowed to enter<h3> <input type="text" size="10" maxlength="5" /> <h3>text box with defult value</h3> <input type="text" value="default value comes here" /> <h3>disabled text box</h3> <input type="text" disabled="disabled" /> <h3>password field</h3> <input type="password" /> </body> </html> The o/p will look like this…. Radio Buttons: <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
  43. 43. <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> How the HTML code above looks in a browser: Male Female Check boxes: <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> How the HTML code above looks in a browser: I have a bike I have a car Submit Button: <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> How the HTML code above looks in a browser: Username: Submit
  44. 44. If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input. Reset button: When a user clicks a reset button, the entries are reset to the default values. <form> … fields … <input type=”reset” value=”Reset the form” > </form> Button: We can create a button using <input> tag and <button> tag. Using <input> tag: <form action=""> <input type="button" value="Hello world!"> </form> Using <button> tab: The <button> tag defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element. <button type="button">Click Me!</button> At first glance, it may appear that there's not much difference between using the <button> tag and <input> tag. But there are some differences. The main difference is that the <button> tag allows you to place HTML code in between the opening and closing tags. The <input> tag is an empty tag (i.e. it doesn't have a closing tag), so you can't add content to the tag. <html> <head> <title>Buttons</title> </head> <body>
  45. 45. <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="Submit"> <br /> <input type="reset" value="reset" > <br /> <input type="button" value="this is button" > <br /> <button type="button" >another button</button> </form> </body> </html> The o/p will look like this…. File: Upload fields provide the interface that allows users to select a local file and upload it to the web server. An upload field renders as two parts -- an empty text field and a Browse button that opens up a local window explorer on the user's computer. This allows them to quickly browse to the local file and automatically fills in the file path inside of the text field. <html> <head> <title>uploading file</title> </head> <body> <form action="demo_form.asp"> Select a file: <input type="file" name="img"> <input type="submit">
  46. 46. </form> </body> </html> The o/p will look like this…. Text area <textarea> </textarea>: The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. <textarea rows="4" cols="50"> At you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea> The o/p will look like this…. Select from dropdown: The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. The size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.
  47. 47. The multiple attribute is a boolean attribute. When present, it specifies that multiple options can be selected at once. Selecting multiple options vary in different operating systems and browsers:  For windows: Hold down the control (ctrl) button to select multiple options  For Mac: Hold down the command button to select multiple options Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead. The <optgroup> is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user. <html> <head> <title>select drop down list</title> </head> <body> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select size="3" > <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select name="cars" multiple > <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option>
  48. 48. </optgroup> </select> </body> </html> The o/p will look like this…. Simple form:  The <fieldset> tag is used to group related elements in a form.  The <fieldset> tag draws a box around the related elements.  The <legend> tag defines a caption for the <fieldset> element. <html> <head> <title>simple form</title> </head> <body> <FORM METHOD=POST ACTION="" > <fieldset> <legend> <table border=0 cellspacing=0 cellpadding=2> <tr> <td colspan=2> <font size=2 face="arial" color="#000000"> <INPUT type="text" name=URL size=17 value="http://"> :Your URL<BR> <INPUT type="text" name=user size=17> :Your Username<BR> <INPUT type="text" name=email size=17> :Your E-mail </font> </td> </tr> <tr> <td> <font size=1 face="arial" color="#000000"> <INPUT name=subscribe type=radio value="yes" CHECKED> subscribe<BR> <INPUT name=subscribe type=radio value="no"> unsubscribe<BR> </font> </td> <td> <SELECT name="choices" size=1>
  49. 49. <OPTION selected> OPTIONS <OPTION> OPTION 1 <OPTION> OPTION 2 <OPTION> OPTION 3 <OPTION> OPTION 4 <OPTION> OPTION 5 </SELECT> </td> </tr> <tr> <td colspan=2> <font size=1 face="arial" color="#000000"> <INPUT type=checkbox name="html" value="sendme" CHECKED> i can recive email as html<BR> <INPUT type=checkbox name="receipt" value="sendme"> send me a recipt for this email<BR> </font> <TEXTAREA cols=20 rows=10> Hey ! what do you think of the form? cool huh? </TEXTAREA><br> <center> <INPUT type=submit value=Send> <INPUT type=reset value="Clear"> </center> </td></tr></table> </legend> </fieldset> </FORM> </body> </html> The o/p will look like this….
  50. 50. 10. Tags not covered so far: <script> Tag: The HTML script element is used to insert client side script code into a document. This can be achieved in two ways: inserting the code directly as content of this element or referring to an external file containing script code with the "src" attribute. In the second case, user agents should ignore the content of the element. There are many client side languages that can be inserted in an HTML document, and this must be specified in the "type" attribute. In the first example, a pice of script is inserted directly in the document. <script type="text/javascript"> function addtext() { document.write('This text has been added by a script.'); } </script> In the second example, an external file containing script code is referred using the "src" attribute. <script type="text/javascript" src="addtext.js"></script> <style> Tag: The HTML style element allows authors to insert style sheets information inside the document. Differently from the "style" attribute, this element allows the insertion of classes or ID selectors, increasing the versatility of the style sheets implementation. The HTML style element can only be inserted in the document's head (HTML head element). Another alternative for inserting style sheet information, and maybe more convenient because of the possibility of sharing it among many documents, is to place a reference to an external file using the HTML link tag. This way, many documents can link to a single style sheets files making it easier to edit the visual aspects of the elements. <head> <style type="text/css"> p {font-size: 8pt; font-family: arial,helvetica} p.big {font-size: 12pt; font-family: arial,helvetica} </style> </head>
  51. 51. <link> Tag: The HTML link element is very similar to the HTML a element because it's used to link a document to other resources. But unlike it, the HTML link element can only be defined in the head section of the document (HTML head element). For example, authors can link to a document that acts as index for the current document, to an alternate version in other language, or an alternate version designed for other media (e.g., a printer). A particular and very common use for the HTML link tag is to provide an external style sheets file for the document. <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <meta> Tag: The HTML meta element allows authors to insert custom varibales or properties for HTML documents. These variables are composed by two values: the name of the property and its value. Additionally, you can include other information that may improve the comprehension of its purpose. The HTML meta element must be included in the head section of the document and can contain information like: author, keywords, descriptions, dates, expiration dates, codes, identifiers, etc. Examples: Example 1 - Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Example 2 - Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS"> Example 3 - Define the author of a page: <meta name="author" content="Hege Refsnes"> Example 4 - Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
  52. 52. <object> Tag: HTML <object> - embedding media: The <object> tag is used for embedding media contents (such as images, Java applets, Flash, movie, audio, or even another HTML file) on a web page. The object element is partially supported in all major browsers; depend on the object inserted into HTML document. If the object element is not displayed, the code between the <object> and </object> tags will be executed, so you can add an alternative text or an image. This element is designed to include any sort of document. It uses the type attribute to indicate the "mime type", and the data attribute to indicate the source of the document (its URI). If the browser (or one of its plugin) can interpret the embedded object, will download and play /run it, otherwise the nested content of the object is displayed. Any HTML code can be inserted as an alternative content, for example a link to the document or an image. Examples: Embed a PDF document: <object type="application/pdf" data="dir/html_course.pdf" width="300" height="200"> <img src="dir/html_course.jpg" alt="HTML course" /> </object> - Here the browser will show a PDF document if it supports the PDF format, otherwise it will show a JPG image (html_course.jpg). The "width" and "height" attributes define the visible area of the object. The browser scale the object to these dimensions. Embed an HTML file: <object type="text/html" data="dir/test.html" width="500" height="350"> alt: <a href="dir/test.html" title="Test">test.html</a> </object> - If the browser can't use the object element to include an "text/html" file, will show the link added between the <object> and </object> tags (alt: test.html). • The object element may also contain a number of param elements to define parameters or values for the object when it displays or plays.
  53. 53. Embed a SWF file: - This example includes a Flash game (in SWF format), and uses a <param> tag to define a background color for the area in which the game is displayed (set with the "width" and "height" attributes). - Internet Explorer sometimes needs a <param> with a src parameter to understand the location. <object type="application/x-shockwave-flash" data="games/cubilus.swf" width="500" height="250"> <param name="src" value="html/l/cubilus.swf" /> <param name="bgcolor" value="#fbfbfe" /> Your browser not support SWF. </object> If the browser supports SWF application, will display the "cubilus" game, otherwise shows the text: "Your browser not support SWF." Embend a WAV file: <object type="audio/x-wav" data="dir/test.wav" width="200" height="20"> <param name="src" value="dir/test.wav" /> <param name="autoplay" value="false" /> <param name="autoStart" value="false" /> Alt : <a href="dir/test.wav" title="WAV file">test.wav</a> </object> - Depending on the object, the major browsers use different codes to load the same object type. QuickTime understand the "autoplay" parameter. Windows media Player and Real Audio understand "autoStart" parameter. Embendding audio MP3: <object type="audio/mpeg" data="audio/test.mp3" width="200" height="20"> <param name="src" value="audio/test.mp3"> <param name="autoplay" value="false" /> <param name="autoStart" value="false" /> Your system can't play audio/mpeg files. </object> Embendding MOV files: - For some types, like QuickTime document (MOV files), IE needs a non-standard value to the classid attribute, an identifier to load an associated activeX. We can nest another object as an alternative content, for the other browsers that use the standard code:
  54. 54. <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="" width="480" height="360"> <param name="src" value="dir/"> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <object type="video/quicktime" data="dir/" width="480" height="360"> <param name="controller" value="true" /> <param name="autoplay" value="false" /> You do not have QuickTime Player installed. </object> </object> <marquee> tab: A HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your web site page depending on the settings. This is created by using HTML tag <marquees>. Syntax: A simple syntax to use marquee is as follows: <marquee attribute_name="attribute_value"....more attributes> One or more lines or text message or image </marquee> Attrubutes: A HTML marquee can have following attributes: width: how wide the marquee is. This will have a value like 10 or 20%etc. height: how tall the marquee is. This will have a value like 10 or 20% etc. direction: which direction the marquee should scroll. This will have value either up,down, left or right. behavior: what type of scrolling. This will have value scroll, slid and alternate. scrolldelay: how long to delay between each jump. This will have a value like 10 etc. scrollamount: how far to jump. This will have a value like 10 etc. loop: how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. bgcolor: background color. This will have any color name or color hex value.
  55. 55. hspace: horizontal space around the marquee. This will have a value like 10 or 20%etc. vspace: vertical space around the marquee. This will have a value like 10 or 20%etc. Examples: <marquee>This is basic example of marquee</marquee> <marquee width="50%">This example will take only 50% width</marquee> <marquee direction="right">This text will scroll from left to right</marquee> <marquee direction="up">This text will scroll from bottom to up</marquee> <div> tag: The HTML div element is a block level container for other elements. By itself, it has no presentational or semantic meaning, except that, as a block level element, browsers will render a line break before and after its content. HTML div elements acquire their potential when used together with Style Sheets, as they are very useful to assign a set of presentational attributes to entire blocks of content. Another good use for it, and maybe the most important, is designing a document's layout. DIVs come to replace the old way of setting the layout of a document, which used tables to arrange the distribution of content. These table layouts mean a misuse of the HTML table element, which purpose is to represent tabular data. <div id="Layer1" style="position:absolute; visibility:visible; width:300px; height:294px; background-color:#FFFFCC; layer-backgroundcolor:#FFFFCC; border:1px none #000000; z-index:1"> <p><img src="yourImage.jpg" alt="" width="300" height="225"></p> <p align="center">This div element contains an image plus a center aligned te xt.</p> </div> <div id="Layer2" style="position:absolute; visibility:visible; width:315px; height:174px; background-color:#EEEEEE; layer-background-color:#CCFFCC; border:1px none #000000; z-index:2"> <p>Text.</p> </div>