Comprehensive guide to HTML

by 2 people | Log in to rate

Ranked #30,250 in How-To, #308,369 overall

HTML file

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

The basic

Setting text to bold and italic
bold
bold

One has to start somewhere. Bold in HTML is done by enclosing your text in tags. You can use this almost everywhere. In subtitles, titles, the body ...

italic
italic

Italic works by the same principle. Enclose the text with tags and you are done.

Center text

Center text

This will center the text.

To brighten the image you need to use an image at Squidoo is to upload it somewhere.
If an image already on some server, you need to browse the URL of that particukar image.

Take Squidoo logo in the top left corner for example. we need to look at the properties of that image, by clicking the properties ,it shows http://img.squidoo.com/logo_h_sm.gif
An image

<img src=http://img.squidoo.com/logo_h_sm,gif />

We will used the URL found earlier into this code. The src="" is used to specify that URL.

What is alternate text in an Image?

<img src="http://img.squidoo.com/logo_h_sm.gif" alt="Squidoo rocks!" />

Alternate text is not visible ( shows only when hoovering over the image),

To resizing an Image

<img src="http://img.squidoo.com/logo_h_sm.gif" width="95" />

<img src="http://img.squidoo.com/logo_h_sm.gif" height="35" />

The width, the height, or both can be specify, make sure the proportions are correct, as it will make your image look funny otherwise. The size is specified in pixels. You can see the original dimentions in pixels when viewing the properties of your image. In our case, the logo was 184 x 59 pixels.
When the browser fetches the image from the server, it still loads the original one and then resizes it on the local PC. Images are better resized in a photo editor, the size will be smaller and quality better.

Alignment ,you can toy with the way your mages are placed on the page.

Left & right alignment

Please see these 2 images here, one is left aligned, one is right aligned. Text floats between them, and will go underneath when running out of space (as you can see with this last line).

<img src="http://img.squidoo.com/logo_h_sm.gif" height="30" align="left" /><img src="http://img.squidoo.com/logo_h_sm.gif" height="30" align="right" />There are 2 images here, one is left aligned, one is right aligned. Text floats between them, and will go underneath when running out of space (as you can see with this last line).

Important is tha here are the image's align="left" and align="right" attributes.
Always place your images before the text you want them aligned with.

How To Align the text and Image in Centre

This text and image are centered

This text and image are centered
<img src="http://img.squidoo.com/logo_h_sm.gif">

This is the way to center items. It works for images, links, ...

You can wrap everything in tags and add style="text-align: center;".

Clearing up any alignment
This text is aligned.
But this text is not.

<img src="http://img.squidoo.com/logo_h_sm.gif" align="left" />This text is aligned. But this text is not.

The tag normally just places your text to a new line. When adding the clear="all" attribute, it also clears any alignment set in previous images.

How To create Spacing
It is easy to Creat space around an image.

<img src="http://img.squidoo.com/logo_h_sm.gif" height="30" align="left" style="margin-right: 20px;" />Creating space around an image.

Important to note is the style="margin-right: 20px;". It creates space between the image and the text.
You may use margin-top to create space above the image, margin-left to the left of the image, margin-bottom below the image. Or just use margin to create space all around.
Example:
How to create different space all around the image:
style="margin-left: 10px; margin-top: 20px; margin-right: 30px; margin-bottom: 5px;" Link me up baby Without links, there would be no world wide webLinks are the cornerstone of the web. So it's only logical that you should be able to add some.

How to create a simple link
A link to a lens
<a href="http://www.squidoo.com/magic-the-gathering/">A link to a lens</a>

Links are done with <a></a> tags. Enclose the text with them, and specify the href="" attribute as the URL of the destination.

How to use An image as a link

<a href="http://www.squidoo.com"><img src="http://img.squidoo.com/logo_h_sm.gif" /></a>

Just combine the link, with the code we saw when adding images.

combinations

Partially bold link text
<a href="http://www.squidoo.com/magic-the-gathering/">Partially bold link text</a>

<a href="http://www.squidoo.com"><img src="http://img.squidoo.com/logo_h_sm.gif" />Combine image and text</a> Colors O christmas tree, o christmas tree !First thing to be said, don't overdo the color thing.

How to colored text

Yellow
yellow

There are many options to accomplish this, but I have found this one to be the easiest.
First we enclose the text in tags. Then we add a style to it.
"color: green;" will set it to green.
"font-weight: normal;" will reverse what the tags do.
The color "green" can be replaced by the color you want, ranging from yellow, white, black, darkred to a color you specify yourself.
If you want to specify your own color do so in hexadecimal RGB color (#FFFFFF for white for example). Backgrounds If you want to make text stand out from the rest, use backgrounds and/or a color.

Simple green background

Simple green background

This text floats on the right side, with a nice background to make it stand out.

A nice feature with backgrounds is to make some relevant text stand out from the rest, but not in the flow.

This text floats on the right side, with a nice background to make it stand out.A nice feature with backgrounds is to make some relevant text stand out from the rest, but not in the flow.

Tables Squidoo doesn't support your standard <table> tags. They'll be filtered out and you'll be left with nothing.
However, there is a fairly easy way to simulate tables.

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

Row 3 Cell 1 & 2

Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2
Row 3 Cell 1 & 2

That's a whole bunch of code, but don't worry, it's easier than it looks.
First of all, every cell will be represented by tags.

The first cell:
Row 1 Cell 1&
We mark every cell as float: left. This is because tags would otherwise go to a new line every time. Specify the width of your column with width: 100px;, unfortunatly, you will have to do this for every cell.
The first cell has a border all around border: solid 1px black;.
And this padding: 2px; adds a small space between the text and the border. Same for the margin: 0px;, it's used to remove any space between the cells and/or rows.

The second cell is similar:
Row 1 Cell 2
The only addition is border-left: 0px;, because there is already a border on the left, no point in adding it twice.

You can repeat this if you need more than 2 columns.

The next line is exactly the same as the first line, with 1 exception.
clear: both; on your first cell makes them go to the next line.

The third line is an example of merging cells.
Row 3 Cell 1 & 2

clear: both; again makes it go to a new line.
width: 205px; is calculated by taking the with of 2 cells: 200px. Then you add any borders that are now missing (1 pixel, border in the middle): 201px. Then you add any padding that will be missing. Each cell has padding of 2px on the left en on the right, now you are missing a cell, so that's 4 pixels: 205px in total.
The rest is the same.

You've now created the same look as a table, unfortunatly with alot more code than a normal table.\

To Learn More about HTML please visit W 3 School.com

HTML documents are text files made up of HTML elements.

HTML Tags
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 and
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, means the same as

The HTML element starts with a start tag:
The content of the HTML element is: This text is bold

The HTML element ends with an end tag:

The purpose of the tag is to define an HTML element that should be displayed as bold.

clicking here to learn more Learn Basic of HTML

New YouTube vids

Basic HTML Tutorial

4.589404

Runtime: 202
69671 views
57 Comments:

Runtime:
views
Comments:

curated content from YouTube

Great Stuff on Amazon

MIS+ CREATE WEB PGS HTML+ SIMNET XPERT

by: Haag / Laudon

Amazon Price: (as of 12/30/2009)

Getting started with HTML

This is a short introduction to writing HTML. What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as

to indicate the start of a paragraph, and

to indicate the end of a paragraph. HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World.

Many people still write HTML by hand using tools such as NotePad on Windows, or TextEdit on the Mac. This guide will get you up and running. Even if youdon't intend to edit HTML directly and instead plan to use an HTML editor such as Netscape Composer, or W3C's Amaya, this guide will enable you to understand enough to make better use of such tools and how to make your HTML documents accessible on a wide range of browsers. Once you are comfortable with the basics of authoring HTML, you may want to learn how to add a touch of style using CSS, and to go on to try out features covered in my page on advanced HTML

p.s. a good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". On some browsers, you instead need to click on the "File" menu and then on "View Source". Try it with this page to see how I have applied the ideas I explain below. You will find yourself developing a critical eye as many pages look rather a mess under the hood!

For Mac users, before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. For TextEdit, you can set this with the "Format" menu's "Make Plain Text" option.

This page will teach you how to:

start with a title
add headings and paragraphs
add emphasis to your text
add images
add links to other pages
use various kinds of lists
If you are looking for something else, try the advanced HTML page.

Start with a title
Every HTML document needs a title. Here is what you need to type:

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag . The title should be placed at the beginning of your document.

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar.

Add headings and paragraphs
If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

An important headingand here is a slightly less important heading:

A slightly less important headingEach paragraph you write should start with a

tag. The

is optional, unlike the end tags for elements like headings. For example:

This is the first paragraph.

This is the second paragraph.

Adding a bit of emphasis
You can emphasize one or more words with the tag, for instance:

This is a really interesting topic!Adding interest to your pages with images
Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.

Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

Adding links to other pages
What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the tag. Lets define a link to the page defined in the file "peter.html":

This a link to Peter's page.The text between the and the is used as the caption for the link. It is common for the caption to be in blue underlined text.

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:

This is a link to W3C.You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

Three kinds of lists
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the
and
tags, for instance:

the first list item

the second list item

the third list item

Note that you always need to end the list with the
end tag, but that the is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the
and
tags. For instance:

the first list item

the second list item

the third list item

Like bulletted lists, you always need to end the list with the
end tag, but the end tag is optional and can be left off.

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a tag and ends with Each term starts with a tag and each definition starts with a . For instance:

the first term
its definition

the second term
its definition

the third term
its definition
The end tags and are optional and can be left off. Note that lists can be nested, one within another. For instance:

the first list item

the second list item

first nested item

second nested item

the third list item

You can also make use of paragraphs and headings etc. for longer list items.

HTML has a head and a body
If you use your web browser's view source feature (see the View or File menus) you can see the structure of HTML pages. The document generally starts with a declaration of which version of HTML has been used, and is then followed by an tag followed by and at the very end by . The ... acts like a container for the document. The ... contains the title, and information on style sheets and scripts, while the ... contains the markup with the visible content. Here is a template you can copy and paste into your text editor for creating your own pages:

replace with your document's content

Tidying up your markup
A convenient way to automatically fix markup errors is to use HTML Tidy which also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits. Tidy is available for a wide range of operating systems from the TidyLib Sourceforge site, and has also been integrated into a variety of HTML editing tools.

Getting Further Information
If you are ready to learn more, I have prepared some accompanying material on advanced HTML and adding a touch of style.

W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML. However, it is a technical specification. For a less technical source of information you may want to purchase one of the many books on HTML, for example "Raggett on HTML 4", published 1998 by Addison Wesley. XHTML 1.0 is now a W3C Recommendation.

Best of luck and get writing!

New Flickr Photos

capturaVisorFlickr1

Barcamp DC 3

InterLab 2009

$Chrome: What is it good for? by Mountain/\Ash$

Chrome: What is it g...

capturaVisorFlickr

webslide error messa...

scumbags

Campus Party México

automatically generated by Flickr

Great Stuff on eBay

Fetching new data from eBay now... please stand by

New Guestbook

submit

Show All

Share this Guestbook
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- RSS
- Email

New Orbitz!

New YouTube vids

Basic HTML and CSS Tutorial. H...

Runtime: 39:20 | 690430 views | Comments

HTML Tutorial 1 - Designing A ...

4.664835

Runtime: 6:32 | 92221 views | Comments

Introduction to HTML Tutorial ...

Runtime: 9:34 | 8971 views | Comments

automatically generated by YouTube"

OCT

by OCT

Hello world.learn Html as easy as 123

(more)

Explore related pages

Website Tips ~ Share Yours!: Website tips on everything you ever wanted to know about building a successful w...
The Beginner's Guide to Squidoo: I am learning how to make good Squidoo lens pages right now. The best way I hav...
squidoo: Squidoo � una collezione manualmente assemblata, di quasi 600.000 pagine costrui...
Site Rubix Review: Say Hello to Site Rubix, Say Goodbye to HTML: Have you been eager to set up your own professional looking website but have bee...
Health Insurances: Health insurance is a type of insurance whereby the insurer pays the medical cos...

OCT Recommends...

Create a Lens!

Squidoo

Comprehensive guide to HTML

HTML file

HTML documents are text files made up of HTML elements.

New YouTube vids