HTML Stylesheet
May 31, 2009 — WebguruWhat is HTML Stylesheet?
In the latest versions of HTML (HTML 4.0), defining and displaying the content are treated as two different processess. Since many of the formatting tags and attributes are deprecated (not supported) in the recent versions of html, it is decided that html can handle only the defining part of the content. That is whether it is a heading or paragraph or table or something else.
The displaying part is taken care by CSS (Cascading style sheets) which handles formatting and appearance of the web site. The sheet which contains the styles to control the appearance is generally known as stylesheet.
Integration of Styles with HTML
Though the displaying part is not written with HTML, it is necessary to integrate with it for greater usability. There are 3 great ways to achieve it:
In the latest versions of HTML (HTML 4.0), defining and displaying the content are treated as two different processess. Since many of the formatting tags and attributes are deprecated (not supported) in the recent versions of html, it is decided that html can handle only the defining part of the content. That is whether it is a heading or paragraph or table or something else.
The displaying part is taken care by CSS (Cascading style sheets) which handles formatting and appearance of the web site. The sheet which contains the styles to control the appearance is generally known as stylesheet.
Integration of Styles with HTML
Though the displaying part is not written with HTML, it is necessary to integrate with it for greater usability. There are 3 great ways to achieve it:
- External Style Sheet – It is a separate file that contains all the styles and saved with “.css” file extension. It is then linked with html file using the <link> tag in the head section.
Eg: <link href=”sample.css” type=”text/css” rel=”stylesheet>.
Here an exernal css file name “sample” is linked using the attribute “href”. The main advantage of external style sheet is it can be linked to as many as html files. And the change we implement in single sheet will affect all the linked html files. So maintenance is simplified by using external style sheet. - Internal Style Sheet – Instead of maintaing a separate style sheet, the css can be written within the html document in the head section.
Eg: <style type=”text/css”>CSS coding goes here….</style>
The internal style sheet can only be accessed by the particular html document. It cannot be referenced to any other document. - Inline Style – Inline styles are nothing but adding css properties to an html tag using an html attribute “style”
Eg: <h1 style=”color:#ff0000”>Heading1</h1>
In this sample, “color:#ff0000” is a css property which sets the color of h1 to red. To add more than one property semicolon; can be used between two properties.
Eg: <h1 style=”color:#ff0000;margin:5px”>Heading1</h1>
Here margin is an another css property which sets margin for h1 tag and the margin value is 5px (pixel).
HTML Images
April 4, 2009 — WebguruWhat is HTML Image?
So far, we have seen how to add, format and align texts in a web page. But web page is not complete with mere texts. It gets important to add relevant images not only to make our page attractive, also to make our visitors understand things easily. Because we know that images keeps things simple rather than texts. Ok, can we create images using HTML? No, since HTML is not a graphic tool. But we can show an existing image in our page using
<img src=”source/destination of the image file” />
Where to use HTML Image?
Attributes besides Id, Class used along with the <img> tag are:
<html>
<head>
<title>Example for HTML image</title>
</head>
<body background=”body-stripes.jpg”>
<p><img alt=”example image” src=”example.gif”> This is an example for image before text</p>
<p>This is an example for <img width=”80” height=”80” alt=”example image” src=”example.gif”< image within the text</p>
<p>This is an example for image after the text <img width=”40” height=”40” alt=”example image” src=”example.gif”></p>
<p>This is an example for where the text <img align=”bottom” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the bottom of image. Bottom alignment is default alignment.</p>
<p> This is an example for where the text <img align=”middle” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the middle of image.</p>
<p>This is an example for where the text <img align=”top” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the top of image. </p>
</body>
</html>
Next we can discuss about how to make the image clickable. We can also see about image mapping.
So far, we have seen how to add, format and align texts in a web page. But web page is not complete with mere texts. It gets important to add relevant images not only to make our page attractive, also to make our visitors understand things easily. Because we know that images keeps things simple rather than texts. Ok, can we create images using HTML? No, since HTML is not a graphic tool. But we can show an existing image in our page using
<img src=”source/destination of the image file” />
Where to use HTML Image?
- Images can be used anywhere within the body. Images can be seen in the browser where the <img> tag is actually placed. For eg: if you place an <img> tag before a paragraph, the image would be displayed before the paragraph. If you want the paragraph to be displayed first, then you have to change the <img> tag next to the paragraph tag.
- Images can also be used as background. But there is no HTML tag to display it as background. Instead you can do it with the help of an attribute “background” to any of the block level element.
E.g.: <body background=”stripes .gif”> - Though there are no restrictions for the usage of images, it should be used cautiously because loading of images takes more time. A Web page which uses more number of images may take more time to load which would make visitors to leave the site before they load.
Attributes besides Id, Class used along with the <img> tag are:
- src: The source attribute is very important one to set the location of the image file. The browser would not display any image if you leave this blank or don’t include this attribute. You can give either local path(../smiley.gif) or global path (http://www.styledesign.com/images/smiley.gif”).
- alt: The alt attribute is “alternate text” for an image. It can be any text which describes the image well. The browsers display the alt texts before the images get loaded and this makes the users to understand the nature of the content even if they are not loaded. It is not an error if you don’t include alt attribute or leave it blank. But it’s a good practice to improve the quality of our web page.
- align: The align attribute is used to position the image as required. Values used for this attribute are: left, middle, right – used to left, center and right alignment of the image respectively
top, bottom – similarly used for vertical alignment of the image. Alignment of image with relative to the text besides can also be done using texttop, absmiddle, absbottom, baseline which keeps the text top of the image, middle of the image, bottom of the image respectively. - Width and Height: These attributes are used to specify the width and height of the image to be displayed.
<html>
<head>
<title>Example for HTML image</title>
</head>
<body background=”body-stripes.jpg”>
<p><img alt=”example image” src=”example.gif”> This is an example for image before text</p>
<p>This is an example for <img width=”80” height=”80” alt=”example image” src=”example.gif”< image within the text</p>
<p>This is an example for image after the text <img width=”40” height=”40” alt=”example image” src=”example.gif”></p>
<p>This is an example for where the text <img align=”bottom” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the bottom of image. Bottom alignment is default alignment.</p>
<p> This is an example for where the text <img align=”middle” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the middle of image.</p>
<p>This is an example for where the text <img align=”top” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the top of image. </p>
</body>
</html>
Next we can discuss about how to make the image clickable. We can also see about image mapping.
Html Links
March 15, 2009 — WebguruWhat is HTML Link?
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.
Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.
Four target attributes that exist in the present world are: _blank, _self, _parent, _top. Their uses can be seen here with simple examples.
Next is Html Images.
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.
Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.
- Internal: Link that navigate to the different content of the same page. (For eg: A link which says ‘top’ would take to the top of the same page).
- Local: Link that navigates to the other pages of the same website. (Eg. Link for ‘Contact us’ page from ‘About us’ page)
- Global: Link that take us to other domain / website.
- mailto: This is used to link email address. Clicking on the link would enable us to send email.
- Attribute ‘href’ is very important where the destination url is given.
- The ‘target’ attribute defines the browser whether to open the linked page in a separate window or in the current window itself.
- In email (or) mailto link, we can also define Subject and body of the mail besides giving email address.
Internal Linking:
<body>
<h1><a name=”top”>Top of the Page</a></h1>
<a href=”#bottom”>Go to Bottom</a>
<p>This is the first paragraph</p>
<br/><br/>
<h1><a name=”bottom”>Bottom of the Page</a></h1>
<p>This is the second paragraph</p>
<a href=”#top”>Go to Top</a>
</body>
In this example, you will first see ‘Top of the page. When you click the link ‘Go to Bottom’, you will be taken down. Again when you click ‘Go to Top’, you will be navigated to the top of the page. This is a simple example for navigating within a page. Here ‘name’ attribute is used for naming the block. The same name is used with ‘#name’ to link that block.<body>
<h1><a name=”top”>Top of the Page</a></h1>
<a href=”#bottom”>Go to Bottom</a>
<p>This is the first paragraph</p>
<br/><br/>
<h1><a name=”bottom”>Bottom of the Page</a></h1>
<p>This is the second paragraph</p>
<a href=”#top”>Go to Top</a>
</body>
Local Linking:
<body>
Next tutorial will be on <a href=”http://webdeveloperguide.wordpress.com/about/”>About us</a>
</body>
In this sample, link is used to navigate to the About us page of our blog.<body>
Next tutorial will be on <a href=”http://webdeveloperguide.wordpress.com/about/”>About us</a>
</body>
Gloabl Linking:
<body>
<a href=”http://www.google.co.in/>Google</a>
</body>
Link here takes you to the google homepage from the existing page.<body>
<a href=”http://www.google.co.in/>Google</a>
</body>
Mailto Link:
<a href=”mailto:yourmailid@mail.com”>My email id</a> – This link has only your email id
<a href=”mailto:yourfriend@gmail.com?cc=yourfriend1@gmail.com&bcc=yourfriend2@gmail.com&subject=Welcome%20email&body=You%20are%20welcome%20to%20styledesign.com”>Send mail!</a> – Click this link to get the clear picture than explanation. %20 is used instead of spaces between words to ensure that the browsers display the text properly.
Example for Target Attributes:<a href=”mailto:yourmailid@mail.com”>My email id</a> – This link has only your email id
<a href=”mailto:yourfriend@gmail.com?cc=yourfriend1@gmail.com&bcc=yourfriend2@gmail.com&subject=Welcome%20email&body=You%20are%20welcome%20to%20styledesign.com”>Send mail!</a> – Click this link to get the clear picture than explanation. %20 is used instead of spaces between words to ensure that the browsers display the text properly.
Four target attributes that exist in the present world are: _blank, _self, _parent, _top. Their uses can be seen here with simple examples.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_blank”>Webdevloperguide</a> – opens our homepage in a new browwer window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_self”>Webdeveloperguide</a> – opens our homepage in the current browser window. The current page cannot be viewed if you click the link. Anyhow you can come back by clicking ‘Go back’ button in your browser window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_parent”>Webdeveloperguide</a> – opens new page into a frame that is superior to this page. It can be tested only if we use html frames which can be seen in our upcoming tutorial.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_top”>Webdeveloperguide</a> – Opens new page into the current broswer window, cancelling the exisiting open frames. It also deals with html frames. But don’t confuse with href=”#top” with target=”_top”, where the former one deals with the destination.
HTML Attributes
March 15, 2009 — WebguruWhat is HTML Attributes?
Attributes are like enhancers which spices up or customizes an html element. Attributes must be included in the starting tag of an element.
Where to use HTML Attributes?
If suppose you would like to add some background color to your webpage. This can be easily done by adding an attribute bgcolor to element as: . This is how we can enhance the look and feel of our website using html attributes.
List of HTML Attributes
How to use HTML Attributes?
Attributes are like enhancers which spices up or customizes an html element. Attributes must be included in the starting tag of an element.
Where to use HTML Attributes?
If suppose you would like to add some background color to your webpage. This can be easily done by adding an attribute bgcolor to element as: . This is how we can enhance the look and feel of our website using html attributes.
List of HTML Attributes
| Attribute Name | Options / Value | Function of the Attribute |
| align | left, center, right | Used for Horizontal alignment of the content within the given tag |
| valign | top, middle, bottom | Used for Vertical alignment |
| bgcolor | color name(black, blue), RGB Values (rgb(250,250,250), Hexadecimal value (#000000) | Adds a background color for the element |
| background | url(“imgsrc.gif”) | Adds a background image |
| width | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the horizontal length for the given element within the browser window |
| height | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the vertical length for the element within the browser window |
| title | user defined text | It is a user defined text mainly used for SEO purpose. The text given will be shown as popup in the browser window on mouse hover of the element. |
| id | User defined name | The name given will be unique for the element and cannot be reused for the other elements. Mainly used for writing styles for the id name |
| class | User defined name | This is similar to id, but the only difference is class name is not unique. A class name can be used for any number of times. |
- Attributes must be given in the starting tag of html with Attribute name=”options/value”.
- Each attribute differs in its function, so the value should be assigned correctly.
- Attribute values should always be enclosed in quotes. Double quotes are used more commonly though single quotes are also accepted.
- Some attributes would not work for certain html tags. Those things with the reason can be seen in detail while learning each element.
- More than one attribute can also be assigned.
<html>
<head>
<title>Example for HTML Attributes</title>
</head>
<body bgcolor=”yellow” color=”black” width=”950px”>
<h1 align=”center”>HTML Attributes</h1>
<img alt=”smiley” width=”32” height=”32” src=http://www.iconarchive.com/icons/icontexto/emoticons/icontexto-emoticons-03-32×32.png/>
</body>
</html>
Next we are about to look html links through which the web pages are linked to each other.<head>
<title>Example for HTML Attributes</title>
</head>
<body bgcolor=”yellow” color=”black” width=”950px”>
<h1 align=”center”>HTML Attributes</h1>
<img alt=”smiley” width=”32” height=”32” src=http://www.iconarchive.com/icons/icontexto/emoticons/icontexto-emoticons-03-32×32.png/>
</body>
</html>
HTML Text Formatting Tags
March 15, 2009 — WebguruWhat is HTML Text Formatting?
Text formats like bold, italics, underline, what are all the text formats possible in simple word document are also possible in html document. There is a big list of formatting tags in html. Anyhow we can learn and remember some basic formatting tags instead of confusing with the big list.
List of Basic Text Formatting Tags
Where to use?
Text formats like bold, italics, underline, what are all the text formats possible in simple word document are also possible in html document. There is a big list of formatting tags in html. Anyhow we can learn and remember some basic formatting tags instead of confusing with the big list.
List of Basic Text Formatting Tags
| Tags | Description |
| <b> , <strong> | Used to make text as bold |
| <i> , <em> | To make italic text |
| <u> | To make text underlined |
| <sub> | To make subscripted text (Eg: O2, here 2 is subscripted) |
| <sup> | To make superscripted text (Eg: (a+b)2, here 2 is superscripted) |
| <code> | Defines computer code text |
| <address> | Defines an address element |
- The above formatting tags can be used to format only few words in a document. To format an entire paragraph or document, it is better to use style sheets rather than the above tags.
- It can be used where it is actually required. What I try to say is, if the text is necessarily want to be bold, then <b> can be used. Likewise, if some address is to be displayed, <address> tag can be used.
- The formatting tags are paired tags, i.e., it has both start and end tag. So the text which is to be formatted to be given inside the tag. (E.g. <i>I want this text as italic</i>)
- More than one formatting tag can be also be used for the same texts. But make sure that the inner tag must end first before the outer tag ends.
I would like to explain this using an example
<b><i>This is a italic and bold text</i></b>
In this, I have used both bold and italic formatting tags for the same text. Here, <i> tag which lies inner to the <b> tag must to be closed first </i> and then the closing tag for </b> follows.
<b><i>This is an italic and bold text</b></i>
It’s a bad format though the browser renders it correctly. - Usage of two tags of same format would not show any big difference. (using both <b> and <strong> to the same text will not show any difference)
- Attributes like align, bgcolor, width and height cannot be declared. But class and id can be used within.
<html>
<head>
<title>Example for text formatting tags</title>
<body>
<b>This is a bold text</b>
<strong>This is a strong text</strong>
<i>This is an italic text</i>
<em>This is an emphasized text</em>
<u>This is a underlined text</u>
<sub>This is a subscripted text</sub>
<sup>This is a superscripted text</sup>
<code>This is a computer code text</code>
<address>This is an address text</address>
</body>
</html>
Next lesson deals with the html attributes. List of html attributes, where and how to use html attributes can be seen in detail.<head>
<title>Example for text formatting tags</title>
<body>
<b>This is a bold text</b>
<strong>This is a strong text</strong>
<i>This is an italic text</i>
<em>This is an emphasized text</em>
<u>This is a underlined text</u>
<sub>This is a subscripted text</sub>
<sup>This is a superscripted text</sup>
<code>This is a computer code text</code>
<address>This is an address text</address>
</body>
</html>
HTML Line Break and horizontal rule
March 14, 2009 — WebguruWhat is HTML Line Break?
A line space after text can be given using <br> (or) <br />. It does not have a close tag like </br> as we have in other tags. So it is called a Single tag. However self closing <br /> can be used in some cases.
Where to use?
The <hr> (or) <hr /> tag is used to draw a horizontal line. This tag also has no end tag. So it can be used as self closed.
Where to use?
A line space after text can be given using <br> (or) <br />. It does not have a close tag like </br> as we have in other tags. So it is called a Single tag. However self closing <br /> can be used in some cases.
Where to use?
- Html Line Break can be used to give a break after some texts. Since the break given using “Enter key” while typing the text will not be accepted by the browser. It would treat it as continuous texts.
- It cannot have any attributes. But we can give “Class” for CSS.
- We cannot increase the height of a line space. In case if we need more space another
tag can be used. - This tag is also known as empty tag since no content can be given within this tag. Generally, empty tags have no closing tag.
<html>
<head>
<title>The page for HTML Line Break</title>
<body>
HTML is easy to learn<br />
It can be used to create web pages<br />
It is also fun to learn html<br />
So Welcome to html tutorial once again
</body>
</html>
What is HTML Horizontal Rule?<head>
<title>The page for HTML Line Break</title>
<body>
HTML is easy to learn<br />
It can be used to create web pages<br />
It is also fun to learn html<br />
So Welcome to html tutorial once again
</body>
</html>
The <hr> (or) <hr /> tag is used to draw a horizontal line. This tag also has no end tag. So it can be used as self closed.
Where to use?
- It can be used to separate the major sections in a document.
- It can also be used for underlining the headings of an article.
- <hr/> is also empty tag (content cannot be given inside).
- Generally the line is drawn to the full width of the page. However it can be controlled by specifying the width using the attribute width=”50%” (or) width=”50px” as per the requirement.
- Default alignment is center. It can also be altered using the align attribute to left or right.
- Moreover the line is not full black in color as default. Some shades appear below and make it look with dark grey color. It can be changed using noshade within the tag.
<html>
<head>
<title>The page for HTML Horizontal Rule</title>
<body>
<h1 align=”center”>HTML tutorial</h1>
<hr noshade width=”300px” align=”center” />
HTML is easy to learn<br />
It can be used to create web pages<br />
It is also fun to learn html<br />
<hr align=”left” />
So Welcome to html tutorial once again
</body>
</html>
In our next tutorial we can see about html formatting tags that are used to format texts in our page.<head>
<title>The page for HTML Horizontal Rule</title>
<body>
<h1 align=”center”>HTML tutorial</h1>
<hr noshade width=”300px” align=”center” />
HTML is easy to learn<br />
It can be used to create web pages<br />
It is also fun to learn html<br />
<hr align=”left” />
So Welcome to html tutorial once again
</body>
</html>
HTML Paragraph
March 14, 2009 — WebguruWhat is HTML paragraph?
An HTML paragraph is similar to a paragraph in an article or newspaper. Some texts which can be considered as a paragraph can be given inside <p>tag and its closing </p>
Where to use HTML Paragraph?
An HTML paragraph is similar to a paragraph in an article or newspaper. Some texts which can be considered as a paragraph can be given inside <p>tag and its closing </p>
Where to use HTML Paragraph?
- HTML paragraphs can be used wherever a line break is needed after the texts end.
- It can be majorly used whenever some continuous texts which can be shown as small paragraphs.
- <p> tag is also a block element which automatically gives a line break before and after. So it can be used when the actual need is there.
- Closing tag </p> is necessary even though some browsers work will without this.
- Attributes like bgcolor, width or height cannot be assigned to html paragraph.
- It accepts only align=”left (or) center (or) right (or) justify”, id, class.
<html>
<head>
<title>HTML Paragraph Tutorial</title>
</head>
<body>
<h1>This is the main heading</h1>
<p align=”left”>This is a left aligned paragraph</p>
<p align=”center”>This is a center aligned paragraph</p>
<p align=”right”>This is a right aligned paragraph</p>
<p align=”justify”>This is a justified paragraph. Justified text is text in which all the printed lines in a paragraph (except the final line) are made the same length by the adjustment of spacing between words.</p>
</body>
</html>
Next tutorial will be on line breaks and horizontal rule.<head>
<title>HTML Paragraph Tutorial</title>
</head>
<body>
<h1>This is the main heading</h1>
<p align=”left”>This is a left aligned paragraph</p>
<p align=”center”>This is a center aligned paragraph</p>
<p align=”right”>This is a right aligned paragraph</p>
<p align=”justify”>This is a justified paragraph. Justified text is text in which all the printed lines in a paragraph (except the final line) are made the same length by the adjustment of spacing between words.</p>
</body>
</html>
HTML Headings
March 14, 2009 — WebguruWhat is HTML Headings?
An html heading is similar to a title or subtitle in a document. Headings can be defined with <h1> to <h6> tags, where <h1> being the largest heading and <h6> being the smallest.
Where to use HTML Headings?
An html heading is similar to a title or subtitle in a document. Headings can be defined with <h1> to <h6> tags, where <h1> being the largest heading and <h6> being the smallest.
Where to use HTML Headings?
- Headings can be used for topic headings, title, subtitle where it could be actually needed.
- It should not be used to make some texts big or bold.
- Headings are important for Search Engines to index the structure and content of the page. So <h1> can be used for main headings, <h2> for sub headings where less important can be given for <h3> to <h6> headings.
- HTML headings are block elements (i.e., it takes up the full width available, with a new line before and after. The other type of element is inline element which takes up only as much as width it needs and does not force new lines. Inline elements would be place inside the block element).
- <h1>Some text</h1> is the correct way of using an heading tag. Similar way can be followed for other heading tags too.
- <h1> Some text, <h1><h2>Some Text</h2></h1> are the incorrect ways.
- Since heading tags are block elements, it has a line before and after as default. So no need of giving a line break.
- Headings cannot be assigned any unique attributes like bgcolor=”red” or color=”black”.
- It can be assigned only general terms like align=”center”, “left”, “right” and class, id, etc. Example:
<html>Next we can see about HTML paragraphs.
<head>
<title>HTML Heading Tutorial</title>
</head>
<body>
<h1 align=”center”>This is the main heading</h1>
<h2 align=”left”>This is the sub heading</h2>
<h3 align=”right”>Right aligned heading</h3>
<h4>This is small heading</h4>
<h5>This is the smaller heading</h5>
<h6>This is the smallest heading</h6>
</body>
</html>
HTML Basic Structure
March 14, 2009 — WebguruThe basic structure of HTML comprises of four important html elements. They are:
Now let us see how to use these tags and their purposes.
HTML Document Structure:
Explanation of HTML Document Elements:
Now let us start learning other html elements one by one which are used inside the body element to design great web pages. First we can see about HTML Headings.
- <html>…</html>
- <head>…</head>
- <title>…</title>
- <body>…</body>
Now let us see how to use these tags and their purposes.
HTML Document Structure:
<html>
<head>
<title>This is a sample page</title>
</head>
<body>
This is the message seen in the browser window
</body>
</html>
The elements can also be typed in Capital letter (since HTML is not case sensitive). But don’t mix both capital and small letter to maintain some consistency.<head>
<title>This is a sample page</title>
</head>
<body>
This is the message seen in the browser window
</body>
</html>
Explanation of HTML Document Elements:
- <html>…</html> – This is the main element that contains the entire html document. The elements make the browser to understand the start and end of the document. The html tags outside this element will not be considered by the browser.
- <head>…</head> – This is the header element that contains information about the page like title, description, etc. Generally the information is not displayed in the browser since they are used for SEO purpose (explained in SEO tutorial). The header element is also used to link javascript and CSS style sheet with the document which is discussed in our advanced tutorial.
- <title>…</title> – The title given inside is displayed at the top of the browser window. In our example, “This is a sample page” is the given title which can be seen at the top of the browser. This is purely used for SEO purposes. Skipping this element or leaving blank doesn’t cause any harm to our document.
- <body>…</body> – This is the place where all the information to be seen inside the browser window are given. The layouts, links, images, forms are all coded inside this body element to display it to the world. In our example, “This is the message seen in the browser window” text is displayed in the browser.
Now let us start learning other html elements one by one which are used inside the body element to design great web pages. First we can see about HTML Headings.
HTML Getting Started
March 8, 2009 — WebguruWhat do in need to crate HTML?
No special software or equipment is needed. What you all need is:
The answer is no. You need internet only to read this blog. But you don’t need a connection to create web pages. You can do it on your local machine. You need to be connected to the internet only when you need your web pages to go online. This part of making web site online can be seen later.
Why HTML is Simple?
HTML is very simple besides interesting. What makes HTML different from other conventional programming software?
Words to Know:
Before we step in to learning basic html structure, let us know 3 words that could be used more frequently in the upcoming tutorials. They are:
No special software or equipment is needed. What you all need is:
- Text Editor, Notepad (for windows), Pico (for Linux), or Simpletext (for Mac).
- Web browser. For e.g.: Internet explorer, Firefox, Mozilla, Opera, Safari, Netscape, etc…
The answer is no. You need internet only to read this blog. But you don’t need a connection to create web pages. You can do it on your local machine. You need to be connected to the internet only when you need your web pages to go online. This part of making web site online can be seen later.
Why HTML is Simple?
HTML is very simple besides interesting. What makes HTML different from other conventional programming software?
- First of all HTML is not a programming language, it is a markup language
- HTML is static and has little programming capabilities.
- It does not show any debugging errors or warnings even if there is any syntax error.
- HTML tags are easy to remember. For e.g.: the tag used for paragraph is <p> to draw an horizontal line is <hr> and to give a line break between text is <br>
- Moreover it is not case sensitive.
Words to Know:
Before we step in to learning basic html structure, let us know 3 words that could be used more frequently in the upcoming tutorials. They are:
- Tag – is a pre-defined general English term that is used to specify markup regions for the browsers. (For E.g. in our previous example)
- Element – When the tag is complete with both opening and closing tag. (For e.g. when our opening tag have its closing tag , then this set of tags is known as Element.)
- Attribute – Attribute is also pre-defined which have meaning only when combined with the html element. It is used to customize or modify the html elements. It doesn’t have any meaning when stand alone. (For e.g. Let us take body elements: <body> and its closing tag </p> Now let us think of adding some background color to our paragraph. This can be done using attribute: bgcolor=”some color name”. But it should be combined with our paragraph element like this: <body>.
- Tags are single without closing tag.
- Elements are paired which have both opening and closing tags.
- Attributes are given inside the element to customize or modify it.
No comments:
Post a Comment
Thank you for your Comment....