Anyone good at HTML programming that can help me fix my page?

Miscellaneous and Personal Stuff I Must Share
1

Hello, I’ve lately undertaken a project of updating a friends’ web-site. About ten years ago, I worked for an internet site and learned HTML coding. Since my friend’s web-site is just basic HTML pages, nothing fancy, I thought it’s something I could tackle. But because I haven’t done any kind of programming for ten years, I thought it’d be a good idea to buy a book (“SAMS teach yourself HTML”) as a review and just to brush up. I’ve written the page to be compatible for XHTML as well.

I followed the book pretty well, and cobbled together a page based as per its’ instructions. Just to check how it looked, I ran it through an HTML page preview site (this one specifically.) And a little problem came up.

The basic layout is fine. The information is where I want it, laid out the way I want it. But for some reason, I can’t get the style (background & color, font, etc.) that I want. I’ve gone over the style commands again & again, but the page still keeps appearing with a default white background, black type, Times New Roman font, etc. NOT what I want. I’m frustrated to no end, since I can’t for the life of me see where anything is wrong. Any body out there who’s web-programmer savvy who can give me some pointers, or perhaps review the page style commands for me?

I’ll just state it right now, I do NOT want to use a page-building program or software. The purpose for my doing this is to learn how to make pages from scratch.

Thanks in advance.

2

Have you validated the HTML at http://validator.w3.org/? Having valid markup should help you narrow down display issues and tends to make things look more consistent between browsers.

3

I don’t know what that site is all about, but did you try simply saving the text as a .html file and opening that from your browser?

4

Er, well, it is going to be awfully difficult for anyone here to debug your HTML unless you actually show it to us.

Also, if you have you have actually written a page, why do you need to preview it at that site? It appears to be designed for previewing fragments of HTML without having to bother to write a complete page. If you have a complete page, you can test it more easily and more reliably by simply loading it up in your browser. (Serious web designers keep many different browsers handy so they can test their pages in all of them.)

5

How are you doing your CSS? Is it in the <head><style></style></head> section, or is it in a separate file with the extension .css, linked in the <head></head>?

If it’s linked in the head, and you are running it through that little tester do-dad, the tester will not have access to the CSS. Heck, that tester might not read the <style></style> tags either!

I second what njtt says…you need to show us your code, and you need to not use the preview thingy. Save it as a .html file and open it.

6

[ol]
[li]Study here —> http://www.w3schools.com/[/li][li]Post thoughts/requests here —> http://boards.straightdope.com[/li][li]Show us your code (preferably live online)![/li][/ol]

7

Also see Dynamic Drive, they are a boat load of information in the forums plus they have templates for you to use if you’d like.

8

That preview page may well be overriding the style information. Just save the HTML in a .html file, put the CSS in a .css file in the same folder on your computer, and open the .html file in your favorite Web browser.

But don’t go live with it until you’ve looked at it in at least the two most popular browsers (Firefox and IE). I’d also check Safari and Opera. It’s very common for a page to look just dandy in one browser and be grossly misaligned in another.

9

Ok, sorry it took so long to get back to you all about your comments. I have been paying attention and wanted to get your feedback. Here’s where I’m at:

I ran the code through there, and it said I had issues with the xhtml tags (even though I copied them straight out of the SAMS book.) For the sake of simplicity, I just re-wrote the page, stripping it of everything but the most basic HTML code elements. But I’m still frustrated.

Yes, that’s the first thing I did and it’s basically the source of my problem. When I attempted to open the page in Firefox, either one of two things happened…

  1. The page opened, but it showed the actual written HTML code commands, not the page as it should appear.
  2. The browser went bezerk and began opening an endless succession of blank ‘untitled’ browser windows.

No, the style commands are embedded in the page. But as I said, I’m trying to keep this simple as possible. Hopefully, if I can get the page to work right, I want to hook it up to a web-site that does have a separate CSS folder.

Well, here’s the stripped-down version:
<html>
<head>
<title>Narrows Botanical Gardens Special Events</title>
<meta-name=“description” content=“Upcoming events in the NBG during 2010.” />
<meta-name=“keywords” content=“Bay ridge, brooklyn, narrows, botanical, gardens, flowers, roses, events, 2010, plant, plants, sale, art, show, summer, series, high tea, film cinema” />
<style>
body {font-family:comic-sans,arial;font-size:12pt;color:88a08}
h1 {font-family: Impact, times new roman, serif; font-size:14pt;color:228b22}
h3 {font-family:garamond, times new roman, serif;color:daa520}
a:link {text-decoration:none; color:228b22}
hr {color:red; height:4}
table {width:100%}
</style>
</head>
<body>
<p><h1>Narrows Botanical Gardens</h1></P>
<table>
<td><a href=“http://www.narrowsbg.org/home.html”>Home</a></td>
<td><a href=“http://www.narrowsbg.org/about.html”>About</a></td>
<td><a href=“http://www.narrowsbg.org/maps.html”>Maps</a></td>
<td><a href=“http://www.narrowsbg.org/events.html”>Events</a></td>
</tr>
<td><a href=“http://www.narrowsbg.org/kids.html”>KIDS</a></td>
<td><a href=“http://www.narrowsbg.org/join.html”>Join</a></td>
<td><a href=“http://www.narrowsbg.org/join.html”>Contact</a></td>
</tr>
</table>
<a name=“thetop” />
<p><h2>Upcoming Events at the NBG in 2010<h2></p>
<hr />
<p><h3>Annual Spring Plant Sale & Art Show</h3></p>
<p><em>Just in time for Mother’s Day! A sale of all your perennial favorites, as well as rare & exotic plants, many of them grown in the NBG’s own green-house. Also a preview of our Summer Art Series!</em></p>
<ul>
<li>Saturday, May 1st, 10am - 3pm</li>
<li>Rain-date: May 8th</li>
</ul>
<p><h3>Gallery 364 of Bay Ridge presents</p>
<p>The SUMMER ART Series</h3></p>
<p><em>A recurring Art Show featuring local artists displaying & selling their works along the NBG promenade on Sundays throughout spring & summer.</em></p>
<ul>
<li>May 16, 23, June 6, 13, July 11, August 15, 22, September 19, 26, noon - 5pm (weather permitting)</li>
<li>Artists interested in participating, contact georgine@gallery364.com</li>
</ul>
<p><h3>High Tea at the NBG</h3></p>
<p><em>A traditional high tea to benefit the NBG rose gardens. Featuring: Sarah Owens (Rosarian at the Brooklyn Botanical Gardens), Michael Mauro (Curator of plant families at BBG), Light Menu by Daisy Martinez (Host of the Food Networks’ “Viva Daisy” cooking show) and tours of the NBG rose gardens by landscape designers James Johnson & Richard Haugland.</em></p>
<ul>
<li>Tickets: $40.00, limited seating available!</li>
<li>RSVP by May 1st to: Helen Bruno, 718-748-0708 or lemoni12@aol.com</li>
<li>Sunday, June 6th, 4pm</li>
<li>Rain date: June 13th</li>
</ul>
<p><h3>Free Outdoor Cinema Series</h3></p>
<p><em>Grab a blanket or a pair of folding chairs, and join us as we watch classic movies on the NBG lawn under the starts. A 50/50 raffle will be held and popcorn & snacks will be sold./em></p>
<p><h3>MILDRED PIERCE</h3></p>
<p><em>The 1947 classic melodrama starring the legendary Joan Crawford!</em></p>
<ul>
<li>Thursday, July 8th @ sundown</li>
<li>Rain date: Friday, July 9th</li>
</ul>
<p><h3>FINDING NEMO</h3><p>
<p><em>It’s kids night out! Bring the whole family to see the beloved, ground-breaking animated Pixar film.</em></p>
<ul>
<li>Thursday, July 22nd @ sundown</li>
<li>Rain date: Friday, July 23rd</li>
</ul>
<p><h3>BLIND SIDE</h3></p>
<p><em>The film that won Sandra Bullock the 2010 Academy Award for Best Actress. Also starring Forrest Whittaker.</em></p>
<ul>
<li>Thursday, August 12th @ sundown</li>
<li>Rain date: Friday, August 13th</li>
</ul>
<p>Keep watching this page for more information on events held at the NBG in 2010!</p>
<a id=“thetop”><center><em>TOP</em><center></a>
</body>
</html>

10

That code untouched formats fine for me. Green and Yellow.

11

Looks good to me, too. How does this link look to you?

(I figure you won’t mind, since you published it here. If you do, I’ll take it down post-haste. It’s not like I plan to leave it up after you see it, anyways.)

The only problem I saw is that the word TOP at the bottom should be linked as follows:


<a href="#thetop">

You also might want to change the actual place it links to to


<a id="thetop" />

as I believe the name attribute is deprecated.

12

Also, the “Contact” link actually links to the “join” page. And you appear to have left out the background color, assuming you want to match the rest of the site.


<body bgcolor="#ffffcc">
13

Never mind; if you’re using goldenrod text, I guess you don’t want a light yellow background. I’m kind of confused about the design choices, though; the old website is attractive enough.

14

There are some coding errors in there that some browsers may handle okay, but others might choke on.

  1. Never put <h1>, <h2>, <h3> tags inside of <p> tags. Use them instead.

  2. Your table rows end (they have </tr> tags at the end), but they never begin (no <tr> tags at the beginning). This can really screw up some browsers.

  3. Your closing link is all inside-out. The <a> link should be inside of its container (<p> or whatever). Also, the <center> tag was deprecated a couple of HTML versions ago. You can use <div align=center> instead, or better yet, create a style that centers the line.

That’s just a quick glance. There may be other stuff.

15

Did you make this page? The person who made that page is apparently using “Internet Assistant for Word Version 3.0”, which is noted in the source. If you view the source you’ll see that nearly all of the brackets (< and >) have been HTML encoded into < and > That makes it so that code appears on a page without being rendered.

If you are the one using this Internet Assistant for Word, then stop it. Take your code as you have posted it here, paste it into Notepad, save the file as file.html and THEN open it in your browser.

If opening an html file in your browser is making the browser show raw HTML instead of rendered HTML, then you are not actually using the HTML code you think you are. I think that when you save your file, a conversion is happening and the HTML tags are being encoded.

Double-click one of your problematic HTML files - one that shows only raw HTML in the browser - and once it’s open, right-click and choose “View Source.” If in the source you see > and < where > and < should be, then you’re saving something wrong.

Also, fix the stuff Gary pointed out.

16

Another thing about using Word as an HTML editor…Word is not an HTML editor. Word has special code in it that renders colors, spaces, paragraphs, etc FOR THE WORD FORMAT. There is no [common] way to make Word spit out code. Once you type anything into Word, it is formatted for Word.

You can’t type HTML CODE into Word. You can type things into Word and tell it to spit out what you just typed - formatting and all - into HTML (crappy HTML at that). But typing <p>Text</p> in Word and then exporting that into HTML will leave you with <p>Text</p> And it’s doing exactly as you told it to do.

At the very least, use Notpad to create your HTML files. If you need more help than just code on a page, use some sort of HTML editor that color-codes your tags. Or use a WYSIWYG editor that lets you make HTML in a design/browser mode. Or you could use Word to create a document without any HTML code and tell it to export to HTML (this is highly highly not recommended, but at least that’s the right way to do it).

Just don’t ever use Word as an HTML editor because that’s completely not what it’s for. You need a plain text editor. Word is a rich text editor.

17

That appears to work. Perhaps the problem is somewhere in the non-stripped-down version.

Remember, problems like this can often come down to something like a misplaced quotation mark or missing comma or the like.

18

Ok folks, just an update on my progress so far.

ZipperJJ = It’s with great sheepish humility that I admit that my first problem was that, indeed yes I had written it out in ‘word’ rather than in notepad. The worst of it was that I did recall reading that in my own studies. I just prefer to write in ‘word’ and had intended to eventually just copy & paste it into notepad eventually. I just forgot that step. Gulp.

BigT, nametag & Gary “Wombat” Robson - I followed up on your suggestions and made corrections. Thanks to all of you for your advice!

A few nagging bugaboos if you’re still inclined to give advice:

  1. The ‘whitespace’ background. I want it to appear either lightskyblue (87cefa) or lightseagreen (is it 20b2aa or 2ob2aa?), but try as I might the background continually appears plain white. I’ve tried entering it as a <style>background {color: 87cefa} or as part of <style>body {bgcolor: 87cefa} in the header, or as <bgcolor="#87cefa"> in the body, but neither seems to work.

  2. I would prefer for the body of the page to appear centered, straight down the middle of the page. But neither <style>body{align:center} in the head, or <div align=“center”> seems to work.

  3. I want to include some photo shots (have uploaded jpgs to the image folder) but am unsure about sizing them on the page. All the jpgs are about !.40 MB in size. Any advice on the height=& or width=% ratio for a web-page?

Once again, thanks in advance for suggestions you might have.

19

In CSS, color = text. You want to use background-color. Such as body{background-color: #87cefa;} or <body style=“background-color: #87cefa”> or <body bgcolor="#87cefa"> (which I think is deprecated).

To center content, use nested divs. Quickest and dirtiest way is…



<div align="center" style="width: 100%;">
<div style="width: 900px; text-align: left;">
YOUR CONTENT
</div>
</div>

That will force all of your content to be in a 900px; container that is centered on the page. The content of the smaller container will be left-aligned.

As for images, you just need to size them however they fit best in the design. You also really don’t want to use HTML sizing for images. In your development, use real sizes (width=“100” for example) then once you’ve figured out the optimal height and size, use your image program to physically make them that size. If you use HTML sizing to make your images smaller, they will look bad and not load as fast as possible. If you use it to make your images larger, they will plain look bad.

To ensure the fastest loading time and also to make sure your page looks the same whether or not the images show up, be sure to specify real sizes, even though you’ve taken the time to physically resize them. Always use alt tags, and don’t use spaces in the image file names.

20

If you are typing in straight HTML, never use a word processor. Use a programming text editor. Something like Notepad++ or PSPad.