Page 1 of 1

Beginners HTML Tutorial basic of html Rate Topic: ****- 6 Votes

#1 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Posted 10 August 2006 - 04:07 PM

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
Attached File  Introduction__to_HTML.doc (693.5K)
Number of downloads: 2249

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
Attached Image

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
Attached Image

1) Enter the following into your text editor.
<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.
Attached Image

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.
<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.
Attached Image

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.
<center>
<h1>

My Website

</h1>
</center>





6)Save the file and click the refresh button.

Your web page should now look like this:
Attached Image


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 :
<body bgcolor=”silver” text=”black”>



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.

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


You should get some thing like this:
Attached Image

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
<img src = “location/name.jpg”>

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 ).
<img src=”lap1.jpg”>


Your web site should know look something like this depending on your image:
Attached 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>
<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.
<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

Is This A Good Question/Topic? 2
  • +

Replies To: Beginners HTML Tutorial

#2 k.sangeeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 27-July 07

Posted 03 August 2007 - 04:19 AM

you have invested some time in this
great work
Was This Post Helpful? 0
  • +
  • -

#3 Jingle  Icon User is offline

  • D.I.C Regular

Reputation: 9
  • View blog
  • Posts: 317
  • Joined: 20-October 07

Posted 23 October 2007 - 03:59 PM

This is great for me a good start thanks!! :D
Was This Post Helpful? 0
  • +
  • -

#4 chili5  Icon User is offline

  • D.I.C Lover

Reputation: 20
  • View blog
  • Posts: 1,144
  • Joined: 28-December 07

Posted 02 January 2008 - 06:22 PM

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
Was This Post Helpful? 0
  • +
  • -

#5 2ulysses4u  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-June 08

Posted 11 June 2008 - 06:37 AM

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
<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):

<img src ="C:/Documents and Settings/User/Escritorio/MI_CARPETA/taula.jpg">
<img src ="C:\Documents and Settings\User\Escritorio\MI_CARPETA\taula.jpg">
<img src ="C:/documents and settings/user/escritorio/mi_carpeta/taula.jpg">
<img src ="location/taula.jpg">
<img src ="taula.jpg">



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
Was This Post Helpful? 0
  • +
  • -

#6 2ulysses4u  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-June 08

Posted 11 June 2008 - 06:55 AM

sorry :-S
i found out my mistake
the right code was
<img src = "taula.jpg">


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?
Was This Post Helpful? 0
  • +
  • -

#7 narmer93  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 317
  • Joined: 13-March 08

Posted 22 June 2008 - 02:14 AM

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


This post has been edited by narmer93: 22 June 2008 - 02:17 AM

Was This Post Helpful? 0
  • +
  • -

#8 LowWaterMark  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 119
  • Joined: 30-July 08

Posted 26 August 2008 - 03:04 AM

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!
Was This Post Helpful? 0
  • +
  • -

#9 iban_ez  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 05-September 08

Posted 08 September 2008 - 07:06 AM

Thanx quim, you had done the great work.
i very useful for as the beginer.. :^:
Was This Post Helpful? 0
  • +
  • -

#10 hhuttger  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 08

Posted 12 October 2008 - 03:09 PM

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?
Was This Post Helpful? 0
  • +
  • -

#11 xDutchGunn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 113
  • Joined: 25-May 09

Posted 01 June 2009 - 10:26 PM

Yes there is. You can hire a domainname + webserver. On that webserver you can upload your html code and then it will go online on the selected domain. Mostly those cost money, but if you are good with google, you might find a free one.
Was This Post Helpful? 0
  • +
  • -

#12 GMorris  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 15-June 09

Posted 20 June 2009 - 09:52 AM

View PostxDutchGunn, on 1 Jun, 2009 - 09:26 PM, said:

Yes there is. You can hire a domainname + webserver. On that webserver you can upload your html code and then it will go online on the selected domain. Mostly those cost money, but if you are good with google, you might find a free one.


Actually, you could just ultimately copy the website address and either email it to friends or post it on a website, blog, whatever. There are a lot of good tutorials out there, and some really good editors that are free if you really want to hand-code HTML. Look up one called "Front Page". It was free last time I checked, but I haven't looked for a while as I have Visual Studio for that kind of thing now. Front Page has a good editor that is highly customizable, and you can switch views to see how the page looks so far. There are also several different modes for people who like certain kinds of menus, like advanced or beginner styles, so there's something for everyone. It also comes with a good webpage-style documentation for HTML, though the documentation on the product itself is not so comprehensive. Anyway, it's easy enough to use so that the majority of the time you'll be looking up HTML rather than instructions on how to use the program. I used it for years and think it is one of the best (for free) that I've tried yet. It even has a good database of javascript code that you can insert right away into a page, including little games and all kinds of stuff. Happy coding in any case!
Was This Post Helpful? 0
  • +
  • -

#13 Jaakuuta  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 163
  • Joined: 02-July 09

Posted 21 August 2009 - 03:44 PM

Hello all... I'm relatively new to HTML myself, but I noticed a few things about this tutorial... It's indeed nice for a beginner, but there are a few comments...
<center>
<font>
<body bgcolor>
and the like are deprecated tags and shouldn't be used by the newer HTML 4.01 and XML standards

also, for the person that attempted to use <a href="C:\..."> in their code, for a file on your computer, it should be more like <a href="file:///...">
:)
Was This Post Helpful? 0
  • +
  • -

#14 samuelpitso  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-October 09

Posted 21 October 2009 - 01:07 AM

:D Great stuff man, bravo. Thanx. :^:
Was This Post Helpful? 0
  • +
  • -

#15 chavana23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 17-September 09

Posted 21 October 2009 - 01:13 AM

thank very much for this tutorial is was very helpful.

thank you for the tutorial it was very helpful :^:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1