A Few HTML Elements
The simplest HTML document looks like this:
<html>
<body>
</body>
</html>
Between the body start and end tag are elements. Elements can be nested inside of elements.
There are many types of HTML elements: paragraphs, images, links, tables, etc.
In this lecture we will study a few of the most useful elements.
My Music Library
The following examples show four ways to present a small music library containing artist/album/song information.
Here is how my site is organized:
The music1 folder presents the music library as a list.
The music2 folder presents the music library as a links. It also contains HTML files for each artist in the library.
The music3 folder presents the music library as a list.
The music4 folder presents the music library as an outline.
The images folder contains jpeg files that are images of the album covers.
Note: This lecture only contains the basics. Much fancier presentations using advanced HTML and power tools such as Dreamweaver are possible.
Note: The main HTML file in each folder is called index.html. If someone forgets to specify the html file in a URL. For example:
htttp://server.sjsu.edu/music/music1
Then the server automatically completes it as follows:
htttp://server.sjsu.edu/music/music1/index.html
This can make URL's shorter and easier to remember.
Outlines
HTML has heading elements: h1, h2, h3, h4, etc. These are ideal for creating web pages as outlines.
Notice the use of the horizontal rule element (<hr/>) to separate artists.
Links
If we have a lot of artists, then we can devote a web page to each one and create an index containing links:
Notice how links can appear inside of ordinary text.
Notice how album images are referenced using relative paths to the sibling images folder:
<img src = "../images/ees.jpg"/>
Compare to the absolute links to the Wikipedia articles:
<a href = "http://en.wikipedia.org/wiki/Eminem_Show">Wikipedia Article </a>
Lists
There are two types of lists: ordered and unordered.
An ordered list starts with the <or> tag.
An unordered list starts with the <ul> tag.
List items start with the <li> tag.
Notice how the HTML file is nicely formatted. Does this make any difference? The formatting done by the browser is totally different!
Tables
Tables are complex but useful. Here is the general format:
<table>
<tr><td>entry</td><td>entry</td><td>entry</td></tr>
<tr><td>entry</td><td>entry</td><td>entry</td></tr>
<tr><td>entry</td><td>entry</td><td>entry</td></tr>
</table>
There are many elaborations. Look them up!