Time: 60-80 Minutes Each Section

Lab 3HTML

Lab3 Task: HTML

Preparation

Group Size: Individual

Time: 60-80 minutes each section

Aim

This lesson will enable students to:

Understand the basic structure of a webpage

Design and prepare a personal webpage

Be able to develop a website by using HTML

Websites for HTML:

In English:

In Chinese:

Basic HTML (Image, Links, Lists)

Useful text editor for writing html: gedit

Background information about the gedit:

Downloadgedit from:

Link1 (Course Page)

Link2 (Windows binaries, FTP of gnome Server)

Link3 (Mac OS X packages, FTP of gnome Server)

An example of viewing a web pageusing gedit.Here you can see the source HTML.

Basic concepts of html

HTML stands for hypertext markup language and is designed to enable you to write web pages. It is intended to be very simple, consistent and platform independent. It is also very widespread and hence extremely important. Exact figures are hard to determine but it is estimated that there are well in excess of 100m websites and probably in excess of 30bn web pages at present[1].

Start with the tutorial at

Notice that html comprises tags that are denoted by <…>. These tags are instructions to a web browser as to how render (display) a page of html. Usually there is an open tag <tag> with a matching close tag </tag>.

Below is an example of a simple html page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

<head

</head>

<body

<h1> MY PROJECT </h1>

<p> This is the html page for my project. </p>

</body>

</html>

There are three parts to an html page.

document type
head section
body section

Strictly speaking the doctype part is not an HTML tag but simply a directive to the web browser about what version of the markup language the rest of the page is written in.

Using gedit to create, save and view html files

Create a new empty file in gedit, and then enter the code above (HINT it will be quicker to copy and paste) and save the file as “Test1.html”. This is a simple html page. Note that in the gedit, tags like <html> and <body> are highlighted in green. Other parts may be pink or purple.

Open this page in the web browser Firefox (File>Open File …). Make sure you use v3.5 or later as there are differences between browsers so for this module we standardise on this version. The image below illustrates how the html file is rendered by the web browser.

Make some changes to the code e.g. add an author and date last-changed line, save it and then refresh the browser. Notice that how you lay out your page is not necessarily how the page appears when you view via a web browser since Carriage Returns (CRs) are ignored. You need to use <p> or <br> tags to force new lines. Experiment with these tags.

1)Add an image

You can include images e.g. jpg or gif files within a web page. Below is an example fragment of html to display the image contained in the file “Pic.jpg”. The alt instruction is what to display if for some reason the file cannot be found and height and width arguments instruct the browser as to what size the image should be rendered.

imgsrc="img7.jpg" alt="This is a picture" height="406" width="560"/>

In this example we use relative file addressing, i.e. the address is relative to wherever the html file is located so here the image must be in the same directory. Sometimes we wish to use absolute addresses so the complete address must be given (including the protocol) e.g.

Tutorial Link:

Add a Jinan University logo to your page. Logois available from

2)Adding hyperlinks

There are two types of hyperlink: internal hyperlinks (linking to an anchor within your page) and external hyperlinks linking the page created by you to some external page e.g.

For the internal link you will also need to provide the destination point known as an anchor (i.e. where you want to jump to).

<a name="MyAnchor">MyAnchor</a>

The external hyperlink is created using the same tag but with anhref command and the name of the destination or anchor prefaced by a hash.

<a href="#MyAnchor">Go to MyAnchor</a>

Note, that you may not see the effect of the internal jump if your page is smaller than the window. Remedy this problem by adding sufficient <br> tags.

An external hyperlink is created using the same tag but with a url (e.g. …) instead of an anchor name.

Tutorial Link:

3)Adding lists

HTML provides for various types of list. The most common are unordered lists and ordered lists

<li>Unordered list</li>

</ul

<li>An ordered list</li>

/ol

Experiment with how these are rendered by Firefox. What happens if you nest (embed) one list within another?

What other types of list can you find?

Tutorial Link:

4)Adding a page title and headings

It’s good practice to give your page a title. This can help search engines such as bing/baidu/google more effectively index your page. It’s also easier for users of your web page. In the html example we see:

title> Test HTML Page</title>

In addition you can add headings of varying size from:

<h1>This is a big heading</h1>

<h6>This is a very small heading</h6>

Sometimes it’s also effective to break up the page using a horizontal rule <HR>. Look up how to control the width and length.

Extension Work:

If you have managed to finish the above, then you may like to try the following.

Images

In a real world website, there would be many images and html pages. In order to manage effectively, you may like to keep the images and html pages in separate folder. Create a folder “Lab3” in the D drive. Now create two separate folders “images” and “webpage” in a “Lab3” folder. Put some images in the “images” folder and some html page in the “webpage” folder. Try linking the images in the “images” folder from the html page in the “webpage” folder. The hint is to use double dots as follows.

imgsrc="../image2.j pg" alt="This is a picture" height="406" width="560">sssss</img

Links

Create two pages Test1.html and Test2.html. Now add a link in the Test2.html that links to the Test1.html page. Next, explore the use of target attribute in the <a> tag by using the following code.

Further lists

It is possible to configure ordered lists, for example instead of numbering the list to use lower case letters (i.e. a., b., … ) or Roman numerals (i.e. I, II, …). Investigate this and then add such lists to your webpage.

Validation

It is possible (in fact it is quite commonplace) to write incorrect html that can still be rendered adequately by a web browser.

You can check the quality and correctness of html automatically using the following website Check the html that *you* have written.

2015-2016, Term 1, Computer Concepts

[1] See