html stands for hypertext markup language. It was originally invented as a way of exchanging information in text only with no formatting, but with one main advantage over normal written word. The language, or more appropriately script, allowed the author to embed links between information, thus making it easier to gain more information. It has gradually evolved to include all kinds of media, sounds, some formatting, and even the ability to embed code to be executed on the reader's computer. So the author writes a script, which tells the computer which views the document how to display things, and how to interlink parts of documents and files. Multiple web pages can be linked together to form a web site. Here is an example:
|
<html> |
this will display the following in a web document (ie. in firefox, safari, or internet explorer):
This simple little document contains quite a bit of useful information to you as a web designer. Let's look at what makes it up more carefully...
The basics of tags
first you may notice some things in brackets, like <html> or <p>. These are referred to as "tags" because they operate on what is between the opening tag and closing tag: <b> hello </b> puts hello in boldface (it is "tagged" as boldface). We'll lay out most of the tags you'd need in a table later on (makes a handy quick reference card). They are called "embedded" because the tags themselves are not displayed to the web surfer, they are only used by the computer.
There is a basic format to an html page. You essentially need, for a standard document, the following (the opening and closing tags are color coded to each other for clarity here):
|
<html> <head> <title>The coolest web page in the universe! </title> </head> <body> </body> </html> |
<html> </html>
The <html> and </html> mark the beginning and end of the document.
<head> </head>
The document needs a heading, which contains the title and can have other information inside, such as whether the code is generated by a program like Macromedia Dreamweaver, Claris Homepage, Microsoft Frontpage, Adobe Indesign, etc.
<title> </title>
The <title> tag is what you see at the top of the window bar- this is not necessary but really helps clarity of where a person is in your web page. It is not unlike having a whole library of books which are each unique, but all look the same and have no title. That would be a bit hard to find what you're looking for!
<body> </body>
The <body> tag marks the main body of your web page, i.e., what you are going to display in the window. This can be text, links, images, video, sound, and other embedded information.
Now if you scroll back up to the hello world example, you can see this basic formatting quite clearly. The only things that are added are three blank lines ( <p> </p> ), a comment (<!--This is a comment-->), and the hello world text which is put in bold (<b>Hello World!</b>). That's it! you can even copy and paste the basic code from above and modify it.
To learn about html, search the web, and when you see an interesting web site design, try looking at the code. That is a great way to learn about the web. Some web sites use something called Javascript, which is similar to a programming language, and allows things like interactive graphics. But even that code can be useful and if carefully scrutinized can become clear.
A side word about comments: COMMENT YOUR CODE!!! It will make it much more readable in the future and as you go. The bigger and more complex your web page is, the harder it can be to read, so try to clarify things with comments. Anything between the comment tags is a comment, which means the web browser won't do anything with it, it's just in your code. But anybody who looks at the web page can also view the code (in netscape, for example, select view->page source from the menu bar at the top), so consider that when you write comments.