Showing posts with label html basics. Show all posts
Showing posts with label html basics. Show all posts

Monday, March 14, 2016

HTML Video and Audio

<audio> , <html>
HTML Video and Audio
HTML Multimedia - 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.


Read more »
By on No comments:
Label: , , , , , , , , ,

HTML Images

<html> , <img src="">
HTML Images
HTML Images
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...

The HTML5 logo


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.

The onlinedesignteacher logo

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.

The html5 logo

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




Read more »
By on No comments:
Label: , , , , , , , , , ,

HTML Links

<a> , <html>
HTML Links
HTML Links
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.



Read more »
By on No comments:
Label: , , , , , , , ,

HTML Tables

<html> , <table>
HTML Tables
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 1Heading 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.



Read more »
By on No comments:
Label: , , , , , , , ,

HTML Lists

<html> , html
HTML Lists
HTML Lists with <ol>, <ul> and <li>
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...
  1. First list item 
  2. 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.



Read more »
By on No comments:
Label: , , , , , , ,
close
Banner iklan disini