Wednesday, August 16, 2017
Monday, July 17, 2017
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.
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.
16 Write a short web page with two different headings, a link, two paragraphs and an image.
17. Do the exercises in the Attributes Page https://www.w3schools.com/html/html_attributes.asp .
Try to do the exercises without looking at the answer. Make a small change to the HTML in the answer and add a comment about what you changed. Put the resulting answers in your blog as 17(a), (b) ..etc.
18 Write an external style sheet that changes the size and colour of both the <h1> and the <p> tags. Test your style sheet with a simple HTML page that links to it. Put both files into your blog.
19. Same as above but this time achieve the same effect with just one HTML file but no css external file.
20. Write a simple HTML page that outputs a greeting and your name with a relevant picture. Use an external css file that formats and colours your page nicely. (See next task.)
21. Same as above but this time use a different external style sheet that does a horrible job with clashing colours and other bad design features.
22. Use
50) Do the exercise at the bottom of this page in the usual way.
51) Write a pretend website selling games that asks for person's name email and Visa Card numbers. Use text, radio and submit buttons. You do not have to do anything with the data that the client puts in. Include a set of pictures for your products.
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.
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.
Try to do the exercises without looking at the answer. Make a small change to the HTML in the answer and add a comment about what you changed. Put the resulting answers in your blog as 17(a), (b) ..etc.
18 Write an external style sheet that changes the size and colour of both the <h1> and the <p> tags. Test your style sheet with a simple HTML page that links to it. Put both files into your blog.
19. Same as above but this time achieve the same effect with just one HTML file but no css external file.
20. Write a simple HTML page that outputs a greeting and your name with a relevant picture. Use an external css file that formats and colours your page nicely. (See next task.)
21. Same as above but this time use a different external style sheet that does a horrible job with clashing colours and other bad design features.
22. Use
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
in four different style sheets to change the background in a simple HTML page.
23. Write a simple HTML page with some CSS colours like in this page. Make it 6 sentences using different backgrounds using (a) colour names (b) rgb(-,-,-) with decimal numbers and (c) hex values.
Try some interesting colours.
Repeat for 6 grey sentences using 6 different grey values.
24. Check out this page on margins. Change the the program to a sentence with your name in it using different margins. Paste the code and a screen shot of the output in your blog.
25. Padding: example on this page. Change the the program to a sentence with your name in it using different padding from that in the example. Paste the code and a screen shot of the output in your blog.
26. "Div" is an important tag. Check out this page that includes divs. Change the HTML to output a block of text like the London example. This time make Dunedin the topic and change the text, background colour and the padding. Show a screenshot of your page output and include the HTML code your wrote.
27. Style sheets. Check out this page that shows use of an external style sheet. Find the style sheet referred to (called mystyle.css) in the main text and put it in the head section of the html file so you now have an internal style sheet.
28. Write a small HTML announcement about your company changing over from Windows 7 to Win10. It should have an h1 announcement like "We're changing from Windows....." , also should have a picture, three lines of text and a box with text in it and an interesting border. You should have an interesting background colour, some text changes, fonts and colours too. All the styles should be included in an external .css file. Put both your files and a screenshot of the outcome in your blog.
29. Check out the borders example here. Change this file to two files, one an html file and the other css file. Make sure you call the right css file in your html file.
30. Do the exercises at the bottom of this page . Try to do the exercises without looking at the answer. Make a small change to the HTML in the answer and add a comment about what you changed. Put the resulting answers in your blog as 30(a), (b) ..etc.
31. 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.
32. 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?
33. 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.
34. 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.
35. Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
36. Layout. Write a little webpage that contains all these layout tags: margin-left,border-left,padding, overflow, href="#", text-decoration,background-color, clear:left, text-align, margin, max-width, color. Use this link as an example but don't just copy it. Put in new information and a different design.
37. Find two websites that you don't like. Take a screen shot of them and explain what you don't like about each one. Look first at some bad ones according to this site.
38. There are some sites that give advice on good design. Like this one and this one. Find two more, put links into your blog, and say what two things you learned from each one.
39. Use an image of a kiwi as a link to the wikipedia page on kiwis.
40. Add to the kiwi page above a paste from giphy that will, in a simple iframe, show an animation of your choice.
41) 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.
42) Same as above but this time your click should take you to the appropriate Wikipedia page. Code in blog.
43) 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.
44) Check out the <picture> tag here. Change the flower theme to one which has three differnet pics of your favourite animal with a suitable caption. Make sure in resizes appropraitely by changing the shape of your browser page.
45) Using canned HTML scripts. There are lots of examples of little HTML scripts on the internet. Check out the section on HTML marquee codes about a third of the way down this page. Change two of them so that your name is used in the moving marquee, one of the scripts should contain text and an image too. Put both HTML scripts in your blog.
46) Javascript. Do the exercises at the bottom of this page. Make usual small commented changes. Put the working HTML scripts in your blog.
47) Change the javascript light bulb example to animal selection with two buttons, one for each animal you choose. For instance, if you press the "cat" button you get a picture of a cat. If you press the "dog" button, you get a picture of a dog. Choose your own animal pictures.
48. Write about 100 words on your trip to Europe and include at least ten entities or special symbols. Include the signs for at least two currency symbols, two mathematical symbols and two Greek letters.
49. Draw a simple stick figure, diagram or picture using HTML entities, symbols, arrows and lines. It does not have to be great art.
23. Write a simple HTML page with some CSS colours like in this page. Make it 6 sentences using different backgrounds using (a) colour names (b) rgb(-,-,-) with decimal numbers and (c) hex values.
Try some interesting colours.
Repeat for 6 grey sentences using 6 different grey values.
24. Check out this page on margins. Change the the program to a sentence with your name in it using different margins. Paste the code and a screen shot of the output in your blog.
25. Padding: example on this page. Change the the program to a sentence with your name in it using different padding from that in the example. Paste the code and a screen shot of the output in your blog.
26. "Div" is an important tag. Check out this page that includes divs. Change the HTML to output a block of text like the London example. This time make Dunedin the topic and change the text, background colour and the padding. Show a screenshot of your page output and include the HTML code your wrote.
27. Style sheets. Check out this page that shows use of an external style sheet. Find the style sheet referred to (called mystyle.css) in the main text and put it in the head section of the html file so you now have an internal style sheet.
28. Write a small HTML announcement about your company changing over from Windows 7 to Win10. It should have an h1 announcement like "We're changing from Windows....." , also should have a picture, three lines of text and a box with text in it and an interesting border. You should have an interesting background colour, some text changes, fonts and colours too. All the styles should be included in an external .css file. Put both your files and a screenshot of the outcome in your blog.
29. Check out the borders example here. Change this file to two files, one an html file and the other css file. Make sure you call the right css file in your html file.
30. Do the exercises at the bottom of this page . Try to do the exercises without looking at the answer. Make a small change to the HTML in the answer and add a comment about what you changed. Put the resulting answers in your blog as 30(a), (b) ..etc.
31. 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.
32. 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?
33. 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.
34. 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.
35. Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
36. Layout. Write a little webpage that contains all these layout tags: margin-left,border-left,padding, overflow, href="#", text-decoration,background-color, clear:left, text-align, margin, max-width, color. Use this link as an example but don't just copy it. Put in new information and a different design.
37. Find two websites that you don't like. Take a screen shot of them and explain what you don't like about each one. Look first at some bad ones according to this site.
38. There are some sites that give advice on good design. Like this one and this one. Find two more, put links into your blog, and say what two things you learned from each one.
39. Use an image of a kiwi as a link to the wikipedia page on kiwis.
40. Add to the kiwi page above a paste from giphy that will, in a simple iframe, show an animation of your choice.
41) 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.
42) Same as above but this time your click should take you to the appropriate Wikipedia page. Code in blog.
43) 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.
44) Check out the <picture> tag here. Change the flower theme to one which has three differnet pics of your favourite animal with a suitable caption. Make sure in resizes appropraitely by changing the shape of your browser page.
45) Using canned HTML scripts. There are lots of examples of little HTML scripts on the internet. Check out the section on HTML marquee codes about a third of the way down this page. Change two of them so that your name is used in the moving marquee, one of the scripts should contain text and an image too. Put both HTML scripts in your blog.
46) Javascript. Do the exercises at the bottom of this page. Make usual small commented changes. Put the working HTML scripts in your blog.
47) Change the javascript light bulb example to animal selection with two buttons, one for each animal you choose. For instance, if you press the "cat" button you get a picture of a cat. If you press the "dog" button, you get a picture of a dog. Choose your own animal pictures.
48. Write about 100 words on your trip to Europe and include at least ten entities or special symbols. Include the signs for at least two currency symbols, two mathematical symbols and two Greek letters.
49. Draw a simple stick figure, diagram or picture using HTML entities, symbols, arrows and lines. It does not have to be great art.
51) Write a pretend website selling games that asks for person's name email and Visa Card numbers. Use text, radio and submit buttons. You do not have to do anything with the data that the client puts in. Include a set of pictures for your products.
Web Development
Welcome to our class, IB401 Web Development, second semester 2017. Here you'll learn skills that will give you an extra edge in IT and help you become a competent web developer.
Keep an eye on this blog and do the tasks in the tasks page. Do the answers to any questions, or written code in your own blog.
So your first task is to create a blog in Blogger. When you have done this remember your blog address so it can be pasted into our wiki in Moodle.
Subscribe to:
Posts (Atom)