JavaScript Tutorials

Welcome to Dream.In.Code
	Getting Help is Easy! Join 132,458 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,372 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Beginners HTML Tutorial

Beginners HTML Tutorial, basic of html

Options

Rating

quim

10 Aug, 2006 - 03:07 PM

Post #1

This tutorial will teach you the basic of html. At the end of this tutorial you will be able to do you own personal web page.
You can also view this tutorial in ms word.doc

Introduction__to_HTML.doc ( 693.5k ) Number of downloads: 1434

Introduction to HTML
HTML  (Hyper Text Markup Language) is the programming languages used to create web page.
The HTML code written for each web page acts like a detailed description on how the web page is displayed. The programmer chooses where to place text and images as well as their attributes, such as color and size within this HTML code so that when a web browser looks at the code, it knows exactly how the page looks.
The HTML code that defines the layout and content of the web pages uses what are called tags . An example of the uses of tags would be <u> and </u>, which would cause any text between them to become underlined.
Application such as Microsoft FrontPage and some others hide the HTML code from you, providing a graphical interface and allowing the user to make a website with no knowledge of HTML.
On this tutorial you will learn some basic steps in creating a web site using only HTML code written in a text editor. The web site you create will consist of a main page and a profile page include text, color, images and hyperlinks.

Definition:

Web Browser - is an application used to display webpage. The most common us Internet Explorer.

Hyperlinks - are portion of text or image that link to another page in you folder or in other website.

Before Starting the Tutorial:
1)Create a folder somewhere on your computer to keep your web site.
2)Download or obtain an image in (gif, jpg or png format) and place it in the folder you have created.

Tags
As briefly explained earlier, tags form the structure of the HTML code and tell the web browser how to correctly display the page.
A tag will always be in the form <tag> with the name of the tag enclosed by a less than (<) and more than (>) symbol. The symbols can be made by pressing the comma or full stop keys while holding the shift key. Anything typed between tags, for example, <tag> HELLO THERE <tag> will be interpreted by the web browser as text to display.

To better explain how the tags work, here is a small example of a HTML file:
HTML tag

To explain what is happening in the example above, it begins with the beginning HTML tag <html>. This is the standard HTML tag that tells the browser when it reads the file that it is reading a web page. The next tag is the <body> tag. This tells the web browser that the main body of the page has now begun.
You might have notices that some of the tag names begin with a forward slash (/). This tells the web browser that the tag has finished. From the Point where a tag starts to where it finishes, including anything between these points is called a tag block.
The tag <p> means that a new paragraph block has started. text that user wishes to display can only be put within a paragraph block. When the user wishes to start a new paragraph. They must first end the current paragraph block by entering </p> and starting a new paragraph <p>.

As good practice when writing HTML code, you should always:

All text to display that is not a heading must be between paragraph <p> tags</p>
Tag blocks should not be left open. if you start a <p> tag that it should be ended with </p> at some point.
Tag blocks should not be crossed over. if you start a tag while already inside another tag block you need to end the second block before you end the first

1) Enter the following into your text editor.

CODE

<html>
<body>
<p>
Hello World
</p>
</body>
</html>

Now you are going to save your first page. The first page on a website is always called index.html or index.htm

2) Save the file in your website folder as index.htm. If using notepad, be careful to change the 'Save as type' to 'All Files' because it will add '.txt' to your file if you do not.

If your web browser did not load check if you correctly saved your file to ( index.html) and if your browser loaded but the page is not displayed correctly check your code and try again.
The next step is to change the title of your web site

3)Back in your text editor type the following between <html> and <body> tags.

CODE

<head>
<title>
My first web site
</title>
</head>

4)Save the file and click the refresh button in the browser.
Now you can see that the title changed.

The main heading of your page is part of the main body, so it must go inside the <body> tag block.

5) In your text editor insert the following text right bellow the <body> tag.

CODE

<center>
<h1>

My Website

</h1>
</center>

6)Save the file and click the refresh button.

Your web page should now look like this:

Right now your web page is boring with just some plain text and a white black back ground.
7) To add background to your page replace the <body> tag to :

CODE

The bgcolor refers to the background color and the text color is for the text color. When choosing a color try not to chose a color that is hard to read or that does look right with the other. You can choose a color by its name or you can specified an exactly color which is a quite complicated to understand.

8) Save the file and click refresh try to different colors until you find one that you like.
9) Edit a paragraph block to describe a little about you web site.

CODE

<p>
Welcome to my web site
</p>
<p>
I am a member of dreamincode.net
</p>

You should get some thing like this:

10)Using what you have learned open the text editor and and make a web page that has a title of ( about me ) and display “About me” on the center of the page and the heading is 1.

11)Save the file as ( aboutme.html ) in the same folder as (index.html) is.

Now we are going to put an image in your web site. The tag for image is

CODE

The location/name is where the file is. Location is needed only if the file is not in the same folder.
Jpg is the image format it could be png, gif,… depends on the picture format.

12)Now that you know how to insert a picture in the webpage edit the following right after the text My Website and before the tag <center> in ( index.html ).

CODE

Your web site should know look something like this depending on your image:

You are now going to make hyperlinks to some of your favorite websites and a hyperlink from your main page to your profile page.

13)Enter the following code after … dreamincode.net</p>

CODE

<h2>
My Favorite Websites
</h2>
<p>
<a href="http://www.google.com">
Google
</a>
</p>

Add some of your own favorite save the file and refresh.
14)In your index.html, enter the following code after My Web site and before the picture.

CODE

<p>
<a href="aboutme.html">

About Me

</a>
</p>

When you click on about me Link it should open you About me page.
15)Using the techniques you just learned do a hyperlink in aboutme.html that will open you index.html

Tag Reference
Html Reference Tags

Register to Make This Ad Go Away!

k.sangeeth

3 Aug, 2007 - 03:19 AM

Post #2

you have invested some time in this
great work

Jingle

23 Oct, 2007 - 02:59 PM

Post #3

This is great for me a good start thanks!!

chili5

2 Jan, 2008 - 05:22 PM

Post #4

Thats really informative for Beginners. I'm a little more advanced now but a beginner would get a lot out of it.

There was more information in there then in my introduction to HTML course.

Goodf work

2ulysses4u

11 Jun, 2008 - 05:37 AM

Post #5

hi
i'm just starting out with HTML and really hope to able to dream-in-code little by little
i`m from spain
THANKS a lot for this opportunity (and sorry for my english mistakes) :-S

This is my 1st code

CODE

<html>
<head>
<title>
My first web site
</title>
</head>
<body bgcolor="darkgrey" text="midnightblue">
<center>
<h1>
My Website
</h1>
</center>
<center>
<h2>
about me
<img src ="C:/Documents and Settings/User\Escritorio/MI_CARPETA/taula.jpg">
</h2>
</center>
<p>
Hello World
</p>
<p>
Welcome to my web site
</p>
<p>
i am a member of dreamincode.net
</p>
<h3>
My Favorite Websites
</h3>
<p>
<a href="http://www.google.com">
Google
</a>
</p>
</body>
</html>

my problem:
i wrote line 16 in these different ways,
but didn't work (cannot display the .jpg on browser):

CODE

i made a file named "mi_carpeta" ( = my_file) with the 3 files: taula.jpg , index.html and aboutme.html

Where's my mistake?
Thank u again

2ulysses4u

11 Jun, 2008 - 05:55 AM

Post #6

sorry :-S
i found out my mistake
the right code was

CODE

and my mistake:
i've named twice the .jpg file as "taula.jpg" in "mi_carpeta" (file)

so it didn't work, not able to find the way... :-S

and then... go on...
in what part of this site?

narmer93

22 Jun, 2008 - 01:14 AM

Post #7

try this font

html


<html>
<title>font demo</title>
<body>
<font face="verdana">the text here</font>
</body>
</html>

This post has been edited by narmer93: 22 Jun, 2008 - 01:17 AM

LowWaterMark

26 Aug, 2008 - 02:04 AM

Post #8

quim, thank you very much for all the time and effort. I just spent two hours going through your tutorial letter by letter. I know, I'm slow but trainable.

It's a mildly satisfying feeling when it works, when I refresh my browser and there's a picture of my cat for the world to see (I know, everyone's favorite Website photo).

You did a cool thing!

iban_ez

8 Sep, 2008 - 06:06 AM

Post #9

Thanx quim, you had done the great work.
i very useful for as the beginer..

hhuttger

12 Oct, 2008 - 02:09 PM

Post #10

Hey thank you very very much! I am brand new to this website. I have one question about this. Is their a way to make this an actual link that I could send to friends?