htmp tutorial - a very basic html tutorial, all things you need to know about html

	free hosting image hosting hosting reseller online album e-shop famous people

part 1

The basic part of Web technology is HTML. But what is HTML? Well, my friends, HTML stands for Hyper Text Markup Language, and is, like the name says, a markup language. Using HTML we are able easely and nice to create Web pages. I won't talk much theory, let's get practical.

To describe elements, HTML languages uses tags. You do not need to memorize HTML tags, but it will be useful for you to asimilate some basic knowledge. Every HTML element must be placed between those tags. To understand you easyer for example to describe a web page we put all content of a website between <HTML> and </HTML> tags. Also a HTML page will have a title placed between <TITLE> and </TITLE> tags. The content (body) of a web page will be placed between <BODY> and </BODY> tags.

Note: First pages were created using HTML tags displayed in CAPS, but HTML is not case sensitive, so is ok, and some people now uses html tags with small CAPS.

Your First HTML page

With knowledge you have gained earlyer let's create our first Web page:

Example 1:

This is the simplest Web page that we can create. All text we like to appear on the web page we put between <BODY> and </BODY> tags like in the following example:

Example 2:

<HTML>
<TITLE>This is our fist Page</TITLE>
<BODY>
<H1><CENTER>Welcome to my personal Website</CENTER</H1>
<p>
Welcome to my personal Website. My name is <b>Overmind</b>. I'd like you to learn some HTML basics, useful to start learnign and creating websites. Don't worry, HTML is easy to asimilate.
</p>
</BODY>
</HTML>

In this second example you will notice more tags: <H1> </H1> are tags for predefined text size. H1 is a predefined size of text, those predefined sizes are from H1 to H6, H1 being the bigger text, H1 - the smaller.

Another tag is <CENTER></CENTER>. All texts or other elements (for example images) between this tags are displayed on the center of the page.

<b> and </b> tags are to display enclosed text in BOLD.

Example 3:

<HTML>
<TITLE>Display images</TITLE>
<BODY>
<H1><CENTER>Welcome to my personal Website</CENTER</H1>
<p>
Welcome to my personal Website. My name is <b>Overmind</b>. I'd like you to learn some HTML basics, useful to start learnign and creating websites. Don't worry, HTML is easy to asimilate. Here is a photo of me:<img src="photo.jpg"></img>
</p>
</BODY>
</HTML>

In the 3rd example we added a photo to our website. <IMG> tag is used for that. Well, create nice looking website we must use tables. So the next step is about creating tables.

As you might think the tag for creating a table is <TABLE>. To define a row <TR> tag is used, with closing tag </TR>. To define a colon <TD> tag is used, with closing tag </TD>

Example 4:

<HTML>
<TITLE>Display images</TITLE>
<BODY>
<H1><CENTER>Welcome to my personal Website</CENTER</H1>
<TABLE>
<TR>
<TD>Welcome to my personal Website. My name is <b>Overmind</b>.<br> I'd like you to learn some HTML basics, useful to start learnign<br> and creating websites. Don't worry, HTML is easy to asimilate.</TD>
<TD> Here is a photo of me:<br><img src="photo.jpg"></img></TD>
</TR>
</TABLE>
</BODY>
</HTML>

You defined a table with one row and two columns.

The table is very useful in the process of designing a Web page or website. Table help us to arange text and pictures in our website. In our example we used the tag <TABLE> without any option, but there are properties that can be added to a table:

Property	Description
align=left center right	left align table center table right align table
border=n	border thickness
bgcolor=#rrggbb	background color
background=filename	image inserted behind the table
bordercolor=#rrggbb	border color
bordercolordark=#rrggbb	border shadow
cellspacing=n	space between cells
cellpadding=n	distance between cell and content
nowrap	protects agains linebreaks, even though the content might be wider than the browser window.
frame= void above below hsides vsides box lhs rhs	removes all outer borders shows border on top of table shows border on bottom of table shows border on both horizontal sides shows border on both vertical sides shows border on all sides of table shows border on left side of table shows border on right side of table
valign= top bottom	aligns content to top of cells aligns content to bottom of cells
width=n,n n,n%	minimum width of table in pixels minimum width in percentage of window size

Few words about HTML text

Fonts available for Web pages are limited to default fonts available on any computer. This is because your designed web page must look the same on visitors of your webpage computers. To change the default look of the text <FONT> tag is used like in the following example.

Example 5

<HTML>
<TITLE>Font sizes</TITLE>
<BODY>
<H1><CENTER>Font sizes</CENTER</H1>
<font size="2" face="Geneva, Arial, Helvetica, sans-serif">this is a text</font>
<font size="3" face="Verdana, Arial, Helvetica, sans-serif">this is a text </font>
<font size="4" face="Georgia, Times New Roman, Times, serif">this is a text </font>
<font size="5" face="Courier New, Courier, mono">this is a text </font>
<font size="6" face="Times New Roman, Times, serif">this is a text </font>
<font size="7" face="Arial, Helvetica, sans-serif">this is a text </font>
</BODY>
</HTML>

Try Example 5 and see how is displayed text, using different sizes and fonts.

Well my friends, this was first HTML Introductory tutorial. This is the very basic understanding of HTML. There are more elements to HTML, like links text and images links, anchors, forms and many more. This elements will be discussed and explained in a following tutorial.

Note 1! When designing web pages is important to close all tags. Also be careful to not making nesting errors, if you must use the inverse order when closing tags if you opened multiple tags without closing it. Please always keep in mind that a misplaced tag (or missing closing tag) can broke your design. This is hapening especialy with Internet Explorer.

Note 2! Test your website to work in all known browsers, so all visitors will be able to see your website. Is a good practice to try to keep your website compatible with all browsers. Most known browsers are Internet Explorer and Firefox. But there are also used Opera, Safari, and others.