Introduction to HTML5 & CSS3
INTERNAL
03 Jan 2019
What is HTML5
HTML5 is the latest version of Hypertext Markup Language, the code that describes web
pages. It's actually three kinds of code:
⚫ HTML, which provides the structure;
⚫ Cascading Style Sheets (CSS), which take care of presentation
⚫ JavaScript, which makes things happen.
HTML5 has been designed to deliver almost everything you'd want
to do online without requiring additional software such as browser
plugins.
Document Name
-2- CONFIDENTIA L
HTML & HTML5
HTML HTML5
Older version of HTML are less mobile- HTML5 language is more mobile-friendly.
friendly.
Doctype declaration is too long and Doctype declaration is quite simple and
complicated. easy.
Elements like nav, header were not present. New element for web structure like nav,
header, footer etc.
Character encoding is long and complicated. Character encoding is simple and easy.
It is almost impossible to get true One can track the GeoLocation of a user
GeoLocation of user with the help of easily by using JS GeoLocation API.
browser.
It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.
Attributes like charset, async and ping are Attributes of charset, async and ping are a
absent in HTML. part of HTML 5.
Document Name
-3- CONFIDENTIA L
HTML5 Elements
New Elements introduced in HTML5 are:
1) Semantic elements : A semantic element clearly describes its meaning to both the
browser and the developer.
<header>, <footer>, <article>, and <section>.
2) Form elements
number, date, time, calendar, and range.
3) Graphic elements
<svg> and <canvas>.
4) Multimedia elements:
<audio> and <video>.
Document Name
-4- CONFIDENTIA L
HTML5 Semantic Elements
Different Semantic Elements introduced in HTML5 are:
⚫ <article>
The HTML <article> element represents a self-contained composition in a document,
page, application, or site, which is intended to be independently distributable or
reusable. Examples include: a forum post, a magazine or newspaper article, or a blog
entry.
<article class="forecast">
<h1>Film Review</h1>
<article class="day-forecast">
<h2>Spider Man</h2>
<p>Good.</p>
</article>
<article class="day-forecast">
<h2>Men in Black</h2>
<p>Super</p>
</article>
<article class="day-forecast">
<h2>License to Kill</h2>
<p>Poor.</p>
</article>
</article>
Document Name
-5- CONFIDENTIA L
HTML5 Semantic Elements
<aside>
The <aside> element is used to identify content that is related to the primary content of
the webpage, but does not constitute the primary content of the page. Author
information, related links, related content, and advertisements are exampes of content
that may be found in an aside element.
<body>
<h1>HTML5 Tutorials</h1>
<p>The option of using pure HTML, sometimes with a touch of CSS, to
complement JavaScript form validation was until recently unthinkable.
Sure there have been all kinds of whacky plug-ins over the years aimed at
achieving this, but never a single standard that we could work
towards.</p>
<p>[...]</p>
<aside>
<h1>HTML5 Quick Links</h1>
<ul>
<li>https://www.the-art-of-web.com/</li>
<li>https://www.tutorialrepublic.com/</li>
<li>https://www.w3schools.com/</li>
</ul>
</aside>
</body>
Document Name
-6- CONFIDENTIA L
HTML5 Semantic Elements
<header> <main> <footer><section>
The <main> tag surrounds the main content of the page - content that is unique to that
document and is obviously the "main" content for that page. This excludes any content
that is repeated across multiple pages (such as navigation bars, headers, footers, etc).
An HTML document can have a maximum of one <main> element. It must not appear
within the <article>, <aside>, <footer>, <header> or <nav> tags.
Headers can contain headings, subheadings, version information, navigational
controls, etc.
Footers usually contain information such as the author of the document, copyright
information, links to terms of use, privacy policy, etc.
The HTML <section> tag is used to represent a section within an article. Any given
web page or article could have many sections. For example, a homepage could have a
section for introducing the company, another section for news items, and another
section for contact information.
Document Name
-7- CONFIDENTIA L
HTML5 Semantic Elements
<dialog>
The HTML <dialog> tag indicates a part of an application that the user can interact with.
Examples of dialog could include a dialog box, inspector, or window.
The <dialog> element accepts a boolean attribute called open that sets the element to
"active" and allows users to interact with it.
<div>
<dialog id="myFirstDialog" style="width:50%;background-
color:#F4FFEF;border:1px dotted black;">
<p><q>The HTML <b>dialog</b> tag indicates a part of an application that the
user can interact with. Examples of dialog could include a dialog
box</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})(); Document Name
</script>
-8- CONFIDENTIA L
HTML5 Semantic Elements
<nav>
The <nav> tag defines a set of navigation links. We can control the display of the
navigation area using css.
⚫ It is not necessary to place all the links within a <nav> element. It is intended for
major block of navigation links.
⚫ The <nav> element is typically a replacement for the <div class="nav"> statement,
frequently used in HTML.
⚫ Not supported in below IE8
<nav>
<a href="home.html">Home</a> |
<a href="contact.html">Contact Us</a> |
<a href="about.html">About</a> |
<a href="login.html">Login</a>
</nav>
Document Name
-9- CONFIDENTIA L
HTML5 Semantic Elements
<!DOCTYPE html>
<html>
<body>
<header align="center"><h1>Introduction to HTML5</h1></header>
<nav align="center"><a href="">Home</a> | <a href="">Sign in</a> | <a
href="">Contact Us</a> | <a href="">Library</a></nav>
<main>
<h2>Learning</h2>
<p>Learn to gain experience and try to share your knowledge with
others.</p>
<article>
<h3>Web Development Tutorials</h3>
<p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester
exams.</p>
</article>
<article>
<h3>Academic Tutorials</h3>
<p>Consist of Computer Fundamental, Computer Network
tutorials for
1st Semester exams.</p>
</article>
</main>
<footer>© All rights reserved to TCS 2018-19.</footer>
</body>
</html>
- 10 Document Name
- CONFIDENTIA L
HTML5 Graphic Elements
<CANVAS>
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. Using JavaScript we can
actually draw the graphics. Canvas has several methods for drawing paths,
boxes, circles, text, and adding images.
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
- 11 Document Name
- CONFIDENTIA L
HTML5 Graphic Elements
<SVG>
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics
and graphical applications in XML and the XML is then rendered by an SVG viewer.
⚫ SVG stands for Scalable Vector Graphics
⚫ SVG is used to define vector-based graphics for the Web
⚫ SVG defines the graphics in XML format
⚫ Every element and every attribute in SVG files can be animated
⚫ SVG is a W3C recommendation
⚫ SVG integrates with other W3C standards such as the DOM and XSL
<body>
<h2 align = "center">HTML5 SVG Star</h2>
<svg id = "svgelem" height = "200" xmlns =
"http://www.w3.org/2000/svg">
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill
= "red"/>
</svg>
</body>
- 12 Document Name
- CONFIDENTIA L
HTML5 Multimedia Elements
<VIDEO>
Before HTML5, a video could only be played in a browser with a plug-in (like flash). The
HTML5 <video> element specifies a standard way to embed a video in a web page.
⚫ The controls attribute adds video controls, like play, pause, and volume.
⚫ Able to set the width and height attributes for playing screen.
⚫ The <source> element use to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
⚫ To start a video automatically use the autoplay attribute:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
- 13 Document Name
- CONFIDENTIA L
HTML 5 Form validation
The simplest change you can make to your forms is to mark a text input field as 'required':
Your Name: <input type="text" name="name" required>
In HTML5 we are getting interesting and more useful text input type, which includes;
⚫ INPUT type="email"
By using the input type to email the browser can be used to validate email addresses:
Email Address: <input type="email" name="email" required
placeholder="Enter your email address">
⚫ INPUT type="url"
This one is designed to accept only properly-formatted URLs. We can improve it's behaviour
using the pattern attribute.
Website: <input type="url" name="website" required>
Website: <input type="url" name="website" required
pattern="https?://.+">
- 14 Document Name
- CONFIDENTIA L
HTML 5 Form validation
⚫ INPUT type="number" and type="range"
The number and range input types also accept parameters for min, max and step. In most
cases you can leave out step as it defaults to 1.
Age: <input type="number" size="6" name="age" min="18" max="99"
value="21"><br>
Rating: <input type="range" size="2" name="rating" min="1" max="5"
value="3">
Depending on the browser, the look and feel may varies for these two components.
⚫ INPUT type="date"
This will popup a calendar to input the date.
DOJ: <input type="date" name="doj">
⚫ INPUT type="color"
This will help the user to select a hex-code from a colour wheel.
Color Code: <input type="color" name="myColor">
- 15 Document Name
- CONFIDENTIA L
CSS3 - Rounded Corners
CSS3 Rounded corners are used to add special colored corner to body or text
by using the border-radius property. A simple syntax of rounded corners is as
follows
#rcorner17
{
border-radius:
60px/15px;
background: #FF0000;
padding: 20px; width:
200px; height: 150px;
}
<p id="rcorners1">Rounded corners!</p>
- 16 Document Name
- CONFIDENTIA L
CSS3 - Border image
CSS Border image property is used to add image boarder to some elements. we
don't need to use any HTML code to call boarder image. A sample syntax of
boarder image is as follows;
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
</style>
</head>
<body>
<p id="borderimg1">This is image boarder
example.</p>
</body>
</html>
- 17 Document Name
- CONFIDENTIA L
CSS3 - Colors
CSS3 has Supported additional color properties as follows
RGBA colors (RGB + Alpha)
HSL colors (hue, saturation, lightness)
HSLA colors (hue, saturation, lightness and alpha)
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id="p1">Hello World</p>
</body>
</html>
- 18 Document Name
- CONFIDENTIA L
CSS3 - Shadow
CSS3 supported to add shadow to text or elements. Shadow property has
divided as follows;
•Text shadow
•Box Shadow
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
</body>
</html>
- 19 Document Name
- CONFIDENTIA L
CSS3 - Opacity
This property makes can make elements more see-through. You could go about setting the
opacity of an image in an image editor, and then save it as a .png or .gif file with
transparency enabled. Or you could just write one line of code in CSS. It’s up to you. The
transparency value ranges from 0 (completely see-through) to 1 (completely solid).
<style>
.example_opacity
{
opacity:0.2;
}
</style>
<img class="example_opacity"
src="https://www.google.com/images/srpr/logo3w.png" / >
- 20 Document Name
- CONFIDENTIA L
Happy Learning !
