Class 9 | HTML 5 Basics | Website Design Notes

Introduction
HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define Font the text document within tag which defines the structure of web pages.
HTML5 is the of fifth and current version of HTML.

Different between HTML and HTML5

HTML	HTML 5
HTML declaration in Html is starts with <Html>	Html declaration in HTML 5 is starts with <!doctype Html>
works with old version browsers	Works with latest version browsers.
Graphic designs are possible with the help of flash light etc.	Graphics are possible with canvas.
Not possible to create shapes like circles, rectangle etc.	We can draw shapes like circles, rectangle etc.
Audio and Video are only possible by using adobe flash player.	Audio and video are essential parts of HTML5

New Features in HTML5

HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.
1. New Semantic Elements: These are like <header>, <footer>, and <section>.

Forms 2.0: Improvements to HTML web forms where new attributes have been introduced

for input> tag.

Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket: A next-generation bidirectional communication technology for web applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video: You can embed audio or video on your webpages without resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web application
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on the same webpage.

HTML Semantic Elements

Semantic HTML elements are those that clearly describe their meaning in a human-and machine-readable way.

Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

The basic structure of html 5 defined by using the following elements. This element is also called semantic element.

<nav>

<aside>

<main>

<summary>etc.

<main> tag

It specifies the main content of document. E.g.:
<main>

<p>web browser is search engine. They are googled, chrome, fire fox, internet explorer etc.</p>

<article><h1>Google chrome </h1>
<p>Google chrome is search browser and free source software </p>

<h1>Internet explorer</h1>

<p>It is also web browser developed by Microsoft, released in 1950</p>

</article>

</main>

<section> tag

It defines multi section of web document such as introduction content and contact information.

e.g.:

<p> The world-wide fund for is an international organization working on issues regarding the conversation research of environment </p>

</section>

<Article> tag

The <article> make easy new blog post in an online publication. It also helps to clean of the html code by reducing use of division <div>.

e.g.:

<h1>Google chrome</h1>

<p>It is an open-source software used for searching purpose </p>

</article>

<header>tag

It defines header for a document.

<h1>hello world</h1>

</header>

<footer> tag

It defines footer for a document.

e.g.:

<p> posted by x y z </p>

<p> contact information </p>

</footer>

<figure> tag

It specify self-content photo, diagram etc.

<fig caption>tag

It defines a caption for a <figure>

e.g.:

<image Src =” xyz .jpg”

Alt=”name “width=200px

Height=400px/>

<aside> tag

It specify the sum content aside a main page. Aside tag is like a <section> tag but this tag focus on element shows on side of webpages/main pages such as slide bar

e.g.:

<aside>

<h6>Google chrome </h6>

<p>Google chrome is the browser used for searching purpose </p>

</aside>

<mark> tag

It defines highlight the text.

e.g.:

<mark>

<body>

<mark>This is aura YouTube channel </mark>

</body>

<summary>tag

The <summary> is used in Html to define summary for the detail’s tags.

<details> tag

The <detail> used to define additional detail that the user can view or hide.

e.g.:

<body>

<summary> Atithi devo bhava </summary>

<p>we believe that the tourist is our guest and treat them as a god </p>

</details>

</body>

<nav>tag

It defines navigation lines.

e.g.:

<body>

<nav>

< a href =”html”> HTML</a>

<a href=”java script”> JavaScript </a>

</nav>

</body>

Multimedia element

Html 5 multimedia on the webpage is sound, music, videos, movie, animation. It Comes in different formats such as images, music, records, films and more. There are two types of multimedia element used in Html 5 in document. They area <audio> and< video> tag.

Html 5 <video> tag

This tag is used to show a video om webpage.

e.g.:

<!doc type html>

<head> <title> Video tag</title>

</head>

<body>

</video>

</body>

</html>

Html 5 <audio>tag

The tag is used to play an audio file in webpage.

e.g.:

<!doctype html>

<head> <title>audio tag</title>

</head>

<body>

</audio>

</body>

</html>

<canvas>tag

The Html 5 <canvas> is used to draw graphics on a webpage using JavaScript>. The <canvas> has several method for drawing path box , circle ,text and images etc.

Syntax:
<canvas id = “my canvas1” width = “200” height= “100”></canvas>

HTML5 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.

HTML SVG circle example

HTML SVG rectangle example

HTML SVG polygon example
<SVG width = “200” height = “100”>
<polygon points = “100, 10 40, 198 190, 78 10, 78, 168, 198” style= “fill:red; stroke-width:5; fill-rule:nonzero;”/>
</SVG>

HTML5 drag/drop

Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. HTML5 Drag and Drop is a powerful feature that allows users to drag and drop elements within a web page. Here’s a brief overview of the key events involved in this API:

ondragstart: Triggered when the user starts dragging an element.

ondrag: Triggered repeatedly while the element is being dragged.

ondragenter: Triggered when the dragged element enters a drop target.

ondragleave: Triggered when the dragged element leaves a drop target.

ondragover: Triggered when the dragged element is over a drop target.

ondrop: Triggered when the dragged element is dropped on a drop target.

ondragend: Triggered when the user stops dragging the element.

Eg for drag/drop:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>

HTML5 forms

Form is a graphical interface on webpage for the users to enter data. /The collection of data.

Form is defined by <form> and the form elements are defined by tag.

<input>

<input> tag

It is the form element to enter text, number, password, radio button, checkbox

Etc.

Text box:

Text box is used to enter the text or number.

E.g.: <input type =”text: size =20

Max length =30>

Radio Button:

It is used for selecting a single option from multiple choice.

E.g.: <input type =” radio “checked =true > Married

<input type =” radio”>Unmarried

Check box:

It allows users to select multiple option from multiple choice.

E.g.:

<input type=” check box” checked =true > movie

<input type =” check box” >music

<input type] =” check box “> travel

Output

movie

music

travel

Password box:

It allow the user to enter password.

E.g.: <input type =” password”

Size =10 max length =5

Name=” password”>

<select> tag

It provides user to select option from given list.

The <select> is used to create a list and the <sub> <option> defines

The items of the list.

E.g.:

Country:<select> size =1>

<option> Nepal </option>

<option> Bhutan </option>

<option> India </option>

</select>

<text area > tag

It allow user to type multiple lines of text on a form.

The <text area> is used to define text area with two attributes row and column.

E.g.:

Comments :<text area rows = 3 cols =20>

You can write comments </text area>

<Button> tag

It allows users to create clickable button.

It is better to use <button> than using <input type =” button”>

E.g.:

Click</button>

Eg for html5 form:
<!DOCTYPE html>

<head>

<title>HTML5 Form Example</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

form {

max-width: 600px;

margin: auto;

}

.form-group {

margin-bottom: 15px;

}

label {

display: block;

margin-bottom: 5px;

}

input, select, textarea, button {

width: 100%;

padding: 8px;

box-sizing: border-box;

}

button {

width: auto;

background-color: #4CAF50;

color: white;

border: none;

padding: 10px 20px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<h1>HTML5 Form Example</h1>

</div>

<label for=”email”>Email:</label>

</div>

<label for=”password”>Password:</label>

</div>

<label for=”dob”>Date of Birth:</label>

</div>

<label for=”website”>Website:</label>

</div>

<label for=”number”>Favorite Number:</label>

</div>

<label for=”range”>Experience Level:</label>

</div>

<label for=”color”>Favorite Color:</label>

</div>

<label for=”file”>Upload File:</label>

</div>

<label for=”bio”>Biography:</label>

</div>

<label for=”gender”>Gender:</label>

<option value=””>Select…</option>

<option value=”female”>Female</option>

<option value=”other”>Other</option>

</select>

</div>

<label for=”newsletter”>Subscribe to newsletter:</label>

</div>

<legend>Preferred Contact Method:</legend>

<label for=”contact_email”>Email</label>

<label for=”contact_phone”>Phone</label>

</fieldset>

</div>

<button type=”submit”>Submit</button>

</form>

</body>

</html>

Comments

No comments yet. Why don’t you start the discussion?

Class 9 | HTML 5 Basics | Website Design Notes

Comments

Leave a Reply Cancel reply