Introduction to HTML5 Tutorial

HTML5 is the latest and upgraded version of HTML. HTML is a hypertext markup language. Technically, it is not a programming language. It is a markup language.

HTML provides some brand new feature which will make it much easier. These new features make website layout clearer to website designer and users both. These elements are as <header>, <footer>, <nav>, <article> etc. When a web browser displays a web page, it reads and interprets an HTML document. This document could be short (10 lines) or long (several hundred), the browser does not care. Its work is to read your document. HTML adds semantic to your content; this means the web browser understands the type of content you have put up on your web page.

Anything else you had learnt about HTML remains same when it comes to HTML5.

Why HTML5?

Advantages  of HTML5

  • HTML5 is enriched with some advanced features which make it interactive and easy for user and designer both.
  • It has improved the accessibility of websites.
  • Cleaner code is one of the significant improvements in this new version.
  • Mobile optimization is also a significant advantage of this upgraded version. HTML5 is the most mobile-ready tool and allow you to build websites and app for various mobile devices.
  • It allows the user to play a video and an audio file.
  • It supports all major browsers in the world including chrome, IE, Firefox, opera, etc., and even supports their legacy versions.
  • API allows you to detect the location of a user and cater content which is specific to them.
  • It allows drawing on canvas.
  • It facilitates us to design better forms and build web applications that work offline.

Structure of HTML5

Before starting with HTML, it is essential to understand the structure of HTML.

As HTML is a markup language so, it is used to mark the different parts of your content.

  • HTML starts with an opening tag.
  • HTML ends with closing tag.
  • A tag starts like a < and ends with a > symbol.
  • The letters between < and > are abbreviations.
  • The content between the start tag and the end tag is everything.
  • Some elements are empty in HTML.
  • Empty elements are closed at the start tag.

New in HTML5

The DOCTYPE declaration-

The DOCTYPE declaration for HTML5 is quite simple-

The character encoding-

The charset declaration is also very simple-

Example-

New elements

HTML5 is upgraded with some advance element like <header>, <footer>, <article>, and <sections>. New attribute of form elements like number, date, time, calendar and range.

Some new graphic elements are <svg>, <canvas>.

Some new multimedia elements are <audio> and <video>.

Following table contains some new elements-

TAG DESCRIPTION
<article> It defines an article in a document.
<aside> It defines contents from the page.
<bdi> It isolates a part of text that might be formatted in a different direction from other text outside it.
<details> It defines additional details that the user can view or hide.
<dialog> It defines a dialog box.
<figure> It defines the self contained content.
<footer> It defines a footer for document.
<header> It defines a header for a document.
<main> It defines the main content of a document.
<mark> It defines highlighted text.
<meter> It defines a scalar measurement within a known range.
<nav> It defines navigation links.
<progress> It represents the task progress.
<rp> It defines what to show in browsers that do not support ruby annotation.
<rt> It defines an explanation of characters.
<section> It defines a section in a document.
<summary> It defines a visible heading for a <detail> element.
<time> It defines a date/time
<wbr> It defines a possible line break.

New API’s (application programming interfaces)

New API’s in HTML5 are

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

 Removed elements in HTML5

In HTML5, some elements are removed and some are replaced. List of such elements are as following-

REMOVED ELEMENT REPLACED BY
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>,or <del>
<tt> CSS

HTML5 first example

Output:

First paragraph

HTML5 Coding Convention

  • Always use a consistent CSS while writing HTML. It makes the code simpler and more understandable for people.
  • You should declare document type at the beginning of the code.

Example-

  • Use lower case element because lower case is easy to write and looks neat and clean. Developers mainly use lower case letters.

Example-

  • It is recommended to close all HTML elements.
  • It is not mandatory to close empty HTML tags; you can close it or let it be.
  • HTML allows you to omit and tag; you can exclude both tags, and the program will work well enough.

The DOCTYPE in HTML5

All browsers read a document in two different ways – standard mode and quirks mode. If you don’t tell the type of document, they will go in quirks mode. Declaring a doctype forces the browser to go into standard mode.

You should follow the below points for the browsers’ better readability of HTML code:

  • Use the tag <head> to separate the information about your page.
  • Use the tag <body> to separate the actual content of your web page.
  • Using the HTML tag is a matter of style, but it makes the structure of the page clearer to you.

Block and Inline elements

There are two different types of element in HTML5 coding:

  • Inline elements
  • Block elements

Elements affect browser according to its type. A block statement is rendered as its name, as an actual block. The block elements are wide. Block-elements may contain inline elements and other block elements itself.

The inline elements are treated as part of the flow of the document. Its size should not be changed normally. The inline elements are the only elements that may be contained within a paragraph element even though the paragraph element <p> is a block statement and <b> is an inline-statement.

Attributes

Many HTML5 elements can have attributes. The attribute provides additional information about the specific element. Attributes always specified in the opening tag. The pattern of writing attributes is attribute=”value.” The value of the attribute is always surrounded by “.”

Example- You want to create a link. The <a> tag specifies the link element, and the destination address is specified in the href attribute.

In given example the link element consists of the opening tag <a> and the closing tag </a>.  Inside the opening tag there is an attribute “href”. The href attribute always has a value.

Headings

Headings are defined with tag <h1> to <h6>. < h1> being the first and important heading.

Example-

Headings are important as web browser interprets the heading as the structure of web page. Bold and large texts are not considered as headings. Headings also increase the readability of the page.

Headings should be in following manner-

  1. Introduction
  2. Second level headings
  3. Third level headings

Example-

HTML Anchor Tag <a>

Anchor tag defines a hyperlink that redirects user one page to another page. It can create hyperlink for other web pages, files, location or any URL. We use “href” attribute for linking the destination page with URL. Address of the file or page is defined by “href” attribute.

Syntax-

Ex- < a href=” first.html”> click for second page </a>

Specify a location for link-

We want to open link to another page, then we will use target attribute of <a> tag.

Example-

HTML Google Maps

You can simply add a map on your page.

Syntax-

Set the map size-

You can set the map size by the following syntax-

HTML audio Tag <audio>

HTML audio tag is used to define sounds such as audio clips and music. HTML5 supports three types of audio format.

  1. Mp3
  2. Wav
  3. ogg

For playing the multimedia item, we use various techniques like a flash, Silverlight, etc. HTML5 supports <video> and <audio> tags for audio and video control.

Following table defines that which format supported by which browser.

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

Example –

HTML Video Tag <video>

HTML5 supports <video> tag also. The HTML video tag is used for streaming video files such as movie clip on the web page.

HTML5 supports the following three video formats.

  1. Mp4
  2. webM
  3. ogg
BROWSER mp4 webM Ogg
Internet Explorer Yes No No
Google Chrome Yes Yes Yes
Mozilla Firefox Yes Yes Yes
Opera No Yes Yes
Apple Safari Yes No No

Example-

HTML5 – SVG

SVG stands for Scalable Vector Graphics. It is a tool (language) for describing 2D-graphics and graphical application in XML. These applications rendered by a SVG viewer.  Mostly SVG is used for vector type diagrams like pie chart, 2D graphs in an X, Y coordinate system etc.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>…..</svg> tag.

Syntax-

Example-

Output-

HTML5 SVG

 

Introduction to CSS3 Tutorial

CSS (Cascading Style Sheet) is the key language used to describe look and formatting for web pages. CSS was introduced in 1996 by the W3C (World Wide Web Consortium). W3C maintains its standard. It was designed to enable the separation of presentation and content. It is used to design HTML tags. CSS is widely used language on the web.

  • CSS is the primary presentation technology used in website design
  • CSS stands for Cascading Style Sheet
  • It is used to design HTML tags
  • We can change the look of our website by only a few changes in CSS code.

Example-

Advantages of CSS3

CSS is a web design tool used to control the layout of the web page while HTML deals with the actual content. CSS has gone through many enhancements over the years, and the latest version is CSS3.

Some benefits of CSS3 are as follows-

Consistency: It solves a big problem. Before CSS, tags like font, background style, color, border, and size had to be repeated on every web page. This process was very long. By making one change to your website’s CSS style sheet; you can automatically make it to every page of your website.

Time-saving: It saves a lot of time.

Provides more attribute: CSS provides more attribute than plain HTML. So, it enhances the look and feel of the website.

Search engines: CSS is considered a clean coding technique that means search engines read its content easily.

Browser compatibility: Today’s internet user has more browser option than ever before. Browser compatibility is a major issue for your website. CSS style sheet increases the adaptability of your website.

Transformation: We can quickly transform elements like scale, rotate, skew, etc. in 2D or 3D shape. We can create animation and transition effects without using JavaScript.

There are many other exciting things that you can do with CSS.

Getting started with CSS

Let’s see how easy it is to add style and formatting using CSS.

Prerequisites-

Getting started with CSS, one should be familiar with-

  • Basic word processing with any text editor
  • Creating directories and files
  • Simple web page development using HTML or XHTML.

If you haven’t seen our HTML tutorial, then we suggest you go through our HTML tutorial.

Including CSS in HTML Documents

There are three ways for including CSS in HTML documents-

  • Inline styles
  • Embedded styles
  • External style sheet

Inline Styles

Inline styles are used to apply the unique styles rules to an element by putting the CSS rules.  We use these rules into the start tag.  We attach style attribute along with an element for implementing the CSS rules. We use the <style> tag in the <head> tag of a document.

The style attribute contains many CSS properties and value pairs. A semicolon separates each pair of property and value pair (;) like “property: value;.”

Example-

Inline styles are generally considered as a bad practice because of style rules are embedded directly inside the HTML tag. So it causes the presentation to be mixed with the content of the document.

Styling pseudo-elements and classes with inline styles are impossible. Therefore you should avoid the use of style attribute in your code.

Embedded style sheets

Embedded style sheets are also called as internal style sheets. These sheets only affect the document they are embedded in. these sheets are defined in the <head> section of an HTML document using the <style>.

You can define any number of <style> elements in a HTML document but they must appear within a <head> tag.

External Style Sheets

It is an ideal style sheet for applying style on many pages.  We write all the CSS code in a CSS file and save this file with.css extension. An external sheet holds all the style formats in a separate file that you can link from an HTML file on your site.

You can change the look of many pages of the website by changing just one file.

An external style sheet can be attached in two ways-

  • Linking
  • Importing

Linking external sheet –

For linking a style sheet, you must create a file. Save your desired style sheet with a .css extension.

Example-

An external style sheet can be linked an HTML document using tag <link>. The tag <link> always is inside the <head> section.

Using external style sheets is the best method for defining and applying styles to the HTML documents. By the external style sheets, the affected HTML file require minimal changes in the markup.

Importing External style sheets-

The @import method is another way of loading an external style sheet. It instructs the web browser to load an external sheet and use its styles.

There are two ways of using @import.

First and the simplest way is within the Header of the document. Since other rules, CSS rules may still be included in the <style> tag.

Example-

Similarly, we can use the @import method to import a style sheet within another style sheet.

All @import rules should be at the start of the sheet. Any style rule defined in style sheet itself. Importing a style sheet within another style sheet is not recommended because it creates a performance issue.

CSS syntax

CSS Syntax

Selectors are used to declaring the markup tag. It could be any tag like <title>, <head>, etc.

The DECLARATION BLOCK can contain single or many declarations each declaration should be separated by a semicolon. For the above example, there are two declarations. Each declaration contains a property name and value. They are separated by a colon (:).

A PROPERTY is an attribute of HTML element. It could be color, text-align, border, etc.

VALUES are assigned to CSS properties. In the above example, value ‘red’ is assigned to the color property.

CSS selectors

CSS selectors are used to selecting the desired content for style. The selector is a part of the CSS rule set.  It is a pattern to match the elements in an HTML document.

There are several types of Selectors like-

  • CSS Element Selector
  • CSS Id Selector
  • CSS Class Selector
  • CSS Universal Selector
  • CSS Group Selector

CSS Element Selector-

This selector matches every instance of the element in the document tree.

The style rules Inside the p selectors will be applied on every <p> element in the document and color it red, regardless of their position in the document tree.

CSS Id Selectors-

The id selector is defined by a hash (#) sign followed by the id value. It is used to define style rules for a single or unique element. It selects the id attribute of an HTML element to select a specific element.

This style rule set color red and font-size 15px for the id attributes para1.

CSS class selector-

The class selector is used to the selects HTML element with class attributes. All the elements that have class will be formatted according to the defined rule. It is used with a dot (.) symbol.

The above style rules render the text in blue of every element for the document that has a class attribute set to blue.

You can make it bit more particular like-

The style color:red inside the selector p.blue renders the text blue of only for those <p> elements that have the class attribute set to blue.

CSS Universal Selector-

It selects all the elements of the page. The universal selector, written as *, i.e. star symbol. It matches every single element on the page. It is used as a wild card character.

e.g.-

CSS Group Selector-

It is used to select all the elements with the same style definitions. It is used to minimize the code. We use commas for separating each selector in the grouping. It also prevents you from repeating the same style of rule.

e.g.-

New features in CSS3

  1. CSS3 Selectors-

Selectors are the heart of CSS. With CSS3, we can target any element on the page with a wide range of selectors.

CSS3 expands its list of selectors, and it comes with three more attribute selectors than CSS2; they allow for substring selectors.

  1. E[attr^=val]

Example:    

The val matches the beginning of the attribute value.

  1. E[attr$=val]

Example:

The val matches the end of the attribute value.

  1. E[attr*=val]

Example: 

It matches val anywhere within the attribute; it is similar to E[attr ~=val] the only difference is that the val can be part of the word.

2. Pseudo-classes

We are already familiar with some of the user interaction pseudo-classes,namely: link, :visited, :hover, :active, etc.

CSS3 comes with few more pseudo-class selectors. One is the :root selector. :root selector allows a designer to point to the root element of a document . for HTML it would be <html>. Since: root is generic. It allows the designer to select the root element of an XML document without necessarily knowing its name.

As a compliment to the: first-child, the: last-child was added to CSS3; with it, one can select the last element named of the parent element.

The: target selector is a new user interaction that the pseudo-class selector was added.

3. CSS3 colors-

CSS3 comes with some exciting and new ways of describing colors. Before CSS3, we almost always declared colors using the hexadecimal format. We had also declared colors using the RGB(  notation, providing integers(0-255).

The color keyword list has been extended in CSS# color module. One hundred forty-seven additional keyword colors (that are generally supported) have added.  CSS3 provides other option like HSL, HSLA, and RGBA. The most exciting feature with these new color types is the ability to declare semitransparent colors.

4. Rounded Corners: border-radius

The border-radius facilitates you to create rounded corners without the need for images or additional markup. We could declare up to four unique values.

5. Drop Shadows-

CSS3 facilitates to add drop shadows to element using the box-shadow property. By this property we specify the color, height, width, blur, etc.

Pin It on Pinterest

Share This