Create A Static Website

Introduction to CSS - HTML And Cascading Style Sheets

Written by Administrator

Sunday, 03 January 2010 09:41

HTML Tutorials

CSS Introduction

What's the big fuss with CSS?

Let's have a look at Cascading Style Sheets (CSS) and find out why it is so powerful when it is combined with html

Stylesheets (CSS)

Style sheets are used to enhance document content. If you use an external css file then it easier to change a color, font etc. on all of the web pages by changing the value in the the css file.

There are different ways of applying style sheets in a HTML document.

Internally on the html page with <style> tags
From outside the html document by calling the css file

An example of a styling tags in the head section.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<style type="text/css">

body{
background-color:green;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;
}

</style>
</head>

<body>

<h1>This an example of CSS</h1>

</body>

</html>

This is how it will look in a web browser

body css	background-color:green;
h1 css	font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #0000FF;

Styling using Class

All html 4 tags that display content can accept classes. You can add classes to your stylesheets and call it between the body tags.

An example of a styling tags and a classes in the head section

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<style type="text/css">

body{
background-color:green;
}

.exampleclass

{

font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;

}

</style>
</head>

<body>

<h1 class="exampleclass" >This an example of CSS</h1>

</body>

</html>

This is how it will look in a web browser

Using Identity with Style sheets

In HTML 4 you can also use an attribute called identity which as name can be applied to.

The "id" tag can be used to refernce a style sheet and apply the formatting in between the body tags of your web page.

An example of a styling tags an identity (id)in the head section

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<style type="text/css">

body{
background-color:green;
}

#exampleid

{

font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;

}

</style>
</head>

<body>

<h1 id="exampleid" >This an example of CSS</h1>

</body>

</html>

This is how it will look in a web browser

CSS example

Working With CSS Colours

If you apply colors in html 4 then it is important to have the color number in hexadecimal and a preceding "#" character e.g.

color="#FF00FF"

The six number hex value represents, red-green-blue (RGB) that form the color.

Color names are represented in either hexadecimal numbers or color names. You can specify any color by its hex value or choose from 16 color names.

16 HTML Named Colors And Hex Values

Name	Hexadecimal Value	Color

aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

An example of a styling tags in the head section.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

.body
{
font-family: Arial,sans-serif;
color: #008000;
background-color: #FFFFFF;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

</style>

</head>
<body>

<h1 class="body">This an example of CSS</h1>

</body>

</html>

The result will be as follows: CSS Color Example

You can also use the color name in the hexadecimal value place which will give the same result:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

.body
{
font-family: Arial,sans-serif;
color: #green;
background-color: #white;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

</style>

</head>
<body>

<h1 class="body">This an example of CSS</h1>

</body>

</html>

CSS And Divident Content (Div) Tags

You can group content elements with div in HTML 4 documents.

Div tags can also be very useful for web page layout. Eacsh div block can be set with its very own style rules.

You can also you the class and id attributes to style the div blocks.

Here is an example of implementing some div tags in a HTML 4 document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<style type="text/css">

div
{
background-color: yellow;
}

#block1 { position:absolute; top:2px; left:2px; }

#block2 { position:absolute; top:30px; left:10px; }

#block3 { position:absolute; top:70px; left:15px; }

</style>

</head>
<body>

<div id="block1">
<p>This is block 1</p>
</div>

<div id="block2">
<p>This is block 2 </p>
</div>

<div id="block3">
<p>This is block 3 </p>
</div>

</body>

</html>

This is how the above code will look in a web browser:

CSS DIV Example 3

How To Align Text With CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<style type="text/css">

div
{
background-color: yellow;
}

#block1 { text-align:center; }

</style>

</head>
<body>

<div id="block1">
<p>This is block 1 <br />
This is still block 1
</p>
</div>

</body>

</html>

This is how it will look in a web browser:

As you can see the text is centered in the between the div tags.

Last Updated on Monday, 04 January 2010 06:15

What Is HTML - HTML Introduction

Written by Administrator

Sunday, 03 January 2010 09:31

HTML Tutorials

HTML Introduction

Before we start working through the different tutorials of HTML, lets have a look at some background information of HTML.

What Is HTML?

Hypertext Markup Language is the authoring software language used on the Internet's World Wide Web. HTML is used for creating World Wide Web pages.

MARKUP is a method used to tell a web browser how to display a page and content.

HYPER TEXT - Link HTML pages together in such a way that you can navigate from one page to the next.

This markup language files can have the extension of .html or .htm. eg. index.html

How Can You View HTML?

To view HTML you will need to have a web browser to compile the HTML code and display it to you in a readable form. You can also view html in authoring software eg. Microsoft Frontpage and Dreamweaver.

There are lots of web browsers on the market, but here are the most popular are:

Microsoft Internet Explorer
Mozilla Firefox
Google Chrome
Opera

What is WWW?

WWW stands for world wide web. Basically the www is an entity that consists of computers (servers) that are connected to each other via telephone lines, or satelite.

The html hyperlink makes it possible for us to surf the www between different websites. What makes this all possible is a protocol called (HTTP) HyperText Transfer Protocol, which allows communication between pc's and servers.

Domains

This is basically the address of a website. The same like we have letterboxes and have addresses, so does domains work.

Here is an example of a domain http://www.how-2-create-a-website.com

In actual fact the above domain name actually consists of an IP address eg. 127.2.1.3

I can address this website address name with different variations:

http://www.how-2-create-a-website.com
http://how-2-create-a-website.com
http://how-2-create-a-website.com/index.html

Who control the HTML standard?

The World Wide Web Consortium (W3C) create a standard so that all web browsers can conform to this standard.

Check them out here at W3C

Document Type Definitions

The W3C consortium developed 3 types of document declarations.

Your first line of HTML code should contain a declaration of which version of HTML you are using in the document.

This document declaration is called "Document Type Definitions" or DTD in short. Basically this states the language rule used in html document.

Here are the three DTD's

Strict DTD
Loose DTD
Frameset DTD

1. Strict DTD

Strict DTD is used in documents that uses valid HTML 4markup .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. Loose DTD

This specification is not as strict as strict dtd, but accomodate older markup that is not used anymore. Back compatible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. Frameset DTD

This DTD is used for a HTML frameset document that uses frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML Basic Document Structure

A proper HTML document should comprise of the following 3 parts.

A Document Type Definition (DTD)
A Head section
A body section

Here is an example HTML document structure.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

[Head info {title and meta tags} will be here]

</head>

<body>

[Body {content} info will be here]

</body>

</html>

Title Tag

The title is between the <head> </head> tags. the title tag displays the document titile in the web browser windo title bar on top.

Body Tag

In the body tag you can type your content eg. Hello World!

<body>

Hello World!

</body>

The web browser will display the words

Hello World!

What tools can you use to create HTML documents?

A simple free tool that can be used is Microsoft Notepad. You only need to save the file with the extension .html or .htm to create your web page. You will have code everything yourself.

There are WYSIWYG (What you see is what you get) tools that you can buy like Microsoft Frontpage and Dreamweaver.

These authoring tools have syntax color highlighting and offers preview modes to see how the page will look. You can quickly create a webpage without coding everything yourself. Almost drag and drop.

How can you validate your HTML to see if it conforms to the W3C standard?

Dreamweaver 8 has a feature built in which can validate markup.

Alternatively you can go to W3C website and use their html validator at:

http://validator.w3c.org

This tool will quickly validate your document online and if there are errors, give you a breakdown and how to fix it.

HTML authoring tips

Take into consideration universial accessibility
Speed
Make you html layout neat and readable
Use new techology like css for presentation

What is HTML - HTML Tag Chart - HTML Fundamentals

Written by Administrator

Wednesday, 30 December 2009 21:49

What is HTML?

Hypertext Markup Language is the authoring software language used on the Internet's World Wide Web. HTML is used for creating World Wide Web pages.

MARKUP is a method used to tell a web browser how to display a page and content.

HYPER TEXT - Link HTML pages together in such a way that you can navigate form one page to the next

HTML Tag Chart

Here's a list of HTML TAGS that you can use to make a website.

It is important to note that some of these tags is no longer used, some still gets used today. CSS (Cascading Style Sheets) and doctypes is not mentioned here. I will speak about them in other articles on the site.

HTML FUNDAMENTALS

Tag	Property	Description
<html> </html>		Top line of all html document
<head> </head>		Houses general browser information for web page
<title> </title>		Title of document. Located in header
<body> </body>	background bgcolor bgsound font link alink vlink topmargin leftmargin marginheight marginwidth	Applies attributes to entire document

HTML TEXT FORMATTING

Tag	Description	Example
<b> </b>	Bolded text	Sample text
<i> </i>	Italicized text	Sample text
<u> </u>	Underlined text	Sample text
<pre> </pre>	Preformatted text	Sample text
<h1> </h1>	Header 1	Header 1
<h2> </h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4> </h4>	Header 4	Header 4
<h5> </h5>	Header 5	Header 5
<h6> </h6>	Header 6	Header 6
<sub> </sub>	Subscript	_Subscript
<sup> </sup>	Superscript	^Superscript

HTML FONTS

Tag	Property	Description
<font> </font>	color size name	Applies style to text

HTML LINKS

Tag	Property	Description
<a> </a>	href target style class name id	Generates a link to other documents or locations

HTML IMAGES

Tag	Property	Description
<img>	src alt name border height width	Creates an image

HTML FORMATTING

Tag	Description	Example
<blockquote> </blockquote>	Used for long quotes. Indents all text and images within the tags.	Sample of text in a block quote format
<ol> </ol>	Ordered List (used with <li>)	Item 1
<ul> </ul>	Unordered List (used with <li>)	Item 1
<li>	List element
<dd> </dd>	Definition List	Sample text
<dt>	Definition Term	Sample text
<dd>	Definition Description	Sample text
<p> </p>	Paragraph return	Sample text
<br>	Line break	Sample text
<hr>	Horizontal rule
<center> </center>	Center elements	Sample

HTML TABLES

Tag	Property	Description
<table> </table>	border cellpadding cellspacing width height name id title bgcolor background align valign	Holds the table elements
<tr> </tr>	height bgcolor background align valign title	Defines a new row
<td> </td>	height width bgcolor background align valign title colspan rowspan	Defines a table cell
<th> </th>	height width bgcolor background align valign title colspan rowspan	Table header. Automatically bolds and centers contents
<tbody> </tbody>	height width align valign bgcolor background	Applies formatting to surrounded cells
<colgroup> </colgroup>	height width align valign bgcolor background colspan	Applies formatting to given column

HTML FORMS

Tag	Property	Description
<form> </form>	method action name	Holds the form elements
<input type=>	text password hidden radio checkbox submit image reset	Various types of form elements
text	name value width maxlength
password	name value width maxlength
hidden	name value	Used to pass hidden elements to forms
radio	name value	Radio 1 Radio 2
checkbox	name value checked	Check 1 Check 2
submit	value
image	src height width alt name border
reset	value
<select> </select>	name size	Create Drop-down boxes. Used in conjunction with option
<option>	selected name value	Option 1 Option 2
<textarea> </textarea>	name rows cols wrap	Text area box. Text is typed between the tags
wrap	off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

Comments (2)

Last Updated on Friday, 01 January 2010 09:16

Forum Login Form

Latest Comments

Styling using Class

Using Identity with Style sheets

16 HTML Named Colors And Hex Values

Here is an example of implementing some div tags in a HTML 4 document.

What is WWW?

Domains

Who control the HTML standard?

Document Type Definitions

Title Tag

Body Tag

What tools can you use to create HTML documents?

How can you validate your HTML to see if it conforms to the W3C standard?

HTML authoring tips

HTML FUNDAMENTALS

HTML TEXT FORMATTING

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

HTML FONTS

HTML LINKS

HTML IMAGES

HTML FORMATTING

HTML TABLES

HTML FORMS