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
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
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.
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.
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.