I digress. So, to get back on topic: today's DITA lecture was about the Internet and the World Wide Web, with a focus on html in the lab. Please note, that while many people use 'the Internet' and 'the World Wide Web' as interchangeable terms, I will not be doing so. I will explain why below. I will then go on to explain what we did in the lab, including some examples, which I hope will be suitably snazzy.
Anyone who has studied a whirlwind history of information or computer science will know the origins on the Internet, and of the World Wide Web. However, I feel it would be beneficial to assume that my readers are new to the topic. So if you don't want to read about the history and background then you can skip ahead to the html bit here.
The Internet dates back to the 1960s, where it was developed as a way of sharing information via a network of networks. According to ISOC, in August 1962 J.C.R. Licklider 'envisioned a globally interconnected set of computers through which everyone could quickly access data', his "Galactic Network" concept.1 He worked at DARPA (Defense Advanced Research Projects Agency) at the time, so the Internet actually had military origins. He was inspired by 'Project Lincoln', an early warning network to guard against Soviet nuclear bomb attack in the 1950s. The project eventually resulted in SAGE, Semi-Automatic Ground Environment, which included 'the world’s first long-distance network, which allowed the computers to transfer data'.2 I won't go into huge detail here because I appreciate that this blog will get very long (I could probably dedicate an entire blog to the history of the Internet!), but if you are interested the DARPA site is interesting and I have put a link in my references at the bottom of the blog. So, to cut a long story short, a networking project was launched, the concept of sending packets was dreamed up, an architectural description of a network of networks was put together in the 1970s by Kahn and Cerf, people started picking up on it, and it was deemed a beautiful thing.
The World Wide Web, by contrast, has 'only' been around since the 1990s (although Tim Berners-Lee started working on the idea in the 1980s). In his book, Weaving the Web, Berners-Lee describes his vision of the Web as 'a universal, all-encompassing space'.3 It was originally designed as a directory and method for information sharing at CERN. It was soon picked up by academics, and then spread until it was in common usage, as it is today.
To make it really clear I will borrow an analogy our lecturer shared with us. The Internet is the road, and the World Wide Web is like a car 'travelling' on it. There are other 'vehicles', the most common example being email.
So how does it work? The Internet uses a client-server architecture. Clients send requests via the network to servers, which respond. So for example, if you are trying to access a document over the web, you send a request to the server. One way to look at this is to examine a URL (Uniform Resource Locator) to see how it is constructed:
http://www.cscan.org/presentations/08-11-06-MikeEvans-Web.pdf
(Incidentally this is a good presentation about the evolution of the Web!)
The first part of the address, http:// identifies the link is a WWW document which should be transferred using HTTP (hypertext transfer protocol).
Next, www.cscan.org is the server DNS (domain name system).
Finally, presentations/08-11-06-MikeEvans-Web.pdf is the file path to where the document is.
In the lab part of the session (sadly only for an hour this week) we looked at html and had a go at creating web pages. Unfortunately my work is not yet available as a web page, but never fear! There are some examples of html coding (with some explanation of what they do) below, but first I feel I should give a little introduction to explain what all the brackets are about!
Html is made up of tags, which look something like this: <strong> </strong>. Note the difference between these tags - the one on the left opens and the one on the right closes whatever the instruction is. In this example, <strong> makes the text strong, which is usually (but not always) bold in the browser. Most html tags require closing, so a recommended way to ensure you do this is to open and close when typing, then go back and put in the stuff in the middle. So, let's look at what all the tags do:
<html> - this specifies where the html code begins and ends
<head> - this contains information which is not displayed, and is useful for metadata
<title> - a fairly self explanatory one, this changes what you see at the top of your browser window
<body> - this begins and ends all the stuff in the web page
Adding links and images is slightly more fancy. The best way to demonstrate this, I think, is to show you what it will look like as well. Isn't that fancy? So to start with, let's do a link. The plan is to link to a BBC news article about pandas. But the link itself isn't very visually appealing: http://www.bbc.co.uk/news/world-12160538
To solve this problem, I'm going to put a link behind the words of the title, in this case 'Why do we love pandas?' So, here we are:
Why do we love pandas?
But how did I do that? Well, it's not too complicated. All you need is your link and the html know-how. It looks like this:
<a href="http://www.bbc.co.uk/news/world-12160538"> Why do we love pandas?>
As you can see, the web link is the anchor <a> referenced href in quotation marks "". The text I want to show is at the end.
What about an image? There are two choices - you can get one off the web or you can get one locally. I'm going to post a picture of a smiley chair which I've borrowed from here: http://pleated-jeans.com/wp-content/uploads/2011/09/thecomicrelief.tumblr.png
In order to do this, I'm going to use the following html:
<img src="http://pleated-jeans.com/wp-content/uploads/2011/09/thecomicrelief.tumblr.png" width="200" height="170" alt="Image of a smiley chair">
No doubt you've spotted the address, and I'm sure you can use your detective skills to identify what 'width' and 'height' are for. But what is alt for? It's what will come up if the picture doesn't load for any reason. It's also handy for software which reads the web page for you out loud. So without further ado, here is the smiley chair:
But maybe you're interested in formatting your web page and making it shiny? Of course you are. There's more than one way to do this. You can apply html coding in the web page code itself, for example you can use <strong> and <em> (emphasis). Using bold and italic are frowned upon but 'proper' web designers, as strong and emphasis often come up this way, but will also be accessible to other users, for example those with visual impairments.
Another way of formatting your web page is to use CSS (Cascading Style Sheets) but, I'm afraid that will have to wait for another blog. I had every intention of getting into the habit of writing 1000 words or less as practice for my coursework, but unfortunately I seem to have been unsuccessful (1,288 words and counting). So for now, I will bid you farewell. In my next blog I hope we can pick up on CSS, but I haven't planned that far ahead, and I may delve into some other Information Science topics before then, we will have to wait and see!
http://www.cscan.org/presentations/08-11-06-MikeEvans-Web.pdf
(Incidentally this is a good presentation about the evolution of the Web!)
The first part of the address, http:// identifies the link is a WWW document which should be transferred using HTTP (hypertext transfer protocol).
Next, www.cscan.org is the server DNS (domain name system).
Finally, presentations/08-11-06-MikeEvans-Web.pdf is the file path to where the document is.
In the lab part of the session (sadly only for an hour this week) we looked at html and had a go at creating web pages. Unfortunately my work is not yet available as a web page, but never fear! There are some examples of html coding (with some explanation of what they do) below, but first I feel I should give a little introduction to explain what all the brackets are about!
Html is made up of tags, which look something like this: <strong> </strong>. Note the difference between these tags - the one on the left opens and the one on the right closes whatever the instruction is. In this example, <strong> makes the text strong, which is usually (but not always) bold in the browser. Most html tags require closing, so a recommended way to ensure you do this is to open and close when typing, then go back and put in the stuff in the middle. So, let's look at what all the tags do:
<html> - this specifies where the html code begins and ends
<head> - this contains information which is not displayed, and is useful for metadata
<title> - a fairly self explanatory one, this changes what you see at the top of your browser window
<body> - this begins and ends all the stuff in the web page
Adding links and images is slightly more fancy. The best way to demonstrate this, I think, is to show you what it will look like as well. Isn't that fancy? So to start with, let's do a link. The plan is to link to a BBC news article about pandas. But the link itself isn't very visually appealing: http://www.bbc.co.uk/news/world-12160538
To solve this problem, I'm going to put a link behind the words of the title, in this case 'Why do we love pandas?' So, here we are:
Why do we love pandas?
But how did I do that? Well, it's not too complicated. All you need is your link and the html know-how. It looks like this:
<a href="http://www.bbc.co.uk/news/world-12160538"> Why do we love pandas?>
As you can see, the web link is the anchor <a> referenced href in quotation marks "". The text I want to show is at the end.
What about an image? There are two choices - you can get one off the web or you can get one locally. I'm going to post a picture of a smiley chair which I've borrowed from here: http://pleated-jeans.com/wp-content/uploads/2011/09/thecomicrelief.tumblr.png
In order to do this, I'm going to use the following html:
<img src="http://pleated-jeans.com/wp-content/uploads/2011/09/thecomicrelief.tumblr.png" width="200" height="170" alt="Image of a smiley chair">
No doubt you've spotted the address, and I'm sure you can use your detective skills to identify what 'width' and 'height' are for. But what is alt for? It's what will come up if the picture doesn't load for any reason. It's also handy for software which reads the web page for you out loud. So without further ado, here is the smiley chair:
But maybe you're interested in formatting your web page and making it shiny? Of course you are. There's more than one way to do this. You can apply html coding in the web page code itself, for example you can use <strong> and <em> (emphasis). Using bold and italic are frowned upon but 'proper' web designers, as strong and emphasis often come up this way, but will also be accessible to other users, for example those with visual impairments.
Another way of formatting your web page is to use CSS (Cascading Style Sheets) but, I'm afraid that will have to wait for another blog. I had every intention of getting into the habit of writing 1000 words or less as practice for my coursework, but unfortunately I seem to have been unsuccessful (1,288 words and counting). So for now, I will bid you farewell. In my next blog I hope we can pick up on CSS, but I haven't planned that far ahead, and I may delve into some other Information Science topics before then, we will have to wait and see!
1Leiner, B.M., Cerf, V.G., Clark, D.D., Kahn, R.E., Kleinrock, L., Lynch, D.C., Postel, J., Roberts, L.G., Wolff, S. A Brief History of the Internet. [online] Accessed 4 October 2011
2Waldrop, M. DARPA and the Internet Revolution. [online] Accessed 4 October 2011
3Berners-Lee, T. (1999) Weaving the Web : the origins and future of the World Wide Web. London: Orion Business, p. 5
wow, I'm feeling inferior now since my blog posts don't have a Works Cited area... That's really awesome though, I like your examples and especially the Smiley Chair!
ReplyDelete