Lesson 1
We are going to create a simple one page HTML(Hypertext Mark Up Language) document or in other words, one simple web page.
Did you know that you can create a web page just using Microsoft's Notepad? You can find this handy little text editor by clicking on the start button and following this path "programs-accessories-notepad"
Using Tags
Tags are mainly a method for relaying to a web browser what's going on. For example, we need to let the web browser know that our document is an HTML document so we use the <HTML> tag, if we want to let the web browser know that we want to show a paragraph we use a <p> tag. Not only do we have to let the web browser know when we want it to start doing something, but it needs to know when to stop, so we use a closing tag eg </p> to close a paragraph.
Tags we will use for the next Two Lessons
Overview
The first thing you need to do is to create a folder where you will store all the files and images that you use for your web page(s). This will make life so much easier for you as you progress with your website. Go to the My Documents folder and create a folder and call it "WebSite".
How: Go to the My Documents Folder, Click File. Move your mouse to New, Click Folder, type in the name "WebSite" and click OK.
| Opening |
Closing |
Purpose |
| <HTML> |
</HTML> |
Document type |
| <Head> |
</Head> |
Information
pertaining to the page |
| <Body> |
</Body> |
The contents of the page |
| <Title> |
</Title> |
The
page title |
| <h1> |
</h1> |
Top Level heading(main) |
| <p> |
</p> |
Paragraph |
| <img
scr=""> |
|
The image you want to use.
No closing tag is used
|
| <Br> |
|
A line break( go down one line).
No closing tag
is used
|
| |
|
|
Let's Get Started (I know you are itching to)
Open Notepad
How:click on the start button and following this path "programs-accessories-notepad"
Type the following in, exactly as I have set it out:
<HTML>
<Head>
</Head>
<Body>
</Body>
</HTML>
Notice that the <HTML> tag is at the beginning and the closing </HTML> is at the end, as this is the beginning and end of our web page.
Notice we have an opening <Head> a closing </Head>, an opening <Body> and a closing </Body>. In between these opening and closing tags we are going to put the necessary information.
Title
We need to give our page a title, this is not a heading in the document, but it will appear in the webbrowsers title bar - you will see this when we view our first web page.
Ok, click at the end of the opening <Head> tag and pres the Enter key.Now type:
<Title>My Cool WebSite Design</Title>
The first four lines should look like this:
<HTML>
<Head>
<Title>My Cool WebSite</Title>
</Head>
Content
Let's now add the top level(main) heading to the content(body) of our page. Click at the end of the opening <Body> tag and press the Enter Key. Now type the following:
<h1>Welcome to My First WebSite</h1>
Your text should now look like this:
<HTML>
<Head>
<Title>My Cool WebSite</Title>
</Head>
<Body>
<h1>Welcome to My First WebSite Design</h1>
</Body>
</HTML>
Save Your WebSite Design
Ok, now let's save our work and view it. It is important, for security reasons, that you name your first page index or default (depending on your server technology) - this will prevent the possibility of someone being able to view all the files in your server's folder. Now another important step is how we save our page in Notepad, is that we put speech marks around the full title.
How: Click File, Click Save As. In the Filename box type "index.html" with the speach marks. Navigate to the WebSite folder in the My Documents folder, using the Save in box, and then click on the Save button.
Viewing Your Work
Start up your Web browser, which might be Mozilla Firefox, Opera, Internet Explorer or similar. Click File, Click Open. Navigate to your Website folder in the My Documents folder and open the index.html file.
Notice in the the title bar (the blue bar at the top of the screen) we have the title of the page My Cool WebSite Design and in the body we have the heading Welcome to My First WebSite Design.
Congratulations you have created your first Web Page!
Lesson 2 will cover:
Inserting text in paragraphs
Inserting Images
You may copy this article only if you use my tag below:
Author
Robert Archibald has been designing websites for many years and is an acknowledged expert in the area of website design. For more information try his website:
http://www.isit-training.co.uk
If you found this Tutorial interesting, please email me at manage@isit-training.co.uk
You will need an image 300 x 225 pixels for Lesson 2.
Click the Get Picture Link below to download one.