Help me learn HTML =)
- Started
- Last post
- 49 Responses
- laboboy
graphic designer here finally trying to learn hand coded html.
im practicing tables so i took a image in photoshop and purposely sliced the image up in weird random ways and see if i could hand-code it into a table.http://www.geocities.com/bimmery…
as you can see theres white space. i tried valign and tr widths/heights. i dont know wat the problem is. been trying for like 2 hours now. its suppose to look like one image. all the image sizes are correct and all. i know i could of sliced it up evenly but i wanted to make it hard for myself. any help would be great. =)
- ********0
hmm.. tell ya what you should do is learn a little css.. why do people break up an image like this in the first place? what' the point? ideally, you should try to get away from tables as much as possible.
check out sites like alistapart.com or http://www.csszengarden.com/ or www.w3schools.com
- ********0
mezzoblue.com is another good site... checkem..
- canuck0
I'd still learn how to deal with tables.
Use valign = top in the cells to push your images up. I think you need to recreate the table though to get you pic to work.
- laboboy0
i just broke it up like that to practice. of course i wouldnt slice it like that if i were to make a website. its just for practice. yea im trying to learn html first then move on to css. one step at a time. =)
- SF20
The book for graphic designers wanting to get into web design
- laboboy0
thx ill check out those sites. tho i think i already know the basics. just trying to pratice coding complex tables. i tried the valign=top but ill try again and see what happens. ahh im so behind haha
- Mick0
Yup - just throw some valign='top' in some of your TDs where the images need to align to the top of the cell and you're sweet - otherwise all is good. Once done remove the table border and you're sweet.
- ********0
ya know if you're really really just starting out, go with www.w3schools.com.. that'll get you to an intermediate level at the least... for sure enough to get by and start having some real fun.
the tutorials are brief but effective and they've got a nice little feature that you can try out your code in a little pop up window.. have fun with it!
- laboboy0
thx for the help so far. i edited it and got it to look a lil better but still no dice. i wont go to sleep till i figure this out. i know this is a weird table but i still wanna figure it out. am i missing somehting here!?
- trez0
you really lose your time with tables :/ That was how people designed 5-10 years ago, and it sucked most of the time
use them only for tabular data (rankings, etc.)
for the rest, use CSS. actually CSS is to be learnt with HTML. HTML alone doesnt make that much sense in matters of graphic design, HTML is just for putting your text/content/functions.
the links in the first answers were pertinent.
- mrock0
CSS & XHTML seems to be the web standard these days. I actually started with table layout like 7-8 years ago cause of . Reinventing myself and using CSS/XHTML is the way to go. All above links from past responders are great resources. Yes it's a good time to learn again....
- smellvetica0
you could start with pshop>imageready and then start hacking into the code replacing what you need to with html.
then learn css.
- ********0
Out of interest - does anyones have an example of a fairly complex CSS layout/site? I've never just used css... I've always needed tables for something.
- SF20
I'm about to launch one in a few days
- laboboy0
i exported to html from photoshop to see how they did it but they used spacer.gifs. im trying to avoid that. thanks for the advice on css. it prolly is the way t go for websites these days but still im trying to learn basic html so that i know everything. i dont want to sound rude but i keep asking how this can be fixed and everyone just tells me go wit css. surely someone knows how to do this. im sure everyone here is past this html crap and on to bigger and better things like css and probably dont even remember how to do this anymore. its like when my lil sister ask me basic algebra questions. its easy but im old and i dont remember and i dont need to know that crap anymore.
- ********0
look - if you're going to cut up an image like that, you need to do it in a logical way.
Think in columns and rows, and if you're splitting a table like that - a least try and keep them lined up! I would suggest you start again - evenly split the image into say 4 rows and 4 columns and then try and hand code a table for 4 rows and 4 columns...
Make it easy on yourself at first....
- ********0
also - set your column widths to the width of your individual "tiles". Then set the overall table width to that of the original image, or the equation of 4x'tiles'
DON'T expect browsers to guess. You must set table dimensions.
- SF20
why do you want to slice up the image for anyway?
- Xentic0
A few years back everyone sliced big images. I believe it was for a faster loading of the page... I did the same.
I'm interested in some complex CSS layouts too. Anyone?