In the above I changed the tool tip text to "I'm a tool tip". Anything that's different from the original answer is OK. Just make a small change and add a HTML comment. Save your version to your blog remembering to give it a number.
Monday, February 18, 2019
How to do the w3 schools exercises
If you're asked to do a w3 exercise, work out what's required and then make a small change to the official version and save to your blog with a comment.
In the above I changed the tool tip text to "I'm a tool tip". Anything that's different from the original answer is OK. Just make a small change and add a HTML comment. Save your version to your blog remembering to give it a number.
In the above I changed the tool tip text to "I'm a tool tip". Anything that's different from the original answer is OK. Just make a small change and add a HTML comment. Save your version to your blog remembering to give it a number.
Sunday, February 17, 2019
Tasks
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. 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.
14. Repeat for the Dunedin Stadium.
15. Repeat for your favourite band or music star.
16. 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.
17. Same as 16, but this time run the HTML headings script.
18. Same as 16, but this time run the HTML paragraphs script.
17. Same as 16, but this time run the HTML headings script.
18. Same as 16, but this time run the HTML paragraphs script.
19. Do the 4 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.
20. 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.
21 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.
22 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.
23. Headings. Write a small HTML page that uses each of the headings <h1>, ...<h6>.
24. 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.
25. Write a short HTML web page that explains what the <head> and <body> tags do. Put at least two tags in the head section. Also use the font-size attribute at least twice.
26. Write a short HTML web page about your favourite browser that uses <h1>, <h2> ... <h6>, <br>, <p>, <hr>. Also use the font-size attribute at least three times. Add your name as author in the head section. (Hint: check out the <address> tag.)
27. 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.
28 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.
29) 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.
30) Find an image of the polytechnic that shows most of the buildings and areas. Create an image map out of this that goes to another image or site when you click a relevant part. For instance, clicking on D block might lead to the IT department or a picture of a computer.
31) 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.
32) CSS syntax. Do the exercises at the bottom of this page making a small adjustment with a comment too.
33) Check out this page first then write a series of statements about your favorite animal that have:
(a) a big heading, centered in blue.
(b) a statement that uses an id selector to align text to the right in red.
(c) a statement that uses a class selector called ".left" that aligns text to the left and colours it green.
(d) a grouping like
h1, h2, p {
text-align: center;
color: red;}
but with right alignment and in blue. Use hi,h2 and p in further statements about your animal.
34) Check out this page first. Write a short paragraph about your hobby that contains each of the following at least once:
34) 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
35) 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:
2
36) Do these questions from the board on colours:
37) 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.
38) 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
38) 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
39) 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.
40) CSS borders.Write five facts about your favorite animal on five lines. Create a different border for each fact.
41) Do the exercises on this page in the usual way.
42 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.
43) Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
43) Go back to the page of lists mentioned above and create an ordered list from it with 4 items.
44) <div>,<class>,blocks. Do the three exercises on this page in the usual way.
45) iframes. Do the exercises on the bottom of this page in the usual way.
46) 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.
47) CSS Margins. Use the following tags in a few sentences about your favourite animal. { margin, margin-bottom, margin-left, margin-right, margin-top. }
48) JavaScript. Check out two JavaScript web sites that allow you to copy scripts for your own purposes. Put a link to each of them in your blog and a screen shot of the best one. Include too a JavaScript that you particularly liked.
49) 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.
50) Javascript. Do the four exercise at the bottom of this page in the usual way.
51) 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.
52) CSS padding. Write three sentences about your favorite animal, each in a different box. Make all the borders different and have each box with different padding.
53) Write a short page about your favourite animal using all CSS dimension properties below.
All CSS Dimension Properties
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |
54) Write a short HTML page with five different tags in the <head> section.
55) Check out the HTML layout page here. Change the cities page they have here to one about Dunedin using either the flexbox layout or the CSS float layout.
56) Repeat for a short introduction to Dunedin using the CSS Box model for just one or two sentences. Take your information about the box model from here.
57) Write a small one page Wordpress site on your favourite country. Include a map and two other pictures. Put a screen shot of your site as well as include a link that will click onto your site.
58) Write some text in a web page about your hobby that uses all the CSS text formatting tags below.
55) Check out the HTML layout page here. Change the cities page they have here to one about Dunedin using either the flexbox layout or the CSS float layout.
56) Repeat for a short introduction to Dunedin using the CSS Box model for just one or two sentences. Take your information about the box model from here.
57) Write a small one page Wordpress site on your favourite country. Include a map and two other pictures. Put a screen shot of your site as well as include a link that will click onto your site.
58) Write some text in a web page about your hobby that uses all the CSS text formatting tags below.
All CSS Text Properties
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space |
59) Write some text using the following CSS font tags below:
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
60) Write some Python code as well as a sentence about what the code does using the following HTML computer code tags:
HTML Computer Code Elements
| Tag | Description |
|---|---|
| <code> | Defines programming code |
| <kbd> | Defines keyboard input |
| <samp> | Defines computer output |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | double quotation mark | " | " |
| ' | single quotation mark (apostrophe) | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
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. Write an interesting list of your favorite drinks and include at least three of the following tags:
All CSS List Properties
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |
Subscribe to:
Posts (Atom)