- Create A Free Account
- Download High-Res Stock Images For Free
- +5 Million Images
Home
HTML and CSS
Tutorials
Basic of HTML
Level: Beginner Software:
HTML document has its own basic elements, that is expressed with <Html>, <head>, and <body> tags, including its end format form of each tags. So, the basic tags or elements that are needed are:| <Html> <Head> </Head> <Body> </Body> </Html> |
While its arrangements are:
1 Marking its element with couple of its Html tag. It will be seen as follows:
| <Html> </Html> |
2 Dividing document become two big shares, they are body and head.
Section of head contain information of your web page, including Title and Meta tags.
A. Head section, marked with <Head> and its end format form: </Head>. It will be seen as follow:
| <Head> </Head> |
Between <Head> tag and its end format form: </Head> tag, there are few elements that become a part of this section:
<Title> tag
This tag is placed precisely below the Head tag. This tag is utilized to present title or bookmark
of your web page. Following is the example:
<Title>Free html tutorial, rich of keywords</Title>
String residing in between TITLE tag will be presented as title at browser window. The usefulness of
Title tag are to give title and also information of your web site.
Title is very assistive in enriching keywords, since this tag is represent of the earliest tag. So
it is very important to place your relevant keywords or phrases keyword here.
The title of web page will be seen at left corner of your web page.
< Meta> tag
META Tag is placed below the Head tag.
META Tag is utilized to make our web site recognizable by search engines, especially Meta keyword tag
and meta description tag. Both meta tags are commonly used by search engines to present their search
results. So, place your relevant keywords or phrases keyword here.
In the following is example of use of META tag:
| < META NAME="AUTHOR" CONTENT="Endar"> <META NAME="GENERATOR" CONTENT="MICROSOFT Frontpage 5.0"> < META NAME="KEYWORD" CONTENT="Free, free tutorial, free html tutorial, rich keyword"> < META NAME="DESCRIPTION" CONTENT="Free Html tutorial to build your own web site, rich of keywords"> |
| Name | Value |
| Author | The name of Author |
| Generator | The generator that is utilized to build your web site |
| Keyword | This is the place where you should enter your relevant
keywords or phrases keyword. It is important to remember: do not repeat the same keywords or phrases keyword more than 3 times and do not repeat it alternately, because search engines may assume it as spam. |
| Description | Many search engines using meta Description tag to give brief description from any web page and will emerge as a part of search results. |
So, the complete elements of head section are:
| <Html> <Head> <Title>Free html tutorial, rich of keywords</Title> < META NAME="AUTHOR" CONTENT="Endar"> <META NAME="GENERATOR" CONTENT="MICROSOFT Frontpage 5.0"> < META NAME="KEYWORD" CONTENT="Free, free tutorial, free html tutorial, rich keyword"> < META NAME="DESCRIPTION" CONTENT="Free Html tutorial to build your own web site, rich of keywords"> </Head> |
B. Body section. This section contain of documents to be presented in web browser, including links, paragraph, images, etc. Body section is marked with <Body> tag and its end format form, </Body>. This Body tag is placed bellow Head tag, but it is still between Html tag. Following is the codes:
| <Body> </Body> |
In this section, you can set background color of web page or even insert an image to become background for your web page . Also, you can set text, link, active link, visited link, etc. Following is the Example:
| <Body text="gold" link="violet" Vlink="pink" alink="gray" bgcolor="black" background="free html tutorial/bg.gif"></Body> |
Where:
| Text |
Set gold color for the text |
| Link |
Set violet color for link |
| Alink |
Set gray color for active link |
| Vlink |
Set pink color for visited link |
| Bgcolor |
Set black color for background |
| Background |
Set an image as web page background image, where free html tutorial is the location of background image, while bg.gif is the name of the image file. |
In body section, you can optimize your web page with relevant keywords or phrases keyword, since
this body section is the place where you can set links, image an even arranging paragraph in this
section.
What should become our attentions are:
Some search engines which cannot read Meta Description tag, takes trivial lines to the web page as
description of your web site.
In Image tag, we can enrich our web site by keywords or phrases keyword by elaborating it precisely at src, related file name, also alt tag to present text when pointer on image.
It will be help if we elaborate keywords or phrases keyword at Heading tag as many search engines using heading tags as keywords.
In Hyperlink/Link which you make, enrich your web pages with keywords or phrases keyword, including file name and link title.
Please do not forget to put link return to web page which has been optimized with keywords or phrases
keyword. This is very important because search engines generally do not like web page that contain
link go to another page but do not contain link return to web page which have been optimized with
keywords.
Hence, the complete basic elements to make our web page are:
| <Html> <Head> <Title>Free html tutorial, rich of keywords</Title> < META NAME="AUTHOR" CONTENT="Endar"> <META NAME="GENERATOR" CONTENT="MICROSOFT Frontpage 5.0"> < META NAME="KEYWORD" CONTENT="Free, free tutorial, free html tutorial, rich keyword"> < META NAME="DESCRIPTION" CONTENT="Free Html tutorial to build your own web site, rich of keywords"> </Head> <Body text="gold" link="violet" Vlink="pink" alink="gray" bgcolor="black" background="free html tutorial/bg.gif"> </Body> </Html> |
Addition
Comment Tag
Sometimes web masters need comment tag in their web site. This comment tag is placed between <Body> and </Body> tags.
Comment tag is utilized to give comments or to hide any document from browser window. The browser then
will disregard any content staying between comment tag. Many factors why web masters do this, but as
an example is web master needs approval before the document be published.
Comment tag shall be as follow:
<!-- this document is waiting for approval from some publisher -->
You can see that the comment is placed between "<!--" and "-->" sign.
Another advantage of comment tag is it is good to give amenity at the time you make a change in your
web page structure.
Thus, the HTML tags are:
| <Html> <Head> <Title>Free html tutorial, rich of keywords</Title> < META NAME="AUTHOR" CONTENT="Endar"> <META NAME="GENERATOR" CONTENT="MICROSOFT Frontpage 5.0"> < META NAME="KEYWORD" CONTENT="Free, free tutorial, free html tutorial, rich keyword"> < META NAME="DESCRIPTION" CONTENT="Free Html tutorial to build your own web site, rich of keywords"> </Head> <Body text="gold" link="violet" Vlink="pink" alink="gray" bgcolor="black" background="free html tutorial/bg.gif"> <!-- this document is waiting for approval from some publisher --> </Body> </Html> |
Hence, if we open the HTML tags above on web browser, then you will see an empty black page or an
empty web page where bg.gif is the background image, if the image file is available in free html tutorial
folder. Try to write sentences between body tag.
This is the example:
| <Html> <Head> <Title>Free html tutorial, rich of keywords</Title> < META NAME="AUTHOR" CONTENT="Endar"> <META NAME="GENERATOR" CONTENT="MICROSOFT Frontpage 5.0"> < META NAME="KEYWORD" CONTENT="Free, free tutorial, free html tutorial, rich keyword"> < META NAME="DESCRIPTION" CONTENT="Free Html tutorial to build your own web site, rich of keywords"> </Head> <Body text="gold" link="violet" Vlink="pink" alink="gray" bgcolor="black" background="free html tutorial/bg.gif"> <!-- this document is waiting for approval from some publisher--> Enter your text here. Try to make any sentences, and look at the browser window. </Body> </Html> |
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com