Respond to these tasks by writing any answers or code into your own blog. Please number your responses so they can be found.
1. Start your blog in Blogger. Write a sentence about yourself, with a graphic that represents you, say, a photo or something that you like. Remember the address of your blog. This is where all the feedback on tasks will be given.
2. What does HTML stand for. Paste in a few lines of HTML.
3. Define Tag, Element and Attribute. Give examples if you can.
4. What does this do: <p> Hello world! </p>
5. Copy this in to Notepad and run it through a browser.
<html>
<head>
<title>My First Page</title>
</head>
</html>
Where does the text "My First Page" appear?
6. Same as 5 but this time, change the text to your name. Put your full HTML program into your blog.
6a. Go to
this page and run the example called "A very simple HTML document" from the HTML basic section. Run their example, think about the tags then alter their script in some interesting way. eg. include your name in the script somewhere. Run your new script and copy the HTML into your blog with a suitable comment.
6b. Same as 6a, but this time run the HTML headings script.
6c. Same as 6a, but this time run the HTML paragraphs script.
6d. How do we wrte comments in HTML?
6e. Why do we write comments?
6f. Run the script called "Insert comments into HTML source code" from the same page as in 6a. Then write your own script with two original comments. Make sure it works. Put the whole script into your blog.
7. Look at
this page and run the "try it yourself" options on the green buttons. Do this for Headings, Paragraphs, Links, Images. Change each of the scripts in some creative way, make sure they work then write the scripts into your blog.
8. Start your talk on an interesting tag by picking one that appeals to you and preparing a two (or more) page PowerPoint. Put your name and tag onto the Wiki in Moodle.
9. Do an Internet search on at least two HTML Editors. Take a screen shot of each editor and write a comment on what people say about it and what you think too.
10. Check out the post in this blog called: "And the best browser is..". Read over the results. A bit surprising to some people. Do you think this is a fair assessment? Does it include all the features important to web users？Did it change your opinion of your most-used browser? Write some sentences that respond to the previous questions in your blog.
11. Blogger is a kind-of HTML editor. Start with a blank post page and switch to HTML. (Fine the botton top left next to Compose.) Write a simple HTML script the puts your name on three different lines and in three different sizes. When you switch back to Compose you should be able to see your result. Capture your HTML script in a screen shot and add to your blog. (A screen shot of Blogger in Blogger sounds a bit Matrix-like?)
12. Write an HTML script that uses all the header tags <h1>, <h2>, ..., <h6>. It also should use three different buttons that output a different alert box for each button.
13. Write 100 words in good English on a how a person can write HTML using Notepad to make it look good in a browser. Pretend they don't know anything, and give good instructions. Make sure spelling is good.
14. Write a HTML script with two different buttons. Put a comment into your code near each button. Make one of your comments a multi-line one.Write a final comment in your script on why we need comments.
15. Look at a blog post above called "What's the main problem with Internet Explorer?". Read over what the author had to say and list three problems he has with IE. Put a link into your response so that readers can click straight to this site. Find a site or a blog on the Internet where someone likes or defends IE. Write three good things they say about it and put a link to one of these sites too.
16. Write a web page on the subject of
Dunedin. It should contain a heading, a picture and some text. Put your files into a folder and zip it up into a single file. Put this file into the assignment drop box in Moodle.
17. Subscript. Write a script that contains the <sub> tag. Also include the chemical formula for amonium phosphate (look it up) , with all the subscripts in the right place.
18. Tables. Check out the w3 Schools page on HTML tables. Run
the three examples on the page then make some interesting changes (words, colours, borders, fonts etc.) and make sure the scripts work. Then copy these scripts into your blog with a comment about what you've changed. Just small changes are OK.
19. Look at
this movie site on some popular movies of 2012. Make a table out of the top five giving the ranking and the number of stars this site awards each movie. Can you also copy out some of the graphics and put them on your page too?
20. Check out
this page of lists. Find a list that interests you and make a web page that includes a table with at least 5 rows and two columns with headings and a caption on the table. Add at least two graphics.
21. Make a web page that is called
Student Life in Dunedin. Give
it a heading, some original text, a table and at least two pictures. It
should contain too at least three different formatting tags.
22. Use the HTML list method to make a list of 6 different HTML tags.
23. Same as 22 but this time use a differnet set of bullets and have at least one nested list.
24. Go to the page of lists in question 20 and use it to create a 10-item list with an appropriate heading and some interesting graphics.
25) Technical Writing. Write 100 words in your blog about your life so far. Call it "My Career So Far ..". Print of a Notepad copy in class and show your teacher. make sure you've got good sentences, spelling and structure. Think about vocabulary and the right tone which should be technical and formal.
26) Repeat 24 above for these topics: My Ideal Job, My family, Favorite Animal. 100 words on each.
The next few tasks involve image maps. You will need to find an image editor that can tell you about your image's pixel coordinates. I used Pixlr, an extension in Chrome but there are others.
27) Check out the image map explanations in w3 schools
here and in quackit
here. Try both examples and make sure you understand what the the script does.Take a screen shot of both of them for your blog.
28) Take the w3 schools planetary example and change it so that there are just two regions: the sun and the planets. Use two rectangles to cut up the picture into two parts. Put the code with comments into your blog.
29) Take the quackit example and change the area around the person to be a circle around his head. Put the code with comments into your blog.
30) Find a good picture of the solar system with all the planets and make your own image map so that clicking on a planet gives a close-up of each planet with its name. Code in blog.
31) Same as 30 but this time your click should take you to the appropriate Wikipedia page. Code in blog.
32) Make an image of the
map of Europe here. Draw an imaginary north-south line through Prague. Everything to the left of this line we will call "West" and everthing to the right of the line we'll call "East". Make an image map so that clicking anywhere will output a box with East or West correctly. One way to do the box is to look at the quackit example that produces "Me" when you click on the person. There are other ways.
33) Repeat 33 so that clicking on France outputs the words "Bonjour, monsieur" and nothing if you click elsewhere. Code in blog.
34) Use four different countries so that when you click on them in the map they say "hello" in their own language. Just like 33 above but for four countries. Code in blog.
35) Do the assignment on an HTML page on a country of your choice. Details are in our Moodle page at the start of the Course Documents section. Output into the associated drop box in Moodle. Maximum of 20MB. Bigger than that? See your teacher.
36) iFrames. Check out the quackit iFrame example
here. Change the code slightly to give a new size, style or effect and put this code into your blog with a comment on what you've changed.
37) Create a web page on a country of your choice that contains three iFrames with slightly different attributes like size or borders. They can be a mixture of web pages and pictures.
38) Character entity references. Check out these pages in
w3 schools and
quackit for information on writing special characters. Then write a short blog post that uses ten of these characters.
39) Div and layouts. Check out the
quackit page on layouts. Run both the scripts mentioned there. There's one that uses a table to format the page and there's one that uses div. Div is more powerful but harder to use. Make some changes to the div version, comment what you've done, perhaps a colour change, and then save your code to your blog.
40) Technical writing task. Take 200 of your own words to describe something technical. It could be a computer or a piece of software or a gadget. Like a little manual. Make sure it sounds ok with good spelling and editing. There will be a test like this during test week.
