Web

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 Draw.io 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>

12. Make a list of ten tags in your blog like <html> and <hi> and write a phrase about what each of them does.

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.

</head>
</html>

Where does the text "My First Page" appear?

17. Write a short web-page that shows two pictures of Dunedin along with a heading and some descriptions. Capture the web page output and also put the HTML code into your blog.

18. Repeat for your favorite food. But this time have three pictures plus heading and description. Bonus put in a link to a relevant site.

18.5. Write a short web page about Dunedin's weather. Include three pictures. One big heading and 50 words minimum about what's in the pictures and other comments on this subject. Also use three different font size and colour atrributes. Bonus: make the background one of the shades of blue.

19, 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.

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

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

22. Do the four exercises 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.

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

24) Check out this page first. Write a short paragraph about your hobby that contains each of the following at least once:

<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

25) Do these questions from the board on colours:

26) Check out how to do CSS backgrounds on this page. Then write a Hello World page that uses background-image: url("icon1.gif"); to repeat a background i=mage with a small icon like this one:

27) Do the exercises on the bottom of this page and make the usual small changes with a comment and put the resulting answer into your blog.

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

29. Same as above but this time achieve the same effect with just one HTML file but no css external file.

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

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

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

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

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

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

36. Find three particularly bad web sites. Take a screen shot of each one and say why you think they are bad.

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

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

39) Make three versions of a web page that presents your favourite animal.

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 a <h1> heading, a picture and some text following a <p> tag. Put your three versions in your blog along with the html.

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

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?

43) Write a table or tables about planets that contain each of these tags or CSS properties below at least once.

Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

44) Create at least two lists and make sure you use at least once each of the tags below:

Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a list horizontally

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

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

47) Do the three exercises at the bottom of the page on classes.Put the correct versions in your blog.

There is no number 48.

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

50) Find the YouTube 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.

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

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

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

54) Write a short web page about your favourite band with a h1 title, an image and some text. Use each of the tags below as well.

HTML head Elements

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

55) Same as above but this time put your text in a box according to the CSS box model.

56) Create a small WordPress document that displays your favorite country. Heading, image and text required. Take a screenshot of your page and put it along with a link to your page in your blog.

Web

Monday, August 12, 2019

Making small changes to exercise answers

Tuesday, July 23, 2019

w3school is is a good site to learn HTML

Monday, July 22, 2019

Best browsers

Sunday, July 21, 2019

Tasks

Tasks

HTML head Elements

Welcome

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

Making small changes to exercise answers

Report Abuse