HTML CSS Starter

Let's start with some tags now.

But before we move on I would like to tell you about another good editor I found in the course of time for creating HTML and CSS Pages.

The editor is Aptana Studio 3.0. You can download this editor from the link below.

Download Aptana Studio 3.0

Now let's look at the tags.

HTML Headings

HTML heading can be defined with tags <h1> to <h6>.

For Example:-

<html>
   <head>
       <title>
           Sample Webpage
       </title>
   </head>
   <body>
       <h1>
           Heading 1
       </h1>
       <h2>
           Heading 1
       </h2>
       <h3>
           Heading 1
       </h3>
       <h4>
           Heading 1
       </h4>
       <h5>
           Heading 1
       </h5>
       <h6>
           Heading 1
       </h6>
   </body>
</html>

See how it looks!

Now it's very important to keep in mind that in HTML there are many tags.
Some tags will be with Opening and Closing pair of Tags and some of them will be alone i.e. without any Closing Tag.

Most of the times the tags are in pair.
I will specify the tags where they don't have Closing Tags.

Paragraphs and Line Breaks

Now let's discuss about writing few things on the webpage.

Normally you can write the contents inside body tag without any other tag.

That will make your contents look weird or monotonous. Again an important thing is that you will not be able format those contents properly. it will be difficult to manage and format those contents. To avoid this problem, HTML has given us many tags.

First important tag in this list is paragraph tag.

It comes with a Pair of Tags

<p></p>

Let's have a look at an example.

<html>
   <head>
       <title>
            Paragraph Demo
       </title>
   </head>
   <body>
       <h1>
           Heading 1
       </h1>
       <p>

On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.

You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.

</p>

</body>
</html>

Now, have a look at it!

Now that we have seen <p> tag we must understand how it works.
All the contents that go inside the <p> tag will ignore all the extra white spaces.
For Example, if write the <p> tag as follows it will produce the same output on browser as that of the previous one.

<p>

On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.

You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.

To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the

Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset

commands so that you can always restore the look of your document to the original contained in your current template.
</p>

<p> tag is designed such that it will ignore all the extra white spaces. If you keep long spaces between words it will automatically convert it to single space.
All adjucent single spaces, tabs and new lines will be converted to single space and will be printed on the browser.

Now, if you explicitly want to print the text on new line what to do?

For this we have Line Break Tag
<br>

This is a tag without closing tag. It can also be written like this
<br/>

You can put this tag anywhere in the page to put a line break.

So this was all for this time.
We will see more new things in the upcoming days.

What is HTML?

HTML stands for HyperText Markup Language.
Many people say HTML is a programming language, but it is not. HTML is a markup language.

A markup language is a set of markup tags. HTML uses markup tags to describe webpages.

What is HTML Tag?

HTML markup tags are generally called as HTML tags.
HTML tags are keywords surrounded by angular brackets. Example:- <HTML>
Tags come in pairs i.e. <HTML> and </HTML>
First tag is called as Start Tag and last one is End Tag.
They are also called as Opening and Closing Tags respectively.

HTML Files

HTML files are known as Web Pages.
HTML document can contain HTML tags and plain text.

How to create a Web Page and Where to see it?

You need nothing to create HTML documents.
You don't need to have HTML editor, Web Server or Web Site even.

You can simply write your HTML document in Notepad and see the result in the Internet Explorer or any other Internet Browser.

Although we have many good editors for HTML like Coffeecup HTML Editor, HTML Kit, Kompozer and some famous editors are Dreamviewer, Netbeans and Visual Studio.

I prefer to use the Komodo Edit editor which is a good editor for beginners and it provides auto complete facility which makes editing web pages easy.

If you want to download the editor Click Here.

After writing the code you can save the file with he extension .htm or .html.

HTML Elements

An HTML element is consists of a start tag, end tag and element contents.
Some HTML elements may not have end tag but they might end in start tag only.
Contents are everything in between start and end tags.
Some HTML elements can have empty contents or no contents.
Most of the HTML elements can have attributes.

For Example:-

An element without attribute
<p> This is a simple paragraph.</p>

An element with attribute
<a href="http://www.yahoo.co.in">Go to Yahoo!</a>

An element without closing tag
<br />

Nested HTML Elements

HTML elements can be nested. It means you can write an HTML element inside another HTML elements. This is called as nested HTML elements or nested tags.

For Example:-

<html>
   <head>
   <title>
   HTML Demo Page
   </title>
   </head>

   <body>
   This is a demo page that illustrates what is nested HTML elements.
   </body>
</html>

HTML CSS Starter

Tuesday, November 1, 2011

HTML Tags

Monday, April 25, 2011

HTML Starter

Let us start with HTML