Fun with HTML516 Jun 2014
HTML 5 offers an easy way to begin creating interesting web pages. All it takes is:
- A computer.
- A web browser, e.g., Chrome, Firefox, Safari, or Internet Explorer.
- A simple text editor, e.g., Notepad++.
HTML 5 pages start with a doctype declaration (so the browser knows how to interpret it) and includes two main sections:
- Head. The head usually includes the page title and supporting information.
- Body. The body usually includes the interesting content to display in the page.
Simple HTML 5 Page
To make a very simple page, just type or copy the text below into a file and save it as index.html.
<!DOCTYPE html> <html> <head> <title>My Page Title</title> </head> <body> <h3>This is a third-level heading.</h3> Try adding more headings or see what happens with h1 or h2 instead. </body> </html>
- gist https://gist.github.com/denisecase/f487610439a72a03cda9
Open your browser. Instead of a website, enter the path to your new index.html, for example:
When you hit enter, the page should appear in your browser. The title appears up on the tab and the content (from the body) shows in the page.
Less Simple HTML 5 Page
There’s a more interesting single page here: d3slider.html.
- Can you find the head section?
- Can you see where the page finds the D3.js code it needs?
- The page uses a custom icon. Can you see where the page gets the name of the icon file?
- Opening tags are usually paired with a closing tag that is the exact same except the closing tag has one extra character. What is it?
- Can you find the body section?
- Can you see where the YouTube video gets included?
- What tags surround the code?
YouTube makes it easy to embed a video in your web page. Just go to the video you want and select “Share”, then “Embed”, then copy and paste the text into your document and surround it with div tags. Don’t forget to use a slash in the closing tag! :)
A list of all HTML 5 tags is available at: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list.
If you find an interesting page, you can often right-click on the page and select “View page source” to see the code behind it.
More information on HTML 5 is available at HTML5 Rocks.