Wednesday, February 22, 2017

HTML Overview

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext.

HTML Basic Tags

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

HTML Elements

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:

HTML Attributes

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

HTML Formatting

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

HTML Phrase Tags

The phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in previous chapter. This chapter will take you through all the important phrase tags, so let's start seeing them one by one.

HTML Meta Tags

HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

HTML Comments

Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.

HTML Images

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.

HTML 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.

HTML Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

HTML Text Links

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

HTML Image Links

We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now we will learn how to use images to create hyperlinks.

HTML Email Links

Its not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people who can run programs to harvest these types of emails and later use them for spamming in various ways.

HTML Frames

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

HTML Iframes

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
The src attribute is used to specify the URL of the document that occupies the inline frame.

Example

Following is the example to show how to use the <iframe>:
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
   Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
This will produce following result:
Document content goes here...
Sorry your browser does not support inline frames. Document content can also go here...

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.
AttributeDescription
srcThis attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avalaible in html directory.
nameThis attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.
frameborderThis attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).
marginwidthThis attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10".
marginheightThis attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight="10".
noresizeBy default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize="noresize".
scrollingThis attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.
longdescThis attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm"

HTML Blocks

All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements

Block Elements

Block elements appear on the screen as if they have a line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

HTML Backgrounds

By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background.
  • Html Background with Colors
  • Html Background with Images

HTML Colors

Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors:

HTML Fonts

Fonts play very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

HTML Forms

HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc.

HTML Embed Multimedia

Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.

HTML Marquees

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.
Note: The HTML <marquee> tag may not be supported by various browsers so its not recommended to rely on this tag, instead you can use Javascript and CSS to create such effects.

HTML Header

We have learnt that a typical HTML document will have following structure:
Document declaration tag 
<html>
   <head>
       Document header related tags
   </head>

HTML Style Sheet

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994.

HTML Javascript

A script is a small piece of program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using Javascript or VBScript.

HTML Layouts

A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
Now a days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags.

HTML Tag Reference

Following tags have been introduced in older versions of HTML but all the tags marked with HTML-5 are part of HTML-5.
Tag Description Version
<!--...--> Specifies a comment  
<!DOCTYPE>  Specifies the document type  
<a> Specifies an anchor

HTML Attribute Reference

There are few HTML attributes which are standard and associated to all the HTML tags. These attributes are listed here with a brief description.

HTML Events Reference

When users visit your website, they do things like click various links, bring mouse over text and images etc. These are examples of what we call events in Javascript and VBScript terminologies.

HTML Fonts Reference

Fonts are specific to platform. You will have different look and feel of a web page on different machines running different operating systems like Windows, Linux or Mac iOS. Here we are giving a list of fonts which are available in various operating systems.

HTML ASCII Codes

There are 27 = 128 printable characters which can be represented by different 7-BIT ASCII codes. Another set of characters are not for HTML representation but they are devised to control hardware.
Following tables list down all the 7-BIT ASCII codes and their equivalent HTML Entity Codes.

ASCII Table Lookup

ASCII stands for American Standard Code for Information Interchange. There are 128 standard ASCII codes, each of which can be represented by a 7 digit binary number: 0000000 through 1111111.
Extended ASCII adds an additional 128 characters that vary between computers, programs and fonts.

HTML Color Names

The following table shows the 16 color names that were introduced in HTML 3.2:
Color NameHex ValueColorShow
aqua#00ffff
Demo
black#000000
Demo
blue#0000ff
Demo

HTML Entities

Some characters are reserved in HTML and they have special meaning when used in HTML documemt. For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag.

HTML /XHTML Standard Fonts

Fonts are specific to platform. If you are using different OS then you will have different look and feel of any web page. Here we are giving a list of fonts which are available to various operating systems.
HTML <FONT> tag is deprecated in version 4.0 onwards and now all fonts are set by using CSS. Here is the simple syntax of setting font of a body of web page.

HTML Events References

When a user visit your website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events.
We can write our event handlers in Javascript or vbscript and can specify these event handlers as a value of event tag attribute. The HTML 4.01 specification defines 19 event attributes as listed below:

MIME Media Types

MIME (Multipurpose Internet Mail Extension) media types were originally devised so that e-mails could include information other than plain text. MIME media types indicate the following things:

HTML URL Encoding

URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers. These characters include:

Language ISO Codes

The following is a draft list of language code correspondences between ISO codes, Microsoft codes, and Macintosh codes. Source of this information is Unicode Consortium.

HTML Character Encodings

Character encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding.

HTML Deprecated Tags

A complete list of deprecated HTML tags and attributes are given here. All the tags have been ordered alphabetically along with their equivalent tag or alternate CSS option.

HTML - Useful Resources

The following resources contain additional information on HTML. Please use them to get more in-depth knowledge on this topic.

HTML Color Code Builder

Pick Your Color

  
     
new
  
current


                                                                        
 °
 %

 %
  
 

Discuss HTML

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995.

Online HTML Editor


<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div