At its centre, HTML is very simple. In fact, it is so simple in concept that you will be surprised that it has proven to be so powerful a tool. Let’s look at the basic concepts of HTM.
HTML: A Plain Text
That’s right; any HTML document contains nothing but plain text, the characters you can type from your keyboard. There are two big advantages to this:
- Compatibility: Text is handled essentially the same way on all computers, whether it be a Windows PC, Linux box, or a Mac OS. This means that an HTML document created on a PC will work fine on all other computers and vice-versa, providing it was written by using valid HTML.
- Easy editing: You can create and edit HTML documents with ant text editor, such as Notepad and WordPad on Windows system.
Tags and Content
Any HTML document is made up of two things: tags and content. Tags are the HTML itself, in other words, the makeup. All HTML tags are enclosed in angle brackets “<>”
(Without quotes). Here are some common HTML tags:
<title> <p> <img> <table>
Mostly, HTML tags are used in pairs (a starting tag and an ending tag). The ending tag is the same as the starting tag with the addition of a leading slash “/”. So, if we start a paragraph with tag <p> then we end it with </p>.
The tags that do not have a separate closing tag, are knows as self-closing. For them, you need to add space and the slash just before the > to close the tag. The <img> tag is a good example of this. Since it doesn’t have a closing tag, we close it as follows:
Wrong:
<img src=”pic.gif”>
Correct:
<img src=”pic.gif”/>
Content in an HTML document means everything that is not an HTML tag. Simple way of looking at it would be that content is the information you want to show the user. Content can be included in an HTML document in two ways:
- Included as part of the document ( The way text content is handled)
- In a separate file and referenced from the document (The way images are handled).
Here’s an example of HTML that illustrates how tags and content relate to each other:
<p>HTML is <b>very easy to learn! </b></p>
Let’s discuss and analyze this short code of HTML:
<p>is the paragraph tag. It marks the start of a paragraph.- “
HTML is” is the content. It will be displayed to the user. <b>is the boldface tag.- “
easy to learn” is also content. It will be displayed to the user in boldface text as boldface was started before this content and ended after this. </b>is the boldface ending tag.</p>is the paragraph ending tag.
The relation between tags and content will become much clear as you learn more about HTML.
White Space
The term white space refers to characters that take up space in a document but do not actually display. They are the space, the tab, and the new line, which causes text to move to the next line. HTML handles white space in content by ignoring it. Well any number of continuous white space is simply converted into single space. The white space can be a row of 5 spaces, several tabs, or any combination of these, and the resulting display will have just a single space in the content.
Let’s see this in action in the following HTML. Both the HTML will result in same output to the user because of the way HTML handles white space:
<p>one two three four five</p>
<p>one two three four five </p>
White space of this nature in HTML has two aspects:
- You can use white space to format your HTML source code as you like using lines, tabs and spaces to organize the code in a way that’s clear and easy to read. It will have no effect on the final rendering of the document.
- You cannot use white space to format the content because it will have no effect. You must use HTML tags for this purpose.
Comments
A comment is an HTML tag that does not affect the output and is not shown to the user. I can be used by Web Designers to insert comments such explanations. You create a comment like:
<-this is the comment->
Simple HTML documents usually do not need comments, but they can be useful in bulky web pages.
Special Characters
Certain characters have special meaning in HTML, such as the “<” and “>” (without quotes) are characters that are used to enclose tags. This means that you can’t use these characters directly in your content but must use a special code to represent them. For example, “<” (without quotes) is the code for the “less than” symbol (<). Here are some commonly used special characters
CODE
|
CHARACTER
|
<
|
< less than
|
>
|
> greater than
|
&
|
& ampersand
|
"
|
“ double quotes
|
Here’s an example of some character codes used in some HTML code:
<p>The new book name is " Nice & New Book "</p>
And here’s how it will be rendered by a browser:
The new book name is “Nice & New Book”
Another character entity that is commonly used is the non-breaking space. If you actually want multiple spaces in the document, then you must use the non-breaking space character entity . Each one of these is displayed as a space and is never collapsed.
For example, here is a line of code in which the non-breaking space is used:
<p>Total cost $5.55</p>
This line is shown like this:
Total cost: $5.55
Some special characters that you are most likely to use are listed in the Table below
CHARACTER
|
NAME
|
ENTITY
|
£
|
Pound sterling symbol
|
£
|
¥
|
Yen symbol
|
¥
|
¢
|
Cent symbol
|
¢
|
©
|
Copyright symbol
|
©
|
®
|
Registered trademark
|
®:
|
0 comments:
Post a Comment