HTML5 is the latest version of HTML(hyper text Markup Language). HTML is not a programming language, but it is a markup language. Hypertext defines the reference link between the web pages, Markup defines the data within the tags and Language defines the communication.

Banner Basic Engineer 04
Home Page – Basic Engineer

HTML5 is introduced an application programming interfaces(API) and Document Object Model(DOM).

Features

  • Video and audio tag
  • Divide web page into multiple section through tag direction.
  • Does not support <frameset> and <frame> tag.
  • It is support a Graphic facilities.
  • It is support a Storage facilities.

Doctype

  • It specify html 5.0.
  • It must be written as first line statement.
  • It stand for document type definition.
  • It always written in html 5
  • <!Doctype html>

NOTE :- center, big, frameset, frame , base font and fonts these tag are not support in html.5

Div tags

This tag is used to divide webpage into multiple section according to requirement with the help of CSS. It is block level tag because it generate new line automatically.

For example

<html>
<head>
<style>
.myDiv {
  border: 10px outset black;
  background-color: Tomato;    
  text-align: center;
}
</style>
</head>
<body>

<h1>The div tag </h1>

<div class="myDiv">
  <h2>Hello basic engineer</h2>
  <p>This tag is used to divide webpage into multiple section according to requirement with the help of CSS</p>
</div>
</body>
</html>

Output

example of Div tag

Blocke level tag:- The tag is generate new line automatic is called block level tag.

Example :- <div> , <hr>, <p>, <tr>, <h1>to <h6> etc.

Inline level tag :- :- The tag which does not generate new line automatically is called inline level tag.

For example :- <b>, <u>, <img>, <a> etc.

Span tag :- This tag is use to group more element in same line. It is inline level tag because it is not generate new line automatically.

SVG

It is stand for scalable vector graphics. It is use to draw graphics component as circle, ellipse, rectangle, text, line etc, is knows as SVG. HTML 5 support graphics with the help of <svg> tag.

svg tag :-

This tag specifies boundary area for designing graphics component is knows as svg tag.

Attribute

  • Height.
  • Width.

Syntax

<svg height height=”100px” width=”300px”>
</svg>

Graphics component

  • Circle
<html>
<body>
<h1> circle </h1>
<SVG height="400px" width="600px">
<circle cx="100" cy="100" r="100px" fill="red" stroke="black"></circle>
<circle cx="400" cy="100" r="100px" fill="green" stroke="blue"></circle>
</SVG>
</body>
</html>
example of circle
  • Rectangle
<html>
<body>
<h1>Rectangle</h1>
<SVG height="400px" width="600px">
<rect height="200" width="200" fill="red" x="20" y="20" 
stroke="black" stroke-width="10px"> </rect>
</SVG>
</body>
</html>
example of Rectangle
  • Ellipse
<html>
<body>
<h1>Ellipse</h1>
<SVG height="400px" width="600px">
<ellipse cx="80" cy="70" rx="70" ry="50" fill="skyblue"/>
</SVG>
</body>
</html>
  • line
<html>

<body>
<h1>Line</h1>
<SVG height="400px" width="600px">
<line x1="15" y1="50" x2="500" y2="50" stroke="tomato" stroke-width="10px" ></line>
</SVG>
</body>
</html>

  • Text
<html>
<body>
<h1>Text</h1>
<SVG height="400px" width="600px">
<text x="100" y="100" fill="red" font-style="georgian" font-size="40px"> hello baisc engineer</text
</SVG>
</body>
</html>
  • Polygon
<html>
<body>
<h1>polygon</h1>
<SVG height="400px" width="600px">
<polygon points="245,210 200,300 290,300" fill="red" 
stroke="black" />
</SVG>
</body>
</html>

ifeame

This tag is use to create inline frame in which we lode separate any html document and graphics data as audio, video etc, is knows as ifeame.

It is generally use for online advertisement and map.

syntax

<iframe src="url" title="description"></iframe>

Attribute

  • Src.
  • Height.
  • Width.
  • Allowfullscreen.
  • Frame.
  • Border.
  • Id.
  • Name.
  • Class.
<html>
<body>
<h1>iframe</h1>
<iframe src="https://tse3.mm.bing.net/th?id=OIP.E3UNwm389l_qdOdJ6zbhCAHaE8&pid=Api&P=0" allowfullscreen width="600px" height="600px" align="left" frameborder="0"></iframe>
<h3>HTML5 is the latest  version of HTML(hyper text Markup Language). 
HTML is not a programming language, but it is a markup language. 
Hypertext defines the reference link between the web pages, Markup defines the data within the tags and Language defines the communication. 
HTML5 is introduced an application programming interfaces(API) and Document Object Model(DOM).</h3>
<details open>HTML5</br>
version</br>
hyper text Markup Language</br>
5
<summary>Read More......</summary>
</details>
<details>basic engineer
<summary>last year student </summary>
</details>
<details>rahul verma
<summary>Director</summary>
</details>
</body>
</html>

How to create map?

  • This tag is use to create map tag.
  • It is create with the help of tag.
  • An image map is an image which provides clickable area in image.
  • Clickable area is created with the help of tag.

Attribute

  • Shape
    • rect
    • circle
    • poly
  • Href
  • Cords.

Meta tag

  • It describe data (information) about data.
  • It describe information of html page as description content, author name, title, keyword.
  • It must be define within head tag.
  • It define portability in this case webpage can be executed different platform/device without any modification.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>meta tag</h1>
</body>
</html>

If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.

To know more about HTML form please check Wikipedia link  Click here.

Stay Connected Stay Safe. Thank you


Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *