Design Post Update: <html>

Showing posts with label <html>. Show all posts

Monday, March 14, 2016

HTML Video and Audio

HTML can also be used to add video and audio files to your webpage

HTML Video

Videos can be easily hosted online embedded into your web pages using html with the <video> tag to display your media file. It works in a similar way to the image tag in that a 'src' attribute must be defined in order for the video file to be located. However with video and audio files the player details as well as the file details need to be specified. Here is a look at a sample,

Lets explain the above video code a little more...

The video element specifies that a video player is needed
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes for quicker loading. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
The <source> element along with the src attribute locates the file and specifies the file type.
Currently .mp4 video files are the only file type supported across all browsers.

Something to consider...

Videos are large files and hosting your videos directly on your own website hosting space will take up a lot of space so if you have a lot of videos a good idea would be to consider hosting them on an external video hosting websites. YouTube and Vimeo are excellent places to host your videos, you can then use the embed code that they provide you to place the video on your website.

HTML Audio:

Like videos and images there are many audio file types. MP3 files are the only audio files that are currently supported across all browsers.The <audio> tag works in a very similar way to the <video> tag shown above.

Here is a sample piece of HTML code for adding an audio file to your page...

Lets explain the above audio code a little more...

The video element specifies that a video player is needed
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes for quicker loading. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
The <source> element along with the src attribute locates the file and specifies the file type.
Currently .mp3 video files are the only file type supported across all browsers.

HTML Audio/Video Properties

audioTracks Returns an AudioTrackList object representing available audio tracks
autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered Returns a TimeRanges object representing the buffered parts of the audio/video
controller Returns the MediaController object representing the current media controller of the audio/video
controls Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin Sets or returns the CORS settings of the audio/video
currentSrc Returns the URL of the current audio/video
currentTime Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate Sets or returns the default speed of the audio/video playback
duration Returns the length of the current audio/video (in seconds)
ended Returns whether the playback of the audio/video has ended or not
error Returns a MediaError object representing the error state of the audio/video
loop Sets or returns whether the audio/video should start over again when finished
mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
muted Sets or returns whether the audio/video is muted or not
networkState Returns the current network state of the audio/video
paused Returns whether the audio/video is paused or not
playbackRate Sets or returns the speed of the audio/video playback
played Returns a TimeRanges object representing the played parts of the audio/video
preload Sets or returns whether the audio/video should be loaded when the page loads
readyState Returns the current ready state of the audio/video
seekable Returns a TimeRanges object representing the seekable parts of the audio/video
seeking Returns whether the user is currently seeking in the audio/video
src Sets or returns the current source of the audio/video element
startDate Returns a Date object representing the current time offset
textTracks Returns a TextTrackList object representing the available text tracks
videoTracks Returns a VideoTrackList object representing the available video tracks
volume Sets or returns the volume of the audio/video

Next Up

The last part of our 10 steps to learning HTML is a treat. We provide you with all the web design resources you will need to take you from HTML novice to industry ready web developer.

HTML Images

SmartGirl <html> , <img src="">

Images are very powerful tools in web design and help convey the message and style of a business instantly

HTML Images work in a similar way to links in that they require a single element but also only work together with one specific attribute. So with links the element <a> always uses the attribute 'href', with images the element <img> (for image) always uses the attribute 'src' (for source).

The <img> Element

The element <img> tells the computer you placing an image in the web page and the attribute 'src' tells the computer where to find the image. Like with links the image can be an existing online image that you link to or an image saved on your own hosting space. For example,

The code above links to a file called 'html' which is a .gif file (more on file types in a moment) and is save in a subfolder called images. Note the attribute title can also be used with images. Also note how the element does not need a closing tag, this is because there is now content, the image is stand alone.

The image would appear in the browser like this...

There are three main types of image files that you can insert into your web pages, gif, jpeg and png. For a more in depth look at file types, see the section on common graphic design file types.

HTML Image Attributes

You always need to use the attribute 'src', which tells the browser where the image is located but there are a number of other attributes which can be useful when inserting images. Another attribute you should always use is 'alt', this allows you to set a value which describes the image. This value will appear if the user hovers over the image (try the image above) while also helping search engines to correctly index the image. Two other attributes to the 'img' element are width and height, for example,

The above code results in a 64 x 64 pixel sized representation of the original image, as seen below.

With images it is also recommended that you always use the 'alt' attribute to describe what the image shows. This is valuable for 4 reasons...

The alt attribute helps search engines understand the content of the image.
The alt description will be displayed as text if the image fails to load.
Text readers will read the alt attribute for the blind or visually impaired using your website.
When you hover over an image the alt attribute will be displayed.

The example below shows the html code for an image with the alt attribute in use.

The above code will result in the image below and if you hover over it the alt text will display.

Image Sizes and Resolution

Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolutions are 1024 x 768 and 1366 x 768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen. If you do not set the width and height, the image will simply be inserted in its actual size.

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, ideally you should never decrease the image size by using the width and height attributes but instead, you should resize and optimise your images in an image editing program to make your pages lighter and faster.

That said, it is still a good idea to use the width and height attributes, even if you are not changing them, because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way. Another article you may be interested in is How to get your images up the Google rankings.

Next Up

Learn how to add video and audio files using HTML.

HTML Links

SmartGirl <a> , <html>

HTML links are what makes the web ... a web!

HTML Links are clickable text or images that connect one webpage to another. To make links, we use what we always use when coding HTML, an element. A simple element <a> used with one attribute 'href' and you will be able to link to anything and everything. The element 'a' stands for anchor and the attribute 'href' is short for "hypertext reference", which specifies where the link leads to, typically another web page on the internet but it can also lead to a file of any type.

External HTML Link

Here is an example of a standard external html link to www.google.com

The html5 code above would look like this in the browser,

Here is a link to Google

In the above example the attribute 'href' has the value "http://www.google.com/", which is the full address of google.com and is called a URL which stands for Uniform Resource Locator. Note that "http://" must always be included in URLs.

The sentence "Here is a link to Google" is the text that is shown in the browser as the clickable link, it does not really matter what this text is but for the sake of visitors to your website try to use relevant text. As always remember to close the element with an </a>.

Link To Your Own Webpages

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages, let's call them page1.html and page2.html, and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.html to page2.html would look like this,

If page 2 were placed in a subfolder (named "subfolder"), the link would look like this:

If it was the other way around, a link from page 2, in the subfolder, out to page 1 would look like this:

In this case '../' points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing '../../'. If you find this hard to follow or understand the best thing is to try out creating some links yourself, practice makes perfect!

Link Within A Webpage

You can also create internal links within a page - for example create a table of contents at the top of the page which has links to each chapter below. All you need to use is a very useful attribute called 'id' (identification) and the symbol "#". Use the id attribute to mark the element to which you want to link to. For example,

You can now create a link to that element by using "#" in the link attribute. The "#" tells the browser to stay on the same page. The "#" must be followed by the id of the tag you want to link to. For example,

As always, try it out yourself but remember that if the content you are linking to is within the same screen view, i.e. you don't have to scroll down to it, then the link may appear not to be working when it actually is. This is because the link and the area you are linking to are too close to each other.

Link To A Document

You can also make a link to any type of file, such as a word document or PDF. It is done in almost the same way as all other links.

In this example the file is a PDF called info and it is located in a subfolder called 'documents'.

Link Titles

In addition to the 'href' attribute, you can also use the attribute title put a title on your link which appears when you hover the mouse cursor over the link. This can be used to provide extra information to the user about where the link leads to. For SEO purposes it is also recommended that you add a title attribute to all links. For example,

The code above would appear in the browser like this, (Hover over it to see the title).

Google

Next Up

Next up we explain how to add images to your webpages using HTML.

HTML Tables

SmartGirl <html> , <table>

HTML Tables using the <table>, <th>, <tr> and <td> elements

HTML can be used to structure tabular data

HTML Tables are used when you need to show 'tabular data', in other words information that is logically presented in rows and columns. NOTE: Do not attempt to use tables to arrange the layout of an entire webpage or website with tables, that is what CSS is for. But more on that later.

Building tables in HTML works in a similar way to lists although at first they may seem more complicated. However if you take it step by step it is actually strictly logical - just like everything else in HTML. Tables use three main elements, <table> for table, <tr> for table row and <td> for table data

The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
<tr> stands for "table row" and starts and ends horizontal rows. Still logical.
<th> stands for "table header" and is used within the first table row to set the table headings. Still logical.
<td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

See the example below.

The html code above will create a table like this in the browser,

Heading 1	Heading 2
Cell 1	Cell 2
Cell 3	Cell 4

This is a very basic example, but tables can be made more interesting by using attributes. For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.

The html code above will create a table in the browser like this...

Heading 1	Heading 2
Cell 1	Cell 2
Info 3	Info 4

Other attributes such as 'height', 'width', 'bgcolor', 'align' and 'valign' can also be used to edit the appearance of your table.

The html code above will create a table like this in the browser ...

Heading 1	Heading 2
Cell 1	Cell 2
Info 3	Info 4

Try it yourself and experiment with different attributes to see what kinds of tables you can create using HTML.

Next Up

Once you have mastered the basics of HTML tables the next step is how to create web links using HTML.

HTML Lists

SmartGirl <html> , html

HTML can be used to create structure lists

HTML Lists Elements

Now it is time to learn some new HTML elements <ul>, <ol> and <li> which are used to create lists. What better way to display and describe them than in their very own list!

<ul> is short for "unordered list" and inserts bullets for each list item.
<ol> is short for "ordered list" and numbers each list item.
To make items in the list you must use the <li> tag ("list item").

As well as their obvious use, lists are also commonly used for structuring data to create website menus and drop down menus. First things first though, let's look at some basic list examples.

Ordered HTML Lists

The html code above will create a list like this in the browser...

First list item
Second list item

Unordered HTML Lists

The html code above will create a list like this in the browser...

A list item
Another list item

HTML List Types

By default the unordered list displays the bullet points as circles and the ordered list uses numbers as its default. You can also create different types of lists, such as a,b,c lists or Roman numeral lists, using the attribute 'type' and setting a relevant value, see the options below.

1 - (Default) List using decimal numbers (1, 2, 3, 4)
a - Alphabetically ordered list, lowercase (a, b, c, d)
i - Roman numerals list, lowercase (i, ii, iii, iv)

Disc - (Default) Filled in circle bullet point list
Circle - An unfilled circle or circle outline bullet point list
Square - A filled in square bullet point list

Practice and experiment by creating your own lists using html and add them into your web pages.

Next Up

Learn how to create and display data in tables using HTML.

The HTML Template

SmartGirl <html> , html

A visual reference of the a HTML page structure

Start With A DOCTYPE...

The doctype declaration must be the very first thing in your HTML document, before the html tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML5, the latest version of HTML, there is only one declaration, and it is very simple:

Note:

The tag does not have an end tag.
The declaration is NOT case sensitive.
Always add the declaration to your HTML documents, so that the browser knows what type of document to expect.

The HTML Page Structure

The two main sections within a HTML document are the 'head' and the 'body' sections. The 'head' section will contain information about your page, none of which appears in the browser, and the 'body' contains all the content which will be displayed in the browser. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

An empty HTML document is structure as shown below.

Note how we structured the tags with new lines (using the Enter key). In principle, it does not matter how you structure your HTML document, other than keeping elements in order, but to help you, and others reading your code it is strongly recommended that you structure your HTML in a neat way with line breaks and indents. If you type the above code and save the file with the extension .html, believe it or not you have just created a website! A single page, empty website but a website nonetheless and what you have made can be used as the basic template for all your future HTML documents. If you are using Context simply save the file as a HTML but if you are using Notepad or Simple text choose File- Save As then select all files from the file type drop down and save the document with the .html file extension, for example pagename.html. You can now open click on the file and it will open in your default browser.

HTML <Head> and <Body> Sections

As you learnt earlier, your HTML document has two parts: a head and a body. Remember 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 or tab of the browser window, it should be done in the 'head' section. The element used for a title is title. So write the title of the page between the opening tag <title> and the closing tag </title>. 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.

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. To add some content to the page, type the following in between the 'body' tags.

The html code above will appear in the browser as

Hurrah! This is my first website

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. If you're having trouble, here is an example:

Next Up

Understanding the different element that make up a HTML webpage. Read On >>>

HTML Elements

SmartGirl <html> , elements

The structure on a HTML element

What are elements in HTML?

The foundations of HTML are elements. Elements give structure to a HTML document and tell the browser how you want your website to be presented. In this section we will learn what elements are, how they work and use a small sample of basic elements. Throughout this series of HTML notes we will be introduced to new elements in each section until we have an understanding of all the main HTML elements.

In general, elements consist of a start tag, some content, and an end tag. Tags are labels you use to mark up the beginning 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 such <html> and closing tags like </html>. Notice that 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. To learn HTML is to learn and use different elements and tags.

Sample HTML Elements

Let's look at some examples. For example the element b is used to markup bold letters so all text between the opening tag <b> and the closing tag </b> is written in bold letters in the browser. ('b' being short for 'bold'.)

So the html code below...

Will look like this in the browser...

This text must be bold.

Other basic elements include <p> for paragraph, <i> for italics and <u> for underline. Headings are created using one from a set of six elements, h1, h2, h3, h4, h5 and h6, where h1 is the largest text, h2 is the second and slightly smaller text, and so on right down to h6.

Will look like this in the browser...

This is a heading

This is a subheading

Now lets try out some other elements and see what we can do. The best way to learn HTML is by trial and error but don't worry, there is no way you can break your computer or the Internet by making mistakes. So keep experimenting, that is the best way to gain experience. Some other elements are <p> for paragraph, <i> for italics, <u> for underline and <b> for bold. Multiple elements can also be at the one time, but they must be closed in reverse order, for example

Will appear in the browser as...

This text is in bold and italics

You can also use elements within elements like this.

Will appear in the browser as...

This word is in bold and this word is in italics.

As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which 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 is created with <br /> or a horizontal rule (line) which is created using <hr> do not need to be closed.

Effectively when writing your html code you are giving instructions to a computer so HTML is simple and logical. The browser reads HTML like you read yourself, from the top down and from left to right. Thus, a HTML document begins with what should come first on your page and ends with what should come last and your elements should be arranged accordingly. The first thing you will need to do is to tell the browser that you will 'talk' to it in the language of HTML. This is done with the tag <html>. So directly after your !Doctype, type <html>.

Throughout the next lessons we will learn numerous more elements and attributes but if you cant wait just click here for a full list of all HTML elements and their associated attributes.

Next Up

Learn about HTML Attributes and what you can use them for.

HTML Attributes

SmartGirl <html> , attributes

HTML Syntax showing element, attribute and value

A HTML attribute can be part of a HTML element and is always followed by a value

HTML Attributes are effectively additional information for the html elements. Every attribute will also define a value to go with it. You will often use attributes in tags such as the body tag while you will rarely/never use attributes in, for example, a <br /> tag since a line break normally is a line break without any parameters to adjust.

Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different elements. It also works the other way as some elements can only contain one kind of attribute while others can contain many. It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide. See the example below.

The html code above will create text aligned to the right in the browser like this...

Text text text text text text.

Attributes are always written within a start tag and are followed by an equals sign and the attribute value is written between inverted commas. Tables, for example, can be made more interesting using attributes (don't worry about the table code as we will come to that soon).

For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.

This html code will create a table in the browser like this...

Cell 1	Cell 2
Cell 3	Cell 4

Tip: Don't forget to always close the inverted commas after an attribute.

Throughout the next lessons we will learn numerous more elements and attributes but if you cant wait just click here for a full list of all HTML elements and their associated attributes.

Next Up

Learn how to create lists using HTML.

Monday, March 14, 2016

HTML Video

Lets explain the above video code a little more...

Something to consider...

HTML Audio:

Lets explain the above audio code a little more...

HTML Audio/Video Properties

Next Up

The <img> Element

HTML Image Attributes

Image Sizes and Resolution

Next Up

External HTML Link

Link To Your Own Webpages

Link Within A Webpage

Link To A Document

Link Titles

Next Up

Next Up

HTML Lists Elements

Ordered HTML Lists

Unordered HTML Lists

HTML List Types

Next Up

Start With A DOCTYPE...

The HTML Page Structure

HTML <Head> and <Body> Sections

Next Up

What are elements in HTML?

Sample HTML Elements

This is a heading

This is a subheading

Next Up

Next Up

Search This Blog

Recent Posts

latestposts

Popular Posts

Featured

Blog Archive

Recent Post

Popular Posts

Recent Comments