ICS2O
Introduction to Computer Studies - Grade 10
Embedded Files
Overview | Computing basics | [HTML] | [smallBASIC] | [Python] |Construct | ActionScript | GameMaker | Kodu | Summative
Introduction to programming
Introduction to programming
Computer programming is the process of designing, writing, testing, debugging / troubleshooting, and maintaining the source code of computer programs.
HTML
HTML
Is the predominant markup language for web pages. It is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. A typical element consists of an opening tag, some content, and an ending tag. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.
A quick-list for basic tags
A quick-list for basic tags
Bookmark W3Schools
Bookmark W3Schools
HTML BASIC DOCUMENT
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
HEADING ELEMENTS
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
TEXT ELEMENTS
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>
LOGICAL STYLES
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
PHYSICAL STYLES
<b>This text is bold</b>
<i>This text is italic</i>
LINKS
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
UNORDERED LISTS
<ul>
<li>Item</li>
<li>Item</li>
</ul>
ORDERED LISTS
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
DEFINITION LISTS
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
TABLES
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
FRAMES
<frameset cols="25%,75%">
<frame src="page1.htm" />
<frame src="page2.htm" />
</frameset>
FORMS
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
Entities
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Assignment #3 - HTML Development
Assignment #3 - HTML Development
We are going to use Code Academy as a guide for beginner programming. It is the perfect visual language to begin programming in since results of the code are instantly visible and easily debuggable.
We are going to follow the Code Academy's HTML5 tutorial. To do so you will need create a free account here:
Step 1: Create an account with the Code Academy (you can use your school gmail address for that and link directly to the Code Academy to bypass filling out any forms).
Step 2: Run through the Code Academy's website development lessons 1-14. This should take you 2 -3 classes.
Step 3: Take a screen capture for the last 2 steps paste it into a google doc and upload that to Google Classroom for completion of Asst#2. If you already know how to code HTML you can "skip" to lesson 14 and screen cap it. We're using the honour system and when you go to make your website I'll know if you understand how to code or not.
Assignment #4 - Build a small website
Assignment #4 - Build a small website
You are to take the knowledge gained in the tutorial above and build yourself a small website using Notepad++. To enhance your website you can include CSS (great info about CSS here).
To meet my expectation your website should have a minimum of TWO PAGES:
- to MEET expectations you don't have to use CSS
- to EXCEED expectations it is likely you will have to use CSS
You must have at minimum:
1) a main page that has a set of important links you use on a regular basis. Links to our course page, google classroom, references to HTML code sites/tutorials, references to SmallBasic websites/tutorials and references to Python websites/tutorials
2) a second page that has an ordered list of games you've played in the past year including a rank of their "fun factor" (in your opinion)
Google Sites
Report abuse