Setting up websites
A guide to the elementary stages of creating a web page and how hyperlinks are written
PRACTICALLY every page of the Journal these days has an e-mail or website address on it. Firms have spent massive amounts of money on computers and software. Some of us are enthusiastic about the possibilities of these things. Very few of us, however, have a clue about how the underlying technology actually works. The purpose of this article is to provide a quick demonstration of how websites are written. There’s nothing particularly startling here, just notes about the basic elements which will allow you to tell a computer to render straight text as a website rather than, well, straight text. There’s a demonstration of how hyperlinks work. Hyperlinks are the main defining element of websites: understanding these is essential to understanding the nature of the medium. You won’t need any fancy equipment, just Notepad and Internet Explorer. If you have a standard Microsoft office suite, you’ll have these. If you want to learn more, I’ve listed some books at the end which I’ve found very useful and accessible.
Do this by clicking the right mouse button while the cursor is on the computer’s “desktop”. A menu will appear. Click on “new”. A sub-menu will appear. Click “folder” on the submenu. A new folder will appear on the desktop. You’re going to be saving two files in there later on.
Write your first webpage
Open Notepad. If you don’t know how to do this, follow this path:
Type the following text into Notepad:
divorce section
What’s going on there? What are all those angle brackets doing? Real live websites are stored in computers call servers. They are stored there not as you see them on your computer at home, but in a formatting language called HTML (HyperText Markup Language). HTML, like any other language, is made up of words which have a particular meaning to a person who speaks that language. HTML words need to be surrounded by angle brackets before a computer can read them and understand their meaning. You’re at home and you call up a website from a server: the server sends it to your computer: your computer then starts reading the HTML inside the angle brackets: those HTML words tell your computer how to display the site on screen. What is stored as straight text with lots of angle brackets on the server can then appear as formatted text on your screen. How does your computer know how to read HTML? When the straight text file arrives at your computer, it carried with it some information which tells the computer that it’s a website. The computer then knows to start running a program called a browser. The browser is programmed by its manufacturer to understand HTML. It reads what it’s been sent and displays it on screen according to the instructions contained in the angle brackets. Internet Explorer and Netscape Navigator are the two most common browsers. If you’ve ever looked at a website, you’ve probably looked at it through one of these. This is what they are doing behind the scenes:
1.
when the browser sees this it knows it’s about to be asked to display a website written in the html language.
2.
the phrase h3 tells the computer to display the text contained between the two tags at a predefined heading size of 14 points. Note that the second tag starts with /. This tells the computer that the instruction to display at h3 size ends there.
3.divorcesection
this stands for “anchor hypertext reference.” It’s one of those hyperlink things. It tells the computer that when the words between the two tags are clicked on, the computer should go find and then display the page referred to, in this case a page called secondpage.html. Because this is a two page site stored in one file on your computer, the “address” of the page is short, just the name of the page. The hyperlink could be to any page anywhere, in which case the address would be much longer. A link to, say, Geocities, would give the full address, www.geocities.com.
4.
this tag tells the computer that this particular html documents ends at this point. Generally speaking, all html tags come in pairs, with the closing tag preceded by a /.
Save your first webpage
Once you’ve typed the text into Notepad, click file | save as. A box will pop up which asks you where and in what form you want to save the Notepad document. IN the “save in” select-menu, find and select the folder which you set up at the beginning. Then, at “file name”, type firstpage.htm. Then, at “save as type”, make sure it’s being saved as a text document. At this stage, you need to understand about file extensions. File extensions are the three letters which appear at the end of a file name. The purpose of the file extension is that it tells the computer what program to start in order to display the file. If you go bother your secretary, she will show you that your letters have the extension .doc, which tells the computer to start Word in order to display this document. If you were to save the page you’ve just typed as firstpage.doc then it would open in Word, which is not what you want. If you saved it as firstpage.txt, then it would open in Notepad. Instead, though, you want it to open in Internet Explorer as a website. To do that, you call it firstpage.htm and those final three letters tell the computer to open it as a website.
Open the folder. It should contain the document firstpage.htm. Double-click on that. It should open in Internet Explorer. Note that although the Notepad document was peppered with angle brackets, neither they nor the words which they contained appear on screen. The browser knows that they are simply formatting instructions and should not be displayed on screen. If you want to see where they have gone, go to the menu bar at the top of the browser and click view | source. Notepad should open, containing your original text. Next time you’re online, click view | source to see the HTML source code for the page you’re looking at. With experience, you can read the author’s intentions and, to a certain extent, “borrow” their coding if you see something you like. Source code is written and, accordingly, attracts copyright automatically. No-one will mind you using their scripts as a learning exercise but wholesale rip-offs and commercial application of complicated Javascripts could cause you problems. Moving the cursor over the words “divorce-section” should turn the cursor into a hand, which means it’s a hyperlink. It’s got nothing to link to just yet, so let’s draw up the second page.
Use Notepad again to enter this text:
This is our divorce section.
back to main page
Then save it as described above in the folder you set up at the start, but this teime save it as secondpage.htm. This time you may have noticed that the tag contains a thing call a title property. This causes a little tooltip to pop up when you put the cursor over a button in Word. The whole point of HTML and other languages is that a basic shell can be developed by adding qualifications such as this to it.
Set up a folder to put the site in
Do this by clicking the right mouse button while the cursor is on the computer’s “desktop”. A menu will appear. Click on “new”. A sub-menu will appear. Click “folder” on the submenu. A new folder will appear on the desktop. You’re going to be saving two files in there later on.
Write your first webpage
Open Notepad. If you don’t know how to do this, follow this path:
- start
- programs
- accessories
- notepad.
Type the following text into Notepad:
Any Old Solicitors
divorce section
What’s going on there? What are all those angle brackets doing? Real live websites are stored in computers call servers. They are stored there not as you see them on your computer at home, but in a formatting language called HTML (HyperText Markup Language). HTML, like any other language, is made up of words which have a particular meaning to a person who speaks that language. HTML words need to be surrounded by angle brackets before a computer can read them and understand their meaning. You’re at home and you call up a website from a server: the server sends it to your computer: your computer then starts reading the HTML inside the angle brackets: those HTML words tell your computer how to display the site on screen. What is stored as straight text with lots of angle brackets on the server can then appear as formatted text on your screen. How does your computer know how to read HTML? When the straight text file arrives at your computer, it carried with it some information which tells the computer that it’s a website. The computer then knows to start running a program called a browser. The browser is programmed by its manufacturer to understand HTML. It reads what it’s been sent and displays it on screen according to the instructions contained in the angle brackets. Internet Explorer and Netscape Navigator are the two most common browsers. If you’ve ever looked at a website, you’ve probably looked at it through one of these. This is what they are doing behind the scenes:
1.
when the browser sees this it knows it’s about to be asked to display a website written in the html language.
2.
Any Old Solicitors
the phrase h3 tells the computer to display the text contained between the two tags at a predefined heading size of 14 points. Note that the second tag starts with /. This tells the computer that the instruction to display at h3 size ends there.
3.
this stands for “anchor hypertext reference.” It’s one of those hyperlink things. It tells the computer that when the words between the two tags are clicked on, the computer should go find and then display the page referred to, in this case a page called secondpage.html. Because this is a two page site stored in one file on your computer, the “address” of the page is short, just the name of the page. The hyperlink could be to any page anywhere, in which case the address would be much longer. A link to, say, Geocities, would give the full address, www.geocities.com.
4.
this tag tells the computer that this particular html documents ends at this point. Generally speaking, all html tags come in pairs, with the closing tag preceded by a /.
Save your first webpage
Once you’ve typed the text into Notepad, click file | save as. A box will pop up which asks you where and in what form you want to save the Notepad document. IN the “save in” select-menu, find and select the folder which you set up at the beginning. Then, at “file name”, type firstpage.htm. Then, at “save as type”, make sure it’s being saved as a text document. At this stage, you need to understand about file extensions. File extensions are the three letters which appear at the end of a file name. The purpose of the file extension is that it tells the computer what program to start in order to display the file. If you go bother your secretary, she will show you that your letters have the extension .doc, which tells the computer to start Word in order to display this document. If you were to save the page you’ve just typed as firstpage.doc then it would open in Word, which is not what you want. If you saved it as firstpage.txt, then it would open in Notepad. Instead, though, you want it to open in Internet Explorer as a website. To do that, you call it firstpage.htm and those final three letters tell the computer to open it as a website.
Test your first page
Open the folder. It should contain the document firstpage.htm. Double-click on that. It should open in Internet Explorer. Note that although the Notepad document was peppered with angle brackets, neither they nor the words which they contained appear on screen. The browser knows that they are simply formatting instructions and should not be displayed on screen. If you want to see where they have gone, go to the menu bar at the top of the browser and click view | source. Notepad should open, containing your original text. Next time you’re online, click view | source to see the HTML source code for the page you’re looking at. With experience, you can read the author’s intentions and, to a certain extent, “borrow” their coding if you see something you like. Source code is written and, accordingly, attracts copyright automatically. No-one will mind you using their scripts as a learning exercise but wholesale rip-offs and commercial application of complicated Javascripts could cause you problems. Moving the cursor over the words “divorce-section” should turn the cursor into a hand, which means it’s a hyperlink. It’s got nothing to link to just yet, so let’s draw up the second page.
Write your second webpage
Use Notepad again to enter this text:
This is our divorce section.
back to main page
Then save it as described above in the folder you set up at the start, but this teime save it as secondpage.htm. This time you may have noticed that the tag contains a thing call a title property. This causes a little tooltip to pop up when you put the cursor over a button in Word. The whole point of HTML and other languages is that a basic shell can be developed by adding qualifications such as this to it.
Share this article
In this issue
- President's report
- Survival in the IT age
- Competition Act: the dot.com impact
- Accessing legal resources through the web
- The E-commerce Directive: what does it mean?
- Setting up websites
- Representing clients in mediation
- Belgian challenge to Rioja dismissed
- Defining contaminated land
- Timeshare interests in salmon fishings
- Conveyancing
- When clients ask and expect too much