|
|
|||||
Thinkydink Guide to Editing HTML With No Tools or Experience
As with most ThinkyDink tutorials, this guide is not intended as a substitute for any sort of in-depth training. This guide is intended to save your skin when you find yourself with out-of-date or incorrect web pages, a looming deadline and no web person to help you out. This guide doesn't cover information related to uploading your pages, just getting them ready to go. Your ftp program's help files should cover all the details about how to put your pages on the server.
A web page is just a document, the same as an MS Word file, a typewritten letter or a plain text file. HTML, or Hyper Text Markup Language, is the "language" used to create web pages. ASP, Javascript, VBScript and CGI are examples of programming languages used to create web applications.
As a rule of thumb, any web site that accepts input from the user, does something with that input and then returns some kind of response to the user contains a web application. For example, an e-commerce site like Amazon can accept search conditions from a user, perform a search of its inventory, return a set of matching products for the user to review, and then accept payment for items the user wants to purchase. ThinkyDink, by comparison, is pretty similar to a book or magazine except that you're reading it online instead of on paper.
Unlike the programming languages used to create web applications, HTML is pretty easy for the average, untrained person to understand. It's all written in plain English, using everyday words and some abbreviations. More astonishing still, in HTML, the words and abbreviations actually mean what they say! Once you become familiarized with the tags and how they work, they won't be any more daunting than ordinary text. So you see, editing a web page doesn't have to be any scarier than editing a letter and in a pinch, you can get by with minimal knowledge and no prior experience.
Now Hold On A Minute There, Sparky
Before you go diving right into the deep end of the web development pool, there are some things you should know.
HTML pages can contain snippets of web application programming and web application pages generally contain some HTML also. If you don't know what you're doing, LEAVE THE WEB APPLICATION CODE ALONE. You can break a web application very easily, with as little as one wrong character in a whole page of code. What's worse, when your web application is broken and uploaded to the web, the whole world will see it and judge you or your company accordingly. This guide will walk you through reading an HTML page and using the most common tags, but anytime you're faced with something that isn't covered here you're best advised to bring in a professional web developer to do some work on your site.
Also, ALWAYS BACK UP THE ORIGINAL PAGE BEFORE YOU BEGIN EDITING IT. That way, should you find yourself beyond your depth, discover you've made a major blunder or just lose your nerve halfway through, you can always restore the original page.
How to Read the HTML Code of A Web Page
In the most basic sense, creating a web page is as easy as writing out the text you want on the page, then labeling the text as HTML. Look at the following little block of text:
<HTML>
Hello, World!
</HTML>
That little block of text is all the "code" that's needed to create a web page. Don't believe me? Here's a link to the page created by that text. You can think of HTML code as instructions to the web browser, explaining what to display and how to display it. Here's that block of code again, but this time I've added some comments to clarify what each part of the code is doing:
<HTML> Begin HTML (Hey browser, this is a web page!) Hello, World! Content of the page </HTML> End HTML (Hey browser, that's the end of the web page!) So, that's our page. You can open Note Pad right now, type this same block of text, then save the file as Hello.html (or anything else, so long as it ends with .html) and presto, you've authored your first web page. That's where the "no tools" part of this tutorial comes in - you can open any page with a .html or .htm extension in Note Pad (or any other text editor) to edit the HTML.
It's not a very nice page, however; it doesn't have a title at the top, it doesn't have any color or graphics, and it's just generally kind of blah. But that's only because the only thing in the content section, or "body", of the page is the text, "Hello, World!"
The Browser Is No Dummy
You'll notice that the browser didn't have to be told what font to use, or what color to make the text, or to make the background of the page white. White is the default background color for all web pages, so if you don't specify a different color (I'll show you how later on) the background of your page will be white. There is also a default font setting which may vary from browser to browser, but is generally Times New Roman. That's the font the browser will use unless it's told to use something else. The size of the font and the black color you see on Hello1.html are also default values.
Using HTML to Boss the Browser
So if HTML is the language used to tell the browser what to do, how does it work? It's very simple. In Hello1.html, there are two pieces of HTML code: <HTML> and </HTML>. These pieces of HTML code are called "tags". They always appear between brackets (the "<" and the ">"), and most often they are used in pairs. The first tag of a pair is typically referred to as the "opening" tag and the second as the "closing" tag.
The first tag of the pair is like an on switch: it turns on an instruction to the browser. The browser will keep doing whatever the first tag of the pair says until it comes to the second tag of the pair, which is like an off switch: it turns off the instruction to the browser. "Off" tags always start with a forward slash ("/") and often, that's the only difference between the opening and closing tag.
Essential Tags - Text Formatting
The basic method, or "syntax", for all HTML tags follows our Hello1.html example:
<OPENING TAG>Text to be affected by tags</CLOSING TAG> The following table demonstrates some different tags used to format text and the resulting text. I'll present a summary table later on; this one is intended more as a learning tool than a reference.
<HTML>
<FONT FACE=Arial>
Hello, World!
</FONT>
</HTML>
Hello, World!
The <FONT FACE> tags apply a different font to your text. As long as you know the name of the font and it's a standard face (one typically included with any word processor), you can apply it using the FONT FACE tags. <HTML>
<FONT FACE=Arial>
<B>
Hello, World!
</B>
</FONT>
</HTML>
Hello, World!
The <B> tags make your text bold. Notice how I've "nested" the <B> tags inside of the <FONT FACE> tags to apply both the Arial font and bold formatting. I could've reversed the nesting order, or used either pair of tags by itself, too.
Also notice how I've typed my tags on separate lines of my HTML code file; this makes them easier to read but doesn't affect the resulting web page at all.
<HTML>
<FONT FACE=Arial SIZE=4>
<B>
Hello, World!
</B>
</FONT>
</HTML>
Hello, World!
Here, I've enlarged the text. In HTML, you can set text to a size ranging from 1 to 6, where 1 is the smallest, 6 is the largest and 3 is the default. The text you're reading now is set to size 2.
Notice how both "font face" and "size" are enclosed in a single opening tag. Also note how that single opening tag is closed with a single closing tag of </FONT>. Font face, size and color can all be grouped together into a single tag but other text properties, such as alignment, bold and italics, use separate tags of their own.
<HTML>
<FONT FACE=Arial SIZE=4 COLOR=Red>
<B>
<I>
<U>
Hello, World!
</B>
</U>
</I>
</FONT>
</HTML>
Hello, World!
I've added three more tags, one for italics, one for underlining and one for font color. Can you guess which one is which? It's just as easy as I told you it would be.
Look at how the tags are nested, and how I enter the closing tags in the same order as I entered the opening tags. The closing formatting tags can be put in any order, but I find that I'm less likely to leave any out if I repeat the opening tag order in my closing tags. You may prefer to do something different.
About underlining - since in web pages underlined text is assumed to be a link, it's not a good idea to use underlining on plain text.
While I've put each tag on a separate line, that isn't necessary. If you wanted to, you could write all of the HTML code on a single line. The resulting web page would look the same, but it would be harder to read and edit your code. Developers have varying preferences for how many tags to use on a single line.
Using Colors in Your Web Pages
There are two ways to set text and background colors in HTML: "named" colors and "hexadecimal" colors. Named colors are the eight standard hues on the color wheel: white, black, red, blue, yellow, green, orange and purple. You can set any of these colors just by typing the desired color name in the tag, as I've done in the <FONT> tag just above. Hexadecimal color numbers are used to describe all the other colors you can use on the web - over 250 of them. Consider the following table, in which the hexadecimal number of each color appears in its corresponding cell:
If you didn't use a numbering scheme of some kind, how would you distinguish the two pinkish colors in the table from one another? And the two greenish ones? The use of hexadecimal numbers ensures that every one of the available colors will have a unique "name", and that those names will be known to all browsers. Unfortunately for you, hexadecimal numbers are not easy to remember. You can obtain a key to hexadecimal color names here, but to keep things simple you can always stick to the eight named colors for text. The eight named colors are a little bright for backgrounds, though (see next section).
Essential Tags - Page Formatting, Links and Email
So, now you know all about formatting text. But what about the rest of the page, and what if you want to include links or email addresses in your page? The following table lays out those variables for you. Again, all of this will be included in a later reference table.
<HTML>
<HEAD>
<TITLE> Hello, World!</TITLE>
</HEAD>
<BODY>
Hello, World!
</BODY>
</HTML>
Hello, World!
The <HEAD> tags insert a page header. The title of the page, which will appear in the browser title bar, is entered using <TITLE> tags and is always stored in the <HEAD> section.
The header can also contain information about the page, such as author name and keywords, or pieces of web application code. Nothing entered in the <HEAD> section will be visible on the page, except for the title, which will appear in the browser title bar. For now, the only header information you're likely to use is <TITLE>.
Since we've added a header to our page, we must tell the browser which part of the page is the main body. To do that, we use <BODY> tags.
<HTML>
<HEAD>
<TITLE> Hello, World!</TITLE>
</HEAD>
<BODY BGCOLOR=Purple>
Hello, World!
</BODY>
</HTML>
Hello, World!
The <BODY BGCOLOR> tag sets the background color of your page. If you use the <BODY BGCOLOR> tag to set a background color, you don't need to use a separate <BODY> tag. Notice that even though our opening BODY tag is both a BODY and a BGCOLOR tag, we only use the single </BODY> closing tag.
As to the color itself, see what I was talking about? If you think that purple is loud in this table, imagine it as the background for an entire page!
You can also set the background of the page to a graphic file, or "image". More about that later.
<HTML>
<HEAD>
<TITLE> Hello, World!</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.thinkydink.com/Hello1.html>
Hello, World!
</A>
</BODY>
</HTML>
Hello, World!
The <A HREF> and </A> tags make the text between them into a hyperlink, underline the text, and change its color into the default hyperlink color for the browser (usually blue). Note the syntax:
<A HREF=link address>
Linked Text
</A>
I've put the opening tag, linked text and closing tag on separate lines for clarity, but usually everything between the <A HREF> and </A> tags appears on a single line. I'll go into more detail about hyperlinks later.
<HTML>
<HEAD>
<TITLE> Hello, World!</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.thinkydink.com/Hello1.html>
Hello, World!
</A>
<A HREF=MAILTO:webmaster@thinkydink.com>
Email me.
</A>
</BODY>
</HTML>
Hello, World!
Email me.
Now I've added some more text, and made that text into an email link. When the user clicks on the email link text, the browser will launch its internal mail program and pre-address a mail message to whatever address is specified in the link.
Notice that the basic email link syntax is exactly the same as that used for hyperlinks. The link itself, however, is a little different. Where the hyperlink address is a typical web URL, the email link address is the email address with a prefix of "MAILTO:"
Tables in web pages can be a tricky business, especially when they're nested (tables within tables) or when their borders aren't visible. Tables are often used by designers to achieve a certain kind of layout, and in that case the developer doesn't intend for the viewer of the page to be aware of the tables at all. Also, tables have many possible options for settings, or "attributes", such as border size, border color and cell background color. I will not go into great depth on this subject, but I will provide the following table and its associated code as a simple introduction:
One Two Three Apple Banana Carrot Generally, I observe the practice of typing all my tags in uppercase to make them easier to distinguish from the content of the web page, but in the table below the tags are in lowercase to save room. You can type your tags as all uppercase, all lowercase or a mixture of both; any way you do it, they'll work the same.
Line of Code Meaning <table width="75%" border="1"> Begin table; set table width to 75% of the page width, set table border width to 1 <tr>
Begin table row <td><font color="#000000">One</font></td>
Set table data (td) to "One"; set font to #000000; end table data - each td tag used creates a new cell in the row <td><font color="#000000">Two</font></td>
Set table data (td) to "Two"; set font to #000000; end table data <td><font color="#000000">Three</font></td>
Set table data (td) to "Three"; set font to #000000; end table data </tr>
End table row <tr>
Begin table row <td><font color="#000000">Apple</font></td>
Set table data (td) to "Apple"; set font to #000000; end table data <td><font color="#000000">Banana</font></td>
Set table data (td) to "Banana"; set font to #000000; end table data <td><font color="#000000">Carrot</font></td>
Set table data (td) to "Carrot"; set font to #000000; end table data </tr>
End table row </table> End table So you see how tables work: first you begin the table, then you begin a row. You populate the row with cells of data, then you end the row. You begin, populate and end as many rows are as needed this way, then you end the table after you end the last row.
In the code shown above, notice how the <tr> tags are indented from the <table> tags and the <td> tags are indented from the <tr> tags. This doesn't affect the layout of the table or the page, but helps to keep the various rows and cells organized for easy reference when you're editing the code. If you're missing a <td> value for a row, it will be easier to find if you indent your tags.
Again, this brief introduction to tables is only intended to give you enough information to recognize table tags when you see them, and to edit those tags when necessary.
Hyperlinks - There are three kinds of hyperlinks: on-page, on-site and off-site. This table gives an example of each:
It's not important for you to fully understand the syntax and use of these different kinds of hyperlinks if you're in an emergency editing situation with someone else's web page. What is important is that you know about the three different types and can recognize them when you see them.
Named Anchors - Named anchors, as mentioned above, are placeholder HTML tags which are embedded in web pages to serve as bookmarks. You create a named anchor by positioning your cursor where you want the anchor to be, then typing this text:
<A NAME=anchor name></A>
Notice that with the named anchor tags, nothing is typed where the "text to be affected" usually goes. This is because you don't want the anchor to be visible on the page so the "text to be affected" is - nothing. Once you've created the anchor, you can link to it from anywhere on the same page by creating an on-site hyperlink:
<A HREF=#anchorname>text to be affected by tags</A>
See the "Back to Top" hyperlinks all along the left-hand side of this page, at the bottom of each section? Their syntax is <A HREF=#top>Back to Top</A>, and they refer to a named anchor called "top" which I created just to the left of the heading at the top of this page.
Graphics in HTML pages
The syntax used to insert graphics in web pages is: <IMG SRC=filename or address>
Place your cursor where you want the graphic, then use the syntax above to set the source of the image. Note that images used in webpages must be accessible to the site from the server where the site is hosted, so don't save graphics to your local hard drive and then reference them as <IMG SRC=c:/images/mygraphic.gif>. Most websites use an "images" folder to store all the graphics used on the site together with the rest of the site content. Remember that all graphics must be in .gif or .jpg format.
To use a graphic as a background on your page, modify the opening <BODY> tag as follows: <BODY BACKGROUND=filename or address>.
If you use a background image this way, be sure that the image is very light, like a watermark on paper, and that it's not so busy that it will distract the viewer from your page content. Also be sure that the chosen image is one that will "tile", or repeat across and down your page, easily. Abstract, repeating designs usually work best.
For more information about creating your own graphics, see Stupid Graphics Tricks I.
Text Headers
A text header is a line or section of boldface text that is slightly larger than, and set apart from, the main body text. Text headers are most often used for page or section titles, such as the title "Text Headers" which appears just above this paragraph.
Text headers can be set to a value of 1 through 6, with 1 being the smallest size/emphasis and 6 being the largest size/emphasis. You can set text headers by applying font size and boldface tags also, but many developers consider it a good practice to use text header tags instead so you're likely to come across them. To set a text header, use this syntax:
<H(value 1 - 6)>text to be made into a header</H>
Okay, so you've backed up the HTML page, looked at all the tags, made your changes and saved the new version of the file. Don't slap that puppy up on the web just yet, though. You need to preview it first, to make sure your changes have had the desired effect.
If you have Netscape, Internet Explorer or any other web browser program installed on your PC, all you need to do is go into Windows Explorer (or File Cabinet, for you Win 3.11 users), locate the file and double-click on it. Windows will automatically launch your browser program so you can see how your page will look on the web. Note that the browser will not connect to the internet, because it doesn't need to. It's only being used to access a local file - that is, a file on your computer - and therefore it is running "offline".
If you are an AOL user, even though Netscape is embedded in AOL you still need to have a standalone copy of Netscape or some other browser software to preview pages offline. This is because AOL doesn't let you use its browser in the offline mode - you have to log on to the internet before you will be allowed to open the browser window.
You can download Netscape for free from here.
You can download Internet Explorer for free from here.
There are other browser programs available as free downloads, but since these two are the most popular they're the best for previewing how your page will look to most web surfers. You can leave the browser window open with your file in it as you work to keep checking on your progress; just be sure to save the file before viewing it, and hit "Reload" or "Refresh" on the browser menu bar to view your latest changes.
If the page you're working on is an .asp page, you will not be able to preview asp features in the page because those features require web server support to make them work. In offline mode you're not connected to the server. Also, if the page is written in HTML but contains pieces of code (Java, CGI, VB Script, etc.), those pieces of code may not work in preview mode, either. It depends on whether or not the code requires server support, and it's not easy for a novice to tell just by looking at the code. Since you should only be touching the HTML, code sections should be a nonissue anyway.
Best Practices When Writing HTML - I've demonstrated many "best practices" throughout this tutorial. Here's a review of those, plus some more:
Don't use underlining to format web page text - to the person viewing the page, the text will look like a hyperlink
Don't use "named colors" as page backgrounds - they're too bright
Type your HTML tags all in uppercase to distinguish them from the rest of the page content
Don't go crazy with graphics, fonts, sounds and animations - too much of a good thing will make your pages busy, harder to read and slower to load, and many web surfers won't have browsers that support all the bells and whistles
If you set a graphic as your page background, make sure it isn't too dark, bright or busy - the text and images you put on top of it may be hard to read or just hard to look at if the background is fighting for top billing
Don't reference graphics from your local hard drive in your web pages - these files will become inaccessible when you post your pages to the web
Always make a backup of a page before you begin editing it
Always preview the page before posting it to the web
Use indented tags when you work with tables - they will make the code much easier to read
If you've skipped right to this section without reading the rest of the tutorial and you are not experienced with HTML, I strongly suggest you go back to the beginning and go through the whole tutorial because this summary table doesn't include important details and notes about each of the tags shown. Also note that some of the tags in this table haven't been covered in the tutorial, but they are pretty self-explanatory.
|
Send
comments and questions about this site to the Webmaster@ThinkyDink.com
All Thinkydink site content copyright April Hamilton, 2000-2002, All
Rights Reserved.
|
