Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML Basics

In this article we will have a look on html basics. Reading this article you will learn to work with html languages and create websites.

In 1980 a mark up language was developed to create documents that could be displayed on system of different hardware and operating system as well , the language was called Standard Generalized Markup Language SGML.HTML has evolved from SGML.

HTML stands for Hyper Text Mark up Language and used to construct formatted pages for the web known as Web pages. If we dissect it comprises of:

Markup Language: Which refers to the tag that specifies the incorporation of text, graphics, sound and control of visual elements such as style and size of fonts and spaces between paragraphs, etc. Page Content: Indicates the text information which has to be displayed on the page.

Structure of HTML Scripts

An HTML document always starts with <HTML> and ends with </HTML>. This set of tag indicates the browser that the content is created in HTML. Between these two tags whole document is divided into two parts i.e. HEAD (comprises the heading section) & BODY(contains the detailed information). The skeleton of HTML document can be analysed like this :

Representing the Structure of HTML Scripts

Figure 1: Representing the Structure of HTML Scripts.

Web documents written in HTML are saved with suffix ‘.htm’ or ‘.html’. These documents can be displayed using any Web browser.

Understanding the <HEAD> element:

contains header elements of the web page .This is the first thing appears after opening tag. Each tag contains element which reflects the title of the web page and may contains a combination of following elements:

  • <base> tag :creates a base “url” for all links on the page.
  • <style> :includes CSS rules inside the document.
  • <script> tag:includes JAVAScript or VBScript inside the document
  • <object> tag: includes images, JavaScript objects,animations, MP3 files etc.
  • <meta> tag: includes information about the Webpage like keywords and descriptions, particularly helpful for search applications.
  • <link> tag :links to an external file, like style sheet or JavaScript file.

Listing 1: Representing the example of head tag.

<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.webiste.com" />
<link rel="stylesheet1" type="text/css" href="tp1.css" />
<script type="text/javascript">
  uacctt = "UA-23297";
  example ();
</script>
</head> 

The <title> Element:

This element is a child of the <head> element. A specific title can be given to every page by writing the title in between opening and closing title tag.Using this element Title is displayed at the top of a browser window.

Listing 2: Representing the example of title tag.

<head>
<title>HTML TITLE TAG</title>
</head>

The <body> Element:

This element appears just after the closing head tag (</head>) and comprises those parts of the Web page that has to be displayed in the main browser window it can be information, facts and figures.

A <body> element may contain a set of paragraphs to complicated layouts containing forms, charts and tables.

Listing 3: Representing the example of body tag.

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

Putting all together:

Putting all these tags together, it will get complete HTML document :

Listing 4: Representing the example of HTM document.

<html>

<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.webiste.com" />
<link rel="stylesheet1" type="text/css" href="tp1.css" />
<script type="text/javascript">
  uacctt = "UA-23297";
  example ();
</script>
</head>

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

</html>

HTML META TAGS

HTML allows user to specify metadata - information about a document -in numerous way. The META element is used to include name/value pairs which describes the properties of the HTML document, like Expiry Date, key words, author of the documents etc.

The <meta> tag is an empty element it has not any closing tag but carries information within attributes, so the forward slash character is required at the end of the element.

Adding Meta Tags

Metadata can be added to any web page by placing tag between the and tags. Meta tag includes the following attributes:

Attribute Description
Name Name for the property.
Content Specifies the property's value.
Scheme Specifies a scheme ,use to interpret the property's value (as declared in the content attribute).
http-equiv Used for http response message headers.

Important usage of Meta Tag:

Specifying Keywords:

keywords can be specified ,which will be used by the search engine to search a web page. Using following tag important keywords can be specified related to the web page.

Listing 5: Representing the example of specifying keywords in meta tag.

<head>
<meta name="keywords" content="HTML, meta tags, metadata" />
</head>

Document Description:

This is important information and many search engine use this information while searching a web page. So it can used to give an appropriate description of the page.

Listing 6: Representing the example of document description in meta tag.

<head>
<meta name="description" content="Learning Meta Tags." />
</head>

Document Revision date:

It tells about time when the document was updated latest.

Listing 7: Representing the example of document revision date in meta tag.

<head>
<meta name="revised" content="meta tags, 11/11/2013" />
</head>

Document Refreshing:

Duration can be specified after which web page will keep refreshing itself. Web page keeps refreshing after every 15 seconds using following syntax.

Listing 8: Representing the example of document refreshing in meta tag.

<head>
<meta http-equiv="refresh" content="15" />
</head>

Page Redirection:

Page redirection can be specified using Meta Tag. Here is an example of redirecting current page to another page. Duration is also specified after which page will be redirected.

Listing 9: Representing the example of Page redirection in meta tag.

<head>
<meta http-equiv="refresh" 
         content="10; url=http://www.testwebsite.com" />
</head>

If duration is not specified, the page will be redirected immediately.

Setting Cookies:

Meta Tag is used to store cookies on client side .This information can be used by Web Server to track a site visitor later on

Listing 10: Representing the example of setting cookies in meta tag.

<head>
<meta http-equiv="cookie" content="userid=xyz;
         expires=Wednesday, 08-sep-12  23:59:59 GMT; />
</head>

If expiry date and time is not included, the cookie is considered a session cookie and will be deleted when the user close the browser.

Setting Author Name:

You can set an author name in a web page using Meta Tag. See an example below:

Listing 11: Representing the example of setting author name in meta tag.

<head>
<meta name="author" content="Albert Pintoo" />
</head>

ATTRIBUTES

Attributes are one of the important parts of HTML . An attribute is used to define the characteristics of an element and is placed under the element's opening tag. Each attribute is made up of two parts: name and value:

  • The name is the property, which designer want to set in the page. For example, the <font> element in the example carries an attribute face, which indicates the typeface of the text.
  • The value indicates the value of the property. In example vale of property is Arial typeface

The value of the attribute should be written in double quotation marks, and separated from the name by the equals sign.

Listing 12: Representing the attribute.

<font face="arial">

Core Attributes:

There are four core attributes that can be used for most of HTML elements (although not all) are:

  • id
  • title
  • class
  • style

The id Attribute:

The id attribute is used to uniquely identify any element within a page (or style sheet ). There may be two primary reasons for which id attribute is used on any element :

  • If an element carries an id attribute as unique identifier it is easy to identify that particular element and its content.
  • If there are two elements having same name within a Web page (or style sheet), the id attribute may be used to distinguish between elements of the same name.

Here in the listing the id attribute is used to distinguish between two paragraph elements:

Listing 13: Representing the id attribute.

This para is about HTML

This para is about Casecading Style Sheet

There are some special rules for the value of the id attribute, they must:

  • Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0.9), hyphens, underscores, colons, and periods.
  • Remain unique in that document; no two attributes may have the same value in one HTML document.

The title Attribute:

The title attribute helps the designer to give a title for the element. The syntax for the title attribute is similar to syntax of id attribute:

The behaviour of title attribute depends upon the element which carries it, although it often displayed as tooltip while the element is loading. If we implement :

<h3 title="Hello HTML!"> Heading Tag listing</h3>

Following result will be generated:

Heading Tag listing

Now put cursor over "Titled Heading Tag Example" and see the tooltip.

The class Attribute:

The class attribute is used to associate an element with style sheet, and specifies the class of element.

The value of the attribute could be a space-separated list of class names. Syntax is :

class="className1 className2 className3"

The style Attribute:

The style attribute facilitate designer to mention CSS rules within the element.

Syntax is given below:

<p style="font-family:arial; color:#FF0000;">Some text...</p>

Understanding tags

Any information which is there on the web page should be expressed in an impressive way. To make the web page interesting it is necessary that all information is written in decent manner for which text formatting is required. Here few basic text formatting elements like heading elements and paragraph elements are discussed.

Create Headings - The <hn> Elements:

Any document starts with a heading. HTML allows designer to create six levels of headings (different sizes of heading), which can be implemented using elements <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. While displaying each heading, Web browser adds one line above and below that heading.

Listing 14: Representing the example of Heading tag

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

Output:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Creating Paragraph - The <p>Element:

The <p> element helps user to give a structure to the text. Each paragraph should be placed in between an opening <p>and closing </p>tag.

Listing 15: Representing the example of paragraph tag

<p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>

Output:

Here is a paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

The align attribute: this element is used for required alignment of paragraphs of text.

Listing 16: Representing the example of align attribute of paragraph tag

<p align="left">This is left aligned.</p>
<p align="centre">This is centre aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is justified.</p>

Output:

This is left aligned.

This is centre aligned.

This is right aligned.

This is justified.

Create Line Breaks - The <br /> Element:

Anything following the <br /> element starts on the next line. <br /> tag is an empty element, where opening and closing tags are not required.

Note: The <br /> element has a space between ‘br’ and the forward slash(/). If designer omit this space, some browsers will trouble rendering the line break, on the other hand if the forward slash is missed then it is not valid XHTML

Listing 17: Representing the example of line break tag

Hello<br />
You are in HTML world.<br />
Thanks<br />
Albert Pintoo

This will produce following result:

Hello
You are in HTML world.
Thanks
Albert Pintoo

Soft Hyphens:

HTML allows a browser to hyphenate long words to justify a paragraph in better way.In some cases where a client browser is required to hyphenate a word , use the soft hyphen entity (­) to specify where a word need be hyphenated.

Listing 18: Representing the example to hyphenate a word

<p style="text-align: justify;"> Example for soft hyphen - The morbid fear of the number 13, or tri­skai­deka­phobia, has plagued some important historic figures like Mahamiya and Nanao.</p>

Output:

Example for soft hyphen - The morbid fear of the number 13, or tri­skai­deka­phobia, has plagued some important historic figures like Mahamiya and Nanao.

NOTE: This may not work with a few web browsers.

Preserve Formatting - The <pre> Element: This element is used when any text has to be formatted in exactly the same way by which it was previously formatted.

Every text between the opening <pre> tag and closing </pre> tag will preserve the formatting of the source document.

<pre>
function testFunction( strText ){
   alert (strText)
}
</pre>

This will produce following result:

function testFunction( strText ){ alert (strText) }

Horizontal Rules - The <hr /> Element

Horizontal rules are used to visually divide sections of a webpage. The <hr> tag creates a line from the current position, within the document, to the right margin and breaks up the line accordingly.

To introduce a line between two paragraphs code can be as follows:

Listing 19: Representing the example of Horizontal rules

<p>This is paragraph one and should be at upper side of page</p>
<hr />						
<p>This is paragraph two and should be at lower side of page</p>

Output:

This is paragraph one and should be at upper side of page

This is paragraph two and should be at lower side of page

Again <hr /> tag is an example of an empty element, where opening and closing tags are note required.

Note: The <hr /> element has also space between the characters ‘hr’ and the forward slash(/).If designer omit this space, some browsers will trouble rendering the line break, on the other hand if the forward slash is missed then it is not valid XHTML.

Presentational Tags:

These tags are helpful to make the text more presentable and impressive.

Bold Text - The <b> or <strong> Element:

<p>Anything that appears in between   <b>...</b> or <strong>...</strong> element is displayed in bold within the text. </p>

Listing 20: Representing the example of bold tag

<p>This is an example of <b>bold</b> or <strong>bold strong</strong> typeface.</p>

This will produce following result:

This is an example of bold or bold strong typeface.

Italic Text - The <i> Element:

Anything that appears in between <i>...</i> element is displayed italicised within the text.

Listing 21: Representing the example of italic tag

<p>This is an example of <i>italicized</i> typeface.</p>

Output:

This is an example of italicized typeface.

Underlined Text - The <u> Element:

Anything that appears in between <u>...</u> element is displayed italicised within the text.

Listing 22: Representing the example of underline tag

<p>This is an example of <u>underlined</u> typeface.</p>

Output:

This is an example of underlined typeface.

Strike Text - The <strike> Element:

Anything that appears in between a <strike>...</strike> element is displayed with strikethrough, a thin line through out that text.

Listing 23: Representing the example of strike tag

<p>This is an example of <strike>strikethrough</strike> typeface.</p>

Output:

This is an example of strikethrough typeface.

Monospaced font - The <tt> Element:

<tt> element is used to write the content which is desired to be in monospaced font. Most fonts are variable-width fonts as different letters are of different widths (for example, the letter w is wider than the letter i). In a monospaced font, however, each letter is the same width.

Listing 24: Representing the example of monospaced font

<p>This is an example of <tt>monospaced</tt> typeface.</p>

output:

This is an example of monospaced typeface.

Superscript Text - The <sup> Element:

This element equips the user to write in superscript; the font size used is the same size as the characters surrounding it but is displayed half of a character’s height above the other characters.

Listing 25: Representing the example of superscript

<p>This is an example of <sup>superscript</sup> typeface.</p>

Output:

This is an example of superscript typeface.

Subscript Text - The <sub> Element:

This element equips the user to write in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath the other characters.

Listing 26: Representing the example of subscript

<p>This is an example of <sub>subscript</sub> typeface.</p>

Output:

This is an example of subscript typeface.

Larger Text - The <big> Element:

The content appears in between <big> element is displayed one font size larger than the rest of the text surrounding it.

Listing 27: Representing the example of big tag

<p>This is an example of <big>big</big> typeface.</p>

Output:

This is an example of big typeface.

Smaller Text - The <small> Element:

The content appears in between <small> element is displayed one font size smaller than the rest of the text surrounding it.

Listing 28: Representing the example of small tag

<p>This is an example of <small>small</small> typeface.</p>

Output:

This is an example of small typeface.

Grouping - The <div> and <span> Elements:

The

and elements allow user to group several elements and create sections or subsections of a page.

Like, if user can put all the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element are related to the footnotes. Style might attach to this <div> element so that they appear using a special set of style rules. Here in listing16 <div> element is used to group block-level elements together.

Listing 29: Representing the example of div and span tags

<div id="menu" align="middle" >
<a href="/index.html">HOME</a> | 
<a href="/about/contact.html">CONTACT</a> | 
<a href="/about/index.html">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="pink">
<h5>Contents</h5>
<p>Main article goes here.....</p>
</div>

Output:

Contents

Main article goes here.....

The <span> element, on the other hand, is used to group inline element .If user wants a part of a sentence or paragraph to group together <span> element could be used for the purpose.

Listing 30: Representing the example of div and span tags

<div><p>This is an example of <span style="color:green">span tag</span> and the <span style="color:purple">div tag</span> along with CSS</p></div>

Output:

This is an example of span tag and the div tag along with CSS

These tags are commonly used with CSS to allow user to attach a style to a section of a page.

This is all for today’s article, let me know if you have any question, see you next time.



Have total 6+ years of experience in developing enterprise applications using DOT.NET 3.5 and 4.0(C#, VB.NET, ADO.NET, ASP.NET),java, JQuery, JSON, LINQ,WCF, MVC3, MVC4, Silverlight, SQL Server, mobile applications and Oracle etc ...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login