Beyond the Mouse LAB 12: HTML+CSS
November 29, December 1, 6
Instructor: Jeff Freymueller
x7286 Elvey 413B jfreymueller@alaska.eduTA: Matvey Debolskiy
Last Updated: November 27, 2017
Due: Wednesday Dec 6
Note that you can finish this lab off in class Tuesday next week if you need to. However, we will be using Thursday December 7 for you to show off your final projects.
Lab slides
Exercise 0: Warm-up
Download these files (right click+save as):
- very basic HTML file for you to fill with contents and structure
- image file
Open the HTML file in a text editor (notepad). Remove the comment in Line 11. This is the place to put your contents:
- Open a webbrowser (Firefox), open the file
empty_1.htmlin the webbrowser using the File menu (Open File). You will see a nice empty page. - Now edit your HTML file to add some text to your HTML file body using the
<p>tag. - Make sure you have saved your file and refresh the browser window. See what you have done!
- Make the image file you downloaded appear in your website
using the
<img>tag (help: http://www.w3schools.com/tags/tag_img.asp) - Make this image a link to the Lab 06 website:
http://www.gps.alaska.edu/jeff/Classes/GEOS436+636/LAB06.html - Hint: instead of text put the
imgstuff inside the link tags - Add another link to Lab 06 below the image (linebreak tag is
<br />) this time with some text indicating the link. - save this file and send it to Joe.
Exercise 1: HTML - Creating the document structure (See the example from our demo (It's a website, use right-click+save-as to save))
Download this file (right click+save as):
- basic HTML file for you to fill with contents and structure
Open the file in a text editor (notepad) and save it as index.html. This way you keep the empty file as a template
for future projects. Inside index.html you will find the basic structure necessary to make a nice
webpage. There are certain parts that need your attention, though, before you go any further:
- Line 7: You should replace the text "
KEYWORDS THAT DESCRIBE YOUR WEBSITE" with actual keywords, or delete this line. - Line 11: You should replace the text "
EMPTY FILE" with a title for your website. The word 'website' doesn't have to appear, it's implied by the fact that you're building a website. Keep in mind that names of HTML files and title strings are also indexed by search engines. So be creative. - Line 17: This is the place to put your menu.
- Line 21: This is the place to put your contents.
- Line 26: This is the place to put your footer.
Starting from this empty template, we'll create something that's similar to this document: generic_website.pdf
Add the following elements to your website (open the file index.html in a browser window and episodically refresh to see what it looks like on the screen):
- Some sort of header which is enclosed in
<h1></h1>tags - A menu (in the place where it says 'the menu goes here') for which you should use an unordered list
- The menu items (list items) are going to be links:
<li><a href="link-target">TEXT TO APPEAR AS LINK</a></li> - If you want to link to certain passages on the same page you'll use anchors:
<li><a href="#anchor-name">TEXT TO APPEAR AS LINK</a></li>
Here goes lots of stuff, actual content, blabla ...
somewhere in the text is the passage you wanted to anchor to, simply insert:
<a name="anchor-name"></a>
- I suggest the following rather generic menu items (use anchors): about, research projects, teaching, cv, publications
Now you have your menu set up, but nothing yet that it links to (if you click on any of the menu items in the browser window, nothing will happen). Here's what you'll do:
- For each item in your menu list, add a h2 header, name it the same as the menu link
- Next to each of these headers, you'll put the anchor link targets as described above
- In the about section you can add some of your details in another unordered list
- Below each header you can add paragraphs with text.
- If you're working on several research projects (see generic_website.pdf), you can
add more sub-headings, use
h3
Add another paragraph in the place that contains the footer comment. A footer can contain brief contact information, site update information, etc. You've seen them.
Exercise 2: CSS - Changing the design (Here is an example , CSS)
Well, we have a website that looks rather 90's but is well structured. We should, however, do something to the design.
Download this file (right click+save as) to the same directory as your index.html:
- basic css file that allows for a two column, header, footer design like this website
We have to make just a few slight changes to our structure document to make it look like this: generic_website_css.pdf
Quite a bit is already prepared for you which you'll see when you open the CSS file in a text editor. Here's the big secret on website design questions: secret. Grab a template that looks good to you and modify it until it fits your taste.
- THE FOOTER: set the parameter
idtofooterso that the last paragraph is formatted as described in the css file. - THE MENU: set the parameter
idtonavigationso that this unordered list is formatted as described in the css file:ul#navigation {
font-size: 0.83em;
float: left;
width: 12.3em;
margin: 0;
padding: 1em 0 0;
display: block;
font-weight: bold;
list-style: none;
color: navy;
} - refresh the website in the browser window. Voila!
- You'll find similar definitions for the two
<div>containers that I already gave you. One has the idthe_pagethe othercontents - Now play with the parameters. It would be very easy to move the menu from the left to the right side. In the CSS file I indicate in the comments which places need to be changed. Try it! It's easy! That's why we use CSS
- Could also download this image and uncomment a line in the CSS
definition for
h1that says something about backgrounds - Play with some of the other parameters to figure out what they change. If nothing seems changed, set them back to the initial value - it might be a setting that affects other browsers.
Have fun! Send Kyle a nice looking website and all the files we would need to enjoy it!
Some useful files
A link to my own css file for the screen (right click, Save Link As... to download): jeff.css
A link to my own css file for print (right click, Save Link As... to download): print.css
Dr. Jeffrey T. Freymueller
Professor of Geophysics
Geophysical Institute
University of Alaska, Fairbanks
Fairbanks, AK 99775-7320