WHAT HTML LOOKS LIKE



THE WEBPAGE

THE EXPLANATION

THE SOURCE CODE

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Mary Starke">
<title>StarkeTech:  Website Construction - What the Document Looks Like in the Browser</title>
</head>
<body>
<center><font face="Arial"><b><font size=+1 color="#000000">HYPERTEXT MARKUP LANGUAGE:</font></b></font>
<p><b><font size=+1 face="Arial" color="#000000"><a href="lang2.htm">WHAT YOUR DOCUMENT REALLY "LOOKS LIKE"</a></font></b></center>
<center><table CELLSPACING=14 CELLPADDING=14 width="400" >
<tr>
<td>
<center><font face="Arial"><b><font color="#000080">This document is composed of a title, a link, a table, two images, and the text in this sentence.</font></b></font>
<p><font face="Arial"><img SRC="mouse.gif" height=120 width=120></font></center>
</td>
<td BGCOLOR="#000000"><font face="Arial"><img SRC="tigrrr.gif" height=192 width=65></font></td>
</tr>
</table></center>
</body>
</html>



EXPLANATION

Each webpage has two versions: the HTML version, seen only in the plaintext editor, and the web version, seen in the browser. The code above is the HTML version of a webpage containing a few words of text, a link, two images and one table. It's the real thing, but definitely not WYSIWYG!

You don't see the HTML code on a webpage. (If you ask for it with the command VIEW SOURCE, you will get a separate window from your plaintext editor--if one has been identified.)  For this explanation, the text that I typed in is displayed in bold red letters. The names of the image files are in bold green. Everything else is generated automatically by the HTML editor. Without this HTML editor, I would have to know all these codes!  If I knew the codes, and could visualize how they relate to the viewed page, I could type everything in a plaintext editor like Windows Notepad, save the document with the htm extension, and then switch to a browser to view my webpage.

Notice that you can't see the tables, only directions specifying how the tables are to be displayed. There are no images in this HTML document, only the names and paths of the image files. If the image file is moved to another folder, the path is incorrect and the image will not be displayed. Sometimes adjustments in a document will disrupt the link between it and the image file, so you will need to re-insert the image.  If you have set up your website properly in FrontPage, the adjustments will be handled automatically.



EXAMPLE: To insert a picture, I have two options.
  1. In the plaintext editor, I can type <IMG SRC="mouse.gif" HEIGHT=120 WIDTH=120> into the source code.

  2.  
  3. In the HTML editor, I can click on the INSERT PICTURE icon on the toolbar (or INSERT | PICTURE) and click on the file name of the mouse image.
BACK TO THE CODE