March 6, 2013

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 (Link on W3Schools for CSS in HTML)
Insert an image in HTML (Link to W3Schools on Inserting Images)
Insert a table in HTML (Link to W3Schools on Inserting a Table)
Creating a list with HTML (Link to W3Schools on Creating a List)

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

More information on CSS stylesheets: W3Schools-CSS

TASK:

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.
Create a Head section in the HTML document that links to your stylesheet called Heine
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”>

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:

Example with alternate text: <img src=”http://www.w3schools.com/images/boat.gif” alt=”The Boat”>

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: