DevHints

Archive for the ‘Beginner’ 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

Centering your tables and divs can be confusing since not all browsers play nice with applying the parent element’s text-align attribute to block-level elements. No worries though, there is a quick and easy way to center any block level element.

margin: 5px auto;

As you should already know, when you set margin or padding you can alter all the sides individually like this:

attribute: top left bottom right;
attribute: topandbottom sides;
attribute: top sides bottom;

So in the example above, we set the margin for the top and bottom to 5px and the sides to auto. When you set the sides to auto, the browser will center it in it’s parent element because it makes the margins the same on each side. You could also set the top and bottom separately like this:

margin: 5px auto 10px;

So there you have it: the magic way of centering block-level elements in CSS!

If you’ve ever wondered how you could get a link to be one color and the underline to be another color, you’ve come to the right place. While this isn’t supported in CSS (yet, maybe one day), we can do something that will appear to do the same thing.

Here’s the CSS:

a {
color: #F00;
border-bottom: 1px Solid #00F;
text-decoration: none;
}

It’s extremely simple. Since all elements have a margin and padding, and they are all defined by boxes, we can add a border to one side of the element: the bottom. You can change the element to support your action selectors (hover, visited, link, active) and setup more complex things…like having only the underline color change on hover.

To change the underline color on hover only…

a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}

a:hover {
border-bottom-color: green;
}

You could also set the initial border to transparent instead of a color, then give it a color on hover and have the same underline-on-hover behavior as using text-decoration underlines, but with the additional flexibility of using the bottom border without the text shifting on hover.

I know a lot of people have trouble choosing colors for their website. Unless you’re an art student (or graduate) you probably don’t know all about color theory, complementary colors, and the like. Don’t fret though, I’ve got a fail-safe method for colors on the web!

First, too many colors can make your website chaotic. Pick a color that you want to use as the main color of your website. You’ll use this for the bulk of your website’s color. Now, pick a couple of different shades of that color to complement it. You will use these to accent your website and make certain elements stand out.

For your last 2 colors, use black and white. You can trade these for shades of dark and light gray and it works, depending on your color. Black and white have the most contrast though, so it really makes the content pop-out and helps show off the color.

Having trouble picking your complementary colors still? I can’t blame you. It takes some practice to start getting the right colors. In the meantime,  I strongly recommend checking out the following link. It’s a color scheme generator that allows you to pick a base color and have all of the rest of your colors given to you!

Color Scheme Generator

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!

PHP is a great language for beginners and advanced programmers all alike (especially with v. 5). Like other scripting languages, it is compiled at run time, so there is no extra work on the developers part before running the code.

First off, where do you write PHP? Well, you can write PHP in any text editor. If you like to use a specific program to write HTML, you can use that same application to write PHP. You start a block of code with “<?php” and end it with “?>”. Pretty easy huh?  Here’s a sample that will output “Hello World!”:

<?php

echo “Hello World!”;

?>

You can put this code in any HTML page and save it with a .php extension. Upload it to your web host (assuming they offer PHP) and access it just like you would any HTML file. You should see “Hello World!” in the place of the code.

All that’s happening here is a single statement. We are using the echo function to output data to the browser. Echo will output whatever you put after it, in this case, we used text. If you’re new to programming you should start getting used to calling text a string (because it’s a string of characters). That’s what we call text in programming, so getting that down to start is helpful.

PHP can be used for a variety of things. It can build images on the fly and output them, handle forms, insert and retrieve information from a database, talk to other applications, access other websites, send email, and much more!

Next we’ll go more into actually using the language!

One of the most common things people do with CSS is change the style of the links in a page. I’d highly recommend it since the default links usually won’t work with your color palette, considering they are bright blue, bright purple, and bright red.

To simply make all links the same color with the default styling, simply add the following line to your CSS file or style tag:

a { color: #FFAACC; }

You’ll want to replace the hex color code with one of your own, though. Lets go a bit farther and setup some different styles for the links and hover actions.

a:link, a:visited {
color: #FFAACC;
text-decoration: none;
}
a:hover, a:active {
color: #EE99BB;
text-decoration: underline;
}

Here we have links that will change color when hovered over. They will appear by default without an underline, but when hovered over, the underline will appear. This makes the links a bit more interactive, and usually it helps visitors distinguish links from non-links.