Hypertext MarkUp Language(HTML)

Page 1

Table of Content

Introduction to Web..2

Introduction to HTML.4 Body Tag.6 Title, Heading, Paragraph....7 Special Character.....8 Fonts.9 Lists10

Links in HTML..13

Images in HTML16

Tables in HTML.19

Frames in HTML23

Forms in HTML.27

Appendix.30

Page 2

Introduction to Web
What is WWW?
WWW stands for World Wide Web, and it is an advanced information retrieval system. Currently it is mostly in an experimental stage, but it is being developed rapidly. In a sense WWW competes with the Gopher information system. Notice that using WWW you can also access information in Gopher (and in FTP servers, Usenet news, etc.). WWW supports more kinds of information than Gopher, for instance pictures, graphs, colours and fonts, provided that the user's device supports them. Voice can also be delivered, if the user's device has a sound generator. WWW can also be used on a simple terminal, but then pictures are replaced by just a notation like [IMAGE]. WWW is based on hypertext, which means, among other things, that when the user is navigating on the ocean of information he can pick up an interesting word or expression within a text and request for more information about it. This does not apply to all words in a text but only to those who have been properly designated as such by the producer of the information and which are displayed on screen e.g. as underlined. In practise the use of WWW is still largely similar to the use of simpler, menu-driven information systems. In most Unix machines of the Computing Centre, WWW can be started by the command www which selects the proper mode of operation (actually, the proper program, viz. lynx or Mosaic) according to the characteristics of user's device. You will first see the HUT home page in Finnish. To access information in English, select (in the manner described below) the item HUT information in English. Alternatively, you can start WWW so that it gets you directly to the home page in English: www http://www.hut.fi/English/www.english.html This intense interest in the Web is a result of the potential it offers for communication. Using the Web, individuals or organizations can instantaneously and continuously present hypermedia--text images, movies, and sound-to a GLOBAL audience. For Web developers, this information environment demands excellent, effective content development in order to rise above the information clutter. With so much information on the Web, only that which truly meets user needs well can survive and flourish.

What is HTTP?
At first what is Protocol? Protocol means a way of communication between two or more parties. To connect two parties like client and server at first we need to establish a connection between them and after that we need to start communication in such a way so that anyone can understand each other. To establish a connection we need a special

Page 3

protocol named Transmission Control Protocol/Internet Protocol (TCP/IP). Which has become the industry-standard method of interconnecting hosts, networks, and the Internet. Now think that connection between client and server has been established. Now we need to set a way of communication like messages, so that they can understand both. This message format standard is HTTP which defines how client will send a request to the server and how the server will response. HTTP stands for "Hypertext Transfer Protocol". In case of Web Browser and Web Server, The Web Browser is HTTP Client and the Web Server is HTTP Server. More precisely the definition of HTTP protocol is a protocol designed to allow the transfer of Hypertext Markup Language (HTML) documents. An HTTP transaction is divided into four steps: 1. The browser opens a connection by using TCP/IP. 2. The browser sends a request to the server --> The request is a message and the message format follows HTTP Protocol. 3. The server sends a response to the browser --> The response also a message and the message format follows HTTP Protocol. 4. The connection is closed. So what we understand? We understand on the Internet, HTTP communication generally takes place over TCP connections. The default port is 80 but other ports can be used.. HTTP Protocol is Connection less: The protocol is called connection less because An HTTP client opens a connection and sends a request message to the HTTP server, After that the server then returns a response message containing the resource which was requested. After delivering the response, the server closes the connection unlike other protocol likes FTP, which makes HTTP Protocol is a connection less protocol. HTTP protocol is State less: When the server responded of client request, the connection between client and server is closed means forgotten. There is no "Tracking System" between client and server. The HTTP server takes every request as a new request means never maintain any connection information between transactions. But there are some ways to maintain states between client and server which i have already described in my previous article: "Passing data/parameters/values from one aspx page to another aspx page".

What is HTTPS?
HTTP is Hyper Text Transport Protocol and is transmitted over the wire via PORT 80(TCP). You normally use HTTP when you are browsing the web, its not secure, so someone can eavesdrop on the conversation between your computer and the web server. HTTPS (Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL) is a Web protocol developed by Netscape and built into its browser that encrypts and decrypts user page requests as well as the pages that are returned by the Web server. HTTPS is really just the use of Netscape's Secure Socket Layer (SSL) as a sublayer under its regular HTTP application layering. (HTTPS uses port 443 instead of HTTP port 80 in its interactions with the lower layer, TCP/IP.) SSL uses a 40-bit key size for the RC4 stream encryption algorithm,new-age browsers use 128-bit key size which is more secure than the former, it is considered an adequate degree of encryption for commercial exchange.HTTPS is normally used in login pages, shopping/commercial sites.
Page 4

Chapter-1 Introduction to HTML

What is HTML?
HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file extension. An HTML file can be created using a simple text editor. The rule-making body of the Web is World Wide Web Consortium (W3C). W3C puts together specifications for Web standards. The most essential Web standards are HTML, CSS and XML.

HTML Elements
1. HTML tags are surrounded with angle brackets (< >). 2. HTML tags are not technically case sensitive, but for good practice (xHTML compliance), always use lowercase. 3. HTML tags are often in pairs with a starting tag and ending tag (<body></body>). 4. HTML tags must have a closing tag. For paired tags, this means the second tag: </p>, for others, the closing slash is in the tag itself: <br /> (xHTML compliance) 5. "Nested" HTML tags should close in the reverse order of the opening tags: <body> <strong>Curriculum Vitae</strong> </body> 6. Some tags can have properties (or "attributes") which further refine the effects of the tag: <p class="pink"> <img alt="logo">

HTML Page Format

<html> <head> <title> document title </title> </head> <body> your page content </body> </html> All HTML pages will have these tags. The <html> tag tells the browser to read and render the page in HTML. The ending </html> tag tells the browser that this is the end of the page. The <title> tag denotes the title displayed on the top left of the browser. It must be placed inside the <head> tag, which is closed </head> before the body of the page begins. All of the content of the page, the text, images, media, etc, is enclosed between <body> and </body>.

Page 5

View an HTML Document

Hypertext Markup Language, or HTML for short, is what tells a web browser how a page should look. An HTML document contains two components: content (e.g., course schedule information) and HTML commands that specify the placement and formatting of the content (e.g., display the course name in bold, the instructor's name in italics, and show all the classes in a grid layout). Example: Creating a simple web page 1. Start Notepad. 2. Type in the following text <html> <head> <title>Title of page</title> </head> <body> This is a very basic webpage. <b>This text will be displayed in bold</b> </body> </html> 3. Save the file as "firstpage.html". 4. Double click the saved file the browser will display the page. Example Explained: The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font. HTM or HTML Extension? When you save an HTML file, you can use either the .htm or the .html extension. We have used .html in our example.

Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Page 6

Body Tag with its Attributes

When you create a Web page, you can change several things in the body of your document by adding extra commands to the <body> tag. Here is what a body tag with several additions would look like: < body bgcolor="black" text="red" link="yellow" alink="orange" vlink="white" background="image.gif"> Pretty long tag, isn't it? Well, you can use as many or as few of these add-ons as you wish. The options you don't use will be set to the Web browser's default values. Below is a brief explanation of each attribute, with a link to the tutorial for each one. (If you are moving through the tutorials in order, we will eventually get to each one of these.) So here we go... bgcolor="color" This changes the background color of your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting varies with your browser, but is usually gray or white. text="color" This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting for text color is black. link="color" This changes the color of all of the non-visited links on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting for a non-visited link is usually blue. alink="color" This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use. Just replace color above with a color name or hex code. vlink="color" This changes the color of a visited link on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting for a visited link is usually violet. background="image.gif" This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.

Page 7

Page Title
All HTML pages should have a page title. To add a title to your page, change your code so that it looks like this: <head> <title>Basic Web Sample</title> </head>

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>This is First-Level Heading</h1> <h2>Second-Level Heading</h2> <h3>Third-Level Heading</h3> <h4>Fourth-Level Heading</h4> <h5>Fifth-Level Heading</h5> <h6>Sixth-Level Heading </h6> HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph.

Preformatted Text
<pre> The ability to output preformatted text is needed in HTML because the usual behaviour is to throw unnecessary whitespace away. For example: <p> Cascading Style Sheets from World WideWeb Consortium </p> will be displayed as: Cascading Style Sheets from the World Wide Web Consortium

Page 8

This loses all the flavour of cascading that was in the original layout. Replacing p by pre as the element produces something like Cascading Style Sheets from World WideWeb Consortium

Some Special Characters

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &lt; or &#60; The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity. Most Common Character Entities Result Description non-breaking space < > & " ' less than greater than ampersand quotation mark apostrophe Entity Name &nbsp; &lt; &gt; &amp; &quot; &apos; (does not work in IE) Entity Number &#160; &#60; &#62; &#38; &#34; &#39;

Page 9

Additional Commonly Used Character Entities Result Description Cent Pound Yen Section Copyright registered trademark Multiplication Division Entity Name &cent; &pound; &yen; &sect; &copy; &reg; &times; &divide; Entity Number &#162; &#163; &#165; &#167; &#169; &#174; &#215; &#247;

Fonts
Font presentation is controlled using the font tag, <font></font>.Font sizes are specified 1 through 7 with 1 as the smallest and 7 the largest. <font size="3">This text is font size 3.</font> Size 3 is the default size. That is the size that is "normal" for most browsers under most circumstances. You can experiment with the font sizes by changing the value using 1 through 7. The list below shows what these sizes look similar to what is shown below. Remember, actual font size will depend on many factors, including the size of the monitor screen.
Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7
It is also possible to specify font sizes relative to the settings in the browser. This is done using font size attributes that are placed with "+" or "-". An example is on the right where the size +2 is used. This means that the font should be displayed 2 sizes larger than the browser's default size. <font size="+2">This text is font size 6.</font>

Common Attributes of Font Tag

Page 10

Attribute color

Value rgb(x,x,x) #xxxxxx colorname font_family

Description Not supported in HTML5. Deprecated in HTML 4.01. Specifies the color of text

face

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the font of text Not supported in HTML5. Deprecated in HTML 4.01. Specifies the size of text

size

Number

Lists
There are three types of list; unordered lists, ordered lists and definition lists. Unordered lists and ordered lists work the same way, except that the former is used for nonsequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers. List Tags Tag <ol> <ul> <li> <dl> <dt> <dd> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description

Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Bread</li> <li>Butter</li> </ul> Here is how it looks in a browser:
Page 11

Bread Butter

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol> <li>Bread</li> <li>Butter</li> </ol> Here is how it looks in a browser: 1. Bread 2. Butter Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Definition Lists A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag. <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

Page 12

Exercise
1. 2. 3. 4. Create a webpage that prints your name to the screen. Create a webpage that prints the numbers 1 - 10 to the screen. Create a webpage and set its title to "This is a webpage". Create a webpage that prints the message "When was this webpage created? Check page's title for the answer." to the screen, and set the title of the page to the current date. 5. Create a webpage that prints any text of your choosing to the screen, do not include a head section in the code. 6. Print your name in green. 7. Print the numbers 1 - 10, each number being a different color. 8. Prints your name in a Tahoma font. 9. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. 10. Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded. 11. Print your name to the screen with every letter being a different heading size. 12. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100). 13. Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading. 14. Print two paragraphs that are both indented using the &nbsp; command. 15. Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list. 16. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading. 17. Print some preformatted text of your choosing. (hint: use the <pre> tag). 18. Print a long quote and a short quote. Cite the author of each quote. 19. Print some deleted and inserted text of your choosing. 20. Print a definition list with 5 items. 21. Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center). 22. Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent

Page 13

Chapter-2 Links in HTML

Links
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 syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to EEE 111 webpage: <a href="http://www.google.com">Search in Google</a> The line above will look like this in a browser: Search in Google The Target Attribute With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.google.com" target="_blank"> Search in Google</a> The Anchor Tag and the Name Attribute The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a> The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor:

Page 14

<a href="#down">Bottom of the page</a> You should notice that a named anchor is not displayed in a special way. To link directly to the "down" section, add a # sign and the name of the anchor to the end of a URL, like this: <a href="http://www.google.com#down">Jump to down section</a> A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like this: <a name="down">Down is here</a>

Page 15

Exercise
1. Create links to five different pages on five different websites that should all open in a new window. 2. Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. 3. Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page. 4. Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.

Page 16

Chapter-3 Images in HTML

Images
Images are inserted in HTML using <img> tag. The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Example: <img src="smiley.gif" alt="Smiley face" height="42" width="42"> Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. Tip: To link an image to another document, simply nest the <img> tag inside <a> tags. Attributes of <img> Tag Attribute align Value top bottom middle left right Text Pixels Description Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of an image according to surrounding elements

alt border

Specifies an alternate text for an image Not supported in HTML5. Deprecated in HTML 4.01. Specifies the width of the border around an image Specifies the height of an image Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on left and right side of an image Specifies an image as a server-side image-map Not supported in HTML5. Specifies the URL to a document that contains a long description of an image Specifies the URL of an image

height hspace

Pixels Pixels

ismap longdesc

Ismap URL

src

URL

Page 17

usemap vspace

#mapname Pixels

Specifies an image as a client-side image-map Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on top and bottom of an image Specifies the width of an image

width

Pixels

Page 18

Exercise
1. Display five different images. Skip two lines between each image. Each image should have a title. 2. Display an image that has a border of size 2, a width of 200, and a height of 200. 3. Display an image that when clicked will link to a search engine of your choice (should be opened in a new window). 4. Display an image that when clicked will link to itself and will display the image in the browser by itself.

5. NOTE: Include the alt attribute in every <img> tag in the HTML image exercises.

Page 19

Chapter-4 Tables in HTML

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). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tables and the Border Attribute If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Headings in a Table Headings in a table are defined with the <th> tag. <table border="1"> <tr>
Page 20

<th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How it looks in a browser: Heading Another Heading

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Empty Cells in a Table Table cells with no content are not displayed very well in most browsers. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:
Page 21

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table> How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1

Table Tags Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption 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

Page 22

Excercise
1. Create tables given in excercise Exercise 1. A B C D E F Exercise 2. A B C D E F

Exercise 3. Title goes here A B C D E F

Exercise 4. A Title goes here B C D E F

Exercise 5.

Exercise 6.

D Title goes here

A B C

D E F

Title goes here

Exercise 7. Title goes here A D C N H K L O E I M J F B G

2. Create a Calendar of you birth month with an image.

Page 23

Chapter-5 Frames in HTML

Frames
Frames were introduced by Netscape as a way of solving the download problems caused by large pages with many images. If a page had a set of buttons for navigation and a set of logos to display, quite a bit of the information on the page would not change from page to page. The solution is to break the browser's window into a set of rectangular areas and allow each to be updated independently. The HTML document now looks something like this. <html> <title>The Title</title> <frameset> <frame /> <frame /> <frame /> </frameset> <noframes> <body> --</body> </noframes> </html> The attributes of the frameset define how the window of the display is to be broken up: rows: defines the number of rows cols: defines the number of columns Both attributes have a comma separated list of values that define the size of each row or column respectively. These values can be one of the following types: integer: defines the size as a number of pixels percentage: defines the size as a percentage of the available area integer *: defines the size as a fraction of the available space *: same as 1* For Example: <frameset cols="100, 10% , *, 3*"> If the window was 800 pixels wide, this would divide the area into four columns. The first would be 100 pixels wide, the second 80 pixels wide, the third would be 155 pixels and the fourth 465 pixels. The remaining space has been divided up in the ratio 1:3 between the last two columns. If both the cols and rows attributes are defined, the frames go from left to right and top to bottom. Within the frameset element are a sequence of frame elements that define the contents of each frame. The frame element defines the source for the contents of the frame and defines a name for the frame. For example:
Page 24

<frameset rows="20%,30%,50%> <frame name="frame1" src="contents1.htm" scrolling="no"> <frame name="frame2" src="contents2.htm" scrolling="no"> <frame name="frame3" src="contents3.htm" scrolling="yes"> </frameset> The three frames appear side by side with the contents defines by the three HTML files. The third one will have scroll bars while the first two will not. Frames mainly make sense where the contents of one frame cannot update the contents of another. The obvious example is where, say, the first frame contains a list of links that define the contents of another frame. the links always remain and hitting a link updates the other frame. This is achieved by defining an attribute target which specifies the name of the frame to be updated. For example the contents of the first frame might be: <html> <title>Contents1.htm</title> <body> <a target="frame3" href="newcontents3a.htm"> Action a </a> <a target="frame3" href="newcontents3b.htm"> Action b </a> <a target="frame3" href="newcontents3c.htm"> Action c </a> <a target="frame3" href="newcontents3d.htm"> Action d </a> </body> Whichever link is hit in the first frame results in the contents of the third frame being updated. Sometimes you want to get out of the frame hierarchy. To aid this, there are some predefined values of the target attribute:
_blank The document is opened in a new window. _self The document is opened in the same frame as the link that was made. _parent The document is opened in the parent of the current frame. _top The document is opened in the complete browser window.

The need for the last of these is because framesets can be defined within framesets so that you may have to go up an unknown number of levels to break out of the current set of frames. It is difficult to define frames that are accessible. Some organisations like RNIB believe that they should never be used although W3C is not quite so dogmatic. If you can avoid using them do so. The least that should be done is to include a version of the document as a noframes element which could be used by Braille, line mode or spoken browsers. UK Government web sites have the following structure: <html> <head> <title>XXX Department</title> </head> <frameset rows="40,*"> <frame name="ukonline_toolbar" title="Latest news" src="http://www.toolbar.e-envoy.gov.uk/standard-toolbar.htm" /> <frame name="ukonline_content" title="home page of XXX"
Page 25

src="XXXHome.htm" /> <noframes> <body> <p>Welcome to the XXX web site <a href="XXXHome.htm">Enter the site</a> or go to the <a href="http://www.ukonline.gov.uk">UK online Citizen Portal</a>. </p> </body> </noframes> </frameset> </html> This adds a UK Government Logo and ticker tape news feed to all Government web sites in the top 40 pixels leaving the remainder for the Department's own content. The noframes version allows you to enter the site directly ignoring the ticker tape feed if you do not require it. If you do not need the whole frame mechanism and just want to insert a single frame in an existing page, this can be achieved using the iframe element. For example: <iframe name="inframe" width="240" height="250" scrolling="no" src="page.htm" > Links can be targetted at an iframe in the same way as a normal frame. It does reduce the frame overhead for simple usage.

Page 26

Exercise
Create Frames as given below: 1.

2.

3.

4.

5.

Page 27

Chapter-6 Forms in HTML

Form
Forms in HTML are much like forms in real life. The user must fill in a set of fields on the form and post it somewhere. For the moment, we will concentrate on filling the form in rather than posting it. For commercial activities, it is usual for the form to be sent back to the server for processing. However, if the form is just designed to provide interaction between the user and the Web page, it may be sent to a script for execution locally. Forms in real life come up in many shapes and sizes. Many forms provide text fields for you to fill in (your name and address for example. Some present you with a set of options and ask you to tick all that apply and some insist that you only tick one of the options. Most of the standard methods of form filling are provided in HTML. The tags used in the actual HTML of forms are form, input, textarea, selectand option. form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted. The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get latches the information onto the URL). So a form element will look something like this: <form action="processingscript.php" method="post"> </form>

The input tag is the daddy of the form world. It can take ten forms, outlined below: _ <input type="text"/> is a standard textbox. This can also have a value attribute, which sets the text in the textbox. _ <input type="password" /> is the same as the textbox, but will display asterisks instead of the actual characters that the user types. _ <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />. _ <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox. _ <input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs. _ <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />. _ <input type="image" /> is an image that when selected will submit the form. This also
Page 28

requires a src attribute, like the img tag. _ <input type="button" /> is a button that will not do anything without extra code added. _ <input type="reset" /> is a button that when selected will reset the form fields. _<input type="date" />is a field which shows calendar control to select particular date. _ <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to. Note that the input tag closes itself with a '/>' at the end. A textarea is, basically, a large textbox. It requires a rows and cols attribute and is used like this: <textarea rows="5" cols="20">A big load of text here</textarea> The select tag works with the option tag to make drop-down select boxes. They work like this: <select> <option value="first option">Option 1</option> <option value="second option">Option 2</option> <option value="third option">Option 3</option> </select> When the form is submitted, the value of the selected option will be sent. Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>. All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge" />

Page 29

Exercise
Create a form as given below:

Minor Project
Create a website by using all the concepts of HTML studied till now.

Page 30

Appendix HTML Tag Chart

Tag <!-<A <B> <BIG> <BODY> <BR> <CENTER>

Code Example <!--This can be viewed in the HTML part of a comment document-->
Name anchor bold big (text) body of document line break center

Browser View Nothing will show

<A HREF="http://www.yourdomain.com/">Visit Our Visit Our Site Site</A> <B>Example</B> <BIG>Example</BIG> <BODY>The content of your page</BODY> Example Example Contents of your webpage

The contents of your page<BR>The contents of your The contents of your page page The contents of your page <CENTER>This will center your contents</CENTER> This will center your contents Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term

<DD>

<DL> <DT>Definition Term definition <DD>Definition of the term description <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> This is an <EM>Example</EM> of using the emphasis tag <EMBED src="yourfile.mid" width="100%" height="60" align="center">

<DL>

definition list

<DT>

definition term

Definition Term Definition of the term Definition Term Definition of the term This is an Example of using the emphasis tag

<EM> <EMBED>

emphasis embed object

<EMBED>

embed object

<EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>

Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. Example (Tip) Example (Tip)

<FONT> <FONT>

font font

<FONT FACE="Times New Roman">Example</FONT> <FONT FACE="Times New Roman" SIZE="4">Example</FONT>

Page 31

<FONT>

font

<FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT>

Example Name: Email:

Submit Query

<FORM>

<H1> <H2> <H3> <H4> <H5> <H6> <HEAD>

<FORM action="mailto:you@yourdomain.com"> Name: <INPUT name="Name" value="" size="10"><BR> form Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM> heading 1 <H1>Heading 1 Example</H1>
heading 2 heading 3 heading 4 heading 5 heading 6 heading of document

Heading 1 Example Heading 2 Example Heading 3 Example Heading 4 Example Heading 5 Example Heading 6 Example Nothing will show Contents of your webpage (Tip) Contents of your webpage

<H2>Heading 2 Example</H2> <H3>Heading 3 Example</H3> <H4>Heading 4 Example</H4> <H5>Heading 5 Example</H5> <H6>Heading 6 Example</H6> <HEAD>Contains elements describing the document</HEAD>

<HR>

horizontal rule

<HR>

<HR>

horizontal rule

Contents of your webpage <HR WIDTH="50%" SIZE="3"> Contents of your webpage Contents of your webpage <HR WIDTH="50%" SIZE="3" NOSHADE> Contents of your webpage <HR WIDTH="75%" COLOR="#FF0000" SIZE="4"> <HR WIDTH="25%" COLOR="#6699FF" SIZE="6"> <HTML><HEAD><META><TITLE>Title of your webpage</TITLE></HEAD><BODY>Webpage contents</BODY></HTML> <I>Example</I> <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your site"> Example 1: Example 1: (Tip) Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Example

<HR>

horizontal rule

<HR> (Internet Explorer) <HR> (Internet Explorer)

horizontal rule

horizontal rule hypertext markup language italic image

<HTML> <I> <IMG>

<INPUT>

<FORM METHOD=post ACTION="/cgiinput field bin/example.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM>
input field

Submit

<INPUT> (Internet

Example 2:
Page 32

Example 2: (Tip)

Explorer)

<FORM METHOD=post ACTION="/cgibin/example.cgi"> <INPUT type="text" STYLE="color: #FFFFFF; fontfamily: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 4:

Submit

Example 4: (Tip) <FORM METHOD=post ACTION="/cgibin/example.cgi"> Enter Your Comments:<BR> input field <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR> <INPUT type="Submit" VALUE="Submit"> <INPUT type="Reset" VALUE="Clear"> </FORM> Example 5: <FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION >option 1 input field <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> <INPUT type="Submit" VALUE="Submit"></CENTER> </FORM> Example 6: Example 6: (Tip) <FORM METHOD=post ACTION="/cgibin/example.cgi"> Select an option:<BR> <INPUT type="radio" name="option"> Option 1 <INPUT type="radio" name="option" CHECKED> Option 2 <INPUT type="radio" name="option"> Option 3 input field <BR> <BR> Select an option:<BR> <INPUT type="checkbox" name="selection"> Selection 1 <INPUT type="checkbox" name="selection" CHECKED> Selection 2 <INPUT type="checkbox" name="selection"> Selection 3 <INPUT type="Submit" VALUE="Submit">
Page 33

<INPUT>

Submit

Clear

Example 5: (Tip) Select an option:

option 2

<INPUT>

Submit

Select an option: Option 1 Option 2 Option 3 Select an option: Selection 1 Selection 2 Selection 3
Submit

<INPUT>

</FORM> Example 1: Example 1: (Tip) <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU>
<LI> list item o

List item 1 List item 2 List item 3

Example 2: <OL type="i"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL>

Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4

<LINK>

link

Visit our <A Visit our site HREF="http://www.yourdomain.com/">site</A> <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> <META name="Description" content="Description of your site"> <META name="keywords" content="keywords describing your site">
o

<MARQUEE> scrolling (Internet text Explorer)

<MENU>

menu

List item 1 List item 2 List item 3

<META>

meta

Nothing will show

<META> <META> <META> <META> <META>

meta meta meta meta meta

<META HTTP-EQUIV="Refresh" Nothing will show CONTENT="4;URL=http://www.yourdomain.com/"> <META http-equiv="Pragma" content="no-cache"> <META name="rating" content="General"> <META name="ROBOTS" content="ALL"> <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Example 1: <OL> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Example 2: <OL type="a"> <LI>List item 1 <LI>List item 2
Page 34

Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Example 1: 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4

<OL>

ordered list

Example 2: a. b. c. d. List item 1 List item 2 List item 3 List item 4

<LI>List item 3 <LI>List item 4 </OL> <FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> </CENTER> </FORM>

Select an option: (Tip)

option 2

<OPTION>

listbox option

This is an example displaying the use of the paragraph This is an example displaying tag. <P> This will create a line break and a space the use of the paragraph tag. between lines. Attributes: Example 1:<BR> <BR> <P align="left"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> paragraph Example 2:<BR> <BR> <P align="right"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 3:<BR> <BR> <P align="center"> This is an example<BR> displaying the use<BR> of the paragraph tag.
small (text) strong emphasis

This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use of the paragraph tag. Example 3: This is an example displaying the use of the paragraph tag. Example Example Example 1: Column 1 Column 2

<P>

<SMALL> <STRONG>

<SMALL>Example</SMALL> <STRONG>Example</STRONG> Example 1: <TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR>
Page 35

<TABLE>

Table

Example 2:

</TABLE> Example 2: (Internet Explorer)

Column 1

Column 2

Example 3: <TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> Column 1 <TR> Row 2 <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD BGCOLOR="#CCCCCC">Column 1</TD> <TD BGCOLOR="#CCCCCC">Column 2</TD> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> </TR> </TABLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> table data <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> <DIV align="center"><TABLE> <TR> <TH>Column 1</TH> <TH>Column 2</TH> <TH>Column 3</TH> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> <TD>Row 2</TD> </TR> <TR> <TD>Row 3</TD> <TD>Row 3</TD> <TD>Row 3</TD> </TR> <TR> <TD>Row 4</TD> <TD>Row 4</TD> <TD>Row 4</TD> </TR> </TABLE>
Page 36

Column 2 Row 2

<TD>

Column 1

Column 2

<TH>

table header

Column 1 Row 2 Row 3 Row 4

Column 2 Row 2 Row 3 Row 4

Column 3 Row 2 Row 3 Row 4

</DIV>
<TITLE> document title

<TITLE>Title of your webpage</TITLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> <TT>Example</TT> <U>Example</U>

Title of your webpage will be viewable in the title bar.

<TR>

table row

Column 1

Column 2

<TT> <U>

teletype underline

Example Example Example 1:

<UL>

Example 1:<BR> <BR> <UL> <LI>List item 1 <LI>List item 2 </UL> <BR> unordered Example 2:<BR> list <UL type="disc"> <LI>List item 1 <LI>List item 2 <UL type="circle"> <LI>List item 3 <LI>List item 4 </UL> </UL>

List item 1 List item 2

Example 2:

List item 1 List item 2 o List item 3 o List item 4

Page 37

HTML 5
HTML 5 the fifth revision of the HTML standard. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).Basically HTML5 has its many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document. Other major advantages of HTML5 are described below.

HTML5 Features
1. Mutuality: Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programmas as the functionality is built into the browser.

2. Cleaner markup / Improved Code HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

3. Improved Semantics Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.

4. Elegant forms HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that dont support form types). There will be different type of text inputs, search and different fields for different purpose.

5. Consistency As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured.
Page 38

6. Improved Accessibility Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has.

7. Fulfill the need of Web application Many new features and standards have emerged as part of HTML 5. Once you detect the available features in todays browsers, you can take advantage of those features in your application. Main focus of HTML5 is to make easier application with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.

8. Offline Application cache All browsers have some kind of caching m After a sometime, you open up your laptop and click the Back button in the browser hoping to see the previous page that was opened. However, as you are not connected to the internet and the browser didnt cache the page properly, you are unable to view that page. You then click the Forward button thinking that at least that page will load, but it doesnt. You need to reconnect to the internet to be able to view the pages. HTML 5, thankfully, provides a smarter solution. While building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages like offline browsing, files load much faster and reduced load on server

9. Client-side database While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.

10. Geolocation support With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.

HTML5 - New Features

Some of the most interesting new features in HTML5:

The <canvas> element for 2D drawing The <video> and <audio> elements for media playback Support for local storage New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> New form controls, like calendar, date, time, email, url, search
Page 39

HTML <Canvas> The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas. This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas. Attributes Property fillStyle strokeStyle shadowColor shadowBlur shadowOffsetX shadowOffsetY Description Sets or returns the color, gradient, or pattern used to fill the drawing Sets or returns the color, gradient, or pattern used for strokes Sets or returns the color to use for shadows Sets or returns the blur level for shadows Sets or returns the horizontal distance of the shadow from the shape Sets or returns the vertical distance of the shadow from the shape

HTML <Audio> and <Vedio> HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents. Attributes

Property audioTracks autoplay

Description Returns an AudioTrackList object representing available audio tracks Sets or returns if the audio/video should start playing as soon as it is loaded Returns a TimeRanges object representing the buffered parts of the audio/video

buffered

Page 40

controller

Returns the MediaController object representing the current media controller of the audio/video Sets or returns if the audio/video should display controls (like play/pause etc.) Sets or returns the CORS settings of the audio/video Returns the URL of the current audio/video Sets or returns the current playback position in the audio/video (in seconds) Sets or returns if the audio/video is muted by default Sets or returns the default speed of the audio/video playback Returns the length of the current audio/video (in seconds) Returns if the playback of the audio/video has ended or not Returns a MediaError object representing the error state of the audio/video Sets or returns if the audio/video should start over again when finished Sets or returns a the group the audio/video belongs to (used to link multiple audio/video elements) Sets or returns if the audio/video is muted or not Returns the current network state of the audio/video Sets or returns if the audio/video is paused or not Sets or returns the speed of the audio/video playback Returns a TimeRanges object representing the played parts of the audio/video Sets or returns if the audio/video should be loaded when the page loads Returns the current ready state of the audio/video

controls

crossOrigin currentSrc currentTime

defaultMuted defaultPlaybackRate duration ended error

loop mediaGroup

muted networkState paused playbackRate played

preload readyState

Page 41

seekable

Returns a TimeRanges object representing the seekable parts of the audio/video Returns if the user is currently seeking in the audio/video Sets or returns the current source of the audio/video element Returns a Date object representing the current time offset Returns a TextTrackList object representing the available text tracks Returns a VideoTrackList object representing the available video tracks Sets or returns the volume of the audio/video

seeking src startDate textTracks videoTracks volume

Example Embedding media in your HTML document is trivial: <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element. </video> This example plays a sample video, with playback controls, from the Theora web site. Here is an example for embedding audio into your HTML document <audio src="/test/audio.ogg"> <p>Your browser does not support the audio element.</p> </audio> The src attribute can be a URL of the audio file or the path to the file on the local system. <audio src="audio.ogg" controls autoplay loop> <p>Your browser does not support the audio element </p> </audio> This code example uses attributes of the <audio> element:

controls : Displays the standard HTML5 controls for the audio on the web page. autoplay : Makes the audio play automatically. loop : Make the audio repeat (loop) automatically.
Page 42

<audio src="audio.mp3" preload="auto" controls></audio> The preload attribute is used in the audio element for buffering large files. It can take one of 3 values:

"none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file Multiple source files can be specified using the <source> element in order to provide video or audio encoded in different formats for different browsers. For instance: <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video> HTML <Article> The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication. Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment. The <article> tag was introduced in HTML 5. The <article> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Example: <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article> HTML <Header> Purpose of the header element is to hold any of the h1 to h6 elements, a hggroup element, a table of content, a search form or associated logos. This element adds a semantic value to your HTML5 page. In general it may be said as a container element which may contain an introductory or a navigational content. header element has nothing to do with head element. And, it does not introduce any new section, but it is the head of a section.

Page 43

Example <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> HTML <Footer> The <footer> tag defines a footer for a document or section. A <footer> element should contain information about its containing element. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. Example <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer> HTML <nav> The <nav> tag defines a section of navigation links. Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links. Example <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> HTML <section> The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. Attributes Attribute accesskey class Description Specifies a shortcut key to activate/focus an element Specifies one or more classnames for an element (refers to a class in a style sheet)

Page 44

contenteditable contextmenu

Specifies whether the content of an element is editable or not Specifies a context menu for an element. The context menu appears when a user right-clicks on the element Specifies the text direction for the content in an element Specifies whether an element is draggable or not Specifies whether the dragged data is copied, moved, or linked, when dropped Specifies that an element is not yet, or is no longer, relevant Specifies a unique id for an element Specifies the language of the element's content Specifies whether the element is to have its spelling and grammar checked or not Specifies an inline CSS style for an element Specifies the tabbing order of an element Specifies extra information about an element Specifies whether an element's value are to be translated when the page is localized, or not.

dir draggable dropzone

hidden id lang spellcheck

style tabindex title Translate

Example <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section> HTML <>

Page 45