When the internet was first established the four most common utilities were Email, Newsgroups (Usenet), Telnet (command line interface) and FTP (file transfer protocol).
The World Wide Web was invented by Tim Berners-Lee and released in 1991. Here is the world's very first web page.
Gopher was introduced around the same time by Paul Lindner and Mark P McCahill at the University of Minnesota. It was the first internet hypertext system - and only text. Here is the last remaining Gopher entry point.
The WWW was initially used in the form of text-only interface due to modem speeds, however now with faster internet speeds, images and other data can transfer much faster.
Every computer has it's on IP address and every website has it's own URL (uniform resource locator). Here is quite a bit of information on the history and the purpose of URL's. Let's break down a URL to understand it better. Take a look at this URL:
http://www.curtin.edu.au/curtin/dept/design/index.html
http = protocol
www = server name
curtin = domain name
edu = type
au = country
curtin = directory
dept = sub directory
design = sub directory
index.html = file name.
To register a domain name in Australia - there are many sites to do this. This is one. This is the one I used to register mine. To register international domains you can use this one, but there are many. A simple Google search will show many many results. The Internet Corporation for Assigned Names and Numbers shows the 'type' extensions, why and when they were all created.
Web Design Basics:
To begin building a website using html code, you need a text editing program. As I use a Mac computer, I downloaded the free Text Wrangler. There are many available. Google 'text editing program' and there are many free and paid versions.
In addition to using a text editor, it is a good idea to test your coding in more than one browser. I use the default browser, Safari and also downloaded Mozilla FireFox for Mac. The beauty of FireFox is you can also download additional plug-ins which are great for designers. I particularly like the add-on called ColorZilla. When you come across a colour on a webpage that you like - click on the ColorZilla tool, click on the colour and the html colour number is saved to a clipboard. Then when you return to your text editor to change the colour of your font or background - you have the html colour number ready to insert.
Here is an image of some html coding in Text Wrangler:
Here is what the above html code looks like in Safari:
And here it is in FireFox:
If you look closely you will see a difference between how the Safari browser displays the html code to the FireFox browser. The html code is identical with the exact same font type and font size, however it DOES look different. For interest's sake - have a look at this blog in more than one browser. It should differ in appearance - maybe a slight colour variation or font type or size. The more browsers you can test your coding in - the better! This exercise is taken from our textbook 'Head First HTML and CSS' by Freeman and Freeman. I will be working my way through this text book during NED11.
So what exactly is HTML?
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Emacs or vi on UNIX machines; BBEdit on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save your document as "text only with line breaks." (Information courtesy of http://www.put.com/HTMLPrimer.html).
Here is a very brief example of necessary html code required for a website:
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
If you want to learn html, there are many tutorials online. I would suggest starting with the W3 Schools. This is also another good beginner's guide.
Exercise 1: Web Design Basics
- The above code contains tags which make up the basic structure of an html document
- The <p> tag denotes the start of a paragraph
- The difference between a <p> tag and a <br> tag is that a <p> tag puts a line break above and below the text - similar to starting a paragraph. Whereas the <br> tag only does one line break below the text
- To create a bulleted list you use these tags: <ul> <li> and </ul>. The <ul> tag means unordered list and <li> means list
- To create a numbered list you use these tags: <ol> <li> and </ol>. The <ol> tag means ordered list
- When you open your browser and go to a website you will notice a title in the browser header (or the tab header if you use tabs). Look up! See the name of this blog in the browser title? This title is provided in the html coding in this way <title>Blogger: Internet Design Units</title>
- To add an image to html coding the required element (or tag) is <imgsrc="nameofimage.jpg">
- To add a link to html coding the required element is: <a href="URLhere">
- To make an image a clickable link you need to put the <img> element inside the <a> element. You need the URL of the site you want the image to take you to when clicked on AND the location of the image file. The code is entered like so: <a href="sitetogotowhenclicked"><img src="locationofimage.jpg"></a>. Don't forget to close your a href element with </a>
- The coding required to make a table 3 columns x 4 rows is:
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr>
<td>row 3 column 1</td>
<td>row 3 column 2</td>
<td>row 3 column 3</td>
</tr>
</table>
Definitions:
<table> begins the table and </table> ends the table.
<tr> is the beginning of a table row while </tr> ends the table row.
<td> is the table data cell. This is where the actual information is entered. </td> ends the table data cell.
Exercise 2: HTML Introduction
Exercise 2: HTML Introduction
- To provide invisible information in a html document, you type the element: <!--hidden text here-->
- Spaces between words should be entered as %20 so they are displayed properly. It is also important to ensure you use <br> and <p> effectively so your text appears as the browser exactly as you typed it in the html document
- You can provide additional information in your html document in the form of a small pop-up message when you hover your mouse over it. The tag is written like so: <img src="urlofimage.gif" alt="here is the pop-up message">
- You can create a link that jumps to a different section of the same page by using the <a> element as a landing point. There are three steps to this. Firstly find the location on the page where you would like the landing point to be (like a heading) and wrap a short piece of text in an <a> element. Then choose a name for this section of text like "jump to here" and insert an id attribute into the point you want to jump FROM, like so: <a href="URLofpagewithlandingpoint.com#landingpoint"FROM HERE</a>. This lesson on w3schools shows an example
- To show a table with empty cells you need to indicate the border width like so: <table border="1">. This creates a table with a border thickness of 1. The higher the number - the thicker the border
- To turn an image into a hypertext link you need to embed the URL of the image within the <a href> element. You can add a border around the image by using the element <img border="3" src="image" alt="URL" width="32" height="32"/>. Once again, the higher the number - the thicker the border
- To change the colour of hypertext links use this tag: <body link=#ff0000>. This will change all links to the colour red.
- To change the background colour of text, you need to add this html: p style="background-color:#FFFF00">. The colour is determined using the HEX value. HEX means the number used to identified colours used on the internet. Here are the HEX values of all colours.
A very useful tag:
To add an 'email to' link to a webpage, use the following tags within the body of html:
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>
No comments:
Post a Comment