Html tutorial by Nagaraju Mamillapally

2016

HTML Tutorial Tutorial for Beginners and Web Developers This HTML Tutorial documentation was prepared to support beginners. We tried our best to make the content so simple for understanding. Feel free to mail us for suggestions. Visit: http://iotearth.in for more.

http://iotearth.in Technology for You 2/11/2016

HTML Introduction What is HTML?

HTML stands for hypertext markup language used to describe the structure of web pages using markup. HTML is a scripting language used to develop static web pages. HTML code is edited in any editors including note pad and even in IDEs. The edited code is executed in any browser. Browsers eliminate the tags used and just present the content we intended to without or with applied formatting. HTML elements are represented as tags which is a single or a group of characters enclosed within angular brackets (<a> or <html>). All HTML tags are predefined and do not support user-defined tags.

A Simple HTML Document Example <!DOCTYPE html> <html> <head> <title>Title of the page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Example Explained The <!DOCTYPE html> defines as HTML document The <html> tag is the root element for an HTML page The <head> tag contains meta information of the document The <title> tag is used to specify a title to a document The <body> tag contains the content to display on web page The <h1> tag defines a maximum heading size The <p> tag defines content as paragraph

HTML Tags HTML tags are element names are enclosed by using angle brackets:

<tagname>webpage content goes here...</tagname> HTML tags normally come in pairs like <p> (start/opening tag) and </p> (end/closing tag prefixed with slash) and unpairs like <br>.

Web Browsers All web browsers HTML documents to dispaly their content in them. The browsers that supports HTML are Netscape Navigator, Microsoft Internet Explorer, Google Chrome, Mozilla Firefox etc..

HTML Document Structure The below is the most common structure followed by an HTML page. <html> <head> <title>Title of the page</title> </head>

HTML Versions Version

Year

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2014

HTML Head The HTML <head> Element The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag. Metadata describes the data about the HTML document. Metadata is used to internal purpose and not displayed. Metadata defines the document title <title>, character set <meta>, styles <style>, links <link>, scripts <script>, and other meta information.

The HTML <title> Element The <title> element is used to define the title of the document. The <title> element: defines a title displayed on the browser title bar provides page title and is used to add it to favorites displays page title in search engine results

A simple HTML document:

Example <!DOCTYPE html> <html> <head> <title>Webpage Title</title> </head>

<body> The content of the document...... </body> </html>

The HTML <style> Element The <style> element defines style information for a single HTML page:

Example

The HTML <link> Element The <link> element defines link to external style sheets:

Example <link rel="stylesheet" href="mystyle.css">

The HTML <meta> Element The <meta> element defines which character set is used, page description, keywords, author, and other metadata. Define the character set used: <meta charset="UTF-8">

Define a description of your web page: <meta name="description" content="Free HTML tutorials">

Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, JavaScript">

Define the author of a page: <meta name="author" content="W3C Schools">

Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">

Example of <meta> tags:

Example <meta charset="UTF-8"> <meta name="description" content="Free HTML tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="W3C Schools">

The HTML <script> Element The <script> element defines client-side JavaScript.

Example <script> function myFunction { document.getElementById("demo").innerHTML = "Hello HTML and JavaScript!"; } </script>

The HTML <base> Element The <base> element define to specify the base URL and base target for all relative URLs in a page:

Omitting <html>, <head> and <body>? HTML5 supports omitting of the <html>, the <body>, and the <head> tags.

Example <!DOCTYPE html> <title>Page Title</title><h1>This is an important heading</h1> <p>This is a paragraph ceontent.</p>

Note: We strongly recomment to use the <html> and <body> tags in order to avoid crashing of DOM or XML software and produce errors in older browsers like IE9.

HTML head Elements Tag

Description

<head> Defines information about the document <title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page <link>

Defines the relationship between a document and an external resource

HTML Heading Tags HTML defined Headings with the <h1> to <h6> tags. <h1> defines the most important heading. It displays content with highest font size among other heading tags. <h6> defines the least important heading, displays the content with the lowest font size among other heading tags.

Example <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> Note: By default all browsers automatically add some white space before and after a heading.

HTML Horizontal Rules The <hr> tag is used to display a horizontal line which can be used as a content separator or a thematic break in between HTML page content.

Example <p>Sample text</p> <hr> <p>Sample text</p> <hr>

The HTML <head> Element The HTML <head> element and HTML headings are different. The <head> element consists of metadata about the HTML document. Meta data includes document title, character set, links, styles, scripts, and other meta information. Metadata is not displayed. The <head> element is the first section of the HTML code and is placed between the <html> tag and the <body> tag.

Example <!DOCTYPE html> <html> <head> <title>Welcome to HTML</title> <meta charset="UTF-8"> </head> <body> . . . </body> </html>

HTML Paragraphs The HTML <p> element is used to define a paragraph:

Example <p>This is a paragraph</p> <p>This is another paragraph</p> <p>This is yet another paragraph</p> Note: By default all browsers automatically add some white space before and after a paragraph.

HTML Line Breaks The HTML <br> element is used to define a line break (a new line) between the document content.

Example <p>This is<br>a paragraph<br>with two line breaks.</p> The <br> tag is an unpaired empty tag, which never has an end tag.

The HTML <pre> Element The HTML <pre> element is used to define text with preformatted. The text inside a <pre> element is displayed with courier font style.

Example <pre> This text line 1 is preformatted. This text line 2 is preformatted. This text line 3 is preformatted. </pre>

HTML Styles This text is in red color This text is in blue color

The HTML Style Attribute HTML style elements can be represented by specifying their values. This can be done with the style attribute. The syntax of HTML style attribute is: <tagname style="property:value;"> The property is a CSS property and also called as a selector property. The value is a CSS value specified for a particular property. We can specify any number of styles to a particular tag individually. We can learn more about CSS later in HTML CSS tutorial.

HTML Background Color The background-color property is used to define an HTML elements background color.

Example <body style="background-color:blue;"> <h1>This is an important heading</h1> <p>This is a paragraph content.</p> </body>

HTML Text Color The color property is used to define an HTML elements text color:

Example <h1 style="color:red;">This is an important heading</h1> <p style="color:green;">This is a paragraph content.</p>

HTML Fonts The font-family property is used to define an HTML elements font to be displayed:

Example <h1 style="font-family:arial;">This is a important heading</h1> <p style="font-family:courier;">This is a paragraph content.</p>

HTML Text Size The font-size property is used to define HTML elements text size:

Example <h1 style="font-size:100%;">This is an important heading</h1> <p style="font-size:60%;">This is a paragraph content.</p>

HTML Text Alignment

The text-align property is used to define the horizontal text alignment of an HTML element. By default all the HTML document content is aligned left.

Example <h1 style="text-align:center;">Centered Important Heading</h1> <p style="text-align:right;">Paragraph aligned right.</p>

HTML Text Formatting HTML supports some basic formatting that can be applied individually or as a group to its elements.

HTML Formatting Elements HTML uses the following elements for formatting output text. <b> <strong> <i> <em> <mark> <small> <del> <ins> <sub> <sup>

- Bold text - Important text - Italic text - Emphasized text - Marked text - Small text - Deleted text - Inserted text - Subscript text - Superscript text

HTML Elements Example Example <b>This text is bold</b> <strong>This text is strong</strong> <i>This text is italic</i> <em>This text is emphasized</em> <h2>HTML <small>Small</small> Formatting</h2> <h2>HTML <mark>Marked</mark> Formatting</h2> <p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p> <p>This is <sub>subscripted</sub> text.</p> <p>This is <sup>superscripted</sup> text.</p>

The HTML <b> element is used to define bold text. The HTML <strong> element is used to define semantic strong text. The HTML <i> element is used to define italic text. The HTML <em> element is used to define semantic emphasized text. The HTML <small> element is used to define smaller text. The HTML <mark> element is used to define marked or highlighted text. The HTML <del> element is used to define deleted (removed) text. The HTML <ins> element is used to define inserted (added) text. The HTML <sub> element is used to define subscripted text. The HTML <sup> element is used to define superscripted text.

HTML Quotation and Citation Elements Tag

Description

<abbr>

Defines an abbreviation or acronym

Defines contact information for the author/owner of a document

<bdo>

Defines the text direction

<blockquote> Defines a section that is quoted from another source <cite>

Defines the title of a work

<q>

Defines a short inline quotation

HTML Computer Code Elements Tag

Description

<code> Defines programming code <kbd>

Defines keyboard input

<samp> Defines computer output <var>

Defines a variable

<pre>

Defines preformatted text

HTML Comments Comment tags are used to insert comments in the HTML program code.

HTML Comment Tags We can add comments to HTML program as: <!â&#x20AC;&#x201D;Specify your comments here -->

Follow the exact format to view its result. Comments are also just as a supporting text for debugging HTML.

Conditional Comments We can also specify conditional based comments in HTML:

This code comments defines some HTML tags to be executed in Internet Explorer only.

HTML Colors In HTML, a color value can be specified by using a color name with its RGB value, or a HEX value notation.

Color Names In HTML, a color can be specified by using a color name:

Example Color Name Red Orange Yellow Cyan Blue

Example Color

RGB rgb(255,0,0) rgb(255,255,0) rgb(0,255,0) rgb(0,255,255) rgb(0,0,255)

HEX Value HEX values are base 16 numbers. In HTML, a color can also be specified using a hexadecimal notation value as: #RRGGBB, where RR is for red, GG is for green and BB is for blue and their hexadecimal values will be in between 00 and FF..

Example Color

HEX #FF0000

#FFFF00 #00FF00 #00FFFF #0000FF

HTML Styles - CSS Styling HTML with CSS CSS stands for Cascading Style Sheets. It describes hot HTML elements are to be displayed on a media like screen, paper and other media. CSS supports CODE RESUABILITY where CSS code written once can be used for multiple times. CSS are of 3 types: Inline – Styles are applied as an attribute to an HTML element Internal – Styles are applied by using a <style> element in the <head> section External – Styles are defined as an external CSS file

It is better to define styles in a separate file for code reusability.

Inline CSS An inline CSS defines a unique style to a specific HTML element. An inline CSS defines the style attribute of an HTML element.

Example <h1 style="color:red;">This is a Red Important Heading</h1>

Internal CSS An internal CSS defines a style for a single HTML page.

Example <!DOCTYPE html> <html>

<head> <style> body {background-color: red;} h1 {color: green;} p {color: blue;} </style> </head> <body> <h1>This is an important heading</h1> <p>This is a paragraph content.</p> </body> </html>

External CSS An external style sheet defines the styles which can be applied to an entire website at a time by choosing one file. <link> element is used in the <head> section of the HTML page to link the content and their styles:

Example <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type=”text/css” media=”screen”> </head> <body> <h1>This is an important heading</h1> <p>This is a paragraph ceontent.</p> </body> </html>

An external style sheet can be defined in a separate file and saved with a .css extension. Here is how the "styles.css" looks: body { background-color: red; } h1 {

color: green; } p{ color: blue; }

CSS Fonts The CSS color property defines the text color, font-family property defines the font, fontsize property defines the size of the text.

Example <!DOCTYPE html> <html> <head> <style> h1 { color: red; font-family: arial; font-size: 100%; } p { color: blue; font-family: verdana; font-size: 60%; } </style> </head> <body> <h1>This is an important heading</h1> <p>This is a paragraph content.</p> </body> </html>

CSS Border This border property is used to define HTML elements border around it:

Example

p{ border: 1px solid red; }

CSS Padding The CSS padding property is used to define a padding or space between the text to the border:

Example p{ border: 1px solid red; padding: 20px; }

CSS Margin The CSS margin property is used to define a margin or space outside the border of HTML element:

Example p{ border: 1px solid red; margin: 30px; }

The id Attribute This attribute is to define a specific style for a specific element: <p id="pid1">I am too specific</p>

defines a style for the element with the specific id and is to be unique within a page:

Example #pid1 { color: red; }

The class Attribute This attribute is to define a style for a specific type of elements: <p class="pclass">I am too specific</p>

then define a style for the elements with the specific class:

Example p.pclass { color: red; }

HTML Links Links are used to navigate from one page to another page or from one portion of a page to another portion of the same page.

HTML Links - Hyperlinks HTML links are hyperlinks can jump to another document by just clicking on it. Hyperlink can be a text or an image or any other HTML element. When we move the mouse over a link, the mouse arrow pointer will turn into a little hand.

HTML Links - Syntax In HTML, links are used to define with the <a> tag: <a href="url">hypertext</a>

Example <a href="http://iotearth.in/html tutorial part-5/">Visit our HTML tutorial</a>

Here href attribute specifies the destination address of the link. The address links can be specified as either absolute (if source and destination are in different folders) or relative (if source and destination are within the same folder).

The example above used an absolute URL (A full web address). A relative link is specified without http://www.....

Example <a href="html_images.bmp">HTML Images</a>

HTML Link Colors By default, a link will be displayed with: An unvisited link is underlined and blue color A visited link is underlined and purple color An active link is underlined and red color

You can change the default colors, by using styles:

Example <style> a:link {color:red; background-color:transparent; text-decoration:underline} a:visited {color:green; background-color:transparent; text-decoration:underline} a:hover {color:yellow; background-color:transparent; text-decoration:none} a:active {color:blue; background-color:transparent; text-decoration:none} </style>

HTML Links with a target Attribute The target attribute is used to specify where the linked document to be opened. We can use target attribute with the following values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example <a href="http://iotearth.in/" target="_blank">Visit HTML Tutorial Series!</a>

Tip: If your webpage is within a frame, the use target="_top":

Example <a href="http://iotearth.in/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link It is common to use images as links:

Example <a href="default.jsp"> <img src="building.jpg" alt="HTML tutorial" style="width:40px;height:40px;border:1;"> </a>

HTML Links - Create a Bookmark HTML bookmarks are used to jump to specific parts of a Web page. This is useful when the webpage is very long. To use bookmark, first create a bookmark and add a link to it, then clicking on it makes to scroll to the location with the bookmark.

Example First, create a bookmark with the id attribute: <h1 id="top"> Top Section</h2>

Then, add a link to the bookmark: <a href="#top">Visit the Top Section</a>

Or, add a link to the bookmark, from another page:

Example <a href="html_basics.html#top">Visit the Top Section</a>

HTML Images Example

<!DOCTYPE html> <html> <body> <h2>Beautiful Scene</h2> <img src="pic_scene.jpg" alt="Nature View" style="width:200px;height:160px;"> </body> </html>

HTML Images Syntax In HTML, images are defined with the <img> tag. This tag is used as an unpaired tag means without closing tag. The src attribute is used to specify the URL/address of the image: <img src="url" alt="alternate_text" style="width:width;height:height;">

The alt Attribute The alt attribute specified an alternate text for an image, It is useful when a browser cannot find an image, it will display the alt attribute value:

Example <img src="incorrectname.jpg" alt="HTML Icon" style="width:150px;height:150px;">

Image Size - Width and Height By using style attribute also we can specify the width and height in pixels (px) of an image.

Example <img src="html.jpg" alt="HTML Icon" style="width:150px;height:150px;">

Another option is to use the width and height attributes by specifying values in pixels.

Example <img src="html.jpg" alt="HTML Icon" width="150" height="150">

Note: Always specify the width and height of an image for better visibility.

Width and Height, or Style? HTML5 supports both the width, height, and style attributes. Make it a practice of using style attribute.

Example <!DOCTYPE html> <html> <head> <style> img { width:80%; } </style> </head> <body> <img src="htmllogo.jpg" alt="HTML Icon" style="width:150px;height:150px;"> <img src="htmllogo.jpg" alt="HTML Icon" width="150" height="150"> </body> </html>

Images in another Folder By default, the browser considers the relative path to identify image location in the same folder as the web page. Recommended to include the folder name in the src attribute:

Example <img src="/images/htmllogo.jpg" alt="HTML Icon" style="width:150px;height:150px;">

Images on another Server It is possible to access images from any web address.

Example <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Animated Images HTML also allows animated images with the GIF standard:

Example <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Using an Image as a Link Instead of text, sometimes images are used as hyperlinks. To do so, simply nest the <img> tag inside the <a> tag:

Example <a href="home.php"> <img src="HTMLlogo.gif" alt="HTML tutorial" style="width:40px;height:40px;border:1;"> </a>

Image Floating With the use of the CSS float property, we can let the images to float either from right to left or from left to right:

Example <p><img src="HTMLlogo.gif" alt="HTML Logo" style="float:right;width:40px;height:40px;"> The image will float to the right of the text.</p> <p><img src="HTMLlogo.gif" alt="HTML Logo" style="float:left;width:40px;height:40px;">

The image will float to the left of the text.</p>

Image Maps from W3C Schools By using the <map> tag we can define an image-map. An image-map is an image with clickable areas. The <map> tag name attribute is associated with the <img> usemap attribute

and creates an association between the image and the map. The <map> tag is specified with a number of <area> tags, which defines the clickable areas in the image-map:

Example <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

Note: Make sure of image sources used in the code availability

HTML Tables Defining an HTML Table To display the table of content on a webpage, HTML defined a tag <table> where the content can be represented in rows and columns. The <table> tag is considered as a parent tag (container tag) with <tr> and <td> tags. <tr> tag is used to define the rows and <td> tag define the content (text, image, list, tableâ&#x20AC;Ś.) of an individual cell. Number of <tr> tags used reflects the number of table rows and number of <td> tags used reflects the number of cells in each row. A table header is defined with the <th> tag. By default, table headings are bold and centered.

Example <table style="width:100%"> <tr> <th> Firstname</th> <th> Middlename</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Ronald</td> <td>Stephen</td> <td>Rose</td> <td>25</td> </tr> <tr> <td>St</td>

<td>Anthony</td> <td>Jain</td> <td> 30</td> </tr> </table>

HTML Table - Adding a Border By default, tables display without border. HTML defines a table to add a border by using border attribute. A border is set to a table as <table border=â&#x20AC;?2â&#x20AC;?> . . </table> This code displays a table border with 2px width. A border is also set using the CSS border property:

Example table, th, td { border: 2px solid black; }

We can also define borders for both the table and the table cells.

HTML Table - Collapsed Borders from W3C schools If you want the borders to collapse into one border, add the CSS border-collapse property:

Example table, th, td { border: 2px solid black; border-collapse: collapse; }

HTML Table - Adding Cell Padding Cell padding attribute of a <table> tag specifies the space between the cell content and its borders. <table cellpadding=”10”> . . </table> The CSS padding property is also defined to set the padding:

Example th, td { padding: 10px; }

HTML Table - Adding Border Spacing Border spacing specifies the space between the cells. Border spacing is also called as cell spacing. <table cellspacing=”10”> . . </table> To set the border spacing for a table, also use the CSS border-spacing property:

Example table { border-spacing: 5px; }

Note: Border spacing has no effect is identified if the table has collapsed borders.

HTML Table - Cells that Span Many Columns To make a cell span (merge) more than one column, use the colspan attribute for a <td> tag: <table> <tr> <td colspan=”2”>Text to merge</td> </tr> </table>

Example <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Profile</th> </tr> <tr> <td>Nagaraju</td> <td>9441168122</td> <td>+91-9441168122</td> </tr> </table>

HTML Table - Cells that Span Many Rows To make a cell span (merge) more than one row, use the rowspan attribute for a <td> tag: <table> <tr> <td rowspan=”2”>Text to merge</td> </tr> . . </table>

Example <table style="width:100%"> <tr> <th>Name:</th> <td>Nagaraju</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>9441168122</td> </tr> <tr> <td>+91-9441168122</td> </tr> </table>

HTML Table - Adding a Caption To add a caption (title) to a table, HTML defined <caption> tag:

Example <table style="width:100%"> <caption>Go Green</caption> <tr> <th>Go</th> <th>Green</th> </tr> <tr> <td>Save</td> <td>Tress</td> </tr> <tr> <td>Save</td> <td>Power consumption</td> </tr> </table>

HTML Lists HTML defines a provision to represent the content as a sequence of items called list. HTML allows defining list in 3 ways as Ordered List (arrangement of list items in a proper order) and Unordered List (arrangement of list items without a order), Description List (to describe each term in the list).

HTML List Example An Unordered List: Item Item Item Item

An Ordered List: 1. 2. 3. 4.

Item1 Item2 Item3 Item4

Unordered HTML List An unordered list is defined with a <ul> tag in which each list is defined with <li> tag. By default, the list items will be represented with bullets (small black circles):

Example <ul> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul>

Unordered HTML List - Choose List Item Marker HTML defines type attribute to represent the marker type of the list items. <ul type=â&#x20AC;?circleâ&#x20AC;?> The CSS list-style-type property is also used to define the style for representing the list items:

Value disc

Description Sets the list item with a bullet (default)

circle Sets the list item with a circle square Sets the list item with a square none

The list items will not be marked

Example - Disc <ul style="list-style-type:disc"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul>

Example - Circle <ul style="list-style-type:circle"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul>

Example - Square <ul style="list-style-type:square"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul>

Example - None <ul style="list-style-type:none"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul>

Ordered HTML List To represent the list items in an order HTML defined the <ol> tag and each list item with the <li> tag. The list items will be marked with numbers by default:

Example <ol> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol>

Ordered HTML List - The Type Attribute The type attribute of the <ol> tag, defines the type of the list item marker: Type

Description

type="1" The list items will be set with numbers (default) type="A" The list items will be set with uppercase letters type="a" The list items will be set with lowercase letters type="I" The list items will be set with uppercase roman numbers type="i" The list items will be set with lowercase roman numbers

Numbers: <ol type="1"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol>

Uppercase Letters: <ol type="A"> <li>Pen</li>

<li>Pencil</li> <li>Eraser</li> </ol>

Lowercase Letters: <ol type="a"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol>

Uppercase Roman Numbers: <ol type="I"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol>

Lowercase Roman Numbers: <ol type="i"> <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol>

HTML Description Lists HTML also supports description list which is quite different from other two types of lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example <dl> <dt>Pen</dt> <dd>- used to write on a paper</dd> <dt>Eraser</dt> <dd>- used to erase the written text </dd> </dl>

Nested HTML Lists List can be nested (lists inside lists):

Example <ul> <li>Pen</li> <li>Pencil</li> <ul> <li>Reynolds Pen</li> <li>HB Pencil</li> </ul> </li> <li>Eraser</li> </ul>

Note: List items can contain other HTML elements, like lists, images and links, etc.

Horizontal Lists from W3C Schools HTML lists can be styled a list horizontally to create a menu with CSS.

Example <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; }

li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>

HTML Block and Inline Elements Every HTML element will have certain value as default to display depending upon the type of element. For most elements default display value is block or inline.

Block-level Elements A block-level element starts in a new line and displays with full available width. Examples of block-level elements are: <div> <h1> - <h6> <p> <form>

Inline Elements An inline element does not start in a new line and displays with necessary width only. This is an inside inline <span> element a paragraph. Examples of inline elements are: <span> <a> <img>

The <div> Element The <div> element is also used as a container tag for other HTML elements. The <div> element has no additional attributes except style and class.

Example <div style="background-color:black;color:white;padding:20px;"> <h2>India</h2> <p>India is the most beautiful country with rich traditions and human values</p> </div>

The <span> Element The <span> element is another container used for some text. The <span> element also has no additional attributes except style and class.

Example <h1>Most<span style="color:red">Important</span> Heading</h1>

HTML Grouping Tags Tag <div>

Description Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

HTML class Attribute

Using the class Attribute The HTML class attribute makes it possible to define styles for elements with a specific and same class name.

Example <!DOCTYPE html> <html> <head> <style> div.places { background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; } </style> </head> <body> <div class="places"> <h2>India</h2> <p>India is the most ancient country with history of mankind, democracy and human traditions. Festivals in India bring all religious people together. </p> </div> <div class="vehicle"> <h2>Benz</h2> <p>Benz is a four wheeler car with a great horse power engine best suited to drive on highways and interior wide roads.</p> </div> </body> </html>

Using The class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:

Example <!DOCTYPE html> <html> <head> <style> span.alert { font-size: 120%; color: red; } </style> </head> <body> <h1>Most <span class="alert">Important</span> Heading</h1> <p>This is some most <span class="alert">important</span> text.</p> </body> </html>

HTML Forms HTML Form Example First name: Nagaraju

Last name: Mamillapally

The <form> Element The HTML <form> element is used to define a form. Forms are basically used to collect user input: <form> . form elements . </form>

An HTML form contains of several form elements used to accept different types of input elements like text fields, password fields checkboxes, radio buttons, submit button, reset button and more.

The <input> Element The <input> element is the most important form element collects different user inputs depending on the type attribute. Here are some examples: Type

Description

Defines a one-line text input field

Defines a radio button used for selection one among the choices

<input type="submit"> Defines a submit button used to submit form input

Text Input <input type="text"> defines a one-line input field for text input with a default width of 20 visible characters:

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

This is how it will look like in a browser: First name:

Middle name:

Last name:

Radio Button Input <input type="radio"> defines a radio button used to select one from a list of choices.

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

This is how the HTML code above will be displayed in a browser: Female Male Other

The Submit Button <input type="submit"> defines a button for submitting the form data to a form-handler for processing input data. The form-handler is typically a server page with a script to process the input data. The form-handler is specified in the form's action attribute:

Example <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mamillapally"><br> Last name:<br> <input type="text" name="lastname" value="Nagaraju"><br><br> <input type="submit" value="Submit"> </form>

This is how the HTML code above will be displayed in a browser:

First name: Mamillapally

Last name: Nagaraju

The Action Attribute The action attribute is used to define the action to be performed after the form is submitted. Normally, this can be done when the user clicks on the submit button. This page contains a server-side script that handles the form data: <form action="action_page.php">

If the action attribute is not specified, the action is set to the current page.

The Method Attribute The method attribute specifies the HTTP method (GET or POST) while submitting the form data: <form action="action_page.php" method="get">

or: <form action="action_page.php" method="post">

When to Use GET? Get method is the default method while submitting form data. When GET method is used for submission then the form data will be made visible in the page address field. action_page.php?firstname=Mamillapally&lastname=Nagaraju

Note: GET method is not suitable when sending the sensitive information.

When to Use POST?

Itâ&#x20AC;&#x2122;s better to use POST method always. This method does not display the submitted form data in the page address field. POST is best suited to send large amount of data.

The Name Attribute Each input field must have a name attribute for submission. If this attribute is omitted, the data sending will not be possible at all. This example will only submit the "Last name" input field:

Example <form action="action_page.php"> First name:<br> <input type="text" value="Mamillapally"><br> Last name:<br> <input type="text" name="lastname" value="Nagaraju"><br><br> <input type="submit" value="Submit"> </form>

Grouping Form Data with <fieldset> The <fieldset> element is used to define group related data in a form. The <legend> element is used to define a caption for the <fieldset> element.

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

This is how the HTML code above will be displayed in a browser: Personal information: First name: Mamillapally

Last name: Nagaraju

HTML Form Elements

The <input> Element The <input> element is the most important form element collects different user inputs depending on the type attribute.

The <select> Element The <select> element defines a drop-down list:

Example <select name="cars"> <option value="vista">Vista</option> <option value="indica">Indica</option> <option value="shift">Shift</option> <option value="dezire">Dezire</option> </select>

The <option> elements define options to select. By default, the first item in the drop-down list is selected. To redefine it, add the selected attribute to the option:

Example <option value="vista" selected>Vista</option>

The <textarea> Element The <textarea> element is used to define a multi-line text area input field:

Example

<textarea name="message" rows="10" cols="30"> http://iotearth.in is here to provide Knowledge as a Service </textarea>

The rows attribute specifies the number of visible lines in a text area and the cols attribute specifies the visible width of a text area. http://iotearth.in is here to provid

The <button> Element The <button> element is used to define a clickable button:

Example <button type="button" onclick="alert('Welcome to HTML')">Click Here!</button>

HTML Input Types This section describes different input types for the <input> element.

Input Type Text <input type="text"> defines a one-line text input field:

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

This is how the HTML code above will be displayed in a browser: First name: Last name:

Input Type Password <input type="password"> defines a password field:

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

This is how the HTML code above will be displayed in a browser: User name: User password:

The characters in a password field are displayed as asterisks or circles for security.

Input Type Submit <input type="submit"> is used to define a submitting form data button to a form-handler. The form-handler is specified using the form's action attribute:

Example <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mamillapally"><br> Last name:<br>

This is how the HTML code above will be displayed in a browser: First name: Mamillapally

Last name: Nagaraju

If you omit the submit button's value attribute, the button will get a default text:

Input Type Reset <input type="reset"> is used to define a reset button to reset all entered form values to their default values:

Input Type Radio

<input type="radio"> is used to define a radio button. This allows to select only one option form a limited number of choices.

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

This is how the HTML code above will be displayed in a browser: Male Female Other

Input Type Checkbox <input type="checkbox"> is used to define a checkbox. It allows to select ZERO or MORE options from a set of limited number of choices.

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

This is how the HTML code above will be displayed in a browser: I own a car I have a bike

Input Type Button <input type="button"> is used to define a button:

Example

HTML Iframes An iframe is HTML element used to display a web page within a web page.

Iframe Syntax An HTML iframe is defined with the tag <iframe>: <iframe src="URL"></iframe>

The src attribute specifies the URL of the inline frame page.

Iframe - Set Height and Width Use the height and width attributes are used to specify the size of the iframe. The size is specified in pixels by default, but can also be specified in percentage (%).

Example <iframe src="demo_iframe.htm" height="200" width="300"></iframe>

Iframe - Remove the Border By default, an iframe displays a border around it. Use CSS border property in a style attribute to remove the border.

Example <iframe src="demo_iframe.htm" style="border:none;"></iframe>

HTML defines the change of size, color and style of the iframe's border using CSS.

Example <iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

Iframe - Target for a Link An iframe element by using target attribute can be used as the target frame for a link by refering to the name attribute of the iframe:

Example <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://iotearth.in" target="iframe_a">IoTandEarth</a></p>

HTML iframe Tag Tag

Description

Note: Our authors followed the standards recommendations by W3C Schools to make the documentation simple to learn. This document is prepared to support students, instructors who are interested in web development and is not meant for commercial purpose.