HTML/CSS
Initially learning will be done using the Khan Academy 

Picture

Khan Academy is a non-profit educational organization created in 2008 by Salman Khan with the goal of creating a set of online tools that help educate students. The organization produces short lessons in the form of videos. Its website also includes supplementary practice exercises and materials for educators. All resources are available free to users of the website (https://en.wikipedia.org/wiki/Khan_Academy).

Join Khan Academy

Use your school email to join Khan Academy.
TASK
Go to the Khan Academy website.
Click Sign up.
Click join with Google.

Note: if you are already a member with your school email just login. The learning leader will invite you to join a class in Khan Academy.

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
​https://en.wikipedia.org/wiki/HTML


Understand the Terminology

Click on the worksheet to link for access.


Intro to HTML/CSS: Making webpages

Click on “Courses”
Choose “Computer Programming”
Click on “Intro to HTML/CSS: Making webpages”
​Click on “Intro to HTML” 

Screen shot of your Computer Poem


​TASK
Using the Snipping Tool get a snip of your computer poem. Save it to your HTML folder. 
Make sure you get the HTML and the result.
See the example.
Screen shot other challenges
​There are three more challenges, take a screen shot as you complete these challenges.

Picture

Adobe Dreamweaver

Repl.it


TASK 
Search for Dreamweaver. 
Click File and then New (or use Ctrl+n).  
Go to your Khan Academy HTML file. Copy all the HTML.  
Select all and paste the copied HTML.  
Click File and then Save As (or use Ctrl+Shift+S).  
Select your HTML folder.  
​Give the HTML file a descriptive file name.
Save with the .html file type (dot html file type).
To run the file: double click on the new html file or open it using ctrl + o for an open window.


TASK 
Type in "repl.it" in a new web browser window. 
Signup to repl.it using Google.
Choose the HTML, CSS, JS language.
Go to your Khan Academy HTML file. Copy all the HTML.
Paste the code into the index.html file (middle panel)
​Run the file using repl by clicking the RUN button.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
​https://en.wikipedia.org/wiki/Cascading_Style_Sheets
HTML/CSS
Read through the text on CSS. Click on the links to find out more.
Open Coggle.it and create a new mind map.
Put HTML/CSS at the centre and create branches describing everything you know or have learnt about HTML and CSS


Intro to CSS: 

Click on “Courses”
Choose “Computer Programming”
Click on “Intro to HTML/CSS: Making webpages”
​Click on “Intro to CSS"
Picture

Screen shot of your Colourful Creature Webpage


​TASK
Using the Snipping Tool get a snip of your colourful creature webpage. Save it to your HTML folder. 
Make sure you get the HTML and the result.
See the example.
Screen shot other challenges
​There are three more challenges, take a screen shot as you complete these challenges.
Picture
Picture

Adobe Dreamweaver


TASK 
Open Dreamweaver. 
Open your "My Poem" file.
Add some CSS to the HTML file. For example "p {color: blue;}" inside style tags will make all text inside the p element 'blue'. 
​Remember to include your style tags <style></style>
Save it as "My Poem1".