Brian Gongol
If you've never worked with HTML before, you'll need to understand two main things:
- The basics of HTML are extremely simple
- After you've mastered the basics, you'll probably realize there are much better ways of doing things
How to get started with writing HTML
The best rule is to start with a site that no one's looking at. Just build a personal homepage and tinker with it until you're comfortable with the syntax. You can start a free personal site (and start tinkering with HTML) at Angelfire, Geocities, or Blogger. Once you've started with one of these sites, make sure to use the HTML editor. The default mode puts you into an editor that doesn't use HTML, so you'll have to use the HTML mode instead.
Start copying code and learn to play
Find a site that you like. By viewing the HTML code for the site (you can do this by pressing <CTRL>-U in most browsers), you can see how others have constructed their sites. Lots of what you'll see will look like complete gibberish; that's because most of the good-looking sites use complex tools like CSS and Javascript. You'll probably want to learn to use these tools later. For now, though, it's worth looking at the code from other sites side-by-side with the resulting sites. You can learn a lot simply by copying small sections of the code from other sites onto your personal page, then experimenting with it until you learn how it works.
Probably the most important step for beginners to remember is that for everything you start, you must provide a stop. Thus, every code has both a starting tag that will look something like <CODEGOESHERE> and a closing tag that looks like </CODEGOESHERE>. The "/" tells the browser that the code has been closed.
How to change the font on your page
Fonts are set through a collection of commands:
- The most basic is font size.
- Also useful is the headlines command.
- Emphasis can also be added through font decorations
Headers work in a similar way, but they're oriented in the opposite order: H1 is the highest-order (and thus largest) header. The remaining headers are considered inferior and thus shrink as they follow:
Font size Code Font size 1 <font size="1">Font size 1</font> Font size 2 <font size="2">Font size 2</font> Font size 3 <font size="3">Font size 3</font> Font size 4 <font size="4">Font size 4</font> Font size 5 <font size="5">Font size 5</font> Font size 6 <font size="6">Font size 6</font> Font size 7 <font size="7">Font size 7</font>
The basic font decorations are italics, bold, and underlining:
Header class Code Header 1
<h1>Header 1</h1> Header 2
<h2>Header 2</h1> Header 3
<h3>Header 3</h3> Header 4
<h4>Header 4</h4> Header 5
<h5>Header 5</h5>
Decoration Code italics <i>italics</i> bold <strong>bold</strong> underlining <u>underlining</u>
Separating things from one another
Some basic codes for separating one thing from another:
Separation element Code Comments Basic line break <br> This is the most basic separation of all -- just a line of space. Note that you don't have to use a closing tag. "<br>" adds a line of space just like hitting the space bar adds a single character of space. Paragraph break <p> and </p> Paragraphs are slightly more complex than line breaks, but they're technically preferable to just adding a couple of <br> tags. If you start a paragraph with <p>, you'll need to close it with </p>. Hard rule <hr> This adds a horizontal line to the page to separate one section from another. Like the <br> tag, you don't need to close this tag.
Creating charts and tables
Websites are excellent ways of sharing data, so tables are naturally one of the most heavily-used features of HTML. As a beginning website creator, you'll probably learn to use tables in order to lay out the look of your page. Understand that it's fine to do that in the beginning, but also know that there are some pretty serious limitations to this approach which you may want to change later. The best way to lay out a page isn't with tables but instead with CSS (cascading style sheets), which use a whole different style of code to lay out the page...but it's very advanced and you probably won't understand how to use it until you've gotten much more comfortable with HTML.
The basic elements of a table:
Code Comments <table> Put this at the start of your table to indicate that you're building a table <tr> Stands for table row. After you've started a table, you'll have to create a row. <td> Stands for table data. This separates each item of data within the row, effectively creating a column. </td> Closes out a <td> entry. </tr> Closes out a row created with <tr>. </table> Closes out a table.
Centering text
To center text in the middle of a page, simply use <center> and </center>. If you use this inside a table, the text inside the cell will be centered.
Closing remarks
These are some of the most basic items in HTML. The more practice and experimentation you undertake, the faster you'll learn HTML (and the sooner you'll learn that much of what you see here gets replaced later on). The best way to learn what you're doing right, what you're doing wrong, and what you can do better is to build a page, look at it, then check it with the HTML validator, which will give you thorough feedback on exactly what to do with your code.