HTMLWhat is HTML? : HTMLWhat is HTML? HTML or Hyper Text Markup language is a standard which is used by World Wide Web documents. We use a program called browser to view documents.
It is not a programming language though it is termed as language.
HTML uses what is called tag and is represented by angle brackets “<“ and “>”.
Any tag which is contained by angle brackets is considered as an HTML tag by the browser and interpreted accordingly.
HTML Basics : HTML Basics Tools required for web publishing.
A web page can be very easily created using a simple text editor called Notepad. All HTML files are plain ASCII text files with .htm or .html extension.
You also require a web browser to view your files. Internet Explorer can be used for this.
In Internet Explorer, the File|Open command should be used to open a file on the local host or on the Internet. : In Internet Explorer, the File|Open command should be used to open a file on the local host or on the Internet.
Document Tags : Document Tags Required for every HTML page you create.
Define different parts of the document
An HTML document has two distinct parts—a Head and a Body. You enter title of the page, and other commands in the head of the HTML document.
To create the head portion of your HTML document and to give the document a title enter the following text in your editor:
A Web Page
This tells a Web Browser what information should be included in the head Portion of the document and by what name should it call the document in the title bar of the browser window.
Slide 5 : The body is where you will do most of your work, you will enter, graphics, etc.
To add the body section, start after the tag, enter the following:
Before the first tag, enter the following:
After the last tag, enter the following in the document :
Now it is a complete web document
Creating an HTML template : Creating an HTML template Start by entering the following in a blank text file:
Enter title here
This is body of an HTML page
Save it with the name template.htm. Now whatever you are ready to create a
new HTML document, simply load template.htm into your text editor and use
the Save As command to rename it. Then you can edit the renamed file.
Container Tags : Container Tags Those tags which have the form and are called container tags. They hold, or contain, the text and other HTML elements between two tags. The
,,, and tags are called container tags.
The syntax for container tags is
Text or other HTML elements go here Empty Tags : Empty Tags Some tags do not require ‘>’ tags are called empty tags.
An example of this is the
or horizontal rule tag.
This tag draws a line across the width of your document. Consider the following listing;
Horizontal Line
The following is a horizontal line:
The rest of this is just more text
When viewed in web browser, a horizontal line will separate the two sentences : When viewed in web browser, a horizontal line will separate the two sentences
Entering paragraph text in your webpage : Entering paragraph text in your webpage You have seen that you can just type text into an HTML document and it will be displayed in the browser. Technically, though, most of the text you type should be in another container tag—the
(paragraph tag). This tag is used to inform a web browser what text in your document constitutes a paragraph.
The paragraph uses the following format.
Example:
Here is the text for my paragraph.It doesn’t matter how long it is, how may spaces are between the words or when I decide to hit the Enter/Return key. It will create a new paragraph only when I end the tag and begin with another one.
Tag :
Tag Consider an example of entering an address in you web document as follows.
XYZ International Ltd.
N.G. House
Arya Nagar
Chennai 600 009
It looks all right when you type in your text editor. However, when it is displayed
in a web browser, it looks like figure in the next slide.
Slide 12 : The address becomes illegible. The problem is web browser ignore extra spaces and returns! But is you put each of these lines in a paragraph container, end up with a space between each line and that would look wrong, too.
The answer is the empty tag
, which forces a line return in your web document. Properly formatted, your address would look like this. : The answer is the empty tag
, which forces a line return in your web document. Properly formatted, your address would look like this.
XYZ International Ltd.
N.G. House
Arya Nagar
Chennai-600 009
And it would look just right in your web browser as given below.
The comment Tag : The comment Tag This tag is fairly unique, in that it is actually used to make the web browser ignore anything that the tag contains. That could be text, hypertext links, image links, even small script and programs.
For now you will use comment tag to hide text. The point in hiding the text is that it allows you to create a private message that is intended to remind you of something or to help those who view the raw HTML document to understand what you are doing. That is why it is called comment tag.
For instance
Anything you type between should be ignored by the browser.
Even multiple lines are ignored. As with most tags the comment tags ignores
Returns.
Creating a complete web page : Creating a complete web page Let us see how you can build a complete web page. Start by loading the template and using the Save As to create a new document for this example ( Call it test.htm or something similar)
Now, create a document that looks something like listing below.
The testing tags page
On this page we are reviewing the different types of tags that we’ve learnt in this chapter. For instance, this is the first paragraph.
In the second paragraph, we are going to include the address. It formatted correctly.
XYZ International Ltd.
NG House
Arya Nagar
Chennai 600 009
When you have finished entering the text and tags, use the Save in your text editor. Now switch to your web browser, and load your new page using the Open File ( or similar) command. It should look something like figure below: : When you have finished entering the text and tags, use the Save in your text editor. Now switch to your web browser, and load your new page using the Open File ( or similar) command. It should look something like figure below: