(This article is from here)
HTML stands for hypertext markup language. It's the language of the web. Learning it will empower you to publish your stuff on the web.
It's easy to let the best be the enemy of the good. Even with something as straightforward to learn as HTML, many tutorials overload the beginner. The aim of this tutorial is to teach the bare minimum that you need to make web pages as quickly and easily as possible. The tutorial assumes basic competence with standard PC software like Windows or the Mac, but assumptions are dangerous things. Run through the tutorial here, if you're new to computers.Lesson 1
Try this:1) get a text editor: Notepad (windows) SimpleText (mac), whatever.
2) Type "Already I am an HTML genius"
3) Save the file as genius.htm
4) Launch your web browser and use the open command on the file menu to open genius.htm
5) It all just goes on from there really. It's simply a matter of learning a few codes and using a text editor, e.g. BBEdit.
Lesson 2
false friends
You could get hold of a WYSIWYG* html editor. These programs try to make creating html as easy as using a word processor or desktop publishing program. Examples include Dreamweaver, and Microsoft Homepage. If you have Netscape Communicator around, it includes an HTML authoring programme, Composer. If you already have a word processed document and your word processor supports a "Save as..." html command (e.g Microsoft Word 97 or later) then you could give that a try. The purist would almost certainly disapprove of the code they generate, but it's a lovely sunny day out there, and the point is to communicate.That's fine if you just want to put a flat page up somewhere, but if you want to make links and otherwise control your page you're going to have to understand a little more. So read on.
*WYSIWYG = What you see is what you get
Lesson 3
seven essential tags
Way back in lesson 1, I pointed you to an intimidating page of html codes.Although it's nice to know you could look them up, trying to learn them all at once would be too much.
The seven html codes you actually need are:
- <HTML> (and its closing friend </HTML>) which begin and end an HTML file
- <HEAD> (and its closing friend </HEAD>: you're starting to get the idea already)
- In the head, you put some info about the whole file, most notably the page's <TITLE> (yes, there's </TITLE> too). The title is what appears in the title of the browser window by the way.
- The <BODY> tag which begins the body of the file (& </BODY>)
- <H1> (for a heading) Note, you can use H2, H3, et seq for successive sub-headings
- <P> (to begin a new paragraph)
- the anchor <A> tag, with which you make links.
what you actually type
in your text editor in a pair of horizontal rules.
A browser reads an HTML file from top to bottom, so first of all, we've got to tell it it's got an HTML file:
<HTML>
then we add the head, and the title, and close them off:
<HTML>
<HEAD>
<TITLE>This page declares my genius to the world</TITLE>
</HEAD>
With me so far? The title is what appears at the top of the browser window. The title of the page you are reading (not the one we are writing) is "how to learn html." You can use UPPER or lower case characters in the tags by the way. I've used UPPERCASE to aid readability of the code in this tutorial, though this is now deprecated by the HTML style gurus. And while we're talking about readability, note that the browser ignores returns and tabs, so use as many returns and tabs as you like to make your code legible.
Let's add a body and some content. It's good practice to repeat the title of your page as the main heading:
<HTML>
<HEAD>
<TITLE>This page declares my genius to the world</TITLE>
</HEAD><BODY>
<H1>This page declares my genius to the world</H1>
<P>Already I am an HTML genius.
</P>
That's quite enough effort. Almost done, but the best is last: let's make a link...
To make a link, you need to enclose two things in a pair of tags: the hypertext address of the page you're linking to, and the text on your page that indicates where the link will go.
We're going to link the word HTML on our page to a remote page: a beginner's tutorial on learning HTML. The URL (or address) of the remote page is "http://www.w3.org/MarkUp/Guide/". Note: unlike the rest of the content of tags, URLs are case sensitive: http://www.w3.org/markup/guide/ won't work. We need to take this address, and add it to our page, so that the browser recognises it as a link. It's almost easier to do than explain.
A link uses the <A> tag. A stands for anchor: you're a sailor throwing lines out to other pages; the anchor is stuck in your page. If I'd invented the web I think I might have called it the ROAS tag, for rocket on a string: you tie the link string to your page, then send the rocket blasting off to the next page. But I didn't invent the web, Tim Berners-Lee did, so there you go.)
The <A> tag is a little bit more complicated because we have to give it an attribute too; don't worry about this. Just take it from me that it looks like this: <A HREF="">. HREF stands for hypertext reference, and you put the page you want to link to between the quote marks thus: <A HREF="http://www.w3.org/MarkUp/Guide/">. Now we take the tag, and its closing chum </A> and use it to enclose the text we want to link to: in this case the word HTML in the sentence, "Already I am an HTML genius"
Already I am an <A HREF="http://www.w3.org/MarkUp/Guide/">HTML</A> genius.
All that remains is to close off the body, and tell the browser that's the end of the HTML file:
<HTML>
<HEAD>
<TITLE>This page declares my genius to the world</TITLE>
</HEAD><BODY>
<H1>This page declares my genius to the world</H1>
<P>Already I am an <A HREF="http://www.w3.org/MarkUp/Guide/">HTML</A> genius.</P>
</BODY>
</HTML>
Save your work as genius.htm once more, and view the resulting file in your browser. You may need to press SHIFT-RELOAD to force to browser to load the new file.
Lesson 4
read... and copy
Seen a nice web page? Look at the source (use the view menu in your browser). And there's the "Save as..." command too. Choose save as... html (or possibly source), then open the resulting file in your text editor. Not all will have code as simple as this one, but chopping other people's pages about, then reviewing the results in your browser, is a good way to learn.Look at the source of this page. What codes have I used that are not in the basic seven? Can you add your email address to genius.htm so that it is a live link? Hint: look at the source of my copyleft notice below.
Make another HTML file of your own. Use the <A> tag to link it to genius.htm, and genius.htm to it. Hint: have a look at the "Back" link on this page. You will find it easier if both files are saved in the same folder or directory.
Lesson 5
uploading your files
Local HTML files are all very well, but what you really want to do is publish to the world, right? Doing that means finding a little space on a computer that is always linked to the internet which serves webpages. Such a computer is known as a web server amazingly enough. It could be your own machine, but if someone else installed your computer, they probably locked you out of the right to do this for security reasons. If you own your own machine, you probably access the internet with a modem over a dialup connection. You could in theory serve pages over a dialup, but it would be slow for your readers, and you'd have to leave the modem connected day and night, which could get expensive.Either way, the practical reality is that you have to learn how to upload your pages to a remote computer. Exactly how you do this depends on how your system administrator or ISP (internet service provider) set things up, but the basic principle will be the same.
Make a folder called "website" or similar on your local machine. Stick all your HTML and associated files in there as you develop them. Use your browser(s) to test them locally. When you are satisfied, use a program that implements the file transfer protocol (FTP) to upload them to the equivalent folder on the web server.
Once you've done that, combine the address your sysadmin or ISP gave you with the name of the file you created, and test that the file can be downloaded over the internet.
For example, the file you are reading now is called how_to_learn_html.htm. My ISP Demon, gives me a domain called carnall.demon.co.uk, and this page is a file called how_to_learn_html.htm that I uploaded to my web directory on the Demon server. Its web address becomes http://www.carnall.demon.co.uk/how_to_learn_html.htm
No comments:
Post a Comment