HTML Tut

HTML5 & CSS3
INTRODUCTION TO HTML
• HTML with CSS and JavaScript you will be able to create your own
interactive and dynamic website. But Now We will focus on HTML only in
this tutorial.
• The major points of HTML are given below:
• HTML stands for HyperText Markup Language.
• HTML is used to create web pages and web applications.
• HTML is widely used language on the web.
• We can create a static website by HTML only.
• Technically, HTML is a Markup language rather than a programming
language.
STRUCTURE OF HTML5
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<!- -Html content -- >
</body>
</html>
What is HTML ?
• HTML is an acronym which stands for Hyper Text Markup Language which is

used for creating web pages and web applications. Let's see what is meant by
Hypertext Markup Language, and Web page.
• Hyper Text: HyperText simply means "Text within Text." A text that has a link
within it, is a hypertext. Whenever you click on a link which brings you to a new
webpage, you have clicked on a hypertext. HyperText is a way to link two or
more web pages (HTML documents) with each other.
• Markup language: A markup language is a computer language that is used to

apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, etc.
• Web Page: A web page is a document which is commonly written in HTML
and translated by a web browser. A web page can be identified by entering
an URL. A Web page can be of the static or dynamic type. With the help of
HTML only, we can create static web pages.
NB: HTML is a markup language which is used for creating attractive web
pages with the help of styling, and which looks in a nice format on a web
browser. An HTML document is made of many HTML tags and each HTML tag
contains different content.
Example of HTML Syntax
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Description of HTML Example
• <!DOCTYPE>: It defines the document type or it instruct the browser about
the version of HTML.
• <html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all other
elements of HTML except <!DOCTYPE>
• <head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be closed
before the body tag opens.
Continue..
• <title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside the
head tag and should close immediately. (Optional)
• <body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.
• <h1> : Text between <h1> tag describes the first level heading of the
webpage.
• <p> : Text between <p> tag describes the paragraph of the webpage.
HTML Layout
HTML Layout Definitions
Every website has a specific layout to display content in a specific
manner.
• <header>: It is used to define a header for a document or a section.

• <nav>: It is used to define a container for navigation links
• <section>: It is used to define a section in a document
• <article>: It is used to define an independent self-contained article
• <aside>: It is used to define content aside from the content (like a
sidebar)
• <footer>: It is used to define a footer for a document or a section
Brief History of HTML
• In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at
CERN, proposed a system for CERN researchers. In 1989, he wrote a
memo proposing an internet based hypertext system.
• Tim Berners-Lee is known as the father of HTML. The first available

description of HTML was a document called "HTML Tags" proposed by Tim
in late 1991. The latest version of HTML is HTML5, which we will learn later
in this tutorial.
HTML Versions
• Since the time HTML was invented there are lots of HTML versions in
market, the brief introduction about the HTML version is given below:
 HTML 1.0: The first version of HTML was 1.0 and it was released in1991.
 HTML 2.0: This was the next version which was released in 1995.
 HTML 3.2: HTML 3.2 version was published by W3C in early 1997.
 HTML 4.01: HTML 4.01 version was released on December 1999.
 HTML5 : HTML5 is the newest version of HyperText Markup language. The
first draft of this version was announced in January 2008.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with
the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
HTML text Editors
• An HTML file is a text file, so to create an HTML file we can use any text
editors.
• Text editors are the programs which allow editing in a written text, hence to
create a web page we need to write our code in some text editor.
• There are various types of text editors available which you can directly
download, but for a beginner, the best text editor is Notepad (Windows) or
TextEdit (Mac).
• After learning the basics, you can easily use other professional text editors
which are, Notepad++, Sublime Text, Visual Studio Code, etc.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
• Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.
• Attribute: An attribute in HTML provides extra information about the

element, and it is applied within the start tag. An HTML attribute contains
two fields: name & value.
Syntax: <tag name attribute_name= " attr_value"> content </ tag name>
Continue..
• Elements: An HTML element is an individual component of an HTML file. In an HTML file,
everything written within tags are termed as HTML elements.
HTML Tags List
• Unclosed HTML Tags {<br>, <hr>}
• HTML Meta Tags {DOCTYPE, title, link, meta and style}
• HTML Text Tags {<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>,
<abbr>, <acronym>, <address>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>, <dfn>}
• HTML Link Tags {<a>}
• HTML Image Tags {<img>}

Continue..
• HTML List Tags {<ul>, <ol>, <li>, <dl>, <dt> and <dd>}
• HTML Table Tags {table, tr, td, th, tbody, thead, tfoot, col, colgroup and
caption}
• HTML Form Tags {form, input, textarea, select, option, optgroup, button,
label, fieldset and legend}
• HTML Scripting Tags {script and noscript}

HTML Heading
• A HTML heading or HTML h tag can be defined as a title or a subtitle which
you want to display on the webpage. There are six different HTML headings
which are defined with the <h1> to <h6> tags, from highest level h1 (main
heading) to the least level h6 (least important heading).
1. <h1>Heading no. 1</h1>
HTML Paragraph
• HTML paragraph or HTML p tag is used to define a paragraph in a
webpage.
1. <p>This is first paragraph.</p>
2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>
HTML Phrase tag
• HTML phrase tags are special purpose tags, which defines the structural meaning of a block
of text or semantics of text. Following is the list of phrase tags
• Abbreviation tag : <abbr>

• Acronym tag: <acronym> (not supported in HTML5)
• Marked tag: <mark>
• Strong tag: <strong>
• Emphasized tag : <em>
• Definition tag: <dfn>
• Quoting tag: <blockquote>
• Short quote tag : <q>
• Code tag: <code>
• Keyboard tag: <kbd>
• Address tag: <address>
HTML Anchor
• HTML anchor tag defines a hyperlink that links one page to another page.
It can create hyperlink to other web page as well as files, location, or any
URL.
• The "href" attribute is the most important attribute of the HTML a tag. and
which links to destination page or URL.
Syntax: <a href = "..........."> Link Text </a>

Attributes of HTML img tag
• The src and alt are important attributes of HTML img tag. All attributes of
HTML image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It
instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words. The alt attribute is
considered good for SEO prospective.
Continue..
3) width
It is an optional attribute which is used to specify the width to display the image.
It is not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS
in place of height attribute.
Example:
<img src="animal.jpg" height="180" width="300" alt="animal image">
HTML Table
• HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
• We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
• In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
Tag Description <col> It is used with
<colgroup> element to
<table> It defines a table. specify column
properties for each
<tr> It defines a row in a column.
table.
<th> It defines a header cell <tbody> It is used to group the

in a table. body content in a
table.
<td> It defines a cell in a
table.
<thead> It is used to group the
<caption> It defines the table
header content in a
caption. table.
<colgroup> It specifies a group of <tfooter> It is used to group the

one or more columns in footer content in a
a table for formatting. table.
HTML Table Example
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or
more list elements.
There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default.
It is known as numbered list.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered
list then such type of list will called as nested list.
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</ol>
HTML List with Type & Start Point {ol}
<ol type="a"> <ol type="i"> <ol type="i" start="5">

<li>HTML</li> <li>HTML</li> <li>HTML</li>
<li>Java</li> <li>Java</li> <li>Java</li>
<li>JavaScript</li> <li>JavaScript</li> <li>JavaScript</li>
<li>SQL</li> <li>SQL</li> <li>SQL</li>

</ol> </ol> </ol>
HTML List with Type & Start Point {ul}
<ul type="circle"> <ul type="square"> <ul type="none">

<li>HTML</li> <li>HTML</li> <li>HTML</li>
<li>Java</li> <li>Java</li> <li>Java</li>
<li>JavaScript</li> <li>JavaScript</li> <li>JavaScript</li>
<li>SQL</li> <li>SQL</li> <li>SQL</li>

</ul> </ul> </ul>
HTML Video Tag
HTML 5 supports <video> tag also. The HTML video tag is used for
streaming video files such as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
 mp4
 webM
 ogg
HTML Video Tag Example
Let's see the code to play mp4 file using HTML video tag.
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
Let's see the example to play ogg file using HTML video tag.
<video controls>
<source src="movie.ogg" type="video/ogg">
</video>
Attributes of HTML Video Tag
Attribute Description
controls It defines the video controls which is
displayed with play/pause buttons.
height It is used to set the height of the video

player.
width It is used to set the width of the video
player.
poster It specifies the image which is
displayed on the screen when the video
is not played.
autoplay It specifies that the video will start
playing as soon as it is ready.
loop It specifies that the video file will start

over again, every time when it is
completed.
muted It is used to mute the video output.
preload It specifies the author view to upload

video file when the page loads.
src It specifies the source URL of the video

file.
HTML Video Tag Attribute Example
<video width="320" height="240" controls autoplay loop>

<source src="movie.mp4" type="video/mp4">
</video>
HTML Audio Tag
HTML audio tag is used to define sounds such as music and other audio clips.
Currently there are three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. Ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and
similar technologies are used to play the multimedia items.
Web Browser Supports
Browser mp3 wav ogg
Internet Explorer yes no no
Google Chrome yes yes yes
Mozilla Firefox yes* yes yes
Opera no yes yes
Apple Safari yes yes no

HTML Audio Tag Example
<audio controls>
<source src=“src_name" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
Attributes of HTML Audio Tag
controls It defines the audio controls which is
displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as

soon as it is ready.
loop It specifies that the audio file will start over

again, every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio

file when the page loads.
src It specifies the source URL of the audio file.

HTML SVG
• The HTML SVG is an acronym which stands for Scalable Vector Graphics.
• HTML SVG is a modularized language which is used to describe graphics in XML. It

describe two-dimensional vector and mixed vector/raster graphics in XML. It is a
W3C recommendation. SVG images and their behaviors are defined in XML text
files. So as XML files, you can create and edit an SVG image with text editor, but
generally drawing programs like inkspace are preferred to create it.
• SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs
in an X,Y coordinate system etc.
• The <svg> element specifies the root of a SVG fragment. You can animate every
element and every attribute in SVG files
HTML SVG Circle Example
• Example to draw circle by svg tag.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
• Example to draw rectangle by svg tag
<svg width="200" height="100">
<rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>
HTML Form
• An HTML form is a section of a document which contains controls
such as text fields, password fields, checkboxes, radio buttons,
submit button, menus etc.
• An HTML form facilitates the user to enter data that is to be sent to

the server for processing such as name, email address, password,
phone number, etc.
Why use HTML Form
• HTML forms are required if you want to collect some data from of the site
visitor.
• For example: If a user want to purchase some items on internet, he/she

must fill the form such as shipping address and credit/debit card details so
that item can be sent to the given address.
HTML Form Syntax
<form action="server url" method=“GET | POST">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form Tags
Tag Description
<form> It defines an HTML form to enter
inputs by the used side.
<input> It defines an input control.

<textarea> It defines a multi-line input control.
<label> It defines a label for an input

element.
<fieldset> It groups the related element in a
form.
<legend> It defines a caption for a <fieldset>
element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a

drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML <form> element
The HTML <form> element provide a document section to take input
from user. It provides various interactive controls for submitting
information to web server such as text field, text area, password field,
etc.
Syntax:
<form>
//Form elements
</form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.
Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
HTML Date
The date is the value of the type attribute of an <input> element. It
creates a calendar that allows a user to choose the date. The resulting
value includes the day, month, and year.
Syntax:
<input type="Date">
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as
single line textfield control. The name attribute is optional, but it is required for
the server side component such as JSP, ASP, PHP etc.
<form>

First Name:
<input type="text" name="firstname"/> <br/>
Last Name:
<input type="text" name="lastname"/> <br/>
</form>
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a
form. The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
Label Tag in Form
It is considered better to have label in form. As it makes the code
parser/browser/user friendly.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML Password Field Control
The password is not visible to the user in password field control.
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/
>
</form>
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email
address.
You must use @ and . in this field.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from multiple options. It is
used for selection of gender, quiz questions etc.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/
>Male
<input type="radio" id="gender" name="gender" value="female"/
>Female <br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Submit button control
HTML <input type="submit"> are used to add a submit button on web page.
When user clicks on submit button, then form get submit to the server.
<input type="submit" value="submit">
Example:
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
</form>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
</fieldset>
</form>
HTML STYLE USING CSS
Style Using CSS
• CSS is used to apply the style in the web page which is made up of
HTML elements. It describes the look of the webpage.
• CSS provides various style properties such as background color,

padding, margin, border-color, and many more, to style a webpage.
• Each property in CSS has a name-value pair, and each property is

separated by a semicolon (;).
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
• Inline CSS: Define CSS properties using style attribute in the HTML elements.
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.
• Internal or Embedded CSS: Define CSS using <style> tag in <head> section.

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML
document. To use Internal CSS, we can use class and id attributes.
• External CSS: Define all CSS property in a separate .css file, and then include the file with
HTML file using tag in section.

An external CSS contains a separate CSS file which only contains style code using the class name,
id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using
<link> tag.
Example:
<body style="text-align: center;">
<h2 style="color: red;">Welcome to html</h2>
<p style="color: blue; font-size: 25px; font-
style: italic ;">This is a great website to learn technologies in very simple
way. </p>
</body>
Class Attribute in HTML
• The HTML class attribute is used to specify a single or multiple class names
for an HTML element. The class name can be used by CSS and JavaScript
to do some tasks for HTML elements. You can use this class in CSS with a
specific class, write a period (.) character, followed by the name of the class
for selecting elements.
Syntax:
<tag class="ghf"> content </tag>
HTML Id Attribute
The id attribute is used to specify the unique ID for an element of the
HTML document. It allocates the unique identifier which is used by
the CSS and the JavaScript for performing certain tasks.
Syntax
<tag id="value">
HTML List Box
The list box is a graphical control element in the HTML document that
allows a user to select one or more options from the list of options.
Syntax:
<select Name="Name_of_list_box" Size="Number_of_options">
<option> List item 1 </option>
<option> List item N </option>
</select>
HTML Responsive
Responsive Web design
• Responsive web design is used to make your web page look appropriate,
good, and well placed on all devices (desktop, tablet, smartphone etc.)
• Responsive web design uses HTML and CSS to resize, hide, shrink,
enlarge, or move the content. It makes the content look good on any screen.
Syntax:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML Entities
HTML character entities are used as a replacement of reserved
characters in HTML. You can also replace characters that are not
present on your keyboard by entities.
These characters are replaced because some characters are reserved

in HTML. HTML entities provide a wide range of characters which can
allow you to add icons, geometric shapes, mathematical operators, etc.
Most used HTML Character Entities
Result Description Entity Name Entity Number
non-breaking space 160
< less than < 60

> greater than > 62
& ampersand & 38
" double quotation " 34
mark
' single quotation ' 39

mark (apostrophe)
Continue..
¢ cent ¢ 162
£ pound £ 163
¥ yen ¥ 165
€ Euro € 8364
© copyright © 169
® registered ® 174

trademark
HTML Marquee Attributes
• Marquee's element contains several attributes that are used to control and
adjust the appearance of the marquee.
behavior It facilitates user to set the behavior of the

marquee to one of the three different types:
scroll, slide and alternate.
direction defines direction for scrolling content. It may
be left, right, up and down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.

hspace defines horizontal space in pixels around
the marquee.
vspace defines vertical space in pixels around the
marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is

now deprecated.
Behavior Types
HTML Scroll Marquee
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...
</marquee>
HTML Slide Marquee
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
HTML Alternate Marquee
<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a alternate marquee...
</marquee>
Direction in HTML marquee
This is used to change the direction of scrolling text. Let's take an example of
marquee scrolling to the right. The direction can be left, right, up and down.
<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
<marquee width="100%" direction=“left">
This is an example of a right direction marquee...
</marquee>
HTML favicon
A favicon is a small file containing the one or more icons which are
used to represent the website or a blog.
It is also known as a tab icon, website icon, URL icon, or a bookmark
icon.
Syntax:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
HTML Canvas Tag
The HTML canvas element provides HTML a bitmapped surface to work with.
It is used to draw graphics on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language

like JavaScript.
The <canvas> element is only a container for graphics, you must need a
scripting language to draw the graphics. The <canvas> element allows for
dynamic and scriptable rendering of 2D shapes and bitmap images.
Syntax:
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>
HTML 5 Canvas Tag Example
<canvas id="myCanvas1" width="300" height="100" style="border:2px
solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>
END OF SLIDE

HTML Tut

Uploaded by

Copyright:

Available Formats

HTML Tut

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

HTML Tut

Uploaded by

Copyright:

Available Formats

HTML5 & CSS3

• HTML is an acronym which stands for Hyper Text Markup Language which is

• Markup language: A markup language is a computer language that is used to

• <header>: It is used to define a header for a document or a section.

• Tim Berners-Lee is known as the father of HTML. The first available

• Attribute: An attribute in HTML provides extra information about the

• HTML Meta Tags {DOCTYPE, title, link, meta and style}

• HTML Link Tags {<a>}

• HTML Image Tags {<img>}

• HTML Scripting Tags {script and noscript}

• Abbreviation tag : <abbr>

Syntax: <a href = "..........."> Link Text </a>

<th> It defines a header cell <tbody> It is used to group the

<colgroup> It specifies a group of <tfooter> It is used to group the

1. Ordered List or Numbered List (ol)

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

height It is used to set the height of the video

loop It specifies that the video file will start

muted It is used to mute the video output.

preload It specifies the author view to upload

src It specifies the source URL of the video

Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes* yes yes

Opera no yes yes

Apple Safari yes yes no

autoplay It specifies that the audio will start playing as

loop It specifies that the audio file will start over

muted It is used to mute the audio output.

preload It specifies the author view to upload audio

src It specifies the source URL of the audio file.

• HTML SVG is a modularized language which is used to describe graphics in XML. It

• Example to draw rectangle by svg tag

• An HTML form facilitates the user to enter data that is to be sent to

• For example: If a user want to purchase some items on internet, he/she

<input> It defines an input control.

<label> It defines a label for an input

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

• CSS provides various style properties such as background color,

• Each property in CSS has a name-value pair, and each property is

• Internal or Embedded CSS: Define CSS using <style> tag in <head> section.

HTML file using tag in section.

These characters are replaced because some characters are reserved

non-breaking space &nbsp; 160

< less than &lt; 60

' single quotation &apos; 39

¢ cent &cent; 162

£ pound &pound; 163

¥ yen &yen; 165

€ Euro &euro; 8364

© copyright &copy; 169

® registered &reg; 174

behavior It facilitates user to set the behavior of the

width defines width of marquee in pixels or %.

height defines height of marquee in pixels or %.

non-breaking space 160

< less than < 60

' single quotation ' 39

¢ cent ¢ 162

£ pound £ 163

¥ yen ¥ 165

€ Euro € 8364

© copyright © 169

® registered ® 174