Learning HTML

Why learn HTML?

HTML stands for HyperText Markup Language and is the main programming language that makes the Web. Background HTML codes lurk behind all zillions of Web pages on the Net.

Many pros actually build Web pages or at least fine-tune them by typing in and editing HTML codes directly. If you don't want to do that, fortunately, you don't have to.

Microsoft Word, for example, lets you save your documents as HTML-based Web pages. This way of working is called WYSIWYG (What You See Is What You Get)... You design a document on screen so it looks like what you want. The program you're using then generates the necessary HTML codes to create a Web page that a Web browser such as Netscape Navigator or Internet Explorer can display.

The WYSIWYG HTML editors allow beginners to build complex Web pages by simply "dragging and dropping" onto the work area. These programs eliminate the need to learn HTML, so you can concentrate on the look of your page.

But if you are serious about doing more than a page or two, it's to your benefit to learn HTML basics, because these programs generate too much extraneous code and it's often necessary to "tweak" it manually. That's why many pros think that the best Web pages should be hand-constructed.

How to learn HTML

The basics are quite simple. HTML files are plain text files with special "tags" or HTML codes that a Web browser knows how to interpret and display on your screen.

If you're serious about learning HTML, you need a good book...

HTML: A Beginner's Guide, Second Edition
by Wendy Willard

This is a great book that provides a solid starting point for beginners who have no programming experience. It will help you learn HTML as quickly and as painlessly as possible.

There are a lot of great HTML learning resources on the Net. Here are a few...

Basic HTML Tags

What are HTML tags?

HTML tags are specifically formatted text that creates 'markers' for web browser to read and interpret. These 'markers' tell the web browser what and how to display things on the web page. Tags are placed in and around text and images (text and images are some of the 'things') that your want to have appear in your web pages.

HTML has a whole bunch of tags (just like the alphabet has a whole bunch of letters) that the web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it knows the tags from the normal text.

Tags are typically words or abbreviations of words placed between angled brackets. So for example: to make text bold, HTML has the 'bold' tag that looks like this:

<b> This text will be bolded </b>

Another commonly used tag is the paragraph tag:

<p>

This is a paragraph of text.

</p>

The HyperText Markup Language (HTML) is composed of a set of elements (HTML tags) that define a document and guide its display.

HTML tags are enclosed in brackets made of the less-than and greater-than signs on your keyboard, (< >). They include a name, some attributes and some text or hypertext, and will appear in an HTML document as...

<tag_name attribute=value> text </tag_name> or
<tag_name> text </tag_name> or just
<tag_name>

Most HTML tags consist of a start tag, <tag_name>, and an end tag, </tag_name>. The end tag is identified by a forward slash (/) before the tag name. Some tags, such as the Break <br> and Horizontal Rule <hr> tags, do not require an end tag.

Tag attributes and their values are entered in the start tag. Attributes are separated from one another by a single space. There should be no spaces after the left bracket (<).

Tag and attribute names are not case-sensitive, so that <FONT> and <font> are interchangeable. Some attribute values, particularly file names, are case-sensitive, however.

Many tags can be nested, that is, placed inside other tags, but tags should never overlap...
<b><i> Correct sequence </i></b>
<b><i> Incorrect sequence </b></i>

The actual page content, text, links, images, etc., is placed between the start and end tags.

Here's the source code of a simple Web page as an example of basic HTML tags...

The tags are in maroon.
The explanations to you are in black.

<html>
Tells the browser that it's reading an HTML page. An HTML document is composed of a single element <html>...</html>

<head>
Defines the beginning of the heading section of the page. This section contains information about the page.

<title> Basic HTML Tags </title>
This is the title of the page. It appears in a window bar identifying the contents of the window, but not on the actual Web page that you view.

</head>
Defines the end of the heading part of the page. It doesn't matter what order you place the tags in the head area, although it's recommended that you include the title tag first on the page, before listing any other tags.

<body bgcolor="#FFFFFF" text="#000000" link="#003399" vlink="#444444" leftmargin="50" rightmargin="50">
Begins the body of an HTML document that contains all the text and images that make up the page. Tells the browser what color to make the background (bgcolor), the normal text (text), the links (link), the visited links (vlink), and sets left and right margins of the document.
"#RRGGBB" is a hexadecimal (base 16) red-green-blue triplet used to specify the color.

<table width="100%" cellspacing="0" border="0">
This tag begins the table, sets its width as 100% of the browser display window and inserts no space between individual data cells (cellspacing="0"). The invisible tables (border="0") are often used for layout. This table has one row and three columns.

<tr>
Begins the first row of the table.

<td>
Begins the first cell.

<img src="img/html-tags.gif" width="102" height="114" alt="Basic HTML tags">
Puts a picture "img/html-tags.gif" into the first cell. The width and height attributes allow the browser to determine the text layout surrounding the image before the entire image has been downloading, which can significantly speed up display of the document text. Alternate text (alt="...") is provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Many browsers also use any alt text as a ToolTip to be displayed when the mouse pauses over the image.

</td>
Ends the first cell.

<td width="100%">
Begins the second cell. The width="100%" attribute ensures the maximum possible width of the cell.

<h1 align="center">Basic HTML Tags</h1>
Inserts the headline and centers it in the cell (align="center").
<h1> is the highest level of headings, followed by <h2> ... <h6>.

</td>
Ends the second cell.

<td>
Begins the third cell.

<a href="index.html"><img src="img/bws.gif" width="110" height="114" alt="Build Web site for you" border="0"></a>
The <a> tag creates a link. In this example, it's telling the browser to turn the image img/bws.gif into a link with the destination URL "index.html." The border="0" attribute makes the blue border around the picture invisible.

</td>
Ends the third cell.

</tr>
Ends the first row of the table.

</table>
Ends the table.

<table width="100%" cellpadding="5" cellspacing="0" border="0">
Begins the next table used as a navigation bar. The cellpadding attribute sets the amount of white space between the actual cell data and the borders of the table cell.

<tr bgcolor="#CCFFFF" align="center">
Begins the first row of the table and sets its background color (bgcolor="#CCFFFF").

<td> <a href="index.html"> <b> Home</b> </a> </td>
<td> <a href="website-planning.html"> <b> Planning</b> </a> </td>
<td> <a href="website-promotion.html"> <b> Promotion</b> </a> </td>
<td> <a href="building-income.html"> <b> Income</b> </a> </td>
<td> <a href="advanced.html"> <b> Advanced</b> </a> </td>
<td> <a href="web-tools.html"> <b> Tools</b> </a> </td>
<td> <a href="web-resources.html"> <b>Resources</b> </a> </td>
The cells contain text links to different Web pages. The <b> ... </b> HTML tags specify that the enclosed text should be rendered in boldface.

</tr>
</table>
Ends the row and the table respectively.

<p>
Instructs the browser to put a space between paragraphs here.

<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size=2>
This tag sets the typeface that will be used to display the text on the screen. In this example the text will be displayed in either Verdana, or Geneva, or Arial, or Helvetica, or sans-serif, depending on which fonts are installed on the system. Valid values for the size attribute range from 1-7. The default font size is 3.

The <i>HyperText Markup Language</i> is composed of a set of elements (HTML tags) that define a document and guide its display.
<br>
They may include a name, some attributes and some text or hypertext, and will appear in an HTML document as...
This is the actual text of the page. The <i> ... </i> tag tells the browser to italicize the enclosed words. The <br> tag specifies that a new line will be started at the given point.

</font>
</body>
</html>
Ends <font>, <body> and <html> tags respectively.

HTML Validators

HTML validators are programs used to check and report on syntax errors in HTML codes.

Unclosed tags, illegal attributes, and other errors can make your Web pages garbled and ugly. Even if your favorite browser shows your pages properly, don't relax, some other browsers can render possible errors in different ways, producing unexpected results.

So it's time to validate your code. The best way to do this is to just use automatic HTML validators. Some of these are programs you download and run on your home computer, others offer a Web-based interface. Also, good HTML editors (such as Macromedia HomeSite) have built-in HTML validation features.

Web-based HTML validators are convenient tools, and they don't take up any space on your hard drive. However, offline validation applications are more flexible and powerful, and considerably quicker if you have a large site.

Here are a few HTML validation services, each with different strengths and specialties...

Web-based HTML validators

W3C HTML Validation Service
This the grandmamma of all online HTML validators. It parses HTML code and checks to see if it complies with the standard and with the W3C's recommendations for good HTML. This is the authoritative way to check if your code is following the standard to the letter.

HTML Tidy
This is the Web interface to HTML Tidy (which is downloadable as an offline tool - see below). It checks the code for HTML standards compliance. In addition to HTML validation, it can also create orderly indentation patterns in your HTML codes, change all of your tags to uppercase or lowercase, and even convert HTML documents to XML.

Offline HTML validators

HTML Tidy
This HTML validator is a remarkable tool when used offline. It's run from a command line. If you're using HTML-Kit (see HTML Editors), you'll probably appreciate HTML Tidy plugin.

Other related tools

PrettyPrinter
This is a little Web application that will load any page's source code and output it neatly indented and formatted for easy reading. It even numbers lines.

Programming Guides

There are a number good programming guides available on the internet which can assist you with HTML, CGI and other commonly used programming languages.

W3Schools.com

This is a good place to start for learning how to code HTML.

Hypertext Markup Language

This is another good HTML reference guide.

PHP Manual

PHP is a scripting language that is embedded into HTML much like Microsoft's ASP (Active Server Pages). Unlike ASP, however, this language can execute on various types of servers, not only Microsoft NT servers. This manual explains how to write dynamic web pages using this server-side scripting language.

PHP Builder

This provides further information for PHP developers.

Resources for creating Web sites

There are a lot of resources dedicated to creating Web sites from beginner's guides to wide selection of site templates. Here are some useful Web resources sorted into categories...

HTML Tutorials
Online and printable HTML tutorials and references for both novices and experienced users. A list of books that will help you learn HTML as quickly and as painlessly as possible.

Web Page Templates - large collection of professional Web design templates
Pre-formatted professional Web page templates. Software requirements and internal structure of Web templates.

Books on Web Designing
Helpful books and literature on Web designing (HTML, CSS, JavaScript, PHP, MySQL, Perl).

Web Developer News
Latest news for Web developers from popular webmaster-oriented websites.

Advanced Webmaster Tools

You must have a professional looking website. It should be pleasing to the eyes, easy to navigate, and well organized. Otherwise, your visitors will not bother to read what you have to say. Your website is a direct reflection of your business. A terrible amateur site is sometimes even worse than having no site at all.

This section provides you with introduction to advanced webmaster tools and techniques such as Cascading Style Sheets (CSS), HTML Frames, JavaScript, PHP, CGI Scripts, and Apache .htaccess file. These tools can enhance your website with many interesting features not available through ordinary HTML.

Cascading Style Sheets (CSS)
Cascading Style Sheets is a powerful webmaster tool for controlling the overall website design. Instead of defining the website design in each and every page, you can use one style sheet file to control fonts, colors and layouts throughout your site. The best webmaster tools and tutorials for creating style sheets that work across all browsers.

HTML Frames
HTML frames allow webmasters to display two or more pages in the same browser window. But using frames can cause problems with search engines. These problems can be corrected, with a little foresight by webmasters.

JavaScript
JavaScript is a compact, object-based scripting language for Web pages. JavaScript code embedded into your HTML pages can enhance them with many interesting elements, from swapping images when you move a cursor over them, to multi-level drop-down menus. With JavaScript, you can create almost application-like pages and even advanced webmaster tools. JavaScript examples are not only educational, but also applicable for practical Web development.

PHP and MySql
PHP is a server-side, HTML embedded scripting language used to create dynamic Web pages. The goal of the language is to allow Web developers to write dynamically generated pages quickly. A brief introduction to PHP, tutorials, examples. Simple PHP mail script.

CGI Scripts
CGI, which stands for Common Gateway Interface, is not a programming language but a protocol - a set of rules for how a Web server talks to a program. CGI scripts allow webmasters to add interactive and dynamic content to Web pages. You can display a page counter, keep track of your visitors or have your own chat room by using this flexible webmaster tool.

.htaccess file
Apache .htaccess file is an advanced webmaster tool for controlling websites. Short tutorial and the most notable and useful htaccess examples - custom error pages, enabling SSI, redirects, protecting your bandwidth, preventing directory listing.

Articles

Software & hardware

Computer Internet Security - protection against network security attacks
How to improve your computer Internet security and protect your computer against network security attacks and other accidents.
"Every minute that your computer is connected to the Internet, either through a dial-up (modem) connection or through a broadband (DSL or cable) service, it is at risk..."

Advanced and free spam blockers
New generation of email spam blockers - from a free spam blocker for personal use to an advanced server-side antispam software.
"Email spam has reached epidemic levels. Many active Internet users and online business owners receive hundreds of junk emails each day. There are several companies that have found gaps in the antispam software market and developed new classes of spam blockers..."

Remote computer access software
New web-based approach to remote computer access - GoToMyPC versus other remote access software (LapLink, Timbuktu, pcAnywhere).
"Unlike other remote access software which requires that special programs are installed on both machines, GoToMyPC allows you to remotely view and control your home or office PC from any Web browser on another Windows, Mac, Linux, Unix or Solaris computer without having to install anything on the dialing end..."

Fast and free Internet accelerators
Comparison and reviews of the most popular fast and free Internet accelerators.
"If you suffer from slow Web connection, here are two Internet accelerators which can solve this problem. Both of them require no new hardware and work with any low-speed Internet connection, including dial-up, ISDN, iDSL, DSL, and wireless..."

Satellite Internet access
High-speed satellite Internet access is ideal for businesses and people that can't subscribe to traditional high-speed Internet access methods.
"If you can get a clear view of the southern sky, you can use satellite Internet access to surf the Web, download files, or get streaming media. While it's not as cheap or simple to install as cable modems or DSL, in areas not served by them, it's the best (and only) choice..."

Online faxing
How to send and receive faxes by email.
"The ability to use any Internet-connected computer as a fax machine is one of a few things on the Web that can fundamentally change the way you work..."

Online data backups
A valuable addition to your total data protection solution.
"About five years ago online data backup services began to emerge as an alternative method of backing up your data. The best advantage of online data backups is that they, by definition, are remote, so if a fire burns down your home you'll still have a backup to roll your data back..."

Website building & hosting

Easy website building tool
Site Build It - an easy website building tool that may change your business. The complete Site Build It reference center.
"The word is spreading fast about SBI, and it's no wonder. This is the way small business will do business on the Net. In five years, every hosting provider will offer a similar easy website building tool that delivers business success, free of the need to master technology, search engine optimization, and so forth..."

Improving business writing skills
How to improve business writing skills for the Web and real world.
"Writing to PREsell is an entirely new concept to the art of business writing. Most importantly, it addresses the way that the vast majority of people use the Web - they search for information, solutions, answers to questions, and so on. They don't look for YOU..."

Dedicated IP hosting
Is Web hosting with dedicated (static) IP address better than having a shared IP address for your website?
"Due to the rapid increase of the number of registered domain names and the finite number of IP addresses, Web hosting providers are forced to use shared IP's when possible. In fact, hundreds of websites often share the same address. Dedicated IP hosting is no longer the norm and usually costs more..."

Avoid my hosting mistakes
How to choose a good host.
"Choosing a good host is a rather difficult endeavor since you can get excellent or lousy service for the same price. It's much better to get it right the first time, than to move from one host to another spending time and money. Learn from my hosting mistakes, and pick the right host for yourself..."

Top Five Questions to Ask Your Web Hosting Company
Each day many new and existing webmasters either launch a new web site for the first time, or transfer their web site to a new web hosting provider. In preparation for this important process, there are five important questions that should be asked prior to signing on with a new web hosting company...

Is Your Web Hosting Fast Enough?
Ever try to get to your own web site only to discover that it seems to take a long time for the page to load? Here are a few pointers on how exactly to understand and quantify your page load times...

Transfer Your Web Hosting the Right Way
You've heard the horror stories, and lived through your own: web hosting providers that didn't live up to your expectations. Reasons often stated for switching hosting companies include - additional features not available, technical support not able to quickly solve problems, billing irregularities or over billing, and most importantly for the majority of web hosting customers: poor email performance...

Resell Web Hosting in Five Easy Steps
If you've ever wanted to resell web hosting, but weren't exactly certain how to get started - this article is for you! We'll outline the five basic steps necessary to create a web hosting business through reselling accounts that are provisioned in a reseller web hosting data center. While there are many details that are required to be successful in any business, these five steps should get you started, and with some diligence and persistence - you may become a sizable web hosting venture...

Free Downloads

There are hundreds of tools and softwares available on internet for web building. i will provide here a link where you may find all the required softwares at one place.

Web Hosting Directory