HTML coding Q

Lloyd · Post by **Lloyd** » Fri Aug 19, 2005 1:38 pm

I just got finished re-doing my "about me" page, and it finally occured to me that there's got to be an easier way to do what I've been doing for 4 months.

I'm visually oriented, so if half my images are broken I can't really code worth a flip. And autokeen (unless I'm mistaken?) likes you to put all your images into the images folder. Result: All my images say <img src="/images/filename.jpg"> in the code. That what I'm supposed to do, so I give myself a candy bar and go on with my life.

The problem is this: as a result, on my personal machine my pages are all fouled up. Broken images galore. Since a lot of my page depends on image size/placement, this is bad. Not to mention there's no way to check colors, ect, or size of type against my background image.

What I've done to combat this is create a copy of every page I have, in a nice folder called "pretty and code-able." Once I get a new page like I want it, I transplant all the keentags, change the image codes to point toward the /images folder, copy it over into my stash of keentagged folders and then finally upload it.

This system is really long and tedious, not to mention rife for mistakes. And if I've mispelled /images, for example, I'll have no idea until keenspace has updated me.

It didn't hit me until now that someone has got to have found a better system. Probably lots of someones. 8) Prove me right, y'all?

Plothole · Post by **Plothole** » Fri Aug 19, 2005 2:24 pm

While working on my pages, I do a few things:

First, I make sure everything is in the same subdirectory that it'll end up in /public_html/. This means, for example, I put daily.html* in /d/.
Second, I use "previous directory" (ie ../images/ ), that way everything still works on my HDD.**
Finally, I give layout-crucial images a fixed height and width. This way the layout isn't damaged up even if said images fail to load.

* daily.html is sort of a template for the template, in that it uses actual html in place of the keen-tags. (I also use an index.html file for the same reason)

** When I'm ready to upload, I usually run a Find & Replace to turn ../ into just / , though this is technically unnecessary.

Lloyd · Post by **Lloyd** » Sat Aug 20, 2005 3:33 am

OK, thanks!

Dutch! · Post by **Dutch!** » Sat Aug 20, 2005 3:38 am

I sort of do something similar. I've basically made a mirror copy of my ftp site and folders on my harddrive where I put everything as though it were on the server site. Then when I fiddle and view what I hope my page will look like, the links see the images on the harddrive because they are using the same path, although on the net they use the images in the net folders instead.

Lloyd · Post by **Lloyd** » Mon Aug 22, 2005 2:50 pm

OK. I thought I was with y'all, but I lost it.

I'm on Windows... yes, I know... and I'm still learning a lot about computers in general. What's the difference between a path and "hey, computer, look in this folder"?

In my folder "New Webpage," I have folders marked "images" and "webpages" as an organizational duplicate of my keenspace "Workspace" file on FTP. But my coding <img src="/images/logo.jpg"> isn't getting through; I'm still showing a broken pic. Nor is <img src="../images/logo.jpg.">

I dig the idea of a template for the templates (isn't that what I've been doing, though?), but I'm lost on what your /d/ is. And what's an HDD?

Sorry I'm so ignorant! But the best thing about ignorance is it's curable. I'm trying to cure it even now. Thanks for bearing with me!

Sixguys · Post by **Sixguys** » Fri Aug 26, 2005 5:48 pm

It's time for the class clown to teach.

First, directory = path. Somewhat. Our server uses BSD. It uses a UNIX path. So does Windows, in a sense. And "HDD" = "hard disk drive". This lesson assumes yours is "C:\".

First, a listing of the (default) server directories and their functions. You should see these in your FTP client. Do not delete any directory I list here.

/ -- this is root. Do not touch. Do not upload stuff to root.

/workspace/ -- the "indextemplate.html" and "dailytemplate.html" files MUST go here

/workspace/webpages/ -- all HTML pages that will NOT have sequential comics in them go here. Cast, archive index, FAQ, contact info, etc. You may still use KeenTags, but NO COMIC TAGS. You may put folders and more files in here. These will stay here, but get copied to another location automatically.

/workspace/comics/ -- comic files (images) go here, but they do not STAY here. This is the "buffer" area

/workspace/images/ -- this is a "symlink" to /public_html/images/

/public_html/ -- this is the "root" of the web server. Files here are visible to the entire world. DO NOT PUT STUFF HERE OR DELETE STUFF HERE. When AutoKeen runs, your "template" files AND "webpages" files will be tag-processed and placed here. Directory structure and all; if it's in "webpages", it shows up here.

/public_html/images/ -- put all non-comic site graphics (your photo, your pet's photo, the comic's title) here and ONLY here

/public_html/comics/ -- this is where your comic images end up, on the proper day. NEVER upload comics into here.

/public_html/d/ -- this holds the "archive" pages; one HTML page per day, based on "dailytemplate.html", named in accordance to the date of the comic files. DO NOT DELETE OR CREATE FILES HERE

Special "paths", no matter what directory you are looking at:

"/" is the "root" of the current drive. On your computer this maps to "C:\" (or whatever hard drive letter you choose. On the WEB server, this maps to "/public_html/". Any file or directory in public_html is visible to the world.

".." is the "parent" of the current directory. But you probably knew that.

Moving on. "/images/" does the same thing on all machines. Since it starts with "/", it looks for the directory "images" starting at the ROOT of the current drive. On the server, this is "/public_html/images/" (which is the ONLY place to upload non-comic site graphics. Anti-stealing service is in effect!) On YOUR COMPUTER, "/images/" IS TRYING TO FIND "C:\images\". "/" at the start of any URL will do that.

So, if my current file-in-progress is "C:\Documents and Settings\Brian K. Malerich\My Documents\WWWSite\6guys\indextemplate.html" (yes, that's the whole path), but it references a stylesheet, site images, and other pages using "/" for all of them, my page will NOT look right unless I move everything to "C:\"! In order to preview anything, don't precede paths with "/". So why would I do that to begin with?

Simple. ONE: Because I upload that file to "/workspace/". AutoKeen moves it to "/public_html/". Once there, "/" does nothing. It works.

TWO: Because those of us who might switch domains ("sixguys.keenspace.com" --> "6guys.com") don't want to include the domain in every link. "/" doesn't care about domain.

THREE: Because if I have "indextemplate.html" that calls an image ("title.gif", in "/public_html/images/") and I have an archive page "/public_html/d/20030906.html" that has to call the same graphic, I either have to do this:

"images/title.gif" (or "/images/title.gif") in one and "../images/title.gif" in the other

OR "/images/title.gif" in both

This means ONCE EVERYTHING is on the server and AutoKeen has run, "/" will properly reference everything. My pages have identical code for consistency's sake.

Yes, for you poor new Comic Genesis users this is all confusing. If I code using "/" I must put all the stuff that IS/WILL BE in "public_html" into "C:\" in order to preview. So don't. Just remember; you PUT "indextemplate.html" and "cast.html" (or any other page) in DIFFERENT directories, but they BOTH end up in "public_html". Code according to that, NOT to your hard drive. And never include "workspace" or "webpages" in your code. Pages in them are copied to "public_html" anyway, and that is "/" to the web browser.

Your best solution? If you want more than just the index and automatic archive, PLAN your pages out on paper. File names, directory names, etc. The archive will take care of itself. Remember four things:

1. Code all img references and links from the FINAL structure (the server's point of view), NOT your hard drive.

2. Upload ONLY indextemplate.html and dailytemplate.html to /workspace

3. Site graphics go into /public_html/images

4. The other pages and directories that YOU want go into /workspace/webpages. NOWHERE ELSE. ALL that content gets processed and copied into /public_html, which in your browser is "/".

I sure hope this helps. I'm going to add this as a CGWiki tutorial. Good night.