You can also view this tutorial in ms word.doc
Number of downloads: 2316
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.
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.
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:
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.
<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.
<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.
<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 :
<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:
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 ).
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>
<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
Html Reference Tags