GETTING STARTED WITH HTML Martin Erickson August 28, 2009
The purpose of this introductory guide is to help you begin using HTML, a language in which you can produce wonderful documents for the World Wide Web. The tutorial contains simple examples for you to try. It covers the basics, certainly enough to get you started. To learn more about HTML, you may want to consult the sources listed in Section 7 and in the references that follow. Contents 1. What is HTML? 2. How to create a simple page 3. How to add images to your pages 4. How to add links to your pages 5. How to design your pages 6. How to organize your pages 7. How to learn more References
1
What is HTML?
HTML (Hypertext Markup Language) is a document markup and hyperlink specification language. In a markup language, the layout of a page is specified by elements. In the case of HTML, an Internet browser responds to the elements and shows the pages. As a hyperlink specification language, HTML can be used to link to other documents on the Internet. HTML was introduced by Tim Berners-Lee at the Conseil Europ´eenne pour la Recherche Nucleaire (CERN). The original goal was to provide a communications system for particle physicists to exchange information. The HTML format has proven extremely popular for computer users in general, and is now the standard mark-up language for the World Wide Web.
1
Element html head body title strong em center hn (n = 1, 2, 3, 4, 5, or 6) br p ul ol li
Type structure structure structure information modification modification modification organization organization organization organization organization organization
Use defines document defines head defines body defines title boldfaces text emphasizes text centers text provides header provides new line provides new paragraph provides unordered list provides ordered list provides list element
object
link
provides image, document, etc.
img a
link link
provides image provides page, file, etc.
Attributes
BGCOLOR
data, type width, height src href
Table 1: Basic HTML elements.
2
How to create a simple page
In this section we describe how to create a minimal file, modify text, organize text, and create lists.
A minimal file Certain elements are necessary in every HTML document. Four basic elements are: • html • head • title • body Elements are given by pairs of tags, one to open the element and one to close it. For example, the html element is opened with and closed with . (Tags can be in upper- or lowercase letters.) Some elements may be opened and closed with a single tag, e.g.,
![]()
. In addition, elements can have attributes, i.e., added commands that tailor them for specific situations. Table 1 displays some basic HTML elements, most of which we will discuss in this guide.
2
Figure 1: A simple web page. Example 2.1. We create a minimal page. This and other examples can be created in a simple editor such as Notepad. Files are saved with the extension .html or .htm.
My Page Hello everyone! The file (saved as, say, example.html) can be opened with a web browser such as Netscape. The displayed web page is shown in Figure 1.
3
Modifying text At times we wish to change the character of certain text on a page. For example, we may wish to put text in italics or boldface. Italics or emphasized text is obtained with the em element, and boldface with the strong element. • em • strong Example 2.2. We add to the page of Example 2.1.
My Page Hello everyone! The web page is shown in Figure 2. Note. You can add some special symbols to your web page with the construction &symbolname;. For example, the string π produces the symbol π. Subscripts can be produced with the
and tags, superscripts with the
and tags.
Organizing text Text may be organized in an HTML document in a variety of ways. Paragraphs are produced with the p element. Centering is produced with the center element. • p • center Example 2.3. We add some paragraphs to our basic page.
4
Figure 2: A page with modified text.
My Page Hello everyone!
What are some good flavors of ice-cream?
The web page is shown in Figure 3.
Lists Enumerated lists are made with the ol (ordered list) element. Bullet lists are made with the ul (unordered list) element. • ol • ul 5
Figure 3: A page with paragraphs. Example 2.4. We add lists to the page of Example 2.1.
My Page Hello everyone!
Some good flavors of ice-cream:
6
Figure 4: A page with a list.
The web page is shown in Figure 4.
3
How to add images to your pages
You can add images to your file with the img element. • img Note. In fact, there exists a more general command, object, with which you can add images, sound, documents, etc. Example 3.1. We add an image to the page of Example 2.1. (This image would need to be available in a directory. You could create it yourself or copy it from another source.)
My Page
7
Figure 5: A page with an image.
Hello everyone!
Here is a neat image:
The web page is shown in Figure 5. Note. A word about style. There are many ways to format your HTML code. There are choices about whether to indent or not indent tags, use upper- or lower-case characters (or a mixture), etc. There may not be a best answer, except to choose a style that you like and stick with it.
8
4
How to add links to your pages
Hyperlinks are added with the a element. Type
text where address is the address of the link and text is what viewers are to see and “click on” to go to the linked page. • a Note. HTTP stands for “Hypertext Transfer Protocol,” a scheme for telling the browser how to open web pages. This protocol is an example of a scheme. There are schemes for pages, documents, etc. A scheme together with an address is called a URL (Uniform Resource Locator ). Example 4.1. We create a page with links.
My Page Check out the Basin-Robbins page.
And also take a look at the Ben and Jerry’s page.
The page is shown in Figure 6. Note. To use an image as a link, put the address URL of the image between the a tags. The construction is
, where the image is image.gif and the link is to http://address.
9
Figure 6: A page with links.
5
How to design your pages
A word about the design of web pages. The most important aspect of web page design is content. You should have something meaningful to present. Following content, the next most important consideration is clarity. Present your pages so that they are easy to read and navigate.
CONTENT + CLARITY
6
How to organize your pages
One popular, and very logical, way to organize your web pages is to follow a directory ordering. A main page has links to several secondary pages, the secondary pages may have links to further pages, and so on. The structure is indicated in the following diagram.
10
level 1 main page @@ R
level 3 page A1
level 2 page A
level 2 page B
@ R @
@ R @
level 3 page A2
level 3 page B1
level 3 page B2
Note. To summarize, in choosing how to organize your pages, you should strive to make it obvious to users how to navigate them and find information.
7
How to learn more
There are many features of HTML that are not discussed in this introduction, such as style sheets and the XML and XHTML generalizations. Here are some resources for you to investigate to learn more. A good introductory book on HTML is [1]. Also, for basics, please look at the sites
and . A good intermediate-level book is [3]. If you would like to examine XML, please see [2]. The World Wide Web Consortium (W3C) has a wealth of information on HTML and XML (including a service to validate your code) at . 11
References [1] E. Castro. HTML For the World Wide Web: Visual Quickstart Guide. Peachpit Press, Berkley, fourth edition, 2000. [2] E. Castro. XML For the World Wide Web: Visual Quickstart Guide. Peachpit Press, Berkley, first edition, 2001. [3] A. Navarro and T. Stauffer. HTML by Example. QUE, Indianapolis, first edition, 1999.
12
