Introduction to the Web Design Course

Hello, and a very warm welcome to the Home and Learn computer course for Web Design. The software you need is set out below. We assume that you have absolutely no knowledge of designing web pages. Throughout the course of this book you will learn the fundamentals of Web Design. And, of course, you will start creating your own pages. By the end of the book, you will have acquired a good understanding of what web design is all about, and have the ability to take it further, if you so wish.

What you will learn

The aim of this course is to get you started designing web pages. It is assumed that you have little or no experience of the subject. During our time together, you'll learn some new concepts and ideas, most of which will not be difficult. After all, there are billions of pages on the internet, designed by the whole spectrum of humanity: children, adults, pensioners, people from all walks of life have sites out there. And if they can do it, so can you. In fact, follow the lessons carefully and you WILL do it. Before long, you'll have your own pages designed and ready to be uploaded, there for all the world to see.
The technologies you will learn are HTML, HTML5, and Cascading Style Sheets. (HTML5 is the newest version of the of the language.)
At the heart of every web page is something called HTML. You will learn what this is, and how to code it. You will also learn the newest version of HTML, which is called HTML5. Both versions are included in this course. As well as HTML, you will learn about Cascading Style Sheets, and will be able to improve the look of your web pages by adding CSS to enhance them.
At the end of most chapters in this book you will see a summary table of what you have learnt. The summary tables are also included in a separate document, called quick_reference.pdf. This is one of the files that come with this book. All the files you should have are detailed below.

What you need to do the course

The only thing you really need to do the course is a simple text editor. We explain all about this in the first chapter, Anatomy of a Web Page, in the section Software for Writing Web Pages. But the operating system you have is not important. So you can do this course on a PC or an Apple Mac.

Web Design Course Files

There are a number of files that you will need in order to complete certain sections. Whenever you need a file for a section of your course, it will be explained in the relevant section. The download location is here, under the heading Web Design - New Course (you don't need the downloads for the old course.):

Download the Extra Files needed for this course

Once you have all the necessary files, you can begin. The first part is all about the software you need for this course. Don't worry - you'll already have all you need, so there's nothing to buy. Click the link below for the first section.
Good luck!

Read More

Course File Downloads

VB .NET Course Files The VB .NET course refers to some extra files you need to do the projects in the book. The Zip file below contains all the files mentioned in the book. Click the link to download the Zip file to your own computer. Download the VB .NET Project Files Employees Database Microsoft Word Course Files The extra files you need for the Microsoft Word course can be downloaded by clicking the link below. Download the Microsoft Word Course Files   Web Design - New Course The extra files need for out HTML, HTML 5 and CSS course can be download here; Download the files needed for the web design course The files are all zipped. When unzipped, you should have all the folders, files and images explained here: Web Design Downloads - old course The download below contains the HTML Editor, and all the files mentioned in the course. The size of the download is 2.9 megabytes. Download the Web Design Software and Course Files Beginners PHP Downloads All the PHP files, scripts and databases can be downloaded by clicking the link below: Download the PHP Course Files Visual C# .NET There's not many files to download for this course. But here they are Download the C# .NET Course Files

Read More

Software for Writing Web Pages

To start writing web pages, we'll use a simple text editor. That way, you'll be able to focus on the code, without getting distracted by the menus and buttons of a complex piece of Web Design software.

If you use Windows, then Notepad is an excellent text editor to use. To launch it, click on your Start menu in the bottom left of your screen. Click on All Programs, then Accessories. From the Accessories folder, select Notepad:

The software should look like this, when it launches:

Another good piece of software is the free Notepad++. You can get a copy here:

Notepad Plus

Mac and Linux users have a number of text editors available, but finding a free one that is as good as Notepad++ is quite difficult. Bluefish is OK, but looks a bit dated, especially for HTML. You can check it out here:

Bluefish

The free Smultron is worth downloading, if you have a Mac. You can grab a copy here:

Smultron

For a basic text editor like Notepad, Macs come with TextEdit, which you can find in your Applications folder. You might want to play around with the Preferences, though, or you'll end up with Rich Text rather than Plain Text.
Another good free editor for the Mac is TextWrangler. You can get a copy here:

Text Wrangler

In the next lesson, we'll take a look at just what is HTML and HTML 5.

Read More

What is a web page?

In this section, you're going to learn just what a web page is and how it can be read by a browser like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a start.
Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved it with the name 'MyLetter', the software would add four letters to the file name (three in older versions). Because it was typed using Word, the four letters that get added to your filename are.docx. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four letter extension to your file name. It will add .xlsx. So you file name will be 'Accounts.xlsx' and not just 'Accounts'. So you get a different four letter extension depending on the software you used.
These extensions are very important to computers. They are used to identify the type of file it is. With a file extension, Word can recognise its own documents. It sees the letters docx and says 'Ah yes, that's one of mine. I can open it.' If it sees a different extension, xlsx for example, it says 'What the heck is that?' You may then get an error message telling you that the file type is not recognised.
Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and a four letter extension. Web pages come with the extension .htm or .html. A browser can recognise either extension.
When you open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel make. If it sees the .htmor .html extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.)
Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from .txt to .htm. The text file though will have special symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you typed and hiding the Tags from your viewers.
Most web pages on the internet are written in code called HTML. HTML stands for HyperText Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming language: it is a language designed to improve the presentation of text. For example, in Microsoft Word, if you want a nice big heading, you can select a font size from a menu. HTML has an easy way to change the size of text of headings, too, which you'll see in a moment. But that's basically all you are doing with HTML ' presenting text and images on a page. The way you do this is with things called TAGS.

What is HTML 5?

HTML comes in different versions. When people talk about HTML 5 they are talking about the updates to the mark up language. These updates were agreed (mostly) by a whole host of different parties, all members of an organisation called W3C. W3C was founded in 1994 by Tim Berners-Lee, who also created the first version of HTML and invented the World Wide Web. They now oversee the defining of new Web technologies. Comapnies who make browser like Microsoft (Internet Explorer), Mozilla (FireFox), and Apple (Safari) can then decide which of the new Web technoligies they wish to implement.
Most of the big names in browser technology decided to implement quite a lot of the new suggested updates (specifications) put forward by the W3C. These specifications are commonly known as HTML 5. In practice, this means implementing features like HTML Video and audio directly into the browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another exciting update is something called the Canvas tag. This allows you to create quite sophisticated animations and graphics using Javascipt, again without needing a 3rd-party plugin.
There are a whole lot of new HTML tags that take browser technology forward into the 21st century. Throughout this course, we'll introduce you to the essential HTML 5 tags that you need in order to create a modern web page.

Read More

HTML Tags

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom:

<HTML>

</HTML>

This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.
So add those two tags to your text editor and it will look like this:

The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up.
The next pair of tags are the HEAD tags: They go between the two HTML ones:

<HTML>

<HEAD>

</HEAD>

</HTML>

Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand.
A special instruction your browser can understand is the TITLE tag:

<TITLE> </TITLE>

The Title tag always goes in the HEAD section of the HTML skeleton.

The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.)
The final, and most important part, of the HTML skeleton is the BODY section.

In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.
In your text editor, then, add the following:

Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.

DOCTYPE

One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this:

<!DOCTYPE HTML>

DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.
So add a DOCTYPE to the top of your page. Your text editor will look something like this:

Coming up next, we'll take a look at how to save your web pages.

Read More

Saving Web Pages

To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, select Save As. The Save As dialogue box appears (We created a new folder to store all our web pages in, and called the folder HTML)..

Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just typefirstwebpage.html in the Save As box.)

In the File Name box, type firstwebpage.html

Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So these two are OK:

first_web_page.html

first-web-page.html

But these two should be avoided:

first web page.html

FirstWebPage.html

Click on Save and you'll have a HTML page that can be displayed in a browser.

In the next lesson, you'll see how to view your web pages.

Read More

Viewing your web pages in a browser

To view the results, open up an explorer window. In Windows, this is done by holding down the Windows keys and then pressing the letter E on your keyboard. Or click your Start menu in the bottom left, and then click on Computer. On a Mac, click the Finder icon in the Dock.
Navigate to where you saved your HTML page. In our case, this was a folder we created called HTML, which is on our network:

In the image above we have a file called firstwebpage.html. If yours has .txt on the end instead of.html then try again because it's not a web page but a text document.

Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours might be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top. Here's the Firefox version:

And here's the same page in Internet Explorer:

Notice that in both versions the TITLE we added is at the very top of the screen ' 'My First Page'. The same TITLE can be seen further down, at the top of each browser tab.


Exercise
Change the TITLE tag to something other than 'My First Page'. Click File > Save in your text editor. Switch back to your browser and press F5 to refresh the page. Your new TITLE should appear at the top of the screen and at the top of the browser tab.

In the next section, you'll learn how to create a HTML template.

Read More

HTML and CSS Reference

Some Basic HTML Tags

Tag	Explanation	Attribute	Options
<H1>, <H2>, <H3> ... <H6>	Heading Tags
<P>	Start a new paragraph
<BR>	Single line break
<B>	Bold text
<I>	Italics
<OL>	Ordered List	TYPE	A (Capitals) a (Lowercase) I (Capital Roman Numerals) i (Lowercase Roman Numerals) 1 (Numbers)
<UL>	Unordered List	TYPE	Circle, Disc, Square
<LI>	An item for your list

CSS Font and Text Properties

CSS Property	Example Value	Other Values
text-align:	center	Left, Right
font-family:	Verdana, Arial, Helvetica, Sans-Serif
font-size:	16px	|percent |em |xx-large, x-small, small, medium, large, x-large, smaller, larger
font-style:	italic	normal (the default), oblique
font-variant:	small-caps
font-weight:	Bold	Bolder | Lighter | Any number from 100 to 900
Color:	Red	A colour name, Hexadecimal value, RGB Value

CSS borders, backgrounds, margins, padding

CSS Property	CSS Value
border-style	dotted, dashed, solid, double, groove, ridge, inset
border-width	A pixel value like 2px
border-color	A colour value
background-color	A colour value
background-image	url('my_image_name.gif');
background-repeat	repeat, repeat-x, repeat-y, no-repeat
background-position	top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
clear	left, right , both , none
float	right, left , none
margin	A pixel value like 5px
margin-left	A pixel value like 5px
margin-right	A pixel value like 5px
margin-top	A pixel value like 5px
margin-bottom	A pixel value like 5px
padding	A pixel value like 5px

CSS used in the Positioning section

CSS Property	CSS Value	Explanation
/* */	A colour	CSS comment - more than one line
//	A colour	CSS comment - one line
position:	relative, absolute, fixed	Types of positioning
top	A pixel value	Position an element on the page
bottom	A pixel value	Position an element on the page
left	A pixel value	Position an element on the page
right	A pixel value	Position an element on the page
z-index	A numerical value	Used to stack elements one behind the other
float	left, right	Float an element left or right
clear	left, right, both	Clear a floated element

Images and DIVs

HTML Tag	Attributes
IMG	SRC, ALT, HEIGHT, WIDTH, USEMAP
DIV
FIGURE
FIGCAPTION

Hyperlinks

HTML	Explanation	Attributes	Options
A HREF	The HTML for a hyperlink	TARGET	_blank _parent _self _top
		Mailto:	An email address
A ID	Jump to a section of your page, a bookmark

HTML5 Layout Tags

HTML5 Tag	Comments
HEADER	Used for the heading of any section
NAV	Used for a navigation area
SECTION	Used for a section of your web page
ARTICLE	Used for an article in a section of your web page
FOOTER	Used for the footer area

HTML and HTML5 Tables

HTML and HTML5 Table tags	Explanation
TABLE	Create a table
TR	Create a row in a table
TD	Create a cell in a table
THEAD	HTML5 Table header
TFOOT	HTML5 Table footer
TBODY	HTML5 Table body

HTML Table Attributes

TABLE Attributes	Options
Align	Left, Right, Center
Valign	Top, Middle, Bottom
Background	The location of an image
Border	A number for the border width
Bgcolor	A background colour for the table
Cellpadding	A number that sets the space inside a table cell
Cellspacing	A number that sets the space between table cells
Height	The height of a table or cell
Colspan	The number of columns you want to span
Rowspan	The number of rows you want to span
Width	The width of a table or cell

HTML Form Tags

Main Form Tags	Comments
Form	Create a HTML form
Name	Add a name for your form
Method	Select a method, GET or POST
Action	Say where the form should be sent
Input	Create a HTML form element
Type	Select a type of form element
Label	Add a label for a form element
Value	A value for your form elements

HTML Form Elements

Input Types	Comments
Button	Create a clickable button
Checkbox	Create a checkbox
Hidden	Create a hidden form element
Image	Specify an image to be used as a button
Password	Set up a password box
Radio	Create a radio/option button
Reset	Create a reset button
Submit	Create a submit button for your forms
Text	Create a text box

HTML5 Form Elements and Attributes

HTML5 Form Elements	Comments and Options
Placeholder	Placeholder text
Required	Require an element to be filled in
Email	Email text box
URL	URL text box
Number	Number spinners
Range	Sliders with a range of numbers
Date/Time	Date and time textbox or calendar
Search	A search box
Color	Colour picker
Datalist	Used with datalists are LIST, OPTION, VALUE, LABEL

HTML5 Video Tags

HTML5 Video Tags	Comments
VIDEO	The main tag to add a video
SOURCE	Add a source attribute
SRC	Specify where the video is
TYPE	Add codex values

HTML5 Audio Tags

HTML 5 Audio Tags	Comments
AUDIO	The main tag to add audio
SOURCE	Add a source attribute
SRC	Specify where the video is
TYPE	The main tag to add audio

HTML5 Options for the Audio Tag

Audio Attributes	Values
AUTOPLAY	true or false
LOOP	true or false
CONTROLS	true or false
PRELOAD	none, auto, metadata

HTML Special Characters

Character	HTML Entity	ISO Latin-1	Comments
"	"	"	Double quotation mark
'		'	Single quote or apostrophe
&	&	&	Ampersand
÷	÷	÷	Divide symbol
>	>	>	greater than
<	&lt;	&#60;	less than
Space	&nbsp;	&#160;	Create a non-breaking space. Equates to a single tap on the keyboard spacebar
£	&pound;	&#163;	British Pound Sterling
€	&euro;	&#8364;	Euro

Read More

The Details, Aside, and Mark tags

The HTML 5 Details Tag

The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at the image below:

When a user clicks the above message, the following information is revealed:

Clicking the summary will hide the above message.

The Details tag is used like this:

<DETAILS>

<SUMMARY>Click here for further information</ SUMMARY >

<P>
Further information is revealed when a user clicks the summary
<BR>
Click the summary again to hide this message.

</ DETAILS >

In between two Details tags, you add a pair of Summary tags. The summary is the part that is shown to the user. Details can then be added below the Summary tags.
Sadly, only the Chrome browser supports the Details tag at the time of writing. Browsers that don't support the Details tag will simply display the whole of the information you added between the two tags, including the summary.

The HTML 5 ASIDE Tag

The Aside tag is used for material related to the text of your article, but doesn't quite fit in. Think of it as additional material you would like to relay to your readers. You can format an ASIDE tag with CSS, so that it stands out from the main text. Here's an example:

<ARTICLE>

<P>
Main article text here
</P>

<ASIDE>We've missed out other ARTICLE tags</ASIDE>

</ ARTICLE>

The code above shows that we have a main article. We've some HTML5 tags out, however, and want to convey that to our readers. Hence the pair of ASIDE tags.

The HTML 5 MARK Tag

The Mark tag is used to mark out text that you want to highlight. The marked text is then formatted with a yellow background. The Mark tag is used like this:

The discount for this item is <MARK>20%</MARK>, not 10%.

When the above line is formatted, it might look like this in a browser:

Note the yellow background behind the text we have marked out.

In the next section, we'll move on and take a look at getting your site on the internet.

Read More

The HTML 5 Canvas Tag

One tag new to HTML5 is the Canvas tag. The Canvas tag is a blank space on which you can draw anything you like. You can add images to a Canvas, animate your shapes, add text, and a whole lot more besides.
To get the most out of the Canvas tag, however, you need to be able to code using Javascript. Another disadvantage is that not all browsers support the Canvas tag, especially versions of Internet Explorer below version 9. You can, however, write some quite sophisticated browser apps and games using just the Canvas tag and Javascript, and all without plug-ins like Adobe's Flash. To get an idea of the things you can do, take a look at these pages:

http://www.html5canvastutorials.com/category/showcase/
http://developers.facebook.com/html5/showcase/

To draw a Canvas, all you need is these two tags in the BODY of your HTML pages:

<CANVAS>

</CANVAS>

You can specify a height and width for your canvas:

<CANVAS HEIGHT="400" WIDTH="400">

</CANVAS>

If you don't specify a height and width, the canvas will be 300 pixels in width and 150 pixels in height.
The canvas is entirely transparent. If you want it to have, say, a border, you can use some CSS:

<STYLE>

CANVAS {

border: 1px solid #000000;

}

</STYLE>

To do something useful with your canvas, you need to give it an ID. Once it has an ID, you can get a reference to it with Javascript.

<CANVAS HEIGHT="400" WIDTH="400" ID="MyCanvas">

</CANVAS>

In the code below, we use "MyCanvas" to place the canvas ID into a variable (memory storage area):

<SCRIPT LANGUAGE="JavaScript">

var canvasID = document.getElementById("MyCanvas");

</SCRIPT>

You then to specify how you're going to be using your canvas, 2D or 3D:

var canvas = canvas.getContext("2d");

Once you have a reference to your canvas, and a context, you're ready to begin drawing on it. Obviously, this is a complex subject, and a whole book in itself. If you want to explore further, try this page on Mozilla's site:

https://developer.mozilla.org/en/Canvas_tutorial

In the next part, we'll take a look at a few more HTML 5 tags.

Read More

HTML 5 Video and Audio

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:

<VIDEO SRC="your_video.mp4"></VIDEO>

This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:

<object width="" height="">
<param name="movie" value="http://www.youtube.com/v/your_ref"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/your_ref_here" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="" height=""></embed>
</object>

However, Google does produce the code for you, and all you need to do is copy and paste it.
Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in particular.) Even for those that do, you need a plugin to watch the video.
So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing, though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at all. With those caveats in place, let's take a further look at the video tag.

Video Formats and Codecs

The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM. But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as container files. That's because a video is a combination of separate files, such as the video itself and sound tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language, video title, and a whole lot more.
The moving images part of the video will be encoded using programming code known as an algorithm. This algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264, Theora, and Google's VP8.
As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis.
(It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the encoder and decoder software.)
With all these different video and audio combinations, you won't be surprised to learn that browser support is patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads won't be able to see it.
Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE sub-tag lets you specify more than one container format. Take a look at this example:

<VIDEO>

<SOURCE SRC="my_video.mp4" TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<SOURCE SRC="my_video.webm" TYPE='video/webm; codecs="vp8, vorbis"'>
<SOURCE SRC="my_video.ogv" TYPE='video/ogg; codecs="theora, vorbis"'>

</VIDEO>

The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it only recognises one SOURCE tag. Newer version of the iPad may well correct this bug.
Notice the TYPE attribute above, though. It is split in to three parts:

TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '

You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The codecs need their own quote marks, which are double quotes above. You can do it the other way round, though:

TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "

In the line above double quotes are on the outside and single quotes on the inside.
For more information on the VIDEO tag, see this page:

http://diveintohtml5.info/video.html

Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert your videos and provide the code to copy and paste into your web page.

HTML 5 AUDIO

If you only want sound, and no video, then the new AUDIO tag is the one to use. The HTML is similar to the VIDEO tags, in that you specify a list of audio file formats. For example, take a look at the following code:

<AUDIO>

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">

</AUDIO>

Between the two AUDIO tags we have three SOURCE tags like before. This time, however, you don't need any codec information. The browser will try to play the first song on the list above. If the format is not supported, then it will try to play the second song.
You can add some attributes to the AUDIO tag:

AUTOPLAY
LOOP
CONTROLS
PRELOAD

AUTOPLAY takes the value true or false. Setting AUTOPLAY to true means the song would start playing by itself in the browser, which can be annoying. LOOP means that the song will start all over again after it has finished. Again, the values true and false can be used. Using the CONTROLS attribute with a value of true will get you the browser's in-built audio controls. They look like this in Internet Explorer 9:

The PRELOAD attribute takes three values: none, auto, and metadata. PRELOAD refers to the audio file itself. When you set it to none the browser won't preload the file at all. Set it to auto and the browser will decide for you, whereas a setting of metadata will load things like song title, album, artist, etc.
Here's an example of the AUDIO attributes:

<AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">

</AUDIO>

If you tried the above code in Firefox then the Ogg file format would play, because Firefox doesn't support the MP3 format, due to licensing issues.
For browsers that don't support the AUDIO tag at all, then you can add some text to the above code:

<AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto">

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG.

</AUDIO>

The point about the AUDIO and VIDEO tags, however, is that they work in the browser and don't need the end-user to download any third-party plugins. Here's a summary of the new tags used in this chapter.

In the next lesson, you'll take a brief look at the HTML 5 canvas tag.

Read More

Laying out your HTML Forms

Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn't. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you'd find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we've created called form_layout.html. This is in the extra_files/layouts folder that came with this book.

When you open up the above page, you'll see a form that looks like this:

The form elements are nicely lined up on the left, and the right (except for the last name text box).
Open up the HTML code for the page and you'll see this:

The TABLE tags are the ones to concentrate on. We've used COLSPAN a lot, here, to get the layout we wanted. We've also added CSS style with class name like "R1C1". (This just means Row 1, Column1.)
Essentially, though, we had a table that had 4 columns and 5 rows. To get the Email row we have two TD tags inside a pair of TR tags. The first TD is just the text "EMAIL", with some styling applied. The second one uses COLSPAN=3. If we didn't do this then the email text box would be squashed into the second cell of the second row. So we "SPAN" this cell across 3 columns. The rest of the table uses the same COLSPAN manipulation.
The Stylesheet for the HTML is called form_layout_1.css. Take a look at the CSS code and see if you can figure out what's going on (it's in the extra_files/css folder. It might help to make a copy of this file, and the experiment with it by changing the values to see what happens.
For some more ideas and help with your form design, these pages are worth a look:

http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
http://skyje.com/2010/05/web-form-design/

In the next section, we'll move on to the HTML 5 VIDEO tag.

Read More

Data Lists in HTML 5

Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list of options, only the dropdown part doesn't appear until you start typing. The items on your list then appear, allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here's what it looks like before you start typing:

So it looks like just a normal text box.
However, when you click inside of the text box and type a letter, you'll see this in Firefox:

The items on your list will appear.
When you select an item, you change the value:

The HTML5 code for the above Data List is this:

<INPUT TYPE="Text" LIST="zip_codes">

<DATALIST ID="zip_codes">

<OPTION VALUE="AL" LABEL="ALABAMA">
<OPTION VALUE="AK" LABEL="ALASKA">
<OPTION VALUE="AS" LABEL="AMERICAN SAMOA">
<OPTION VALUE="AZ" LABEL="ARIZONA">
<OPTION VALUE="AR" LABEL="ARKANSAS">
<OPTION VALUE="CA" LABEL="CALIFORNIA">
<OPTION VALUE="CO" LABEL="COLORADO">
<OPTION VALUE="CT" LABEL="CONNECTICUT">

</DATALIST>

You still have an INPUT TYPE. This one is Text. Notice the LIST attribute, though. You need this to match the ID of the DATALIST tag.
DATALIST comes after the INPUT code, and has a closing DATLIST tag. For each item on your list you have a VALUE and a LABEL. The LABEL is the text that appears on the list. The VALUE is what it changes to when an item is selected. It is also the value that gets sent when the form is processed.
Note that in the Opera browser, you'll see this as soon as you click inside of the Data List:

So the VALUE and LABEL are displayed, which could be helpful.
What is not helpful is Safari's treatment of Data Lists - everything after your Data List tags will be hidden. So if you have a Submit button after a Data List, Safari users won't see it! One workaround is to put an end tag for all your OPTIONS:

<OPTION VALUE="AL" LABEL="ALABAMA"></OPTION>

The Submit button will then reappear. The Data List won't, though.
And that's it for HTML5 form elements. Try them out in different browsers, and see what works and what doesn't. Don't forget to add some CSS to liven up your form elements!

In the next section, we'll take a look at how to lay out your form elements.

Read More

Dates, Times, Color Picker

Dates and Times

You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera browser does this. Here's what it looks like:

Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the future. The HTML for the above calendar is this:

<INPUT TYPE="date" value="">

The TYPE is "Date", but you can have other TYPES:

TYPE="Date"
TYPE="Month"
TYPE="Week"
TYPE="Time"
TYPE="Datetime"
TYPE="Datetime-local"

All the other browsers will just show you a blank text box in place of the TYPEs above.

Colour Picker

Another form element you can add is a Colour Picker. This will be of limited use, and only the Opera browser has implement it. The HTML code is this:

<INPUT TYPE="Color">

In the browser, it looks like this:

Again, it will just end up as a plain text box, if a browser doesn't support it.

In the next lesson, you'll learn about HTML 5 data lists.

Read More

Spinners and Sliders

Two other HTML5 controls you can add to forms are spinners and sliders. Sadly, though, only Opera and Chrome support the spinner. A spinner allows you to increase or decrease a number in a box by clicking little up and down arrows. They look like this in the Opera browser:

The HTML code for the spinner box looks like this:

<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="2" VALUE="6" SIZE="6">

The TYPE is "Number". The MIN and MAX are the start and end values you want for the box. In other words, a user can't go higher than 10 or lower than 0. The STEP attribute is the increase or decrease in value when you click on the arrows. In our code above, we go up in steps of 2 (2, 4, 6, 8, 10). The VALUE is the default that appears in the box when the page loads, and also the value that is returned when the form is sent. SIZE refers to how wide you want the box.
Sliders work in the Opera, Chrome and Safari browsers. They look like this:

You can move the slider left or right to change the value. The HTML code is this:

<INPUT TYPE="RANGE" MIN="0" MAX="10" STEP="2" VALUE="4">

The TYPE is "Range". The other attributes are the same as for the spin box.

In the next lesson, you'll learn about Dates and Times in HTML 5.

Read More