What is HTML?

HTML is the "mother tongue" of your browser.

To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".

HTML is used to make websites. It is as simple as that!

HTML is an abbreviation of "HyperText Mark-up Language" – which can be defined as follows.

Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net.
Text is self-explanatory.
Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
Language is what HTML is. It uses many English words.

The basic structure for all HTML documents is simple and should include the following minimum elements or tags:

· <html> - The main container for HTML pages

· <head> - The container for page header information

· <title> - The title of the page

· <body> - The main body of the page

Remember that before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.

Now we will explain each of these tags one by one. In this tutorial you will find the terms element and tag are used interchangeably.

The <html> Element:

The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag.

Following two elements appear as direct children of an <html> element:

· <head>

· <body>

As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page.

The <head> Element:

The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.

Each <head> element should contain a <title> element indicating the title of the document, although it may also contain any combination of the following elements, in any order:

· The <base> tag is used to create a "base" url for all links on the page. Check HTML Base tag.

· The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. Check HTML Object tag.

· The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. Check HTML Link tag.

· The <style> tag is used to include CSS rules inside the document. Check HTML Style tag.

· The <script> tag is used to include JAVAScript or VBScript inside the document. CheckHTML Script tag.

· The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications. Check HTML Meta tag.

Example:

Following is 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.tutorialspoint.com" />

<link rel="stylesheet" type="text/css" href="tp.css" />

<script type="text/javascript">

_uacct = "UA-232293";

urchinTracker();

</script>

</head>

The <title> Element:

You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways:

· It displays at the very top of a browser window.

· It is used as the default name for a bookmark in browsers such as IE and Netscape.

· Its is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.

Example:

Here is the example of using title tag.

<head>

<title>HTML Basic tags</title>

</head>

The <body> Element:

The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content.

A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables.

Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag.

Example:

Here is the example of using body tag.

<body>

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

</body>

Putting all together:

Now if we will put all these tags together, it will constitute a complete HTML document as follows:

<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.tutorialspoint.com" />

<link rel="stylesheet" type="text/css" href="tp.css" />

<script type="text/javascript">

_uacct = "UA-232293";

urchinTracker();

</script>

</head>

<body>

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

</body>

</html>

HTML Images

Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thuasands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.

Insert Image - The <img> Element:

You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.

<img src="image URL" attr_name="attr_value"...more attributes />

Image Attributes:

Following are most frequently used attributes for <img> tag.

· width: sets width of the image. This will have a value like 10 or 20%etc.

· height: sets height of the image. This will have a value like 10 or 20% etc.

· border: sets a border around the image. This will have a value like 1 or 2 etc.

· src: specifies URL of the image file.

· alt: this is an alternate text which will be displayed if image is missing.

· align: this sets horizontal alignment of the image and takes value either left, right orcenter.

· valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.

· hspace: horizontal space around the image. This will have a value like 10 or 20%etc.

· vspace: vertical space around the image. This will have a value like 10 or 20%etc.

· name: name of the image with in the document.

· id: id of the image with in the document.

· style: this will be used if you are using CSS.

· title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.

· ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map. We will see how to use these attributes in Image Links chapter.

A Simple Example:

This will produce following result:

Image Attributes - width, height, title, border and align:

Now let us try to set some more attributes:

This will produce following result:

Remember that all the images will have a border by default. In our examples its not showing because our global style sheet has set img {border:0px;} which means that no border will be displayed till it is mentioned explicitly.

HTML Tables

Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers. Tables are just like spreadsheets and they are made up of rows and columns.

You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag . which stands for table row. And each cell is then written inside the row element using a <td> tag . which stands for table data.

Example:

<table border="1">

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

This will produce following result:

CSS Introduction

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS:

· CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

· Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.

· Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

· Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.

· Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

· Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

CSS Inclusion - Associating Styles

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS - The <style> Element:

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax:

<head>

<style type="text/css" media="...">

Style Rules

............

</style>

</head>

Attributes:

Attributes associated with <style> elements are:

Attribute	Value	Description
type	text/css	Specifies the style sheet language as a content-type (MIME type). This is required attribute.
media	screen tty tv projection handheld print braille aural all	Specifies the device the document will be displayed on. Default value isall. This is optional attribute.

Example:

Following is the example of embed CSS based on above syntax:

<head>

<style type="text/css" media="all">

h1{

color: #36C;

</style>

</head>

**Inline CSS - The style Attribute:**

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax:

<element style="...style rules....">

Attributes:

Attribute	Value	Description
style	style rules	The value of style attribute is a combination of style declarations separated by semicolon (;).

Example:

Following is the example of inline CSS based on above syntax:

<h1 style ="color:#36C;"> This is inline CSS </h1>

This will produce following result:

Inline CSS

External CSS - The <link> Element:

The <link> element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Here is the generic syntax of including external CSS file:

<head>

<link type="text/css" href="..." media="..." />

</head>

Attributes:

Attributes associated with <style> elements are:

Attribute	Value	Description
type	text/css	Specifies the style sheet language as a content-type (MIME type). This attribute is required.
href	URL	Specifies the style sheet file having Style rules. This attribute is a required.
media	screen tty tv projection handheld print braille aural all	Specifies the device the document will be displayed on. Default value isall. This is optional attribute.

Example:

Consider a simple style sheet file with a name mystyle.css having the following rules:

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

Now you can include this file mystyle.css in any HTML document as follows:

<head>

<link type="text/css" href="mystyle.css" media="all" />

</head>

Imported CSS - @import Rule:

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.

<head>

<@import "URL";

</head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:

<head>

<@import url("URL");

</head>

Example:

Following is the example showing you how to import a style sheet file into HTML document:

<head>

@import "mystyle.css";

</head>

CSS Rules Overriding:

We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.

· Any inline style sheet takes highest priority. So it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.

· Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.

· Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable.

Handling old Browsers:

There are still many old browsers who do not support CSS. So we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers:

<style type="text/css">

<!--

body, td {

   color: blue;

-->

</style>

CSS Comments:

Many times you may need to put additional comments in your style sheet blocks. So it is very easy to comment any part in style sheet. You simple put your comments inside /*.....this is a comment in style sheet.....*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

Example:

/* This is an external style sheet file */

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

/* end of style rules. */

Introduction html,css,style sheet

The <html> Element:

The <head> Element:

Example:

The <title> Element:

Example:

The <body> Element:

Example:

Putting all together:

HTML Images

Insert Image - The <img> Element:

Image Attributes:

A Simple Example:

Image Attributes - width, height, title, border and align:

HTML Tables

Example:

CSS Introduction

What is CSS?

Advantages of CSS:

CSS Inclusion - Associating Styles

Embedded CSS - The <style> Element:

Attributes:

Example:

**Inline CSS - The style Attribute:**

Attributes:

Example:

Inline CSS

External CSS - The <link> Element:

Attributes:

Example:

Imported CSS - @import Rule:

Example:

CSS Rules Overriding:

Handling old Browsers:

CSS Comments:

Example:

CLICK BELOW and get Money

Total Pageviews

Popular Posts

Like BOX

Introduction html,css,style sheet

The <html> Element:

The <head> Element:

Example:

The <title> Element:

Example:

The <body> Element:

Example:

Putting all together:

HTML Images

Insert Image - The <img> Element:

Image Attributes:

A Simple Example:

Image Attributes - width, height, title, border and align:

HTML Tables

Example:

CSS Introduction

What is CSS?

Advantages of CSS:

CSS Inclusion - Associating Styles

Embedded CSS - The <style> Element:

Attributes:

Example:

Inline CSS - The style Attribute:

Attributes:

Example:

Inline CSS

External CSS - The <link> Element:

Attributes:

Example:

Imported CSS - @import Rule:

Example:

CSS Rules Overriding:

Handling old Browsers:

CSS Comments:

Example:

Related Posts:

CLICK BELOW and get Money

Total Pageviews

Popular Posts

Like BOX

**Inline CSS - The style Attribute:**