Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the
written permission by Peter Krisch of allcreativedesigns.com.au,
All Creative Designs
Basic HTML for PC Tutorial Part 1
Using MS Notepad
My First Web Page
Step by step instructions to build your first web page
Brief Introduction What is html? The abbreviation stands for Hyper Text Markup Language. The computer language used to create hypertext documents, allowing connections from one document or Internet page to numerous others. HTML is the primary language used to create pages on the World Wide Web. Duration of this tutorial is approximately 30 - 40 minutes. If you can create a folder, save files and are able to copy and paste this tutorial is not difficult to complete.
Step 1
Open My Computer and select your My Documents folder. Create a new folder in My Documents by right clicking in white space and selecting New then Folder (See Figure 1a) naming it local_websites. Select local_websites folder and in this directory create another folder calling it my_first_webpage. (See Figure 1)
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
1 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Rule 1
No spaces in any file or folder names use underscores, dashes or capital letters instead. For example myFirstWebpage or my-first-webpage.
Step 2
Go to any of our photo pages under Gallery. Click below to open web page if necessary: www.allcreativedesigns.com.au/pages/gallanimals_amphibians.html
You might have to type or copy and paste this address into your browser if viewing the PDF version
Right click any thumbnail image and select copy. Navigate to your my_first_webpage folder and paste, repeat process so you have two images (150x113px) or (180 x 135px) in your web page folder. See figure 2 (Using your own images will be covered later.)
Figure 2
Rule 2
Only jpg, gif or png image file formats will work and remember no spaces in file names. Use underscores dashes or capital letters instead. Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch 2 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Step 3
Open Notepad in windows, All Programs > Accessories > Notepad
Figure 3
To create a notepad desktop icon right click, mouse over Send to > and select Desktop (create shortcut).
Rule 3
Only Notepad will work, do not use MS Word.
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
3 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Step 4
HTML is written in the form of labels referred to as tags surrounded by angle brackets. Tables, rows and cells are used to position content elements like images and text on your web page. (More explanations on tables, rows and cells in Part 2.) . Start typing Only type code shown in green (view figure 4 on next page for an example). Description
Open html tag Open head tag Open and closing title tags Closing head tag Open body tag Open table tag Open first row tag Open left cell tag Open and closing headline tags Closing left cell tag Open right cell tag
Actual Code
<html> <head> <title>Your Web Page Title</title> </head> <body> <table width=900 align=center> <tr> <td width=700 > <h1>Your Headline Text</h1> </td> <td width=200 > <img src=image_file_name.jpg /> </td> </tr> <tr> <td>Type some text</td> <td> <img src=image_file_name.jpg /> </td> </tr> </table> </body> </html>
Explanation
Opens html document Opens the head section of the document Type web page title in between title tags, this inserts page title into top of internet browser Closes the head section of the document Opens the body section of the document This will create a table at 900 pixels width, centered on your web page Opens the first row in your table Opens the left cell in your first row and sets the width to 700 pixels Will insert text as a headline size 1 (largest) into this cell Closes the left cell in your first row Opens the right (second) cell in your first row and sets the width to 200 pixels Embeds the image into the right cell (*see further instructions next page). No closing image tag Closes the right cell in your first row Closes your first row Opens the second row in your table Opens and closes left cell in your second row and inserts text typed Opens right cell in your second row Embeds the image into the right cell, second row (*instructions) Closes the right cell in your second row Closes the second row in your table Closes the table Closes the body section of the document Closes html document
Image tag
Closing right cell tag Closing first row tag Open second row tag Open and closing cell tags Open cell tag Image tag Closing cell tag Closing second row tag Closing table tag Closing body tag Closing html tag
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
4 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
* Instructions to embed images Make sure your image file names are spelt exactly the same as in your my_first_webpage folder. For example: <img src=giantbarredfrogtn.jpg /> Do not forget file extension (jpg, gif or png). Please note an image tag has no separate closing tag as a forward slash / is included and leave a space between inverted commas and slash. Make sure you use inverted commas/double quotes not double typed apostrophes/single quote. Inverted Commas / Double Quotes on your Keyboard Finished notepad text document See figure 4
Figure 4
Rule 4
For every opening tag (with a few exceptions) there has to be a closing tag or your web page will not work correctly. No capital letters in html tags (within brackets) except image file names. Type text (in between tags) normally using capitals and spaces.
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
5 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Step 5
Save your notepad file In your notepad document click File than Save in top menu bar and navigate to your my_first_webpage folder. Under Save as Type select all files and name the file index.html Then click Save See figure 5 Menu bar
Figure 5
Save as Type
Rule 5
It is important to name your home page index.html as internet browsers will look for this file first.
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
6 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Step 6
Viewing your web page
In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your index.html file. Your web page should open in your default web browser i.e. Internet Explorer, Mozilla Fire Fox or others.
The other way is to open your web browser and go to file in top menu bar, there choose open and than browse to your web page folder. Select your index.html file and click open than click ok to view your web page.
Screen shot of web page created in notepad See figure 6 Web page title
Figure 6
Image tags are: <img src=frogtranstn.gif /> and <img src=giantbarredfrogtn.jpg />
If you find mistakes in your index.html code make the necessary changes and save again. If your web page is still open in your browser just click refresh otherwise reopen your web page (See Step 6).
How to troubleshoot your index.html file is explained on the next page.
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
7 of 8
Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au,
Trouble Shooting
My images will not show if:
1. Images are not saved in the same folder than your index.html file 2. Spelling mistakes or spaces in file names 3. Wrong file extension i.e. .jpg instead of .gif 4. Copied file names from MS Word 5. Used double typed single quotes/apostrophes instead of inverted commas/double quotes Inverted commas/double quotes on your keyboard Positioning of elements incorrect: 1. Missing closing tags 2. No forward slash in closing tag 3. Incorrect spelling or spaces within html tags 4. Used double apostrophes instead of inverted comas If you find mistakes in your index.html code make the necessary changes and save again. If your web page is still open in your browser just click refresh otherwise reopen your web page (See Step 6). The second part of this tutorial will add; backgrounds, font colors, hyperlinks and more to your web page.
Other tutorials available from www.allcreativedesigns.com.au
You might have to type or copy and paste this address into your browser if viewing the PDF version
www.allcreativedesigns.com.au/pages/tutorialbasicp2.html HTML Web Page Tutorial using Notepad, PDF Download Page Part 2 www.allcreativedesigns.com.au/pages/tutorialbasicp3.html Free PDF HTML Tag Tutorial using Notepad, Download Page Part 3 www.allcreativedesigns.com.au/pages/webtutorialkompozer.html Web Design Tutorial using KompoZer, PDF Download Page www.allcreativedesigns.com.au/pages/tutorialpicasa.html Picasa Photo Editing Tutorial, Free PDF Download Page www.allcreativedesigns.com.au/pages/tutorialseo.html SEO Tutorial Basic Search Engine Optimization PDF Download Page
Copyright 2007-2012 Basic HTML Tutorial Part 1 by Peter Krisch
8 of 8
