Introduction to HTML5 Tutorial

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>. New API’S HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE New Media Element <audio>: Define sound content <embed>: It defines a container …

Read moreIntroduction to HTML5 Tutorial

Responsive HTML5 and CSS3 Tutorial

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 …

Read moreResponsive HTML5 and CSS3 Tutorial

HTML Tutorial

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 Tutorial Index Title Tutorial HTML Tutorial Tutorial HTMl Tags Tutorial HTML Basic Tags Tutorial HTML Attributes Tutorial HTML Text Format Tutorial HTML Links Tutorial HTML Images Tutorial HTML Tables …

Read moreHTML Tutorial

HTML Tags

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. Non Empty tags: All those tags which are closed. E.g. <body>, <p>, <title> etc. Types of Tag Meta Tags: DOCTYPE, title, link, meta and style. Text Tags: <p>, <h1>, <h2>, <h3>, <h4>, …

Read moreHTML Tags

HTML Basic Tags

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 is the min size. Example:

Try Now Paragraph Tag: This<p> tag let your Html document text to structure into different paragraphs. This tag is a non-empty tag thus, …

Read moreHTML Basic Tags

HTML Attributes

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 document is declared in the html tag.

href Attribute This attribute is embedded with the anchor tag (<a>) where href specifies the address of the link.

Size …

Read moreHTML Attributes

HTML Text Format

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 text with added strong importance <i> – Italic text: This element shows Italic text. <em> – Emphasized text: It emphasizes the text wit added semantic importance. <mark> – Marked text: It marks the …

Read moreHTML Text Format

HTML Links

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:

Example: <a href=”https://www.tutorialandexample.com”>Tutorial for Html</a> Here, <a>: Anchor tag which add the link to any reference text, image etc. href (hypertext reference): It specify the destination for the anchor tag. Local Links: It is specified with a relative URL. …

Read moreHTML Links

HTML Images

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:

Example:

Try Now Output: Image tag Example HTML Images – TutorialAndExample Attributes of Image tag src: It is the most important attribute of image tag which allows to describe the source or path of the image. Source …

Read moreHTML Images

HTML Tables

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 consist of header, footer, navigation, body etc. Table Tags: TAGS DESCRIPTION <table> Defines the table. <tr> It define Row in a table (table row). <th> It define Heading in …

Read moreHTML Tables

HTML Frames

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 sections. Rows and Column attributes decide the Horizontal or Vertical Frames

Try Now Output:

Frameset tag Attribute Cols Rows Border Frame Border Frame Spacing HTML IFRAMES It …

Read moreHTML Frames

HTML Lists

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 are marked with numbers.Type {1, A, a, i, I}

Try Now Output: Flash Arrow Constantine Iron Fist Jessica Jones Luke Cage Un-Ordered List: It is also known as bulleted …

Read moreHTML Lists

HTML Forms

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 fully gain the potential use of it. Html: Create forms with different fields to accept user data. CSS: It enhances the style and presentation. JavaScript: It provide validations for form inputs. Server …

Read moreHTML Forms

HTML References

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 this tag <br> Line break <!–…–> Comment in Html FORMATTING TAGS TAGS DESCRIPTION <abbr> Defines a abbreviation or acronym <address> Defines contact information about author of a document <b> …

Read moreHTML References

HTML Canvas

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> Try Now Output:

❮ Prev Next ❯

HTML SVG

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.

Try Now Output:

Try Now Output:   ❮ Prev Next ❯

HTML Audio

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:

Example:

Try Now Output:

❮ Prev Next ❯

HTML Video

HTML VIDEO: HTML5 has introduced the <video> tag to embed video into the webpage directly without using the plug-ins. Syntax:

Try Now Output:

❮ Prev

HTML Youtube

<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:

<embed> element: It defines an embedded object within a HTML document. Example:

EMBED YOUTUBE To embed video in HTML document YOUTUBE is the best option thus, HTML5 has provided that option. Syntax:

ATTRIBUTES Autoplay: It allows user to automatically plays the video when …

Read moreHTML Youtube