HTML Quick Reference

HTML stands for HyperText Markup Language. HTML is the basic building block of World Wide Web. HTML is the standard markup language for creating Web pages.HTML describes the structure of a Web page.

HTML is the set of mark-up symbols or codes placed in a file that is intended for display on a webpage. These mark-up symbols and codes identify structural elements such as paragraphs, headings,and lists. HTML can also be used to place media (such as graphics, video, and audio) on a web pageand describe fill-in forms.

The browser interprets the mark-up code and renders the page. HTML permits the platform -independent display of information across a network. No matter what type of computer a web page was created on, any browser running on any operating system can display the page.

HyperTextMarkup Language (HTML) is a modern standard markup language that uses common abbreviations called "tags".

HTML was first devised in 1989 by British physicist Tim Berners-Lee at CERN in Switzerland (the European organization for nuclear research) to share all computer-stored information between the CERN physicists. Berners-Leecreated a text browser to transfer information over the internet using hypertext to provide point-and-click navigation. In May 1990 this system was named the World Wide Web and was enhanced in 1993 when college student Marc Andreessen added an image tag. Now that HTML could display both text and images, the World Wide Web quickly became highly popular.

Mark-up languages consist of sets of directions that tell the browser software (and other user agents such as mobile phones) how to display and manage a web document.

Each individual mark-up code is referred to as an element or tag. Each tag has a purpose. Tags are enclosed in angle brackets, the < and > symbols. Most tags come in pairs: an opening tag and a closing tag. These tags act as containers and are sometimes referred to as container tags. For example, the text that is between the < title > and </title > tags on a web page would display in the titlebar on the browser window.

Some tags are used alone and are not part of a pair. For example, a <hr> tag that displays ahorizontal line on a web page is a stand-alone or self-contained tag and does not have a closing tag.

A Simple HTML Document:   Try it  

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Paragraph</p>
</body>
</html>

Description of Tags

<!DOCTYPE html>Defines the HTML version used in the document. In this case it is HTML5.

<html> Marks the beginning and the end of the webpage.

<head> Contains elements that are not part of the webpage shown in the browser window. It mainly contains information about the HTML document, called metadata.

<title>Specifies text that appears in the title bar of the web browser opening the page.

<body> Includes contents that are visible in the main window of a web browser.

HTML tags introduction
Sl.No. Function Code Reference
1

Heading

HTML heading elements are created using <h1>,<h2>,<h3>,<h4>,<h5> and <h6> .

Each heading requires a matching closing tag and should only contain heading text. Typically, the heading’s font size and weight will reflect its importance, but headings also help readers quickly skim through a document by navigating its headings.

Using Headings

Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all the global attributes.

  • <h1> defines the most important heading.
  • <h6> defines the least important heading.

Defining a heading:

  • <h1>Heading 1</h1>
  • <h2>Heading 2</h2>
  • <h3>Heading 3</h3>
  • <h4>Heading 4</h4>
  • <h5>Heading 5</h5>
  • <h6>Heading 6</h6> 
<h1>My First Web Page </h1>
Try it   Project
2

Paragraphs

Paragraphs are the most basic HTML element. Paragraphs are used in text content to read it easily and more readily understood.

Paragraphs are contained within <p> and </p>tags. Each paragraph element is visually separated from the next one by the browser – typically leaving two empty lines between them. 
<p>This is a paragraph.</p>
Try it   Project
3

Single Line Break

<br> tag is used to provide a single line break between html elements. 
<p>This is a paragraph <br> 
with line break.</p>
Try it  
4

Horizontal rule

<hr>tag can be inserted between html elements to draw a line separating them. The<hr> tag and <br>tag are both single tags that need no matching closing tag. 
<p>Paragraph one.</p>  
<hr>
<p>Paragraph two.</p>
Try it  
5

Defining Preformatted Text

<pre> tag is used to display spaces, tabs, line breaks etc exactly as written in the HTML file. It is very helpful in presenting text where spaces and line breaks are important like poem or code. 
<pre>This is 
      a paragraph.
</pre>
Try it   Project
6

Attributes

Attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value".

Commonly used style attributes:

style="color:red"
style="color:rgb(25,25,150);"
style="color:red; background-color:yellow"
style="background-image:url(car.jpg)"
style="font-size:20px"
style="font-family:georgia,garamond,serif,verdana;"
style="text-align:center"
style="width:50px"
style="height:10px"
style="margin:10px"
style="padding:10px"
style="border:3px solid red";

<h1 style="color:red;">
Sri Ramanuja e-Patashala </h1>
Try it   Project
7

Class and ID Attributes

Class and ID attributes are used for referring HTML elements for applying styles and scripts.

The class attribute can be used on one or more tags and is used by CSS for styling. IDs however are intended to refer to a single element, meaning the same ID should never be used twice. IDs are generally used with JavaScript and internal document links.

A class can be assigned to any number of elements. And an element can be assigned any number of classes. 
<style>
.heading-red{
color:red;
}
#heading-blue{
color:blue;
}
</style>    
<h1 class="heading-red">Welcome<h1/> 
<h1 id="heading-blue">Welcome<h1/>
Try it  
8

HTML Hyperlinks

In Web terms, a hyperlink is a reference (an address) to a resource on the Web. Hyperlinks can point to any resource on the Web: an HTML page, an image, a sound file, a movie, and so on.

By default, the content of a link is underlined. If it hasn’t been visited, it is blue. If it has been visited, it is purple. If it active, it is red. But there is no default for hovering.


Setting the Targets for Links

Setting The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(_) character:

  • _blank — Opens the linked document in a new window or tab.
  • _parent — Opens the linked document in the parent window.
  • _self — Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value.
  • _top — Opens the linked document in the full browser window.
 
<a href="lastpage.htm"> This text</a> 
is a link to a page on this Web site.

<a href="https://www.google.com"> Google </a>  
is a link to a page on the World Wide Web.

Opening in a new window: 
<a href="lastpage.htm" target="_blank">Last Page</a>

Mail link:
<a href="mailto:myfriend@gmail.com?subject=Hello!">

Image Link:
<a href="default.htm"><img src="html.jpeg" 
alt="HTML tutorial" width="100" height="142" />
Try it   Project
9

Image Tag

To add an image to a page, use the image tag. Image tags (img) do not have closing tags.

The two main attributes you give to the img tag are src, the image source and alt, which is alternative text describing the image.

Width and height attributes are used to adjust the pixel width and height of the area the image will occupy on the page.

 
<img src="flower.jpg" alt="flower"
width="104" height="142">
Try it   Project
10

Text Formatting

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.

  • <b> - The HTML <b> element defines bold text, without any extra importance.
    This is bold text
  • <strong> - <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text. A text-to-speech program speak these word(s) with a different tone of voice to convey that the text is important in some way.
    This is strongly important text.
  • <small> - <small> is used to indicate the samller text.
    This is smaller text.
  • <i> - The HTML <i> element defines italic text, without any extra importance.
    This is italic text
  • <em> - The HTML <em> element is used to indicate that the text should have extra emphasis that should be stressed.
    This is emphasized text
  • <mark> - The <mark> element is new in HTML5 and is used to mark or highlight text in a document.
    This is highlighted text.
  • <del> - Deleted text Deleted text
  • <ins> - Inserted text Inserted text
  • <u> - Underlined text Underlined text
  • <sub> - Subscript text Subscript text
  • <sup> - Superscript text Superscript text
  • <pre> -Preformatted text.
    Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code. 
    This is
         @#$   Preformatted text... @#$
  • <code> - Computer Code.
    The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
    This is a computer code if (x=3) {print x;} 
<b>This text is bold</b><br>
<i>This text is italic</i><br>
This is <sub>subscript</sub>and <sup>superscript</sup>
Try it   Project
11

Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. 
<ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
</ul>
Try it   Project
12

Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. 
<ol>
         <li>Beetroot</li>
         <li>Ginger<</li>
         <li>Potato</li>
         <li>Radish</li>
</ol>
Try it   Project
13

Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default. 
<table>  
		<tr>
			<td>Name</td>
			<td>Class</td>
			<td>Marks</td>
		</tr>  
		<tr>
	               <td>Raghav</td>
			<td>8th</td>
			<td>590</td>
		</tr>  
</table>
Try it   Project
14

HTML Forms

Web page forms are built from HTML elements to collect user inputs like user name, user address, contact phone number, email address etc

Forms contain HTML elements like inputbox, text areas, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by entering text, selecting items, etc. and submitting this form to a web server for further processing.

Input Types:

Input types prohibit submission of the form if the user enters a value that isnot permitted and issue an error notice. Some also provide special controls that allow the user to easily select a permitted value.

Input Type - Permitted input

  • text- String of text
  • password- String of text (obscured by browser)
  • url-Valid URL protocol and domain address
  • email- Valid email address
  • date- Date in mm/dd/yyyy format
  • month- Month and year
  • week- Week number and year
  • time- Time in HH:MM format
  • datetime-local Date and time as mm-dd-yy HH:MM
  • number- Numeric integer value
  • range- Numeric integer value (slider)
  • color-Color in #RRGGBB hexadecimal format
  • file- File path address (browse)
 
<form method="GET" action="login.php">
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit"value="Submit">
</form>
Try it   Project