HTML for Beginner to Expert | All Concepts Covered

CoderIndeed
personCoderIndeed
July 31, 2022
0

HTML

  • HTML stands for Hyper Text Markup Language.
  • HTML is a language for describing web pages.
  • HTML describes the structure of Web pages using markup.

HTML Tags

HTML tags are element names surrounded by angle brackets.

  • HTML tags normally come in pairs like <p> and </p>.
  • The first tag in a pair is the start tag the second tag is the end tag.
  • The end tag is written like the start tag but with a forward slash inserted before the tag name.
  • The start tag is also called the opening tag and the end tag the closing tag.

Types of Tags

  1. Paired Tags: a Tag is said to be paired tag if it is along with a companion tag and is  placed on the sides of the text. For Example: The <b> tag is a paired tag. The <b> tag along its companion tag </b> causes the text contain between them to be rendered in bold. The opening tag activates the effect and the closing tag turns the effect off. 
  2. Singular Tags: another type of Tag is the Singular tag or stand-along tag. It does not have any companion tag with it. For Example: The <br/> will insert a line Break. This tag does not require any companion tag with it.

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox and Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document.

HTML Webpage Structure

<html>
<head>
<title>Computer Training Institute in Ludhiana</title>
</head>
<body>
</body>
</html>

  1. Identifies the document as written in HTML.
  2. The head provides information about the document.
  3. A descriptive title is required.
  4. The body contains the content that displays in the browser.

!Doctype Declaration

The <!DOCTYPE> declaration represents the Document Type Definition and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). 

The <!DOCTYPE> declaration is not an HTML tag. it is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> declaration is not case sensitive. The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

HTML Versions

Since the early days of the web, there have been many versions of HTML.

Version Year
HTML1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.011999
XHTML2000
HTML52014
HTML5.12016
HTML5.22017
 

Structure of HTML Element

 <tagname>content goes here...</tagname> Example: <b> CCIT</b>

Write HTML Using Notepad or any other Text Editors

Web pages can be created and modified by using professional HTML editors like Notepad++, Sublime Text, Brackets and Visual Studio Code. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.

. HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference it is entirely up to you.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings and so on.

<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
 

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

HTML Attributes

  • All HTML elements can have attributes.
  • Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs like: name="value"

HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page to page. A hyperlink (or link) is a word, group of words or image that you can click on to jump

to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the Anchor <a> tag. The link's destination is specified in the Hyperlink Reference (href) attribute.

The <a> tag can be used in two ways.
To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

<html>
<body>
<a href="http://www.coderindeed.in">Visit CODERINDEED site</a>
</body>
</html>

HTML Links Target Attribute

The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab.

<html>
<body>
<a href="http://www.coderindeed.in" target="_blank">Visit CODERINDEED site</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>

HTML Links Name Attribute

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the reader.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#Lesson.1">Lesson.1</a><br />
<a href="#Lesson.2">Lesson.2</a><br />
<a href="#Lesson.3">Lesson.3</a><br />
<a href="#Lesson.4">Lesson.4</a><br />
<br />
<br />
<a name="Lesson.1">Introduction of Lesson.1</a> <p>This is sub topic.1</p> <p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lesson.2">Introduction of Lesson.2</a> <p>This is sub topic.1</p> <p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lesson.3">Introduction of Lesson.3</a> <p>This is sub topic.1</p> <p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lesson.4">Introduction of Lesson.4</a> <p>This is sub topic.1</p> <p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>

HTML Images

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and has no closing tag. To display an image on a page, you need to use the src attribute. src stands for "source". The value of the src attribute is the URL of the image you want to display.

<html>
<body>
<img src="logo.jpg" border="4"/>
</body>
</html>

HTML Images Alt & Align Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text. The align attribute specifies the alignment of an image.

<img src="boat.gif" alt="Big Boat" align="right" />

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection an error in the src attribute).

HTML Images Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default.

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

Images on another Server

Some web sites store their images on image servers. Actually you can access images from any web address in the world.

<img src="https://i.ibb.co/cxFDczw/CI-10.png" alt="Nature">

The Title Attribute

Here a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph.

<p title="I'm a tooltip"> This is a paragraph.</p>

HTML Lines

The <hr /> tag creates a horizontal line/rule in an HTML page. The hr element can be used to separate content.

HR Tag Attributes

  • Align: Specifies the alignment of a <hr> element
  • Color: Specifies the color of a <hr> element
  • Size: Specifies the height of a <hr> element in Pixels
  • Width: Specifies the width of a <hr> element in Pixels or %

<html>
<body>
<p>The hr tag defines a horizontal rule:</p> <hr />
<p>Default Horizontal Line </p>
<hr color="red" size="45" />
<p> Horizontal Line with Color & Size Attribute</p> <hr align="center" width="90" />
<p> Horizontal Line with align & width Attribute</p>
</body>
</html>

HTML Comments

Comment tags are used to insert comments in the HTML source code. You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. Note: Comments are not displayed by the browser, but they can help document your HTML source code. With comments you can place notifications and reminders in your HTML.

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph.

<html>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>

HTML Formatting Elements

HTML uses tags like <b> and <i> for formatting output like bold or italic text. HTML also defines special elements for defining text with a special meaning. Formatting elements were designed to display special types of text.

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is Important</strong></p>
<p><big>This text is big</big></p>
<p><small>This text is big</small></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><mark>This text is Highlighted</mark></p>
<p><center>This text is center aligned</center></p>
<p><s>This text in strikethrough style</s></p>
<p><u>This text is underline</u></p>
<p><ins>This is Inserted Text</ins></p>
<p><del>This is Deleted Text</del></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

Preformatted Text

The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<html>
<body>
<pre>
This is preformatted text. It preserves  both spaces and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
For  i = 1   to 10
print i
next  i
</pre>
</body>
</html>

Quotation and Citation Elements

Q for Short Quotations

The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element.

<html>
<body>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>

Blockquote for Long Quotations

The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.

<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>

Abbr Element for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym. Marking abbreviations can give useful information to browsers, translation systems and search-engines.

<html>
<body>
<p><abbr title="Coderindeed">
CODERINDEED</abbr> has been working in the field of education and
training </p>
</body>
</html>

Favicon

Favicon is the shortcut from the Favorites icon.
It is a small logo found in front of the visited URL is used to promote a company or a trademark.
A favicon must have the following characteristics.

  1. name - The default name is favicon.ico
  2. size - 16×16, 32×32, 48×48, 64×64 or 128×128 pixels

<html>
<head>
<link rel="icon" href="logo.ico" sizes="16x16">
<title>Computer Training Institute in Ludhiana</title>
</head>
<body>
</body>
</html>

Body Tag Attributes

There are many attributes of this tag which are as follows. 

AttributeDescription
bgcolorSpecifies the Background color of the document
backgroundSpecifies the Background Image of the document
textSpecifies the Color of the text in a document
LinkSpecifies the Color of unvisited link in a document
vlinkSpecifies the Color of visited link in a document
alink Specifies the Color of an active link in a document
oncontextmenu To disable right click properties on a webpage. default value is return false
ondragstartTo disable dragging of an image on a webpage. default value is return false
onselectstartTo disable the text selection on a webpage. default value is return false

<!DOCTYPE html>
<html>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" bgcolor="green" > <p> OUTDOORS </p>
<p> IS WHERE LIFE HAPPENS </p>
<p> Discover Our Tours </p>
<img src="banner.jpg"/>
</body>
</html>

HTML Font Tag

<html>
<body>
<p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5 and in red text color. </font> </p>
<p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3 and in blue text color. </font></p> </body>
</html>

HTML Tables

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. A <td> tag can contain text, links, images, lists, forms other tables etc.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<h3>Basic Table</h3>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute.

<table border="5">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

HTML Table Width & Height Attributes

To specify the width & Height of a table in pixels or %.

<table border="1" width="50%" height="100"> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers will display the text in the <th> element as bold and centered.

<table border="1" width="50%" height="40">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

HTML Table Caption

To add a caption to a table use the <caption> tag. We can align caption using align attribute like this <caption align=top | bottom>

<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

HTML Table Cellpadding Attribute

cellpadding specifies the space between the cell content and its borders.

<table border="1" cellpadding="15"> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

HTML Table Cellspacing Attribute

cellspacing specifies the space between the cells.

<table border="1" cellspacing="15"> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

HTML Table Cells that Span Many Columns

To make a cell span more than one column use the colspan attribute.

<html>
<body>
<table border width="60%" height="50%"> <caption>Invoice</caption> <tr>
<th>Item / Desc.</th>
<th>Qty.</th>
<th>@</th>
<th>Price</th>
</tr>
<tr>
<td>Paperclips (Box)</td>
<td>100</td>
<td>1.15</td>
<td>115.00</td>
</tr>
<tr>
<td>Paper (Case)</td>
<td>10</td>
<td>45.99</td>
<td>459.90</td>
</tr>
<tr>
<td>Wastepaper Baskets</td>
<td>2</td>
<td>17.99</td>
<td>35.98</td>
</tr>
<tr>
<th colspan="3">Subtotal</th>
<td>610.88</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td>7%</td>
<td>42.76</td>
</tr>
<tr>
<th colspan="3">Total</th>
<td>653.64</td>
</tr>
</table>
</body>
</html>

HTML Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute.

<html>
<body>
<table border width="60%" height="50%">
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th> <th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
</body>
</html>

Table and Tr Tag Attributes

There are many attributes of this tag which are as follows.

Attribute NameDescription
alignLeft | Right | Center
valignTop | Bottom | Middle
bgcolorSpecifies background color of a table
backgroundSpecifies background image of a table

HTML Lists

The most common HTML lists are ordered and unordered lists.

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).

<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ul>

HTML Unordered List the Type Attribute

The type attribute of the <ul> tag is used to define the type of the list item marker.

ValueDescription
type="disc"Sets the list item marker to a bullet (default)
type="circle"Sets the list item marker to a circle
type="square"Sets the list item marker to a square
type="none"The list items will not be marked

<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ul>

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.

<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ol>

HTML Ordered List the Type Attribute

The type attribute of the <ol> tag define the type of the list item marker.

ValueDescription
type="disc"Sets the list item marker to a bullet (default)
type="circle"Sets the list item marker to a circle
type="square"Sets the list item marker to a square
type="none"The list items will not be marked
type="i"The list items will be numbered with lowercase roman numbers

<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number you can use the start attribute.

<ol start="50">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ol>

Nested HTML Lists

List can be nested (lists inside lists).

<ul>
<li>Graphic Designing</li>
<ul>
<li>Corel Draw</li>
<li>Adobe Photoshp</li>
</ul>
<li>UI/UX Designing</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
</ul>
</ul>

HTML Definition Lists

A definition list is a list of items with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

<dl>
<dt>What is Frontend?</dt>
<dd>Frontend is the part of the website that you can see and interact with directly in order to receive the backend capabilities of the system. It involves everything that the user can see, touch and experience. The role of a web designer has changed dramatically over the years but the core functions of website development remains the same.</dd>
<dt>What is Backend?</dt>
<dd>Backend, also referred to as the “server-side”, is the part of the website which you cannot see and  interact with. Basically, everything that happens behind the scenes can be attributed to the backend web development. It is all about how the website works; it’smor like an indirect service provider for the frontend development.</dd>
</dl>

Color Values

HTML colors are specified using predefined color names, RGB, HEX and HSL values. Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. https://htmlcolorcodes.com/

RGB Value

In HTML, a color can be specified as an RGB value, using this formula. rgb(red, green, blue) 

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example rgb(255, 0, 0) is displayed as red because red is set to its highest value (255) and the others are set to 0. To display the color black all color parameters must be set to 0, like this: rgb(0, 0, 0). To display the color white all color parameters must be set to 255, like this: rgb(255, 255, 255).

HEX Value

In HTML a color can be specified using a hexadecimal value in the form. #rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example #ff0000 is displayed as red because red is set to its highest value (ff) and the others are set to the lowest value (00).

HSL Value

In HTML a color can be specified using hue, saturation and lightness (HSL) in the form. hsl(hue, saturation, lightness)
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green and 240 is blue.
  • Saturation is a percentage value 0% means a shade of gray and 100% is the full color.
  • Lightness is also a percentage 0% is black, 50% is neither light or dark, 100% is white

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag. The src attribute specifies the URL (web address) of the inline frame page.

<iframe src="URL"></iframe>

Iframe - Set Height & Width

Use the height and width attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%").


 <iframe src="index.html" height="200" width="300"></iframe>

Iframe Target for a Link

An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe.

<iframe src="index.html" name="iframe_a"></iframe>
<p><a href="https://www.coderindeed.in" target="iframe_a">CoderIndeed WebSite</a></p>

HTML Head Element

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script> and <style>.

HTML Meta Element

The <meta> element is used to specify page description, keywords, author and other metadata. Metadata is used by browsers (how to display content), by search engines (keywords) and other web services.

Define a description of your web page:

<meta name="description" content="Computer Training Institute in Ludhiana">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">
<head>
<meta name="description" content="Coderindeed">
<meta name="keywords" content="HTML,CSS,JavaScript,Bootstrap">
<meta name="author" content="CI">
<meta http-equiv="refresh" content="30">
</head> 

Setting the Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user's visible area of a web page. It varies with the device and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale= 1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

HTML Base Element

The <base> element specifies the base URL and base target for all relative URLs in a page:

<head>
<base href="https://www.google.com" target="_blank">
</head>

HTML Forms

The HTML <form> element defines a form that is used to collect user input. An HTML form contains form elements. Form elements are different types of input elements like text fields, checkboxes, radio buttons, submit buttons and more.

The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. If the type attribute is omitted, the input field gets the default type: "text".

Here are some examples:

Text Input

Defines a one-line input field for text input:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Radio Button Input

Defines a radio button. Radio buttons let a user select ONE of a limited number of choices.

<form>
<input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>

Input Type Checkbox

Defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

Input Type Password

Defines a password field:

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Input Type Color

The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.

<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Input Type Date

The <input type="date"> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field.

<form>
Birthday:
<input type="date" name="bday">
</form>

You can also use the min and max attributes to add restrictions to dates:

<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br> </form>

Input Type Datetime-Local

The <input type="datetime-local"> specifies a date and time input field with no time zone.
Depending on browser support, a date picker can show up in the input field.
 
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime"> </form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type and add ".com" to the keyboard to match email input.

<form>
E-mail:
<input type="email" name="email">
</form>

Input Type File

Defines a file-select field and a "Browse" button for file uploads.

<form>
Select a file: <input type="file" name="myFile">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field.

<form>
Birthday (month and year):
<input type="month" name="bdaymonth"> </form>

Input Type Number

The <input type="number"> defines a numeric input field. You can also set restrictions on what numbers are accepted. The following example displays a numeric input field, where you can enter a value from 1 to 5.

<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"> </form>

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30.

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

<form>
Search Google:
<input type="search" name="googlesearch"> </form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.

<form>
Select a time:
<input type="time" name="usr_time"> </form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type and adds ".com" to the keyboard to match url input.

<form>
Add your homepage:
<input type="url" name="homepage"> </form>

Input Type Week

The <input type="week"> allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field.

<form>
Select a week:
<input type="week" name="week_year"> </form>

Select Element

The <select> element defines a drop-down list. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. 

<p><strong>Select your favorite species of flamingo.</strong></p>
<select>
<option value="American">American flamingo</option>
<option value="Andean">Andean flamingo</option>
<option value="Chilean">Chilean flamingo</option>
<option value="Greater">Greater flamingo</option>
<option value="James's">James's flamingo</option>
<option value="Lesser">Lesser flamingo</option>
</select>

To define a pre-selected option add the selected attribute to the option:
<option value="fiat" selected>Fiat</option>

Visible Values

Use the size attribute to specify the number of visible values:

<select name="cars" size="3">
<option value="American">American flamingo</option>
<option value="Andean">Andean flamingo</option>
<option value="Chilean">Chilean flamingo</option>
<option value="Greater">Greater flamingo</option>
<option value="James's">James's flamingo</option>
<option value="Lesser">Lesser flamingo</option>
</select>

Allow Multiple Selections

Use the multiple attribute to allow the user to select more than one value.

<select name="cars" size="4" multiple>
<option value="American">American flamingo</option>
<option value="Andean">Andean flamingo</option>
<option value="Chilean">Chilean flamingo</option>
<option value="Greater">Greater flamingo</option>
<option value="James's">James's flamingo</option>
<option value="Lesser">Lesser flamingo</option>
</select>

Optgroup Element

The <optgroup> is used to group related options in a drop-down list. If you have a long list of options groups of related options are easier to handle for a user.

<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option> </optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>

The Textarea Element

The <textarea> element defines a multi-line input field (a text area). The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30"> </textarea>

HTML5 Datalist Element

The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

HTML ATTRIBUTES

Name Attribute

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. This example will only submit the "Last name" input field.

<form>
First name:<br>
<input type="text" value="Ram"><br> Last name:<br>
<input type="text" name="lastname" value="Sharma"><br><br> <input type="submit" value="Submit"> </form>

Value Attribute

The value attribute specifies the initial value for an input field.
<input type="text" name="firstname" value="Ram">

Readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed).
<input type="text" name="firstname" value="Ram" readonly>

Disabled Attribute

The disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form.
<input type="text" name="firstname" value="Ram" disabled

Size Attribute

The size attribute specifies the size (in characters) for the input field.
<input type="text" name="firstname" value="Ram" size="40">

Maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field.
<input type="text" name="firstname" maxlength="10">

Autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa. The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range and color.
<form autocomplete="on">

Novalidate Attribute

The novalidate attribute is a <form> attribute. When present novalidate specifies that the form data should not be validated when submitted.

<form novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

Autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads. Let the "First name" input field automatically get focus when the page loads.
First name:<input type="text" name="fname" autofocus>

Pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against. The pattern attribute works with the following input types: text, search, url, tel, email and password.
Country code: <input type="text" name="country_code" pattern=" [A-Za-z]{3}" title="Three letter country code">

Placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format). The hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email and password.
<input type="text" name="fname" placeholder="First Name">

Required Attribute

The required attribute specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.
Username: <input type="text" name="usrname" required>

Step Attribute

The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6 etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.
<input type="number" name="points" step="3">

Input Type Reset

Defines a reset button that will reset all form values to their default values.
<form>
First name:<br>
<input type="text" name="firstname" value="Ram"><br> Last name:<br>
<input type="text" name="lastname" value="Sharma"><br><br> <input type="submit" value="Submit"> <input type="reset">
</form>

The Submit Button

Defines a button for submitting the form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute.
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Ram"><br> Last name:<br>
<input type="text" name="lastname" value="Sharma"><br><br> <input type="submit" value="Submit"> </form>

Action Attribute

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data.
<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame or in the current window. The default value is "_self" which means the form will be submitted in the current window.

To make the form result open in a new browser tab, use the value "_blank".
<form action="/action_page.php" target="_blank">

Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.
<form action="/action_page.php" method="get">
or:
<form action="/action_page.php" method="post">

When to Use Get?

The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field. /action_page.php?firstname=Mickey&lastname=Mouse 

 Notes on GET:

  • Appends form-data into the URL in name/value pairs
  • The length of a URL is limited (about 3000 characters)
  • Never use GET to send sensitive data! (will be visible in the URL)
  • Useful for form submissions where a user wants to bookmark the result
  • GET is better for non-secure data, like query strings in Google

When to Use Post?

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Notes on POST:

  • POST has no size limitations, and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked

Grouping Form Data with Fieldset

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend> First name:<br>
<input type="text" name="firstname" value="Ram"><br> Last name:<br>
<input type="text" name="lastname" value="Sharma"><br><br> <input type="submit" value="Submit"> </fieldset>
</form>

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Images, music, sound, videos, records, films, animations and more. Web pages often contain multimedia elements of different types and formats.

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv and .avi.

Video Element

To show a video in HTML, use the <video> element.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

The controls attribute adds video controls, like play, pause and volume. It is a good idea to always include width and height attributes. If height and width are not set the page might flicker while the video loads.

Video Autoplay

To start a video automatically use the autoplay attribute.

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

Audio Element

To play an audio file in HTML, use the <audio> element.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

HTML Audio - How it Works

The controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

HTML Helpers (Plug-Ins)

Helper applications (plug-ins) are computer programs that extend the standard functionality of a web browser. Plug-ins can be added to web pages with the <object> tag or the <embed> tag.

Object Element

The <object> element is supported by all browsers. The <object> element defines an embedded object within an HTML document.
<object width="400" height="50" data="bookmark.swf"></object>

The <object> element can also be used to include HTML in HTML:
<object width="100%" height="500px" data="snippet.html"></object>

Or images if you like:
<object data="audi.jpeg"></object>

Embed Element

The <embed> element is supported in all major browsers. The <embed> element also defines an embedded object within an HTML document. Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.
<embed width="400" height="50" src="bookmark.swf">

Note that the <embed> element does not have a closing tag. It cannot contain alternative text.
The <embed> element can also be used to include HTML in HTML:
<embed width="100%" height="500px" src="snippet.html">

Or images if you like:
<embed src="audi.jpeg">

HTML YouTube Video Id

YouTube will display an id (like dQw4w9WgXcQ), when you save (or play) a video. You can use this id, and refer to your video in the HTML code. To play your video on a web page, do the following.
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"> </iframe>

Youtube Autoplay

You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL.
Value 0 (default): The video will not play automatically when the player loads.
Value 1: The video will play automatically when the player loads.
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"> </iframe>

Youtube Loop

Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
<iframe width="420" height="315" src="https://www.youtube.com/embe/dQw4w9WgXcQ?playlist=tgbNymZ7vq&loop=1">
</iframe>

Youtube Controls

Value 0: Player controls does not display.
Value 1 (default): Player controls display.
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>

Youtube - Using Object or Embed

<object width="420" height="315" data="https://www.youtube.com/embed/dQw4w9WgXcQ"> </object>

HTML Entities

Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML.

Some Other Useful HTML Character Entities

Result
 Description
 Enity Name
 Entity Number
 
 non-breaking space
 &nbsp;
&#160;
<
 less than
 &lt;
&#60;
>
 greater than
 &gt;
&#62;
&
 ampersand
 &amp;
&#38;
"
 double quotation mark
 &quot;
&#34;
'
 single quotation mark
 &apos;
&#39;
¢ cent
 &cent;
&#162;
£ pound
 &pound;
&#163;
¥ yen
 &yen;
&#165;
€ euro
 &euro;
&#8364;
© copyright
 &copy;
&#169;
® registered trademark
 &reg;
&#174

Marquee Element

The <marquee> is a HTML tag which was used to create a scrolling text or an image. It was used to make the text/image scroll horizontally across or vertically down the web page.
<marquee direction="" width="" bgcolor="">A scrolling text created with HTML Marquee element. </marquee>

Marquee Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.t

S.NoAttribute & Description
1Width: This specifies the width of the marquee. This can be a value like 10 or 20% etc.
2Height: This specifies the height of the marquee. This can be a value like 10 or 20% etc.
3Direction: This specifies the direction in which marquee should scroll. This can be a value like up down left or right.
4Behavior: This specifies the type of scrolling of the marquee. This can have a value like scroll slide and alternate.
5Scrolldelay: This specifies how long to delay between each jump. This will have a value like 10 etc.
6Scrollamount: This specifies the speed of marquee text. This can have a value like 10 etc.
7Loop: This specifies how many times to loop. The default value is INFINITE which means that the marquee loops endlessly.
8Bgcolor: This specifies background color in terms of color name or color hex value.
9Hspace: This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
10Vspace: This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

HTML5 New Elements

Many web sites contain HTML code like <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header and footer. HTML5 offers new semantic elements to define different parts of a web page.

TagDescription
<header>Defines a header for a document or a section
<nav>Defines a container for navigation links
<section>Defines a standalone section in a document
<main>Defines the main/unique content of a document
<article>Defines an independent self-contained article
<aside>Defines content aside from the content (like a sidebar)
<footer>Defines a footer for a document or a section
<details>Defines additional details that the user can view or hide
<summary>Defines a visible heading for the <details> element
<figure>Defines a self-contained content like illustrations diagrams photos etc.
<figcaption>Defines a caption for a <figure> element

Header Element

The <header> element specifies a header for a document or section. Typically, when the <header> element is used as a page header, it contains the site's title or logo (or both) and the main site navigation.

<body>
<header>
<a src="/" id="logo">Site Title</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</body>

Nav Element

The <nav> element defines a set of navigation links. The <nav> element is intended for large blocks of navigation links. However not all links in a document should be inside a <nav> element!

<body>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">Bootstrap</a>
</nav>
</body>

Section Element

The <section> element defines a section in a document such as chapters, headers, footers or any other sections of the document. Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items and another section for contact information.

<body>
<section>
<h1>Introduction</h1>
<p>People have been catching fish for food since before recorded history...</p>
</section>
<section>
<h1>Equipment</h1>
<p>The first thing you'll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you're expecting to try to land...</p>
</section>
</body>

Main Element

The <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos and search forms. There must not be more than one <main> element in a document.

<body>
<main>
<h2>Gecko facts</h2>
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p> </main>
</body>

Article Element

The <article> element specifies independent, self-contained content. An article should make sense on its own and it should be possible to read it independently from the rest of the web site.

<body>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>

Aside Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content.

<body>
<aside>70% of the world's reefs will be destroyed over the next 40 years. </aside>
<p>Global warming is affecting coral reefs all over the world. At the current rate, 70% of the world's reefs will be destroyed over the next 40 years.</p>
<p>As hopeless as this may sound, there are things we can do to help. By developing greener habits, we can all do our part in reducing global warming.</p>
<p>We can use a green font for example. And we can use images with a green tinge to them. Heck, we can even use a green background too!</p>
</body>

Footer Element

The <footer> element specifies a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information etc. You can have several <footer> elements in one document.

<body>
<footer>
<address>
Postal Address: Door No.00, Street, City, State, Country.
</address>
<p>Copyright © 2018 All rights reserved.</p>
</footer>
</body>

Details Element

The <details> tag specifies additional details that the user can view or hide on demand. The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. The content of a <details> element should not be visible unless the open attribute is set.

<body>
<details>
<summary>Click to open</summary>
<p>If your browser supports this element, it should allow you to expand and collapse these details.</p> </details>
</body>

Open Attribute

<details open>
<summary>Click to open</summary>
<p>If your browser supports this element, it should allow you to expand and collapse these details.</p>
</details>

Figure Element

The <figure> tag specifies self-contained content like illustrations, diagrams, photos, code listings etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow and if removed it should not affect the flow of the document.
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

Figure Caption Element

The <figcaption> tag defines a caption for a <figure> element.
<figure>
<img src="../html/pic_trulli.jpg" alt="Trulli" width:"100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>

That's All! Follow Us on Telegram and Instagram.



Tags

You may like these posts

Show more

Post a Comment

0Comments

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Check Now
Accept !
Share to other apps
Copy Post Link