Jump to content

First (true) HTML endeavor


Recommended Posts

Well, I looked at the source code, as that seems to be what you want to focus on. Firstly, there are 2 body tags: one above the tag, and one below. You should only have the one below. Put the bgcolor in that one. Also, you should have a value assigned to the alt= piece in your tag. Otherwise, not much there, but well done.

Link to post

separate style from content. learn some CSS, it will make life a lot easier in the long run.

you might also want to consider saving your graphics for web ^_^ the background of the graphic doesn't match the background applied to body :>

Link to post
you might also want to consider saving your graphics for web ^_^ the background of the graphic doesn't match the background applied to body :>

Really!? Im suprised, in the psd, the image color was #237eb8, I might just make it a tans png, as an image. hm, I have a lame monitor, do you have a HD monitor?

@nicholasheer thanks for the advice, :)

---update

Alright, I cleaned up the html document, removed the extra body i had, made the image a transparent png, and the background one color, and added the 'alt' to the image. thanks:)

Link to post

From personal trial and error with my website thare are one or two reasons that the color doesn't match. For the record, it looks fine for me (in firefox on XP) I'm only going to assume you're running a windows platform too.

So yeah, about making the color match. If you do ANYTHING in photoshop for web purposes, it's imperative that you disable the color profile. New documents are opened using the profile set for your operating system. Someone running OSX would see the same color as having a bit more color saturation. Thereby not making it the same exact color despite using the same hex#. Believe me, when I had that problem, I spent hours thinking it was a programming error or something wrong with my CSS until i finally found out that i just needed to resave the image slices without a profile. :slant:

If you want to find it, it's located at:

EDIT / ASSIGN PROFILE / "Don't color manage this document" option. [ OK ]

The other thing is to use .PNG images only when necessary. My site has transparent elements that look neat in firefox, or safari, but IE botches it pretty much because it can't seem to handle that fantastic image format. Your page image consists of 5...6 colors tops, saved with a background a gif would look exactly the same and be far smaller in file size.

Hope this clears up some issues.

And if you're interested, my site is linked in my signature. /shameless plug.

Link to post

Wow, I'm glad I asked, a lot of good tips/advice has been coming in, I'm drawing up a site right now, and coding it up through trial an error, I’ve given my self a month to make it perfect, trying to get away from the Blog wordpress look and more into the gallery portfolio site,

Right now I'm researching on getting a mouse hoover effect, any advice?

Link to post

Yeah, you need a good reason to use a mouse hover effect. Overusing anything and complicated graphical elements make people think of '90s websites, which is never a good plan. ;)

What are you going to use it for? Unless it's a personal learning project that isn't going up on your website, I'd generally caution against going further.

-NC

Link to post
anything and complicated graphical elements make people think of '90s websites, which is never a good plan. ;)

yeah duly noted, its why I'm giving myself so much time avoiding the lame, over thought, cheesy quality site. It's more of a learning tool, but I'll likely just hoover the splash screen text or main side bar text,

I plan on a very clean cut, web2.0 look, I stumbled on SimpleViewer and uploaded it and I believe that gnomexp is using it, I might end up drawing my own gallery, (in which case ill need a sort of hoover glow)

Can someone plug a link or a code of hoover text/image? the deeper I read into w3schools, and desect other webpages, Ill be sure to figure it out,

Link to post
I could look this up, but this is quicker lol; how do you marry a CSS styler document to a HTML document?

In your

tags, place the following (I recommend just before the , for easy access):

<link rel="StyleSheet" href="NAME_AND_LOCATION_OF_CSS_DOCUMENT.css" type="text/css" />

Also, to do simple rollover effects, I do it all with CSS. This site has an excellent generator, if you don't want to write the CSS completely yourself, or to help you learn.

@Link: I agree with you about the PNG images, although IE7 should do an OK job rendering them. I'm re-doing my site right now and am using exclusively JPG images.

Link to post

[s]http://david.mysillypc.com/alpha

ALPHA version, that is why the entire site is all in images, no CSS, and the html is a mess, this is the design premious that I am going to use to build the beta version. I got a few PM's from people who wern't fooled by my pixilation in my screen shots and found the link to the site and gave some early feedback. I am going to be using primitive Java so when you hover the image (wallpaper, icon, demo webpages) it fades in/out the details. I'm still trying to write my first CSS script for the beta version.

I am in need of help weither it be AS members or another week of reading w3schools for the beta (dont worry no more hotspoting my webpage images). I'm welcome to anyone's input or comments and I'll be sure to give credit were credit is due.

Link to post

As a portfolio site (which is what it looks like to me) I wouldn't use anything other than html and css unless you feeling making lightboxes for your images.

BUT

Seeing as this site seems to be more of a learning experience in html for you, I'd try and do some very basic css and try to style the whole site to look the way it does without the use of tables or html styling. Also, a good way to learn is to find a good website (usually corporate) and try to recreate the site yourself from scratch (minus maybe the javascript, etc).

Link to post
Why is it that firefox (and IE6 I belive) can't render #585a5b as a background color?

I just made a quick test page to test it out and it worked fine for me. Are you using the correct tags?

html code:

bgcolor="#585a5b"

inline css style:

style="background-color: #585a5b"

Link to post
  • 2 weeks later...

Help Needed! I've gotten over my head in this, I need so much more kowledge to complete easy tasks... Ive been reading up about 3/4 pages at w3schools/day, and I've just estimated it will take me (alone) another month for me to figure out how to turn my hotspotted alpha images into a working beta,

I'm starting to get nervouse trying to release it (beta) for; July 17th.. If anyone has the time and would like to help me out contact me [email protected](dot)com. I will hook you up with your name on the site with a personal link, & I can arange payments (~+20$ via paypal) its all real entry level stuff that I'm looking for.. I would refer to Google, and w3school but what Im looking for is to vauge and difficult to find/comprehend

Link to post

lol, the problem wasn't that I didn't know how to do anything, I understand it all, I just didn't know how everything fittogether/worked (everyone's been their before) Godmic had spent a half hour, explaining and showing how to do some things, off of the 30minutes I learned basically everything I need to now Finally start the construction of the beta, (thanks again Godmic)

The deadline is in place because I'm getting an amazing deal (unlimited bandwidth & storage) from a personal friend (mysillypc.com) and believe I get it around July17th (same date as "coldwerturkey.com" release date) so I don't want to seem rude or ungrateful by not using it right away, or filling it with an unusable alpha, but thanks for the advice;)

Link to post
  • 2 weeks later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...