This tutorial assumes that you have already completed the induction lab, to check that you have access to the correct tools and web space. Refer back to the induction lab (and make notes) if you can't remember how to work with Brighton Domains, either working directly online or working offline and manually uploading files.
In the 10 weeks before Christmas we will be looking at the component parts of a responsive web page – hypertext, navigation, layout, images. The purpose of this tutorial is to show you some more elements that can be added to the skeleton website that you made last week, but still using only HTML.
When you have completed Lab Tutorial 2 your Learning Journal will look something like this week's example, but with your own text and image content.
Whenever you make any changes to your web pages remember to save them and preview them in a browser to see how they will display. Validate pages frequently to avoid errors stacking up.
STEP 1: Start the Learning Journal and add a publication date to your posts
If you have completed Lab Tutorial Week 1 you are now ready to start making the Learning Journal that will form part of your assessed work. It's time to decide what content you want on the page and to start writing. Replace the 'Lorem ipsum' text within the <article> tags with a post (or two) about what you have learned on the module so far. The Learning Journal is going to take the form of a blog, with regular posts; these can be dated and marked up like this -
<article>
<header> <h3>Week 1 - Getting started</h3> <p>Published on <time datetime="2021-10-08">October 8, 2021</time></p> </header> <p>I finished the first lab tutorial and ended up with a basic 3-page 'website'.
In this tutorial I learned how to do the following things -
</article>
The following line uses the <time> tag with the attributedatetime to mark up the date of publication in the ISO-8601 standard format year-month-day i.e. YYYY-MM-DD
<p>Published on <time datetime="2021-10-08">October 8, 2021</time></p>
If you want to give more importance to the date, then mark it up with the <strong> tag: this should be nested within the <p> and <time> tags -
<p>Published on <time datetime="2021-10-08"><strong>October 8, 2021</strong>
</time></p>
Lists are very useful for organising text on a page and making it more readable. They also offer a lot of scope for styling in CSS - you will be learning about this in a few weeks. It's a convention to markup navigation with a list - a navigation menu is a list of linked pages. The two most widely used types of lists are unordered lists - the browser styles these with a bullet - and ordered lists, which are numbered. The list items<li> are nested within the list tag - <ul> (unordered list) or <ol> (ordered list).
Add a numbered list of things you learned to the first post in your Learning Journal, for example -
<p>I learned to -</p> <ol> <li>Set up a folder for my website on my Brighton Domains workspace</li> <li>Link two pages together with a navigation menu using a relative link</li> <li>Create links to external websites using an absolute link</li> <li>Use <code>h1</code> and <code>h2</code> tags</li> <li>Edit the page title</li> <li>Validate HTML using the W3C validator</li> </ol>
Marking up 'code' content with the <code> tag adds meaning; the browser stylesheet will style it differently from normal text.
Save your page and preview in the browser - you will see the list numbers appear.
STEP 3: Create navigation within the page using anchors
The anchor tag can also used to create navigation links within a single web page. These are another form of link and the markup is the <a> tag which you used to make absolute and relative links last week. Anchors can be given an 'id' attribute to identity them uniquely on the page.
A link joins one web resource to another. To markup some text as a link use the <a> (anchor) tag and an href attribute to specify the destination of the anchor - e.g. the URL of an external website, or another page on the site. Absolute links use the full URL and are used to link to resources which are external to the website. Relative links are internal and are used to point to a file within the website folder, specifying the directory path.
Anchors are page markers which let a visitor link to another part of the same web page, or to a specific part of another page on the site. On long, scrolling pages they can be used to link a list of contents at the top of the page to sections of content. They can also be used to create a link from the bottom of a long page to navigate back up to the top of the page. I have used them on the long pages of the lab tutorials, so that you can go from the table of contents at the top of the page to the different steps and return from each step to the top of the page. As your Learning Journal grows you will need to create anchors for each post in order to navigate through the page.
Creating a link to an anchor is a two-step process.
Create an anchor at the place on the web page that you want to link to. For example, create an anchor at the top of the web page by typing this line after the <div> tag with the id "wrapper" -
<div id="wrapper"> <a id="top"></a>
Create a text link to that anchor destination from another part of the page. Type this line at the bottom of the page before the <footer> tag -
<p><a href="#top">Go to top</a></p> <footer>
Save the page and open it in a browser to test that you can navigate from the link at the bottom of the page to the top.
The web is a visual medium and users expect to see web pages that contain images and graphics, not just text. We will be covering images for responsive websites in more detail in a few weeks time.Images must always be resized, optimised and saved in a suitable file format using an appropriate software package, such as Adobe Photoshop - which we have in the labs -or the open source image editor GIMP - which you can download for free from https://www.gimp.org/.
Another very important issue when adding images and other multimedia assets to your websites is that you should not publish images on the a web server for which you do not own the copyright, or have permission to use. Search for images that have a Creative Commons license - these can be freely used, so long as the creator of the image is given a credit. Wikimedia Commons is a source of freely usable media files.
Only images that are informative content should be marked up within the HTML document. Images that are purely for presentation and decoration purposes should be specified in the CSS stylesheet.
Add an image to a web page
First make an image such as a screenshot or selfie, or find a small copyright-free image to add to your first post and save it as a PNG, JPG or GIF file in the images folder inside your site folder. Add this HTML markup at the point where you want the image to be displayed -
The <figure> tag is used to mark up an image that illustrates the web page content
The <img> tag is used to markup the source file of the image; the location of the file (with the directory path to its folder) is specified with the src attribute. Note that the <img> tag is self-closing - there is no need for a pair of tags.
Images can have width and height attributes. If used, the measurements should have the same values as the actual pixel dimensions of the image you are inserting in the web page. (Find height and width of images by right-clicking and select Properties >Details [Windows] or Get Info [Mac]. If your image is larger than you want you should edit it, using image editing software such as Photoshop or GIMP, to be the required width and height.
An image should always have alternative text to describe its content, so that users who have text only browsers (such as Lynx) or are using a screen-reader can be provided with information about the image, even when it will not be displayed for them. Usually a text description of the image is associated with the alt attribute of the <img> element. If <figcaption> is used to markup a caption for the figure no alt text is needed, as a caption is associated with the image. If I had not captioned the image the element should have been marked up like this - <img src="images/image.png" width="250" height="250" alt="short description of image content">
I've used a self-closing <br> tag after the caption, to make a line break between the caption and the copyright information.
Every website should include a link to the site owner, where users can send an email to contact them directly. (This is often provided on a 'Contact us' page or in the footer of the page.)
To add an email link to the page footer:
Type in the text for email link inside the <footer> tags - e.g. Email Jennie Harding
Mark up the text like this - <a href="mailto:jh1033@brighton.ac.uk">Email Jennie Harding</a>
Save the page and open it in the browser to test that the link opens an email message form. N.B. This will not work in the labs as we do not have an email software application installed on the computers. Try it on your own computer at home.
Finally - validate your HTML!
Go to the W3C website at http://validator.w3.org/ and paste your website's URL into the Address text box, as shown in Lab Tutorial Week 1. The service will tell you if there are any HTML markup errors in your web pages. If you have errors please correct them; ask your lab tutor for help if you cannot see what is wrong.
If you have not had time to complete the tutorial please carry on and finish it in your own time. If you finish before the lab session ends -
Write another post for this week in your Learning Journal. Blog posts are usually presented in reverse date order - the most recent post first - so put the latest post before the first one.
Include your own research in the posts, e.g. from the reading list or resources page.