Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web development using html 5

5,088 views

Published on

It's about basic web development using html5

Published in: Education
  • Women usually act out of emotion, not logic. Take advantage of this and get your Ex back today! See how to ●●● http://scamcb.com/exback123/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web development using html 5

  1. 1. Web Development Using HTML Anjan Mahanta LCCT - International Education Institute anjan_mahanta@hotmail.com 1
  2. 2. What’s HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language. • HTML5 is the latest standard for HTML. • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). 2 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  3. 3. W3C • World Wide Web Consortium (W3C) • The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. 3 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  4. 4. Text Editor We can develop HTML program using the following text editors – Windows Note Pad – Mac Text Edit – Adobe Dreamweaver – Komodo Edit Komodo edit can be downloaded free from http://komodoide.com/komodo-edit 4 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  5. 5. Start Notepad To start Notepad go to: Start All Programs Accessories Notepad 5 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  6. 6. Lesson 1 Hello World • Open the text editor • Create a New File • Save as, hello_world.html • Write the following codes • Save again • Open the saved file, hello_world.html in any browser 6 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  7. 7. Lesson 1 Example 1.1 • Create a New File • Save as, example1.html • Write the following codes • Save again • Open the saved file, example1.html in any browser 7 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  8. 8. Explanation Example 1.1 •The DOCTYPE declaration defines the document type •The text between <html> and </html> describes the web page •The text between <head> and </head> is the visible head page content •The text between <title> and </title> is the visible title of the browser •The text between <h1> and </h1> is displayed as a heading •The text between <body> and </body> is the visible page content •The text between <p> and </p> is displayed as a paragraph 8 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  9. 9. Web Browsers 9 Copyright: LCCT International Education Institute :: Anjan Mahanta :: The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
  10. 10. HTML Page Structure 10 Copyright: LCCT International Education Institute :: Anjan Mahanta ::
  11. 11. HTML Tags 11 Copyright: LCCT International Education Institute :: Anjan Mahanta :: HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags <tagname>content</tagname>
  12. 12. HTML 5 Declaration 12 Copyright: LCCT International Education Institute :: Anjan Mahanta :: <!DOCTYPE html> The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
  13. 13. Lab Exercise 1 13 Copyright: LCCT International Education Institute :: Anjan Mahanta :: The Web browser should display the followings,
  14. 14. HTML 5 Headings 14 Copyright: LCCT International Education Institute :: Anjan Mahanta :: HTML headings are defined with the <h1> to <h6> tags. Example <!DOCTYPE html> <html> <body> <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> </body> </html> OUTPUT
  15. 15. HTML Paragraphs HTML paragraphs are defined with the <p> tag Example <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 15
  16. 16. HTML Links HTML links are defined with the <a> tag. Example: <!DOCTYPE HTML> <html> <head> <title> Hyperlink </title> <h1> Please Visit My College Website </h1> </head> <body> <a href = "http://www.lcct.ac.th"> Click here </a> </body> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 16
  17. 17. HTML Comment • Comments can be inserted into the HTML code to make it more readable and understandable. <!DOCTYPE html> <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 17
  18. 18. HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph: <!DOCTYPE html> <html> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 18
  19. 19. HTML Images HTML images are defined with the <img> tag. Example: <!DOCTYPE html> <html> <body> <img src="w3schools.jpg" width="104" height="142"> </body> </html> OUTPUT Note: The picture file should be saved in the same folder Copyright: LCCT International Education Institute :: Anjan Mahanta :: 19
  20. 20. Exercise 2 Output LCCT Lampang College of Commerce and Technology www.lcct.ac.th Copyright: LCCT International Education Institute :: Anjan Mahanta :: 20 Welcome to LCCT !!
  21. 21. HTML Lines • The <hr>tag creates a horizontal line in an HTML page. <!DOCTYPE html> <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 21
  22. 22. HTML Text Formatting <!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 22
  23. 23. HTML Links • The Target Attributes <!DOCTYPE html> <html> <body> <a href="http://www.lcct.ac.th" target="_blank">Visit LCCT!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 23
  24. 24. HTML Links – The ID Attribute • The id attribute can be used to create a bookmark inside an HTML document <!DOCTYPE html> <html> <body> <p><a id="tips">Useful Tips Section</a></p> <p><a href="#tips">Visit the Useful Tips Section</a></p> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 24
  25. 25. HTML Head • The HTML <head> Element • The <head> element is a container for all the head elements. • Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 25
  26. 26. HTML Title • The HTML <title> Element • The <title> tag defines the title of the document. • The <title> element is required in all HTML/XHTML documents. • The <title> element: • defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 26
  27. 27. HTML Meta Tags • <meta> Tags - Examples of Use • Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> • Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS"> • Define the author of a page: <meta name="author" content=“Anjan Mahanta"> • Refresh document every 30 seconds: <meta http-equiv="refresh" content="30"> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 27
  28. 28. HTML Meta Tags • <meta> Tags - Examples of Use <!DOCTYPE html> <html> <head> <meta name="description" content ="Free Web Toturials"> <meta name ="keywords" content="HTML, CSS, Javascript"> <meta name ="author" content ="Anjan Mahanta"> <meta charset="UTF-8"> </head> <body> <h1> My Website</h1> <p> Some text...</p> </body> </html> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 28 OUTPUT
  29. 29. 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). • 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. <!DOCTYPE html> <html> <body> <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> </body> </html> OUTPUT Copyright: LCCT International Education Institute :: Anjan Mahanta :: 29
  30. 30. HTML Table Header <!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</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> </body> </html> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 30 OUTPUT
  31. 31. Tables Without Borders <!DOCTYPE html> <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>400</td> <td>500</td> </tr> </table> </body> </html> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 31 OUTPUT
  32. 32. Table Headers • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 32 OUTPUT
  33. 33. Table with Caption • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 33 OUTPUT
  34. 34. Table cells that span more than one row or one column • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 34 OUTPUT
  35. 35. Tags inside a table • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 35 OUTPUT
  36. 36. Cell Padding • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 36 OUTPUT
  37. 37. Cell Spacing • Example: <!DOCTYPE html> <html> <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> Copyright: LCCT International Education Institute :: Anjan Mahanta :: 37 OUTPUT
  38. 38. HTML LISTS • The most common HTML lists are ordered and unordered lists: Copyright: LCCT International Education Institute :: Anjan Mahanta :: 38
  39. 39. Ordered List • An ordered list starts with the <ol> tag. • Each list item starts with the <li> tag. • The list items are marked with numbers. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 39 EXAMPLE OUTPUT
  40. 40. Ordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 40 EXAMPLE: Numbered List OUTPUT <!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Numbered List:</h4> <ol> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>
  41. 41. Ordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 41 EXAMPLE: Letters List OUTPUT <!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Letters List:</h4> <ol type="A"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>
  42. 42. Ordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 42 EXAMPLE: Lower Case List OUTPUT <!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Lower Case List:</h4> <ol type=“a”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>
  43. 43. Ordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 43 EXAMPLE: Roman Number List OUTPUT <!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Roman Number List:</h4> <ol type=“I”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>
  44. 44. Ordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 44 EXAMPLE: Lowercase Roman Number List OUTPUT <!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> LowercaseRoman Number List:</h4> <ol type=“i”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>
  45. 45. Unordered List • An ordered list starts with the <ul> tag. • Each list item starts with the <li> tag. • The list items are marked with bullets. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 45 EXAMPLE OUTPUT
  46. 46. Unordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 46 EXAMPLE: Disc Bullet List OUTPUT <!DOCTYPE html> <HTML> <title> Unordered List</title> <body> <h4> Disc Bullet List:</h4> <ul style="list-style-type:disc"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> </body> </HTML>
  47. 47. Unordered List Copyright: LCCT International Education Institute :: Anjan Mahanta :: 47 EXAMPLE: Disc Bullet List OUTPUT <!DOCTYPE html> <HTML> <title> Unordered List</title> <body> <h4> Disc Bullet List:</h4> <ul style="list-style-type:disc"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> </body> </HTML> Other Types: Circle, Square
  48. 48. Nested List - 1 Copyright: LCCT International Education Institute :: Anjan Mahanta :: 48 EXAMPLE: Nested List OUTPUT <!DOCTYPE html> <HTML> <title> Nested List</title> <body> <h4> A Nested List:</h4> <ul> <li> Coffee </li> <li> Tea <ul> <li> Green Tea</li> <li> Black Tea</li> </ul> </li> <li> Milk</li> </ul> </body> </HTML>
  49. 49. Nested List - 2 Copyright: LCCT International Education Institute :: Anjan Mahanta :: 49 OUTPUT <!DOCTYPE html> <HTML> <title> Nested List</title> <body> <h4> A Nested List:</h4> <ul> <li> Coffee </li> <li> Tea <ul> <li> Green Tea</li> <ul> <li> Chinese </li> <li> African </li> </ul> </li> </ul> <li> Milk</li> </ul> </body> </HTML>
  50. 50. Description List • A description list is a list of terms/names, with a description of each term/name. • The <dl> tag defines a description list. • The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): Copyright: LCCT International Education Institute :: Anjan Mahanta :: 50 EXAMPLE OUTPUT
  51. 51. The HTML <div> Element • The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. • It is used for document layout. • The <div> tag defines a division or a section in an HTML document. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 51 EXAMPLE OUTPUT <!DOCTYPE html> <html> <title> DIV Example </title> <h1> This is an example of Div</h1> <body> <p>Hello! Welcome to IEI</p> <div style="color:#0000FF"> <h1> We love to study here..</h1> <p> We speak english..</p> </div> <p> Come join us!</p> </body> </html>
  52. 52. The HTML <div> Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 52 EXAMPLE OUTPUT <!DOCTYPE html> <html> <title> DIV Example With Border </title> <h1> This is an example of div with border and alignment</h1> <body> <div align="center" style="border:1px solid red"> <h1> We love to study here..</h1> <p> We speak english..</p> </div> <p> Come join us!</p> </body> </html>
  53. 53. The HTML <span> Element • The <span> tag is used to group inline-elements in a document. • The <span> tag provides no visual change by itself. • The <span> tag provides a way to add a hook to a part of a text or a part of a document. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 53 EXAMPLE <!DOCTYPE html> <html> <title>:: Example of Span ::</title> <body> <p> Welcome to study at the <span style="color:blue; font-weight:bold">IEI</span>. It is the best <span style="color:red; font-weight:bold"> internationalprogram </span> in the north of Thailand.</p> </body> </html> OUTPUT
  54. 54. HTML Layouts • Web page layout is very important to make your website look good. • Multiple columns are created by using <div> or <table> elements. • Most websites have put their content in multiple columns (formatted like a magazine or newspaper). • CSS are used to position elements, or to create backgrounds or colorful look for the pages. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 54
  55. 55. HTML Layouts • Example Copyright: LCCT International Education Institute :: Anjan Mahanta :: 55
  56. 56. HTML Layouts • Code :: Part I :: Copyright: LCCT International Education Institute :: Anjan Mahanta :: 56 <!DOCTYPE html> <html> <title> :: Website Layout ::</title> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#0066FF";> <h1 style="margin-bottom:0;">International Education Institute</h1></div> <div id="menu" style="background-color:#00FFFF; height:200px; width:100px;float:left;"> <b> MENU</b> <br> About Us <br> Our Programs <br> Photogallery <br> Contact Us </div>
  57. 57. HTML Layouts • Code :: Part II :: Copyright: LCCT International Education Institute :: Anjan Mahanta :: 57 <div id="content" style="background-color:#EEEEEE; height:200px; width:400px;float:left;"> Main Content </div> <div id="footer" style="background-color:#0066FF; clear:both; text-align:center;"> Copyright © Anjan Mahanta </div> </div> </body> </html>
  58. 58. HTML Iframes • An iframe is used to display a web page within a web page. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 58 <!DOCTYPE html> <html> <title> :: Example of iframe :: </title> <body> <h4> iframe</h4> <iframe src="http://www.lcct.ac.th" width="500" height="300"></iframe> </body> </html> EXAMPLE OUTPUT
  59. 59. HTML Iframes • Using iframe as a target for a link Copyright: LCCT International Education Institute :: Anjan Mahanta :: 59 <!DOCTYPE html> <html> <body> <iframe src="http://www.lcct.ac.th" name="iframe_a" width="300" height="200" frameborder="0"></iframe> <p><a href="http://www.lcct.ac.th" target="iframe_a">LCCT</a></p> <p><a href="http://www.lit.ac.th" target="iframe_a">LIT</a></p> </body> </html> EXAMPLE OUTPUT
  60. 60. HTML Colors • Colors are displayed combining RED, GREEN, and BLUE light. • The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). • Hex values are written as 3 double digit numbers, starting with a # sign. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 60
  61. 61. HTML Color Name • 140 color names are defined in the HTML Copyright: LCCT International Education Institute :: Anjan Mahanta :: 61
  62. 62. HTML Entities • Reserved characters in HTML must be replaced with character entities. Copyright: LCCT International Education Institute :: Anjan Mahanta :: 62 <!DOCTYPE html> <html> <title> :: Example of Entities :: </title> <body> <h4> Entities</h4> <p> à</p> <p> &copy</p> </body> </html> EXAMPLE OUTPUT
  63. 63. HTML Entities Copyright: LCCT International Education Institute :: Anjan Mahanta :: 63 Useful HTML Character Entities
  64. 64. HTML Entities Copyright: LCCT International Education Institute :: Anjan Mahanta :: 64 Useful HTML Character Entities
  65. 65. HTML Multimedia Copyright: LCCT International Education Institute :: Anjan Mahanta :: 65 • Multimedia on the web is sound, music, videos, movies, and animations. • The support for sounds, animations, and videos is handled in different ways by various browsers. • Multimedia files have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
  66. 66. HTML Plug-ins Copyright: LCCT International Education Institute :: Anjan Mahanta :: 66 • A helper application is a small computer program that extends the standard functionality of the browser. • Helper applications are also called plug-ins. • Examples of well-known plug-ins are Java applets and Adobe Flash Player. • Plug-ins can be added to web pages with the <object> tag or the <embed> tag.
  67. 67. The <object> Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 67 • The <object> element is supported in all major browsers . • The <object> element defines an embedded object within an HTML document. • It is used to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web pages. <!DOCTYPE html> <html> <title> :: Example of Plug-Ins ::</title> <body> <object width="500" height="300" data="cherry.swf"> </object> </body> </html> EXAMPLE Note : Save a file as cherry with .swf extension in the same folder as the html file
  68. 68. The <embed> Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 68 • The <embed> element is supported in all major browsers . • The <embed> element defines a container for an external application or interactive content (a plug-in). • The <embed> element will validate in an HTML5 page, but not in an HTML 4 page. <!DOCTYPE html> <html> <title> :: Example of Plug-Ins ::</title> <body> <embed width="400" height="400" src="cherry.swf"> </body> </html> EXAMPLE Note : Save a file as cherry with .swf extension in the same folder as the html file
  69. 69. HTML Sounds/Audio Copyright: LCCT International Education Institute :: Anjan Mahanta :: 69 HTML Audio - Using <embed> • The <embed> tag defines a container for external (non-HTML) content. Problems • Different browsers support different audio formats • If a browser does not support the file format, the audio will not play without a plug-in • If the plug-in is not installed on the users' computer, the audio will not play <!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <embed width="300" height="100" src="song.mp3"> </body> </html> EXAMPLE Note : Save a file as song with .mp3 extension in the same folder as the html file
  70. 70. HTML Sounds/Audio Copyright: LCCT International Education Institute :: Anjan Mahanta :: 70 HTML Audio - Using <object> • The <object> tag can also define a container for external (non-HTML) content. Problems • Different browsers support different audio formats • If a browser does not support the file format, the audio will not play without a plug-in • If the plug-in is not installed on the users' computer, the audio will not play <!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <object height="50" width="100" data="song.mp3"></object> </body> </html> EXAMPLE Note : Save a file as song with .mp3 extension in the same folder as the html file
  71. 71. HTML Sounds/Audio Copyright: LCCT International Education Institute :: Anjan Mahanta :: 71 The HTML5 <audio> Element • The HTML5 <audio> tag defines sound, such as music or other audio streams. • The <audio> element works in all modern browsers. • MP3 file (for Internet Explorer, Chrome, Firefox 21+, and Safari) • OGG file (for older Firefox and Opera). <!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Your browser doesn't support this audio format </audio> </body> </html> EXAMPLE Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file
  72. 72. HTML Sounds/Audio Copyright: LCCT International Education Institute :: Anjan Mahanta :: 72 The HTML5 <audio> The Best Solution • The best solution is to use the HTML5 <audio> element + the <embed> element. • First it tries to play the audio either as MP3 or OGG. If that fails, the code "falls back" to try the <embed> element. <!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> <embed height="50" width="100" src="song.mp3"> </audio> </body> </html> EXAMPLE Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file
  73. 73. HTML Sounds/Audio Copyright: LCCT International Education Institute :: Anjan Mahanta :: 73 HTML Audio - Using A Hyperlink • If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. <!DOCTYPE html> <html> <title> :: Example of Audio :: </title> <body> <a href="song.mp3"> play the song</a> </body> </html> EXAMPLE Note : Save a file as song with .mp3 extension in the same folder as the html file
  74. 74. HTML Videos Copyright: LCCT International Education Institute :: Anjan Mahanta :: 74 HTML Video - The Best Solution • The best solution is to use the HTML5 <video> element + the <embed> element. <!DOCTYPE html> <html> <title> :: Example of Video ::</title> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" <source src="movie.ogg" type="video/ogg" <source src="movie.webm" type="video/webm" <object data="movie.mp4" width="320" height="240"></object> <embed src="movie.swf" width="320" height="240" </video> </body> </html> EXAMPLE Note : Save a file as movie with .mp4/ogg/webm/swf extension in the same folder as the html file
  75. 75. HTML YouTube Videos Copyright: LCCT International Education Institute :: Anjan Mahanta :: 75 Playing a YouTube Video in HTML <!DOCTYPE html> <html> <title> :: Example of YouTube Videos ::</title> <body> <iframe width="420" height="345" src="http://www.youtube.com/embed/6zElOFNkbiQ"> </iframe> </body> </html> EXAMPLE YouTube iFrame
  76. 76. HTML YouTube Videos Copyright: LCCT International Education Institute :: Anjan Mahanta :: 76 Playing a YouTube Video in HTML <!DOCTYPE html> <html> <title> :: Example of YouTube Videos ::</title> <body> <embed width="420" height="345" src="http://www.youtube.com/v/6zElOFNkbiQ" type = "application/x-shockwave-flash"> </embed> </body> </html> EXAMPLE YouTube Embedded
  77. 77. HTML Forms Copyright: LCCT International Education Institute :: Anjan Mahanta :: 77 • 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. • The <form> tag is used to create an HTML form <form> . input elements . </form>
  78. 78. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 78 • 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. EXAMPLE FORM LAYOUT
  79. 79. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 79 HTML Code <!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> First Name: <input type="text" name="first" id="first"> </br> Last Name: <input type="text" name="last" id="last"> </br> Password: <input type="password" name="password" id="password"> </br> <input type= "reset" value="Clear"> <input type ="submit" value="Send"> </form> </body> </html>
  80. 80. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 80 Form Layout Using Table <!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> <table> <tr> <td> First Name:</td> <td> <input type="text" name="first" id="first"></td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="last" id="last"></td> </tr> <tr> <td> Password: </td> <td> <input type="password" name="password" id="password"> </td> </tr>
  81. 81. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 81 Form Layout Using Table <tr> <td> <input type= "reset" value="Clear"> </td> <td> <input type ="submit" value="Send"> </td> </tr> </table> </form> </body> </html> OUTPUT
  82. 82. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 82 Form Using Radio Buttons and Check Boxes
  83. 83. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 83 Form Using Radio Buttons and Check Boxes - Code Part 1 <!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> <table> <tr> <td> First Name:</td> <td> <input type="text" name="first" id="first"></td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="last" id="last"></td> </tr> <tr> <td> Password: </td> <td> <input type="password" name="password" id="password"> </td> </tr>
  84. 84. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 84 Form Using Radio Buttons and Check Boxes - Code Part 2 <tr> <td> Gender: </td> <td> <input type="radio" value="male" name="gender"> Male <input type="radio" value ="female" name="gender"> Female </td> </tr> <tr> <td valign="top"> Age Range: </td> <td> <input type ="radio" value="0" name="age"> Under 18 </br> <input type ="radio" value="1" name="age"> 19 - 39 </br> <input type ="radio" value="2" name="age"> 40-59 </br> <input type ="radio" value="3" name="age"> Over 60 </br> </td> </tr> <tr>
  85. 85. HTML Forms - The Input Element Copyright: LCCT International Education Institute :: Anjan Mahanta :: 85 Form Using Radio Buttons and Check Boxes - Code Part 3 <tr> <td valign="top"> Places you like: </td> <td> <input type="checkbox" value="bangkok" name="places"> Bangkok </br> <input type="checkbox" value="chiangmai" name="places"> Chiangmai </br> <input type="checkbox" value="phuket" name="places"> Phuket </br> <input type="checkbox" value="pattaya" name="places"> Pattaya </br> </td> </tr> <tr> <td> <input type= "reset" value="Clear"> </td> <td> <input type ="submit" value="Send"> </td> </tr> </table> </form> </body> </html>

×