For those of you who write HTML...

Discussion in 'Computers, Electronics, IT & Gaming' started by Drew, Oct 17, 2005.

  1. Drew

    Drew Forum MVP

    Messages:
    26,343
    Likes Received:
    1,876
    Joined:
    Aug 17, 2004
    Location:
    Somerville, MA
    Ok, so I've started to get the hang of fairly rudimentary HTML coding, and within another week or so will probably have it down to the point where I could start work on a proper page. Actually, I could probably start now, but I still have to do a lot of graphics.

    so, the thing that's bugging me the most so far is working in Notepad - it works perfectly well, but when I want to preview a page, the fastest way I've found is to save it, then change the extention from .txt to .html. And, I mean, that's just a pain in the ass - is there a better way to do this?

    -D
     
  2. Chris

    Chris metalguitarist.org Forum MVP

    Messages:
    18,861
    Likes Received:
    4,161
    Joined:
    Apr 19, 2004
    Location:
    Boston, Mass
    I use HTML-Kit. Think of it as a glorified notepad. It even has preview built in. It's also free.

    It has a bunch of cool shit, like a built in FTP (I use WS_FTP anyhow though), and you can edit your site on the fly. It also has a code checker that'll clean up your own code (add in missing tags, etc), and USUALLY doesn't fuck it up (sometimes it will though).

    Here's a pic of your index page in HTML-Kit, with the code checker.

    [​IMG]
     
  3. Chris

    Chris metalguitarist.org Forum MVP

    Messages:
    18,861
    Likes Received:
    4,161
    Joined:
    Apr 19, 2004
    Location:
    Boston, Mass
    For example, if I add in some quick text to your current code and clean it:

    [​IMG]

    I can preview it before committing the changes to the actual website.

    [​IMG]
     
  4. Chris

    Chris metalguitarist.org Forum MVP

    Messages:
    18,861
    Likes Received:
    4,161
    Joined:
    Apr 19, 2004
    Location:
    Boston, Mass
    If you notice as well, in the status bar, it will tell me what line it finds errors (and/or just malformed statements) at, what it fixed, and why.

    (Where it says 'img lacks alt attribute'.)
     
  5. Chris

    Chris metalguitarist.org Forum MVP

    Messages:
    18,861
    Likes Received:
    4,161
    Joined:
    Apr 19, 2004
    Location:
    Boston, Mass
    The thing about HTML (while I'm babbling) is that for a basic page, it's pretty straightforward. Until you care about getting into PHP and scripting (which is good to get into, but take it one step at a time), 90% of what you'll need to do is plain statements. You start "doing something" with { code } and "stop" doing it with { /code }.

    Change the curly brackets to < and >, since vBulletin will parse it as HTML. ;)

    All that crap MS Word (or whatever it was you used to generate your index) can be summed up into this, for the most part:

    {html} <- Start HTML
    {title}Drew's Webpage{/title} <- title of the page
    {body bgcolor="#333333"} <- background color of the page, start the body.
    {div align="center"} <- start aligning to the center
    {br}{br} <- Line break
    {img src="http://http://www.drewpeterson.org/images/logo.jpg"} <- Show the pic
    {br} {br} <- Line break
    Coming Soon <- Your text
    {/div} <- Stop aligning center.
    {/body} <- End the body.
    {/html} <- End the html.

    You don't even need the closing /div and /body statement. This isn't clean code by any means, and the above code will be frowned upon by just about anyone who cares what the code composition looks like, but it will accomplish the exact same thing as the 29 lines that you have now. Linking is the exact same way. "a href" = start linking to x. So if you wanted to link to sevenstring.org:

    {a href="http://www.sevenstring.org"}Everything in here will be a clickable link.{/a}

    With a picture instead:

    {a href="http://www.sevenstring.org"}{img src="whatever.jpg" alt="This is the popup text".{/a}

    Start doing something (linking). It'll do it to whatever's between the statements until you tell it to stop.

    The body statement defines your setup for the page itself. Things like bgcolor="red", link="blue" alink="green" vlink="green", etc. alink is "active link", vlink = "visited link". That sets it so that if someone's already been to a page you have linked, it won't default to purple and screw up your page.

    Changing fonts is the same deal:

    {font face="arial" size="2" color="white"}Here is some text{/font}

    Would turn out as two point, white, arial text.

    When you get a little into it, the "right" way to do things is with what's called cascading style sheets. Basically these are templates that define all different page elements. For a basic CSS, you'd set things like the background color, font, link color, etc. That way if you have 15 pages on your website that all look the same, instead of changing the body statement in 15 pages, you change it in a single CSS that all 15 pages point at. But that's down the line.

    Again, this is the super-broken-down version of it, but the foundation of learning HTML is just to first understand what it's doing. :)
     
  6. Drew

    Drew Forum MVP

    Messages:
    26,343
    Likes Received:
    1,876
    Joined:
    Aug 17, 2004
    Location:
    Somerville, MA
    haha, and I thought I wrote novels around here... ;)

    Yeah, first off - the page above was done in Dreamweaver, before I decided I didn't really like Dreamweaver and should probably just learn how to write by hand. So I take no responsibility for any content. :)

    Now, time to go download that editor, and depending on how brave I feel see if I can rewrite that one by hand tonight.

    -D
     
  7. Chris

    Chris metalguitarist.org Forum MVP

    Messages:
    18,861
    Likes Received:
    4,161
    Joined:
    Apr 19, 2004
    Location:
    Boston, Mass
    :yesway:

    Keep in mind that you CAN call colors of fonts and pages by their regular name. For example {"bgcolor="red"} will work, but it's considered cleaner and will end up working on more browsers if you call it by it's proper color code. That's what the {bgcolor="#FFFFFF"} shit is. #FFFFFF is HTML code for white. I use Paint Shop Pro, a cheeseball small editing app. I bring up the color that I want on the palette, and the program spits out the appropriate HTML color. Like so:

    [​IMG]

    It's damn handy, because sometimes I'll see a color that I want. For example if I'm making a SS.org graphic that I want to look good against the gray, or I want the exact gray for the background, I'll grab a screenshot of ss.org, grab the paint dropper tool, pick up the color that I want, and get the HTML tag for it from there. Like this:

    [​IMG]

    Using that kind of code instead of the cheap way is just a good habit to get into, otherwise you end up with a page that looks great in, say, Internet Explorer, but is completely fucked in Mozilla. A lot of that same compatibility/interoperability is what the giant pile of shit at the top of the Dreamweaver code is (doctype, meta content type, etc).

    For example:

    {center}
    This is centered text.
    {/center}

    Will do the same as:

    {div align="center"}
    This is centered text.
    {/div}

    But the latter is preferred. HTML-Kit will put the majority of the necessary stuff in there for you as well. It seems a little intimidating at first if you're new at writing any sort of code, but it's a kickass building block and pretty simple once you get into it.
     
  8. Kevan

    Kevan Forum MVP

    Messages:
    2,128
    Likes Received:
    478
    Joined:
    May 10, 2005
    Location:
    Columbus, OH
    With DW, you can split the screen. I have mine setup where the top shows bare code, and the bottom is WYSIWYG.
    I preview with a simple push of F12 (opens in MSIE).
    Works great.
     
  9. darren

    darren Decibel Guitars Forum MVP

    Messages:
    13,115
    Likes Received:
    1,383
    Joined:
    Oct 18, 2004
    Location:
    Greater Toronto Area, Canada
    While you're at it, i would strongly recommend learning how to use CSS. It's a lot more versatile and more elegant than using
    HTML:
    <font>
    tags.
     
  10. Drew

    Drew Forum MVP

    Messages:
    26,343
    Likes Received:
    1,876
    Joined:
    Aug 17, 2004
    Location:
    Somerville, MA
    Working on it - I'm semi-embarrassed to admit, I picked up the latest edition of "HTML for Dummies" a few days back, and am about halfway through. There's a fairlyu substantial CSS section that I'm about to hit - a brief scan makes it look pretty intuitive, but it'll probably take a few tries to get it to click.

    -D
     
  11. Leon

    Leon {##[====:::. Contributor

    Messages:
    13,717
    Likes Received:
    1,036
    Joined:
    Jul 9, 2004
    Location:
    Nebula, Ohio
    is there anything like that HTML-Kit for linux?

    i actually edit code in a little program on my linux side called nedit, which is alot like notepad, but has greater functionality.
     
  12. 7 Dying Trees

    7 Dying Trees Forum MVP

    Messages:
    9,937
    Likes Received:
    1,727
    Joined:
    May 6, 2004
    Location:
    7th Ethereal Plane of interstellar hell, Innit Bru
    While everyone is at it:

    Learn XHTML and CSS.

    HTML is deprecated, ie, it's not going to see any new versions, so I'd recommend XHTML (which is really HTML, but cleaned up, hence having to pay a little more attention to your tags and closing them properly)

    Editplus is pretty cool tool, but i think the html ones given here probably suit html/xhtml better. However, if you also like doing a bit of programming I'd get editplus.
     
  13. 7 Dying Trees

    7 Dying Trees Forum MVP

    Messages:
    9,937
    Likes Received:
    1,727
    Joined:
    May 6, 2004
    Location:
    7th Ethereal Plane of interstellar hell, Innit Bru
    In notepad if you save it as.html (you can change the file extension on the save, also, if you are working with html or any other programming make sure file extensions are visible if you use windows (ie: Folder options show file extensions))
     
  14. BCrowell

    BCrowell Cubicle Dweller Contributor

    Messages:
    794
    Likes Received:
    21
    Joined:
    Apr 8, 2005
    Location:
    Eastern NC
    Don't forget to check out Flash!! Nowadays, you don't even have to have the program or know how to use it, simply use free flash builder programs. Some are very versatile and create some kick arse customized pages.
     

Share This Page