ITNP43 HTML Practical 2 Links, Lists and Tables in HTML

Size: px

Start display at page:

Download "ITNP43 HTML Practical 2 Links, Lists and Tables in HTML"

Luke Cummings
5 years ago
Views:

1 ITNP43 HTML Practical 2 Links, Lists and Tables in HTML LEARNING OUTCOMES By the end of this practical students should be able to create lists and tables in HTML. They will be able to link separate pages and create named links within a document, using them to build a table of contents. SUPPORTING DOCUMENTATION There are lots of links to information about HTML on the ITNP43 resources page (link via or you can search for some yourself. BEFORE STARTING Before starting this worksheet, you should be comfortable with everything that you have done in the previous HTML worksheet on using TextPad to create an HTML file. You should finish, and understand, that worksheet before beginning this one. If you are having trouble then ask for help! If you are working on any of the worksheets in your own time and are having difficulty, then Bruce Graham (b.graham@cs.stir.ac.uk) with your problems he will try to respond as quickly as possible. Please note from the first practical: For your web pages to be visible to the outside world they must be in the folder called Web in the top level of your home file store. Storing HTML files elsewhere, such as in a Web folder inside an ITNP43 folder in your file store will NOT allow those files to be seen by a browser using a URL beginning DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 1 OF 6

You will create both internal and external links to the page.

2 GETTING STARTED In this worksheet you are going to take a template page, that contains text for a cake recipe, and add suitable HTML tags to format it as a wonderful web page! You will create both internal and external links to the page. See below for screenshots of what the final page will look like. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 2 OF 6

3 To start you off we ve provided the recipe text for you to start with. Copy the folder WWW2 from the Groups\ITNP43\ folder into your home Web folder. Inside WWW2 you ll find a couple of files for this exercise, including Cake.html. Currently the file Cake.html contains only text, and no HTML tags. Using the text editor TextPad to make the modifications, we will add HTML tags to this file to turn it into a web page. Start up TextPad and open up your copy of the file Cake.html in TextPad. Now let s customize this page. Structural HTML The first thing to do is to add the appropriate structural HTML tags to turn this into a real HTML document. Firstly, look at the file template.html that you used in the last practical session if you cannot remember where the tags go and what they look like. Now do the following: Add an appropriate DOCTYPE tag at the top Add the <html>, <head> and <body> tags and their closures (e.g. </html>) in appropriate places. Add a <title> tag with the title, My Favourite Recipes. Save the file. Check the appearance of the file in a browser such as IE Having a problem with permissions? Use the setweb file in the ITNP43 Groups folder to make sure your Web directory (and all files in it) are visible to the outside world (open the ITNP43 Groups folder and double click on setweb; press any key when it has finished what it is doing). Even without <p> tags, or other formatting, the browser will display the text in the file, but not in a way that is very readable! Let s add some suitable formatting to the page. Page Headings Usually it s a good idea to make the top level heading in the body of your page the same as the title. Add the heading <h1>my Favourite Recipes</h1> to the body We will only include one recipe today, but feel free to add others later on! Let s add a subheading for the cake recipe. Add the <h2> start and end tags around the text My Mother's Favourite Orange Cake that is already in the file. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 3 OF 6

4 Save your work at all stages, and keep checking what it looks like in the browser. Add some formatting To make the cake recipe more readable, we are going to format the ingredients and the conversions as tables, and the cooking instructions as an ordered list. Examples of how it will look are shown at the beginning of this worksheet. You do not have to make things look exactly the same as this do things to suit yourself! Format the ingredients as a table with a single column. Each row will contain one of the listed ingredients. The first row should contain the text Ingredients and be specified to be a header cell (<th>). Add a border if you like. Format the cooking instructions as an ordered list by making each sentence a separate list entry (or use any other subdivision that you think is appropriate). Now format the conversions as a table. Give the table the caption, Conversion Table. Use any layout you wish (the one shown in the examples required some cutting and pasting of the text into appropriate table cells). Note that empty cells can be created by using a non-breaking space for the cell contents: Constantly check how things are progressing by saving the file and reloading it in the browser. Once you are done you should have a good looking recipes page! Pretty Pictures One way to make your page look better is to add some pictures or other graphics. There happens to be a picture of the orange cake in the file cake.jpg in the WWW2 folder. Let s add this as an inline image somewhere in your recipes page. Include it by adding the tag <img src= cake.jpg" alt= My mother s orange cake > somewhere suitable in your document. Table of Contents Your page is probably too long to see all at once in the browser window. It would be nice to be able to navigate quickly to different parts of the page. To make your page more usable, and to prepare for adding more recipes, we will use an ordered list and named links to create a table of contents for your page. Links are created using anchor tags, <a > </a>. The id attribute is used to create named points within the page, and the href attribute is used to create hypertext links to the named points. First name the cake heading by adding an id attribute to the <h2> heading so that you have: DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 4 OF 6

5 <h2 id="cake2">my Mother's Favourite Orange Cake</h2> Using names ingredients, instructions and conversions, make suitable named points for the other parts of your page. (You can include the < id= > attribute with any suitable tag, including in lists and tables, so just choose an appropriate tag to be your named point in each case. Now just after your main heading at the top of your document, create an ordered list that is a table of contents for your page. Link each list entry to a named point in your document by using <a> tags of the form: <a href= #namedpoint >list entry text</a> e.g. <a href= #cake2">my Mother s Favourite Orange Cake</a> Save your file, reload it in your browser and try out your table of contents! You should see that when you click on one of the links in your table of contents the browser redisplays your page with the named point at the top of the window. To really make this useful it is good to have a back to top of page link near each named point to make getting back to the beginning easy. Link it up! Web pages normally link to other pages on the Internet. Search for some suitable cake recipes or definitions of ingredients and make some links in your Cake.html to add to your page. Add some external links to your page You should also link this page with the page, template.html that you created in the last practical session: Somewhere suitable in template.html add the link: <a href="../www2/cake.html">my Favourite Recipes</a> (If this does not work, think about the relative addressing you need to find Cake.html from where you have stored template.html see note below) At the top of Cake.html add a relative link back to template.html Give your new links a try! You may have trouble getting the links between your pages to work. Remember that files like cake.html can reference other files in your site in a relative way. So if cake.html is in folder WWW2 and template.html is in folder WWW1 then relative addressing looks like../www1/template.html in cake.html. The alternative is to use a full URL, e.g. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 5 OF 6

6 That s it. But keep playing to your heart s content. Add some more recipes, if you like. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 6 OF 6

CSCU9B2 Practical 1: Introduction to HTML 5

CSCU9B2 Practical 1: Introduction to HTML 5 Aim: To learn the basics of creating web pages with HTML5. Please register your practical attendance: Go to the GROUPS\CSCU9B2 folder in your Computer folder