Understanding the Essentials of HTML:
HTML is a markup language because its used for describing the content which will be displayed on the Web page. Web pages include tags which means the page is with markup, and these tags provide structure for the page. There are different elements that build a Web page like multimedia, tags, graphic and so on. When users open a HTML file the file has to render the page to show the content, which means it interprets and produces the file.
Tags are the foundation bricks of an HTML page. Every tag is surrounded by angled brackets and most of them them come in pairs. The first tag used on a page is called the start tag and the other tag is called the closing tag, for example, start tag: <h1>, closing tag: </h1>. They are actually almost the same except the closing tag must include a slash before the keyword.
Choosing and Configuring HTML5 Tags to Display Text Content:
Usually when an update for an app arrives, the app as a whole does not change. What changes is only some features or some features might be added. This also applies to HTML, for example, HTML5 and HTML4 are similar, many attributes and elements from HTML 4 are used in HTML5. However, HTML5 has some extra new tags and some of the older elements are no longer supported. (Microsoft Official Academic Course 2012:29).
This is extremely important, because if big changes happen then many developers will struggle , thats why small changes are prefered because developers now can still use most of the elements from the previous HTML versions. In addition, some of the new elements presented in HTML5 are text-related elements for example meter, mark, command, time. (Microsoft Official Academic Course 2012:29).
Those new elements increase the functionality of the Web pages. New multimedia elements such as video and audio. As well as, elements that make the Web page look more intuitive. Also, tags for page sections like headers, navigation, footers and even sidebars. Creation and validation is much easier.(Microsoft Official Academic Course 2012:29).
Choosing and Configuring HTML5 Tags to Display Graphics:
When it comes to using HTML to display graphics, there are a few different types of options that a developer has available to them. For example, they can use the <image> tag to display images on a website, set text to describe the image if a browser does not support the tag, and set the dimensions of the image. The location of the image on the page can be configured with a CSS file, and some other properties of the image can be controlled too. Typically, images displayed by the <image> tag will either be a Vector image, or a raster/bitmap image.
Vector images are made up mathematical expressions that are conveyed as lines or curves, whereas raster images are made up of pixels. The major difference between the two is that when a raster image is enlarged, the image will begin to appear blurred, as it is made up of a set number of pixels. A vector image, however, will still have the same definition when enlarged, since the mathematical functions that dictate what the image looks like are able to recalculate based on the new size.
When HTML5 was released, it bought with it a few new ways of showing graphics on a web page. This is using the <figure> and <figcaption> tags. When used, the <figure> tag delegates a section of the web page as a figure and allows you to specify what type of figure (photograph, drawing etc.) it is. A single image placed inside a figure tag will display as normal, however if you were to add multiple images inside a <figure> tag, those images would appear side by side without having to set the position of each image individually using CSS. The <figcaption> tag is an optional tag, and any images inside a <figure> tag with a <figcaption> tag will have a caption beneath them.
There are other ways of displaying graphics, too. One such way is the use the canvas element. This is slightly more complicated that inserting an image, as it requires JavaScript. First, you must declare the script in the head of the website, and then in the body you can declare the canvas. It can be highly customisable and has the option for fall back text to be added in case a browser cannot support the canvas feature.
The final method for displaying graphics in a HTML web page is using the SVG language. In previous versions of HTML, an <object> or <embed> tag, as a dedicated <svg> tag has been added. What SVG does is create a scalable vector graphic, which is displayed by the web page when the <svg> tag is used. SVG graphics are fully scalable, meaning that it will change its size to fit on the size of screen its being displayed on, whether its a phone or a computer monitor. SVG is also highly flexible in that, the images you create can be made to be a large variety of shapes, colours, and rotations.
Choosing and Configuring HTML5 Tags to Play Media:
The audio and video element are two huge changes in HTML5 (compared to its former versions), allowing multimedia from a Web browser without any plugins required. In other words, any HTML5-supported browser can display all sorts of media (i.e. audio books, music, videos) without having to install extra software or extensions such as Adobe Flash, Apple QuickTime or Windows Media Player (Microsoft Official Academic Course 2012:45).
Regarding video formats, not all of them are supported by all browsers, although MP4 and H.264 are the most commonly and widely used video formats and can be found on both Web browsers and mobile devices.
The disappearance of supporting software (talked about in the first paragraph) goes in relation with the appearance of the new tags that came along with the release of HTML5
To implement one of these elements, the media file comes along with the scr(source) attribute to designate a video file to be played in an HTML document or site, for example: <audio src=âLinkinPark.mp4></audio>. The size of the window on which the social media will display depends on the <height> and <width> (W3schools 2017).
Besides the implemented multimedia tags, a few multimedia-related attributes were added into HTML5 as well. Each of these attributes can be found in an example on the right side of table 3.
| Element | Description |
|---|---|
| <audio> | Defines audio content |
| <embed> | Defines a container for external, non-html applications |
| <source> | Defines multiple media resources for media elements |
| <track> | Defines the tracks for media elements (<video> and <audio>). |
| <video> | Defines video or movie. |
| <Poster> | Displays a static image before the video loads (thumbnail for the people who do not know). |
| <Autoplay> | Starts playing the video automatically once the page has been opened. |
| <Controls> | Displays a set of controls for playing, pausing, and stopping the volume |
| <Loops> | Repeats the video as soon as it has finished |
Here is an example, where the video tag is used:
An example, where the audio tag is used: