***** On Wednesday, 8/29/18, I started learning the fundamentals of HTML on sololearn.com. *****

***** On Monday, 10/29/18, I completed the HTML Fundamentals course and was issued the certificate. *****

Modules 3 and 4: HTML5

I. Introduction to HTML5
When writing HTML5 documents, one of the first new features is the doc type declaration:

i.e.

<!DOCTYPE HTML>

The character encoding (charset) declaration is also simplified:

i.e.

<meta charset="UTF-8">

New Elements in HTML5
<article>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <footer>. <header>, <nav>, <output>, <progress>, <section>, <video>, and even more!

Take note that the default character encoding in HTML5 is UTF-8

Forms → (New in HTML5)

The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
Date pickers, color pickers, and numeric stepper controls have been added.
Input field types now include email, search, and URL.
PUT and DELETE form methods are now supported.

Integrated API (Application Programming Interfaces) → [New in HTML5]

Drag and Drop
Audio and Video
Offline Web Applications
History
Local Storage
Geolocation
Web Messaging

II. Content Models
In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.

Metadata
Embedded
Interactive
Heading
Phrasing
Flow
Sectioning

Take note that HTML5 content models are designed to make the markup structure more meaningful for both the browser and the web designer.

Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.
Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

Embedded: Content that imports other resources into the document.
Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>

Interactive: Content specifically intended for user interaction.
Elements: <a>, <audio>, <video>, <button>, <math>, <embed>, <iframe> <img>, <input>, <label>, <object>, <select>, <textarea>,

Heading: Defines a section header.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and more.

Take note that the same element can belong to more than one content model.

Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.

Sectioning content: Defines the scope of headings, content, navigation, and footers. Elements: <article>, <aside>, <nav>, <section>

Take note that the various content models overlap in certain areas, depending on how they are being used.

III. HTML5 Page Structure
A generic HTML5 page structure looks like this:

IV. Header, nav & footer
In HTML4, a header is defined like this:

i.e.

In HTML5, a simple <header> tag is used, instead.

The <header> element is appropriate for use inside the body tag.

i.e.

<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1> Most important heading </h1>
<h3> Less important heading </h3>
</header>
</body>
<html>

Result:

Most important heading

Less important heading

Take note that the <header> is completely different from the <head> tag.

The footer element is also widely used. Generally, the section located at the very bottom of the web page is referred to as the footer.

i.e.

<footer>...</footer>

Take note that the following information is usually provided between these tags:

Contact Informaion
Privacy Policy
Social Media Icons
Terms of Service
Copyright Information
Sitemap and Related Documents

The <nav> tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.

Here is an example of a major block of navigation links:

<nav>
<ul>
<li><a href="#">Home</a><li>
<li><a href="#">Services</a><li>
<li><a href="#">About us</a><li>
</ul>
</nav>

Take note that not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.

V. Article, section & aside

Article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper, a blog entry, a comment, an interactive widget or gadget, or other independent piece of content.

The <article> element replaces the <div> element that was widely used in HTML4, along with an id or class.

i.e.

<article>
<h1>The article titie</h1>
<p>Contents of the article element</p>
</article>

Take note that when an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.

<section> is a logical container of the page or article.
Sections can be used to divide up content within an article.
For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.

Each <section> should be identified, typically by including a heading (h1 - h6 element) as a child of the <section> element.

i.e.

<article>
<h1>Welcome</h1>
<section>
<h1>Heading</h1>
<p>content or image</p>
</section>
</article>

If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.

<aside> is secondary or tangential content which should be considered separate from but indirectly related to the main content.
This type of content is often represented in sidebars.
When an <aside> tag is used within an <article> tag, the content of the <aside> should be specifically related to that article.

<article>
<h1>Gifts for everyone</h1>
<p> This website will be the best place for choosing gifts </p>
<aside>
<p> Gifts will be delivered to you within 24 hours </p>
</aside>
</article>

When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.

VI. The audio Element

Before HTML5, there was no standard for playing audio files on a web page.
The HTML <audio> element specifies a standard for embedding audio in a web page.

There are two different ways to specify the audio source file's URL. The first uses the source attribute:

i.e. Method one

<audio src="audio.mp3" controls>
Audio element not supported by your browser
</audio>

The second way uses the <source> element inside the <audio> element:

i.e. Method two

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>

Take note that multiple <source> elements can be linked to different audio files. The browser will use the first recognized format.

The <audio> element creates an audio player inside the browser.

i.e.

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Audio element not supported by your browser.
</audio>

Result:

A working example:

Take note that the text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

controls
Specifies that audio controls should be displayed (such as a play/pause button, etc.)

autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without asking for the visitor's permission.

i.e.

→ ←

loop
This attribute is used to have the audio replay every time it is finished.

Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.

VII. The video Element

The video element is similar to the audio element.
You can specify the video source URL using an attribute in a video element, or using source elements inside the video element:

i.e.

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Video is not supported by your browser
</video>

Another aspect that the audio and video elements have in common is that the major browsers do not all support the same file types. If the browser does not support the first video type, it will try the next one.

Another aspect shared by both the audio and the video elements is that each has controls, autoplay and loop attributes.

In this example, the video will replay after it finishes playing:

i.e.

<video controls autoplay loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Video is not supported by your browser
</video>

Take note that currently, there are three supported video formats for the <video> element: MP4, WebM, and OGG.

VIII. The progress Element

The <progress> element provides the ability to create progress bars on the web.
The progress element can be used within headings, paragraphs, or anywhere else in the body.

Progress Element Attributes
Value: Specifies how much of the task has been completed.
Max: Specifies how much work the task requires in total.

Example:

Status: <progress min="0" max="100" value="35">
</progress>

Result:

Status:

Use the <progress> tag in conjunction with JavaScript to dynamically display a task's progress.

IX. Web Storage API

With HTML5 web storage, websites can store data on a user's local computer.
Before HTML5, we had to use JavaScript cookies to achieve this functionality.

The Advantages of Web Storage

More secure
Faster
Stores a larger amount of data
Stored data is not sent with every server request

Take note that local storage is per domain. All pages from one domain can store and access the same data.

There are two types of web storage objects:

sessionStorage()

localStorage()

Local vs. Session

Session Storage is destroyed once the user closes the browser
Local Storage stores data with no expiration date

You need to be familiar with basic JavaScript in order to understand and use the API.

The syntax for web storage for both local and session storage is very simple and similar.
The data is stored as key/value pairs.

Storing a Value:

localStorage.setItem("key1","value1");

Getting a Value:

//this will print the value
alert(localStorage.getItem("key1"));

Removing a Value:

localStorage.removeItem("key1");

Removing all Values:

localStorage.clear();

Take note that the same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used.

X. Geolocation API

In HTML5, the Geolocation API is used to obtain the user's geographical location.

Since this can compromise user privacy, the option is not available unless the user approves it.

Take note that Geolocation is much more accurate for devices with GPS, like smartphones and the like.

The Geolocation API's main method is getCurrentPosition, which retrieves the current geographic location of the user's device.

i.e.

navigator.geolocation.getCurrentPosition();

Parameters:
showLocation (mandatory): Defines the callback method that retrieves location information.
ErrorHandler (optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
Optional (optional): Defines a set of options for retrieving the location information.

Take note that you need to be familiar with basic JavaScript in order to understand and use the API.

User location can be presented in two ways: Geodetic and Civic.

The geodetic way to describe position refers directly to latitude and longitude.
The civic representation of location data is presented in a format that is more easily read and understood by the average person.

Each parameter has both geodetic and a civic representation:

Take note that the getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.

XI. Drag&Drop API

The drag and drop feature lets you "grab" an object and drag it to a different location.
To make an element draggable, just set the draggable attrbute to true:

i.e.

Take note that any HTML element can be draggable.

The API for HTML5 drag and drop is event-based.

Example:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

</body>
</html>

What to Drag
When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:

i.e.

function drag(ev) {
ev.dataTransfer.setData&lpar"text", ev.target.id);
}

In our example, the data type is "text" and the value is the ID of the draggable element ("image).

Where to Drop
The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event.

Do the Drop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event);

i.e.

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
The dragged data is the ID of the dragged element ("image").

At the end, dragged element is appended into the drop element, using the appendChild() function.

Take note that basic knowledge of JavaScript is required to understand and use the API.

XII. SVG

SVG stands for Scalable Vector Graphics, and is used to draw shapes with HTML-style markup.

It offers several methods for drawing paths, boxes, circles, text, and graphic images.

Take note that SVG is not pixel-based, so it can be magnified infinitely with no loss of quality.

An SVG image can be added to HTML code with just a basic image tag that includes a source attribute pointing to the image:

Take note that SVG defines vector-based graphics in XML format.

To draw shapes with SVG, you first need to create an SVG element tag with two attributes: width and height.

<svg width="1000" height="1000"> </svg>

To create a circle, add a <circle> tag:

Result:

cx pushes the center of the circle further to the right of the screen
cy pushes the center of the circle further down from the top of the screen
r defines the radius
fill determines the color of our circle
stroke adds an outline to the circle

Take note that every element and every attribute in SVG files can be animated.

<rect> defines a rectangle:

Result:

<line> defines a line segment:

Result:

(x1, y1) define the start coordinates
(x2, y2) define the end coordinates

<polyline> defines shapes built from multiple line definitions:

Result:

Points are the polyline's coordinates.
The code above will draw a black check sign.

Take note that the width and height attributes of the <rect> element define the height and the width of the rectangle.

Ellipse
The <ellipse> is similar to the <circle>, with one exception:
You can independently change the horizontal and vertical axes of its radius, using the rx and ry attrbutes.

Result:

Polygon
The <polygon> element is used to create a graphic with at least three sides. The polygon element is unique because it automatically closes off the shape for you.

Result:

Take note that Polygon comes from the Greek word. "Poly" means "many" and "gon" means "angle."

XIII. SVG Animations & Paths

SVG animations can be created using the <animate> element.

The example below creates a rectangle that will change its position in 3 seconds and will then repeat the animation twice:

Result:

attributeName: Specifies which attribute will be affected by the animation
from: Specifies the starting value of the attribute
to: Specifies the ending value of the attribute
dur: Specifies how long the animation runs (duration)
fill: Specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the "to value")
repeatCount: Specifies the repeat count of the animation

In the example above, the rectangle changes its x attribute from 0 to 300 in 3 seconds.

To repeat the animation indefinitely, use the value "indefinite" for the repeatCount attribute.

The <path> element is used to define a path.

The following commands are available for path data:
M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath

Define a path using the d attribute:

Result:

M places our "virtual pen" down at the position 0, 0. It then moves 200px down and to the right, then moves up to the position 200, 0. The Z command closes the shape, which results in a hypotenuse.

Take note that all of the above commands can also be expressed with lowercase letters. When capital letters are used, it indicates absolute position; lowercase indicates relative position.

XIV. Canvas

The HTML canvas is used to draw graphics that include everything from simple lines to complex graphic objects.

The <canvas> element is defined by:

<canvas id="canvas1" width="200" height="100">
</canvas>

Take note that the <canvas> element is only a container for graphics. You must use a script to actually draw the graphics (usually JavaScript).

The <canvas> element must have an id attribute so it can be referred to by JavaScript:

<html>
<head></head>
<body>
<canvas id="canvas1"
width="400" height="300"></canvas>

</body>
</html>

getContext() returns a drawing context on the canvas.

Take note that basic knowledge of JavaScript is required to understand and use the Canvas.

The HTML canvas is a two-dimensional grid.
The upper-left corner of the canvas has the coordinates (0,0).

X coordinate increases to the right.
Y coordinate increases toward the bottom of the canvas.

Take note that the <canvas> element is only a container for graphics.

The fillRect(x, y, w, h) method draws a "filled" rectangle, in which "w" indicates width and "h" indicates height. The default fill color is black.

A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20):

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,100,100);

Result:

The fillStyle property is used to set a color, gradient, or pattern to fill the drawing.
Using this property allows you to draw a green-filled rectangle.

var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(20,20,100,100);

Result:

The canvas supports various other methods for drawing:

Draw a Line
moveTo(x,y): Defines the starting point of the line.
lineTo(x,y): Defines the ending point of the line.

Draw a Circle
beginPath(): Starts the drawing.
arc(x,y,r,start,stop): Sets the parameters of the circle.
stroke(): Ends the drawing.

Gradients
createLinearGradient(x,y,x1,y1): Creates a linear gradient.
createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.

Drawing Text on the Canvas
Font: Defines the font properties for the text.
fillText(text,x,y): Draws "filled" text on the canvas.
strokeText(text,x,y): Draws text on the canvas (no fill)

Take note that there are many other methods aimed at helping to draw shapes and images on the canvas.

XV. SVG vs. Canvas

Canvas

Elements are drawn programmatically
Drawing is done with pixels
Animations are not built in
High performance for pixels-based drawing operations
Resolution dependent
No support for event handlers
You can save the resulting image as .png or .jpg
Well suited for graphics-intensive games

SVG

Elements are part of the page's DOM (Document object model)
Drawing is done with vectors
Effects, such as animations are built in
Based on standard XML syntax, which provides better accessibility
Resolution independent
Support for event handlers
Not suited for game application
Best suited for applications with large rendering areas (for example, Google Maps)

Take note that you can actually use both SVG and canvas on the same page, if needed.
However, you cannot just draw SVG onto a canvas, or vice-versa.

XVI. Canvas Transformations

The Canvas element can be transformed. As an example, a text is written on the canvas at the coordinates (10, 30).

ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);

Result:

The translate(x,y) method is used to move the Canvas.
"x" indicates how far to move the grid horizontally, and "y" indicates how far to move the grid vertically.

ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);

Result:

In this example, the canvas is moved 100px to the right, and 150px down

Take note that Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

The rotate() method is used to rotate the HTML5 Canvas. The value must be in radians, not degrees.

Here is an example that draws the same rectangle before and after the rotation is set:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 100, 100);

ctx.rotate( (Math.PI / 180) * 25) //rotate 25 degrees.

ctx.fillStyle = "#0000FF";
ctx.fillRect(10, 10, 100, 100);

Result:

Take note that the rotation will only affect drawings made after the rotation is done.

The scale() method scales the current drawing. It takes two parameters:

The number of times by which the image should be scaled in the X-direction.
The number of times by which the image should be scaled in the Y-direction.

var canvas = document.getElementById('canvas6');
ctx = canvas.getContext('2d');
ctx.font = "bold 22px Tahoma";
ctx.textAlign = "start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 0, 0);
ctx.rotate(1);
ctx.fillText("after rotate", 0, 0);
ctx.scale(1.5, 4);
ctx.fillText("after scale", 0, 20);

Result:

Take note that if you scale a drawing, all future drawings will also be scaled.

XVII. HTML5 Forms, Part 1

HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users.

Form creation is done in HTML5 the same way as it was in HTML4:

Result:

Use the nonvalidate attribute to avoid form validation on submissions.

HTML5 has introduced a new attribute called placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.

<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" placeholder="email@example.com" />
</form>

Result:

The autofocus attribute makes the desired input focus when the form loads:

<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" autofocus/>
</form>

Result:

Take note that the required attribute tells the browser that the input is required.

The "required" attribute is used to make the input elements required.

<form autocomplete="off">
<label for="e-mail">Your e-mail address: </label>
<input name="Email" type="text" required/>
<input type="submit" value="Submit"/>
</form>

Result:

The form will not be submitted without filling in the required fields.

Take note that the autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off.
When autocomplete is on, the browser automatically completes values based on values that the user has entered before.

HTML5 added several new input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

New input attributes in HTML5:

autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

Take note that input types that are not supported by old web browsers, will behave as input type text.

XVIII. HTML5 Forms, Part 2

The new search input type can be used to create a search box:

Result:

Take note that you must remember to set a name for your input; otherwise, nothing will be submitted.

The <datalist> tag can be used to define a list of pre-defined options for the search field:

Result:

<option> defines the options in a drop-down list for the user to select.

Take note that the ID of the datalist element must match with the list attribute of the input box.

Some other new input types include email, url, and tel:

Result:

These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field's type:

Take note that these new types make it easier to structure and validate HTML forms.

Go to top
« Previous 1 2 Next »