Programming

= Lesson1 - Why program / code? =

media type="custom" key="24243396"

Work in groups to find answers to the following;

1. What is programming? 2. What can you do with programming skills? 3. Which industries don't make use of programmers? 4. What are some of the best jobs available currently? 5. What skills are necessary to be able to program?

//Add your thoughts to your blogs. Remember to add the correct label.//

= Assessment for this unit =

You will spend a few weeks learning HTML / CSS. You will create a mini-website (minimum 3 pages) which will be assessed. You should, therefore, think carefully about the topic of the site and ensure that it is suitable for submission.

= HTML = HTML stands for **HyperText Markup Language**. **Hypertext** means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext! A **markup language** is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

//**You will need a text editor to write the code. Download and install - you will use this in class.**//

Download Text Wrangler (Mac)

Download Notepad ++ (Windows)

= Classwork for HTML =

We will be using either **text wrangler or notepad ++**for the code writing And this site for the tutorials http://www.w3schools.com/html/html5_intro.asp

= Homeworks for HTML =

You will need to sign up for Code Academy http://www.codecademy.com/sign_in @http://w3schools.com/html/default.asp
 * Make sure that you use your school email address.**

= Week 2 - HTML Tags =

<!DOCTYPE HTML> Setting the Doc Type (eg HTML 5) Different sized headings Paragraph This is a link Adding a link  Inserting an image Line Break Horizontal Line
 * HTML Glossary**




 * Homework: Code Academy HTML Basics**

<!DOCTYPE html> Result YEAH SANDWICHES  I like eggs. And ham! But mostly sandwiches.

= Week 3 - Styling HTML with CSS =

Resource for today's lesson is @http://w3schools.com/html/html_css.asp

1. Inline (using the style attribute in HTML elements) 2. Internal (using the element in the section) 3. External (using an external CSS file) The preferred way is to put CSS syntax in separate CSS files, but for ease, we will use Inline styles.
 * CSS (cascading style sheets)** were introduced together with HTML 4, to provide a better way to style HTML elements. You can add CSS by;

<!DOCTYPE html>  This is a heading This is a paragraph.
 * Background Color Example**

<!DOCTYPE html> A heading A paragraph.
 * Font, Color and Size Example**

<!DOCTYPE html> Center-aligned heading This is a paragraph.
 * Text Alignment**

 body {background-color:yellow;} p {color:blue;}
 * Internal Style Sheet**

= Colors - Hexadecimal Color Values = HTML colors (note US spelling) are defined using a hexadecimal notation for the combination or RGB (Red, Green, Blue). This will allow us to make use of 16 million different colors. A great resource for seeing how different colors work together is colorschemedesigner.com and much of the work for today will be based on the tutorials found at: @http://w3schools.com/html/html_colors.asp


 * Example of an inline style sheet**


 * Task: Using the examples above, add some styling to your index.html file using the inline style method. Later, we will copy the styling across to the other pages you will be creating.**


 * Homework: Continue working through the HTML tutorials on CodeAcademy**

= Example of Layout using Div tags = The div element is a block level element used for grouping HTML elements.

@http://w3schools.com/html/html_layout.asp

<!DOCTYPE html> Main Title of Web Page Menu HTML CSS JavaScript Content goes here Copyright © W3Schools.com

= Week 4 - More HTML tags =

You should continue to develop your **index.html** page and make 2 further pages; **page2.html** & **page3.html** Ensure that the styling on each page is consistent and that all pages link and the user is able to navigate between pages. The information below is a guide, but you should make use of the excellent tutorials found on this site; @http://w3schools.com/html/default.asp = = = Adding Tables = @http://w3schools.com/html/html_tables.asp

Tables are defined with the

=** Using Tables to create Links **=



= Ordered Lists = @http://w3schools.com/html/html_lists.asp

 Coffee Milk</li> </ol> = = = Week 5 - HTML 5 & multimedia =

@http://w3schools.com/html/html5_video.asp

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.


 * Homework: You should spend at least 30 minutes working on your website**

= Week 6 - Hosting your site =

Its best to use dropbox to host. You can set up a dropbox account from here.
 * Step1. Download Dropbox**


 * Step2. After installing, open the dropbox application and select folder view**


 * Step3. Select and copy your My Site folder which contains ALL of your website files (e.g. all html files, images folder etc).**
 * Move the My Site folder inside the public folder**
 * Step4. Once your website folder is inside the public folder, right click on your index.html file and copy public link.**
 * Step5. The link you copied in step4 needs to be added to your blog so that others can see your website.**

Enable public folder link []
 * Problems? Cannot see public folder?**

= Assessment for HTML site =

For me to assess you work, you will need to complete the following:

 * //1. Create a new post in your blog, "HTML" . You can name the title of the page HTML., but remember to add the tag ICT.//**
 * //2. On the HTML post, add the public link from dropbox (index file) so that I can access your website.//**
 * //3. Create a screencast (Mac - quicktime, Windows - screen cast-o-matic). Your screencast should be less than 2 mins and you need to open text wrangler or notepad++ highlighting and explaining the more complex html / css code.//**
 * //4. Once you have completed the screencast - upload the video to your google drive folder.//**
 * //5. Embed the video into your blog - HTML post. For a video tutorial, check the last video on the page (link below)//**
 * //http://sjhobbs.wikispaces.com/Digital+Imaging//**