Unit 6 Read Me

Unit – 6
HTML5 – Introduction
Snap recap
1. List the various tags of HMTL you have learnt so far.
<FRAMESET>
<FRAME>
<HTML>
<Body>
<a>
<Doctype>
<Title>
<Head>
<Audio>
<P>
<Img>
<Table>
<br>
<ul>
<ol>
<td>
<tr>
<li>
Learning Objectives
You will learn about:
New features in HTML5
Backward compatibility
Points to remember for writing HTML5 codes
Tag in HTML5
Attributes in HTML5
Inserting pictures in HTML5
Inserting audio and video files in HTML5
Introduction
HTML stands for Hyper Text Markup Language.
It is used to create web pages with hypertext and hyperlinks that can be viewed by
any web browser.
There are several versions of HTML.
HTML5 is the latest specification of HTML.
It is currently supported by google chrome, Mozilla Firefox, Opera 12, Internet
Explorer 8 om wards and Safari 6.
New Features
The reason for lunching HTML5 are..
HTML5 is an independent markup language and no longer a part of SGML.
It can be used on desktop as well as mobile devices.
A web page is treated as a web document having a specific structure with new tags
like <header>,<footer>,<article>,<nav>,<sections>,<aside>,<figure>,<audio>,<video>.
Backward compatibility
Backward compatibility means the compatibility of the new HTML5 with the older
versions of the markup language feature to run in older versions of web browsers,
along with new features supported by latest web browsers.
Points to remember for writing HTML5 codes

Tags are not case sensitive.
Quotes are optional for attributes as well as attribute value.
The first line of document should be <!doctype html>.
The <html> tag and the <body> tag can be omitted.
Advisable to write: <meta chartest=”UTF-8”>
We can use any text editor to write HTML code.
Structural elements
Header – tag defines the header of a web page document.

Nav – This tag defines the section in the document with the navigation links to other
webpages or to the same webpages.
Article – this tag defines a section of the document which can be independent block
in the whole document.
Section- This tag defines a portion of a document as one section.
Aside – this tag defines a portion of content that can be set aside as a sidebar or
extra information in the webpage.
Footer – this tag defines the footer of a webpages. It generally contains information
about the author, copyright, company logo, etc.
Attributes in HTML 5
The value assigned to an attribute can be enclosed in double or single quotes.
Custom Attributes
These attributes are created by the user for a specific element. To create a custom
attribute we use”data-“ followed by the desired custom attribute name and then set
to the desired string value.
Inserting images
We can insert images in HTML 5 in two ways.
<img> is used to insert simple or animated images in a webpage. The image formats
supported by this tag are jpg.gif,pin,jpeg and webp.
The attributes used with the <img> tag are:
Src : Alt : Height : Width : Border : Align
Using the <picture> tag

This tag is new in HTML5 and give more flexibility in specifying picture resources.
The <source> tag is used as a child element with in the <picture> tag to specify
different versions of an image source for different viewports.
Inserting audio and video files

The audio tag is used to add audio files in a webpage. The three different audio files
supported by the browsers chrome, MP3, WAV , OGG.
Attributes of the audio tag are
Control , loop , autoplay, muted
The source tag with src attributes specifies the URL source of the audio file .
The <video> tag is used to insert video files in a html5 webpage.The three different
video files supported by the browsers chrome, firefox and Opera are MP4,WEBM
and OGG.
Control , autoplay , muted , height , width , loop , poster
Fact file – Multiple <source src=”file”> can be included in <audio> and <video> tags
to give multiple alternatives to the browser to run the audio or video file.
Default settings can be altered by using attributes with or without values.

Unit 6 Read Me

Uploaded by

Copyright:

Available Formats

Unit 6 Read Me

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 6 Read Me

Uploaded by

Copyright:

Available Formats

Unit – 6

Points to remember for writing HTML5 codes

Header – tag defines the header of a web page document.

Using the <picture> tag

Inserting audio and video files

Default settings can be altered by using attributes with or without values.

You might also like