My new look for the CSSvault homepage, achieved using Mozilla Firefox's [edit css] function -
I changed around a few colours, trying for a pink and green look.
Monday, March 12, 2007
Screen Dimensions (3.1.2)
I viewed the Curtin homepage using IE 7 at the following resolutions -
640 x 480
The page was fine in a maximised browser window.
Next I viewed the page in a browser window that I had resized to roughly half the page.
The page still looked ok, some minor text-overlap from the 'Information about' bar onto the main image, but the links were still readable. You had to scroll down the page to read the information on the footer.
800 x 600
The page was fine in a maximised browser window.
In a resized browser window the page was still fine.
1024 x 768
The page was fine in a maximised browser window.
In a resized browser window the page was still fine.
640 x 480
The page was fine in a maximised browser window.
Next I viewed the page in a browser window that I had resized to roughly half the page.
The page still looked ok, some minor text-overlap from the 'Information about' bar onto the main image, but the links were still readable. You had to scroll down the page to read the information on the footer.
800 x 600
The page was fine in a maximised browser window.
In a resized browser window the page was still fine.
1024 x 768
The page was fine in a maximised browser window.
In a resized browser window the page was still fine.
Using Any Browser to view the Curtin homepage, I found the results quite surprising (see image below)
Using the HTML 3.2 Validation tool it showed the Curtin homepage had 97 errors.
Engine View showed what information search engines found about the Curtin homepage through meta tags.
Tuesday, March 6, 2007
HTML Introduction (2.2.4)
1) How do you provide invisible information on a Web page that allows you to only provide messages for people who read your HTML code?
You put it in <!-- these --> comment tags.. anything you write inbetween will only be shown in your HTML code.
2) How can you make your text appear on a Web browser exactly as you typed it in your HTML code?
You can use the <pre> for preformatted text.
<pre>
</pre>
You can try
some weird
spacing
with
it!
3) How can you provide additional information in HTML in the form of a small pop up message that is otherwise not apparent if you don't roll your mouse over it?
You use the <abbr title="HyperText Markup Language" > This page was written with HTML </abbr>
Or you can use the alt="Your description here " tag for an image or link.
<img src="yourimage.jpg" alt="your description">
4) How can you create a hypertext link that will allow you to link to a specific part of the same page?
You use the anchor tag.
<a href="#Q7">Go to Question 7. </a>
and on Question 7 I would surround the 7) with these tags -
< a name="Q7"> 7) </a>
5) If you were to create an empty table of two rows by two columns, what do you need to do to it to show the borders around each empty cell?
In the table tag I would add the following attribute - border="border value"
<table border="3">
6) How do you turn an image into a hypertext link? How do you influence whether or not such an image has a border?
To link with an image, you use the <a href="yourpagehere.html"> tag and follow it with the <img src="yourimage.jpg"> tag, closing off with the </a> tag.
To control a linked images border properties you add the border="border width" attribute to your <img src > tag.
<img border="3" src="yourimage.jpg" height="136" width="100"> </a>
7) How do you change the colors of your hypertext links? How do you change the background color?
To change the colour of a hypertext link, add the link="any color" attribute to the
<body> body tag.
<body link="green">
To change the background colour of a page, add the bgcolor="any color" background colour attribute to the <body> tag.
< body bgcolor="navy">
Web design basics (2.2.3)
I already felt very confident with my basic Web coding skills, so I quickly scanned the reccomended reading (NCSA--A Beginner's Guide to HTML) giving each section a quick read - just in case! I felt ready to answer the following questions.
The basic tags used are
<html>
<head>
<!-- In the header you can also include internal stylesheets.-->
<title>
<!-- The title you give to your page will show in the title bar of the browser, it is important to give a descriptive name, as most search engines use this information too. -->
</title>
</head>
<body>
<!-- The body section is where most of your content will be, popular tags are <h1> for a header, and <p> for a new paragraph. -->
</body>
</html>
<p> </p>
Although closing the <p> is optional.
A paragraph tag
<p>creates a
Where as a line break tag
<br>Can be used when you don't want
that double space between your lines.
To create a bulleted list you use the <ul> unnumbered list and <li> list item tags.
To create a numbered list you used the <ol> ordered list and <li> list item tags.
You put this information in your <title> tag, which you place in the <head> of your html document.
<title> Put your web page title here. Please be descriptive. </title>
To add an image to your HTML document, use the <img src="your image.jpg"> tag.
For faster loading, it is also a good idea to include height= and width= (matching the height and width of your image) in the img src tag as follows <img src="your image.jpg" height=200 width=75 >
You add a link using the <a href="yourpagehere.html"> tag, then you type what you would like displayed as linked text (for example if your link pointed to Curtin, you may type somthing like this - Curtin University of Technology and close the link with the </a> tag.
To link with an image, you use the <a href="yourpagehere.html"> tag and follow it with the <img src="yourimage.jpg"> tag, closing off with the </a> tag.
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
1) What tags make up the basic structure of an HTML document?
The basic tags used are
<html>
<head>
<!-- In the header you can also include internal stylesheets.-->
<title>
<!-- The title you give to your page will show in the title bar of the browser, it is important to give a descriptive name, as most search engines use this information too. -->
</title>
</head>
<body>
<!-- The body section is where most of your content will be, popular tags are <h1> for a header, and <p> for a new paragraph. -->
</body>
</html>
2) What tags do you use to denote a paragraph?
<p> </p>
Although closing the <p> is optional.
3) What is the difference between a paragraph tag and a line break tag? Please illustrate.
A paragraph tag
<p>creates a
double space between lines.</p>
Where as a line break tag
<br>Can be used when you don't want
that double space between your lines.
4) How do you create a bulleted list?
To create a bulleted list you use the <ul> unnumbered list and <li> list item tags.
- <ul>
- <li> List something here
- <li> and here..
- <li> and here!
5) How do you create a numbered list?
To create a numbered list you used the <ol> ordered list and <li> list item tags.
- <ol>
- <li> You can number your lists
- <li> just by using a simple tag.
6) There is a title information that appears for Web pages in the title bar of a Web browser, in your bookmarks when you choose to bookmark a site, and as a listing in the search results when you do a search for information using a search enging like Google. How do you provide this very important information in your HTML code? Please show an example.
You put this information in your <title> tag, which you place in the <head> of your html document.
<title> Put your web page title here. Please be descriptive. </title>
7) How do you add an image?
To add an image to your HTML document, use the <img src="your image.jpg"> tag.
For faster loading, it is also a good idea to include height= and width= (matching the height and width of your image) in the img src tag as follows <img src="your image.jpg" height=200 width=75 >
8) How do you add a link?
You add a link using the <a href="yourpagehere.html"> tag, then you type what you would like displayed as linked text (for example if your link pointed to Curtin, you may type somthing like this - Curtin University of Technology and close the link with the </a> tag.
9)How do you make an image a link?
To link with an image, you use the <a href="yourpagehere.html"> tag and follow it with the <img src="yourimage.jpg"> tag, closing off with the </a> tag.
10) Provide the code for an empty table, 3 columns long and 4 rows high.
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Saturday, March 3, 2007
Module 1 Questions & Answers
1) What role did Tim Berners-Lee play in the development of the Internet?
He invented the 'World Wide Web' to make it easy to communicate over the Net. This included the global hypertext system.
2) In this unit, you will be working with the XHTML scripting language. What scripting languages did Tim Berners-Lee discuss (back in 2000)? Do you feel his comments are still relevant today? What evidence can you find to support your view?
Tim Berners-Lee discussed XML and RDF (Resource Description Framework). He envisioned using RDF to combine data from multiple sources as part of his grand plan for the Semantic web.
I feel that his comments are still relevant today, as Bob DuCharme writes -
"For a long time now, RDF has shown great promise as a flexible format for storing, aggregating, and using metadata. Maybe for too long—its most well-known syntax, RDF/XML, is messy enough to have scared many people away from RDF. The W3C is developing a new, simpler syntax called RDFa (originally called "RDF/a") that is easy enough to create and to use in applications that it may win back a lot of the people who were first scared off by the verbosity, striping, container complications, and other complexity issues that made RDF/XML look so ugly."1
3) Tim Berners-Lee discusses the world's very first Web page. Visit the site and write your observations on the following: In what ways do you feel Web design has changed over the years, not just in the visual design, but in the hyperlinks? Why do you think his page is so simple? What scripting language did it use? View the source of this page and tell us how many different tags you can find in the code. (see http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html)
Web design has changed visually through uses of plug-ins, interactive media, faster Internet connections allowing for greater use of images, WYSIWYG editors allowing for almost anyone to design a page without knowing any HTML/XHTML therefore possibly having greater input for graphic designers with no scripting knowledge to still get a website online.
Hyperlinks are now more dynamic, they can be part of a Client-Side image map, represented by a click able image, styled with css (for example you could use the declaration text-decoration:none; to make a link appear with no underline.)
Tim Berners-Lee's first web page was scripted using online hypertext.
I counted 10 different tags.
4) What is the W3C? Why do they care about standards?
The W3C or World Wide Web consortium, is an international consortium which works to develop web standards 2
The W3C cares about standards on the Web because for the Internet to move forward, it is important that there is a set of standards so that everything works together.
5) If Tim Berners-Lee could roll the clock back and re-design URLs, how would we type in the address for Curtin University's Admissions Office (now at http://students.curtin.edu.au/administration/admissions/) ? Why would he do this?
I think that it would be typed as ( http:edu.au/students.curtin/administration/admissions/ )
He would like to re-design URL's because he feels the structure is clumsy, and a client should be able to figure out that students.curtin.edu.au was the server to contact. Also the short-hand //students.curtin.edu.au/administration/admissions/ is very rarely used.
6) According to Tim Berners-Lee, who invented the first GUI (Graphical User Interface) browser? Name 5 different Web browsers. Which do you think are the most popular ones today?
He invented it himself, and it was called 'WorldWideWeb'.
5 different web browsers - Internet Explorer, Mozilla Firefox, Netscape, Safari, Amaya.
According to W3C's page on browser statistics 3 , , the most popular browsers as of January 2007 were Internet Explorer 6 (42.3%) followed by Firefox (31%) and Internet Explorer 7 (13.3%).
On my own personal blog the browser statistics are as follows, Internet Explorer 7 (43%), Firefox 2 (30%), Firefox 1 (14%) and Internet Explorer 6 (12%).
7) Name the three first World Wide Web link colours, in order of appearance.
Black
Blue
Green
List of References.
1. Bob DuCharme, O'Reilly xml.com, Introducing RDFa, 14 February 2007, < http://www.xml.com/pub/a/2007/02/14/introducing-rdfa.html > (Accessed 3 March 2007)
2. Ian Jacobs, Head of W3C Communications, About the World Wide Web consortium (W3C), 13 February 2007,<http://www.w3.org/Consortium/ > (Accessed 1 March 2007) .
3. W3 Schools, Browser Statistics, January 2007 < http://www.w3schools.com/browsers/browsers_stats.asp > (Accessed 1 March 2007).
Wednesday, February 28, 2007
5 Web Milestones
For this task I had to consult the Internet Timeline at Hobbes' Internet Timeline by Robert H Zakon and pick 5 milestones relevant to the World Wide Web, screen design and multimedia design.
1) 1982 -
DCA and ARPA establish the Transmission Control Protocol (TCP) and Internet Protocol (IP), as the protocol suite, commonly known as TCP/IP, for ARPANET. (:vgc:)
This leads to one of the first definitions of an "internet" as a connected set of networks, specifically those using TCP/IP, and "Internet" as connected TCP/IP internets.
DoD declares TCP/IP suite to be standard for DoD (:vgc:)
2) 1983 -
Name server developed at Univ of Wisconsin, no longer requiring users to know the exact path to other systems
3) 1991 -
World-Wide Web (WWW) released by CERN; Tim Berners-Lee developer (:pb1:). First Web server is nxoc01.cern.ch, launched in Nov 1990 and later renamed info.cern.ch
4 ) 1994 -
The first banner ads appear on hotwired.com in October. They were for Zima (a beverage) and AT&T
5) 1995 -
Emerging Technologies: Mobile code (JAVA, JAVAscript), Virtual environments (VRML), Collaborative tools
My studies so far
I'm studying NED11 (Internet Design) online at Curtin University of Technology this semester. My other online unit, NET11 (Internet Communications) required me to start a 'learning log' in the form of a blog, or website, or if we couldn't manage that even a word document as a type of progress-meter of our studies throughout the semester.
I've liked having my NET11 blog so much that I had to start one for my NED11 studies as well :) (just this blog doesn't get marked! )
The first few days of study have been spent reading about various things to do with the Internet, such as the formation of ARPA (also known as DARPA throughout the years), leaning about packet switching, and reading the complete history of the Internet through various websites.
My first task was to read through Tim Berners-Lee's answers to FAQ by the press and answer seven questions relating to those FAQs. This was a little hard, but I did take the time to answer each one. We aren't getting assessed on this, I guess it's just to increase our knowledge of the Internet and Berners-Lee's invention of the World Wide Web.
Today I'm going to read Hobbes' Internet Timeline, and then my task is to find 5 milestones that are relevant to the following: World Wide Web, screen design and multimedia design.
Time to start studying!
- Mary
I've liked having my NET11 blog so much that I had to start one for my NED11 studies as well :) (just this blog doesn't get marked! )
The first few days of study have been spent reading about various things to do with the Internet, such as the formation of ARPA (also known as DARPA throughout the years), leaning about packet switching, and reading the complete history of the Internet through various websites.
My first task was to read through Tim Berners-Lee's answers to FAQ by the press and answer seven questions relating to those FAQs. This was a little hard, but I did take the time to answer each one. We aren't getting assessed on this, I guess it's just to increase our knowledge of the Internet and Berners-Lee's invention of the World Wide Web.
Today I'm going to read Hobbes' Internet Timeline, and then my task is to find 5 milestones that are relevant to the following: World Wide Web, screen design and multimedia design.
Time to start studying!
- Mary
Subscribe to:
Posts (Atom)
