HTML part 2
specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Link Titles
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Link to an Email Address to create a link that opens the user's email program (to let them send a new email)
<a href="mailto:[email protected]">Send email</a>
Shape="poly"
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"> 140,121 - first point
specifies the base URL and/or target for all relative URLs in a page.
<base h--ref="https://www.w3schools.com/" target="_blank">
Button as a Link
<button on--click="document.location='default.asp'">HTML Tutorial</button> To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button:
is a block-level element. is often used as a container for other HTML elements. has no required attributes, but style, class and id are common. When used together with CSS, the <div> element can be used to style blocks of content
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>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.</p> </div>
a list of terms, with a description of each term. The ... tag defines the description list, the ... tag defines the term (name), and the ... tag describes each term
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
rgb/rgba
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> a - transparency
set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Multiple Classes
<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: Different Elements Can Share Same Class
Absolute URLs vs. Relative URLs
<h2>Absolute URLs</h2> <p><a href="https://www.w3.org/">W3C</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>Relative URLs</h2> <p><a href="html_images.asp">HTML Images</a></p> <p><a href="/css/default.asp">CSS Tutorial</a></p>
How to open a clicked link through iframe
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe
used to display a web page within a web page
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> An HTML iframe Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.
In the following example, the file path points to a file in the images folder located in the current folder: In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:
<img src="images/picture.jpg" alt="Mountain"> <img src="../images/picture.jpg" alt="Mountain">
Image Size - Width and Height
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;"> or <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> we suggest using the style attribute. It prevents styles sheets from changing the size of images
Animated Images
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Setting the viewport to make your website look good on all devices:
You should include the following <meta> element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0"> The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but are used by browsers (how to display content or reload page), by search engines (keywords), and other web services.
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.
HTML - The Head Element
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <sc-ript>, and <base>.
Using The id Attribute with style
<!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html>
Using The class attribute(with spans)
<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> Tip: The class attribute can be used on any HTML element. Note: The class name is case sensitive!
Use an Image as a Link
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
add a link to the bookmark ("Jump to Chapter 4"), from another page
<a href="html_demo.html#C4">Jump to Chapter 4</a>
HTML Links - The target Attribute
<a href="https://www.w3schools.com/" target="_self">Visit W3Schools!</a> ...target="_blank"... ...target="_parent"... ...target="_top"... _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame _top - Opens the document in the full body of the window
You can add comments to your HTML source by using the following syntax:
<!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here -->
starts with the ... tag. Each list item starts with the ... tag. The list items will be marked with bullets (small black circles) by default
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Image Maps
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map> 34, 44 - point 1 rect. 270, 350 - point 2 rect 337,300 - circle center, 44 - radius
use the ... attribute to execute a JavaScript function when the area is clicked
<map name="workmap"> <area shape="circle" coords="337,300,44" on--click="myFunction()"> </map> <scri--pt> fun--ction myFunction() { al--ert("You clicked the coffee cup!"); } </scrip--t>
Define the character set used:
<meta charset="UTF-8">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Define the author of a page:
<meta name="author" content="John Doe">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the ... attribute
<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered HTML List - The Type Attribute
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers
starts with the ... tag. Each list item starts with the ... tag. The list items will be marked with numbers by default
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
When the link is clicked, the page will scroll down or up to the location with the bookmark.
<p><a href="#C4">Jump to Chapter 4</a></p> <p><a href="#C10">Jump to Chapter 10</a></p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p>
an inline container used to mark up a part of a text, or a part of a document. The ... element has no required attributes, but style, class and id are common. When used together with CSS, the ... element can be used to style parts of the text
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Show different images for different screen sizes:
<picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture> Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.
Format Support
<picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture> Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.
Using The class Attribute(with divs)
<style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> <div class="city"> --applies only to this <h2>London</h2> <p>London is the capital of England.</p> </div> <div> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> Tip: The class attribute can be used on any HTML element. Note: The class name is case sensitive!
To add a caption to a table, use
<table style="width:100%"> <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> Note: The <caption> tag must be inserted immediately after the <table> tag.
A simple HTML table:
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
To make a cell span more than one row, use
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> (Telephone points to both numbers)
Cell that Spans Many Columns
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> (Telephone takes two columns)
defines the title of the document.
<title>A Meaningful Page Title</title>
Nested HTML Lists
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
HTML HEX Colors ❮ PreviousNext ❯
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00. To display black, set all color parameters to 00, like this: #000000. To display white, set all color parameters to ff, like this: #ffffff.