HTML Programming.....

[Tillerman]

Andrew's Webpage

Welcome to my webpage! I will tell you about some of my intersets such as studying history.....

[Mr Frojo]

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/

[pyrochild]

For HTML, XHTML, XML, CSS, etc, I'm going to point you here.

For your specific question about opening in a new window, go here:

http://w3schools.com/html/html_links.asp

and look under the heading, The Target Attribute.

[usedHONDA]

Yeah, you should search Google with a term like "open in new window html".

[MattBlackLamb]

Try here for HTML tutorials, that site is pretty in-depth from what I've seen

[Yata]

Also, just because I'm obsessed with it, while your learning HTML, try to learn XHTML. Its nothing different, just cleaner.

http://www.w3schools.com/xhtml/default.asp

And I third that w3schools is great

[Tillerman]

Oh and another question that I forgot to mention: How do you create text on another page (other than your main)?

[Yata]

What do you mean?

You have your index.html, your main page. And then just create more pages.

[Tillerman]

What do you mean?

You have your index.html, your main page. And then just create more pages.

That I know. I was just wondering how to do text (par example) on a new page?

[Crazy Man Dan]

...

The same way you do it on the main page. Put it in a

tag inside of the

of your page.

[jsonchiu]

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.

[Crazy Man Dan]

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.

[jsonchiu]

@CMD

Tables and CSS are completely different things. What in the world are you talking about?

I meant table + CSS. Seriously, who would design a site without CSS?

[Crazy Man Dan]

Au contraire! There is not a single

Editor...

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.

[jsonchiu]

Hmmm lots of websites use tables... what's wrong with it? Browser compatibility?

[Crazy Man Dan]

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.

[Tillerman]

So to put Videos or pictures into a new page you also use the

tag? and how do you direct it into the page that you want?

[drakaan]

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]

XHTML Test Page

This is a paragraph containing an image.

[Tillerman]

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?

[Yata]

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 .

[drakaan]

...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.

[Myrddin]

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.

[drakaan]

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).

[Yata]

...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: