HTML5

Hyper Text Markup Language

How to make web pages

Created by Alicia Sykes / @lissy_sykes
Presentation built with reveal.js by Hakim El Hattab

What is HTML?

HTML (Htyper Text Markup Language) is a markup language used to make websites, or define web components in a web application

HTML5 is the latest version of HTML and has many new features such as multimedia support and semantic layouts

3 keywords

HTML web pages are made up of a series of components, lets look at the structure of these components
  • Tag
  • Element
  • Attribute

Down arrow

Tags

A tag will have the name of the type of component surrounded in angle brackets

Example of a title tagHello World!

Elements

An element is made up of 2 tags, with content in the middele. The text in the closing tag is exactley the same as the text in the opening tag, but with a '/'

Example of a heading tag

I am a heading

Attributes

An attribute is used to add additionl information to a HTML element
Attributes follow this structure: Attribute name followed by equals followed by value in quotations

Example of an attribute

Hello World!

Text

There are several ways of writing text to a web page

The paragraph tag

Example of a p tag

I am a Paragraph

The span tag

Example of a span tagIm inline text

The heading tags

Example of a main heading tag

Main Title

Example of a sub heading tag

Sub heading

Example of ah3 tag

less importnt heading

... all the way to h6

Example of a h6 tag
Very un-important title!

Break line

Example of a br tagIm on line 1
and I'm on line 2

HTML Comments

Often you want to supllly a bit of extra information about a a part of your page, such as what the purpose of it is, where it's used etc.. This can make your HTMLpage more maintainable in the future and easier to understand for other developers.


Comments are ignored by the browser


The syntax for a comment

Hyperlinks

A hyperlink is an element that redirects the user to another page, website or resource when clicked

By default a HTML link is blue and underlined, and then purple when clicked, but this is easy to change

You can put any conent inside a hyperkink tag, not just text. This includes images, div's and formated text

How to use a hyperlink

Use the href attribute to define where the link will point to

Example of a hyperlinkClick Me!

Images

In HTML it is easy to add an image to your page

this is an picture of..

Attributes for the image tag

  • src - this is the source of the image it can be absolute or relative
  • alt - this is the alternative text that will be read by screen savers, shown by text only browsers, pr displayed if the image can't be loaded
  • height - the height of the image optional
  • width - the width of the image optional

HTML Forms

In this video we will look at

  • Inputing text
  • Inputing dates
  • Inputing passwords
  • Radio buttons
  • List groups
  • Textareas
  • Image uplads
  • Form controlls

Multimedia in HTML5

In this section we look at embeding sound, video and other multimedia into your webpages using hTML5

Audio

Before HTML5 there was no standard for playing audio on the web, they could only be played using a plugin

Example of audio element

The audio tags themself are straitforward.
The 'controls' keyword specifies that the user can see the controlls.
Then the browser will look through every source element within the audio tag until it see's one it can read and it'll play that.
If the browser doesn't support any of the formats it will display the message on the last line.

Browser Support

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Videos in HTML

Video's work in much the same was as audio in HTML5.
They create a standard for playing videos in modern web pages.

Example of Video tag

HTML Plugins

Helper applications or plugins can extend the standard functionality of the web browser.
They often use the embed or object tags.
For example a Java applet

HTML5 New Semantic Elements

In previous versions of HTML developers would have div's all over the place with different classes and id's to represent different parts of the web page, such as footer, header, nav...

To solve this problem HTML5 created elements specially for these commonly used ares.
This can help developers lay there websites out in a more semantic way too.

  • Defines an article in the document
  • Defines content aside from the page content
  • Defines a part of text that might be formatted in a different direction from other text
  • Defines content aside from the page content
  • Defines additional details that the user can view or hide
  • Defines a dialog box or window
  • Defines a caption for a figure element
  • Defines self-contained content, like illustrations
  • Defines a footer for the document or a section
  • Defines a header for the document or a section
  • Defines the main content of a document
  • Defines marked or highlighted text

THE END