Scribd
Upload
7 views

Read Me

The document discusses HTML5 including new features, backwards compatibility, structural elements, attributes, inserting images, audio and video. It covers tags like header, nav, article, section, aside, footer, audio, video, source. Attributes discussed include height, width, align, valign, bgcolor.

Uploaded by

meemeepanpan089
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Read Me

The document discusses HTML5 including new features, backwards compatibility, structural elements, attributes, inserting images, audio and video. It covers tags like header, nav, article, section, aside, footer, audio, video, source. Attributes discussed include height, width, align, valign, bgcolor.

Uploaded by

meemeepanpan089
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

 Learning Objectives  Tags in HTML5

 New features in HTML5  Attributes In HTML5


 Backward compatibility  Inserting pictures in HTML5
 Points to remember for writing  Inserting Audio and video files in
HTML5 Code HTML5

List the various tags for HTML you have learnt so far
<strong>, <body>, <Frameset>, <frame>, <div>, <p>, <style>, <h1>, <tr>, <td>, <table>, <ul>,
<li>, <a>, <span>, <footer>, <head>

Introduction
Hypertext markup language
Used to create webpages with hypertext and hyperlinks that can be viewed using any browser
HTML5 is the latest version of HTML
Supported by google chrome, Mozilla Firefox, Opera 12, Internet Explorer 8, and safari 6.
New features
HTML5 is an independent mark up language and is no longer a part of SGML
Used on desktop as well as mobile devices like tablets and smartphones.
Treated as a web document having a specific structure with new tags :

 Header, footer, article, nav, sections, aside, figure.


New audio tags

 Audio, Video
Dynamic webpage

 Menus, command, details, DataGrid.


Drawing graphics

 Canvas
Back compatibility
Backwards compatibility means that compatibility of the new HTML5 with the older versions of
the markup language features 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 attributes values
 The first line of the document should be <doctype html>
 <html> tag and the <body> tag can be omitted
 Advisable to write: <meta charset=” UTF-8”
 We can use any text editor to write HTML code
Structural elements
A group of elements which are used to create the structure of HTML5 and also called section
elements.
Header- defines the header of a webpage document.
Nav- defines the section in the document with the navigation links to other webpages or to the
same webpage.
Article- defines a section of the document which can be an independent block in the whole
document.
Section- defines a portion of a document as one section.
Aside- defines a portion of content that can be set aside as a sidebar or extra information in the
webpage.
Footer- defines the footer of a webpage.
Attributes in HTML5
The value assigned to an attribute can be enclosed in double or single quotes.

Standard attributes
Also called global attributes and are supported by almost all the elements in HTML.

Attributes Use Example


background Used to place an image as a <table
background for the element background= “image1.jpg”>
it is used with. <body
background= “image2.jpg”>
accesskey Gives the shortcut keys to <a href= “file1.html”
access the element. accesskey= “f”>
align Horizontally aligns the <table align=left>
elements as left, right or <img align=right>
center. <p align=center>
valign Vertically aligns the elements <tr valign=top>
as top, middle, bottom.
bgcolor Sets the background color of <body bgcolor=red>
the elements used. <tr bgcolor=green>
<td bg color=blue>
height Sets the height of the <img height=200>
element. <table height=300>
width Sets the width of the <img width=300>
element. <table width=400>

Custom Attributes

These are created by 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

1. Using the <img> tag


The <img> tag is used to insert simple or animated images in a webpage.
Src, Alt, Height, Width, Border, Align
2. Using the <picture> tag
This tag is new in HTML5 and gives more flexibility in specifying picture resources.
The <source> tag is used as a child element.

Inserting audios and videos

The <audio> tag is used to add audio files in a webpage.


Control, Loop, Autoplay, Muted
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.

You might also like