Monday, October 20, 2014

Using pre-written HTML scripts. An example.

Most of your ideal HTML scripts are already available on the Internet. For example at the scripts section of Quackit we can see, for instance the scripts to do with marquees, which are rolling banners on your page.

Let's take the first one below:



Find a simple HTML file to insert your new code into, so as to test it.


Copy the text into your code template:

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

to make the following  file.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
</body>
</html>

Then test your code in a browser.


Wednesday, August 27, 2014

And the best browser is ...

Have a look at this site ( the best browser is ..) and do the associated task. This has made some people review their favorite browser.


Monday, July 28, 2014

Text editors

There are people who always use special HTML editors to write their HTML scripts. Others use only simple text editors.


We often write HTML scripts in a text editor. There are many available and most are free.




Others are Notepad++, EditPlus and Ultra Edit. There is not a "best one" , they all have their own set of features. A lot of people just stick with Notepad in Windows and TextEdit on Macs. One of your tasks is to explore different text editors.


w3schools is a good site


First HTML script

The first full HTML script.


<html> 
  <head>
    <title>The first page!</title>
  </head>
  <body>
    <p>Well, hello world</p>
  </body>
</html>

Monday, July 21, 2014

Tasks

Do all the tasks outlined below.

1) Create a blog. 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) Create a post called "Journal of my  Service Related Experiences". Your first entry should relate to greetings which we will talk about in class. You should have a weekly entry in this page on topics given to you.
4) Start a MS Word based small project called "Three common PC problems." Describe the problems and suggest what might be causing the problem and some solutions. A screen shot or picture associated with each problem is required. About two pages long.
5) When you are satisfied with your project, put the document into the appropriate drop-box in Moodle.
6) Check out the case study about Lyle and his ISP.

Answer this assignment in the form of a report.  Lay out your answer in three sections:
a)      What would you do first?
b)      Steps to ensure the problem doesn’t reoccur.

c)       Company guidelines on customer help/support/contingencies/staff – a series of bullet points is probably the best way of formatting this section.


6.5 Write a MS Word assignment called My Four Most Favorite Sites. Write about 50 words about each site and say why you like it. Include a screen shot of each site. Make the layout nice and put it in the Moodle drop-box by the closing date.

6.6 Put a link in your blog to the w3schools HTML site with a screen shot.

7. What does HTML stand for. Paste in a few lines of HTML.

8. Define Tag, Element and Attribute. Give examples if you can.

9. What does this do:     <p> Hello world! </p>

10.  Copy this in to Notepad and run it through a browser.


<html>
  <head>
    <title>My First Page</title>
  </head>
</html>

Where does the text "My First Page" appear?

11. Same as 10 but this time,  change the text to your name. Put your full HTML program into your blog.

11a. Go to this page( http://www.w3schools.com/html/html_examples.asp) and run the example called "A very simple 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.

11b. Same as 11a, but this time run the HTML headings script.

11c. Same as 11a, but this time run the HTML paragraphs script.

11d. How do we write comments in HTML?

11e. Why do we write comments?

12. Look at this page http://www.w3schools.com/html/html_basic.asp and run the "try it yourself" options on the green buttons. Do this for Headings, Paragraphs, Links, Images. Change each of the scripts in some creative way, make sure they work then write the scripts into your blog.

12a. Start your talk on an interesting tag by picking one that appeals to you and preparing a two (or more) page PowerPoint. Put your name and tag onto the Wiki in Moodle.

12b. 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.

12c. Check out the post in this blog called:  "And the best browser is..". Read over the results. A bit surprising to some people. Do you think this is a fair assessment? Does it include all the features important to web users?Did it change your opinion of your most-used browser? Write some sentences that respond to the previous questions in your blog.

12d. Blogger is a kind-of HTML editor. Start with a blank post page and switch to HTML. (Find the button top left next to Compose.) Write a simple HTML script the puts your name on three different lines and in three different sizes. When you switch back to Compose you should be able to see your result. Capture your HTML script in a screen shot and add to your blog. (A screen shot of Blogger in Blogger sounds a bit Matrix-like?)

112e. Write an HTML script that uses all the header tags <h1>, <h2>, ..., <h6>.

13. Write 100 words in good English on a how a person can write HTML using Notepad to make it look good in a browser. Pretend they don't know anything, and give good instructions. Make sure spelling is good.

14. Complete the first assignment on student life in Dunedin. See the PowerPoint in Moodle for details.

15 Write a simple script that includes the following tags : underline, italics and bold.

16. Write a script that includes three graphics about the recent Malaysian Airlines plane crash as well as 100 words about what's happened. These can be copies so long as you say where they come from.

17. Subscript. Write a script that contains the <sub> tag. Also include the chemical formula for ammonium  phosphate (look it up) , with all the subscripts in the right place.

18. Tables. Check out the w3 Schools page on HTML tables. Run the 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.

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

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

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

21.1 Repeat 21 but this time use an unordered list.

22. Use the HTML list method to make a list of 6 different HTML tags.

23. Same as 22 but this time use a different set of bullets and have at least one nested list.

24. Go to the page of lists in question 20 and use it to create a 10-item list with an appropriate heading and some interesting graphics.

25) Technical Writing. Write 100 words in your blog about your life so far. Call it "My Dream Job". Print of a Notepad copy in class and show your teacher. make sure you've got good sentences, spelling and structure. Think about vocabulary and the right tone which should be technical and formal.

26) Write an HTML page that contains at least 3 divs in it. Each div should display a different aspect like colour.

The next few tasks involve image maps. You will need to find an image editor that can tell you about your image's pixel coordinates. I used Pixlr, an extension in Chrome but there are others.

27) Check out the image map explanations in w3 schools here and in quackit here. Try both examples and make sure you understand what the the script does.Take a screen shot of both of them for your blog.

28) Take the w3 schools planetary example and change it so that there are just two regions: the sun and the planets. Use two rectangles to cut up the picture into two parts. Put the code with comments into your blog.


Welcome to the class



Welcome to our class, CR434, second semester 2014. Here you'll learn skills that will give you an extra edge in IT and help you become a competent help desk technician.


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 you blog address so it can be pasted into our wiki in Moodle.