A Tutorial Website with Real Time Examples
It is the new version to HTML having some new features to pre-existing tag such as: Features in Elements Semantic Elements: <header>, <footer>, <article> and <section>. Form Elements: number, date, time, calendar and range. Graphic Elements: <svg> and <canvas>. Multi-media Elements: <audio> and <video>. …
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 …
This HTML tutorial helps beginners and professionals to learn HTML easily. HTML is a widely used web technology for website development. It stands for Hyper Text Markup Language. It is mainly used to create web pages which are static in nature. HTML …
As explained earlier, elements in Html is known as tags. Html consist of huge number of tags but it is divided into two categories. Empty tags: All the tags which is not closed or self-closed tags. E.g. <br>, <img>, <link> etc. …
Heading Tags: This tag represents the document header. It is said to be a good practice if every document starts with Heading. Heading tags ranges from H1 to H6 i.e. six different levels where H1 is max size and H6 …
HTML Attributes provide the additional information about HTML elements. Attributes are always specified in the start tag. Attributes usually comes in pairs. lang Attribute This attribute helps in declaring the language of the document. Lang Attribute in case of whole …
It is a process of formatting text for better look and feel of the text. There are many ways to format tags using different tags such as: <b> – Bold text: It defines Bold text without any importance. <strong> – Important text: It defines Strong …
It consist of anchor element which is used to create a link between a source anchor and destination anchor. The anchor tag can be embedded between text, image, video or button. HTML Links Syntax:
|
0 1 2 |
<span class="tag"><</span><span class="tag-name">a</span> <span class="attribute">href</span>=<span class="attribute-value">"url"</span><span class="tag">></span>link text<span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span> |
Example: <a href=”https://www.tutorialandexample.com”>Tutorial for Html</a> Here, <a>: Anchor …
HTML has <img> tag to display image on the web pages or web application. This tag is an empty tag i.e. we don’t have to close this tag while using. SYNTAX:
|
0 1 2 |
<span class="tag"><</span><span class="tag-name">img</span> <span class="attribute">src</span>=<span class="attribute-value">"source address"</span> <span class="attribute">attributes</span>=<span class="attribute-value">"alt, height, width"</span><span class="tag">></span> |
Example:
|
0 1 2 3 4 5 6 7 8 |
<html> <body> <center>Image tag Example</center> <img src="https://www.tutorialandexample.com/resources/images/favicon.png" alt="tutorialandexample"/> </body> </html> |
Try Now Output: Image tag Example …
This tag comes in handy when we have to represent the data in tabular format i.e. rows and columns. It is recommended to use <div>tag (division) over table to maintain the layout of the web page. Layout of the page …
Frames in Html is used to divide the browser into different sections where each section can load different Html documents. Collection of frame is known as Frameset. Creating frames:We use frameset instead of body tag to divide web page into …
Html Lists are used to enlist the items in a particular order or list. Html List is of 3 types. Ordered Lists (ol) Un-Ordered Lists (ul) Description Lists (dl) Ordered List: It is also known as numbered list, here list items …
Forms are required when we want to collect data from the user. Html forms consists of different fields to take user inputs such as: input, text area, checkbox, password, radio button etc. Many languages are embedded with html forms to …
BASIC HTML TAGS TAGS DESCRIPTION <!DOCTYPE> Defines Document Type <html> Defines Html document <head> Defines Header of document <title> Defines Title of document <body> Describe all the content of document <h1> to <h6> Defines Html Heading <p> Write Paragraph in …
HTML5 CANVAS: It is used to draw graphics using JavaScript. <canvas> is only the graphic container actual graphics is designed by JavaScript. Canvas tag cab be used to designed paths, boxes, circles, text and adding images. Examples: <canvas id=“myCanvas” width=“200” height=“100” style=“border:1px solid #000000;”> Your browser does not support the HTML5 canvas tag. </canvas> …
HTML SVG: SVG stands for Scalable Vector Graphics which defines the graphics for the web. It is a language for describing 2-D graphics in XML. Each drawn shape in SVG is an object.
|
0 1 2 3 4 5 6 |
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="turquoise"/> Sorry, your browser does not support inline SVG. </svg> |
Try Now Output:
|
0 1 2 3 4 5 6 |
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(255,128,0);stroke-width:10;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg> |
Try Now Output: …
HTML AUDIO: HTML5 provides a method to embed the audio file into a webpage by using HTML5. Before HTML5 audio files is used to play on the browser with the help of plug-ins such as flash etc. Syntax:
|
0 1 2 3 4 |
<audio controls> <source src="address" type="file type"> </audio> |
Example:
|
0 1 2 3 4 |
<audio controls> <source src="johny-johny.mp3" type="audio/mp3"> </audio> |
…
HTML VIDEO: HTML5 has introduced the <video> tag to embed video into the webpage directly without using the plug-ins. Syntax:
|
0 1 2 3 4 5 |
<video attributes > <source src="address" type="video/mp4"> Your browser does not support the video tag. </video> |
|
0 1 2 3 4 5 |
<video width="320" height="240" controls> <source src="mountain.mp4" type="video/mp4"> Your browser does not support the video tag. </video> |
Try Now Output:
|
0 1 2 |
<video controls="controls" width="320" height="240" data-mce-fragment="1"></video> |
|
0 1 2 |
❮ Prev
<object> element: It embed the object within the HTML documents and embed plug-ins such as Java applets, PDF readers, Flash Players etc in web pages. Example:
|
0 1 2 |
<object width="100" height="100" data="bookmark.swf"></object> |
<embed> element: It defines an embedded object within a HTML document. Example:
|
0 1 2 |
<embed src="tutorialandexample.jpeg"> |
EMBED YOUTUBE …