Jump to content

HTML Programming.....


Tillerman
 Share

Recommended Posts

Because html isnt as complex as c# and easier to learn, getting a book might not be worth it. For this, i reccomend learning off the internet. Ill get a link for the site im learning off in a minute.

EDIT: Heres where Im learning from.

http://www.yourhtmlsource.com/

And heres an html editer I reccomend.

http://www.pspad.com/en/

I'm still alive!

Link to comment
Share on other sites

I would recommend W3School for learning HTML too. It's not hard.

A tip: use tables to align your content. It's the best way.

Btw, most of the time I use flash to create my website since I hate patching up code just to make it compatible for both IE and FF.

siggiecj5.png

Some links: | Personal Website | Alien Attack |

Try out my plugins: | Antialias | Diagonal Lines |

Link to comment
Share on other sites

GAH!!! TABLES! NOOOOO!

*convulses, frothing at the mouth*

If you want to take the easy way, I guess tables work...

If you want to do it the good, semantic way, or if you plan on doing site design professionally, CSS is the way to go.

w3schools.com is a good place to learn, as is HTMLDog.com. For CSS, HTMLDog.com has the syntax, and CSSZenGarden.com has some great examples. That's how I taught myself.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Au contraire! There is not a single

Editor... :P

Tables are for tabular data, semantically. For site structure,

s are the way to go. Tables define a structure of their own, and as such create document flow problems and accessibility nightmares. If you look at my site sans CSS, it looks like normal text, with default padding and font size - a visually meaningful page for someone looking at it through a text browser.

I do still have a few accessibility problems with my current design (all navigation lists should be proceeded by explanatory headers indicating the reason or grouping of the links, and CMDSketchpad does not have one for the Main Menu at this time. I just read that a few weeks ago, and I've not yet had the chance to change it. I have, however, included that on the sites I've designed since.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Eh, editing is a pain... <_<

^ Up there. Short version: accessibility.

Also, tables have a predefined structure, which severely limits layout flexibility.

And as far as the difference between them, the visual result of a "well-used" table structure and a well-made CSS structure is practically nil, but when it comes time to edit that layout in a year when the bossman wants it different, good luck rearranging your colspans.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Hey, CMD...this might help you sort out accessibility issues: http://fae.cita.uiuc.edu/index.php

it's free to register (and then you can do an entire site many levels deep).

Json, yes, many sites do use tables. Many of them do so in a way that attempts to use tables (which are meant to hold columns of data) to position images.

Is it easy? Yes, absolutely.

Will it completely screw up the ability of people with screen readers to navigate your site? Yes, absolutely.

The FAE (Functional Accessibility Evaluator) will let you know about lots of common issues that your site may have that can affect usability for people that use some type of assistive technology to navigate web pages.

The reason that CSS and (X)HTML are such a good solution is that they allow you to more completely separate content and presentation (layout) in your web pages.

Internet Explorer 6 caused a lot of people to ignore the standards because Microsoft was too concerned with preserving past quirks and behaviors and not enough with how the technology of the web is supposed to work (ala W3C recommendations and standards).

IE7 has improved this situation quite a bit, and Firefox and Opera have been pretty good in rendering sensibly for a coulpe of years now, so there's no excuse for sticking to the old ways and shutting people out.

Aside from the usability issues, you can make much more easily understandable pages and use less code to do it. CSS stylesheets, external javascript files, and images can all be cached by user agents (browsers), so you can save bandwidth, increase usability, and make your pages easier for you to edit later just by taking the time how to do things the right way.

Use CSS, ditch tables for layout, and help save the internet :)

drakaan sig jan 2020.png

Link to comment
Share on other sites

Always try to use lower case tags and always close your tags. Its alright if you don't, but it can cause problems. (Ask CMD about what problems, I would assume with CSS.)

ex:

Instead of ->

Instead of

use

. And instead of use .

"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former"

[ dA Paint.NET Chat :: Yata on dA ]

Link to comment
Share on other sites

Which is especially useful for text based browsers and also if you stop the loading of the page mid-way. I've seen a time or three where I've prematurely stopped the loading/refresh of a page and have been left with the text describing the image in place.

Link to comment
Share on other sites

Thanks Drakaan! But could someone check over my code that i released on the first page and point out quirks, mistakes and how I can improve in the future?

It looks like you're trying to do simple rollover images. In that case, I'd recommend looking here:

http://www.simplebits.com/bits/tab_rollovers.html

For a good (and not-too-complicated) example of how to do it with CSS.

The whole explanation is here:

http://www.simplebits.com/notebook/2003 ... overs.html

although you may have to read up on what some of it means if you're fairly new to HTML or CSS.

50-cent primer on a couple of ways that people use CSS:

#identifier { color: black; }

makes the element with the attribute ID="identifier" have a black foreground color.

...

would match that rule, for example. You usually use the # prefix for things that there are only one of on a page (a header div, footer div, etc).

.classname { background-color: #ffffff; }

makes any elements with the attribute class="classname" have a white background (#ffffff = 2 hex characters for red, 2 for green, 2 for blue = 255 red, 255 green, 255 blue = white..."ffffff" in hexadecimal, when talking about an "RGB" color is white).

...

would match that rule. You usually use the . prefix for things that there are more than one of, and where you might have more than one class of that element (say you need list items, but some should be green, and some should be red).

tagname { font-family: Arial, Sans-Serif; }

makes items that are that type of html tag use Arial, if available, otherwise whatever generic sans-serif font is on the system.

You'd put those in a seperate css file and reference it in the

... tag with a line like this:


any html tag matching the tagname would match. If tagname was "p", than all

...

elements would match. If tagname was "div", then all
...
elements would match.

There's plenty to learn, and I might start a few HTML-oriented sections on the fan forums, since I see a lot of people talking about building sites and pages. I'd love to see some quality coding spread across the 'net. Anyone with HTML experience is welcome to assist with learning the noobs.

If you want a good example of horribly ugly HTML code, go to myspace.com, right-click on the page, and click on "view source". I think they do it on purpose, it's that bad (at least it was 6 months ago when I looked last).

drakaan sig jan 2020.png

Link to comment
Share on other sites

...And instead of use .

actually, use

remember, not everyone has working eyes. The alt attribute for the img tag is there so that people have some idea of what's on the page, even if they can't look at it.

You know, it was just an example. I didn't feel like writing it all out :wink:

"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former"

[ dA Paint.NET Chat :: Yata on dA ]

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...