DevHints

Archive for November 2006

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

I’m currently about half-way finished with a project that allows a user to check their Myspace Mail inbox through WML and WAP (mobile internet standards). The user simply visits this service, dubbed mBridge at the moment, on their mobile phone. They will be prompted for their Myspace login information. mBridge will pass the credentials on to Myspace and retrieve the 10 most recent messages, strip any code, and display them for the user to read. For those of you interested in how this works, read on.

First, mBridge has a login page written in WML that includes a form allowing the user to type their email and password for Myspace. After the user submits this information, mBridge will take it and use it to connect to Myspace via sockets. A socket is opened to myspace.com, headers for the homepage are written, and a token is retrieved. mBridge then opens a socket to login.myspace.com and uses a POST request to send the user credentials. After a few redirects and setting of cookies, we have a valid session with Myspace. mBridge retrieves the mail center page and uses a regex to grab the dates on all of the messages, their subjects, and the message ids of all of them. Now we open a socket for each message found in the inbox and retrieve the content.

The subject lines are stripped of repetitive “RE:” flags and the messages are stripped of code that won’t display properly in a mobile browser. The user is sent a list of links to each of the messages for them to read. When they read a message, they have a link to respond to the message.

When a message is sent, we log back in, visit the mail center, read the message, simulate a click on the reply button, and insert the mobile users response in the field before clicking send.

Will Myspace try to stop this from happening? While it’s possible that they will change the login method, links, or method for sending message, we can always adapt to it. If your browser can login, so can a script. It is also possible that they will incorporate JavaScript into the service to set cookies that we would otherwise miss with a script, but we can always determine the behavior of the script and make it work no problem. It is possible for Myspace to start blocking our IP address, but we can go buy more. Myspace can force users to verify a CAPTCHA before logging in, but we will develop OCR that can answer them just as accurately as a human, or pass them on to the mobile user and allow them to answer them.

The only thing Myspace might do is try to shut us down through legal methods. I’m not aware of anything illegal about what mBridge does, though I’m not a lawyer. I’d hope that since Myspace does not have a service competing with this they won’t get their panties in a bunch that their customers don’t have to login to something they made to get their messages, but really, can they continue to expect people to put up with a lack of updates, no integration with mobile phones, and constant errors?

There’s a rather unknown property in CSS called text-transform. It allows you to force all the text for a particular element to be transformed to UPPERCASE, Proper Case, or lowercase.

strong {
text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */
}

It’s quite useful for making your links stand out, or making sure that all the links in your menu bar are uppercase. You can also use it in association with :hover, :active, :visited, and :link to make your links go all uppercase when hovered over.

Did I mention that you can also use this to force text to become Proper Case (so the first letter in each word is capitalized)? That means if you aren’t going to need to store the information differently, you don’t need to bother using a server side language to change text to proper case, you can just set your CSS up right!

Some other cool uses for this include making all the text entered in a CAPTCHA input text field uppercase so the user doesn’t have any question as to whether the CAPTCHA is case sensitive or not (note, this will only affect the display, so data sent to your scripts might not have caps), and showing the active link as uppercase, instead of changing the color or underlining it!