How to create Audio Video Web Page in HTML5

Creating Audio and Video Pages in HTML5

The HTML 5 audio and video elements are a fantastic way of standardizing audio and video over the internet. This has been a long time coming. With so many operating systems being used to browse the internet it can be hard to decide what format to use. If we encode a video as a Windows Media File (WMV) it will not play on a Mac unless that user downloads a certain player or plug-in. The same can be said for encoding a video as a QuickTime file. It will play on a Mac but not on a Windows operating system unless a player is downloaded. And now we have so many variations of Linux operating systems being used, choosing an audio or video format that will play on all visitors' computers is a next to impossible task.

HTML 5 Audio and Video Website

The audio and video elements in HTML 5 will make choosing multimedia formats a lot easier. We will probably use the OGG format for audio as it is completely open source and patent-free. This format is very similar to MP3, AAC, and VQF. We will probably use the H.264 format for video. This format has already been adopted by Adobe and so can be used in Flash based players. An example of this is YouTube.com. They can now provide HD video online because they have used the H.264 standard. What is interesting about this is that visitors using Windows, Mac, Unix and Linux can view YouTube.com videos without having to download a new player. All that is needed is the Flash plug-in, which is on most internet browsing computers. With the HTML 5

Benefits of HTML 5 in Audio Video Web Creation

USES AND BENEFITS OF HTML 5

Web pages and their design are laid out using HTML. HTML stands for Hyper Text Mark-up Language. HTML is comprised of 'tags' or elements that tell your browser what the different areas of your webpage are. You can use these elements to define paragraph areas, images and their dimensions and also font sizes, colors and styles etc. There are many HTML elements and a lot of these have varying attributes like width, height, name, etc. This article will not focus on specific HTML elements; our aim is to give you a brief overview of HTML before moving on to how it has developed into HTML 5.

HTML came to life at the end of 1990. The original HTML, developed by Sir Tim Berners-Lee, comprised of about 20 elements which were strongly influenced by SGML, Standard Generalized Mark-up Language (The exception to this was the hyperlink tag that allows links to be placed in web pages).

As the internet became more widespread, users demanded more functionality. This meant a huge development in browser technology and also in HTML. In fact, HTML was developed to version 4.01 before evolving into XHTML which incorporates HTML 4.01 and XML (Extensible Mark-up Language).

How to use HTML 5 in Web Pages

With HTML 5 a lot more emphasis has been put on the use of 'Cascading style sheets'. This means HTML programmers can no longer depend on using 'tags' like to style text with color, size, and font type. This now has to be done using 'Cascading style sheets' or CSS. The use of CSS means, for example, the text style on a website can be updated or changed with one small change in the CSS rather than having to update or change every tag on every page. In fact, the and tags have been completely dropped.

An overview to your HTML training since last posts

What have you learned so far?

Always start with the basic template we made in the previous lesson:

In the head section, always write a title: The title of your page. Notice how the title will be shown in the upper left corner of your browser:

The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.

In the body section, you write the actual content of the page. You already know some of the most important elements:

Is used for paragraphs.

Emphasis text.

Heading

Subhead

Sub-subhead

Remember, the only way to learn HTML is by trial and error. But don't worry, there is no way you can destroy your computer or the Internet. So keep experimenting - that is the best way to gain experience.

What is that supposed to mean?

Nobody becomes a good website creator by learning the examples in this tutorial. What you get in this tutorial is simply a basic understanding of the building blocks - to become good you must use the building blocks in new and creative ways.

So, get out in the deep water and stand on your own two feet... Okay, maybe not. But give it a go and experiment with what you have learned.

So what's next?

Try to create a few pages yourself. For instance, make a page with a title, a heading, some text, a subhead and some more text. It is perfectly okay to look in the tutorial while you make your first pages. But later, see if you can do it on your own - without looking.

How to create website in HTML?

Create your first website

With what you learned in the previous lessons, you are now only minutes away from making your first website.

How?

In Lesson 1 we looked at what is needed to make a website: a browser and Notepad (or similar text editor). Since you are reading this, you most likely already have your browser open. The only thing you need to do is to open an extra browser window (open the browser one more time) so you can read this tutorial and see your new website at the same time.

Also, open Notepad (in Accessories under Programs in the Start menu):

Now we are ready!

What can I do?

Let us start with something simple. How about a page that says: "Hurrah! This is my first website." Read on and you'll find out how simple it is.

HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, an simple HTML document begins with what should come first and ends with what should come last.

The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag (no surprises there). So before you do anything else type "" in the first line of your document in Notepad.

As you may recall from the previous lessons, is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "" a couple of lines down and write the rest of the document between and .

The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head ( and ) is on top of the body ( and ).

Your document should now look like this:

Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). In principle, it does not matter how you structure your HTML document. But to help you, and others reading your coding, to keep an overview, it is strongly recommended that you structure your HTML in a neat way with line breaks and indents, like the above example.

If your document looks like the above example, you have made your first website - a particularly boring website and probably not what you dreamt of when you started this tutorial but still some sort of a website. What you have made will be the basic template for all your future HTML documents.

So far so good, but how do I add content to my website?

As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.

For example, if you want to give the page a title which will appear in the top bar of the browser, it should be done in the "head" section. The element used for a title is title. I.e. write the title of the page between the opening tag :

Note that this title will not appear on the page itself. Anything you want to appear on the page is content and must therefore be added between the "body" tags.

As promised, we want the page to say "Hurrah! This is my first website." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, type the following:

Hurrah! This is my first website.

The p in

is short for "paragraph" which is exactly what it is - a text paragraph.

Your HTML document should now look like this:

Hurrah! This is my website.

Done! You have now made your first real website!

Next all you have to do is to save it to your hard drive and then open it in your browser:

• In Notepad choose "Save as..." under "File" in the top menu.
• Choose "All Files" in the "Save as type" box. This is very important - otherwise, you save it as a text document and not as an HTML document.
• Now save your document as "page1.htm" (the ending ".htm" indicates that it is an HTML document. ".html" gives the same result. I always use ".htm", but you can choose whichever of the two extensions you prefer). It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again.

Now go to the browser:

• In the top menu choose "Open" under "File".
• Click "Browse" in the box that appears.
• Now find your HTML document and click "Open".

It now should say "Hurrah! This is my first website." in your browser. Congratulations!

If you absolutely want the whole world to see your masterpiece right away, you can jump to Lesson 13 and learn how to upload your page to the Internet. Otherwise, be patient and read on. The fun has just begun.

What the Tags and Elements in HTML

Elements and tags

You are now ready to learn the essence of HTML: elements.

Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.

"Tags"?

Tags are labels you use to mark up the begining and end of an element.

All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".

Generally speaking, there are two kinds of tags - opening tags: and closing tags: . The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.

HTML is all about elements. To learn HTML is to learn and use different tags.

Can you show me some examples?

Okay, the element em emphasis text. All text between the opening tag and the closing tag is emphasised in the browser. ("em" is short for "emphasis".)

Example 1:

Emphasised text.

Will look like this in the browser:

Emphasised text.

The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.

Example 2:

This is a heading

This is a subheading

Will look like this in the browser:

This is a heading

This is a subheading

So, I always need an opening tag and a closing tag?

As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this:
.

Should tags be typed in uppercase or lowercase?

Most browsers might not care if you type your tags in upper, lower or mixed cases. , or will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.

If you continue to the next lesson in 10 minutes you will have made your first website.

What exactly an HTML is? Intro to Formatting Language

This lesson will give you a brief presentation of your new friend, HTML.
What is HTML?

HTML is the "mother tongue" of your browser.

To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".

View source

For the untrained eye, HTML code looks complicated but this tutorial will help you make sense of it all.
What can I use HTML for?

If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. In just two lessons from now you will have learned how to make your first website.

HTML is used to make websites. It is as simple as that!
Okay, but what does H-T-M-L stand for?

HTML is an abbreviation of "HyperText Mark-up Language" - which is already more than you need to know at this stage. However, for the sake of good order, let us explain in greater detail.

* Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net.
* Text is self-explanatory.
* Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
* Language is what HTML is. It uses many English words.

In this tutorial you will learn so-called XHTML (Extensible HyperText Mark-up Language) which, in short, is a new and more well-structured way of writing HTML.

Now you know what HTML (and XHTML) stands for let's get started with what it is all about: making websites.

Accessary Software Applications required to learn HTML

In this first lesson, you will get a brief presentation of the tools you need to make a website.
What is needed?

Most likely you already have everything you need.

You have a "browser". A browser is the program that makes it possible to browse and open websites. Right now you are looking at this page in your browser.

It is not important which browser you use. The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used.

You might have heard about, or even used, programs such as Microsoft FrontPage, Macromedia Dreamweaver or even Microsoft Word, which can - or claim that they can - create websites for you. Forget these programs for now! They are not of any help to you when learning how to code your own website.

Instead, you need a simple text editor. If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories:

How to find Notepad

If you are not using Windows, you can use a similar simple text editor. For example, Pico (Linux) or TextEdit (Mac).

Notepad is a very basic text editing program which is excellent for coding because it does not interfere with what you are typing. It gives you complete control. The problem with many of the programs that claim they can create websites is that they have a lot of standard functions, which you can choose from. The downside is that, everything needs to fit into these standard functions. Thus, this type of programs often cannot create a website exactly as you want it. Or - even more annoyingly - they make changes to your hand-written code. With Notepad or other simple text editors, you only have yourself to thank for your successes and errors.

A browser and Notepad (or a similar simple text editor) are all you need to go through this tutorial and make your own websites.
Do I need to be online?

You do not need to be connected to the Internet - neither while reading this tutorial, nor while making your websites.

If you want to avoid being online while reading this tutorial, you can either print it out or simply disconnect from the Internet while reading on screen. You can make the website on your computer's hard disk and upload it to the Internet when it is finished.
What's next?

Go to the next lesson and read about HTML before the fun really starts in Lesson 3.

Introduction to HTML and DHTML

Introduction to HTML and DHTML

Introduction - Free HTML Tutorial

HTML is the foundation for the InternetPeople often think it is extremely difficult to make a website. That is not the case! Everyone can learn how to make a website. And if you read on, you will have made one in just one hour.

Others believe - just as mistakenly - that expensive and advanced software is needed to make websites. It is true that there are lots of different programs that claim they can create a website for you. Some come closer than others. But if you want it done right, you must do it yourself. Fortunately, it is simple and free and you already have all the software you need.

The aim of this tutorial is to give you an easy, yet thorough and correct introduction to how to make websites. The tutorial starts from scratch and requires absolutely no prior knowledge of programming.

The tutorial cannot show you everything. So some engagement and a will to experiment are required. But don't worry - learning how to make websites is a lot of fun and gives a tremendous amount of satisfaction when you get it right.

How you choose to use the tutorial is up to you. But we suggest you read only two or three lessons a day and take time to experiment with the new things you learn in each lesson.