HTML tips for a n00b

[Dak]

good god, i actually understood that!

 

I havent even begun to look at javascript yet tho... i think ill just put the expantion at the bottom of the page, anchor it and then link to it from the word MRU, untill i can do what you suggested.

[Sayonara]

You will probably be able to do it after a couple of hours on http://www.w3schools.com

[Dak]

heh, already had it bookmarked -- thats how i've learnt everything so far.

 

I dont want to rush it tho, and id rather get competant at basic HTML before learning javascript. I'm still having trouble getting tables to do exactly what I want them to, so javascript is definately for another day

[the tree]

I dont want to rush it tho, and id rather get competant at basic HTML before learning javascript. I'm still having trouble getting tables to do exactly what I want them to, so javascript is definately for another day.

Tables aren't really essential, most sites have no real use for them. Go ahead and learn some Javascript, some PHP maybe, it's usefull to have a finger in each pie.

[Sayonara]

Tables should only be used for presenting tabulated data. If you're using them for laying out page content, stop; that practise is the source of all suffering in the world today.

 

To be honest the javascript you need for showing/hiding a small piece of content is really simple. You won't need to learn anything more complex than constructing a function that toggles the properties of a particular style, which is all really easy. It's exactly the kind of thing w3schools uses to teach you the fundamentals.

 

PHP is a whole other world. Unlike javascript, which is a clientside language (i.e. instructs the browser), PHP is a serverside language (i.e. instructs the web server).

There is some degree of overlap in functionality and technique, but not much.

 

Don't put off learning it though. It will speed up your productivity no end if used correctly. My current design path involves using PHP classes to automatically generate the vast majority of the HTML in pages on a site, including menus, breadcrumbs, and even dynamic site maps that only show live pages.

[Klaynos]

I thought the source of all suffering was using frames?

 

But yeah tables shouldn't be used for layout, that's what css is for (a practice that for a long time I will admit I did :'( though. Then I found the joys of css and havn't looked back since)...

[Sayonara]

Frames is the source of all screaming in the world.

 

 

"I want to bookmark and refresh, damn your eyes!"

[the tree]

Tables should only be used for presenting tabulated data. If you're using them for laying out page content, stop; that practise is the source of all suffering in the world today.

I'd say blinking/scrolling text produces more suffering than layout tables. But yes.

 

Why tables for layout is stupid

 

To be honest the javascript you need for showing/hiding a small piece of content is really simple.

Yup, pretty easy. Here's one I made earlier. (It's actually pretty crude, you could do a lot better)

 

PHP is a whole other world. Unlike javascript, which is a clientside language (i.e. instructs the browser), PHP is a serverside language (i.e. instructs the web server).

Certainly, and an awsome one at that. If your using Windows, then I recomend WAMP as a server, it comes with PHP and MySQL already.

[Dak]

Frames is the source of all screaming in the world.

 

 

"I want to bookmark and refresh' date=' damn your eyes!"[/quote']

 

For the love of god and all that is holy, why wont you scroll down past a certain point, you b*****d!

 

OK, I'v remembered why frames suck.

 

As for tables... I assume using tables to achieve the following is OK:

 

 

blah blah blah blah | blah blah blah

blah blah blah blah | blah blah blah

blah blah blah blah | blah blah blah

blahdy blahdy blah | blah blah blah

blah blah blah blah | blah blah etc

 

and stuff like navbars are ok to do in tables, but positioning stuff in relation to each other using tables is a no-no, right?

 

Does it cause display problems or something?

 

Also: arent the SFN and the google adwords frame positioned relative to each other using a table?

[Aeternus]

Navbars still shouldn't really be done using tables. They can just as easily be done using a set of <div>'s and aligning them correctly using CSS. Tables are for showing Tabular data as Sayonara said, such as data from a database which has fields and headers with various rows of data. Layout should be done with <div>'s and other tags and CSS, this allows you to easily produce content with PHP etc (dynamic content that changes) and easily change the design of the site with just a few simple changes in the CSS, effecting the whole site.

[Sayonara]

Yup, pretty easy. Here's one I made earlier[/url']. (It's actually pretty crude, you could do a lot better)

Slight tweak - add a pointer mouse style to the H2 tags!

 

 

Certainly, and an awsome one at that. If your using Windows, then I recomend WAMP as a server, it comes with PHP and MySQL already.

WAMP rules.

 

 

and stuff like navbars are ok to do in tables, but positioning stuff in relation to each other using tables is a no-no, right?

Nothing structural should be done with tables. Only tabular data (things like rows of search results, a table of products and prices, etc) should use them.

 

Does it cause display problems or something?

Not really; there are some display problems that arise from it, but they are minor.

 

The reasons you should not use it for non-tabular display are:

- It's a massive amount of bloated code to do something that can be achieved using a styled <div />,

- It won't do anything on TTY or non-browser clients, other than mangle your content,

- It creates a nightmare scenario for people using screen readers,

- It goes against the principles of the semantic web and meaningful structure,

- It takes longer to write,

- It's harder to maintain.

 

 

Also: arent the SFN and the google adwords frame positioned relative to each other using a table?

Not all parts of the VB forum and its plugins come from the same source. Some developers are more willing to misuse tables than others.

 

However, the VBulletin source is in transition to complete conformity at the moment.

[5614]

Can someone tell me what these two codes do, I've seen them often but whenever I've made a site I've never needed to add them in:

 

code #1:

<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

 

code #2:

<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

 

What's their purpose?

[the tree]

As for tables... I assume using tables to achieve the following is OK

It's o.k. in the sense that I'm not planning to come round to your house and smash your computer to bits. It's still not correct.

Stuff like navbars are ok to do in tables

But that'd be so much code and so unsemantic.

Think about a vertical navigation menu aranged as a table. You'd have to have a row and cell for each item!

I'd almost always go for an unordered list (Why use lists for site navigation?). Although IIRC xhtml2 will have a navigation list (<nl>) element specifically for that type of thing.

[Aeternus]

Can someone tell me what these two codes do' date=' I've seen them often but whenever I've made a site I've never needed to add them in:

 

code #1:

<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

 

code #2:

<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

 

What's their purpose?[/quote']

 

 

Seems to me theyve replaced the window.open method with another that doesnt actually do anything (returns and empty object). The others seems to simply link up functions to the onLoad and onUnload events which again dont seem to do anything other than set themselves up :S. Perhaps they are planning to put more code into the functions they are setting up later or expect the users to expand them with greater functionality. They preserve the original window.open functionality in SymRealWinOpen and that could be used in the SymWinOpen function to actually open the window with other things happening. The same is true of the onload and onunload functionality although these are event function pointers which are as far as I am aware generally not associate with any actions/functions unless the coder specifies some, so i dont know why they setup variables to store the pointer to the original function.

[Dak]

Is this OK?

 

<html>
<head>
<title>layout practice</title>

<style type="text/css">
<!--
.left 
{
position: absolute;
right: 60%;
}

.right
{
position: absolute;
left: 45%
}

.main
{position: absolute;
top: 150px
}

-->
</style>

</head>

<body>

<img class="left" src="http://www.scienceforums.net/forums/images/misc/vbulletin3_logo_white.gif" />

<div class="right"> <p>that there be the image of science forums and debate.</p>

<p>And below this, there should be a bit of text that spans the entire page.</p></div>

<div class="main"><p>Blah de blah, de blahdy blah.  Blah blah blah blah, blah doobie doobie blah. Blah blah-titty-blah, de blah blah blah (blah blah) dooby blah, sheblah.</p>

<p>Blah de blah, doobie blah. Blah blah-titty-blah, de blah blah blah (blah blah) dooby blah, sheblah.de blahdy blah.  Blah blah blah blah, blah doobie doobie blah. Blah blah-titty-blah, de blah blah blah (blah trala, blah) dooby blah, sheblah.</p>

<p>So blah.</p></div>

</body></html>

 

I can see the point of CSS now

 

But are all those 'position: absolute' s nessecary?

[the tree]

Apart from there being no doctype or character encoding tag, it's fine.

• A doctype should go at the top of your page to tell the browser what version and flavour of HTML it's dealling with.
• A character encoding meta-tag wich basically says which character encoding your using so that the browser doesn't run into any problems.

I've given example of each lower down on this page.

 

If your applying the same rule to many elements then you can do it all at once like so:

.class,a,#id{ position: absolute; }

Anyways, for something so simple I wouldn't have used any positioning at all, here's how I'd have done it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content=
   "text/html; charset=us-ascii">
   <title>
     2 Part Layout
   </title>
<style type="text/css">
<!--
p{
padding: 0;
margin: 3px;
}
#alpha,#beta{
margin: 3px;
height: 100px;
border: 1px solid #ccc;
}
#alpha{
background: url(http://www.scienceforums.net/forums/images/misc/vbulletin3_logo_white.gif)
 10px center no-repeat;
padding-left: 340px;
}
-->
</style>
 </head>
 <body>
   <div id="alpha">
     <p>
       Look! This text! It is shifted! How be that?
     </p>
   </div>
   <div id="beta">
       <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore
       magna aliqua. Ut enim ad minim veniam, quis nostrud
       exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit
       in voluptate velit esse cillum dolore eu fugiat nulla
       pariatur. Excepteur sint occaecat cupidatat non proident,
       sunt in culpa qui officia deserunt mollit anim id est
       laborum.
     </p>
   </div>
 </body>
</html>

[Dak]

First off, I'd like to say thank-you very much to every one who's helping; espescially for pointing me towards CSS and <div>, both of which rule and made everything become alot easyer.

 

Next, another question

 

Is it proper (in strict XHTML) to use

 

<div><br /><br /><br /></div>

 

in order to shift stuff down the page? If not, is including the three breaks within the next element ok, ie

 

<p>Yo! this is a paragraph, and I want the next one to be quite far below</p>

 

<p><br /><br /><br />Oooh, look how far down I am</p>

 

Or should I go

 

<p>Yo! this is a paragraph, and I want the next one to be quite far below

 

<br /><br /><br /><br /><br />

 

Oooh, look how far down I am</p>

 

?

[Dak]

And also, i'v found a wierd bug in my site that i cant figure out how to fix.

 

In some of my links that point to anchors, sometimes they dont work on the first attept.

 

What happens, is the link is clicked and the new page is displayed, and Firefox will jump to a point on the page that isnt the anchor. Refreshing causes the browser to jump to the correct position.

 

Also, i've also noticed that as long as the page is in my cache, the anchor will work; but if i clean my cache out, then I'm back to the anchors not working correctly on the first attempt.

 

The code im using is this:

 

(link)

 

<a href="page.htm#anchorname">Linky-poo</a>

 

(anchor)

 

<a name="anchorname">hello</a>

 

Its not a problem I've ever come across whilst viewing pages on the net, and afaict my code is correct...

[bloodhound]

Just thought I would link this FF extension

 

https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&category=Top%20Rated&numpg=10&id=198

 

Uses latin words to create fillter content for devs. Just like Lorem Ipsum.

[the tree]

Is it proper (in strict XHTML) to use

<div><br /><br /><br /></div>

in order to shift stuff down the page?

Well' date=' no. That's far from semantic. Use padding (makes space within the element) and margins (makes space outside the element). There's an example of both in the page I put above.

The code im using is this:

 

(link)

 

<a href="page.htm#anchorname">Linky-poo</a>

 

(anchor)

 

<a name="anchorname">hello</a>

1. Use the id attribute rather than name. Keep with the times man!
2. Don't create elements purely for in-page navigation, assign the ids to dividers or headers.

[Dak]

cheers