start html tutorial beginner guide basic HTML

HTML is short for HyperText Markup Language, HTML is a markup language, it is not a scripting language, it can not do arithmetic, nor can it modify strings or loop about something, all it does is instruct the browser (Mozilla, Internet Explorer, Konqueror, or any other web browser) how the page is to be displayed, never the less, it is (along with extended html) the main thing the browser accepts as input, even when you make a dynamic program to show your visitors dynamic content, your output will probably be in HTML.

So how do we use HTML, how do we make our pages, etc...

Even if you intend to use a program like front page to write and edit your website, you will need a basic understanding of HTML eventually, So lets start, In the previous section we wrote an html page and a style sheet.

the html page looked something like this as output

and the html code was this

<html>

<head>
<meta name="keywords" content="info to 2 device network info2device">
<meta name="description" content="The info2device network, Something for everyone">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

This is my first web page, all the colors come from a style sheet :) i even modified how my scroll bar looks !

</body>
</html>

As you can see, all instructions are between "<" and ">", Those instructions are called TAGS, A tag typically looks like this <HTML> while an ending tag (to stop the effect of the matching tag that started the effect would look like this </HTML>.

An HTML page should be entirely contained between a starting tag <html> and an ending </html>

Inside those tags, you will find two sections, the head and the body, The head section comes first then a body section

The Head section

This section starts with <head> tag and ends with a </head> tag, in this section (the head section) other sections come, The <title>tag allows you to give the page a title (important in search engines and specifies how a page is stored in your bookmarks as well as being the text on top of the browser window (title of the window), The title section starts with <title> and ends with </title> where the title goes in between the tags.

The general structure of an HTML document should look like the following

Some tags (like meta tags or img tags) take parameters, we will leave those now, lets start with the tags that do not take any parameters, then we will extend to those with mandatory parameters, then we will talk a little about those with optional parameters.

In the following table you will see a list of tags that take no parameters, how they are used and where

	Tags	Location	Explanation	Example
(1)	<html> </html>	Base	Those tags should be the first and the last lines of your html file, the flag the beginning of html code and the end of the code	-
(2)	<head> </head>	IN (1)	The first flags the start of the head section, while the second flags its end, the head section is were information about the page is placed, anything in this part should not be reflected on the output page of your code, in this section a title is defined as well as the optional meta tags that provide the description and keywords of the page.	-
(3)	<body> </body>	IN (1)	The first flags the start of the BODY of the document, while the last flags the end of that section, this section is where (Visible Output is generated)	-
(4)	<title> </title>	IN (2)	The first starts the title section, You may then add the page title, then mark the end of the title text with the second	<title>My Website's Home Page </title>
(5)	<p></p>	IN (3)	The first tag specifies a beginning of a paragraph, the second marks its end.	<p>This is a paragraph</p>
(6)	<br>	IN (3)	Insert a new line ( carriage return ) here	This will be line 1 <br> and this line2 as well, this line is on line 2
(7)

If this page is written in HTML, how come the <tag name> in the table above appear as text and not interpreted by the browser as instruction, smart question, if you really want to know the answer, you will have to read the advanced html - escape sequence section of the guide, for a hint < is called a less than and is escaped as < in html, and > is called a greater than and is escaped as > in html, how did i manage to write the escape sequence on this line, well for that you will have to read that section :)

HTML Tutorial

HTML :Hyper Text Markup Language the language of the internet. It uses tags to define how every element will look like and its position on the page. Most tags have a begging tag and an ending tag, some tags only have a begging tag these are called empty tags. All tags have attributes that allow you to manipulate the tags more.

<html></html>

The beginning of each HTML file is <html> it tells the browsers that this is an HTML file, and the file ends with </html> telling the browser that it reached the end of file.

<head></head>

What is written between these tags will not be visible; it's only for the browser to read, except the title tag.

Head tag contains header information.

<title></title>

This tag must be between the head tags. What is written between these tags is the page title that appears at the top left side of the browser.

<meta>

Meat tag is inside the head tag so page viewers don't see it, but it is a very important tag for the search engines to find your site according to your pages description and keywords.

This tag is the description of the page.

And this, <meta name="keywords" content="HTML,CSS, blog, blogging, blogger, tutorial"> , is the keywords that this site will be found by when used in searching.

As you can see we can use more than one meta tag in the head.

<link>

This tag that is written in the head tag is used to link to an external document (ex: CSS file).

Some attributes are used with this tag, I will explain the important ones

< link rel = "StyleSheet" href = "http://www.buildguide.net/style.css" type = "text/css" > rel means what is the relationship between this page and the external document, here we can see that the other document is Style Sheet. href means hypertext reference or the address of the external document. Type means what is the MIME type of the external document.

<body></body>

The body tag contains everything you see in a page, text, images, colors,�etc. there are some attributes in the body tag that lets you specify a background image, background color, text color, link color, visited link color and active link color. (attributes: background, bgcolor, link, text, vlink, alink).

<font></font>

These tags are used inside the body tags, they are sued to specify the color, size and face (face =font name=font type) of the text between these tags.

<span></span>

If you have some text in one line or one paragraph and you need different parts of the text to look different from each other, then you use span tags

<b> <span style="color:#aa0000;">First Span</span> <span style="font-weight: 700; background-color:#FFFF00">Second Span </span></b>

First Span Second Span

<b></b>

Simply makes the text bold.

<i></i>

Simply makes the text italic

<p></p>

P is short for paragraph, the text inside these tags can aligned center, left, right or justify

<br>

Break Line. means new line after this tag.

<table></table>

Define the begging and the end of a table. With the table attributes you can specify alignment, bgcolor, border width, table width, cell spacing and padding and some other attributes.

I will give you an example after I finish explaining the following two tags which are important to complete your table cause till now you only have a rectangle.

<tr></tr>

Table Row. You repeat this tag inside the table tag as much rows as you want. With the table row attributes you can specify alignment, bgcolor, vertical text alignment and some other attributes.

<td></td>

Table Data. Here goes what you want to write in each cell of the table. Each <td></td> represent one cell. With the table data attributes you can specify alignment, bgcolor, vertical text alignment, cells width, cells height, row span, column span and some other attributes

And now for a simple example on tables

<tr>

<td align=right bgcolor=#00ff00>first cell alignment right and green bg color</td>

<td align=left bgcolor=#ff00ff>second cell alignment left and magenta bg color</td>

</tr>

<tr>

<td align=left bgcolor=#0000ff>third cell alignment left and blue bg color</td>

<td align=right bgcolor=#ff0000 width= 70%>fourth cell alignment right and red bg color</td>

</tr>

</table>

first cell alignment right and green bg color	second cell alignment left and magenta bg color
third cell alignment left and blue bg color	fourth cell alignment right and red bg color

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5 >

<h6></h6>

h1 through h6 tags, defines header. h1 is the largest and h6 is the smallest size. Using the align attribute you can specify the alignment of the header (left, right, center, justify).

<a></a>

Anchor tag is used to link to another page or file by using the href (hypertext reference) attribute. The text between the begging and ending tags is the link. There are also other attributes like target, type, shape, name and some other attributes.

<a href= www.buildguide.net > GO TO BUILD GUIDE </a>

<ol> <li></li> </ol>

Ordered List. Enables you to make an ordered list numbered using Latin or Roman number or Latin alphabetic.

In the li tag (list item) you write the items you want. Using the ol attributes you can specify what kind of numbering you want and at which number to start.

You can see an example after you read the Unordered List.

<ul> <li></li> </ul>

Unordered List. Enables you to make a list using bullets, you can choose on of three kinds disc, square and circle.

one
two
three

one of two
two of two

three

<li>three</li>

</ol>

<ul>

</ol>

<li>three</li>

</ul>

<img>

<img> short for image, <img> is the tag used to insert images into your page using an attribute called src (source), in the source attribute you should add the URL where the image is saved on the internet. Another important attribute is alt (alternate text) where you write somtheing about the image, its useful sometimes to have alt description cause if the browser cannot show the image it will show the text instead, also its good for the search engines so they can know what the image is about.

There many other attributes like alignment (top, bottom, right, left and middle), height, width, border,�etc.

Anything between these two tags has no importance for the viewer or the search engine. Theses tags are only read by the web developer they are called Comment tags.

They are used by the developer to write comments on how the page is working and what does each part show and why did he do this or that.

at that time maybe these comment don't mean anything but after a while when he wants to edit something, these tags will be very useful. Or if he wants to give the page to someone else for editing, the other person will understand what is going on in that page.

It is a good practice to leave comments while building your blog.