Web pages are written using a computer language known as HTML, which stands for HyperText Markup Language. This language allows the author to explain how the text in the page should be displayed on the page. It also allows images and other types of information to be placed on the page. HTML is a special case of a general system for marking up documents known as as SGML, which is the acronym for the Standard Generalized Markup Language. HTML is an evolving language. The current version (as of September 2000) is XHTML 1.0. The HTML marks are called tagsand they are used to define textual elements, such as headers, lists, emphasized text, images, hypertext links. Elements generally consist of text preceded by an "open tag" and followed by a "closed tag." The open and closed tags have the following forms
<ELEMENTNAME ...> text and subelements go here </ELEMENTNAME>where ELEMENTNAME is the name of the element. Some elements (such as the line break element
<br>
and the
horizontal rule element <hr>
) have an open tag, but no close tag.
!DOCTYPE
,
HTML
,
HEAD
,
TITLE
,
BODY
.
Press the submit button to see the webpage specified
by this HTML
Change the HTML and see how the resulting webpage changes. |
The simple html example above shows several elements
!--
and the comment follows the element name and ends with
-->
.
In practice, web browsers are designed to display web pages for any version of HTML
and indeed, the most useful web browsers will even attempt to display pages which
contain ungrammatical HTML. For this reason, most browsers will allow you to eliminate
the !DOCTYPE, HEAD, TITLE, and BODY tags. So we could get almost the same effect for most
browsers by simply writing "Hello World!
in the HTML file without any
tags. Try this on your browser by deleting the html in the demo page about
and replacing it with "Hello World," then press submit. What happens on your browser?
Many browsers now contain page creation software which will allow you to create your own pages without having to learn HTML. Nevertheless, if you want to understand how web browsers work, you will need to understand the syntax and semantics of HTML.
One of the best way to learn how to create HTML documents is to find pages you like and then see how those pages were created. Most browsers provide a menu item for viewing the SOURCE of a page. This will allow you to directly view the HTML specification of which ever page you are currently viewing.
You can interactively experiment with html tags using the html demo windows that are sprinkled throughout this webpage. There is also a standalone HTML demo page if you want to link to it from your page.
These demo windows allow you to type in html code and then press the "submit" button to see how it looks. Try it now
To change your html, you hit the "back" button, modify the code, and hit the "submit" button again.You can also experiment with HTML by creating a document on your local hard drive using the editor of your choice. Save the document in a file named "test.html" and save it as "text". Then, in the File menu of your browser, select the "Open Page" option, and specify that the file "test.html" should be opened. This will cause the browser to load in your page. You can then bounce back and forth between your editor and the browser to see how the page is developing. This is the usual way to go about build a web page. However, for learning html, we provide a simpler method on this page in which you just type HTML into the textarea and hit the submit button. The drawback is that you can't save your html in a file unless you select it with the mouse, move to an editor, and paste it into a file.
<p>
tag. The end tag for
a paragraph is not required, but it can be useful if you want to add some
attributes to the paragraph (e.g. centering it).
The end tag of the "li" element can be omitted.
For numbered lists the same syntax applies,
As an exercise try embedding a list in a list, |
Definition lists have a different syntax. Each list element consists of two parts: a term to be defined, and the definition. These are indicated by the "dt" and "dd" tags respectively. The list is begun and ended using the "dl" and "/dl" tags.
Press submit to generate the following list:
Try modifying the list to add a fourth term. |
Try modifying the links to have them jump to other pages. |
For a more interesting example, consider the of following.
Try modifying the links to have them jump to other pages. |
In general, hyperlinks have the form
<a href="PROTOCOL://DOMAINNAME:PORT/FOLDER/FOLDER/.../FILE.EXTENSION#POSITION> TEXT THAT APPEARS IN THE HYPERTEXT LINK </a> |
where
PROTOCOL
is http
for web pages
DOMAINNAME
specifies a computer and can optionally
be followed by a :PORT
number (the default is port 80 for web pages).
FILE.EXTENSION
which typically
ends in html
for web pages
#POSITION
in the file, the default
is to jump to the top of the web page.
As usual, you can modify this html and see what happens.
Change the "alt" text, push "submit", and then move your mouse over the
picture and your new text should appear. Try to enclose the image
in an anchor tag <a href=...> , so that when you
click on the picture you go the cs2a home page!
|