ITNP43 HTML Practical 1 Write Your Own Web Page

Transcription

1 ITNP43 HTML Practical 1 Write Your Own Web Page LEARNING OUTCOMES By the end of this practical you should be able to create a simple web page by writing HTML using a simple text editor, TextPad. You will be able to specify and format: Page titles Headings Paragraphs Inline images SUPPORTING DOCUMENTATION There are lots of links to information about HTML on the ITNP43 resources page ( or you can search for some yourself. A particularly useful link is w3schools XHTML tutorial located at: Validation of your HTML can be done at: Courtesy of VisiBone ( a quick popup of all HTML tags and a useful hexadecimal-to-colour converter can be found at: There are many many web sites which offer free "clip art", where you can obtain images that you can use in your web pages. For example see: GETTING STARTED Although it is possible to created web pages using a WYSIWYG tool such as Adobe Dreamweaver or even Microsoft Word, such tools do not provide the level of control of detail that may be necessary. Sometimes you really just need to get your hands dirty and get into the HTML code in order to produce the document you really want. You will learn to write your own HTML documents. You should finish this worksheet with an appreciation of how the HTML code relates to the finished output displayed in a web browser. Go to Groups\ITNP43 (V drive, inside Computer) and run the setweb program (double click it). This has the effect of creating a folder called Web in your Documents folder, with particular access permissions. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 1 OF 6

2 This folder is important! Do not delete it. This is where you must store your HTML files and associated files if they are to be accessible via the web (by specifying a URL in a web browser). To start you off we ve provided a template web page. Copy the folder WWW1 file from the Groups\ITNP43\ folder into your Web folder in your home folder. It contains template.html (and some other files). This worksheet will take you through some modifications to the file template.html, using the text editor TextPad to make the modifications. (You may use Notepad if you prefer, but TextPad uses colouring to help identify the structure of an HTML document). Start up TextPad. (You ll find it in Start->All Programs Start is the big button in the bottom left hand corner. TextPad might be under Applications, if you do not see it straight away) Using TextPad is quite straightforward. It is a bit like a word processor, but not as sophisticated; it s much simpler than Word. You will just be typing in text and saving it. You will not do any text formatting in TextPad itself. All HTML documents are simply text files. Open up the file template.html in TextPad. Now you can see the HTML source for the web page. How do you view this in the browser? Start up a web browser e.g. Internet Explorer. Type the URL for your template page into the address/location box and press Return. (For example, for user Susan J Bloggs, whose username is sjb001, the URL will be The ~sjb001 is the way that your Web folder is identified in a URL. You may store your HTML files in folders within your Web folder if you wish (it's a good idea to keep them well-organised!). Notice that you can specify files within folders, and also that the browser translates this URL into something slightly different. Now let s customize this page. We ll start by making some very simple changes to the page, but once you ve done these you can make the page as complicated as you like! A tip: Set Configure: Word Wrap in TextPad so the text doesn t head off to the right of your window. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 2 OF 6

3 Change the Page Title Make the title reflect what the page is about: call it An HTML Exercise. Remember, the title of the page is defined by the <title> tag. Replace the text between the <title> tags ( A Simple HTML Page ) by the text An HTML Exercise. Save the file (File:Save). Check the appearance of the file in the browser by clicking F5 (View:Refresh) in Explorer. Adding Content to the Body of the Page So far so good, but we also need some content. Content in the web page goes in between the <body> tags. All of the following requires you to add HTML tags after the <body> tag and before the </body> closing tag. Page Heading Usually it s a good idea to make the top level heading the same as the title. Add the heading <h1> An HTML Exercise</h1> You might find <h1> headings rather big. Try <h2> and <h3> headings as alternatives. Save your work at all stages, and keep checking what it looks like in the browser. Add some formatting and more information Now add some more information (it doesn't matter what) to the body of your document. For example Say that you are a student Write about where you come from Say what you are studying (don t forget to mention ITNP43!) Write about your interests Don t forget that paragraphs start with <p> and finish with </p>. You could add extra headings, too, to separate different subjects. Go ahead and do it! (you do not have to include real information.) Text Styles Tags can be used to specify how bits of text are displayed e.g. whether they should be emphasised in a special way or not. Try enclosing a few words with <em> </em> or <strong> </strong> DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 3 OF 6

4 You can try nesting different effects, too, to see how they combine. If you have forgotten what tags are available, then have a look at your lecture notes or try the w3schools tutorial. HTML is not really designed for specifying styles, or other presentation features such as fonts and colour. Later in the module we will see how to add these things to our web page via the use of style sheets. Link it up! Links are created using anchor tags, <a > </a>. We can also use anchors to link to other web pages. Create a link from where you typed ITNP43 to the ITNP43 home page by surrounding ITNP43 with an anchor: Replace the ITNP43 that you have already typed in your text by: <a href=" Save your page, refresh it in the browser (F5), and click this link. Your browser will change to the home page for ITNP43. To get back to your page, click the browser s Back button. Pretty Pictures One way to make your page look better is to add graphics. There are some GIFs in the Groups\ITNP43\Pix folder and on the pictures link on the ITNP43 practicals web page, but feel free to download your own from other sites (as long as they are not copyright protected.) Inline images can be included anywhere in your document using the <img> tag. Try including <img src= filename.gif alt= description > (where filename is one of the files in your Web folder) or <img src= Pix/filename.gif alt= description > (if you have stored your image files in a subfolder called Pix) somewhere suitable in your document. Don t forget to use the alt attribute to add a suitable short description of your image. Try different images. Some of the ones provided are animated GIFs that provide a simple moving image. Why use HTML at all? Open the document testpage1.html in Internet Explorer (IE) and also in TextPad. What do you see? Browsers try to interpret whatever they are given, even if it doesn t include all the right tags. What has happened is that, because the file is called testpage1.html, that is, it has a filename extension of.html, IE has assumed that the content of the file is HTML. In addition, IE has assumed, in the absence of any HTML tags, that the content represents the body of the page. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 4 OF 6

5 Add suitable HTML tags to testpage1.html so that it is displayed in a more sensible layout (use template.html as a guide). The next exercise is about making deliberate mistakes in your HTML to find out how tolerant IE is. Of course it would be better to have correct HTML. More on this in a moment. Open testpage2.html in both IE and TextPad. Make the following HTML errors one at a time, looking at the effect, and then correcting them immediately. (You can always get another copy of testpage2.html from the Groups folder.) In each case the browser will do its best to display something sensible it is quite tolerant. Which errors can your browser cope with? Miss out the > after <h1 Miss out the < before /h1> Insert a level 1 header completely inside a level 2 header. What happens? Now take out the first <h1> tag. Is it the same? Make two start/end tag pairs cross over in an invalid manner, for example: <strong> <p> </strong> </p> Miss out the <html> and <body> tags Miss out the </html> and </body> tags Validating Your HTML A very useful website that will check the correctness of your HTML for you is: Open this site in your browser window (using a new Tab, if you like). When it loads, either type in the URL (URI) of your first page (template.html) or select Browse Now click on the Validate button and after a pause (during which the W3C server fetches your home page and analyses it) you will get a report on the screen you will probably need to scroll down to see the whole report. IF you have errors reported try to fix them (by editing the HTML of your page using TextPad). After you think that you have fixed the problems, click the Revalidate button on the report page and see if all is then OK if not, then try again! Try another page: testpage2.html. You will probably see a number of complaints reported (a mixture of errors and warnings): Some will be because the document type is not declared. The validator tries HTML 4.01 Transitional as a default. You need to put something at the start of your document to indicate it is HTML5. Look back at template.html and see if you can add the required fix to testpage2.html. Revalidate it when you have made the change. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 5 OF 6

6 The other issue is that no character encoding was detected. As above, see if you can fix this by again referring back to template.html. You could try validating other pages to check the quality of their HTML content (for example, Stirling University home page ( Bruce Graham s university home page ( the department home page, ). CAUTION: If you ask the validator to check a page that needs a username and password to authorise the access (e.g. some lecture notes pages), then it will ask you to tell it your username and password so that it can pass them on to the server actually needing the username and password this in general is not a good idea, so, if it happens, click on cancel (and read the explanation that you will see on the screen it s quite well written). That s it for now. But you will learn by experimenting, so try out other things. Just one footnote: whenever you are creating your own HTML files, DO NOT use spaces in your filenames. Spaces can cause problems when typing in the URL on browsers. DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 6 OF 6