You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
HTML describe webpage structure with tags marking the documents appropriately to
tell the browser what each tagged element is.
Here, defines that document is html5, is root element of an html page,
contains meta information about the html page, <title> specifies title for the page( which is shown in the browser's title bar or page's tab. is a container for all visible contents of a site.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<br> is an empty element...elements without content
Browsers use tag to determine how to display the content of a
UTF-8 is preferred way to encode html file and save type as "All Files(.)"
.htm or .html extensions are the same thing. You decide whichever one you want.
returnBack to table of contents
HTML BASICS
<!DOCTYPE> declaration represents the document type, and helps browsers display web pages correctly. Must appear once in the webpage, not case sensitive
This is how to declare doctype for HTML5
<!DOCTYPE html>
*Attributes provide additional information about html elements
<a> defines html links
'href' attribute defines link destination
<img> defines html images. The attributes src(source file), alternative text(alt), width,and height
When you inspect a site, you can edit the html or css on-the-fly.
Example of using the imag tag
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
HTML links: <a href="https://www.w3schools.com">Visit W3Schools</a>
The SRC attribute:
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>
<img src="img_girl.jpg" width="500" height="600">
Relative url: Links to image hosted within the website. No domain name included here. src="img_girl.jpg"
src="/images/img_girl.jpg" **in this case, the slash is relative to the site url
**Width and height attribute(pixels) with <img>
<img src="img_girl.jpg" width="500" height="600">
**Alt attribute includes alternative text for the image incase a user can not read the image:
**style attribute adds style elements like color, font, size, etc to an image
<p style="color:red;">This is a red paragraph.</p>
**Lang attribute: Should always be included inside an tag the declare website language to assist search engines locate you
In html, you cannot be sure of how html will be displayed on each screen size. Adding extra lines or spaces to the document does not add new lines to the page.
Browser removes extra spaces once page displays
<p>This is a paragraph</p>
Horizontal rules: <hr> Used to separate content(define change) and defines a thematic break in an HTML page. It shows up as an horizontal line.
<hr> tag has no closing tag since it is an empty tag.
Line breaks: <br> element
Use this when you want a line break without starting a new paragraph.
The Poem Problem: Poems have to be included in the <pre> preformatted text tag
The <pre> tag displays text in fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Tags summary
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
<b> - Bold text
<strong> - Important text
<i> - Italic text...often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
<em> - Emphasized text. A screen reader will emphasize the text using verbal stress
<mark> - Marked text. Element that should be highlighted. You can use style to change the color.
<small> - Smaller text
<del> - Deleted text. Browsers usually strike a line through
<ins> - Inserted text... (into a document) Browsers usually underline this. Can be used after del.
<sub> - Subscript text...appears half a character below the normal line
<sup> - Superscript text...can be used for footnotes citation
*<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<abbr> Defines an abbreviation or acronym. Marking them give information to browsers, translation systems and search engines. Use global attribute title with it to show full meaning of the abbreviation.
<address> Defines contact information for the author/owner of a document or an article. This can be email, url, physical, mobile no, social media handles etc. Browsers add line break before and after <address> element.
<bdo> Defines the text direction.Used to override current text direction
<blockquote> Defines a section that is quoted from another source. Browser usually indents this. cite is used here to show the source, not href.
<cite> Defines the title of a creative work. Creator's name is not a title.Browsers will usually cite this element in italic
<q> Defines a short inline quotation.Browser inserts quotation marks around the quotation
Quote
<p>Here is a quote from WWF's website:</p>
<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.
</blockquote>
Short Quotations
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
The use of abbreviation <abbr>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Address
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Cite for work title
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Bi-Directional Override(BDO)
<bdo dir="rtl">This text will be written from right to left</bdo>
rgb(r,g,b) each parameter has a value between 0 and 255 i.e 256 in total
Total number of colors: 256 x 256 x 256 = 16777216 possible colors!
Red color: rgb(255, 0, 0),
Green color: rgb(0, 255, 0)
Black: rgb(0, 0, 0)
White:rgb(255, 255, 255).
Grey: rgb( x,x,x) where x is not zero or 255. Black and white are at the two ends of the color spectrum.
RGBA
rgba(red, green, blue, alpha) alpha 0 means fully transparent while 1.0 is not transparent at all.
RR(RED), GG(GREEN)BB(BLUE)...HEXADECIMAL INTEGERS SPECIFY THE COMPONENTS OF THE COLORS, EACH WITH VALUES RANGING FROM 00 TO ff ( same as decimal 0-255)
#ff0000- red since red has the highest value (ff) while the green and blue appear as 00 and 00
#00ff00 appears as green since green is set to the highest value(ff) and the remaining two have zero values
To display black, set all color parameters to 00, like this: #000000.
To display white, setll all color parameters to ff: #ffffff
Shades of gray: Equal values for all the parameters:
Each one of these are different shades of gray.
Hue: Degree on the colorwheel from 0 to 360 0 is red, 120 gree, 240 blue
Saturation: It is a percentage value. 0% is black, and 100 % is full color
Lightness:Alsp a percentage value: 0% is black and 100% white
Saturation can be described as the intensity of a color. It is about how much shade of gray you want to have showing up on the color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
** The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
Shades of Gray: Can be obtained by setting hue and saturation to 0, and adjust the lighness from 0 % to 100 % to get darker/lighter shades:
hsl(0, 0%, 20%) --darker shade of grey
hsl(0, 0%, 70%)== lighter shade of grey
HSLA Color Values:
Alpha rep transparency. 0.00 means fully transparent and 1.0 not transparent at all.
CSS can control layout of multiple pages at same time.
CSS: CAscading style sheets: To control color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes etc
Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Internal CSS: To define style for a single HTML Page and it defined in section of an html page within <style> element
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS: Define style for many HTML pages. To use the external style, you add a link to it in the head section of the html. File must not contain any HTML Code and can be written in any text editor. Save with a .css extension.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styles.css looks like this
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Links to a style sheet located in the html folder on the current web site:
<link rel="stylesheet" href="/html/styles.css">
HTML CSS SUMMARY:
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML element to refer to an external CSS file
Use the HTML element to store <style> and elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
They are hyperlinks that can be clicked to be redirected to another page.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
<a> tag defines hyperlinks:
<a href="url">link text</a>
href attribute is the link destination, and the link text is what the use sees.
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
** By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
Possible Values for the target attribute:
_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
Absolute vs Relative URLs
Absolute URLs use the full web address in href attribute.
A link to a page within the current is specified with a relative URL( OMITTING HTTPS://WWW.)
** Link to an Email Address: use mailto: inside href attribute to create a link that oopens in the user's email program (to let them send a new email):
** To use a button as an HTML Link; you need to add some Js CODES. JS allows you to specify what happends at cetain events, such as a click of a button:
** Here is the JS code
<button onclick="document.location='default.asp'">HTML Tutorial</button>
** LInk titles: Shown as tooltip when mouse pointer is moved on element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Link to a page located in the same folder ( within the html folder of the current website ) as the current page:
<a href="default.asp">HTML tutorial</a>
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
Use the element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the element (inside ) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
Image tag is used to insert images in a webpage. Images are linked to a webpage not embeded.
SRC attributes
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
Browsers get image from a web server and inserts into the page each time yu load. Image stays in same spot in relation to a webpage...else the alt text shows up to indicate that the link is brocken.
**Value of alt attribute shows in cases where: because of slow connection, an error in the src attribute, or if the user uses a screen reader which reads html code and reads out for the user...usually used by the visually impaired people.
**You can also specify width and height in the style attribute of the image
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
**With and height attribute as width and height attribute...which is always in pixels
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
**It is better to use style attribute so the stylesheet does not end up changing image size.
**Let image float to the right or to the left of a text using CSS float property
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
-The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.
You can use any image as an image map.
-add a <map> element linked to the image using the name attribute.
<map name="workmap">
name attribute must have the same value as the 's usemap attribute
-Add clickable area to the image: You define the clickable area using an element.
Define shape of the clickable area using any of these values:
rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
-Define coordinate to be able to place the clickable area onto the image.
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis (distance from left) and one for the y-axis(distance from top).
So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:
Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:
**You can also trigger a JS function by clicking the poissant shape.
Add a click event to the element to execute a JavaScript function:
<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
You can use href with the function to inform user to confirm what they are trying to do before they follow the hyperlink on the picture.
**Image Map summary: =
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
**You can also specify background image in the style element of the head section
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
**Adding background image for an entire page:specify background image on the body element
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
**Background image repeat:: Background image smaller than the element will repeat itself, horizontally and vertically,until it reaches the end of the element.
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
**You can set background repeat property to no repeat to prevent the background image from repeating itself.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Background Cover: You can set background-size property to cover to make background image to cover the entire element. set the background-attachment property to fixed to make sure the entire element is always covered...This keeps image original proportions.
<img> element should be specified last in the picture element. This element is used by the browsers that do not support the picture elment or if none of the tags work.
When to use the picture element::
-Bandwidth:: Wnen on a small screen device, browser searches through the source elements to find the matching element first.
-Format Support:: You can also add all image formats so that different browser image supports can be accommodated. In this case, the device use the first image format that it supports and ignore the rest.
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
<table> tag defined the HTML table.
<tr> defines table row
<th> defines table header. By default bold and centered.
<td> defines table data/cell.. By default regular and left-aligned. They are data containers for text, images, lists, other tables, etc.
** Add Cell Padding::: Specifies the space between the cell and its borders. If not specified, table cells are displayed without padding. Use css padding property to set padding:
th, td {
padding: 15px;
}
** Left-align Headings::Table headings are by default bold and centred.
To left-align table headings, use CSS text-align property.
th {
text-align: left;
}
** Add border spacing:: Specifies space between cells. Use CSS border-spacing property. Border spacing has no effect for table with collapsed borders
table {
border-spacing: 5px;
}
** Cells that Spans Many Columns:: use colspan attribute
CHAPTER SUMMARY _HTML CHAPTER SUMMARY
Use the HTML <table> element to define a table
Use the HTML <tr>element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
** unordered list has bullets
** ordered lists have numberings or some kind of sequence labels
Unordered html list:: each starts with <ul> tag and each list item starts with <li> tag
by default, list item is marked with small black circles as bullets.
HTML Description lists:: List of terms with description of each term in the list. description list is marked by <dl> tag and each description term (name) is marked by <dt> xyz and the description of each description list term is tagged by <dd>:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List tags summary
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
To choose list marker, use css list-style-type property to define style of the list item market.
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
Use the CSS property float:left to display a list horizontally
** HTML List Tags Summary
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Ordered List::
<ol> tag defines an ordered list which can be numerical or alphabetical.
List are marked by numbers by default
** Ordered HTML List - The Type Attribute
With the type attribute of the
tag, you can define the type of the list item marker
Type Description
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
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
HTML List Tags
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Description lists: List of terms with a description of each term.
<dl> tag defines the list, <dt> defines the term (name), and <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Description list summary:
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
HTML List Tags
**Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Every HTML element has a default display value, depending on what type of element it is. Display values can be block or inline
Block-level Elements
Block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)
<div> element is a block-level element
Other block-level element include:
Here are the block-level elements in HTML:
An inline element cannot contain a block-level element
The <div> Element
<div> element is used as a container for other HTML elements.
<div> element has no required attribute. the common attributes of the div element are: style, class, id
When used together with CSS, the <div> element can 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>
The <span> Element: Used to mark up a part of a text, or part of a document. <span> element has no required attribute...style,class and id are common ones. When used with css, the span element can be used to style parts of a 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>
** Chapter Summary
There are two display values: block and inline
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div> element is a block-level and is often used as a container for other HTML elements
The <span> element is an inline container used to mark up a part of a text, or a part of a document
** HTML Tags summarized
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
** html class attribute is used to specify a class for an html element.
Multiple html elements can also share the same class.
Class attribute is used to point to a class to manipulate together in a style sheet. Javascript can also manipulate elements in the same class together.
** In the example below, all three div elements with class city are style equally together equally according to the .city style definition in the header.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
** Here we can also style note class in <span> elements with .note style definition
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
The Syntax for Class.
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Multiple classes.
HTML elements can belong to multiple classes. Define multiple classes by separating the class names with a space. The element will be styled according to all classes specified.
Below, <h2> elements belongs to both city class and also main class(<div class="city main">)
Below, h2 element belongs to both city class and also to the main class and will get CSS styles from both of the classes
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Different HTML elements like <p> and <h2> points to city class ans share same style
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
** Use ofthe class Attribute in Javascript
Class name can also be used by JS to perform certain tasks for specific elements.
JS usually access elemetns with a specific class name with the getElementByClassName() method:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
HTML ID ATTRIBUTE: Used to specify a unique id for an HTML element.
Only one element has a particular id.
The id attribute is used to point to a specific style declaration in a style sheet. Also used by JS to access and manipulate elements with the specific id.
id syntax: write hash (#) followed by an id name. Then define the CSS properties with curly braces {}. in the sheet below, <h1> element is styled according to the
HashmyHeader style definition in the header section
** The id name is case sensitive! And it must contain at least one character, and must not contain whitespaces (spaces, tabs, etc.).
Diff between Class and ID: Class can be used by multiple HTML elements while id name must only be used by one HTML element within the page.
** Below we illlustrate the difference between Class and ID
<!DOCTYPE html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
** HTML Bookmarks with ID and Links.
Html bookmarks allows readers to jump to a specific part of a webpage, useful for very long pages.
To use a bookmark, create it and then add a link to it. Once link is clicked, page scrolls to the location with the bookmark.
** To create a bookmark,
<h2 id="C4">Chapter 4</h2>
To add a link to it:
<a href="#C4">Jump to Chapter 4</a>
To add a link to the bookmark (Jump to Chapter 4) from another page.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
** See the demonstration below:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Using the id Attribute in JavaScript
The id attribute can also be used by JavaScript to perform some tasks for that specific element.
JavaScript can access an element with a specific id with the getElementById() method:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Chapter Summary::
Chapter Summary
The id attribute is used to specify a unique id for an HTML element
The value of the id attribute must be unique within the HTML document
The id attribute is used by CSS and JavaScript to style/select a specific element
The value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with the getElementById() method
It is used to display a webpage within another webpage
HTML Iframe syntax
HTML Iframe Syntax:
<iframe> tag specifies an inline frame. This inline frame is used to embed another document within the current html document
** Syntax example below
<iframe src="url" title="description">
NB: 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.
** Use height and width to specify the size ofthe iframe
Javascript inclusion in HTML makes it more interactive and dynamic.
** The below gives a button that shows date and time.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
HTML Script tag.
It defines client-side JavaScript...the the <script> element contains script statement or points to an external script through an src attribute. JS is used for image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript most often uses the document.getElementById() method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
** Use JavaScript to change the style of an HTML document
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
** Use Javascript to change the src attribute of an image.
document.getElementById("image").src = "picture.gif";
see full code below
<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
HTML <noscript> tag
Defines alternate content to be displayed to users that have disabled scripts in their browsers or have browsers with no support for scripts
This is the script
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
**The full script is:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
A file path describes the location of a file in a website's folder structure.
Examples of filepath
Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
Relative file paths: Points to a file relative to the current page.
File path pointing to a file in the images folder located at the root of the current web.
<img src="/images/picture.jpg" alt="Mountain">
File path pointing to a file in the images folder located in the current folder:
<img src="images/picture.jpg" alt="Mountain">
File paths pointing 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">
Advice:
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
<head> element contains the <title>, <style>, <meta>, <link>, <script>, <base> elements.
<head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
<title> element:
Defines document title, it must contain only text and it is shown in the browser title bar or in page's tag. Title element is required in html documents. The content ofthis page title helps for Search Engine Optimization of a webpage which is used by search engine algorithms to decide the order when listing pages in search results.
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
So, try to make the title as accurate and meaningful as possible
The HTML <style> element
This element is used to define style information for a single HTML page.
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element.
Defines relationship between current document and an external resource. Link tag is most used to link to external style sheets:
Typically used to specify the character set, page description, kyewords, author of 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.
<meta name="description" content="Free Web tutorials">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example of <meta> tags:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport
Viewport if user's visible area of a webpage. Varies with the device and is smaller on a mobile phone than PC screen.
You should include the following element in all your web pages:
Chapter Summary
The <head> element is a container for metadata (data about data)
The <head> element is placed between the <html> tag and the <body> tag
The <title> element is required and it defines the title of the document
The <style> element is used to define style information for a single document
The <link> tag is most often used to link to external style sheets
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
The <script> element is used to define client-side JavaScripts
The <base> element specifies the base URL and/or target for all relative URLs in a page
** HTML Head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<etails> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
Techniques for creating HTML layouts
CSS framework
CSS float property
CSS flexbox
CSS grid
CSS Frameworks: Enable you to fastly create your layout: W3.CSS and Boostrap are examples
CSS Float layout: Use CSS float property to do web layout. You just need to remember float and clear properties to use this. Its main disadvantage is the it is tied to the document flow which may harm flexibility.
CSS Flexbox layout::Ensures that elements behave predictably when multiple sizes of user screen must display site well.
CSS Gridlayout: Offers grid-based layout system which facilitate designing webpages without floats and positioning and using rows and columns to achieve this.
Responsive Images: Scale nicely to fit any browser size. To make image responsive set CSS width property to 100 % and image will become responsive according to the needs.
See code below for a responsive image.
<img src="img_girl.jpg" style="width:100%;">
To avoid image scaling up beyond original size, use max-width property instead of the width:100%. For exaMple:
The text size can be set with "vw" unit, which means the "viewport width" to enable text size to follow the size ofthe browser window
the code below enables responsive text size
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Media queries: Enables you to define completely different styles for different browser sizes.
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
W3.CSS
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.
W3.CSS is smaller and faster than similar CSS frameworks.
W3.CSS is designed to be a high quality alternative to Bootstrap.
W3.CSS is designed to be independent of jQuery or any other JavaScript library.
** Example of a full responsive web
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
** Bootstrap: another framework that uses HTML, CSS, and JQuery to make web pages:
These are the different html elements for defining use input and computer code.
Code element
<code>
x = 5;
y = 6;
z = x + y;
</code>
HTML <kbd> For Keyboard Input
<kbd> element defines keyboard input... and the content inside this tag is displayed inside the browser's default monospace font.
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
The code above shows:Save the document by pressing Ctrl + S
HTML <samp> For Program Output
Samp element can be used to define sample output from a computer program. The content is displayed inside browser's default monospace font.
To define some text as sample output from a computer program:
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
HTML <code> For Computer Code.
This element defines a piece of computer code. Content is displayed inside the browser's default monospace font.
<h2>The code Element</h2>
<p>Programming code example:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
To preserve the extra white spaces in a <code> element, use a <pre> element to enclose the <code> element.
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
HTML <var> For Variables
It is used to define variable in programming or in a mathematical expression. The content inside is typically displayed in italics.
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
The result is:
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
Chapter Summary
The <kbd> element defines keyboard input
The <samp> element defines sample output from a computer program
The <code> element defines a piece of computer code
The <var> element defines a variable in programming or in a mathematical expression
The <pre> element defines preformatted text
HTML <section> Element: A Thematic grouping of content typically with a heading. You can split a webpage into sections for introduction, content, and contact information.
<section>
<h1>WWF</h1>
<p>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.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>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.</p>
</section>
HTML <article> Element
The <article> element specifies independent self-contained content. Article should make sense and should be distributable independently from the rest of the site. Article element can be used in: Forum post, Blog post, Newspaper Article.
Example of the usage of article elements
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
Use of CSS to style Article elements:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Nesting <article> in <section> or Vice Versa.
The <article> element specifies independent self-contained content while
eleemnt defines a section in a document.
You will find HTML pages with <section> elements containing <article> element and <article> elements containing
<section>
HTML <header> Element
<header>element rep a containere for introductory content or a set of navigational links and typically contains one or more <h1> -<h6>, logo or icon, authorship information etc.
Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
Example of header:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>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.</p>
</article>
HTML <footer> Element
This element typically contains
authorship information
copyright information
contact information
sitemap
back to top links
related documents
One document can have several <footer> elements in one document
HTML <aside> Element
Defines some contents aside from the content it is placed in like sidebar. The
contentshould be indirectly related to the surrounding content.
<p>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!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
Using CSS to style the aside element.
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>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!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>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!</p>
<p>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!</p>
</body>
</html>
HTML <figure> and <figcaption> Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
Essence of Semantic Elements
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."
Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<!DOCTYPE html>
* Use lower case elements
<body>
<p>This is a paragraph.</p>
</body>
* Close all HTML elements
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Use lowercase attribute Name
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Avoid too long code lines. So scrolling right and left can be avoided.
Avoid blank lines, spaces, or indentations without a reason. Make code readable by adding blank lines to separate large of logical code blocks. Add two spaces of indentation for readability.
This is good
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
** And example of a good table:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
The content of a page title is important for SEO and is used to decide order when listing page results by search engines.
<title> elements: define a title in the browser toolbar, provide title for the page when it is added to favorites, display title for the page in search-engine result.
Make sure title is accurate is as meaningful as possible
<title>HTML Style Guide and Coding Conventions</title>
Always add <html> and <body> tags
Always add the html and body tags although the html will validate without them
Omitting <head>
The <head> tag can also be omitted. Browsers add all elements before <body> to a default element. However, it is recommended that you use it.
Close Empty HTML Elements
You have the option to close empty elements or leave it open.. in HTML.
<meta charset="utf-8">
However, for XML/XHTML, you have to close it
<meta charset="utf-8" />
Add the lang attribute
Always add the lang attribute inside your <html> tag, to declare the language of the Web page. This helps search engines and browsers.
for example:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Meta Data
Always specify both language and character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:
The 'width=device-width'sets the width of the page to follow the screen-width or the device which will very depending on the device.
The initial-scale=1.0 sets initial zoom level when the page is first loaded by browser.
Short comments should be written on one line:
<!-- This is a comment -->```
and for comments that occupy more than one line:
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
Using Style Sheets
Use simple syntax for linking to style sheets( not necessary to include the type attribute)
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules can be written over multiple lines:
Some advice on how to properly include the CSS style sheet
Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces of indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces
Loading JS in HTML
<script src="myscript.js">
Accessing HTML Elements with Js
The use of untidy html code will result into Js errors.
Consistently use lower case file names because some servers(like Apache, Unix) are case sensitive about file names while others (microsoft, IIS) are not. Annd when you make a switch while having a mix, your web will be brocken. Use lower case file names to avoid this problem. So that london.jpg and London.jpg issues do not arise.
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences between .htm and .html
There is no difference between them. Consistency is good, however.
Default filenames:
When url does not specify filenames (such as "https:www.abc.com/"), the server adds a default filename like "index.html" and "index.htm", "default.html","default.htm".
You can always configure servers with more than one default filename, and you can usually set up as many default filename as you want. However, if your server is only configured with "index.html" as the default filename, your file must be "index.html", not default .html.
HTML Entities
Replace reserved characters in HTML with character entities.
HTML entities
Greater than and less than are reserved html signs and browser might mix them up.
Character entity looks like this:
&entity_name;
OR
&#entity_number;
to display less than < sign, write < or <
NB: Use entity number preferably since it has more browser support.
Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for entity numbers is good.
Non-breaking Space
  is a space that will not break into a new line. Two words separated by a non-breaking space will stick together, not break into a new line. Use this when breaking words may not be disruptive.
examples
§ 10
10 km/h
10 PM
Tip: The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.
Combining Diacritical Marks (Useful when writing in yoruba for example and you need the ami signs on the alphabets)
A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.
Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.
* Mark Character Construct Result
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
A browser must know the character set to use to display it correctly.
** Excerpts from the HTML ENCODING CHAPTER
From ASCII to UTF-8
ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8.
ANSI (Windows-1252) was the original Windows character set. ANSI is identical to ISO-8859-1, except that ANSI has 32 extra characters.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
** HTML charset attribute
you specify it in the tag of the HTML page.
WEbbrowsers use URL to request pages from web servers. URL is used to address documents ( or other data) on the web.
scheme://prefix.domain:port/path/filename
Explanation:
scheme - defines the type of Internet service (most common is http or https)
prefix - defines a domain prefix (default for http is www)
domain - defines the Internet domain name (like w3schools.com)
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the site)
filename - defines the name of a document or resource
Common URL Schemes
Common URL Schemes
The table below lists some common schemes:
Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
URLs can only be sent over the internet using the ASCII character set. The URL has to be converted if it contains outside characters.
non-ASCII characters are replaced by % followed by hexadecimal units. and Spaces are normally replaced by + (plus) sign.
Your browser will encode character-set used in your page, default character-set in HTML5 is UTF-8.
XHTML is more strict and more XML-based version of HTML.
What is XHTML?
XHTML stands for EXtensible HyperText Markup Language
XHTML is a stricter, more XML-based version of HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
Differences between HTML and XHTML
in XHTML
<!DOCTYPE> is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
Elements must always be properly nested
Elements must always be closed
Elements must always be in lowercase
Attribute names must always be in lowercase
Attribute values must always be quoted
Attribute minimization is forbidden
XHTML - OCTYPE ....> is Mandatory
The <html>, <head>, <title>, and <body> elements must also be present. The xmlns attribute in must specify the xml namespace for the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here fslfksm
</body>
</html>
* XHTML Elements Must be Properly Nested
<b><i>Some text</i></b>
don't switch the tags.
XHTML Elements Must Always be Closed.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
XHTML Empty Elements Must Always be Closed.
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must be in Lowercase.
<body>
<p>This is a paragraph</p>
</body>
XHTML Attribure Names Must be in Lowercase.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
XHTML Attribute Values Must be Quoted
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Filling a form that contains user name and password and that redirects the form to a specific page after servers process the input.
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
form elements
</form>
The form element is like a container for all kinds of input elements like: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> element: is the most used form element and can be displayed on the 'type' attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields: <input type="text">
This defines a single-line input field for text input. The form itself is not visible and the number of characters is by default 20 characters.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the element to bind them together.
Radio Buttons
<input type="radio"> defines the radio button which lets use select ONLY one among a few choices.
Checkboxes: Enables users select zero or more among a limited no of choices
<input type="checkbox"> defines a checkbox
NB: the value attribute can indicate the default option
See example of form below:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The Submit Button
<input type="submit"> defines the button for submitting form data to a form-handler.
The HTML Form Attribute: A discussion of different attributes
The Action Attribute: defines action to be performed when form is submitted. Form data is usually sent to a file on server when submit button is clicked. If you omit action attribute, the action is set to the current page.
To send form data to a file called action_page.php containing a server-side script that handles the form data:
The Target Attribute
This specified where to display response received after submitting the form.
See below for the possible values of the target attribute
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window (default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
Example of the use of target attribute:
<p>When submitting this form, the result will be opened in a new browser tab:</p>
<form action="/action_page.php" target="_blank">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Method Attribute
This specifies the method attribute specifies HTTP method used when submitting form data.
The get method: <form action="/action_page.php" method="get">
The post method: <form action="/action_page.php" method="post">
Tip: Always use POST if the form data contains sensitive or personal information!
Notes on GET:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google
Notes on POST:
Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
Tip: Always use POST if the form data contains sensitive or personal information!
The Autocomplete Attribute
Specifies whether a form should have autocomplete on or off. Autocomplete when left on enables browser automatically complete values based on previously entered values in the same browser.
The Novalidate Attribute
This is a boolean attribute which specifies form-data (input) should not be validated when submitted.
<form action="/action_page.php" novalidate>
List of All Attributes
Attribute Description
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
<label> element defines a label for several form elements. Helps screen-readers read out the label when the user focus on the input.
It also helps users click on text next to small regions ( like checkboxes and buttons) to click those small areas.
The 'for' attribute of the<label> tag should equal to the 'id' attribute of the element to bind them together.
The option elements defines an option that can be selected. The first item is selected by default. Add the 'selected' attribute to an option to make it pre-selected.
<option value="fiat" selected>Fiat</option>
Visible Values: Use size attribute to specify the number of visible values (a small scroll bar is inserted if you have more than the visible value set)
Allow Multiple Selections: 'multiple' attribute allow user to select more than one value. To use this, you have to Hold down the Ctrl (windows) / Command (Mac) button to select multiple options
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
CSS can also be used to define the size of the text area.
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
The <datalist> Element
Specifies a list of pre-defined options for an <input> element (works like a kind of autocomplete which list options you can select from once you type a text) This should be usable with the normal form input element--experiment.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the element
The datalist tag is not supported in Safari prior version 12.1
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
<input type="password"> defines a password field.The characters in a password field are masked (shown as asterisks or circles)
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
If you omit the submit button's value attribute, the button will get a default text (typically 'Submit Query')
<input type="reset"> defines a reset button that will reset all form values to their default values.: YOu can also add value attribute to the reset button to customize what shows up on the button.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Input Type Button
<input type="button"> defines a button:
You can also add 'min' and 'max' attributes to add restrictions to dates
<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<input type="submit" value="Submit">
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.If the browser supports it, a time picker pops up when entering the input field.
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.If the browser supports it, a date picker pops up when entering the input field
The readonly Attribute
Specifies an input field to be read-only. This input field cannot be modified but user can tab into it, highlight, and copy text from it. The value is sent when submitting the form.
The disabled attribute
Specified that an input field is disabled, and such field is unusable and unclickable. Value will not be sent when submitting the form.
Specifies the visible width, in characters, of an input field. Default value is size 20. This attribute works with Text, search, tel, url, email, and password.
Specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.
Min and Max Attribute
Specifies the min and max values for an input field. Works with number, range, date, datetime-local,month, time, and week.
Tip: Use the max and min attributes together to create a range of legal values.
<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit" value="Submit">
</form>
The multiple Attribute
Specifies that the user is allowed to enter more than one value in an input field. multiple attribute works well with email and file types
Specifies regular expressions that the input field's value is checked against when form is submitted. Pattern attribute works with text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
The Placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
Specifies that in input must be filled out before submitting the form. It works with the following input types: text, search, url, tel, email, passwork, date pickers, number, checkbox, radio, and file.
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!
The Autofocus Attribute
The input autofocus attribute specifies the an input field automatically get focus when page loads.
The input height and width attributes specify the height and width of an <input type="image"> element.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.
In the case below, the autocomplete is on for the form but off for the email field. Fill in the form and reload to see the effect.
The form attribute: The input form attribute Specifies the form element element belongs to. It's value must be equal to the id attribute of the element it belongs to.
<p>The form attribute specifies the form an input element belongs to.</p>
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
The formaction Attribute
The input to formaction attribute specifies the URL of the file that will process the input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and image.
The forenctype Attribute
The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").
Note: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the following input types: submit and image.
The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
Note: This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the following input types: submit and image.
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
This method appends the form-data to the URL in name/value pairs
This method is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
This method sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be bookmarked
The "post" method is more robust and secure than "get", and "post" does not have size limitations
Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
NB: Canvas can draw line, circle, draw text, Stroke text, Draw linar gradient, draw circular gradient, draw image into an empty canvas line. Since Javascript is used to create the canvas, detailed study of canvas will be made under javascript training.
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.
Comparison of Canvas and SVG
The table below shows some important differences between Canvas and SVG:
Canvas | SVG
Resolution dependent |Resolution independent
No support for event handlers | Support for event handlers
Poor text rendering capabilities | Best suited for applications with large rendering areas (Google Maps)
You can save the resulting image as .png or .jpg | Slow rendering if complex (anything that uses the DOM a lot will be slow)
Well suited for graphic-intensive games | Not suited for game applications
Multimedia on the web is sound, music, videos, movies, and animations.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Videoformats
Format File Description
MPEG .mpg
.mpeg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers.
RealVideo .rm
.ram RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers.
Flash .swf
.flv Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.
MPEG-4
or MP4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.
Common Audio formats:Only MP3, WAV, and Ogg audio are supported by the HTML standard. MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI .mid
.midi MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.
RealAudio .rm
.ram RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all browsers.
returnBack to table of contents
HTML VIDEO
The <video> element is used to shows a video on a page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
"controls" attribute adds video controls like play, pause, and volume. It is good to include width and height attributes. Without setting these, the page may move irregularly or unsteadily as the video loads.
The <source> element allows specifying alternative video files that the browser may choose from. The browser by default chooses the first recognized format. The text between video tags will only be displayed if browser does not support the
HTML <video> Autoplay
Autoplay attribute starts video automatically.
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The autoplay attribute does not work in mobile devices like iPad and iPhone.
HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
HTML Video - Media Types
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML Video - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
See HTML video audio DOM reference for details of how to customize video in HTML
Summary
HTML Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in media players
The <audio> element is used to play an audio file.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
There are three supported audio format: MP3, WAV, OGG.
Opera, Firefox and Chrome support all audio formats. Edge/Internet explorer supports only MP3 while Safari supports only MP3 and WAV.
HTML Audio - Media Types
File Format Media Type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
HTML Audio - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.
For a full DOM reference, go to w3c HTML Audio/Video DOM Reference.
HTML Audio Tags
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as
HTML Plug ins
They extend the standard functionality of the browser. Plug-ins can serve the following purposes:
To run Java applets
To run Microsoft ActiveX controls
To display Flash movies
To display maps
To scan for viruses
To verify a bank id
Warning !
Most browsers no longer support Java Applets and Plug-ins.
ActiveX controls are no longer supported in any browsers.
The support for Shockwave Flash has also been turned off in modern browsers.
The <object> Element
<object> is supported by all browsers and it defines embeded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:
The <embed> Element
It is supported in all major browsers and defines an embedded object within an HTML document. It is part of HTML5 spec even though it does not show up in the previous versions that it supported.
<embed src="audi.jpeg">
Note that the <embed> element does not have a closing tag. It can not contain alternative text.
The <embed> element can also be used to include HTML in HTML:
One thing you should note is that to select which to use between and , make sure you consider which is most widely supported by various browsers and your data type embeded.
returnBack to table of contents
HTML YOUTUBE
HTML YouTube Videos
This is the easiest way to play videos in HTML because it removes the necessity of converting to different formats. YouTube can be allowed to play videos on your website to avoid the conversion problem.
YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.
You can use this id, and refer to your video in the HTML code.
Playing YouTube in HTML
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
HTML Geolocation API is used to locate a user position.
Locate the user's Position
The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user approves it.
Note: Geolocation is most accurate for devices with GPS, like smartphones.
Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.
The getCurrentPosition() method is used to return the user's position.
The example below returns the latitude and longitude of the user's position( a basic geolocation without error handling):
<p id="demo"></p>
<script>
var x = document.getElementById("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 +
"<br>Longitude: " + position.coords.longitude;
}
</script>
code above explained.
Example explained:
Check if Geolocation is supported
If supported, run the getCurrentPosition() method. If not, display a message to the user
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
The showPosition() function outputs the Latitude and Longitude
The example above is a very basic Geolocation script, with no error handling.
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
Displaying the Result in a Map
To display the result in a map, you need access to a map service, like Google Maps.
In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image):
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Location-specific Information
This page has demonstrated how to show a user's position on a map.
Geolocation is also very useful for location-specific information, like:
Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)
The getCurrentPosition() Method - Return Data
The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available:
Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)
Geolocation Object - Other interesting Methods
The Geolocation object also has other interesting methods:
watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.
The example below shows the watchPosition() method. You need an accurate GPS device to test this (like smartphone):
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
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 +
"<br>Longitude: " + position.coords.longitude;
}
</script>
HTML Drag and Drop API: Can be used to make an element draggable.
HTML WEB STORAGE
HTML Web Storage API: Enables users to store data locally within user's browser. The storage limit is greater than that of cookies.the storage is per origin ( per domain and protocol). Pages from one origin can store and access the same data.
HTML WEB WORKERS
HTML Web Workers API: It is a JS running in background without affecting the performance of the page. This prevents the page from becoming unresponsive until the script in the background finishes loading.
Since web workers are in external files, they do not have access to the following JavaScript objects:
The window object
The document object
The parent object
HTML SSE
HTML Server Sent Events (SSE) API
Server-Sent Events - One Way Messaging
It allows a webpage to get updates from a server. An SSE is when a webpage gets updates from a server automatically.
Examples of server sent events: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
Receive Server-Sent Event Notifications
The EventSource object is used to receive server-sent event notifications.
You need a server that is capable of sending data updates like PHP or ASP
Creating a heading (in the content section): # HTML Intromimo
To link to the HTML Introduction section (in the outline), put the text you want to see in the outline in the square bracket(i.e [HTML Intromimo])
and include the anchor in a normal bracket following the displayed text in outline (i.e. (#html-intromimo)). Note that the anchor link for the HTML introduction
in the outline is the lower case version of the outline component in the content with hyphen replacing spaces(i.e #html-intromimo)
B. Including HTML codes formated at a code and not text
enclose your code in the three back quotes html codes
C. Inserting "Back to top" Button
Insert the hyperlink in Homepage (in table of content) first section: HTML Lecture<a name="#homepage">
Insert the Back to top button in the section of the body of document: [Back to top](#homepage)
