weborafix: May 2011

Tuesday, May 31, 2011

Use of Heading Tags with Example

Why we use large text when we write any document, any assignment, any article, or design any advertisement banner etc? Just because to gain the focus of user (viewer attention) on that particular section. To make those section more comprehensive for the user attention.

Same here in Web page, we use Heading Tags (h1, h2, h3, h4, h5, h6) to make formatting of contents in properly manner, and to gain proper attention of the website users.

One point to remember for further coming post for you all is:
Every content will be defined in <body>...</body> section of an HTML document (HTML Page, Web Page).

Example:

<html>
<head><title>First Web Page</title></head>
<body>
<h1>Heading Text using h1 tag</h1>
<h2>Heading Text using h2 tag</h2>
<h3>Heading Text using h3 tag</h3>
<h4>Heading Text using h4 tag</h4>
<h5>Heading Text using h5 tag</h5>
<h6>Heading Text using h6 tag</h6>
</body>
</html>

Output:

Monday, May 30, 2011

Markup tags and their use

Markup Tags are normally known as HTML Tags. These are actually keywords surrounded by angle brackets like <html>.

Tag is used as pair like <html> and </html>, where <html> represents start and </html> represents end. Start tag is known as Opening tag and End tag is known as Closing Tag.

Markup tags are not case sensitive. There is a term used in HTML document, doctype. If no any doctype is defined when creating an HTML document, Markup tags defined in Upper or Lower. But It is recommended for all of you to practice it in small case like <span>, not like <SPAN>.

We'll focus on contents of HTML document related basic Markup tags commonly used:
All these tags will be used within <body>...</body> tag, so that it can be displayed on browser.

For Text Headings:
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

For Text Paragraphs:
<p>...</p>

For Page Division or Making Sections:
<span>...</span>
<div>...</div>

For representing contents in the form of rows & columns on HTML page:
<table>...</table>

For linking one Web page with another (Hyperlink):
<a>...</a>

For making Forms:
<input />
<form>...</form>

For placing photos:
<img />

For lists:

There are many other tags available but will learn when we need it.
In next coming posts, we'll learn deeply the use of each commonly used tags with examples.

Sunday, May 29, 2011

Structure of an HTML page

Markup Tags are used to construct an HTML page (a Web page). We divide an HTML document into following tags.

<html>...</html>

This tag represents the start and end of an HTML document. It has two sub parts.

1. Head
2. Body

Head can be defined using tag <head>...</head>. Head contains processing information and meta data for HTML document.

Body can be defined using tag <body>...</body> that contains displayable information on browser.

Head contains another important part Title
<title>...</title> this tag is use to display heading of the web page.

Simple structure of an HTML page will be

Saturday, May 28, 2011

What is an HTML document or a Web Page

HTML (Hyper Text Markup Language), where Markup language is a set of Markup tags. You'll learn soon the basics and the use of these Tags, that an HTML uses to describe Web Page.

Web page is a standard WWW (World Wide Web) document or information resource that can be accessed through web browser and can be displayed on a computer display or mobile etc.
In short, an HTML document is known as a Web page.

Friday, May 27, 2011

Create an HTML page

There are many ways to create web pages. But I'll recommend new learners to use simply a notepad editor. It'll help you to learn all HTML basics more effectively...

Learn HTML quickly in 5 easy steps for creating your first web page, that will work on you browser.

Step1: Open notepad editor

Step2:
copy this code and paste into text editor

<html>
<head><title>First Web Page</title></head>
<body>Hello World! This is my first web page.</body>
</html>

Step3: Save file: set save as type to <all file types>, and <file name> to myfirstpage.html or my firstpage.htm

Step4: close notepad text editor

Step5: double click on the myfirstpage.html or myfirstpage.htm, it will be opened into browser.

It works :)

Pages