MAS116/MAS117 PRESENTATION LAB 7
Go to the start menu and type ‘Notepad’ into the search box. Start Notepad.
Notepad is the basic text editor that comes with Windows. If it isn’t installed on the computer, instead try Notepad++, which may need installing from the Software Center.
In Notepad, type the following and save it in a folder as index.html (you will
need to add the ‘.html’ bit).
<!DOCTYPE html> <html> <body> <p>This is index.html.</p> </body> </html>
Once you’ve saved your file, go to the folder it is in and open the HTML file called ‘index’. This should open in a web-browser.
Return to Notepad, and add the following underneath the <body> command.
<h1>About index pages</h1>
Go back to your browser and refresh it (by pressing F5). You should find the page now has a heading.
<h2>...</h2>.
<h3> and <h4>. (In fact, you can go as far as <h6>.)The <h1>–<h6> tags are used to create headings of decreasing importance. Think
of them as similar to the \section, \subsection and \subsubsection
commands of LaTeX.
<p>
The index.html page is the first page that a
server will find in a directory. For that reason,
it should be the front page when you create for a
website. For more information, see Wikipedia.
</p>
see Wikipedia’ to ‘see <a href="..">Wikipedia</a>’, pasting in
your URL instead of ‘..’.
<a href=".."> to <a href=".." target="_blank">.
What does this do?Find the Wikipedia page for HTML, and look for the picture of Tim Berners-Lee,
one of the creators of HTML. Right-click on the image, and save it as
berners_lee.jpg in the same folder as your webpage; make sure it is all in
lowercase.
In filenames of files intended for the web you should (a) use lowercase letters only and (b) not put in any spaces. If you use spaces or mix upper and lower case, things can be seen to be working fine, however, things can stop working in certain circumstance, so don’t do it.
In this course, to avoid confusion, we will stick to the convention
we had in Python and LaTeX of using an underscore ‘_’ instead of
a space in filenames; however, more generally for files
for the web, a common convention is to use a hyphen
‘-’.
Return to your webpage and enter the following.
<h2>About HTML</h2> <img src="berners_lee.jpg" alt="Sir Tim Berners-Lee"/> <p> HTML is the language that powers websites. It was developed by Sir Tim Berners-Lee, who invented the World Wide Web. </p>
Refresh your browser. The image should appear on your page. If not, check your typing carefully, and ask for help if necessary.
src="bernerlee.jpg"
in your code? Using the ‘alt’ attribute is good practice as it will give
information if someone is using a screen-reader or your image fails
to load.
<img> tag, put <a href=".."> and after it put </a>,
where the dots are filled in with URL for the Wikipedia page for Sir
Tim Berners-Lee.
<small>Image by .., from Wikipedia</small> beneath the
image with the name of the copyright holder/photographer if you
can find it. (Hint: Click on the picture within Wikipedia to find who
took the photo.) Here the small tag is for ‘small print’ which is used
for things like picture attributions.
Before continuing, Make sure that your index page has one main, h1, heading
‘Index pages and HTML’ and two h2 subheadings, ‘About index pages’ and
‘About HTML’.
Between the <html> and <body> commands, add the following title, which will
not appear on the page itself but in the tab label in the browser
<head> <title>Index pages and HTML</title> </head>
The head of an HTML document – the bit between the <head> and
</head> tags – should be thought of as similar to the preamble in a
LaTeX document. Here, we set up the look of the page and control things like
the title.
So far, we’ve used HTML in the same way that we started using LaTeX, letting the computer decide how the final page will look. Very few webpages look this plain. The look of the document is controlled using Cascading Style Sheets (CSS for short).
We’ll cover the basics of CSS next time. For now, download the file at
http://maths-skills.group.shef.ac.uk/docs/lab_7.css, saving in the same
folder as your HTML file as lab_7.css. Now add the following code to the head
of your HTML file.
<link rel="stylesheet" type="text/css" href="lab_7.css">
This command tells the browser to format the page according to the style sheet you downloaded. It should have changed the look of the document noticeably. You can view the stylesheet by opening it in Notepad. Play around with it to see what you can alter. You’ll need to save the file and refresh the browser each time you make a change.
To practice making pages that interlink with each other, create a new file called
about.html.
The quickest way to do the following will be to copy and paste the code from your index page, and delete the bits you don’t need.
Give the page a main heading ‘About this work’, then a paragraph with the text ‘This work was created for Lab 7 in MAS116 the University of Sheffield’.
Make ‘University of Sheffield’ into a link to http://www.shef.ac.uk. Finally, let’s create a menu to navigate between the two pages. At the start of the body, add the following.
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> </ul> </nav>
Also copy this to the top of index.html. This should create a menu at the top
of each page. Note that the formatting of this menu is controlled by the CSS file
you added earlier, without which it will not look so good (try removing the
stylesheet link you added to see).
ZIP files are a convenient way to bundle together multiple files, especially if they need emailing. They are useful for websites, which often consist of multiple files all of which are needed for the site to function properly.
To ZIP a bunch of files, in Windows you should be able to select the
files, right-click then choose ‘Send to’, ‘Compressed (zipped) folder’.
On a Mac, the process is similar, and you should choose ‘Compress
Items’. Try it with the files from the website you created today. Call the resulting
file something like mas116_lab_7_files.
If the above don’t work for you, Peazip is free ZIP software that you can use following the instructions below.
mas116_lab_7_files.
Note that a website often won’t display properly from within a zipped folder: you will need to unzip it again and extract the files to a new folder.
One very useful feature of the world-wide web is that the HTML source for any page you visit is viewable. Go to the MAS116 webpage and view the source by right-clicking anywhere on the webpage and choosing ‘View source’. You could look at some other pages too. You’ll often notice lots of complicated code, but the basics of how text and images are displayed are just as we’ve done so far.
Some browsers try to hide the ‘view source’ option, so if you can’t see it, try a different browser or search the web to find how to reactivate the option. __________________________________________
There is no homework this week. Make sure you finish and submit your mini-project, and pay attention to announcements and lectures as to what happens in the next stage of the project.