4. Holiday Card

It is that time of year again. As you are learning to code, we are going to go all virtual and create a snow scene card with virtual snow and some other stuff that falls out of the sky.

The code is hosted on Github which is cool because you can either download the code as a zip file and unzip the files to a folder on your PC or alternatively you can 'Clone in Desktop' which is a fancy way of downloading a copy of the files to a folder on your desktop. The buttons to do all this are on the bottom right once you open my github site.

A wiki has also been created on Github to explain the code. A wiki is a type of content management system, a little like a blog. If you have a Github account, you can comment on the text.

The Holiday Card includes HTML, CSS and Javascript.

There are a few new concepts:

1. jQuery is a JavaScript library and is very popular. Remember JavaScript is the most popular programming language in the world and is used to manipulate webpages which consist of HTML and CSS. Many programming languages contain libraries which are generally files with code that is already prepared and contain a small number of functions that do a task very well. In this example, I am going to use a library to make snow fall. You will still have control over the size of the snow flakes, the speed they fall and even the look of the snowflakes if you wish.
2. Previously we included all our code in a single HTML file. This is ok when we only have one HTML file. If we have 2 or more HTML files, then we want to share the CSS and JavaScript code with other HTML files. We will use special code to link the CSS and JavaScript files into our HTML files.
3. We are going to put CSS files in a css folder, JavaScript files in a scripts folder and images in an images folder. Why? As your websites get bigger, it is neater to put the files into folders rather than have them all in one folder.
4. A jQuery click event is used to allow some code to happen when a button is clicked.
5. if, if else and else code is used which is a conditional statement and is used to check if the selected snow is light, medium or heavy.
6. Bootstrap is a front end framework. What this means is that it makes it easier to create nice looking front end elements such as buttons, images, text boxes, text, etc. In this example, I am using it to style the buttons which change the size and speed of snow.
7. We are using png image files. We have used jpg files previously which are very popular on the internet as they are compressed to be very small in size. png files are very similar but have one advantage - they can include transparency which is very useful for snowflakes as it allows some parts of the image to be transparent allowing the background to come through.

The code is a full working version of what was done in class. Notes have been added to most lines of code. Once the notes are formatted correctly as shown below, they have no affect on the code and are very useful when someone else wants to understand your code or if you haven't looked at your code for a couple of years and have forgotten how an application worked.

Notes in the HTML code look like this:
<!-- The background image -->

Notes in the JavaScript code look like this:
// apply the new settings for flakecount and maxspeed

Notes in css style sheets look like this:
/* Set to fill the full width of the screen */

I have included some additional png files in the images folder. Try changing the snowflake.png for one of the other images. Try twix.png or pikachu.png.

$(document).snowfall({ image: "images/flake.png", minSize: 10, maxSize: 80, flakeCount : flakecount, minSpeed: 1, maxSpeed : maxspeed, collection : "#base"  });

Don't be afraid to play around with the size and speed of the images in the snowfall. Try changing the minSize to 2 or the maxSize to 50 and see what happens.

In the next class, we will add more buttons to control the minimum and maximum size of the flakes and also add controls to interactively change the snowflake image without having to hard code it each time.

You can find more information on the css and javascript libraries included in this example from the following links:
jQuery
Bootstrap
jQuery Snowfall


Remember, while finishing projects is great, learning to code is better. Don't be afraid to play around with the code.

Happy coding.

Michael

3. Lists and Introduction to Javascript

Lists

There are 2 types of lists:

1. Unordered lists
2. Ordered Lists

There is a third called Descriptive Lists which are a little different to the above which I won't cover here.

Unordered lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles).

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

• Coffee
• Tea
• Milk

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers.

<ol>
  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>
</ol>

1. Coffee
2. Tea
3. Milk

Remember to place the above HTML code inside the <body></body> tags.

Styling Lists

By default, unordered lists use black dots and ordered lists used numbers starting at 1. There are many other types. Try the following styles:

<style>

ul {

   list-style-type: square;
}

ol {
    list-style-type: upper-roman;
}
</style>

Remember the style tag is in the head.

A full list of styles is available at http://www.w3schools.com/cssref/pr_list-style-type.asp

Introduction to JavaScript

JavaScript is the programming language of the web.

You could write a web page completely in JavaScript rather than HTML and CSS but it would be difficult to read and change. JavaScript is better at creating small parts of web elements and better still at manipulating HTML and CSS.

JavaScript is typically written in a file with a .js ending. For example dostuff.js. This file is then linked into the HTML page. For now we will do some simple inline scripts to help understand how it works. Inline means that the javascript is placed inside the HTML code.

Place the following code inside the <body><body> tags.

Example

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo">time</p>

Explanation

This will place a button on your web page. When you click the button, the onclick event happens. This fires the following JavaScript code:

document.getElementById('demo').innerHTML = Date()

Date() is JavaScript for the current date and time on your PC.

document is the web page document

getElementByID is a function of Document which gets an element on a web page or web document. It requires a element id which should be placed inside brackets and single quotes. The above example will get the first HTML element that has an id of demo. Notice the <p> tag below the button has an id of demo.

The innerHTML of the <p> tag is set to time when the page loads. When the button is clicked, it will be replaced with the current value for Date()

The result should be similar to below:

Fri Nov 14 2014 21:52:29 GMT+0000 (GMT Standard Time)



Well done. back to nice pictures and graphics next time with a little bit of JavaScript to spice it up a little bit.

Happy coding.

Michael

2. Hyperlinks

Hyperlinks are created using the <a></a> tag. Like the <img> tag, the hyperlink tag will an attribute. The attribute in this case is named href which will contain and the value will be a URL. href is short for hyperlink reference and URL is an acronym for Uniform Resource Locator.

Inside the opening and closing tag, you will place the text. This is the text that appears in the browser and can be anything you like.

External Links

If you want to link to a web page that is not a page in your web site, the syntax is:

<a href="http://www.google.ie">Google</a>

External links generally begin with http://www. Some sites like banks encrypt the messages passed to the website, they begin with https://www. You will notice a green padlock beside the web page URL at the top for encrypted sites. Encryption is very important for websites that deal with money or your personal details. If a hacker intercepts an encrypted message, it will take them a very very long time to un-ravel it.

http link (without padlock)

https link (with padlock)

Internal Links

If you want to link to another page on your website, you only need to include the file name:

<a href="page2.html">Page 2</a>

Open Link in a new Tab

If you want the page to be opened in a separate tab, add the attribute target and set the value to _blank:

<a href="http://www.google.ie" target="_blank">Google</a>

Wrapping hyperlinks around images

The above examples wrap the hyperlink around plain text. Hyperlinks can be wrapped around other tags and a common use is to wrap hyperlinks around images which will allow the user to click on an image and be redirected to another page or website.

<a href="page2.html" title="Click to see a flower">

<img src="flower.jpg" alt="flower"></a>

I have also snuck in a new attribute into the hyperlink tag named title. Title can be used on a number of tags. Notice that when you hold the mouse over the image with the hyperlink on your webpage that the title is displayed. If the image did not include a hyperlink, you could have included the title in the image tag:
<img src="images/flower.jpg" alt="flower" title="A pretty flower">

You can include the title on both the image and the hyperlink tag. The title on the outermost tag which is the hyperlink tag will only be used.

Hyperlinks can be wrapped around other tags. Try wrapping it around the h1 or p tags.

CSS

Like other HTML tags, the styling of hyperlinks can be controlled using css styling.
The following example makes all hyperlinks a red colour:

a {

    color: #FF0000;

}

Notice when you hover over hyperlinks in your webpage that they change colour. Also when you click on a link it changes colour to remind you that you have already clicked on the link. This is what is referred to as the state of the link. 

The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

You can change these colours using the following examples:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Color is just one attribute of hyperlinks, try some others. The text-decoration property is mostly used to remove underlines from links and the background-color changes the background colour.

a:link {
    color: #FF0000;

    text-decoration: none;

    background-color: #B2FF99;
}

a:visited {
    color: #00FF00;

    text-decoration: none;

       background-color: #FFFF85;
}

a:hover {
    color: #FF00FF;

    text-decoration: underline;

        background-color: #FF704D;
}

a:active {
    color: #0000FF;

    text-decoration: underline;

        background-color: #FF704D;
}

1. Introduction to HTML and CSS

HTML

HyperText Markup Language (HTML) is the standard markup language used to create web pages or more specifically the content in webpages. The latest version is HTML 5.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> HTML tags most commonly come in pairs like <h1> and </h1> although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).

HTML: Page Structure

All webpages contain an opening and closing html tag which are at the top and bottom of the page. Note closing tags include a forward slash / after the angle bracket.

All webpages also include head and body tags, again an opening and closing tag. Inside the body tag is the content you will see. The head tag contains content that you won’t see in a browser but will do some stuff like inform other computers what your webpage is about.

<html>

            <head>

            </head>

<body>

</body>

</html>

The head and body tags are indented or tabbed inside the html tag. Your webpage will work without these indents or tabs, however when you have a lot of tags, they will help you check if tags have matching closing tags also make you code easier to read.

HTML: Content in the <head> tag

The title is an example of content in the head tag. This title will not appear on the content of your webpage. The title is used by the browser which often shows the title on the tab for each page open in the browser. Search Engines such as Google use the title when displaying search results.

            <head>

<title>Glasnevin National School</title>

            </head>

HTML: Content in the <body> tag

Headings

HTML contains numerous tags to help you create content.

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<body>

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

</body>

You can use one or more of these headings. <h1>is often bigger than <h6> and the other tags are a size between these. Search engines will look for headings as being important text headings on a website and they will place more importance on a <h1> heading than a <h6> heading.

Paragraphs

The HTML <p> element defines a paragraph.

<body>

<p>This is a paragraph</p>
<p>This is another paragraph</p>

</body>

All text inside a <p> tag will be displayed on a single line. If the line is wider than the browser, the text will flow onto a second line. Just like writing, if you want to force the browser to create another paragraph, you need to tell the browser that you want to do this by creating another paragraph of <p> tag for additional content. There is no limit to the amount of content in <p> tags, it can include a few words or a book. A book would not be very interesting to read in a single paragraph though.

Images

In HTML, images are defined with the <img> tag.

The <img> tag is a bit special though. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute defines the url (web address) of the image:

<img src="url" alt="some_text">

Example:

<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >

HTML: Putting it all together

<html>

            <head>

<title>Glasnevin National School</title>

            </head>

<body>

<h1>Interesting places to visit nearby</h1>

<h2>Cemeteries</h2>

<p>Due to the meticulous record keeping of Glasnevin Trust since 1828, Glasnevin Museum can help you find your relatives, family history or discover more about the stories of the people buried in Glasnevin Trust Cemeteries.</p>

<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >

</body>

</html>

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML. CSS can control elements such as layout, colour and font styles. Although HTML and CSS are different languages, they have grown up together and are very complimentary languages.

CSS content is placed inside a <style> tag which is inside the <head> tag.

<head>

<style>

 </style>

            </head>

Although CSS can be placed in a separate file to the HTML code, for now, as we are learning CSS and using only one HTML page, we will place the CSS styling inside the <style> tag.

CSS: Syntax

Syntax is a term used to describe the structure of a coding language. HTML uses angle brackets, CSS doesn’t. Angle brackets are therefore a syntax of HTML.

If you don’t include CSS styling, the browser will use default styles. Most browsers apply a similar style with subtle differences. Without CSS styling, websites would all look the same which would make the internet a very dull place indeed.

There are a few ways to style content in CSS. One way is to declare a different style for each of the tags. For example we can style all <h1> tags to be white and <h2> tags to be red. We could also set the back-ground colour of the <body> tag to be black.

CSS: Properties and their Values

Inside the style tag, type the name of a HTML tag you wish to style. This is called the selector. In this example, we are selecting the HTML tags to style.

Then create open and closed curly braces. Inside the braces, you will create one or more properties and values for those properties. This will always be in the format:

Selector {Property: Value;}

Examples:

h1 {color:red;}

p {color:white;}

Note: color is spelled without a u which is the American way. Most coding languages originated in the US. You will get an error if you use colour.

The properties and their values are from a defined list so you cannot make up your own. The list is very extensive however. You can find them at http://www.w3schools.com/cssref/default.asp

Remember, when choosing colours, CSS only contains a limited list of colours which have English names. The remaining colours use numbers prefixed by a hash tag e.g. #FF99CC is a light pink. A full range of colours is available at http://www.w3schools.com/tags/ref_colorpicker.asp.

The best way to learn is to play around with the properties and the values. Remember to refresh the browser to see your changes.

CSS: Example

The following example contains both HTML and CSS code. The CSS code is within the <style> </style> tags.

<html>

<head>

<title>Glasnevin National School</title>

<style>

                                                body {background-color:black;}

h1 {color:white; text-align:center; font-weight:800; }

h2 {color:#FF99CC; text-align:left; font-weight:600; }

p {color:white;}

img {width:200px; float:right;}

 </style>

            </head>

<body>

<h1>Interesting places to visit nearby</h1>

<h2>Cemeteries</h2>

<p>Due to the meticulous record keeping of Glasnevin Trust since 1828, Glasnevin Museum can help you find your relatives, family history or discover more about the stories of the people buried in Glasnevin Trust Cemeteries.</p>

<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >

</body>

</html>