HTML+Websites

 media type="youtube" key="cUWzRdxD6sM" width="560" height="315"   media type="youtube" key="elaR3WhguVk" width="560" height="315"  __**Project plan** - Click here and save it to your ICT Folder__
 * || __ **Final Project - Project Time 5 weeks inclusive of HW** __

__**Project Mark Sheet** - Click here and save it To your ICT Folder__

__**Useful links**__

__ HTML BASICS __ codecademy.com Html - W3 schools

video (make sure both the CSS and HTML files are in the same folder!)  __**Layout your site Support**__

__ HTML Div Tag and Table LAYOUTS __

//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) ||

A good starting point to learn languages is HTML, then CSS then Javascript (year9)

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. What makes webpages pretty? That's CSS—**Cascading Style Sheets**. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS later __Glossary CSS - Click here __
 * __Glossary HTML- Click here __

__ http://www.codecademy.com __ ||  ||

__**Lesson 1-3**__

You have 3 lessons to complete the "make a website" tutorial on Code Academy ( here )

What's App sold for $19 billion, you think they did 1 hour a week! Mark Zuckerberg, Bill Gates & Steve Jobs didnt only do 1 hour per week on coding!

__**Lesson 4**__ We are now going to start working on our own website.

- Click here and save it to your ICT Folder || Project Mark Sheet - Click here and save it To your ICT Folder || **Useful links**
 * Project plan

codecademy.com Html - W3 schools

Layout your site Support

HTML Div Tag and Table LAYOUTS

//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)

Linking CSS to your HTML video (make sure both the CSS and HTML files are in the same folder!)  ||


 * = **Step 1.**

Design your site. Include detail:
 * Styles.
 * Pages.
 * Tags (elements)
 * Colours,
 * areas for images / videos wtc.Example basic design ( here ) ||= **Step 2**.

What are you going to do when You can evidence this in a document example
 * Plan yoyr time.**


 * Remember**: you have 5 lessons to complete this. ||= **Step 3.**

Conduct an interview with your target audience using appropriate questions (you need to record the evidence of your survey and submit it to your blog) Tip: Googel forms may be useful to you

You may need to modify yourdesign based on the feedback of your survey Tip: if your target audience hates pink for example you may need to modify / change your design ||
 * Step 4Start to build your website.

//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) ||  ||   ||

**Homework lesson 4.** Ensure at least an image of your paper based plan is on your blog. Those of you who are wanting a higher level :  submit an image of your paper based plan to your blog with evidence of your time planning and a summary of your survey / research findings. 


 * TIPS AND HINTS**

Here is a HTML simple Site (source: w3 Schools)


 * Linking CSS to your HTML video (make sure both the CSS and HTML files are in the same folder!)

=HTML Tables = Creating a homepage without tables

Use float to create a homepage with a header, footer, left content and main content. || = =

Creating a horizontal menu

Use float with a list of hyperlinks to create a horizontal menu.

Create pages using Bootstrap (more advanced though prodessional looking) Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. || Useful Files 

 <span style="background-color: #eeeeee; color: #666666; display: block; font-family: Aldrich,sans-serif; font-size: 13.3333330154419px;"> <span style="background-color: #eeeeee; color: #666666; display: block; font-family: Aldrich,sans-serif; font-size: 13.3333330154419px;"> <span style="background-color: #eeeeee; color: #666666; display: block; font-family: Aldrich,sans-serif; font-size: 13.3333330154419px;"> <span style="background-color: #eeeeee; color: #666666; display: block; font-family: Aldrich,sans-serif; font-size: 13.3333330154419px;">