2018S2WebDevelopment

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.

5.1) Check out the best browser post in this blog. What does this site say about the best browser for Windows? What browser do you use? Why do you use this browser?

5.2 What keys do you press to look at the HTML code behind a web site in Chrome?

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. Go to the HTML introduction page of w3 schools. Copy the Simple HTML Document Example onto a Notepad page. Save this as first.html and put file on desktop. When you double click this file you should get a simple web page in a browser. Copy the HTML into your blog.

10.1 Same as abpove but this time get it to print your name out as well. Put your HTML code in your blog.

10.2 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.

16. Do the 5 exercises at the bottom of this page. Make some small changes to your answer then copy your version to your blog with a suitable comment each time.

17. Use the CSS font:size attribute to create three headings of 10, 40, 80 pixels high? Take a screen shot and put picture into your blog.

18, Write a short HTML web page that explains what the <head> and <body> tages do. Put at least two tags in the head section. Also use the font-size atrribute at least twice.

19. Write a short HTML web page about your favourite browser that uses <h1>, <h2> ... <h6>, <br>, <p>, <hr>. Also use the font-size atrribute at least three times. Add your name as author in the head section. (Hint: check out the <address> tag.)

20. Do the four exerecises down the bottom of the headings page. Replace some of the code with a little change and comment on what you've done. Put your version in your blog.

21. Check out the Lynda video called "Exploring HTML" from the course Introduction to Web Design and Development. A picture of the relevant video is given in this blog in a post called Exploring HTML. Write a quick review of this video including 5 things that seemed important to learn. Take a screen shot too of a part of the video that you thought was interesting or instructive.

22. Write a simple HTML page about the Dunedin railway station. Give it a heading, two nice pictures and a sentence about it. Take a screen shot and put it into your blog along with your HTML code.

23. Repeat for the Dunedin Stadium.

24. Repeat for your favourite band or music star.

2
25. 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. Do the exercises in the W3 page here. Do it in the usual way by making small changes to the solution and paste your HTML code in your blog with a comment.

28. 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.

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) Make three versions of a web page that advertises a movie or event currently on in Dunedin. You should have a style that changes <h1> to red and centred and <p> to orange. Background should be linen.

The first version should use an external style sheet, the second version an internal style sheet and the third one just inline styles where possible.

Each web page should have the same <h1> heading, a picture and some text following a <p> tag. Put your three versions in your blog along with the html.

33) Prepare a little one minute talk on a HTML tag you will be given. Each talk consists of three Power Point slides explaining the use of your tag with some examples. You may go into groups of two or three for your tag talks.

334) 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.

35) 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.1) Do the exercises on formatting from the bottom of this page in the usual way.

36) 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) Write your name on six different lines using a variety of colours for text background and borders. Also use rgb, names and hex to specify different colours. Take a screen shot of your output.

38) Paragraphs. Do the exercises at the end of this page in the usual way.

39) Styles. Do the exercises at the end of this page in the usual way.

40) 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.

41) 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) Find a quote of some person you admire and put the quote under a picture of this person. Make a nice heading too. Use <blockquote> and one other tag from the HTML quotations page in w3schools.

43) Do the four exercises from the quotations page in the usual way.

44) CSS can be added to HTML in three different ways. Say what these are.

45) CSS. Do the exercises on the bottom of this page.

46) Links. Write a small page with a picture of your favorite animal and an interesting heading. Add a sentence that contains a link to a relevant Wikipedia page related to that animal. Add another link that jumps to an alternative information page. Make one of your pages open in current page and the other to open in a new page.

47) Add to the exercise above an image or icon that is clickable and will go to another page about your animal.

48) Do the five exercises here on this page in the usual way.

49) CSS borders. Write five facts about your favorite animal on five lines. Create a different border for each fact.

50) Do the exercises on this page in the usual way.

51) 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.

52 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.

53) Go back to the page of lists mentioned above and create an ordered list from it with 4 items.

54) <div>,<class>,blocks. Do the three exercises on this page in the usual way.

55) iframes. Do the exercises on the bottom of this page in the usual way.

56) Find the Iframes section in the w3 schools' menu. Study the relationship between iFrames and You Tubes. Create three different You tube frames one each with auto play, loop, and controls.

57) Javascript. Do the four exercise at the bottom of this page in the usual way.

58) Fine two sites which have some interesting free javascripts that you can use. Take a screen shot of each page.

59) Take two javascripts from the sites above and say what they do. Incorporate them into a little web page and show the source code in your blog.

60) Filepaths. Run a small HTML page that has three pictures in it from three different folders. One is in a sub folder, one is in the parent directory and one is in the current directory. Show your code.

61) Head. Write a short HTML page that shows your favourite country's flag with a heading and with five different tags in the <head> section.

62) Take the CSS floats layout from this page and change the example to represent NZ cities as well as changing colours, padding and fonts.

Show your code and a screenshot of your layout.

63) Repeat the above task for CSS Flexbox layout.

64. 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.

65. 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.

66. 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.

67. Write ten interesting maths symbols from this list and say what they mean.

68. Find two Greek words from this page and rewite them using the HTML Greek symbols from this page Give a translation too.

2018S2WebDevelopment

Monday, September 24, 2018

My Favourite Country

The Country HTML Project

Tuesday, August 7, 2018

Exploring HTML

Monday, August 6, 2018

How to do w3 schools exercises

Sunday, July 22, 2018

What is the best browser

w3 schools is a good HTML site

Tasks

Tasks

HTML Quotation and Citation Elements

Welcome

Welcome to our class, IB401 Web Development, second semester 2018. 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.