DevHints

Archive for the ‘HTML’ Category

Lets jump right into it here. HTML is based on tags. Each tag performs a specific function, and most tags have attributes that modify them. In HTML, tags are delimited (separated) by < and > signs. Here’s what a tag should look like:

<tagname attribute=”value” attribute=”value”>content</tagname>

As you can see, the syntax is very simple. The tag name comes first. Some tags are <b>, which makes the content appear boldfaced, <i> which makes the content appear italicized, and <br> which is considered a line-break…aka a new line. A tag doesn’t have to have any attributes, but some, like the img tag require attributes.

Not all tags have endtags (</tagname>) either. Linebreak (<br>) tags, for example, do not need to be closed…in fact…they can’t be. Paragraph tags (<p>) don’t have to be closed either, though they can be.

Here’s a list of common tags:

<b> – Bold text

<i> – Italic text

<u> – Underlined text

<img> – Display an image. Common attributes for an img tag are src (the URL of the image), width, height, and alt (alternate text in the cast that the image cannot be displayed).

<br> – line break

<p> – Paragraph. By default this places two linebreaks before the content and two linebreaks after the content if explicitly closed with </p>.

You’ll almost certainly find that there isn’t much to be done with the above tags. You really can’t create anything fancy, and even doing modest styling is difficult. This is where CSS, tables, and divs come into play. Since divs are harder to grasp the concept of, I’ll only explain tables.

<table> Creates a new table.

<tr> Creates a new row in a table.

<td> Creates a new cell within a row.

When you envision a table, think of a chart or spreadsheet. It has rows and columns, which define individual cells. In an HTML table you certainly have rows and columns, but you do not explicitly set columns, rather, the number of columns is defined by how many cells are in a row.

To create a simple table with numbers 1 and 2 in the top cells and 3 and 4 in the bottoms cells, here’s what we would do:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

We created our table with the <table> tag. Then we created our first row with the <tr> tag. We created 2 cells by placing 2 <td> tags in that first row. Then we closed the row and opened a new one. We created two cells in this row as well, then closed it and the table. This table will display as a 2×2 table, meaning it has 2 rows and 2 columns.

You can use a table to position things on your page better. You can create a table to display content on the left or right of your menu, for example. A very large percentage of websites use tables to layout their content. I strongly suggest you view the source of websites you visit to get a better understanding of how they lay out their website.

With this I leave you. This is by no means an all inclusive session on HTML. It is, as the title declares, a crash-course.

Advertisements

HTML stands for Hyper-Text Markup Language. It’s really just a fancy term for a language that is meant to format text for use on the internet. If you’ve ever used “tags” to style your text on Myspace, Xanga, LJ, etc, you’ve used HTML. The same goes for displaying images or slideshows…while they aren’t made with HTML (usually), HTML is used to display them.

The page you are looking at right now uses a form of HTML, in addition to CSS and images. The text you are reading is written in the HTML. Go ahead and right click on this page and go to View Source. It may look foreign at first, but it’s really not that complex. If you search for “donkey” you will find this paragraph. It looks just like normal text with some funny characters added in.

Those funny characters that look like <br> and <p> are actually called tags or elements. They are notes for your browser so it knows what to do with them and how to display them. If it runs across a <b> tag, it will display any text before the closing tag , </b>, in bold. That’s the core of every webpage…just a series of notes telling the browser how something should be displayed.

Next I’ll give you the basics on creating your own HTML pages!

There are a variety of methods involving CSS and HTML to get rounded corners. Mozilla-based browsers actually have a bit of CSS that makes it really nice and easy, but what about the other browsers like IE, Opera, Safari, Camino, Konquerer, and all the IE mashups (AOL, MSN, etc)?

Well, some people prefer to go with a CSS method that doesn’t use images, but personally, I don’t think it’s that much of a hassle to just make the images. However, sticking them to the corners without using a table can be a bit tricky. There are a few ways to do this as well, but I find the following to be the easiest:

<div style=”width:100%; margin: -20px -20px 0 -20px; padding: 0px; text-align: right;”><img style=”float:left;” src=”top_left.gif”><img src=”top_right.gif”></div>

Let me explain a bit here. I usually put everything into a container (DIV) that has padding for visual purposes. If you want the corners on, well, the corners, you will have to cancel out the padding and force the images onto the corners. Rather than go with absolute positioning, I just used a negative margin. The zero is for the bottom of the div, since the rest of the objects on the page will still behave by the padding defined and we don’t want to push elements down any farther. To get the corners to hit opposite ends of the div without using 2 divs (which I find to be irritating and sloppy) I told the CSS to align to the right, but I floated one image to the left. They all line up smoothly. Do the same for the bottom corners and you’re set!

Oh by the way, make sure you close all of your elements, otherwise the bottom corners might jump up since the margin won’t be rendered due to incorrectly nested tags.