Html and CSS with Examples

What is an HTML File? 
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor

What Is Markup Language  
A markup language combines text and extra information about the text.

The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web. Historically, markup was (& is) used in the publishing industry in the communication of printed work between authors, editors, and printers.

Creating an HTML document 
Creating an HTML document is very easy. To begin coding HTML , need only two things: a simple-text editor and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors and you will probably code a good amount of HTML with it.

HTML is platform independent; you will need to save your HTML files in standard text format, sometimes known as ASCII. The easy way to do this is use a program like notepad.exe in Windows, pico in Linux, and the like.

If you'd prefer to use a word processor like Word or WordPerfect to write HTML code, you can do so, but need to save your files as "Text" or "Text Only. " You will see this option in a drop down box in your "Save As..." screen.

The Most Common Mistake  
The most common mistake for designers is the urge to put the d:\ in links and images . When you are on the web, there is no d:\ to the rest of the world. When you start out, keep all your HTML files and images in one folder, and don't use d:\ at all.

Quick example:

<img> loads an image into a web page. If you have a file called flower.jpg, use the code <img src="flower.jpg"> to load it, not <img src="c:\My Documents\website\flower.jpg">

What Is An HTML Element  
An HTML element indicates structure in an HTML document and a way of arranging content hierarchically. An HTML element is an SGML element that meets the requirements of one or more of the HTML DTDs (Document Type Definitions ). These elements have properties: both attributes and content, as specified (both allowable and required) according to the appropriate HTML DTD . Elements may represent paragraphs, headings, hypertext links, lists, embedded media, and a variety of other structures.

Syntactically HTML elements are constructed with: 

    1) a start tag marking the beginning of an element;
    2) any number of attributes (and their associated values);
    3) some amount of content (characters and other elements)'; and
    4) an end tag.

Many HTML elements include attributes in their start tags. Attributes are defining desired behavior or indicating additional element properties. The end tag is optional for many elements. There are a few elements that are not part of any official DTDs, yet are supported by some browsers and used by some web pages. Such elements may be ignored or displayed improperly on browsers not supporting them.

HTML Tags  
Informally, HTML elements are sometimes referred to as "tags", though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.

 HTML tags are used to mark-up HTML elements

 HTML tags are surrounded by the two characters < and >

 The surrounding characters are called angle brackets

 HTML tags normally come in pairs like <i> and </i>

 The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)

 The element content is the text between the start and end tags

 HTML tags are not case sensitive, <b> means the same as <B>

Why do We Use Lowercase Tags?  
Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML - the next generation HTML - demands lowercase tags.

Comments in HTML  
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.  

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Examples
Format of HTML
1.
<html>
<head>
<title>
my title
</title>
</head>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

Paragraph in HTML
2.
<html>
<head>
<title>
paragraph
</title>
</head>
<body>
<p> This paragraph contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p> This paragraph
contains      a lot of spaces
in the source     code, but the    browser
ignores it.
</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>

Line Break in HTML
3.
<html>
<head>
<title>
Break
</title>
</head>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>

Headings in HTML
4.
<html>
<head>
<title>
headings
</title>
</head>
<body>
<h1 align="center">This is heading 1</h1>
<h2 align="left">This is heading 2</h2>
<h3 align="right">This is heading 3</h3><h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>Use heading tags only for headings. Don't use them just to make  something bold. Use other tags for that.</p>

</body>
</html>

Horizontal Line in HTML
5.
<html>
<head>
<title>
Horizontal Lines
</title>
</head>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>

Background Atrribute
6.
<html>
<head>
<title>
Background
</title>
</head>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>

Preformatted Text
7.
<html>
<head>
<title>
Preformatted
</title>
</head>
<body>
<pre>
This is
preformatted text.
It preserves      both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>
</body>
</html>

Link to another page
8.
<html>
<head>
<title>
Link a Page
</title>
</head>
<body>

<p>
<a href="frame.html">
This text</a> is a link to a page on this Web site.
</p>

<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>

Adding Images
9.
<html>
<head>
<title>
Image As Link
</title>
</head>
<body>
<p>
You can also use an image as a link:
<a href="test.html">
<img border="0" src="wind.jpg" width="300" height="300">
</a>
</p>
</body>
</html>

Connect Pages
10.
<html>
<head>
<title>
Target
</title>
</head>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank", the link will open in a new window.
</p>
</body>
</html>

11.
<html>
<head>
<title>
Move to place
</title>
</head>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

12.
<html>
<head>
<title>
mail
</title>
</head>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>

Frames in HTML
13.
<html>
<frameset cols="25%,75%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>
</html>

14.
<html>
<frameset rows="25%,75%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>
</html>

Tables in HTML
15.
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>One row and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<table>

  <thead>

    <tr>

      <th>Day</th>

      <th>Expenses</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Sunday</td>

      <td>Rs.100</td>

    </tr>

    <tr>

      <td>Monday</td>

      <td>Rs.800</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Sum</td>

      <td>Rs.900</td>

    </tr>

  </tfoot>

</table>

</body>
</html>



Unordered List
16.
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

Ordered List
17.
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>


18.
<html>
<body>
<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

</body>
</html>

19.
<html>
<body>

<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

20.
<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Forms in HTML
21.
<html>
<body>

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

</body>
</html>

22.
<html>
<body>
<form action="">
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the  browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>

23.
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>

24.
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked" name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>

<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked
</p>

</body>
</html>

25.
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

26.
<html>
<body>
<p>
This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

</body>
</html>

27.
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

28.
<html>
<body>

<fieldset>
<legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>


Cascading Style Sheets (CSS)
A ‘Cascading Style Sheet’ (CSS) is basically a tool that allows style to a webpage. A style sheet consists of a set of instructions or rules that are made up of two parts, a selector and a set of properties.

The main focus of a CSS is to increase the style of the page. Therefore it appears to be very visually based.

One of the main properties of CSS’s is that all the pages, images, objects or style sheets themselves have to be saved in the same directory. A writer has to create a style sheet in the text editor being used. A style sheet is simply a file whose name ends with an extension “.css”. The header of the HTML file being written for the webpage has a link to the style sheet. The next step involves writing the set of rules. The rules consist of selectors and the actions that they have to perform. A selector for an element or a tag is the text that appears within the tag (i.e. the selector for the <p> tag is p). Then, within braces the property is written. This consists of a property separated by its value with a colon and a space.

For example, body{background-color:#000000}

This defines the background of the body to be in black.

Advantages of Cascading Style Sheets.
Completely changes the appearance of a webpage without actually changing the webpage itself.

The number of times a background image is to appear or whether the titles are to be placed horizontally or vertically can be specified.

Disadvantages of Cascading Style Sheets.
All files, images, objects etc., have to be in the same directory.

Embedding a style sheet require more coding than linking it from the HTML file. If the style sheet is not embedded then the page to be downloaded and viewed off-line, would not be correct.

Another disadvantage is that some editors, like HomePage2, will not be able to process some of the things that Cascading Style Sheets do because they don’t recognize some of the “HTML” codes that are generated while making CSS.

CSS Syntax
The CSS syntax is made up of three parts – a selector, a property and value.

Selector {Property: value}

Eg: body {color: black}
If the value is in multiple words, put quotes around value.

Eg:
p {font-family: “sans serif”}
p {text-align: center; color: red}

Linking to the Style Sheet
<head>
<link rel=”stylesheet” type=”text/cc” href=”%%web_site_url%%/styles.css”>
</head>

Inserting Style Sheets
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
• External Style Sheet
• Embedded Style Sheet
• Inline Style Sheet

External Style Sheet:
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of the entire web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

Eg :
The following code represents a CSS file named “sample.css”

body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

The html code referring the above CSS file is as follows

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css”/>
</head>
<body>
Using External Style Sheets
<p>
This page uses an external style sheet!
</p>
</body>
</html>

Embedded Style Sheet:
An embedded style sheet (also called as internal style sheet) is one that is within the document. The rules for the document style are placed between the two <head> tags of the document as shown below.

Ex1:

<html>
<head>

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

Ex2:

<html>
<head>
<style type="text/css">
body
{
background-image:
url('wind.jpg')
}
</style>
</head>

<body>
hi my CSS
</body>

</html>

Inline Style Sheet:
In inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<html>
<body>
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
</body>
<html>

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

The class Selector
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

Note: To apply more than one class per given element, the syntax is:
<p class="center bold">
This is a paragraph.
</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

The id Selector
The ‘id’ selector is different from the class selector. While a class selector may be applied to several elements on a page, an ‘id’ selector can always be applied to only one element.
An id attribute must be unique within the document.
The style rule below will match a ‘p’ element that has the id value para1

<html>
<head>
<style>
#para1{text-align:"center";color:"red"}
</style>
</head>
<body>
<p>
Selector can be grouped by separating them with a comma!.
<p>
<p id=para1>
This para uses id selector
</p>
</body>
</html>

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}


Color Background Properties

Properties	Values
color	Sets an element’s text color color:red color:rgb(255,0,0) color: #00ff00
background-color	color:red color:rgb(255,0,0) color: #00ff00
background-image	background-image:url('bgdesert.jpg')
Background-repeat	repeat-x repeat-y repeat no-repeat background-repeat: repeat-y

Text Properties

Properties	Values
text-decoration	none underline overline line-through blink
vertical-align	sup super top text-top middle bottom text-bottom
text-transform	capitalize uppercase lowercase none eg: text-decoration: underline text-transform: uppercase
text-align	left right center justify eg: text-align: center
text-indent	text-indent: 1cm

Font Properties

Properties	Values
font-family	serif sans-serif cursive eg: font-family: times
font-style	normal italics oblique font-style: italic
font-weight	normal bold bolder lighter 100 200 300, 400, 500, 600, 700, 800, 900
font-size	xx-small small medium large x-large xx-large a number (pixels) percentage font-size: 150%

Border Properties
The border property allows specifying the style, color, and width of an element’s border. In HTML we use tables to create borders around a text. But with CSS border properties we can create borders in a much effective manner, and it can be applied to any element.

Properties	Values
Border-style	solid double groove ridge inset outset dotted dashed border-style: dotted
border-color	Name or code
border-width	Thin, medium, thick, length
border-top-width	Thin, medium, thick, length eg: border-bottom-width: thin
border-bottom-width	thin, medium, thick, length
border-left-width	thin, medium, thick, length
border-right-width	thin, medium, thick, length
border-top	width, color, style
border-bottom	width, color, style
border-left	width, color, style
border-right	width, color, style
border	set all properties at once

Margin Properties

Properties	Values
margin
margin-bottom	margin-bottom: 25%
margin-left
margin-right
margin-top	margin-top: 5cm

List Properties

Properties	Values
List-style	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none