Practical 1 HTML Introduction The aim of this tutorial is to guide you through the process of creating Web pages. The tutorial will create a set of pages fora ficticious Botany Department. tip Whenever you create a set of web pages you MUST fist createa new folder and name it. As you create the html pages save them in the folder you have cteated.inside this folder create another folder called images and place all of the image files (gif and jpg files) that you will use on the site in the images folder. Creating a Site ‘Aweb sites are usually created on a PC separately from the server on which it will be placed to make it available on the Internet. Certain rules need to be observed so that when the site is, moved from the PC on which it was constructed to the server all ofthe links will be operational. ‘First create a folder in which to construct the web site. Save all htm! files in this folder. tip All graphics for web pages must be prepared before the page is assembled, web writing software does not include graphic manipulation facilities, use a graphics program such as PaintshopPro to produce either gif (simple drawings) or jpg (Full colour photograph images) files for your web pages. Creating a Web Page ‘The first page we will create is a Home Page. This is the page that most people will vist first so it should provide them with an idea of what the site contains and how to navigate it. Starting a basic htm! file All htm! files follow a pattern starting with a statement that the following text is to be interpreted according to the rules of html. There is then a split into head and body, the head holding information passed to the browser such as the title which is displayed on the browser title bar and the body holding the marked Up text and graphics etc to be displayed on the screen. Start with the following skeleton: . * Using Notepad from the Accessories menu tye the skeleton above. The line meta http should be copied exactly as show here with all quote marks included. Save as home-html in your Home directory (Use File, Save As and change the file type to All Files andtype thefull name of the file including the extension) This will give you a skeleton htm file to come back to each time you want to start a new page. + Save the file again as home.htmlin the folder Web ready to start on the tutorial home Page. Note most tags are in pairs 00> and , remember to use these like brackets to surround the content being marked-up. Inserting text

You are now ready to place the text onto the page. The text is placed inside paragraph tags. Each paragraph starts on anex line. Using home html place the cursor Immediately after and press enter to start new line. Type -

Welcome to the Botany Department Web Pages

* Save the file and open a browser. Open the file home.html in a browser and you should see the text displayed on the screen. Since itis the main text on this page It needs to be more obvious, larger font and darker - In fact displayed as a main heading. Formatting the text using h1, h2, h3 etc where nis the heading level number * Return to home.htmlin Notepad and place

before the Welcome message and

after it. + View the file in a browser again (remember to refresh the browser) and you should see the greeting now formatted. Headings and are decreasing importance henceh2 will have less impact than h1 etc but all are coded in the same way. © Insert line after the Welcome message in home.htmi formatted as h2 to read- On this site you can: (Remember to close the tag pair) Formatting the text into a bulleted list

for the list as a whole and

for each line of the list.The list needed on the home page is: locate the staff ‘@ see some of our research specimens and contact the teams. ¢ link to other Botanical pages add the following lines to home.htm!

• locate the staffe/li>
• see some of our research specimens and contact the teams.

© Save your fileInserting horizontal rules

---

Horizontal rules (this mark-up does not need a closing pair)can be used to break up text. * Insert a horizontal rule beneath the unordered list. * Save the file Exercise 1. Add heading2~ This week's seminar "Gilding the Lily" below the horizontal rule. 2. Add a paragraph of normal test (

) Proffessor David Casey presents the advances being made nthe development of dermatological product from the pollen of the day lily. Finally, insert another horizontal rule just below the final sentence. Save your file ay Your page should look lke: Welcome to the Botany Department Web Pages ‘On this site you can: 1 seve tr ssoech permis acs fe ea ‘This week's seminar "Gilding the Lily” rire Dit Cry pees nrceteing mn drop emer om pen Bedi Setting the Web Page properties All web pages should have a title and most pages do not have a plain white background so we will provide our home page with atitle and a background colour. The title is important in web design and you should get into the habit of always providing your web documents with a suitable title for searching purposes. The title isplaced in the of the document and since the markup has been included in the skeleton. + Add the title- Botany Department Home Page to home.htm! is important to include atitle