Tasks
Do all the tasks outlined below. Please put task numbers into your blog with your answers.
1) Create a blog in Blogger. Put the URL link for the blog in our class wiki in Moodle.
2) Add a post with a 100 word description about you. A picture too that represents you is required.
3) Take a screen shot of one of your Adobe Muse tree diagrams. Put into your blog.
4) Find two web sites about the history of the internet. Take a screen shot of each one and a sentence about what new fact you learned in each site.
5) The first popular browser was Mosaic. Find out when it was introduced and put a screen shot of a Mosaic page in your blog.
6) Put a screen shot of the main wix page and include a link to it.
7) Find a site that lists popular web builder apps. Put a link to it.
8) Check out two other sites that look interesting besides wix that build websites. Say what you like about each one and put a screen shot related to each one.
9) Do the first lab in Moodle assessments, Lab 1. Put your responses in your blog but make sure you put number 9 plus "lab 1" somewhere at the top.
10. What does this do: <p> Hello world! </p>
11. Copy this in to Notepad or TextWrangler and run it through a browser.
<html>
<head>
<title>My First Page</title>
</head>
</html>
Where does the text "My First Page" appear?
12. Same as 11 but this time, change the text to your name. Put your full HTML program into your blog.
13. Go to this page( http://www.w3schools.com/html/html_examples.asp) and run the example called "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.
14. Same as 13, but this time run the HTML headings script.
15. Same as 13, but this time run the HTML paragraphs script.
11. Copy this in to Notepad or TextWrangler and run it through a browser.
<html>
<head>
<title>My First Page</title>
</head>
</html>
Where does the text "My First Page" appear?
12. Same as 11 but this time, change the text to your name. Put your full HTML program into your blog.
13. Go to this page( http://www.w3schools.com/html/html_examples.asp) and run the example called "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.
14. Same as 13, but this time run the HTML headings script.
15. Same as 13, but this time run the HTML paragraphs script.
16 Write a short web page with two different headings, a link, two paragraphs and an image.
17. Do the exercise at the the bottom of the attributes page in w3 schools. Check out the answers in each of the five exercise and copy the correct HTML code into your blog with a small change to the code given. Comment on what change you have made. For instance say <!-- I changed the name of the picture. -->
18. 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.
19. Write a simple script that includes the following tags : underline, italics and bold.
20. Write an HTML script that uses all the header tags <h1>, <h2>, ..., <h6>. What happens when you try <h8> and <h0>?
21. Write a script that will link to wikipedia's Dunedin page.
22. Links. Do the exercises on the bottom of this page and do some changes like above.
23. Write a small web page called Dunedin's Octagon. Put in a nice heading, some text and three pictures. All pictures should be in the same folder as the main HTML file.
24. Do the same as above but this time store your pictures in a different place and have at least one on an external site that your refer to via a URL.
25. Write a small web page with pictures of the University Oval, the Black Caps cricket team and the English cricket team. Each picture should have a caption and a different border. Put at least three different headings in your page and give it a title in the <head> section. Use at least one <br> and one <hr> too.
26. Go to the web site giphy and find an animated gif of your favourite animal. Put it into a page with a suitable heading and some text.
26.1 Image as a link. Put into a little web page a picture of the Ocatgon in the middle of Dunedin. When you click on the image it will take you to the DCC website. Tell the user to click the picture to get the website and put a suitable heading on the page too.
26.2 Find a small smiley face picture and show it on a small webpage floated to the left and then floated to the right. Insert your code into your blog as well as the screen shot of your floated smiley faces.
27. CSS. Change the introductory program in the CSS section here to have the background, text, font and text colours a different colour. Tke a screen shot of the page and also list your code.
28. Do the CSS exercises on this page in the usual way by looking at the answers and making a small commented change. Show your code in your blog.
29. Find three particularly bad web sites. Take a screen shot of each one and say why you thinks they are bad.
30. Think of three main rules to follow when you are designing a good web site. Write them in your blog and say which rule is the most important.
31) Image maps: 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.
32) Same as above but this time your click should take you to the appropriate Wikipedia page. Code in blog.
33) Use a picture of the Otago Polytechnic campus to output a little message or go to a relevant website when you click on three different buildings.
32) Same as above but this time your click should take you to the appropriate Wikipedia page. Code in blog.
33) Use a picture of the Otago Polytechnic campus to output a little message or go to a relevant website when you click on three different buildings.
34) Write a small web page that has text in it that uses all the following tags:
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
35) Write a small web page that uses all the tags below:
HTML Quotation and Citation Elements
| Tag | Description |
|---|---|
| <abbr> | Defines an abbreviation or acronym |
| <address> | Defines contact information for the author/owner of a document |
| <bdo> | Defines the text direction |
| <blockquote> | Defines a section that is quoted from another source |
| <cite> | Defines the title of a work |
| <q> | Defines a short inline quotation |
37. Styles. Write a small web page that contains each of these tags:
- Use the
styleattribute for styling HTML elements - Use
background-colorfor background color - Use
colorfor text colors - Use
font-familyfor text fonts - Use
font-sizefor text sizes - Use
text-alignfor text alignment
38. Do the exercises at the bottom of the styles page in the usual way.
39. 34) Do these questions from the board on colours:
40. CSS39. 34) Do these questions from the board on colours:
- Use the HTML
styleattribute for inline styling - Use the HTML
<style>element to define internal CSS - Use the HTML
<link>element to refer to an external CSS file - Use the HTML
<head>element to store <style> and <link> elements - Use the CSS
colorproperty for text colors - Use the CSS
font-familyproperty for text fonts - Use the CSS
font-sizeproperty for text sizes - Use the CSS
borderproperty for borders - Use the CSS
paddingproperty for space inside the border - Use the CSS
marginproperty for space outside the border
Use all the above CSS tags in a small web page.
41. Tables. Check out the w3 Schools page on HTML tables. Run any 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.
42. Look at this movie site on some popular movies of 2015. 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?
42. Look at this movie site on some popular movies of 2015. 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?
43. Lists : Do the exercise on the bottom of this page. Do the exercises and make sure you understand all the list elements. Make some small changes and display the changed HTML in your blog with a comment about what you've changed.
44. 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.
45. Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
44. 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.
45. Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
46. Blocks and classes. Do the exercises at the bottom of this page in the usual way.
47. iFrames. Do the exercises at the end of this page and make the usual alterations with a comment.
48. It seems that google, that is https://www.google.com/, is difficult to put into an iFrame. Look out for a comment or forum question on this issue and copy some of the discussion onto a screenshot then onto your blog. You don't have to solve this issue.
49. Find a short video and insert it into your blog using the video icon at the top of the blog page. You don't have to use iframes. Just insert it like inserting an image.
50. Describe how you can insert a You Tube video into an iframe. Hint: use the embed code.
51. Insert a You Tube video about learning Javascript into an iframe.
52. Use three iFrames so you have three You Tube videos running simultaneously.
53. Write a simple web page about the stadium in Dunedin. One picture, a heading and some text is OK.
54. Same as above but this time do an external style sheet to change the background colour, the heading alignment and the <p> tag.
55. Repeat the above but this time just have an internal style sheet.
56. Repeat above but this time have only in-line CSS.
57. Use all the outline tags below to write an announcement about an Ed Sheeran concert coming to Dunedin. Put in a heading, picture and some text. It's the text that will need a variety of outline styles.
All CSS Outline Properties
| Property | Description |
|---|---|
| outline | A shorthand property for setting outline-width, outline-style, and outline-color in one declaration |
| outline-color | Sets the color of an outline |
| outline-offset | Specifies the space between an outline and the edge or border of an element |
| outline-style | Sets the style of an outline |
| outline-width | Sets the width of an outline |
58. Do these box model exercises at the bottom of this page in the usual way.
59. What is the maximum number of characters visible in title tab?
60. Do some research and find a way of putting an image into a title tab. Show a screen shot of your tab and also show that code to get it.
61. Go to this site that produces some interesting lists. Write out the first five items of one of the lists using the CSS style properties for lists including colour, changing the bullet to an image and padding. Show the code and a screen shot of your output.
62. Computer code in HTML. Find a few lines of Python code and write about them in a small web page with a heading, image and a small explanation ofwhat the code does. Show a screenshot of your output and paste in the HTML code that does this.
63. Write a little story about travel to your favourite country with two images and a title. Make sure you use every entity character in the table in this page.
64. PIck ten currencies and write their symbols beside a map or flag of that country. Also write some conversion rate in either $US or $NZ. Find this list here.
65. Write ten interesting maths symbols from this list and say what they mean.
66. Find two Greek words from this page and rewite them using the HTML Greek symbols from this page Give a translation too.
67. CSS Overflow. Do the exercises on the bottom of this page making the usual small, commented changes.
