EDSS – Class 4

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class 2     Class 3     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will learn about XML.

Today’s Class

Use the XML section on W3Schools and/or Tizag to 1.research and 2.document the points below.

Please document your XML research by  answering all questions in the document:>Class 4 – XML Documentation. Upload the completed document to MyKangan!

List of Questions/ Tasks

These questions can be found in the attached Word File.

  1. For what purpose was XML created?  Link: W3Schools – Home
  2. List some of the uses and benefits of XML!  Link: W3Schools – How canXML be used?
  3. XML documents are quite sensitive and the syntax (arrangement of words) must be followed exactly.
    Describe XML syntax:  what does it need to include and what is the structure?  Link:W3Schools – XML Tree Link:W3Schools – Syntax Rules
  4. What is an XML element and what may it contain? Link: W3Schools – XML Elements
  5. What are attributes? Give an example of the syntax (how it is used in XML). Link: W3Schools – XML Attributes
  6. What advice is given in regards to using attributes and elements in XML? What does the writer say about storing meta data and  storing data? Link:W3Schools – XML Attributes
  7. Define ‘Well Formed’ XML document and paste the example supplied on W3Schools! Link: W3Schools – Validation
  8. Define ‘Valid’ XML document and paste the example supplied on W3Schools! (Use previous link)
  9. What is the difference between a Well Formed and a Valid XML document?  (Use previous link)
  10. What does DTD stand for? What is its purpose? Paste the example of a DTD used on W3Schools.  Link: W3Schools – Validation    Link: W3Schools –Introduction to DTD
  11. W3Schools has a validator for XML. What does a validator do? Find other online or downloadable validators and provide links. Link:W3Schools -Validator
  12. View how CSS can be used to display XML. Explain what the CSS does by using an element and describing the outcome. Use the code provided at the link and a screen shot of the outcome. Link:W3Schools – XML with CSS
  13. What is XSLT? What does it do? Link:W3Schools – XML and XLST
  14. Imagine that you have an online shop and you need to adjust the prices. Use the supplied link and adjust the prices as this: Belgian Waffles:$ 4.95, Strawberry Belgian Waffles:$ 8.95, Berry-Belgian Waffles (SPECIAL):$ 7.95, French Toast $5,95, Homestyle Breakfast – $8.95
    Insert the XML code in the blue box! Link:W3Schools – TryIt Editor XML/CSS

W3Schools > We will use W3Schools when learning about the Markup languages.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

EDSS – Class 3

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class2     Class4     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will do more JavaScript research by using W3Schools:

Read up on HTML on W3Schools

Read up on JavaScript on W3Schools

JavaScript - F.Viola

JavaScript – F.Viola

Today’s Class

Use the JavaScript section on W3Schools to 1.research and 2.document the points below.

You can document your research and definitions in a Word document. Use this template >JavaScript Documentation2  or create your own!

  • Describe what a Variable is in JavaScript terms. Give an example when you could use a variable.
  • Define Data Types in JavaScript! W3Schools refers to 7 Data Types.
  • Define Objects in JavaScript!
  • What are Comparisons and what are they used for!
  • What are Functions and what do they do?
  • Describe Loops!
  • What types of Loops are there and what are they used for?
  • Research examples for JavaScript use! List a 10+ uses and describe what the JavaScript does. >30 Brilliant Examples of JavaScript Use
  • What is JQuery and what does it do?
  • Try a JQuery Effect in the TryIt Editor, eg jQuery slideToggle(). Change some elements, eg text. Describe what it does. Do you like it?

W3Schools > We will use W3Schools when learning about the Markup languages.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

EDSS – Class 2

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class 3     Class4     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

XML is a central aspect of this class. We will use W3Schools to learn XML.

XML is connected to HTML and JavaScript. You need to learn the basics of both:

Read up on HTML on W3Schools

Read up on JavaScript on W3Schools

Today’s class is about JavaScript.

JavaScript - F.Viola

JavaScript – F.Viola

Today’s Class

Use the JavaScript section on W3Schools to 1.research and 2.document the points below.

You can document your research and definitions in a Word document. Use this template > JavaScript Documentation  or create your own!

  • Definition for JavaScript, including the purpose and context of other Markup Languages
  • Definition HTML DOM and example of a HTML DOM tree found on W3Schools
  • Can JavaScript be inserted into the Head or Body section of an HTML document?
  • How is JavaScript inserted into HTML?
  • Give an example of a Script Tag
  • What file extension will you need for an external JavaScript file?
  • Do external JavaScript files use <script> tags?
  • Write document output: Look at this example on the TryIt Editor and  change the Script so that it writes the <h1> and not the <p> content, change the <p> to HTML.
  • What is a JavaScript statement? Define and give an example!
  • How do you separate statements?
  • Is JavaScript case sensitive?
  • Write document output 2: Look at this example on the TryIt Editor and  change the Script so that JavaScript creates the <h1> Good Morning and an additional <h2> What I love? while HTML is responsible for <p>The smell of coffee.
  • The For Loop: Use the example provided for cars on the TryIt Editor and change it to write 6 brands of chocolate. Make sure to change the string (or text value=cars to something more appropriate).
  • Data Types – define: dynamic (data) types, JavaScript Strings, JavaScript Numbers, JavaScript Booleans, JavaScript Arrays, JavaScript Objects.

W3Schools > We will use W3Schools when learning about the Markup languages.

EDSS (Extensible Document and Style Sheet) – Class 1

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class2     Class 3     Class4     Class 5

Welcome to your first class of EDSS, which is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D).

This class is a cluster of the two units, that will be delivered together.

Create an Extensible Document

… requires the individual to create an extensible markup language (XML/PPML)
document for content publishing that is well-formed, free of errors, meets the needs of the
business and is extensible to meet future business needs.

In more detail, you will learn to:

  1. Define document structure
    > details required for the job are checked and confirmed against the job specifications
    > mark-up language version and the character encoding used in the document (or declaration statement) are defined and/or inserted in the document
    > an external or internal Document Type Definition (DTD) or mark-up language schema is chosen and correctly wrapped and referenced depending on project requirements
    > root element is correctly defined and all elements are accurately nested
    > attribute types and default values are declared, where necessary
    > occurrences of elements are stated and elements of mixed content declared
  2. Confirm validity
    > start and end tags are included and closed to ensure no element errors
    > namespaces are used to resolve name conflicts
    > the document is well-formed, error-free and conforms to the mark-up language syntax rules
    > the document conforms to the rules of a Document Type Definition (DTD) or the mark-up language schema
  3. Finalise and test document
    > character data (CDATA) sections are added to the document structure
    > the final document is viewed with a mark-up language parser
    > the mark-up language document is well-formed, free of errors and meets the needs of the business
    > the document is linked to an extensible style sheet and template and tested
    > the document is extensible to meet future business needs

Create an Extensible Style Sheet

… requires the individual to create extensible style sheets for electronic publishing or online documents including computer screens and handheld devices.

In more detail, you will learn to:

  1. Prepare the source document:
    > by validating it as free of errors,
    > by confirming the style and transformation requirements of the source document,
    > by confirming the required advanced styling requirements,
    >
    by confirming the different media, display formats and target audience
    > preferred platforms and abilities
    > by preparing the source document for the style sheet
  2. Create the style sheet:
    > design multiple templates and apply them to the style
    sheet
    > use the required presentation styles
    > incorporate transformation requirements into several style sheets
    > link or associate the style sheet with the source document
    > test the link
  3. Test the style sheet:
    > validate style sheets are to ensure correct presentation and transformation
    > update the style sheet is if errors occur and validate again
    > link the style sheet to a data-store and to a digital template and test
    > make the style sheet extensible to meet future business needs

Assessments:

There will be 2 assignments, for each you will have to

  • create an extensible mark-up language document, that is well formed, free of errors, meet the needs of the business and is extensible to meet future business needs.
  • create extensible style sheets for online documents or electronic publishing
  • create a testing method (eg a flow chart).

Direct questioning and in-class participation will be included as a form of validation. If you participate well in class it will make it easier for me to mark you as competent.

In-class Task:

Research the acronyms below! You can present your findings as a table.

  1. What does the acronym stands for?
  2. What does it mean, or do or what is the function?
  3. Find an example of coding or document structure and copy or screen print it!

HTML XML PPML SGML CSS XSL PRISM DSSSL

For in-class discussion and submit your document on MyKangan (available by next class).

W3Schools > We will use W3Schools when learning about the Markup languages.

HTML Class 6

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.

HTML Class 4

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

HTML Class 3

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