Casa Basa ~ blending art with technology

Please Note: This lecture was originally designed with DW3 in mind, so may have some differences from your current version. However, all the information is still valid and useful! A little knowledge of HTML will help you land your first web design job.

About HTML

HTML stands for hypertext markup language. When you click on those underlined blue letters on a Web page, you have used hypertext. This is the main concept behind the World Wide Web. HTML is a markup language, which means that you start with text on a page, and add special tags around words or paragraphs. I learned HTML using the book Teach Yourself Web Publishing with HTML 4 In a Week by Laura Lemay (4th ed.) If you are interested in how HTML development is doing, or more about the World Wide Web Consortium (W3), you can check them out at the Consortium's site, http://www.w3.org/Markup/.

Hypertext enables you to read and navigate text and visuals in a non-linear way.

Hypertext allows you to click on a topic or link, that will take you to a new screen (or window or dialog box) that contains new information. You can link information within your own page, site, or with other sites on the World Wide Web. There's a tremendous amount of information, linked together in various ways, available for you to browse whenever you want.

The Web is popular because it is hypertext that gives you the ability to see something you type in text, appear as Web page on a browser.  Of course, we should be saying hypermedia, since we can now add video and sound to our pages.  Still, the Web began as a text-based system, and for the most part, Web content is predominately text. And the best part is, the Web is cross-platform. You can view it on any system that can access the Internet!

There are four basic HTML tags always on a web page: HTML, HEAD, TITLE and BODY.

HTML describes the structure of a page. Most documents have common elements such as headings, paragraphs, lists and FONT formatting, like BOLD and ITALICS. HTML defines each element and calls them tags. When you write a Web page, you label different parts of your document that says "This is the heading" or "This is a paragraph." HTML does not describe the page layout, however. HTML may indicate that an element is a heading or a paragraph, but it does not say how that formatting should look. Web browsers read an HTML page, and then maps the page elements for viewing on the screen. Different browsers, running on different platforms, will have different mappings for each page element. That is why you should always test your web page on different browsers, such as Internet Explorer or Netscape Navigator, so you can be sure your page looks good on whatever the viewer chooses to use.

Open a text editor, like BbEdit, SimpleText or Notepad, and type the following:

Tags usually consist of an opening and closing tag. The first tag, HTML, tells the Web browser that this is a web page. It is the very first tag and the very last tag on any page, and indicates that the content of this document is in the HTML language.

Any text between the HEAD tags is generally a prologue to the rest of the page. Generally, only a few other tags go within the beginning and end points of the HEAD tag. Usually, this is the page title itself.

The TITLE tag is nested between the HEAD tags. The TITLE indicates what your Web page is about and is used to refer to that page in bookmarks or hotlist entries. Titles will appear in the blue bar at the top of a browser screen. This is called a title bar. You should never put your content into the TITLE tag. Titles should be descriptive.

All the rest of your content will go into the BODY tags. This includes text, graphics, links, and so on.

After you create your HTML file, save it to disk. Choose SAVE AS to make sure you are saving it as text only. If you are using Simpletext, please note that it will automatically save as text. When naming your file, follow these two rules:

• The filename should have the extension .html
• Use small, simple names with no more than 8 characters and no spaces or special characters - just letters or numbers.

Now that you have created an HTML file, you can view it with a Web browser. Open your browser - you do not need to have it connected because you will not be viewing information on the Internet. Under the File menu, you will be able to browse for the page you just created. Open it and take a look at what you have just done. If your page is garbled, go back to the text editor and make sure you did not leave any tags incomplete and that you saved it in the proper text format (with the extension as .html, and the type as text.)

More HTML tags...

There are other elements that you will want to use in describing elements on your page. HEADINGS are used to divide your text into sections, just as in a book. HEADINGS are numbered in levels from H1 to H6 and are displayed as bigger or bolder text. Think of HEADINGS as outlining your page. Common practice is to use a first-level heading at the top of your page, and second-level to sixth-level headings to display sections. Although headings can be of any length, it can be tiring on the eyes if you use them for more than emphasis. Also, don't use headings for boldface type or to make certain pages stand out. There are other tags that you can use to achieve this, and that gives more consistent results.

The PARAGRAPH tags allow you to add some ordinary paragraphs to your text. When HTML was first written, PARAGRAPH tags were just one sided. The opening and closing PARAGRAPH tags are now accepted. Although the closing PARAGRAPH tag is optional, it is considered good practice to include it.

In your text editor, open the text document you did originally and add the HEADING and PARAGRAPH tags as shown below.

Save your page - remember to SAVE AS a text document with the extension .html. Now go back to your browser, refresh the screen, and look at what you have added. Your browser defined the three different size headings. If you were to look at the same page using a different browser, it would look different. The makers of the different browsers decides how the instructions of the tag will be interpreted.

ATTRIBUTES are extra parts of HTML tags that contain options or other information about the tag itself.

For instance, if you wanted your heading H1 to be aligned in the center of the page instead of the left which is the default, you would add the attribute ALIGN to the heading tag. It would look like this:

PHYSICAL STYLE tags tell exactly the way text is to be formatted, like bold, underline and italicize.

If you use physical style tag, you would open it and close it. If you want to bold the words hypertext mark up language, it would look like this:

Now save the document as text with the extension .html and then view in your browser. Remember to refresh the browser screen so that you will see the changes you have made.

Finally, you should become acquainted with Tables. Tables allow you to place your objects on your web page and "holds" them in place. If you didn't use tables, you would just have a continuous flow of words and images. Tables are a necessary tool in the web designer's kit. This is the html for creating a table with 3 rows and 3 columns. I've also inserted an image, and added a hypertext link. Can you tell which tags do which item?

This is a basic HTML page with some of the most used elements. There is much more to learn if you want to explore HTML in more depth. On the internet, you can go to www.webmonkey.com for a great HTML tutorial.