Bloggerrific

HTML For Beginners

David — Sat, 06 Feb 2010 20:30:26 +0000

I’ve been inspired to write an explanation of how HTML works, and how webpages are created in general, so that the average person, computer-savvy or not, can understand, and even do their own work with HTML. But, I’m gonna start at the WAY beginning, so if you already sorta get it, then don’t start here.

So first, an explanation of what HTML is. HTML is what us web designers and developers use to tell a person’s internet browser how to make the webpage look. How about an analogy. Say you just painted a room in your house, and to do it, you took everything out of the room and put it in a pile. Now you need to put all the stuff back into the room, all in a specific place. Certain things need to look certain ways. Pictures need to be hung on the wall, furniture needs to be up against the wall, books need to be on shelves, and lamps need to be plugged in. Now think of the webpage as the room, and all the things you have to put in your room are the pictures and text and links you want in your webpage. All those different things have to look certain ways, and for a person’s browser to know where to put everything on the page, it needs HTML to explain it.

Let’s get a bit more specific. Every webpage you ever look at has HTML in it. The basis of HTML is something called a tag. The tag is what you put around different types of things on your webpage so the internet browser knows what to make it look like. There is a tag for paragraphs, for images, and for links, in fact there are about 100 different types of tags (Here’s a list of all HTML tags). Really, only about 20 are commonly used though, so don’t worry. All tags look something like this (but for the example, this is a paragraph tag):

Your paragraph goes inside here.

You’ll notice the paragraph tag opens, then you put in the paragraph, and then it closes with the slash you see above. You can also put tags inside of other tags. In fact, that is really the basis of all HTML pages. Say for example you wanted a link inside of your paragraph. You’ll obviously have a link tag inside your paragraph tag. That would look like this:

Your paragraph goes inside here. And here is a www.google.com">link

The a means a link, and href is where you put the destination of the link. Similarly, images are put into tags. Images have the img at the beginning for image, then the source (src) where the image is (if you copy and paste that url into your browser, you’ll visit a page with just the image), then the height and width of the image (in pixels), and then alternative text (alt) if the image doesn’t display.

http://www.davidjrush.com/images/main/web.jpg"
height="100" width="200" alt="davidjrush website design" />

Now you’ll notice that there is no closing tag for the img tag, because nothing goes "inside" of it. So, it closes itself at the end with a slash.

Some other common tags you’ll see, and what they mean:

 - The entire HTML page is wrapped inside an html tag
 - Things like the title and description of the page go in the head tag
 - The body tag contains all the displayed HTML
 - This is a table like in Microsoft Excel.
First you open the table, then you have as many rows as you want (tr)
with as many columns as you want in each row (td).
 - This is an unordered list (ul) with lots of list items in it (li).
Unordered lists have bullets. Ordered lists (ol) have numbers.
 - This is a header tag. Titles and bigger text go in here.
There are 6 header tags that display smaller as you increase the number (h2, h3, h4, h5, and h6).
 - Think of the div tag as a two-dimensional box.
You can put stuff in it, tell it how big to be, and tell it where to show up on the webpage.
This is probably the most common HTML tag, and also the hardest one to understand.

Alright, that’s enough of those for now, because those are the major ones. Browsers have default ways of displaying those tags. Then, what web designers do, is they apply special rules to those tags so they display just how they want them to. That’s what makes different websites look so different! Those special styles are included in different files called CSS files, or Cascading Style Sheets. I’ve written many posts on CSS, here’s the CSS Back To Basics post. Any questions, feel free to ask! And if you are ever curious how a webpage is written, you can go to your browser, click the view menu, and select to view the source. That will let you see all the HTML that makes the page you are viewing! Don’t get overwhelmed though, just give it a shot and take your time.

Share this post

Take a Stand: No More IE6!

David — Tue, 27 Oct 2009 13:00:12 +0000

It is time for the web design community to take a stand and stop supporting Microsoft Internet Explorer 6! That’s right, I said it, as many have said before me, and yet somehow, most web designers still cross-browser test in IE6. Well, guess what, I’ve stopped. Okay, not completely. With my freelance clients, I will probably still check IE6, because truthfully, many of my clients themselves still run IE6. However, at my fulltime job as the web designer for College Prowler we have officially stopped supporting IE6! So why did I push for this, and how are we handling it?

So, some quick stats on Microsoft Internet Explorer 6. IE6 was launched by Microsoft in 2001. Though it has had some minor updates since it’s initial launch, you know that doesn’t change anything, especially because some people out there are still using that first launched version! IE6 came standard on every Windows machine since then until IE7 was launched in 2006. Now last time I checked (aka when this post was written) it was late 2009. IE6 has been out of date since it’s inception, but has definitely been out of date since it was replaced by IE7 over 3 years ago. So how it is that still approximately 5% of internet users still use IE6? Well sadly, Microsoft does not require, or even really push users to update, especially in the olden days. I grabbed that 5% estimate off of Google Analytics for my own site, College Prowler, and a few of my freelance clients. Though the percent is slowly falling, it will be around for a while I’m sure. So, based off of the small percentage, which is slowly falling, and the fact that cross-browser testing IE6 occupies at least 50% of my cross-browser testing time

The irony of it all is that even Microsoft is desperate for users to upgrade off of IE6 to IE7 or IE8. This of course begs the question, how stupid do you have to be to still run IE6!?! At least 90% of the display bugs I’m aware of are solely IE6 problems. Entire blog articles are devoted to listing bug fixes for IE6. Well, based off of all of those stats, our company finally let me move away from IE6. We put up a warning (only visible to IE6 users) that we don’t support IE6. We even included a link to download IE8, but somehow I don’t think that’s gonna do anything. I’m just glad to be done with it!

So if you know what’s good for you as a web designer, forget IE6! The more people that stop supporting it, the faster people will switch off of it, and the faster we’ll be rid of that evil browser that has trouble outputting today’s beautiful websites. Of course, if you are still making websites with red text on a blue background, maybe you should still be testing in IE6…

Share this post

PHP – Header and Footer Templates

David — Tue, 25 Aug 2009 14:00:28 +0000

So first let’s answer the question of why you’d want to use a header or footer template in your website. Luckily there is a very simple answer to that one. When you need to change a piece of navigation, or an image such as your logo, or even just change the copyright year in your footer, do you want to have to go into every HTML file to change that one item? Of course not! Using a php header and footer will allow you to avoid changing all of your pages, and instead only make you change it once!

So how does it work? Simple. There are a few catches though first which you might not like, so pay attention! First, your website URLs will now end in .php instead of .html. Second, you won’t be able to test your website without using a server that can compile your PHP. As I explained in a previous post, PHP – What Is It Good For?, PHP is a server side language, as opposed to HTML, CSS, or Javascript, which are all client side languages. Client side languages are read and interpreted by an individual person’s browser, whereas server side languages are read and interpreted by the server that hosts the website before it arrives back to the individual user. Easy solutions are to either put it up live to test it (not advised), or to install an Apache server on your computer, which wasn’t the easiest thing for me to do (because I’m not very techy) but there are some good walk-throughs out there, and the software is free. I use it all the time now because I do all my sites in PHP.

Now before I explain how to use this PHP, don’t be intimidated if you aren’t a programmer. Writing websites in php can be as little as 1% PHP and 99% HTML/CSS. I didn’t realize this until I actually tried to learn it, at which point I was much more comforted. You still make your entire site using your HTML or CSS, the PHP just decides essentially what content to put in where after you’ve made it all using your HTML/CSS.

Alright, now here is your explanation. You’ll need 3 total files. One called “header.php”, one called “footer.php”, and one called “index.php”. Inside your header file, cut and paste all the header code (starting all the way at your opening html tag or doctype declaration if you have one… because you should). Then, do the same for your footer file with your footer HTML. Now, inside of your index.php file write two lines of code, one at the top, and one at the bottom, you can probably guess which goes where:

and

And that’s it, run it on a server and you are set. Still a little confused? Well here, this is what each of your files should look like:

header.php


   Logo, navigation, et cetera goes in here

index.php


   Header in here
   Paragraph in here

footer.php


   Footer content goes in here

And that’s it, got any questions, ask away!

Share this post

Javascript: Rollover Dropdown Menus

David — Tue, 11 Aug 2009 13:30:32 +0000

Up until recently I’d never implemented a rollover dropdown menu. Then I just decided to build one from scratch for my employer College Prowler to improve upper-level navigation. Basically, with some simple javascript to hide/show the menu and some CSS to style and position it, you’ve got yourself a simple javascript rollover dropdown menu! The code follows the example implementation below.

Rollover Me

The Javascript:

function rolloverMenu(showHide, menu)
{
    var link = 'mainLink';
    if (showHide == 0)
    {
        document.getElementById(menu).style.display = 'none';
        document.getElementById(link).setAttribute('class', 'mainNav');
        document.getElementById(link).setAttribute('className', 'mainNav');
    }
    else
    {
        document.getElementById(menu).style.display = 'block';
        document.getElementById(link).setAttribute('class', 'selectedRollover');
        document.getElementById(link).setAttribute('className', 'selectedRollover');
    }
}

This javascript will either hide or show the menu depending on the location of the cursor. The HTML that calls the javascript has a delay on it as well, but you’ll see that later. This javascript also changes the class name of the link so that even though your mouse isn’t technically hovering over that link it will look like it is being hovered over.

The CSS:

#container{
    position: absolute;
    z-index: 1001;
}
a.mainNav{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #1D3E66;
}
a.mainNav:hover{
    background-color: #3D6199;
    color: #AAAAAA;
}
a.selectedRollover{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #3D6199;
}
.rolloverMenu{
    float:left;
    padding: 10px 10px 6px 10px;
    position: absolute;
    z-index: 1000;
    background-color: #3D6199;
    width: 100px;
}
.rolloverMenu#mainMenu{
    top: 40px;
}
.rolloverMenu a{
    color: White;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}

Change the CSS to fit your own design. I’ve been very specific in this CSS so that it should be easier for you to identify everything. Note that the #container definition is actually very important for an IE6 bug fix. IE6 has issues with z-index when not combined with absolute positioning. Basically, the parent element of the rollover menu needs to have that specific definition.

Lastly, the HTML:


   
         College Search
   
   
         Link 1

         Link 2

         Link 3

         Link 4

And that’s that! The HTML link calls the javascript which implements a series of CSS rules that will hide or show the menu of your choice! Have fun!

Share this post

Branding A Website

David — Wed, 29 Jul 2009 13:30:01 +0000

When making a website, it is very important to consider branding. If you want the website to be memorable and recognizable to it’s visitors, there needs to be a level of consistency and impact across the whole site. To do this, I have a few suggestions to follow below:

1. Logo and Favicon: Designing a logo can be very difficult, but it is incredibly important. The logo will serve as a reminder to your user, wherever in your site they may be, that they are on YOUR site. Any print materials that reference the website should also have that logo to help your users with that association. If you are designing a logo yourself, try doing it in black and white first, then add color, because it should be able to stand on it’s own without color. Keep it simple too. Some of the most recognizable logos (like IBM or Apple) couldn’t get any simpler. Once you’ve done that, don’t forget to create a favicon! The favicon is that tiny 16×16 pixel icon that shows up in your favorites/bookmarks list, browser tabs, and sometimes the URL textbox too. To turn any square icon into a favicon, use this favicon generator. Then, include the following in your head:

2. Color Scheme: Picking a color scheme is really important for your branding. You want to select a small set of colors that remain consistent across your website, logo, and any print materials that are related to the website. I’d suggest first selecting a single color and then if it is easier for you, you can use color scheme generators that are available for free online. There are tons out there, but I’ve found a few for you here: Color Scheme Designer, Color Schemer, or Color Toy.

3. WWW Redirect: This phrase refers to how your website appears whenever you market it off the website, as well as the actual URL you actively use to point to your website. Any website can be written as both http://www.yourdomain.com OR http://yourdomain.com. Any user can type either one, and you’ll end up at the same place. However, it is important to select one and stick with it for two reasons. One, as I’ve mentioned in a previous post about SEO, I explained that search engines can actually see those two different URLs as two different websites, which reduces your traffic, which reduces your search results. Two, selecting one of these will help your users remember the site, and reduce any confusion with the less computer literate. FYI, here’s how you force your website to use the www version or the non-www version:

Insert the following into your .htaccess file:

The WWW Version (http://www.yourdomain.com):

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

The Non-WWW Version (http://yourdomain.com

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L]

In both cases, remember to replace "yourdomain" with your actual domain name.

Well, that’s all for now. Good luck!

Share this post