HTML Crash Course
This is the VERY basics of HTML. If you want more in-depth guides and explanations try the books:
HTML A Beginner’s Guide (2nd edition) by Wendy Willard or
Web Design in a Nutshell by Jennifer Niederst Robbins (3rd edition)
Editing the content of your Page. (Picks up from: FTP tutorial)
Now that you have your page downloaded you’ll want to edit the contents. Open it in NotePad. (I’m asuming here you dont have a HTML editor).
Your description/content area may be as long as you like and includes any info you planned on including in your page. When you are completed with your listing save it. Now you are ready to upload it to your host, refer back to the FTP section.
What is HTML and what are the basics you’ll probably use?
HTML is the language your web browser reads. Its a mix of codes you’ll use to get your page to look a certain way and get the text to act certain ways. Here are the basics you’ll probably use. But you are not limited to these, feel free to explore the web to learn more! Be aware of how wide your tables and images are.. if they are wider than your page you coudl have layout issues. If you go over this it may either overlap outside your listing or push your page down on the page. The behavior will be determined by the different web browsers.
Helpful HTML tags to know:
Simply hitting ‘enter’ will not start a new line. Same is true for bolding the content using your word pad and any other attributes. Browsers dont recognize these comands unless they are coded in.
| <p> </p> | indicates new paragraph, any text typed after will appear 2 lines down. | ||||||
| <br> | indicates a line break, any text typed after will appear 1 line down. | ||||||
| <pre> </pre> | is a preformatted code. It displays type exactly as it is typed, extra spaces, returns and all. | ||||||
| <blockquote> </blockquote> |
The blockquote indents the pragraph on all sides. Often used with customer comments or quotes. |
||||||
| <b> </b> | Bold attribute, anything inside this tag will appear bold. | ||||||
| <i> </i> | Italic attribute, anything inside this tag will appear italicized. | ||||||
| <center> </center> | Center attribute, anything inside this tag will appear centered. |
||||||
| align="right" |
Inserted into a paragraph type tag will align the paragraph to the right. Applied to an image it will align the image to the right and cause other text to wrap around it. |
||||||
| align="center" |
Inserted into a paragraph type tag will align the paragraph to the center. Applied to an image it will align the image to the center and cause other text to wrap around it. |
||||||
| align="left" | Inserted into a paragraph type tag will align the paragraph to the left. Applied to an image it will align the image to the left and cause other text to wrap around it.You do NOT need to use this to align text as text is automatically defaulted ot teh left, but it does come in handy to use with images. Explained better in the image section. | ||||||
| <font> </font> |
The font tag effects the way text looks. Many atributes can be added into this tag. Examples:
|
Basic table information
Gallery and ordering info you may want placed in tables for easier arranging and editing.
The following is what you need to know regaurding editing them. There are endless ways to use and edit a table including, border, color, width, height, spacing and padding. A search on the internet can turn up lots of resources explaining all these variations, for our purposes I’m keeping it simple.
This code is where the table starts, this sets up width and spacing. Ignore, dont edit. The numbers all will vary though depending on the usage of the table.
<table width="x" border="x" cellspacing="x" cellpadding="x">
This code declares the beging of a new row in your table.
<tr align="left" valign="top">
This code declares the start of an actual table spots that are in the row. Each row must have the same amount of td (cell) sections.
<td>
Each code has a closer, this is the HTML which ends the function. For a table you’ll have </td> </tr> </table>
When editing table content you edit the content between the following codes:
<td> content </td>
A basic table code may look like this:
<table cellpadding="0" cellspacing="0" border="1">
<tr><td>Content 1</td><td>Content 2</td></tr>
<tr><td>Content 3</td><td>Content 4</td></tr>
</table>
On the web it would look like this:
| Content 1 | Content 2 |
| Content 3 | Content 4 |
Basic Graphic information
All images used need to be stored somewhere on the web to be able to use them on the web. The basic place to store them is on your host of course! When possible try to upload them to your file called "images" for easy organizing, just remember to include the title of the images folder when you are linking it.
To place images you use the <img src="yourfolder/imagename.gif"> code. If the image is hosted on the same host as your website you do not need to have a complete URL. Its ideal to already have your images to the size you need instead of relying on height and width codes to change them. This will keep loading times down and also help reduce file sizes when smaller images are used. It also makes it easier on YOU to add more pictures if you have less code to worry about! A program like Irfan View is a great resizer and its free!
To make a thumbnail you actually need 2 images; a small one and a large one. Insert your small image and surround it by a link to the large one. Its that easy! Example: <a href="url to large image"><img src="small image url" border="0"></a>
Aligning images so text wraps around them. Do you want your image inserted into a paragraph and the test to wrap around it? All you need to do is add the align property to your image tag.
The align properties are: align="right", align="left", and align="center" .
To add a border simply add the border="" tag and give it a number, ex border="2"
To add horizontal padding you include hspace="10" to add verticle padding include vspace="10" (change 10 to whatever space you want) Example: <img src="url to image" align="right" hspace="10" border="2" vspace="2" >
See example to the right that has a right align and horizontal padding of 10 verticle align of 2 and border of 2.
Making a Image a link. (Banner links etc)
Follow the same rules as making a text link but instead of inserting text, insert the image code.
ex: <a href="http://websavvymama.com" target="_blank"><img src="http://www.babyspaceslings.com/websavvybannersm.gif" border="0"></a>
Looks like: 
and is a clickable link to a new window.
Basic Link Information
Links are pretty easy to apply. You just need to know what the link is that you are going to and how you want it to appear. If its not on your domain/host you will need to type out the full web address like this: <a href="http://www.domain-name.com/page-to-access.html">Text to appear</a>. If the link is located somewhere on your website you can use a shortened version <a href="yourpage.html">Text to appear</a>.
Format:
start with <a href= insert "location always surrounded by quotations.html" followed by > insert test to appear and close with </a>
translates to: insert text to appear
You can also indicate if you want the link to open in a new broswer window. To do this you include target="_blank" in the link code and it will open in a new window. Completed it would look like this: <a href="http://websavvymama.com" target="_blank">Web Savvy Mama</a> appearing as: Web Savvy Mama
(1) commentThe Mac Experience
I was faced with an issue recently regarding my computer setup. My desktop computer needed serious upgrading soon. As a designer I use software that requires a lot of resources. My desktop PC is nearing the ends of it’s days. One program, great. Two programs, ok. Three, pushing it. More? Ha! I get in the habbit of just opening whatever program I need, why should I worry if it will run slowly? I need it, I open it! Anyone who has run an outdated system will be able to tell you why this is not ideal. Slow as sludge.
But that’s ok, I have a PC laptop that’s less than a year old! *cough* Yeah, I wish that were a good alternative! I’ve owned my laptop for less than a year. It was a great setup when I got it. Then I started really using it. For simple things like on the go internet, email and updating of websites, great! For any intensive designing, not so great. Open up 2 Adobe programs and BAM! Hello blue screen of death. My PC laptop is now a fancy media player. I gave up trying to do anything serious on it. It’s a great backup computer for bringing with for an interactive portfolio, helping do updates on sites (on-site) and staying in touch on the go. That’s about it.
So what do I do? I could upgrade my desktop PC, buy a new PC or step outside my comfort zone and buy a Mac. The next logical step is to buy a Mac. So, desktop or laptop? Another logical choice, laptop. If I’m going to have a Mac I need to be able to bring it with! So I log onto Apple and order my new MacBook. Then I sit and patiently wait for the FedEx truck to deliver my package. Patiently? Ha!
So today my MacBook arrived. New toy! But I had work to do. I don’t think my clients would have appreciated it much if I put their sites on hold to play with the new toy. Finally, I’m done! So I get into the package and pull out my new Mac.
First impressions:
- White looks better than I thought it would, classy! And no way was I paying extra for a black MacBook.
- Where’s the CD tray? Ah! That’s cool, just like in the truck/car/SUV! No more worrying about bumping the tray or accidentally ejecting the disk while in use.
- Only 2 USB ports? Ok, I guess I can manage that.
- Love the magnetic plug! With 3 small kids running through my office this could come in really handy!
- That’s a camera? Holy crap that’s small. But I was amazed to see it worked much better than any web cam I have owned!
I turn it on and the first issue I run into is connecting to the internet via my wireless. Not Mac’s fault. (grumbles under breath, “stupid router”)
Then I get to start playing! Now I have to tell you, I’m impressed with all the software thats INCLUDED with the computer. Things I’d pay several hundreds for on the PC counterpart! Dashboard/Widgets has got to be my all time favorite already! Weather, phone directory, stickies and more… right there! Normally I’d have to open up a web browser and hit my bookmarks to look up each one individually. This is sweet! Then I set up my e-mail accounts. Easy as pie and the layout is very intuitive, digging the search feature for emails. I also like the feature that allows me to leave a copy of the email on the server so my other computer can download them as well. Very handy. I start visiting other applications and I notice iTunes. Oh yeah, that’s an Apple product. I gave up on it while using my PC because it ran crappy on XP, slow running and froze often. I open it on Mac and see how it’s supposed to run! Niiice.
So I haven’t had time to really get into it but from what I see so far I really like it! Only issue I have now is that I have a ton of Windows software! I really don’t want to buy things like CS2 Suite, Dreamweaver, Flash, Office and more all over again to get the Mac versions right now. But, there’s one more feature that will make the loyal Mac lovers roll their eyes at me. Mac can run XP! Once you install Bootcamp (free!) you can install Windows XP to run on the Mac as well and can switch back and forth. What a great idea! I have a feeling I’ll be using the Mac OS more but at least I can continue to use my favorite programs without having to switch them all out right away.
(1) commentFTP, what is it and how do you use it?
A FTP (File Transfer Protocol) client is the means of connecting to a computer or website to download or upload files. The server your website is hosted on allows you to connect directly to it via FTP, this allows for loading and downloading any file image stored there. First you’ll need a way to download your listing page and upload it when it’s complete. There are many shareware programs available. Many are not all they are cracked up to be. I’ve found the most reliable one so far to be “Smart FTP“, they offer a 30 day trial and you can continue to use it past the trial if it’s for personal use or purchase a copy for very cheap. Dreamweaver and some other html editors may have an FTP built in, if you have one of these programs feel free to use them. Once you’ve decided on a FTP you’ll input your hosting accounts login data and it’ll connect you.When you signed up at with your host you were given this information in one form or another:
User ID: ID you log into your account with
FTP login: This is what the FTP address is, either an IP address, specific FTP address or use your domain ftp.yourdomain.com
FTP login ID: UserID for FTP if different than your main account login
Password: yourpassword
Keep this information in a safe place! Now you have all the means to log in! If useing Smart FTP, once logged in you’ll have 2 windows. If you don’t please refer to the tutorials at Smart FTP for further information. One will be the directory on your host showing your pages and one will be your computer directory. Computer directory = local host, hosting directory = remote host. First you want to create a place on your own computer where you are going to store your files. You want to create a backup of all your work. Once you have a place to drop your files, find it in your computer directory window on SmartFTP. Click on the file you want to edit and drag it into your folder on your computer. Congrats, you have just downloaded your page! Now you’re ready to get to work! After you are done editing your page you reverse that drag and drop and drop your edited page into the hosting directory and click “overwrite” when it prompts you to. Thats it!
Are you a Firefox user? Then you may want to check out FireFTP, the Firefox add-on for uploading and downloading to your host. FireFTP
(3) commentsDid you know? Web Layout and Screen Resolution
I often see people go head over heals trying to make sure that the very minimal specs are included, the only problem, the minimal specs have changed, drastically! When I design a website or create graphics I need to remember that we want to be inclusive of the majority of the internet audience, if possible, all. The website needs to be usable to those running older versions of browsers, and lower settings. How do you determine which will work best for your site?
For starters, ask yourself “Who is my target audience?”. If they are pretty web savvy on the technical side they probably have more advanced settings, higher res and plugins. Is your target audience the average user? Or is your audience compiled of beginners? Maybe it’s a mix of all 3. You can choose to focus on one group or you can choose a web layout that’ll be mostly compatible with all 3. I recommend trying to include as many as possible if your site content allows for it. Of course there are times when the site content and target audience just don’t allow for this, there are exceptions to every rule.
So where am I going with this? Not long ago the average user had a screen size of 640 x 480, then the average upped to 800 x 600. Now the average is 1024×768 or higher! What does this mean? For a long time designers were told to design for 640 x 480, I still see designers doing this. Imagine what that 640 wide website looks like on a 1024 setting, you’ll have half a monitor of dead space! But you don’t want to design for 1024 wide and have the rest be ignored either. If you design for 1024 x 768 and have a right side menu, what happens if a 800 x600 user visits your site? Yup, that menu is cut off. Sure they can scroll over to see it, but will they notice it? So where is the compromise? For the most part you can ignore the 640 x 480 because as of 2006 almost no users actually use that setting anymore. A good percent still use 800 x 600 so let’s not veto them yet. So how do we make a website look good on both 800 x600 and 1024 x 768?
Your first option is to have a site that automatically expands to fill the screen. This is the ideal layout option, you can cover all the screen resolutions. The draw backs? If you have content that relies on a minimum width for text or graphical layout this can get tricky. When squeezed, graphics may stack, divs may move, or things start to overlap. (depending on your browser) So you use a minimal width, right? Wrong, not all browsers read the minimal width correctly forcing you to write workarounds to get it to work. So think ahead. Create the layout for the minimal and let it expand. Don’t layout graphics and divs to fill a 1024 x 768 space if you are going to let it contract to 800 x600. And don’t create a 800 x 600 expanding layout if it looks like poo once it’s expanded to 1024 x 768. Make sure it expands proportionally and doesn’t leave big gaps in your layout. If your layout just doesn’t work with expanding, the second option may be a good one to consider.
When you want a fixed width, what width do you decide to use? My recommendation is to stick with 800 x600. This way you aren’t going to have those users scrolling horizontally to see your page if its too wide. But what about the blank space left over for the 1024 x 768+ users? Make that space work for your site aesthetically! Some sites will look fine and the blank space will flow with their layouts. Others, need a bit more there visually. A pet peeve of mine is a page that is left open and not focusing the user’s attention to the content. The biggest culprit is unused, unproportioned white space. You have a bunch of text or pictures in the middle and a ton of white space all around, or to just one side. It leaves the user wondering what *should* be there, or attempting to scroll to see if there’s more content. On some sites this layout works fine. But on most, there needs to be some indicator of where the site starts or stops. On a 800 x 600 layout this is important when displayed on a 1024 x 768 screen. One way to achieve this is by adding a simple border, background color/pattern or both. Finding something to set the background apart, still compliment the site and not distract can really focus the user’s attention effectively. The use of blank space on your site is just as important as the content layout itself. Don’t let your users get lost or lose focus on your site.
What about graphics? Time and time again people state “Must use web safe colors”. What does web safe mean? When referring to web safe this means the 216 colors that are the web standard all browsers support. This was from a time when monitors were displaying only a 256 color palette. Now days most computers are set to 24 or 32 bit and can display 65,536 to 16,777,216 colors! How cool is that? The colors we use in graphics and websites are limitless! Only %3 of web users actually use the 256 set up. If you want to limit yourself to the 216 colors to make sure those %3 can view the colors correctly, then by all means, have at it! I’m sticking to the wider variety of colors to create an endless possibility of colors combinations and aesthetic beauty.
I hope this has helped you understand the affects screen resolution has on web layout and the options available.
Another great resource with even more statistics is: http://www.w3schools.com/browsers/browsers_stats.asp
(0) commentsFirebug… see site changes on the fly.
A must have tool for anyone who wants to delve into design or even doing minimal changes to their website. Firebug. Its a plug in for Firefox (Mozilla Browser) that allows you to instantly see the HTML and CSS for any website. Not only can you see the code but it tells you if there are errors, makes it easy to read AND allows you to make live changes that you can use to see how you like an effect or look. Of course it doesn’t REALLY change the website but it will change how it looks for you at that time. This can help when you are trying to decide several backgrounds or colors. Or if you want to do something bigger like see how a new menu layout would look.
There are also several modes and tools built in. Want to understand how HTML works? Chose inspect mode and click and area of the website and it will display the corresponding HTML for that area. Click a div in HTML mode and it will display the related CSS information on the right. You can even monitor your network activity.
This is a highly handy tool for anyone wanting to understand their website, especially for designers looking for an easy way to test changes.
So if you have Firefox (which I recommend anyways!) definately check out Firebug
(2) comments
Subscribe
