HTML, CSS, etc

by on

Link to Class 5     Class 4     …     Class 1

You have by now gained a basic understanding of HTML and CSS.

Screenshot of a Sample Design Gallery - Source: www.addesignlink.com
Screenshot of a Sample Design Gallery – Source: http://www.addesignlink.com

Today you will look at how to:

  • Look at the CSS reference on W3Schools
  • Create a vertical navigation bar
  • Create a horizontal navigation bar
  • Create an image gallery using the div element
  • Your Task: Create a Web page with a horizontal navigation bar and a 6 image gallery

CSS Reference

It is easy to get overwhelmed when applying CSS to HTML.

Take 5 mins to look through this excellent reference: W3Schools CSS Reference

Create a Vertical Navigation Bar

Learn how to create a vertical navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a vertical navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Example for Vertical Navigation from www.graphicblog.net
Example for Vertical Navigation from www.graphicblog.net

Create a Horizontal Navigation Bar

Learn how to create a horizontal navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a horizontal navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Various Designs for a Horizontal Navigation Bar from PSD Graphics
Various Designs for a Horizontal Navigation Bar from PSD Graphics

Create an Image Gallery

Learn how to create an image gallery, but this time use the div element when creating it. Base your images on existing images found on morgueFile.

Instructions on how to create an image gallery with images and image descriptions

TryIt Editor example of a image gallery

Example of a Web Gallery:blogs.adobe.com
Example of a Web Gallery: blogs.adobe.com

Your Task – Assessment

Due: 18/4/2013

Create a Web page with a title, horizontal navigation bar and an image gallery with 6 – 9 images.

Make the buttons active hyperlinks, link them to different posts on this blog. Make the image gallery linked to actual images (use morgueFile) and insert thumbnail images for it as well.

Include a radio button feature. (See last week’s class).

Theme for the web page: Urban Environment (Cityscape)

Create a title for your page (that needs to be used in the head section).

Test your HTML file on the TryIt Editor as well as a pure HTML file on a minimum of 2 browsers.

Submit the HTML file on MyKangan.

Example of morgueFile Image Sourcing

Sourcing an image on morgueFile.com
Sourcing an image on morgueFile.com
Adjust the size of your image manually and click 'Finish'.
Adjust the size of your image manually and click ‘Finish’.

Screen shot 2013-03-21 at 9.39.52 AM

Insert the HTML into the TryIt Editor
Insert the HTML into the TryIt Editor
The cropped image is displayed.
The cropped image is displayed.

by on

Link to Class 6     Class 4     Class 3     …     Class 1

Last week you have created some beautiful web pages for a seaside town. I was very pleased with some of the results. Please still submit your work if you have not already done so.

Check for feedback, a few of you have to add small components that were not yet included.

screen

How to Create Forms in HTML

Discover these HTML elements (use this W3Schools Link) by trying each in the TryIt Editor

  • Input Element (what does it do and how does it work?)
  • Create input text field
  • Create input password field (what are the differences to plain text fields?)
  • Create radio buttons
  • Create checkboxes
  • Create submit button.

Your Task:

Create a form for a student to enroll in a class. Create a minimum of 10 classes to pick from in a drop down list and cover each of the points above.

Include a title for the form in a Sans-Serif font and include a large image (sourced at morgueFile.com) that is related to Learning at an Institute.

See screen shots below regarding how to crop an image in morgueFile and copying the HTML code. The HTML code can be used in your HTML document.

Sourcing an image on morgueFile.com
Sourcing an image on morgueFile.com
Adjust the size of your image manually and click 'Finish'.
Adjust the size of your image manually and click ‘Finish’.

Screen shot 2013-03-21 at 9.39.52 AM

Insert the HTML into the TryIt Editor
Insert the HTML into the TryIt Editor
The cropped image is displayed.
The cropped image is displayed.

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! 🙂

by on

 Link to Class 4    Class 3     Class 1

Welcome to your second class. I don’t know about yourself, but I actually get pretty excited about HTML. Today we will focus on:

  • the use of Cascading Style Sheets – short CSS (W3Schools-CSS)
  • head elements in a HTML file (W3Schools-Head)
  • how to view HTML code of a website
  • use of html code in a blog (example: WordPress)
  • creating a good folder structure in HTML

The last 3 points will be covered in class.

We will again use the W3Schools.com site and their TryIt Editor. We will use the Mac specific TextEdit editor to write the HTML and CSS code.

Please follow the instructions in your Class 2 task sheet below:

HTML Class 02 Task

  • All questions related to the Head section of an HTML file can be researched at W3Schools-Head
  • All questions related to CSS can be researched at W3Schools-CSS

Good folder/file structure is paramount in web design. It is a beginner’s mistake to upload a website with all its content and to find that files do not link, eg images do not load. The link below has a good explanation on folder structure:

Simplify File Structure for Dummies
___

Other useful links:

HTML Dog – this site is a well written and well structured resource with many HTML and CSS tutorials! A must visit!!!