[HTML] Basic Stuff..

Tarek · 2011-11-12 01:56 AM

Part.1

The aim of this tutorial is to teach you the very very very basics of creating a very basic page in HTML, alot of code is required for a simple "Hello World"

Let's begin;

First of all, to make a HTML document, you need to have the opening and closing tags, HTML which is

<html></html>

It's very important that you close every single tag. Now that you have the opening and closing tags, you need the head and body tags. Like a person, a HTML document has a head and body section, these are defined by the

<head></head>

and

<body></body>

Things such as the website title go inside the header section inside title tags, so if your website was "My Awesome Geeky Test Page" this is how your header would look;

<head><title>My First Test Page</title></head>

In the body section, is where your content goes, so if you wanted a paragraph of text, then you would put this code;

<body>

some text here</p></body>

the 'p' tag means paragraph, everything inside the

and </p> will be formatted as a paragraph, you can have several paragraphs, so to have multiple paragraphs, just add another set of p tags, and there you have it, you have a very basic page.

How your code SHOULD look;

<html>

<head>

<title>My First Test Page</title>

</head>

<body>



Hello World!</p>



This is another paragraph</p>

</body>

</html>

Looks alright right? Save it as test.html and open it, it will print a basic hello world.

Some tags:

 (line break)

<img /> (image include)

<hr /> (horizontal line)

Tarek · 2011-11-12 02:00 AM

Part.2

Now after that you tried the above example, lets try to make it more eye candy, which means we are going to add a css style.

Some random css

body {background:black;}

.funny {color:black;}

.notfunny {color:green;}

.ok {color:blue;}

Now to add the above code inside html theres two ways, im going to show you both ways.

First method (ill call it the quick one):

Take caution that after each property (for example color:...) you have to close it with ";" now this is not important if you have only one property inside the closing tag or to the last property (if you didnt understand, to make it simple always close it with ";").

the code becomes inside the html:

<style type="text/css">

body {background:black;} /* the color of the background */

p.funny {color:white;} /* the color the font */

p.notfunny {color:green;}

p.ok {color:blue;}

</style>

to add it:

<html>

<head>

<title>My First Test Page</title>

<style type="text/css">

body {background:black;}

p.funny {color:white;}

p.notfunny {color:green;}

p.ok {color:blue;}

</style>

</head>

<body><center><h1>

<p class="funny">Hello World!</p>

<p class="notfunny">This is another paragraph</p>

<p class="ok">This is a third paragraph</p></h1></center>

</body>

</html>

Second method:

With this method we are going to add another file lets call it file.css its code will be:

body {background:black;} /* the color of the background */

p.funny {color:white;}

p.notfunny {color:green;}

p.ok {color:blue;}

thus the html page will become

<html>

<head>

<title>My First Test Page</title>

<link rel="stylesheet" href="file.css">

</head>

<body><center><h1>

<p class="funny">Hello World!</p>

<p class="notfunny">This is another paragraph</p>

<p class="ok">This is a third paragraph</p></h1></center>

</body>

</html>

ps: make sure file.css and your hmtl page are inside the same folder

to make it simple you may download this file html.zip which i made to make things easy (both methods are added).

For full css references visit this website.

Any questions im all ears to help.

ZeeKay · 2011-12-15 04:03 PM

Wow thanks big_smile Waiting for more tutorials!

Tarek · 2011-12-16 05:48 AM

Part.2 Added smile

Michaeljohn · 2013-04-15 01:43 PM

Now after that you tried the above example, lets try to make it more eye

__________________________________________________
wow gold kaufen丨Wow gold丨Diablo 3 Gold|Guild wars 2 gold丨

LebTechs

Announcement

#1 2011-11-12 01:56 AM

Re: [HTML] Basic Stuff..

#2 2011-11-12 02:00 AM

Re: [HTML] Basic Stuff..

#3 2011-12-15 04:03 PM

Re: [HTML] Basic Stuff..

#4 2011-12-16 05:48 AM

Re: [HTML] Basic Stuff..

#5 2013-04-15 01:43 PM

Re: [HTML] Basic Stuff..

Board footer