by on

Link to Class 5     Link to Class 3     Class 2     Class 1

Create a simple web page for a small fishing village that would be a beautiful spot to visit.

Photo by dieraecherin on morgueFile
Photo by dieraecherin on morgueFile

Specs for site:

  • Think of a colour scheme that suits the theme of a maritime, small seaside port and apply this colour scheme to the web page
  • Title: name of your town or name of web page in title (how it will be displayed in the title bar of the web browser)
  • Heading: (H1 in Helvetica) This can be an enticing heading or the name of the town and the country (or state)
  • Photo by dieraecherin on morgueFile
    Photo by dieraecherin on morgueFile

    Text: (p in Gill Sans) This is a write up about your little town. Feel free to borrow from the text below based on Apalachicola, Florida and borrowed from a SmarterTravel:
    Name, Country
    Population: 2,231 The Catch: Oysters, shrimp, redfish, mullet
    In its 19-century heyday, this northwestern [name of country] town was the third largest port of the Gulf of [name]. Today more than 900 historical homes and buildings remain. Old net factories and ship chandleries are now trendy shops, restaurants, and galleries; meticulously restored homes are B&Bs. But [name of town] is hardly a polished tourist area like nearby [name] Island. Nearly half of the hardworking locals wear rubber oyster boots around town. They harvest oysters (90% of those sold in [name of country]) by hand with large tongs in small wooden skiffs. Spend an afternoon on the beach, kayaking the Forgotten Coast barrier islands, or at the 1921 Dixie Theatre.  Local Eats: Hole in the Wall Seafood & Raw Bar serve some of the freshest local oysters, and the popular buttermilk pie sells out almost daily. For a table overlooking the [name] River, try Owl Cafe or Boss Oyster.

  • A table of 3 x 3 images (each square 200px x 200px or 250px x 250px) found on morgueFile cropped in morgueFile and transformed into HTML. Copy the HTML code and insert the link to the photo into your HTML file.
  • List of ten reasons to visit the seaside town (make them up and make them fun)
  • Use the TryIt Editor to edit the file and then save your file with TextEdit (or Notepad) as a  HTML with the text set as Plain Text and UTF-8.
  • Test your HTML file with a minimum of 2 browsers
  • Upload your HTML file to MyKangan! ► ICP40210-ICTPGA4N-PRIMU-2013-ICAWEB429A

by on

Link to Class 4   Class 2   Class 1

I am glad to announce that MyKangan is now fully functional. You will still be able to visit the content on this WordPress blog. Above are the links to previous classes.

Photo by clarita on www.morguefile.com
Photo by clarita on http://www.morguefile.com

So, you might feel like you are starting to get a feel for how to use HTML in TextEdit (or NotePad). HTML is reasonably easy as long as you approach it systematically. The content for today’s class is directly related to the chapters in W3Schools HTML Tutorials: HTML CSS, HTML Images, HTML Tables and HTML Lists. You can simply click on the links for each point below.

Always trial your HTML code in the TryIt Editor or even use the Real-time HTML editor (that we looked at in Class 1).

Content for today’s class:

Using External CSS Documents

Work with the W3Schools chapter: HTML CSS

Last week we looked at the three ways to include CSS styles in an HTML document. Today we will just look at external CSS documents (created in a text editor). By now you should be aware of the benefits of using external CSS documents:

  • It is easy and faster to create one CSS stylesheet and having the link to in each HTML document
  • It is faster to change one CSS stylesheet than changing the CSS code in numerous HTML documents

Obviously you have learned in last week’s class that you place a link to an external CSS style sheet into the head of a HTML document:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>

<body>
<h1>The text in this heading is formatted in an external stylesheet called styles.css</h1>
<p>The paragraph text is formatted by the same external stylesheet</p>
</body>

</html>

Please notice the difference between the Head and Body sections of the HTML file. The Head element includes only the link to the CSS stylesheet. Think for a moment and ask yourself what other components you could place in the Head section! (We covered that in last week’s class)

The Body section has all the visible parts of the website. The heading and the paragraph.

A CSS stylesheet uses different brackets:

[NOTE: This is code for an external CSS, created in a text editing program like TextEdit or NotePad and saved as styles.css]

body {background-color:#98FB98;}
h3 {color:#000080; text-align:center;}
p {color:#000080; text-align:center;font-family:”Garamond”; font-size:20px;}

This stylesheet specifies

  • the colour of the background
  • the text colour of the h3 heading
  • a central alignment for the h3 heading
  • the text colour of the paragraph
  • the alignment of the paragraph and
  • the font of the paragraph: Garamond at 20px

Please note that more properties can be added to a line with a semi colon in between, before the closing bracket place a semi colon.
Click on the image to view the syntax (style of writing) of a CSS document on W3Schools:
From W3Schools.com

From W3Schools.com

More information on CSS stylesheets: W3Schools-CSS

TASK:

  1. Please create a HTML document in TextEdit or Notepad for the text of the poem below
    Use h3 for the heading and p for all the other text.
  2. Create a Head section in the HTML document that links to your stylesheet called Heine
  3. Create a CSS document in TextEdit or Notepad called heine.css that has the specs as below

Text of poem:

Why the Roses are so Pale

Oh, dearest, canst thou tell me why
The rose should be so pale?
And why the azure violet
Should wither in the vale?

And why the lark should in the cloud
So sorrowfully sing?
And why from loveliest balsam-buds
A scent of death should spring?

And why the sun upon the mead
So chillingly should frown?
And why the earth should, like a grave,
Be moldering and brown?

And why it is that I myself
So languishing should be?
And why it is, my heart of hearts,
That thou forsakest me?

Poem by Heinrich Heine
(English translation by Richard Garnet)

Specs for CSS document:

Background colour: CCFF66
H3: font: Garamond colour: 330099
P: font:Geneva colour: 3333CC

Inserting an Image in HTML

Work with the W3Schools chapter: HTML Images

This section is looking at how to insert an image into a website.

In HTML you need to use an image tag: <img>

The <img> tag is empty which means that it does not need a closing or end tag. The reason is that you are only inserting one image per <img> tag, so there is no need for an end tag.

After the tag you will need to insert attributes:

  • src: this is the Source attribute, which defines where the browser will find the image to upload. This will be a url (web address) if your HTML, CSS  and image files have been uploaded to the url.
  • Example: <img src=”http://www.w3schools.com/images/boat.gif”&gt;

So, notice that the closing bracket is not placed right after img, but after all the attributes. It is smart to put all your images in an image folder. The example shows that the image is a GIF and it is placed in the images folder. Make sure to specify the path with a forward slash / and always check your spelling. If your images folder is called images and you mistakingly spell:   <img src=”http://www.w3schools.com/image/boat.gif”> the image will not display!

Besides the image you will want to display alternate text. Alternate text will show if the image does not load, the attribute is: alt=”image name”. See the revised example:

Let us also look at the option of you working from your computer. The website has not been uploaded, so it is still sitting on your computer. The reference to the image location is always relative to where you have the HTML file. All this means is if you have your HTML file on your USB in a folder called “HTML class” and your image in a folder called images (inside the HTML class folder) – do you follow?- this would be the src attibute:

  • <img src=”images/boat.gif” alt=”The Boat”>

Inserting a Table in HTML

Work with the W3Schools chapter: HTML Tables

Work through the chapter on how to insert a table. Ensure that you use the correct code.

Create a List in HTML

Work with the W3Schools chapter: HTML Lists

Work through the chapter on how to insert a list.

Task:

Complete the task above and upload to MyKangan.

Thanks! 🙂