Looking for a Tutor Near You?

Post Learning Requirement »
x

Choose Country Code

x

Direction

x

Ask a Question

x

x
x
For better view click here
x
Hire a Tutor
DISCOVER

Notes On HTML Programs

Loading...

Published in: HTML Training
1,881 Views

HTML programs Created and after Corrections

Mahendra S / Jaipur

1 year of teaching experience

Qualification: B.Tech/B.E. (IIPE VIZAG (IIT KGP) - 2019)

Teaches: Chemistry, Mathematics, Physics, IIT JEE Advanced, IIT JEE Mains, Play Gym, Yoga

Contact this Tutor
  1. Heading : HTML Home html> Page Title This is a Heading This is a paragraph. Out put : Note : Heading : HTML Introduction < !DOCTYPE html> < head> Page Title < bodY> My First Heading < P>My first paragraph.
  2. Note : Heading : HTML editors < !DOCTYPE html> < head> Page Title < bodY> This is a Heading This is a paragraph. < bodY> My First Heading < P>My first paragraph.
  3. < !DOCTYPE html> < bodp This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 < bodp This is a paragraph. This is another paragraph.
  4. < bodY> HTML links are defined with the a tag: This is a link Output: Note: < !DOCTYPE html> < bodY> HTML images are defined with the img tag:
  5. Heading : HTML Elements < !DOCTYPE html> < bodp My First Heading < P>My first paragraph. Output: Note: < !DOCTYPE html> < bodY> This is a paragraph. This is a paragraph. Output: Note: < !DOCTYPE html> < bodY> This is a paragraph with a line break.
  6. < bodY> The href Attribute HTML links are defined with the a tag. The link address is specified in the href attribute: Visit W3Schools Output: Note: < !DOCTYPE html> < bodp
  7. The src Attribute HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute: < img src="img_girl.jpg" width-"500" < bodY> Width and Height Attributes < p>The width and height attributes of the img tag, defines the width and height of the image: < img src="img_girl.jpg" width-"500" < bodY> The alt Attribute
  8. < p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains: < img src="img_girl.jpg" alt="Girl with a jacket" width-I' 500" height= Output: Note: < !DOCTYPE html> < bodY> < img src="img_typo.jpg" alt= "Girl with a jacket" > " 600" > we toy to display an image that does not exist, the value of the alt attribute will be displayed instead. Output: Note: < !DOCTYPE html>
  9. < bodY> < h2>The style Attribute The style attribute is used to add styles to an element, such as color: > This is a red paragraph. Output: Note: < !DOCTYPE html> < bodp
  10. < h 1 >About W3Schools title=About W3Schools> You cannot omit quotes around an attribute value if the value contains spaces. If you move the mouse over the paragraph above, your browser will only display the first word from the title. Output: Note: < !DOCTYPE html> < bodY> Single or Double Quotes? some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: < p>Move your mouse over the paragraphs below to see the effect: title=IJohn "ShotGun" NelsonI>John with double quotes title="John 'ShotGunI Nelson">John with single quotes
  11. Note: Heading: HTML Headings < !DOCTYPE html> < bodp >Heading 1 Heading 2 Heading 3 < Heading 4 Heading 5 Heading 6 < bodY> >Heading 1 Heading 2 Heading 3 < Heading 4 Heading 5 Heading 6
  12. Output: Note: < !DOCTYPE html> < bodY> Heading 1 < p>You can change the size of a heading with the style attribute, using the font-size property. Output: Note: Heading: HTML Paragraphs < !DOCTYPE html> < bodp This is a paragraph. This is a paragraph. This is a paragraph.
  13. < bodY> This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change. Output:
  14. Note: < !DOCTYPE html> < bodY> This is heading 1 This is some text. < ho This is heading 2 < p>This is some other text. < ho This is heading 2 < p>This is some other text. Output: Note: < !DOCTYPE html> < bodY> This isa paragraphwith line breaks.
  15. Note: < !DOCTYPE html> < bodp HTML, spaces and new lines are ignored: My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. < bodY> The pre tag preserves both spaces and line breaks: < pre > My Bonnie lies over the ocean. My Bonnie lies over the sea.
  16. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. < bodY> am normal style="color:red;">l am red style="color:blue;">l am blue style="font-size:50px;">l am big Output: Note: < !DOCTYPE html> < body style= " background-color:powderblue;" >
  17. This is a heading This is a paragraph. Output: Note: < !DOCTYPE html> < bodY> This is a heading > This is a paragraph. < bodY> This is a heading > This is a paragraph.
  18. Output: Note: < !DOCTYPE html> < bodp This is a heading > This is a paragraph. < bodY> This is a heading 60%;" > This is a paragraph. Output: Note:
  19. < !DOCTYPE html> < bodp Centered Heading < p style= "text-align:center;" > Centered paragraph. Output: Note: Heading: HTML Formatting < !DOCTYPE html> < bodY> text is bold This text is italic This is subscript and superscript < bodY> This text is normal. text is bold.
  20. Output: Note: < !DOCTYPE html> < bodp This text is normal. < This text is important! Output: Note: < !DOCTYPE html> < bodY> This text is normal. text is italic.
  21. < bodY> This text is normal. This text is emphasized. Output: Note: < !DOCTYPE html> < bodp This is some normal text. < This is some smaller text. < bodp Do not forget to buy milk today.
  22. Note: < !DOCTYPE html> < bodY> My favorite color is blue red. < bodY> My favorite color is blue red. Output: Note: < !DOCTYPE html> < bodY> This is subscripted text.
  23. Note: < !DOCTYPE html> < bodY> This is superscripted text. < bodp Here is a quote from WWFIs website: < blockquote cite= " http://www.worldwildlife.org/who/index.html" > For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. < bodp
  24. < p>Browsers usually indent blockquote elements. < blockquote cite= " http://www.worldwildlife.org/who/index.html" > For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally. Output: Note: < !DOCTYPE html> < bodp < p>Browsers usually insert quotation marks around the q element. goal is to: Build a future where people live in harmony with nature. < bodp The WHO was founded in 1948.
  25. < p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines. < bodp < p>The HTML address element defines contact information (author/owner) of a document or article. Written by John Doe. Visit us at: Example.com Box 564, Disneyland USA < bodY>
  26. The HTML cite element defines the title of a work. < p>Browsers usually display cite elements in italic. < img src="img_the_scream.jpg" width-"220" height= "277" alt="The Scream"> Scream by Edvard Munch. Painted in 1893. Output: Note: < !DOCTYPE html> < bodY> < P>lf your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl): < bdo dir= line will be written from right to left
  27. Note: Heading: HTML Comments < !DOCTYPE html> < bodp This is a paragraph. Output: Note: < !DOCTYPE html> < bodY>
  28. < hl style= " background-color:MediumSeaGreen;" > MediumSeaGreen < hl style= "background-color:Gray;" > «hl style= < hl style= "background-color:Violet;" >Violet < hl style= "background-color:LightGray;" > LightGraY Output: Note: < !DOCTYPE html» < body» «hl style= "background-color:DodgerBlue;" > Hello World < p style= " background-color:Tomato;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Output: Note: < !DOCTYPE html» < body» < h3 style= "color:Tomato;" > Hello World < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  29. style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Output: Note: < !DOCTYPE html> < bodY> Hello World Hello World Hello World < bodY> Same as color name "Tomato": rgb(255, 99, 71) < h 1 style= rgba(255, 99, 71, 0.5)
  30. addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values. Output: Note: < !DOCTYPE html> < bodY> rgb(255, 0, O) rgb(0, 0, 255)
  31. < bodY> 200, 200);" > rgb(200, 200, 200)
  32. Note: < !DOCTYPE html> < bodY> < h 1 style= > < h 1 style= > < h 1 style= < h 1 style= > < h 1 style= 500;" >#ffa500 < h 1 style= < bodY> < h 1 style= " < h 1 style= >#686868
  33. < h 1 style= > < h 1 style= >#bebebe < h 1 style= < h 1 style= " 1 > Output: Note: < !DOCTYPE html> < bodp 53%, 58%)
  34. Output: Note: < !DOCTYPE html> < bodY> < p>With HSL colors, less saturation mean less color. 0% is completely gray. < bodY>
  35. 100%, > 100%, 1000/0);" > hsI(O, 100%, 1000/0) With HSL colors, 0% lightness means black, and 100 lightness means white. < bodY>
  36. 100%, 64%, 0.4) 100%, 64%, 0.6);" > 100%, 64%, 0.6) 100%, 64%, 0.8);" > hsIa(9, 100%, 64%, 0.8) 100%, 64%, 100%, 64%, >
  37. Heading: HTML CSS < !DOCTYPE html> < bodY> A Blue Heading < p style= "color:red;" red paragraph. Output: Note: < !DOCTYPE html> < head> < style > body {background-color: powderblue;} {color: blue;} p {color: red;} < [style > < bodY>
  38. This is a heading This is a paragraph. < head> < link rel= "stylesheet" href= "styles.css" > < bodY> This is a heading This is a paragraph. Output: Note:
  39. < head> < style > color: blue; font-family: verdana; font-size: 300%; color: red; font-family: courier; font-size: 160%; < / Style > < bodp This is a heading This is a paragraph. < head> < style > border: 2px solid powderblue; < / Style > < bodp This is a heading This is a paragraph. This is a paragraph.
  40. This is a paragraph. Output: Note: < !DOCTYPE html> < head> < style > border: 2px solid powderblue; padding: 30px; < [style > < bodY> This is a heading This is a paragraph. This is a paragraph. This is a paragraph. Output: Note: < !DOCTYPE html> < head> < style >
  41. border: 2px solid powderblue; margin: 50px; < [style > < bodY> This is a heading This is a paragraph. This is a paragraph. This is a paragraph. Output: Note: < !DOCTYPE html> < head> < link rel= "stylesheet" href= "https://www.w3schools.com/html/styles.css" > < bodY> This is a heading This is a paragraph.
  42. Output: Note: < !DOCTYPE html> < head> < link rel= "stylesheet" href= "/html/styles.css" > < bodY> This is a heading This is a paragraph. Output: Note: < !DOCTYPE html> < head> < link rel= "stylesheet" href= "styles.css" >
  43. < bodY> This is a heading This is a paragraph. Output: Note: Heading: HTML Links < !DOCTYPE html> < bodY> >HTML < Visit W3Schools.com!
  44. Note: < !DOCTYPE html> < bodp < h2>The target Attribute
  45. < !DOCTYPE html> < bodp lmage as a Link The image below is a link. Try to click on < img src= "smiley.gif" alt= "HTML tutorial" style = "width:42px;height:42px;" > Link to an Email Address To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute: Send email Output: Note: html> Button as a Links Click the button to go to the HTML tutorial.
  46. HTML Tutorial Output: Note: html> Link Titles The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Visit our HTML Tutorial Output: Note: html> External Paths This example uses a full URL to link to a web page: HTML tutorial Output:
  47. Note: html> External Paths This example links to a page located in the html folder on the current web site: HTML tutorial Output: Note: html> External Paths This example links to a page located in the same folder as the current page: HTML tutorial Output: Note: html> a:link {
  48. color: green; background-color: transparent; text-decoration: none; a:visited { color: pink; background-color: transparent; text-decoration: none; a:hover { color: red; background-color: transparent; text-decoration: underline; a:active { color: yellow; background-color: transparent; text-decoration: underline; Link Colors You can change the default colors of links blank">HTML Images
  49. text-decoration: none; display: inline-block; a:hover, a:active { background-color: red; Link Button link styled as a button: blank">This is a link
  50. Chapter 7 This chapter explains ba bla bla Chapter 8 This chapter explains ba bla bla Chapter 9 This chapter explains ba bla bla Chapter 10 This chapter explains ba bla bla Chapter 11 This chapter explains ba bla bla Chapter 12 This chapter explains ba bla bla Chapter 13 This chapter explains ba bla bla Chapter 14 This chapter explains ba bla bla Chapter 15 This chapter explains ba bla bla Chapter 16 This chapter explains ba bla bla Chapter 17 This chapter explains ba bla bla Chapter 18 This chapter explains ba bla bla Chapter 19 This chapter explains ba bla bla Chapter 20 This chapter explains ba bla bla Chapter 21 This chapter explains ba bla bla Chapter 22 This chapter explains ba bla bla
  51. Chapter 23 This chapter explains ba bla bla Output: Note: html> height= "60011>
  52. Alternative text The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains: Output: Note: html> Alternative text The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains: Output: Note: html> a browser cannot find the image, it will display the alternate text:
  53. Output: Note: html> lmage Size Here we use the style attribute to specify the width and height of an image: Output: Note: html> lmage Size Here we specify the width and height of an image with the width and height attributes:
  54. Note: html> / * This style sets the width of all images to 100%: */ img { width: 100%; Width/Height Attributes or Style? The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%. The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section: Output: Note: html> lmages in Another Folder is common to store images in a sub-folder. You must then include the folder name in the src attribute:
  55. Output: Note: html> lmages on Another Server Output: Note: html> Animated Images HTML allows moving images: Output: Note: html>
  56. lmage as a Link The image is a link. You can click on Output: Note: html> Floating Images Float the image to the right: A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. Float the image to the left: A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. Output: Note: html>
  57. lmage Maps Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic: lmage Maps 137911 > 137911>
  58. Click on the cup of coffee to go to a new page and read more about the topic: lmage Maps Click on the croissant to go to a new page and read more about the topic:
  59. N/A
  60. By default, the background-image will repeat itself in the direction(s) where it is smaller than the element where it is specified. (Try resizing the browser window to see how the background image behaves. Output: Note: html> div { background-image: url('img_girl.jpg'); Background Image You can specify background images for any visible HTML element. In this example, the background image is specified for a div element. By default, the background-image will repeat itself in the direction(s) where it is smaller than the element where it is specified. (Try resizing the browser window to see how the background image behaves. Output: Note:
  61. html> body { background-image: url('img_girl.jpg'); Background Image By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element. Output: Note: html> body { background-image: url('example_img_girl.jpg'); Background Repeat By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element. Output:
  62. Note: html> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; Background No Repeat You can avoid the image from being repeated by setting the background-repeat property to "no- repeat". Output: Note: html> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; Background Cover Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.
  63. Output: Note: html> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; Background Stretch Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element. Output: Note: html> The picture Element
  64. Resize the browser to see different versions of the picture loading at different viewport sizes. The browser looks for the first source element where the media query matches the user's current viewport width, and fetches the image specified in the srcset attribute. The img element is required as the last child tag of the picture declaration block. The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched. Note: The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier. Output: Note:
  65. Heading: HTML Tables html> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; td, th { border: Ipx solid #dddddd; text-align: left; padding: 8px; tr:nth-child(even) { background-color: #dddddd; Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria
  66. lsland Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Output: Note: html> HTML Firstname Lastname Age Jill Smith 50 Eve Jackson 94
  67. John Doe 80 Output: Note: html> table, th, td { border: Ipx solid black; Table With Border Use the CSS border property to add a border to the table.
  68. 80 Output: Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; Collapsed Borders you want the borders to collapse into one border, add the CSS border-collapse property. Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80
  69. Output: Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 15px; Cellpadding Cell padding specifies the space between the cell content and its borders. Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80
  70. Tip: Try to change the padding to 5px. Output: Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 5px; th { text-align: left; Left-align Headings To left-align the table headings, use the CSS text-align property. Firstname Lastname Age Jill Smith 50 Eve Jackson
  71. 94 John Doe 80 Output: Note: html> table, th, td { border: Ipx solid black; padding: 5px; table { border-spacing: 15px; Border Spacing Border spacing specifies the space between the cells. Firstname Lastname Age Jill Smith 50 Eve
  72. Jackson 94 John Doe 80 Tip: Try to change the border-spacing to 5px. Output: Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 5px; text-align: left; Cell that spans two columns To make a cell span more than one column, use the colspan attribute. Name Telephone Bill Gates
  73. Output: Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 5px; text-align: left; Cell that spans two rows To make a cell span more than one row, use the rowspan attribute. Name: Bill Gates Telephone: Output:
  74. Note: html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 5px; text-align: left; Table Caption To add a caption to a table, use the caption tag. Monthly savings Month Savings January $100 February $50 Output: Note:
  75. html> table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 15px; text-align: left; #t01 { width: 100%; background-color: #flflcl; Styling Tables Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80
  76. Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80 Output: Note: html> table { width:100%; table, th, td { border: Ipx solid black; border-collapse: collapse; th, td { padding: 15px; text-align: left; #t01 tr:nth-child(even) { background-color: #eee; #t01 tr:nth-child(odd) {
  77. background-color: #fff; #t01 th { background-color: black; color: white; Styling Tables Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80 Firstname Lastname Age Jill Smith 50
  78. Eve Jackson 94 John Doe 80 Output: Note: Heading: HTML Lists html> An Unordered HTML List Coffee Tea Milk Ordered HTML Coffee Tea Milk Output: Note:
  79. html> An unordered HTML list Coffee Tea Milk Output: Note: html> An ordered HTML list Coffee Tea Milk Output: Note: html> A Description List
  80. Coffee - black hot drink Milk - white cold drink Output: Note: html> An unordered HTML list Coffee Tea Milk Output: Note: html> Unordered List with Disc Bullets Coffee Tea Milk
  81. Output: Note: html> Unordered List with Circle Bullets Coffee Tea Milk Output: Note: html> Unordered List with Square Bullets Coffee Tea Milk Output: Note:
  82. html> Unordered List without Bullets
  83. html> ul{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; float: left; lia{ display: block; color: white; text-align: center; padding: 16px; text-decoration: none; li a:hover { Navigation Menu this example, we use CSS to style the list horizontally, to create a navigation menu: Home News Contact About Output: Note:
  84. html> An ordered HTML list Coffee Tea Milk Output: Note: html> Ordered List with Numbers type="l"> Coffee Tea Milk Output: Note: html> Ordered List with Letters
  85. type="A"> Coffee Tea Milk Output: Note: html> Ordered List with Lowercase Letters type="a"> Coffee Tea Milk Output: Note: html> Ordered List with Roman Numbers type="l"> Coffee Tea Milk
  86. Output: Note: html> Ordered List with Lowercase Roman Numbers type="i"> Coffee Tea Milk Output: Note: html> The start attribute By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number: start="50"> Coffee Tea Milk start="50 > Coffee Tea Milk
  87. Output: Note: html> A Nested List Lists can be nested (list inside list): Coffee Black tea Green tea Milk Output: Note: html> A Description List Coffee - black hot drink Milk - white cold drink
  88. Output: Note: Heading : HTML Block and Inline html> Hello World The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can). Output: Note: html> This is an inline span Hello World element inside a paragraph. The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary. Output: Note: html>
  89. London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Output: Note: html> The span element My mother has blue eyes and my father has dark green eyes. Output: Note: Heading: HTML Classes html> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;
  90. London London is the capital of England. Paris Paris is the capital of France. TokY0 Tokyo is the capital of Japan. Output: Note: html> .note { font-size: 120%; color: red; My lmportant Heading This is some important text. Output: Note:
  91. html> .city { background-color: tomato; color: white; padding: 10px; The class Attribute Use CSS to style elements with the class name "city": London London is the capital of England. Paris Paris is the capital of France. .city { background-color: tomato; color: white; padding: 10px; .main { text-align: center;
  92. Multiple Classes Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text. London Paris .city { background-color: tomato; color: white; padding: 10px; Different Elements Can Share Same Class Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling: Paris class="city">Paris is the capital of France. Output: Note:
  93. html> Use of The class Attribute in JavaScript Click the button to hide all elements with class name "city": Hide elements London London is the capital of England. Paris Paris is the capital of France. #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center;
  94. The id Attribute Use CSS to style an element with the id "myHeader": My Header Output: Note: html> / * Style the element with the id "myHeader" * / #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; / * Style all elements with the class name City .city { background-color: tomato; color: white; padding: 10px; Difference Between Class and ID class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page: My Cities London
  95. London is the capital of England. Paris Paris is the capital of France. TokY0 Tokyo is the capital of Japan. Output: Note: html> Jump to Chapter 4 Jump to Chapter 10 Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla Chapter 5 This chapter explains ba bla bla Chapter 6 This chapter explains ba bla bla Chapter 7 This chapter explains ba bla bla Chapter 8 This chapter explains ba bla bla Chapter 9
  96. This chapter explains ba bla bla Chapter 10 This chapter explains ba bla bla Chapter 11 This chapter explains ba bla bla Chapter 12 This chapter explains ba bla bla Chapter 13 This chapter explains ba bla bla Chapter 14 This chapter explains ba bla bla Chapter 15 This chapter explains ba bla bla Chapter 16 This chapter explains ba bla bla Chapter 17 This chapter explains ba bla bla Chapter 18 This chapter explains ba bla bla Chapter 19 This chapter explains ba bla bla Chapter 20 This chapter explains ba bla bla Chapter 21 This chapter explains ba bla bla Chapter 22 This chapter explains ba bla bla Chapter 23 This chapter explains ba bla bla Output:
  97. Note: html> Using The id Attribute in JavaScript JavaScript can access an element with a specified id by using the getElementByld() method: Hello World! Change text function displayResult() { document.getElementByld("myHeader").innerHTML = "Have a nice day!" • Output: Note: Heading: HTML Iframes html> HTML Iframes You can use the height and width attributes to specify the size of the iframe: Output: Note: html>
  98. You can also use the CSS height and width properties to specify the size of the iframe: Output: Note: html> Remove the Iframe Border To remove the default border of the iframe, use CSS: Output: Note: html> Custom Iframe Border With CSS, you can also change the size, style and color of the iframe's border: Output:
  99. Note: html> lframe - Target for a Link W3Schools.com When the target attribute of a link matches the name of an iframe, the link will open in the iframe. Output: Note: Heading: HTMC JavaScript html> My First JavaScript Click me to display Date and Time. id="demo"> Output: Note:
  100. html> Use JavaScript to Change Text This example writes "Hello JavaScript!" into an HTML element with id="demo": id="demo"> document.getElementByld("demo").innerHTML = "Hello JavaScript!" • Output: Note: html> My First JavaScript JavaScript can change the content of an HTML element: Click Me! id="demo">This is a demonstration. function myFunction() { document.getElementByld("demo").innerHTML = "Hello JavaScript!" • Output: Note:
  101. html> My First JavaScript id="demo">JavaScript can change the style of an HTML element. function myFunction() { document.getElementByld("demo").style.fontSize = "25px"; document.getElementByld("demo").style.color = "red document.getElementByld("demo").style.backgroundColor = "yellow"; Click Me! Output: Note: html> My First JavaScript Here, a JavaScript changes the value of the src (source) attribute of an image. function light(sw) { var pic; if (sw == O) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" document.getElementByld('mylmage').src = pic,
  102. Light On Light Off Output: Note: html> id="demo"> document.getElementByld("demo").innerHTML = "Hello JavaScript!" • Sorry, your browser does not support JavaScript! browser without support for JavaScript will show the text written inside the noscript element. Output: Note: Heading: HTML File Paths html> a Full URL File Output:
  103. Note: html> Using a Relative File Path Output: Note: html> Using a Relative File Path Output: Note: html> Using a Relative File Path Output:
  104. Note: Heading: HTML Head html> A Meaningful Page Title The content of the body element is displayed in the browser window. The content of the title element is displayed in the browser tab, in favorites and in search-engine results. Output: Note: html> Page Title body {background-color: powderblue;} hl {color: red;} p {color: blue;} This is a Heading This is a paragraph. Output: Note: html>
  105. Page Title This is a Heading This is a paragraph. Output: Note: html> meta information goes inside the head section. Output: Note: html> Page Title function myFunction() { document.getElementByld("demo").innerHTML = "Hello JavaScript!" •
  106. My Web Page id="demo">A Paragraph Try it Output: Note: html>
  107. box-sizing: border-box; body { font-family: Arial, Helvetica, sans-serif; / * Style the header * / header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; / * Create two columns/boxes that floats next to each other * / nav { float: left; width: 30%; height: 300px; / * only for demonstration, should be removed * / background: #ccc; padding: 20px; / * Style the list inside the menu * / nav ul { list-style-type: none; padding: O; article { float: left; padding: 20px; width: 70%; background-color: #flflfl; height: 300px; / * only for demonstration, should be removed * / / * Clear floats after the columns * / section:after { content: display: table; clear: both;
  108. / * Style the footer * / footer { background-color: #777; padding: 10px; text-align: center; color: white; / * Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens * / @media (max-width: 600px) { nav, article { width: 100%; height: auto; CSS Layout Float this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other. Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.) Cities London href="#">Paris
  109. Footer Output: Note: html> CSS Template box-sizing: border-box; body { font-family: Arial, Helvetica, sans-serif; / * Style the header * / header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; / * Container for flexboxes * / section { display: -webkit-flex; display: flex; / * Style the navigation menu * / nav { -webkit-flex: 1; -ms-flex: 1; flex: 1;
  110. background: #ccc; padding: 20px; / * Style the list inside the menu * / nav ul{ list-style-type: none; padding: 0; / * Style the content * / article { -webkit-flex: 3; -ms-flex: 3; flex: 3; background-color: #flflfl; padding: 10px; / * Style the footer * / footer { background-color: #777; padding: 10px; text-align: center; color: white; / * Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other * / @media (max-width: 600px) { section { -webkit-flex-direction: column; flex-direction: column; CSS Layout Flexbox this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other. Resize the browser window to see the responsive effect. Note: Flexbox is not supported in Internet Explorer 10 and earlier versions. Cities
  111. London Paris box-sizing: border-box; .menu { float: left; width: 20%; .menuitem { padding: 8px; margin-top: 7px;
  112. border-bottom: Ipx solid #flflfl; .main { float: left; width: 60%; padding: 0 20px; overflow: hidden; .right { background-color: lightblue; float: left; width: 20%; padding: 10px 15px; margin-top: 7px; @media only screen and (max-width:800px) { / * For tablets: * / .main { width: 80%; padding: 0; .right { width: 100%; @media only screen and (max-width:500px) { / * For mobile phones: * / .menu, .main, .right { width: 100%; Cinque Terre Resize the browser window The Walk Transport History Gallery
  113. The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.
  114. Note: html>
  115. Responsive Text style="font-size:5vw;">Resize the browser window to see how the text size scales. style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width. Viewport is the browser window size. Ivw = 1% of viewport width. If the viewport is 50cm wide, Ivw is 0.5cm. Output: Note:
  116. html>
  117. Main Content Right Content Output: Note: html>
  118. padding:15px; margin-top:7px; text-align:center; @media only screen and (max-width:620px) { / * For mobile phones: * / .menu, .main, .right { width:100%;
  119. html> W3.CSS W3Schools Demo Resize this responsive page! London London is the capital city of England. is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants. TokY0 Tokyo is the capital of Japan. is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. Output: Note:
  120. html> Bootstrap Example My First Bootstrap Page Resize this responsive page to see the effect! Column 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit... enim ad minim veniam, quis nostrud exercitation ullamco laboris... Column 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit... enim ad minim veniam, quis nostrud exercitation ullamco laboris... Column 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit... enim ad minim veniam, quis nostrud exercitation ullamco laboris... Output: Note: Heading: H T ML Computer Code html>
  121. Computer Code Some programming code: x = 5; Y = 6; Output: Note: html> The kbd Element The kbd element is used to define keyboard input: Save the document by pressing Ctrl + S Output: Note: html> The samp Element The samp element is used to define sample output from a computer program. Message from my computer: File not found.Press Fl to continue
  122. Output: Note: html> The code Element Programming code example: Output: Note: html> The code element does not preserve whitespace and line-breaks. To fix this, you can put the code element inside a pre element:
  123. Output: Note: html> The var Element The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height. Output: Note: Heading: HTML Semantics html> The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. WWF's Panda symbol The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF. Output:
  124. Note: html> The article element Google Chrome Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today! Mozilla Firefox Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018. Microsoft Edge Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer. Output: Note: html> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; .all-browsers > hl, .browser { margin: 10px;
  125. padding: 5px; .browser { background: white; .browser > h2, p { margin: 4px; font-size: 90%; Most Popular Browsers Google Chrome Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today! Mozilla Firefox Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018. Microsoft Edge Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer. Output: Note: html>
  126. Does WWF WWPs mission: WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature. Output: Note: html> Author: Hege Refsnes [email protected] Output: Note: html>
  127. Note: html> My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family! Epcot Center Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events. Output: Note: html> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family! The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
  128. My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family! My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family! Output: Note: html> Places to Visit Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site. Fig.1 - Trulli, Puglia, Italy. Output: Note: Heading: HTML Style Guide html> Page Title This is a heading This is a paragraph. Output:
  129. Note: html> Page Title This is a heading This is a paragraph. Output: Note: html> Page Title This is a heading This is a paragraph. Output: Note: html> id="Demo">This is paragraph id="demo">This is paragraph // Only paragraph 2 will be overwritten
  130. document.getElementByld("demo").innerHTML - - "HELLO. Output: Note: Heading : HTML Symbols html> will display &euro; will display &#8364; will display &#x20AC; Heading: HTML Emoiis html>
  131. html> Sized Emojis style="font-size:48px">
  132. Output: Note: Heading: HTML Forms html> First name: Last name: you click the "Submit" button, the form-data will be sent to a page called "/action_page.php". Output: Note: html> Text input fields
  133. First name: Last name: Note that the form itself is not visible. Also note that the default width of text input fields is 20 characters. Output: Note: html> Radio Buttons Male Female Other Output: Note: html>
  134. First name: Last name: you click the "Submit" button, the form-data will be sent to a page called "/action_page.php". Output: Note: html> The form target attribute When submitting this form, the result will be opened in a new browser tab:
  135. The method Attribute This form will be submitted using the GET method: First name: Last name: After you submit, notice that the form values is visible in the address bar of the new browser tab. Output: Note: html> The method Attribute This form will be submitted using the POST method: First name: Last name: After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab. Output: Note:
  136. html> The name Attribute First name: you click the "Submit" button, the form-data will be sent to a page called "/action_page.php". Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute. Output: Note: Heading: HTML Form Element html> The input Element First name: Output: Note:
  137. html> The select Element The select element defines a drop-down list: Choose a car: Volvo Saab Fiat Audi Output: Note: html> Pre-selected Option You can preselect an option with the selected attribute: Choose a car: Volvo Saab Fiat Audi
  138. Output: Note: html> Visible Option Values Use the size attribute to specify the number of visible values. Choose a car: \/olvo Saab Fiat Audi Output: Note: html> Allow Multiple Seletcions Use the multiple attribute to allow the user to select more than one value. Choose a car:
  139. Volvo Saab Fiat Audi Hold down the Ctrl (windows) / Command (Mac) button to select multiple options. Output: Note: html> Textarea The textarea element defines a multi-line input field. The cat was playing in the garden. Output: Note: html> Styling Textarea Use CSS to change the size of the textarea:
  140. The cat was playing in the garden. Output: Note: html> The button Element Grouping Form Data with Fieldset The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element. Personalia: First name: Last name:
  141. Output: Note: html> The datalist Element The datalist element specifies a list of pre-defined options for an input element. Note: The datalist tag is not supported in Safari prior version 12.1. Output: Note: html> The output Element
  142. The output element represents the result of a calculation.
  143. Note: html> Password field The input type="password" defines a password field: Username: Password: The characters in a password field are masked (shown as asterisks or circles). Output: Note: html> Submit Button The input type="submit" defines a button for submitting form data to a form- handler: First name: Last name: you click "Submit", the form-data will be sent to a page called "/action_page.php".
  144. Output: Note: html> First name: Last name: Output: Note: html> Reset Button The input type="reset" defines a reset button that resets all form values to their default values: First name: Last name:
  145. you change the input values and then click the "Reset" button, the form-data will be reset to the default values. Output: Note: html> Radio Buttons The input type="radio" defines a radio button: Male Female Other Output: Note: html> Checkboxes The input type="checkbox" defines a checkbox: I have a bike
  146. I have a car I have a boat lnput Button Output: Note: html> Show a Color Picker Click The input type="color" is used for input fields that should contain a color. Select your favorite color:
  147. Output: Note: html> Date Field The input type="date" is used for input fields that should contain a date. Birthday: Note: type="date" is not supported in Safari or Internet Explorer 11 (or earlier). Output: Note: html> Date Field Restrictions Use the min and max attributes to add restrictions to dates: Enter a date before 1980-01-01: Enter a date after
  148. Note: type="date" is not supported in Safari or Internet Explorer 11 (or earlier). Output: Note: html> Local Date Field The input type="datetime-local" specifies a date and time input field, with no time zone. Birthday (date and time): Note: type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 (or earlier). Output: Note: html> Email Field
  149. The input type="email" is used for input fields that should contain an e-mail address: Enter your email: Output: Note: html> File upload Show a file-select field which allows a file to be chosen for upload: Select a file: Output: Note: html> Month Field The input type="month" allows the user to select a month and year.
  150. Birthday (month and year): Note: type="month" is not supported in Firefox, Safari, or Internet Explorer 11 (or earlier). Output: Note: html> Number Field The input type="number" defines a numeric input field. You can use the min and max attributes to add numeric restrictions in the input field: Quantity (between 1 and 5): Depending on browser support: Fixed steps will apply in the input field.
  151. Quantity: Range Field Depending on browser support: The input type "range" can be displayed as a slider control. Volume (between O and 50): Search Field The input type="search" is used for search fields (behaves like a regular text field): Search Google:
  152. Output: Note: html> Telephone Field The input type="tel" is used for input fields that should contain a telephone number: Enter a phone number:
  153. Select a time: Note: type="time" is not supported in Safari or Internet Explorer 12 (or earlier). Output: Note: html> Display a URL Input Field The input type="url" is used for input fields that should contain a URL address: Add your homepage: Output: Note: html> Display a Week Input Control The input type="week" allows the user to select a week and year.
  154. the browser supports it, a date picker pops up when entering the input field. Select a week: Note: type="week" is not supported in Firefox, Safari or Internet Explorer 11 (or earlier). Output: Note: Heading: Input Attribute html> The input value attribute The value attribute specifies an initial value for an input field: First name: Last name: Output: Note: html>
  155. The input readonly attribute The readonly attribute specifies that an input field should be read-only (cannot be changed): First name: Last name: Output: Note: html> The input disabled attribute The disabled attribute specifies that an input field should be disabled (unusable and un- clickable): First name: Last name: Output: Note:
  156. html> The input size attribute The size attribute specifies the width (in characters) of an input field: First name: PlN: Output: Note: html> The input maxlength attribute The maxlength attribute specifies the maximum number of characters allowed in an input field: First name:
  157. html> The input min and max attributes The min and max attributes specify the minimum and maximum values for an input element. Enter a date before 1980-01-01: Enter a date after Quantity (between 1 and 5): Output: Note: html> The input multiple attributes The multiple attribute specifies that the user is allowed to enter more than one value in an input field. Select files: To select multiple files, hold down the CTRL or SHIFT key while selecting.
  158. Output: Note: html> The input pattern attribute The pattern attribute specifies a regular expression that the input element's value is checked against. Country code: Note: The pattern attribute of the input tag is not supported in Safari 10 (or earlier). Output: Note: html> The input placeholder attribute The placeholder attribute specifies a short hint that describes the expected value of an input field. Enter a phone number:
  159. Output: Note: html> The input required attribute 123-45-678" pattern:" The required attribute specifies that an input field must be filled out before submitting the form. Username: Note: The required attribute of the input tag is not supported in Safari prior version 10.1. Output: Note: html> The input step attribute The step attribute specifies the legal number intervals for an input element.
  160. Points:
  161. First name: Last name: Note: The input type="image" sends the X and Y coordinates of the click that activated the image button. Output: Note: html> The input list attribute The list attribute refers to a datalist element that contains pre-defined options for an input element.
  162. Note: html> The autocomplete attribute The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. in and submit the form, then reload the page to see how autocomplete works. Notice that autocomplete is "on" for the form, but "off" for the e-mail field First name: Last name: Email: Output: Note: Heading: HTML Input Attributes html> The input form attribute The form attribute specifies the form an input element belongs to. First name:
  163. The "Last name" field below is outside the form element, but still part of the form. Last name: Output: Note: html> The input formaction attribute The formaction attribute specifies the URL of a file that will process the input when the form is submitted. First name: Last name: Output: Note: html> The input formenctype attribute
  164. The formenctype attribute specifies how the form data should be encoded when submitted. First name: Output: Note: html> The input formmethod Attribute The formmethod attribute defines the HTTP method for sending form-data to the action First name: Last name: Output: Note: html>
  165. The input formtarget attribute The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. First name: Last name: blank" value="Submit to a new window/tab">
  166. html> The form novalidate attribute The novalidate attribute specifies that the form data should not be validated when submitted. Enter your email: Note: The novalidate attribute of the form tag is not supported in Safari 10 (or earlier). Output: Note: Heading: HTML Canvas html>
  167. Your browser does not support the HTML canvas tag. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.stroke(); Output: Note: html> Your browser does not support the HTML canvas tag. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.stroke(); Output: Note: html>
  168. Your browser does not support the HTML canvas tag. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10,50); Output: Note: html> Your browser does not support the HTML canvas tag. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); Output: Note: html> Your browser does not support the HTML canvas tag.
  169. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,O,200,0); grd.addColorStop(O,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; Output: Note: html> Your browser does not support the HTML canvas tag. var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; Output: Note:
  170. html> lmage to use: Canvas to fill: Your browser does not support the HTML canvas tag. Try it function myCanvas() { var c = document.getElementByld("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementByld("scream"); ctx.drawlmage(img,10,10); Output: Note: Heading: HTML SVG html>
  171. Note: html> Sorry, your browser does not support inline SVG. Output: Note: html> Sorry, your browser does not support inline SVG. Output: Note: html>
  172. Sorry, your browser does not support inline SVG. Output: Note: html>
  173. Video courtesy of Big Buck Bunny. Output: Note: html> Your browser does not support the video tag. Output: Note: html> Your browser does not support the video tag. Note: The autoplay attribute does not work on some mobile devices.
  174. Output: Note: html> Play/Pause Big Small Normal Your browser does not support HTML video. var myVideo = document.getElementByld("vide01"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); function makeBig() { myVideo.width = 560; function makeSmall() { myVideo.width = 320; function makeNormal() { myVideo.width = 420; Video courtesy of Big Buck Bunny.
  175. Output: Note: Heading: HTML Audio html> Your browser does not support the audio element. Output: Note: Heading: HTML Plug-ins html> Output: Note: html>
  176. Output: Note: html> Output: Note: html> "https://www.youtube.com/embed/tgbNymZ7vqY">
  177. Output: Note: html> Output: Note: html> Output: Note: Heading: HTML Geolocation html> Click the button to get your coordinates.
  178. Try lt id="demo"> var x = document.getElementByld("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; Output: Note: html> Click the button to get your coordinates. Try lt id="demo"> var x = document.getElementByld("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = "Geolocation is not supported by this browser."
  179. function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; function showError(error) { switch(error.code) { case error.PERMlSSlON DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSlTlON UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TlMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN ERROR: x.innerHTML = "An unknown error occurred." break; Output: Note: html> Click the button to get your coordinates. Try lt id="demo"> var x = document.getElementByld("demo");
  180. function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser.", function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; Output: Note: Heading: HTML Drag and Drop HTML> #divl { width: 350px; height: 70px; padding: 10px; border: Ipx solid #aaaaaa; function allowDrop(ev) { ev.preventDefault(); function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementByld(data));
  181. Drag the W3Schools image into the rectangle: Output: Note: HTML> #divl, #div2 { float: left; width: IOOpx; height: 35px; margin: 10px; padding: 10px; border: Ipx solid black; function allowDrop(ev) { ev.preventDefault(); function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementByld(data));
  182. Drag and Drop Drag the image back and forth between the two div elements. Output: Note: Heading: HTML Web Storage html> // Check browser support if (typeof(Storage) !== 'undefined") { // Store localStorage.setltem("lastname", "Smith"); // Retrieve document.getElementByld("result").innerHTML = localStorage.getltem("lastname"); } else { document.getElementByld("result").innerHTML = "Sorry, your browser does not support Web Storage Output:
  183. Note: html> function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; localStorage.clickcount = 1; document.getElementByld("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; } else { document.getElementByld("result").innerHTML = "Sorry, your browser does not support web storage Click me! Click the button to see the counter increase. Close the browser tab (or window), and try again, and the counter will continue to count (is not reset). Output: Note: html> function clickCounter() { if (typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) {
  184. sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; sessionStorage.clickcount = 1 document.getElementByld("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session." , } else { document.getElementByld("result").innerHTML = "Sorry, your browser does not support web storage Click me! Click the button to see the counter increase. Close the browser tab (or window), and try again, and the counter is reset. Output: Note: Heading: HTML Web Worker html> Count numbers: Start Worker Stop Worker Note: Internet Explorer 9 and earlier versions do not support Web Workers. var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js");
  185. w.onmessage = function(event) { document.getElementByld("result").innerHTML = event.data; } else { document.getElementByld("result").innerHTML = "Sorry, your browser does not support Web Workers function stopWorker() { w.terminate(); w = undefined; Output: Note: html> Count numbers: Start Worker Stop Worker Note: Internet Explorer 9 and earlier versions do not support Web Workers. var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); w.onmessage = function(event) { document.getElementByld("result").innerHTML = event.data; } else {
  186. document.getElementByld("result").innerHTML = "Sorry, your browser does not support Web Workers function stopWorker() { w.terminate(); w = undefined; Output: Note: Heading: HTML SSE html> Getting server updates if(typeof(EventSource) !== "undefined") { var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementByld("result").innerHTML += event.data + ""; } else { document.getElementByld("result").innerHTML = "Sorry, your browser does not support server- sent events Output: Note:
  187. Heading : HTML Accessibility html> Semantic HTML Semantic HTML means using correct HTML elements for their correct purpose as much as possible. you need a button, use the button element and not a div: Click Me Click Me makes much more sense to use a button element: it has more suitable styling than the div, and it is focusable and clickable by default. Output: Note: html> Semantic HTML Semantic HTML means using correct HTML elements for their correct purpose as much as possible. you need a button, use the button element and not a div: Click Me Click Me makes much more sense to use a button element: it has more suitable styling than the div, and it is focusable and clickable by default. Output: Note:
  188. html> Heading 1 Heading 2 Heading 3 Heading Heading 5 Heading 6 Output: Note: html> Alternative text The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains: Output: Note: html> a browser cannot find the image, it will display the alternate text:
  189. Output: Note: html> Write Good Links link should explain clearly what information the reader will get by clicking on that link. Examples of bad links: Click here Read more.. Buy tickets to Mars here Examples of good links: Find out more about the HTML language Read more about how to eat healthy Buy tickets to Mars here Note that these are just examples, and not clickable. Output: Note: !DOCTYPE html> Write Good Links link should explain clearly what information the reader will get by clicking on that link. Examples of bad links:
  190. Click here Read more.. Buy tickets to Mars here Examples of good links: Find out more about the HTML language Read more about how to eat healthy Buy tickets to Mars here Note that these are just examples, and not clickable. Output: Note: html> Link Titles The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Visit our HTML Tutorial Output: Note:

Need a Tutor or Coaching Class?

Post an enquiry and get instant responses from qualified and experienced tutors.

Post Requirement

Related Study Notes

Upload Study Notes

If you have your own Study Notes which you think can benefit others, please upload on LearnPick. For each approved Study Note you will get 100 Credit Points and 100 Activity Score which will increase your profile visibility.

Upload Now
Home > Study Notes > Notes On HTML Programs