HTML describes what to display, CSS describes how it is displayed. Every web page you create will include the DTD and the html, head, title, meta and body elements.
Below is a basic HTML5 web page template. Save this for future use.
Apart from the specific page title, the first seven lines will usually be the same on every web page that you create.
The head section
Elements that are located in the head section include the title of the web page, <meta> tags that describe the document (such as the character encoding used and information that search engines may access), and references to scripts and styles. Many of these features do not show directly on the web page.
The head element contains the head section, which begins with the <head> tag and ends with the </head> tag.
The first element in the head section, the title element, configures the text that will appear in the browser window's title bar. The text between the <title> and </title> tags is called the web page's title and is accessed when web pages are bookmarked and printed.
Popular search engines, such as Google, use the title text to help determine keyword relevance and even display the title text on the results page.
The meta element describes a web page characteristic, such as the character encoding.
Character encoding is the internal representation of letters, numbers, and symbols in a file such as a web page or other file stored on a computer and may be transmitted over the Internet. There are many different character-encoding sets.
However, it is customary practice to use a character-encoding set that is widely supported, such as utf-8, which is a form of Unicode. The meta tag is not used as a pair of opening and closing tags. It is a stand-alone, or self-contained, tag (referred to as a void element in HTML5). The meta tag uses the charset attribute to indicate the character encoding. An example meta tag is as follows:
<meta charset="utf-8">
The body section
The body section contains text and elements that display directly on the web page in the browser window, also referred to as the browser viewport.
The purpose of the body section is to configure the contents of the web page.The body element contains the body section, which begins with the <body> tag and ends with the </body> tag. You will spend most of your time writing code in the body of a web page. Text and elements typed between the opening and closing body tags will display on the web page in the browser viewport.
1. Create a folder
You will find it helpful to create folders to organise your files as you develop web pages and your own websites. Use your operating system to create a new folder.
To create a new folder:
Mac
- Launch Finder and select the location where you would like to create the new folder.
- Choose File > New Folder to create an untitled folder.
- To rename the folder, select the folder and click on the current name. Type a name for the folder, and press the Return key.
Windows
- Launch File Explorer (formerly called Windows Explorer): a. Display the Desktop. b. Right-click on the Start button and select File Explorer.
- Navigate to the location where you would like to create the new folder, such as Documents, your C: drive, or an external USB drive.
- Select the Home tab. Select New Folder.
- To rename the New Folder, right-click on it, select Rename from the context-sensitive menu, type in the new name, and press the Enter key.
2. Create the web page
In Notepad or another text editor, type in the following code:
Notice that the first line in the file contains the doctype.
The HTML code begins with an opening <html> tag and ends with a closing </html> tag. The purpose of these tags is to indicate that the content between them makes up a web page.
The head section is delimited by <head> and </head> tags and contains a pair of title tags with the words “My First HTML5 Web Page” in-between, along with a <meta> tag to indicate the character encoding.
The body section is delimited by <body> and </body> tags. The words “Hello World” are typed between the <body></body> tags.
You have just created the source code for a web page document.
3. Test your page
There are two ways to test your page:
-
Launch Windows Explorer (Windows 7 or earlier), File Explorer (Windows 8 or later), or Finder (Mac). Navigate to your index.html file. Double-click index.html. The default browser will launch and will display your index.html page. A display of the page using Chrome is shown below
- Launch a browser
Launch a browser. (If you are using Internet Explorer 9 or later, right-click in the area at the top of the browser window and select the Menu bar.)
Select File > Open > Browse. Navigate to your index.html file. Double-click index.html, and click OK. Examine your page. Look carefully at the browser window. Notice how the browser title bar or browser tab displays the title text, “My First HTML5 Web Page.” Some search engines use the text enclosed within the<title>and</title>tags to help determine the relevancy of keyword searches, so make certain that your pages contain descriptive titles. The title element is also used when viewers bookmark your page or add it to their Favorites. An engaging and descriptive page title may entice a visitor to revisit your page. If your web page is for a company or an organisation, it’s a best practice to include the company or organisation's name in the title.1
HTML5 audio and video elements enable browsers to natively play media files without browser plug-ins. When working with native HTML5 audio and video, you need to be aware of the container ed by the file extension) and the codec.
Audio element attributes
| Attribute | Value | Usage |
|---|---|---|
src |
File name | Optional; audio file name |
type |
MIME type | Optional; the MIME type of the audio file, such as audio/mpeg or audio/ogg |
autoplay |
autoplay | Optional; indicates whether audio should start playing automatically; use with caution |
controls |
controls | Optional; indicates whether controls should be displayed; recommended |
loop |
loop | Optional; indicates whether audio should be played out over and over |
preload |
none, metadata, auto | Optional; values: none (no preload), metadata (only download media file metadata), and auto (download the media file) |
title |
Text description | Optional; specifies a brief text description that may be displayed by browsers or assistive technologies. |
Source element
The source element is a self-contained, or void, tag that specifies a media file and a MIME type. The src attribute identifies the file name of the media file. The type attribute indicates the MIME type of the file.
Code type="audio/mpeg" for an MP3 file. Code type="audio/ogg" for audio files using the Vorbis codec. Configure a source element for each version of the audio file. Place the source element before the closing audio tag.1
HTML5 Audio on a web page
The following code sample configures the web page shown in the above audio element attribute table, to display a controller for an audio file:
<audio controls="controls"> <source src="soundloop.mp3" type="audio/mpeg"> <source src="soundloop.ogg" type="audio/ogg"> <a href="soundloop.mp3">Download the Audio File</a> (MP3) </audio>
Current versions of Safari, Chrome, Firefox, Microsoft Edge, and Opera support the HTML5 audio element. While Internet Explorer (version 9 and later) supports the audio element, earlier versions of Internet Explorer offer no support. The controls displayed by each browser are different.
Review the previous code and note the hyperlink placed between the second source element and the closing audio tag. Any HTML elements or text placed in this area is rendered by browsers that do not support the HTML5 audio element. This is referred to as fallback con-tent; if the audio element is not supported, the MP3 version of the file is made available for download. Figure 11.5 shows a screenshot of Internet Explorer 8 displaying the web page.
The new HTML5 video element supports native play of video files in the browser without the need for plug-ins or players. The video element begins with the <video> tag and ends with the </video>
Video element attributes
| Attribute | Value | Usage |
|---|---|---|
src |
Filename | Optional; video file name |
type |
MIME type | Optional; the MIME type of the video file, such as video/mp4 or video/ogg |
autoplay |
autoplay | Optional; indicates whether video should start playing automatically; use with caution |
controls |
controls | Optional; indicates whether controls should be displayed; recommended |
height |
number | Optional; video height in pixels |
loop |
loop | Optional; indicates whether video should be played over and over |
poster |
Filename | Optional; specifies an image to display if the browser cannot play the video |
preload |
none, metadata, auto | Optional; values: none (no preload), metadata (only download media file metadata), and auto (download the media file) |
title |
Text description | Optional; specifies a brief text description that may be displayed by browsers or assistive technologies |
width |
Number | Optional; video width in pixels1 |
Provide a Hyperlink
The easiest way to give your website visitors access to an audio or a video file is to create a simple hyperlink to the file. For example, the code to hyperlink to a sound file named WDFpodcast.mp3 is
<a href="WDFpodcast.mp3">Podcast Episode 1</a> (MP3)
When your website visitor clicks on the hyperlink, the plug-in for MP3 files that is installed on the computer (such as QuickTime) typically will display embedded in a new browser window or tab. Your web page visitor can then use the plug-in to play the sound. If your website visitor right-clicks on the hyperlink, the media file can be downloaded and saved.
HTML5 Canvas
HTML5 Canvas allows you to draw graphics, charts, images and animation via JavaScript and the HTML element.
You can add Canvas elements to a web page using the <canvas> tag.
Adobe.com provides more information and step by step instructions on how to do this.
Watch the video below to explore the interactive capabilities of HTML5 Canvas.
Canvas API is not always simple to use. Below are a list of libraries recommended by Mozilla to help with the creation of canvas-based projects.
- EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
- Fabric.js is an open-source canvas library with SVG parsing capabilities.
- heatmap.js is an open-source library for creating canvas-based data heat maps.
- JavaScript InfoVis Toolkit creates interactive data visualizations.
- Konva.js is a 2D canvas library for desktop and mobile applications.
- p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
- Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
- Phaser is a fast, free and fun open-source framework for Canvas and WebGL powered browser games.
- Pts.js is a library for creative coding and visualization in canvas and SVG.
- Rekapi is an animation key-framing API for Canvas.
- Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
- The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — including accessibility and hundreds of colourful tutorials.
Creating interactive web pages takes practice and a little inspiration. Watch and follow the tutorial below to create an interactive bubble website.
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.
Keeping the files in an external CSS is the most common way to add CSS.
Inline CSS
An inline CSS applies a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The example below sets the text color of the <h1> element to blue and the text color of the <p> element to red:
Internal CSS
An internal CSS defines a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The example below sets the text color of all the <h1> elements (on that page) to blue, and the text color of all the <p> elements to red. In addition, the page is displayed with a powderblue background-color.
External CSS
An external style sheet is used to define the style for various HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page, as demonstrated below.
<!DOCTYPE html> <html lang="en"> <head> <link href="styles.css" rel="stylesheet"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph</p> </body> </html>
The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.
Tip: With an external style sheet, you can change the look of an entire website by changing one file.
Below is what the “styles.css” file looks like.
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
<script> |
Defines a client-side script. |
<noscript> |
Defines alternate content for users that do not support client-side scripts. |
The HTML <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains script statements, or it points to an external script file through the src attribute.
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>
Change content
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Change styles
document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";
Change attributes
document.getElementById("demo").src = "picture.gif";
The HTML <noscript> Tag
The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that does not support scripts:
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript> Sorry, your browser doesn't support JavaScript! </noscript>
Front-end template applications are an open-source library that allows you to copy code for web apps and sites.
When using an open-source library there are ways to check the quality of the code:
- View the number of users that have used the code. Great codes will attract a lot of users. Codes that have problems such as bugs will have fewer users.
- Check when the software was last updated.
Due to bugs and other issues with code, you want an open-source code where the developer monitors and performs updates.
A recommended HTML5 open-source is:
Chrome Developer Tools – Getting started
Follow the steps below to hack the following game: supermarkupworld.com/
General
- Change the dockside.
Settings
- Disable JavaScript and see if you can find a web page that does not work as expected without JavaScript.
- Set the device you would like the browser to be able to emulate.
Elements
- Toggle the device toolbar and check the display of a website across devices.
- Inspect elements on the page. Click on the inspect button or right click on an element on the webpage, and then inspect an element on the webpage/Elements panel.
- Remove an element from the page.
- Add an element. Right click on elements and choose Edit as HTML. Select a block and edit the HTML.
- Double-click DOM elements to add inline styles, change attribute values, etc.
- Select an element and then open the Styles panel. In the Styles panel:
- Change/remove some style declarations.
- Add a new style declaration.
- Click on the link for a particular style declaration to inspect the style sheet it came from.
- Inspect and change the Box Model for an element using the Computed Pane (at the bottom of the Styles panel).
- Create a new style rule for an element. Select an element and click the "+" button.
- Force an element's state. Choose an element that you think will have different styling for different states (e.g. hyperlinks). Click on ":hov" and inspect the styling of a particular state.
Console
- Go to the Console and type: window.alert("Hello World"); and ENTER.
- Find a website that has errors in the console.
- From https://gist.github.com/addyosmani/fd3999ea7fce242756b1 Enter: [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}). What does this script do? Can you figure out how to remove the coloured outlines (without refreshing the page)?
Network
- Go to a website you've never visited and pay special attention to the page load. Reload the page and see if the rendering of the page is speeding up. Now disable the cache in developer tools (Settings > Disable cache) and see if the page loads slower.
- Now repeat the process with the Network panel open. Compare the results of what you see in the network activities with caching and no caching.
- Which resources took the longest time to load (duration)? Which resource had the slowest time to first byte? Who initiated a particular network request? How much time was spent in the various network phases for a particular resource?
- Find a website that gets resources through AJAX calls (e.g. GMail). In the Network panel, click the "Record" button, instigate the AJAX call (i.e. click on "Drafts") and then click the "Record" button again to stop recording. You will see the waterfall of the network activities that were associated with the AJAX call.
Application
Go to the Application panel. Have a look through the site's file structure (fonts, styles, scripts, images, etc).
Sources
Go to the Sources panel. Find a .js file in the file system and double-click it. This is where debugging is performed. What third-party sources are being loaded?
