Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS
  • Feedback

CSS

Please complete W3Schools.com’s section on HTML Head and CSS and then move to the CSS section on W3Schools: http://www.w3schools.com/css/default.asp. Work your way through the 5 tabs from CSS Home to CSS How To.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Today’s Class

Due to me being sick I would like you to work individually through Google’s SEO Starter Guide.

Google Search Engine Optimisation Starter Guide

Please work through pages 10 – 13 on your own. We will discuss anything in class that you did not understand. The XML file might be new to you.

On paper: try to create a directory or folder structure for your own website. Allow for a similar amount of folders as in the example on page 10. Do not just copy their names, but create folders that apply to a site of your own (use the examples of what we worked on in class or use something like Juanita’s School of Spanish.

Look up the links in SEO Starter Guide.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • Your Progress
  • Online Editors
  • Head
  • CSS
  • Feedback

Your Progress

At this stage you should know what HTML does and stands for. You should be able to create a HTML document, including:

  • doctype declaration,
  • html tag,
  • body tag,
  • different headings,
  • paragraphs,
  • line breaks,
  • lines,
  • hyperlinks and
  • email links.

Let us revisit how to create an e-mail link and do it in the TryIt Editor.

Online Editors

W3Schools editor: Tryit!Editor

Another useful online editor: Real-time HTML editor

The Offline Coder App is a good offline editor available as an app for the I-Pad and I-Phone. You can edit HTML, JavaScript and CSS and view the results in a preview. See the screen shot below:

Screenshot of Offline Coder App for I-Pad and I-Phone.

Screenshot of Offline Coder App for I-Pad and I-Phone.

Head

Today we will learn about the Head element of a HTML document. Click here for Head Instruction on W3Schools.com

The Head element is different to the heading tag in HTML! Be sure not to get them mixed up. At this point it is interesting to notice that the terminology used to describe a HTML document is like the terminology of a human: Head and Body.

This image is comparing HTML structure to a human body. Man in photo from image by August Sander.
This image is comparing HTML structure to a human body. Man in photo from image by August Sander.

CSS

CSS is an integral aspect of the styling in HTML. Follow the in class instructions and the text on CSS on W3Schools.com.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • The Web
    • Web Services
    • What is the Internet?
  • HTML
  • Feedback

The Web

Let us first have a look at this medium, that we seem to know so well. It was  1991 when the World Wide Web became active as a platform for anyone to participate in. It had its origins in military data accessing systems.

Web Services

For the Web to functions it requires a number of Web Technologies. In order to understand what Web Technologies are used for it is important to have a common understanding of web publishing languages such as HTML, CSS, JavaScript or XML.

To view any website on the Internet most people use a web browser. Web browsers work by connecting over the Internet via modem or ISDN (Integrated Services Digital Network) via a server or ISP (Internet Service Provider) to remote machines, asking for a particular document (or page) and then formatting the documents they receive for viewing on a computer.

To allow you to view a web page on your computer, web browsers use a special language called HTTP (HyperText Transfer Protocol). The remote machines containing the documents run HTTP servers. A HTTP server receives a request for a page, and sends it to the computer. The page can then be viewed through the browser.

Each document that is stored on the Web has a particular URL (Uniform Resource Locator). This tells the browser which server to go to to get the document. The syntax of the URL is simple to understand.

The standard for web documents is HTML. HTML is a Mark-up language that uses tags to create all the Web pages. HTML can be used to create formatted text that allows web browsers to make web pages viewable on their screens.

HTTP can also include images, sound, animation and video clips. HTTP weaves together all the relevant elements of the page and describes how it should be represented on your browser. It can also link to other pages or sites on the Web through hyperlinks.

What is the Internet?

So, what is the Internet? I would like to post this as a question to the class.

Let us share our views of what the Internet actually is. What do we see in it, what it is it made up of? What does it symbolise or represent to you?

Please participate in the class discussion before reading on. If you have missed the class and are following the notes online please stop for a moment and think about the question above. You may want to write your responses down before you continue!

Image source: Data Center Knowledge

Image source: Data Center Knowledge

Andrew Blum, a journalist and author of the book ‘Tubes’ explored what the Internet actually is in a physical form. Please use your head phones and view this video from his TED talk in September 2012: Andrew Blum: Inside the physical.

So, has your answer to what the Internet is changed?

HTML

Please follow the in-class instructions:

we will work through W3Schools HTML Sections:

HTML Elements, HTML Attributes, HTML Headings, HTML Paragraphs, HTML Formatting and HTML Links.

Try to create a link to an e-mail, that allows you to send an email automatically to a recipient.

W3Schools Screen

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • Introducing each other
  • Introduction to Delivery Format
  • Introduction to the Content
  • In-class Task

Introducing Each Other

Spend 5 minutes interviewing your colleague and another 5 being interviewed. Next introduce the student to the teacher and other students.

Next think about one thing that you have done that no one else has.

Introduction to Delivery Format

The classes will be delivered in 2 hour schedules. The content will be posted on this blog as well as on MyKangan. Tasks, discussions and research will be conducted inside the 2 hour slot and at home.

Assessments:

Important: You need to submit all your assessments on MyKangan. It is your responsibility to follow up due dates and access to MyKangan.

  1. Day 1 Task – this task is a simple comprehension task to establish student participation. (due: after the first class)
  2. Assessment 1 – Create a HTML based Website

RAE – Research and Exploration or Class of Federico

This blog will be or main form of contact. It will be accessible from anywhere as long as you have internet access.

MyKangan

The unit title for this class will be combined in (the catchy name):

ICP40210-PGA4N2-PRIMU-2013-ICAWEB429A

As you can see, the titles are long and hard to remember. The easiest is to look at the last segment with the unit code and title.

The unit itself will be structured in the same way, that you have classes listed as Class 1, Class 2, etc and assessments will be listed by title inside an assessment folder.

This is also where you will submit your assessments. You will find hyperlinks with names such as Submit Assessment  1 here.

You can send messages to your teacher and you can leave comments as well. I am always open to suggestions, so please feel free to forward ideas about content or software that you would like to cover.

Any questions?

Introduction to Content

These units will be covered:

Please click on the links and follow the in-class discussion.

We will work directly with the help of the W3Schools Site: http://www.w3schools.com/ – Click on the Learn HTML tag to get started on HTML.

In-class Task

Please follow the in-class instructions and complete a HTML file that you will need to e-mail to your teacher and keep a copy. Afterwards upload the file onto MyKangan.

Work through the first four sections on W3Schools:

HTML HOME, HTML Introduction, HTML Editors and HTML Basic.

Create a html file with Notepad that includes:

  • a doctype declaration
  • the correct tags used in html
  • h1 tag with your name
  • p tag with something that you like doing
  • a link to www.dzineblog.com
  • make sure to use correct and valid html code

Write all the code from memory. Feel free to look at the code and then apply it after, but do NOT use Copy and Paste.

Save the file as yourname class1 task.html and use UTC-8 for encoding (this will be available when saving the file).

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

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.

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.

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

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