Quick Reference Study Notes for HTML 5 (Advanced)

HTML 5

 

 

1) Introduction: HTML 5 is the major revision of HTML. It is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).  It supports the latest browsers like Apple Safari, Google Chrome, Mozilla Firefox, Opera, etc. It also supports mobile browsers. It is enriched with advanced features:

  • It allows you to play a video and audio file.

  • It allows you to draw on a canvas.

  • It provides facilities to create forms in a better way.

  • It allows us to build web applications and these applications can work offline.

  • It provides you advanced features that you would normally have to write JavaScript to do.

  • HTML is capable of handling incorrect syntax.

  • You can store large amounts of data locally without affecting site performance.

 

a) Difference between HTML and HTML 5:

 

HTML

HTML5

HTML Doctype declaration is lengthy.

DOCTYPE declaration in HTML5 is simple.

HTML Character encoding is longer.

HTML5 Character encoding declaration is simple.

HTML does not support audio and video formats.

HTML5 supports audio and video formats.

Technologies like Silverlight, Flash, VML, etc are used to draw vectors in HTML.

Vector graphics are a part of HTML5, e.g., canvas, SVG.

It is not possible to get the actual Geolocation of a person browsing any website.

It is possible to identify the location of the user browsing any website by using JS Geolocation API in HTML5. 

HTML offers local storage instead of cookies.

Html5 uses cookies to store data.

In HTML, it is not possible to draw basic shapes.

In Html5, it is possible to draw basic shapes.

You can use HTML with all old browsers.

You can use HTML5 with all new browsers.

You can use the browser cache as temporary storage.

You can use the application cache as temporary storage.

HTML is less mobile-friendly.

HTML5 is mobile-friendly.

HTML does not allow drag and drop effects.

HTML5 allows drag and drop effects.

 

b) HTML5 Syntax: The following tags have been introduced for a better structure:

 

<!DOCTYPE html>    <!-- It is Case-Sensitive -->  

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Hello!</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is a simple paragraph.</p>

</body>

</html>

 

Tag

Description

<!DOCTYPE> 

It defines the HTML version to be used. In this case, it is HTML5.

<html>

This tag is used to open the page. No markup should come after the closing tag (</html>). The lang attribute declares the primary language of the page using the ISO language codes (en for English).

<head>

This tag opens the head section. This tag does not appear in the main browser window but it mainly contains the information about the HTML document, called metadata. It can also contain imports from external stylesheets and scripts. The closing tag is </head>.

<meta>

Gives the browser some metadata about the document. The charset attribute declares the character encoding. Modern HTML documents should always use UTF-8, even though it is not a requirement. In

HTML, the <meta> tag does not require a closing tag.

<title> 

The title of the page. Text written between these opening and the closing tags (</title>) will be displayed on the tab of the page or in the title bar of the browser.

<body> 

Opens the part of the document displayed to users, i.e. all the visible or audible content of a page. No content should be added after the closing tag </body>.

 

c) Basic tags in HTML5:

 

Tag 

Description

<h1>----</h1>

<h2>----</h2>

<h3>----</h3>

<h4>----</h4>

<h5>----</h5>

<h6>----</h6>

<h1> defines the most important heading.

<h6> defines the least important heading.

<p>----</p>

Defines a paragraph

<br> 

Inserts a single line break

<pre> 

Defines pre-formatted text

<strong> or <b>

To bold text

<i>

Italic Text

<u>

Underlined Text

<mark>

Mark or highlight text in a document

<small>

Displays text in a smaller size.

<q>

Defines a short inline quotation.

<abbr>

To mark some text as abbreviation

<ins>

To mark text as inserted

<del>

To mark text as deleted

<s>

To strike through text

<sup>

To offset text upward

<sub>

To offset text downward

<a href="http://example.com/">Link to example.com</a>

It creates a Hyperlink

Link to a page on the same site:

<a href="/example">Text Here</a>

You can use a relative path to link to pages on the same website.

<a href="mailto:example@example.com">Send email</a>

A link that runs email clients.

<ol>

Ordered List. You can use start and value attributes in this tag.

<ul>

Unordered List. You can use start and value attributes in this tag.

<li>

List items in an ordered and unordered list

<dl>

Description List. It consists of the names of elements and their values. Names are given in <dt> element and values are given in <dd> element.

<table>

It displays tabular data. It includes <tr> element to define table rows, <th> shows table heading and <td> element for table data.

colspan and rowspan

These are the attributes of a <table> tag.

rowspan is a non-negative integer that specifies the number of rows spanned by a cell.

colspan is a non-negative integer that specifies the number of columns spanned by a cell.

<thead>

This tag is used for adding a header to a table. 

<tfoot>

This tag is used to create a table footer in HTML.

<colgroup>

This an optional tag. It allows you to group columns together. It must be the child of <table> tag. Specifies that the cell is a header for a group of columns

<rowgroup>

Specifies that the cell is a header for a group of rows.

row

Specifies that the cell is a header for a row

col

Specifies that the cell is a header for a column.

<!--Comment Section -->

If you want to leave the notes. It can be written in a comment Section.

<address> 

Specifies the author’s contact information

<area>

Defines a specific area within an image map.

<base>

Defines the base URL for all relative URLs in a document.

<button>

Creates a clickable button.

<caption>

Defines the caption or title of the table.

<cite>

Indicates a citation or reference to another source.

<code>

Specifies text as computer code.

<div>

Specifies a division or a section in a document.

<em>

Specifies an Emphasized text.

<form>

Defines an HTML form for user input.

<iframe>

Displays a URL in an inline frame.

<img> .

Represents an image

<input>

Defines an input control.

<ins>

Defines a block of text that has been inserted into a document.

<kbd>

Specifies text as keyboard input.

<var>

Defines a variable.

<style>

Inserts style information (commonly CSS) into the head of a document.

<object>

Defines an embedded object.

<menu>

Represents a list of commands.

 

2) Classes and IDs: 

 

Class

ID

Class indicates the class of elements.

ID indicates the identity of an element. 

The class can be applied to multiple elements so it could be multiple times on a single page and multiple elements can be assigned to a single class.

ID is unique on a page and can only apply to at most one element.

The class attribute is used by CSS for styling. 

IDs are generally used with JavaScript and Internal document links.

The class name starts with “.” followed by the class name.

ID name starts with # followed by ID name.

 

a) Giving an element a class: Classes are identifiers for the elements that they are assigned to.

 i) Use the class attribute to assign a class to an element.

<div class="example-class"></div>

ii) To assign multiple classes to an element, separate the class names with spaces.

<div class="class1 class2"></div>

iii) Classes of the same name can be assigned to multiple elements.

For example, we have two elements, both with the class city:

<div class="city">Delhi</div>

<span class="city">Mumbai</span>

iv) You can apply the attributes to the class elements.

.city { color: red; }

v) If you want to apply specific attributes to an individual element you can specify this too.

div.city { color: red; }

vi) As with any other selector, classes can can be nested:

.main .city { color: red; }

 

b) Giving an element an ID: The ID attribute of an element must be unique in the complete document. 

<div id="example-simple"></div>

i) You should not have two elements with the same id. The following code is incorrect.

<div id="example-simple">Delhi</div>

<span id="example-simple">Mumbai</span>

ii) To reference elements by their ID in CSS, prefix the ID with #.

#example-simple { color: red; }

iii) The only restrictions on the value of an id are:

  • It must be unique in the document

  • It must not contain any spaces.

  • It must contain at least one character

  • An id value must begin with a letter, which can then be followed only by:

I.    letters (A-Z/a-z)

II.  digits (0-9)

III. hyphens ("-")

IV. underscores ("_")

V.   colons (":")

VI. periods (".")

For Example

<!DOCTYPE html>

<html>

<head>

<style>

.rainfall {

  background-color: gray;

  color: white;

  border: 3px solid black;

  margin: 30px;

  padding: 30px;

}

#myHeader {

  background-color: lightblue;

  color: black;

   border: 3px solid black;

   margin: 30px;

   padding: 30px;

  text-align: center;

}

 

</style>

</head>

<body>

<h1 id="myHeader">Types of Rainfall</h1>

 

<div class="rainfall">

  <h2>Relief rainfall</h2>

  <p>Relief rainfall occurs when air has been blown over the sea and is then forced up over an area of high land. This causes the air to cool and the moisture in the air condenses and rain falls.</p>

</div>

 

<div class="rainfall">

  <h2>Frontal rainfall</h2>

  <p>Frontal rainfall occurs when warm air is forced to rise over cold air. The moisture in the warm air condenses as it cools which causes clouds and rain.</p>

</div>

 

<div class="rainfall">

  <h2>Convectional rainfall</h2>

  <p>Occurs mostly in tropics where it is hot. When air is hot is rises and cools and condenses forming rain. If the air is hot enough, it rises very quickly and can cause thunderstorms.</p>

</div>

 

</style>

</head>

</body>

</html>

 

3) Important tags in HTML5:

a) data-: It provides a convenient way to add data into the elements. The stored data can be read or modified using JavaScript. 

<div data-submitted="yes" class="user_data">

… some content …

</div>

b) script tag: The HTML <script> tag declares client-side script (JavaScript) in an HTML document. 

i) When defining a client-side script the script tag is used for image manipulation, form validation, and dynamic changes of content. 

ii) This tag contains the links to external files also. The path to the external file is specified with src attribute.

iii) <script> tag can be placed in the <head> element and also within the <body> tag itself. 


 

Attribute

Value

Description

async

async

Defines that the script is executed asynchronously. (For external scripts only).

charset

charset

Defines character encoding, used in an external file with the JavaScript code.

defer

defer

Defines, that the script must be executed after the loading of the page. (For external scripts only).

src

URL

Defines the URL of an external file with the JavaScript code. (Can be defined as either relative or an absolute URL).

type

media_type

Defines the MIME-type of the script.

 

c) Semantic tags in HTML5: Semantic elements describe the meaning clear to the browser and developers. There are some semantic elements in HTML5: 

i)  <section>: The <section> element defines a section in a document. This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

ii) <article>: The <article> element specifies independent, self-contained content. It can be used to write  the following documents:

  • Blog post

  • Forum post

  • Newspaper article

iii) <header>: The <header> element is used to  represent introductory content or a set of navigational links. It is used to represent:

  • one or more heading elements (<h1> - <h6>)

  • logo or icon

  • authorship information

iv) <footer>: The <footer> element defines a footer for a document or section. It can contain information about the author, copyright information, et cetera.A <footer> element typically contains:

  • authorship information

  • copyright information

  • contact information

  • sitemap

  • back to top links

  • related documents

v)   <nav>: The <nav> element defines a set of navigation links.

vi)  <aside>: The <aside> element defines some content aside from the content it is placed in 

       (like a sidebar).

vii) <details>: Defines additional details that the user can view or hide

viii)<figcaption>: Defines a caption for a <figure> element

ix)  <figure>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, 

        etc.

x)   <main>: Specifies the main content of a document

xi)  <mark>: Defines marked/highlighted text

xii) <summary>: Defines a visible heading for a <details> element

xiii)<time>: Defines a date/time.

xiv)  <dialog>: This tag can be used to mark up a conversation.

 

For Example,

<!DOCTYPE html>

<html>

 <head>

    <title>Title of the document</title>

  </head>

  <body>

  <style>

 

  .content {

  background-color: gray;

  color: white;

  border: 3px solid black;

  margin: 30px;

  padding: 5px;

}

.content_data {

  background-color: tomato;

  color: black;

  border: 3px solid black;

  margin: 30px;

  padding: 30px;

}

</style>

 

  <section class="content">

  <header class ="content_data">

    <h1> Study Section</h1>

    <h3> Test your Knowledge</h3>

    </header>

     

    <article class="content_data">

    <p><b>Free Online Certification Exams, Pass and Get Your Certificate,   Explore Now </b></p>

<p>Free Online Certification and Diploma Certificate Exams in Software Development, MS Office, Web Design, Graphic Design, English, Aptitude, Personal Development, Business, Accounting and more. Pass and get a Free Test Record. Get a soft copy of your certificate at a nominal fee.</p>

   </article>

   

   <aside class="content_data">

    <p>Welcome to StudySection - the most loved online platform for E-Certification in several subjects including but not limited to Software Development, Quality Assurance, Business Administration, Project Management, English, Aptitude, and more. StudySection.com is created by Webner Solutions Private Limited, India. Webner is a software development company. Click here to view the list of certification exams we offer.

 

From more than 70 countries students are StudySection Certified. If you are not yet StudySection certified it's not late. You can start right now. Being StudySection Certified helps you take your education level a few notches up and have an edge over other candidates when you need it the most. Globally, our students are employed in different organizations and are utilizing the benefit of being certified with us.<p>

</aside>

<nav align="left" class="content_data">

   <h3>Useful Links:</h3>

   <a href= "https://www.studysection.com/community">Community</a><br/>

   <a href= "https://studysection.com/blog/">Blog</a><br/>

   <a href= "https://www.studysection.com/sample_certificate.pdf">Sample Certificate</a>

   </nav>

 

<footer align="right"> 

<p><h1><b><a href= "https://www.studysection.com/contact"> Contact with us </a></b></h1></p>

 

  </body>

</html>

 

d) Image maps: An image map is an image with clickable areas that usually act as hyperlinks. The image is defined by the <img> tag, and the map is defined by a <map> tag with <area> tags to denote each clickable area. Use the usemap and name attributes to bind the image and the map.

For Example,

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

body {

  background-color: black;

  text-align: center;

  color: white;

  font-family: Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

 

<img src="https://i.pinimg.com/564x/bf/d0/c4/bfd0c4edc916e456eb876dbc8ffc87f2.jpg" usemap="#shapes">

<map name="shapes">

<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.studysection.com/">

</map>

canvas

</body>

</html>

 

e) Input Control Elements: To make the web pages interactive and to take specific types of information from the user, Input control elements are used. 

Syntax: <input type="" name="" value="">

<input> is a self closing tag and can be written like <input/>.

 

Parameter

Description

class

Indicates the Class of the input

id

Indicates the ID of the input

type

Identifies the type of input control to display.

name

Indicates the name of the Input.

disabled

Boolean value that indicates the input should be disabled.

checked

When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default.

multiple

HTML5 Indicates multiple files or values can be passed.

placeholder

HTML5 A hint to the user of what can be entered in the control.

autocomplete

HTML5 indicates whether the value of the control can be automatically completed by the browser.

readonly

Boolean value that indicates the input is not editable. Readonly controls are still sent on form submission, but will not receive focus. HTML5: This attribute is ignored when the value of the type attribute is either set to hidden, range, color, checkbox, radio, file, or button.

required

HTML5 Indicates a value must be present or the element must be checked in order for the form to be submitted.

alt

An alternative text for images, in case they are not displayed.

autofocus

The <input> element should get the focus when page loads.

value

Specifies the value of <input> element.

step

The step attribute specifies the legal number intervals. It works with the following input types: number, range, date, datetime-local, month, time, and week.

 

The following are valid input types in HTML:

i) text: The most basic input type and the default input if no type is specified. <input> elements are used within a <form> element to declare input controls that allow users to input data.

Syntax: 

<input type="text">

The default width of a text field input is 20 characters. This can be changed by specifying a value for the size attribute like this:

<input type="text" size="50">

ii) checkbox and radio button: Checkboxes and radio buttons are written with the HTML tag <input>.

Syntax:

<input type="checkbox">

<input type="radio">

A single stand-alone checkbox element is used for a single binary option such as a yes-or-no question. Radio buttons usually come in groups, identified by using the same name attribute on all buttons within that group.

iii) button: Buttons can be used for triggering actions to occur on the page, without submitting the form. 

Syntax:

<input type="button" onclick="alert('hello world!')" value="Click Me">

The possible types of button are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

  • reset: The button resets all the controls to their initial values.

  • button: The button has no default behavior. It can have client-side scripts associated with the element's events for triggered when the events occur.

  • menu: The button opens a popup menu defined via its designated element.

iv) password: The input element with a type attribute whose value is password creates a single-line text field similar to the input type=text, except that text is not displayed as the user enters it.

Syntax:

<input type="password" name="password" placeholder="Password">

v) file: File inputs allow users to select a file from their local filesystem for use with the current page. It allows you to upload files on the server.

Syntax:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

vi) hidden: A hidden input won't be visible to the user, but its value will be sent to the server when the form is submitted nonetheless. 

Syntax:

<input type="hidden" name="inputName" value="inputValue"> 

vii) image: An Image. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

Syntax:

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

For Example, 

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

 <style>

 

  .content {

  background-color: gray;

  color: white;

  border: 3px solid black;

  margin: 30px;

  padding: 5px;

}

.content_data {

  background-color: tomato;

  color: black;

  border: 3px solid black;

  margin: 30px;

  padding: 30px;

}

</style>

 

</head>

<body>

 

<form  class="content">

<h1 align="center"> Student Registration Form </h1>

<label><b> First Name </b></label>         

<input type="text" name="firstname" size="15"/> <br> <br> 

 

<label><b> Last Name </b></label>         

<input type="text" name="lasttname" size="15"/> <br> <br>  

 

<label><b>Course:</b></label>   

<select>  

<option value="Course">Course</option>  

<option value="BCA">BCA</option>  

<option value="BBA">BBA</option>  

<option value="B.Tech">B.Tech</option>  

<option value="MBA">MBA</option>  

<option value="MCA">MCA</option>  

<option value="M.Tech">M.Tech</option>  

</select> <br><br>

 

<label><b>Gender:</b></label><br>  

<input type="radio" name="male"/><b> Male </b><br>  

<input type="radio" name="female"/><b> Female </b> <br>  

<input type="radio" name="other"/><b> Other </b> <br>  

<br>

 

<label for="mydate">D.O.B:</label>

    <input type="date" id="mydate"> <br/><br/>

 

<label for="myphone">Telephone Number:</label>

<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required> <br/>

 

<p>Address:</p> 

    <textarea id="myaddress" name="address" rows="5" cols="40"></textarea>

<br/><br/>

 

<label for="myemail">Email:</label>

    <input type="email" id="myemail" required> <br/><br/>

 

 <label for="mypass">Password:</label>

<input type="password" name="password"><br/><br/>

 

<input type="button" onclick="alert('Your form is submitted')" value="Submit">

<input type="reset" value="Reset">   

</body>

</html>


 

d) Some new input types in HTML5: To make your web pages interactive and to take specific types of information from the user, Input control elements are used. 

i) color: The color input type allows the user to select a color from a color picker and returns the color value in hexadecimal format.

ii) date: The date input type allows the user to select a date from a drop-down calendar.

iii) datetime-local: The datetime-local input type allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes.

iv) email: The email input type allows the user to enter an e-mail address. It is very similar to a standard text input type, but if it is used in combination with the required attribute.

v) month: The month input type allows the user to select a month and year from a drop-down calendar. The value is a string in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number. 

vi) number: The number input type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additional attributes min, max, and step.

vii) range: The range input type can be used for entering a numerical value within a specified range. It works very similar to number input, but it offers a simpler control for entering a number.

viii) search: The search input type can be used for creating search input fields.

ix) tel: The tel input type can be used for entering a telephone number.

x) time: The time input type can be used for entering a time (hours and minutes). A browser may use a 12- or 24-hour format for inputting times, based on the local system's time setting.

xi) url: The url input type can be used for entering URL or web addresses. You can use multiple attributes to enter more than one URL.

xii) week: The week input type allows the user to select a week and year from a drop-down calendar.

For Example,

<!DOCTYPE html>

<html>

 <head>

    <title>Title of the document</title>

  </head>

  <body>

   <form>

    <label for="mycolor">Select Color:</label>

    <input type="color" value="#00ff00" id="mycolor"> <br/>

    

    <label for="mydate">Select Date:</label>

    <input type="date" value="2019-04-15" id="mydate"> <br/>

    

    <label for="mydatetime">Choose Date and Time:</label>

    <input type="datetime-local" id="mydatetime"> <br/>

    

    <label for="myemail">Enter Email Address:</label>

    <input type="email" id="myemail" required> <br/>

    

    <label for="mymonth">Select Month:</label>

    <input type="month" id="mymonth"> <br/>

    

    <label for="mynumber">Enter a Number:</label>

    <input type="number" min="1" max="10" step="1" id="mynumber"> <br/>

    

    <label for="mynumber">Select a Number:</label>

    <input type="range" min="1" max="10" step="1" id="mynumber"> <br/>

    

    <label for="mysearch">Search Website:</label>

    <input type="search" id="mysearch"> <br/>

    

    <label for="myphone">Telephone Number:</label>

    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required> <br/>

    

    <label for="mytime">Select Time:</label>

    <input type="time" id="mytime"> <br/>

    

    <label for="myurl">Enter Website URL:</label>

    <input type="url" id="myurl" required> <br/>

    

    <label for="myweek">Select Week:</label>

    <input type="week" id="myweek">

</form>

 

  </body>

</html>

 

4) HTML5 Canvas tag: The HTML5 canvas element can be used to create graphics on the webpage via JavaScript. By default the <canvas> element has 300px of width and 150px of height without any border and content. However, custom width and height can be defined using the CSS height and width property whereas the border can be applied using the CSS border property. this tag supports several other Global attributes which are common for other HTML 5 elements, including:

  • accesskey

  • class

  • contenteditable

  • contextmenu

  • dir

  • draggable

  • hidden

  • id

  • lang  

  • spellcheck

  • style

  • tabindex 

  • title

 

<canvas id=””>..</canvas>

Creates a fixed-size drawing surface in a rectangular shape on an HTML page that exposes one or more rendering contexts. By default, a canvas has no border and no content. The id attribute is used for accessing the element for using in javascript.

width=””

defines the width of the canvas area

height=””

defines the height of the canvas area.

var element= document.getElementById("myCanvas");

Fetches the element at the client-side script for manipulation.

var ctx = element.getContext("2d");

Gets the current drawing instance of the canvus element which returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. Different context events are available that can be used to draw lines, circles, gradients, patterns, shadows, using images, canvas, etc.

Some of the basic drawing context events

Line drawing methods and properties

Can be used to draw simple lines, and can also be used to generate triangles , rectangles from multiple lines.

beginPath()

This method resets the current path.

closePath()

This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

moveTo(x,y)

This method is used to define the starting point of the line.

lineTo(x,y)

This method is used to define the endpoint of the line, connects to the previous point by a straight line.

stroke()

This method stroke is used to draw the straight line between the specified start point and endpoint with the current stroke style.

fill()

This method fills the area with the current fill style while generating shapes of triangles etc. from lines.

lineWidth

This property returns the current line width and can be set, to change the line width.

lineJoin

This property returns the current line join style and can be set, to change the line join style. The possible line join styles are beveled, round, and miter.

Rectangle drawing events and properties

fillRect( x,y,width,height)

This method draws a filled rectangle.

strokeRect( x,y,width,height)

This method draws a rectangular outline.

clearRect( x,y,width,height)

This method clears the specified area and makes it fully transparent

Arcs/Circle drawing events and properties

stroke(),beginPath(), closePath(),fill(), moveTo(x, y)

Similar to events specified for drawing lines

arc(x, y, r, start_angle, end_angle, anticlockwise)

Used to draw an arc on the drawing surface with x, y values for setting the center position of arc and, r as radius, the arc start position is specified by the argument start angle w.r.t x-axis and end position by the argument end angle. A complete circle can be drawn using the arc method by specifying the start angle as 0 and the end angle as 2*Math. PI. The direction of the drawing line can be specified by setting the value to true/false for the anticlockwise direction.

Text drawing events and properties

font

This property returns the current font settings and can be set, to change the font.

textAlign

This property returns the current text alignment settings and can be set, to change the alignment. The possible values are the start, end, left, right, and center.

fillText( text, x, y, max-width)

This property draws the filled text at the given position indicated by the given coordinates x and y. The text looks like a bold font. The optional max-width attribute can be set, within which text should text. This Makes the text shrink if the max-width is less than the original space occupied by the text.

strokeText(text, x, y, max-width )

This property strokes the text at the given position indicated by the given coordinates x and y, Text appears unfilled.

Gradient Generation

addColorStop(

offset, color)

This method adds a new color stop, defined by an offset and a color, to a given canvas gradient. Offset is a number between 0 and 1, inclusive, representing the position of the color stops between the start and end position of gradient.color is a CSS color value of the stop position.This method used together with createLinearGradient() or createRadialGradient(). This method can be used multiple times to change the gradient.

createLinearGradient(x0, y0, x1, y1)

This method returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. The four arguments repre

 

For Example,

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Drawing on Canvas</title>

<script>

    window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

        var ctx = document.getElementById("myCanvas").getContext("2d");

ctx.fillStyle = "#f00";

ctx.fillRect(100, 100, ctx.canvas.width, ctx.canvas.height); 

        ctx.fillStyle = "#000";

        ctx.font = "10px Arial";

        ctx.fillText("My red canvas with some black text", 125, 150);

        var c = document.getElementById("myCanvas");

        

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95, 50, 40, 0, 2 * Math.PI);

ctx.stroke();

    };

</script>

</head>

<body>

    <canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000"></canvas>

</body>

</html>

 

5) HTML SVG tag: SVG stands for Scalable Vector Graphics and it is a language for describing 2D graphics. The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. 

The xmlns attribute can be required only for the outer svg element of SVG documents. It isn’t required for inner svg elements or in HTML documents. 

For Example,

<!DOCTYPE html>

<html>

  <head>

    <title>Title of the document</title>

  </head>

  <body>

    <div style="display:flex; flex-flow:row wrap;">

      <svg width="180" height="180">

        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:pink; stroke:green; stroke-width:4;"/>

      </svg>

      <svg width="200" height="200">

        <circle cx="100" cy="70" r="60" stroke="green" stroke-width="4" fill="pink"/>

      </svg>

      <svg width="200" height="200">

        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:pink; stroke:green; stroke-width:4; fill-rule:evenodd;"/>

      </svg>

    </div>

  </body>

</html>

 

a) Difference between Canvas and SVG tags:

 

Canvas

SVG

Resolution dependent

Resolution independent

No support for event handlers

Support for event handlers

Poor text rendering capabilities.

Best suited for applications with large rendering areas (Google Maps).

You can save the resulting image as .png or .jpg

Slow rendering is complex.

Well suited for graphic-intensive games.

Not suited for game applications.

 

6) A Simple Example to create a Webpage:

For Example,

<!DOCTYPE html>

<html lang="en">

<head>

<title>Page Title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

 

/* Style the body */

body {

  font-family: Arial, Helvetica, sans-serif;

  margin: 0;

}

 

/* Header/logo Title */

.header {

  padding: 80px;

  text-align: center;

  background: orange;

  color: white;

}

 

/* Increase the font size of the heading */

.header h1 {

  font-size: 40px;

}

 

.navbar {

  overflow: hidden;

  background-color: #333;

  position: sticky;

  position: -webkit-sticky;

  top: 0;

}

 

/* Style the navigation bar links */

.navbar a {

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 14px 20px;

  text-decoration: none;

}


 

/* Right-aligned link */

.navbar a.right {

  float: right;

}

 

/* Change color on hover */

.navbar a:hover {

  background-color: #ddd;

  color: black;

}

 

/* Active/current link */

.navbar a.active {

  background-color: #666;

  color: white;

}

 

/* Column container */

.row {  

  display: -ms-flexbox; /* IE10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE10 */

  flex-wrap: wrap;

 }

 

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

  -ms-flex: 30%; /* IE10 */

  flex: 30%;

  background-color: #f1f1f1;

  padding: 20px;

}

 

/* Main column */

.main {   

  -ms-flex: 70%; /* IE10 */

  flex: 70%;

  background-color: white;

  padding: 20px;

}

 

/* image, just for this example */

.img {

  background-color: #aaa;

  width: 100%;

  padding: 20px;

}

 

</style>

</head>

<body>

<div class="header">

  <h1>Study Section</h1>

  <p>A <b>Test Your Knowledge</b></p><br/>

</div>

 

<div class="navbar">

  <a href="#" class="active">Home</a>

  <a href="https://www.studysection.com/free-career-counselling">Career Counselling</a>

  <a href="https://www.studysection.com/mock-interview">Mock Interview</a>

  <a href="https://www.studysection.com/community" class="right">Community</a>

</div>

 

<div class="row">

  <div class="side">

    <h2><p>Free Online Certification Exams, Pass and Get Your Certificate, Explore Now

Free Online Certification and Diploma Certificate Exams in Software Development, MS Office, Web Design, Graphic Design, English, Aptitude, Personal Development, Business, Accounting and more. Pass and get a Free Test Record. Get a soft copy of your certificate at a nominal fee.</p></h2>

    <h5>Study Section</h5>

    <div class="img" style="height:200px;">

    <img src="https://www.studysection.com/img/ss-banner.png" alt="Study Section" />

    </div>

 

 </body>

</html>

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree