Basic HTML Code
HTML is really very simple. Taken step by step you'll be writing web pages in no time. To show the simplicity of HTML look at this one HTML tag, the command to center a line of type, left to right, on the screen or within the block of text. Click on the "V" to see the actual code used here.
You Must Use IE Here ... NOT Firefox!
That's simple isn't it? Looking at the actual code here you see <center> which tells the browser that the following input will be centered on the screen horizontally (left to right). Then you see </center>. The slash tells the browser to stop centering things, return to the default flush left (the start of all lines pushed to the left of the page) on the page. Think start center for <center> and end center for </center>. I also dropped in a line break code <br>, which of course, breaks or ends the line where it's inserted (just like the return on a typewriter huh?). Note however that the Enter or Return key does nothing but send the cursor to the beginning of the next line on your screen as you write the code.
OK, the above was just to demonstrate the actual simplicity of HTML code. Yes, it does get more complicated, but not really all that much, and you can put up a web page without getting complicated. But as you progress you'll begin to understand and learn more and more and, believe me, before you know it, you'll have dozens of web pages on the Internet.
You can view the source code for any web page you visit. Click on the toolbar "View" and then on the dropdown menu click on "Source". You'll see the actual source code that webmaster wrote to make the page do what it does. This is basically how I learned HTML back in 1997. Although I had visited some online tutors, and got some basic information, the actual working knowledge I originally got was from looking at the source code of others work and learning how to manipulate the screen as those sites did. View source every time you see something you like, and see how it was done. It's OK to copy/paste and work with that code, just don't steal it. Make it your own. Make it original in your own ways.
Now that I've said it's OK ... well it isn't always OK. Don't steal scripts from other sites. That is a no-no ... big-time no-no. Most java scripts that you'll see working on sites when you view the source have an attribution line at the top, sometimes with a URL. Either go to the URL and get the code, or search for the authors, or scripts, name at your favorite search engine (like Google.com for instance). Don't just steal it. Most all code is copyrighted and it's against the law to simply copy/paste it. For your educational experience I do recommend doing that, but only when you are either just learning from it, or are simply using it as a base guide to create your own site. There is more to be said later under "Copyright Issues".
One important thing to do when writing HTML is to keep your code readable. Notice above I have put the <center> and </center> commands on lines by themselves. I do this sort of thing to keep commands separated. It makes it easier to read, and later go back and edit or debug. There is no golden rule as to how you keep things orderly. All good code writers separate their code while writing it. It's good habit.
Traditional programmers write code using the tab key to indent certain parts of code, thereby separating it from the rest of the code. Subsections getting indexed another tab space. Personally I use the new line method. With blank lines between sections. Your HTML page will display correctly if the tags are on the same line as your text or on separate lines of their own. As we progress through this tutorial you'll see how I keep the code separated. This is simply my way of keeping things orderly. You'll need to develop your own methods. Anyway you want to do it is fine. You'll see the importance of good clean coding as you progress and rewrite and debug your HTML documents. It also allows for easier changes later, when you update your work.
To demonstrate this point I will show you three different methods of coding. Sample one is where there has been no attempt to keep the code orderly.
<table width="100%"> <tr align="center"> <td width="10%" bgcolor="#ff2400"> Orange Red<br> "#FF2400"</font> </td> <td width="10%" bgcolor="#ff0000"> Red<br> "#FF0000"</font> </td> <td width="10%" bgcolor="#d9d9f3"> Quartz<br> "#D9D9F3"</font> </td> <td width="10%" bgcolor="#d8bfd8"> Thistle<br> "#D8BFD8"</font> </td> <td width="10%" bgcolor="#eaadea"> Plum<br> "#EAADEA"</font> </td> </tr> <tr align="center"> <td width="10%" bgcolor="#bc8f8f"> Pink<br> "#BC8F8F"</font> </td> <td width="10%" bgcolor="#db70db"> Orchid<br> "#DB70DB"</font> </td> <td width="10%" bgcolor="#ff6ec7"> Neon Pink<br> "#FF6EC7"</font> </td> <td width="10%" bgcolor="#ff1cae"> Spicy Pink<br> "#FF1CAE"</font> </td> <td width="10%" bgcolor="#ff00ff"> Magenta<br> "#FF00FF"</font> </td> </tr><tr align="center"> <td width="10%" bgcolor="#9370db"> Medium Orchid<br> "#9370DB"</font> </td> <td width="10%" bgcolor="#9932cd"> Dark Orchid<br> "#9932CD"</font> </td> <td width="10%" bgcolor="#db7093"> Medium Violet Red<br> "#DB7093"</font> </td> <td width="10%" bgcolor="#cc3299"> Violet Red<br> "#CC3299"</font> </td> <td width="10%" bgcolor="#9f5f9f"> <font color="#ffffff"> Violet<br> "#9F5F9F"</font> </td> </tr> </table>
Very confusing looking isn't it. Sample two shows my method of keeping the code orderly.
<table width="100%">
<tr align="center">
<td width="10%" bgcolor="#ff2400">Orange Red<br>"#FF2400"</font></td>
<td width="10%" bgcolor="#ff0000">Red<br>"#FF0000"</font></td>
<td width="10%" bgcolor="#d9d9f3">Quartz<br>"#D9D9F3"</font></td>
<td width="10%" bgcolor="#d8bfd8">Thistle<br>"#D8BFD8"</font></td>
<td width="10%" bgcolor="#eaadea">Plum<br>"#EAADEA"</font></td>
</tr>
<tr align="center">
<td width="10%" bgcolor="#bc8f8f">Pink<br>"#BC8F8F"</font></td>
<td width="10%" bgcolor="#db70db">Orchid<br>"#DB70DB"</font></td>
<td width="10%" bgcolor="#ff6ec7">Neon Pink<br>"#FF6EC7"</font></td>
<td width="10%" bgcolor="#ff1cae">Spicy Pink<br>"#FF1CAE"</font></td>
<td width="10%" bgcolor="#ff00ff">Magenta<br>"#FF00FF"</font></td>
</tr>
<tr align="center">
<td width="10%" bgcolor="#9370db">Medium Orchid<br>"#9370DB"</font></td>
<td width="10%" bgcolor="#9932cd">Dark Orchid<br>"#9932CD"</font></td>
<td width="10%" bgcolor="#db7093">Medium Violet Red<br>"#DB7093"</font></td>
<td width="10%" bgcolor="#cc3299">Violet Red<br>"#CC3299"</font></td>
<td width="10%" bgcolor="#9f5f9f"><font color="#ffffff">Violet<br>"#9F5F9F"</font></td>
</tr>
</table>
A bit more orderly. Much easier to find a mistake, or something you want to revise later, if things are set up orderly. Sample three shows the method used by most programmers, especially true programmers who write software, which is much more complicated than web pages are. The code is the same in each sample, taken from one of the color charts you'll find later in this book.
<table width="100%">
<tr align="center">
<td width="10%" bgcolor="#ff2400">Orange Red<br>"#FF2400"</font></td>
<td width="10%" bgcolor="#ff0000">Red<br>"#FF0000"</font></td>
<td width="10%" bgcolor="#d9d9f3">Quartz<br>"#D9D9F3"</font></td>
<td width="10%" bgcolor="#d8bfd8">Thistle<br>"#D8BFD8"</font></td>
<td width="10%" bgcolor="#eaadea">Plum<br>"#EAADEA"</font></td>
</tr>
<tr align="center">
<td width="10%" bgcolor="#bc8f8f">Pink<br>"#BC8F8F"</font></td>
<td width="10%" bgcolor="#db70db">Orchid<br>"#DB70DB"</font></td>
<td width="10%" bgcolor="#ff6ec7">Neon Pink<br>"#FF6EC7"</font></td>
<td width="10%" bgcolor="#ff1cae">Spicy Pink<br>"#FF1CAE"</font></td>
<td width="10%" bgcolor="#ff00ff">Magenta<br>"#FF00FF"</font></td>
</tr>
<tr align="center">
<td width="10%" bgcolor="#9370db">Medium Orchid<br>"#9370DB"</font></td>
<td width="10%" bgcolor="#9932cd">Dark Orchid<br>"#9932CD"</font></td>
<td width="10%" bgcolor="#db7093">Medium Violet<br>"#DB7093"</font></td>
<td width="10%" bgcolor="#cc3299">Violet Red<br>"#CC3299"</font></td>
<td width="10%" bgcolor="#9f5f9f">Violet<br>"#9F5F9F"</font></td>
</tr>
</table>
As you begin to write, keep things separated however you wish. You will develop a certain style of your own as you type out the code. You need to decide how you will keep things orderly, so that you will know what has been done with the code (so next year you can still recognize it). If you plan to go on to become a programmer you may wish to use the tab indented methods, so you don't wind up relearning things later on. For myself, my method stems back to the 70s when I began working on computers and coding pages of type for a Grapic Arts company. I stick with it only because I do it without thinking about it. My main beef with the indent system is that things sprawl out all over the screen horizontally, and you need to scroll horizontally. I hate scrolling horizontally, so I don't use that method.
It used to be that you could write your code in all lowercase, all capitals, or even a mix of both. Browsers will still read code written that way thanks to backwards compatibility. For the future of code you will need to write in all lowercase. Consequently all the code you will learn here is lowercase and I suggest you only use lowercase yourself.
<
Previous: Editors
—
Next: Utter Basics >
|