My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
13: The HTML <head> element
In this article, Christian Heilmann takes you through the most important parts contained within the HTML <head> element. This is the part of the HTML that describes your document, and links it to further resources.( Read the article )
One attribute of the <html> tag I would like to see in this chapter is "lang" or "xml:lang". it indicates the natural language used in the document.
In my opinion this is important for search engines and assistive technologies.
In my opinion this is important for search engines and assistive technologies.
History repeats itself.
It has to,
nobody is listening.
It has to,
nobody is listening.
<em>The language codes may be two-letter codes, such as en for English, four-letter codes such as en-US for American English, or other, less common, codes. The two-letter codes are defined in ISO 639-1.</em>
Hi Chris. Please note that people should use the IANA subtag registry for language codes, not the ISO lists. For more information, go to http://www.w3.org/International/articles/language-tags/.
Ideally, the language would be set on the html tag, which is not strictly relevant to the head element (though it's still worth mentioning it, i'd say).
Also, none of your example code declares the language. I think you should follow your good advice ;-)
Hope that helps.
Hi Chris. Please note that people should use the IANA subtag registry for language codes, not the ISO lists. For more information, go to http://www.w3.org/International/articles/language-tags/.
Ideally, the language would be set on the html tag, which is not strictly relevant to the head element (though it's still worth mentioning it, i'd say).
Also, none of your example code declares the language. I think you should follow your good advice ;-)
Hope that helps.
r12a: I've added some further explanation. You are right about the code samples - I will add language to them as soon as I get the time ;-)
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
17. November 2008, 21:54:39 (edited)
Originally posted by ChrisHeilmann:
Stop right there! Inline CSS and JavaScript is not too clever!
How about dynamically generated css? In some cases it might be very useful to use dynamically generated css and perhaps a bit of javascript.. ah well, the java (or other) script can be easilt linked, but css generally resides in a css file or in the head.
Let's say I have a basic CMS I'd use often... and a basic grid of positions. Depending on what modules are loaded I'd might use different css. No side module loaded, expand the main content
Another reason might be to have the css dynamically generated is that I can give it parameters, i.e. as to widths for page or any (wrapper) div, margins, positions, float left or right for one thing and float:$other for the other... I'll just change the parameters and voila, I have a "new template". Instead of a menu on the left, it's on the right.. variations on a theme.
Or perhaps I'd might wanna give higher memberships (i.e. paid accounts, worthy community members, forum ranking, etc) different css so they get less-annoying banners... they might still get them, but they're out of the way less of in your face.
Just my 2c, maybe in some cases it's not not too clever to use inline css ;-)
Originally posted by Dylan1968:
Let's say I have a basic CMS I'd use often... and a basic grid of positions. Depending on what modules are loaded I'd might use different css.
All those examples could be simply handled with classes.
David Dorward
http://dorward.me.uk/
http://dorward.me.uk/
18. November 2008, 08:23:24 (edited)
Huh? Yes of course classes and ID's... Despite my prolixity I may have failed to properly explain myself: the whole point is that the css for id or class itself might need to be different...
Maybe this one tiny example will clarify one of the scenarios/reasons. Naturally the parameters would be put into a config file or somewhere in a database. You can also use http post and get or even cookies if you want the user to be able to choose/keep his favorite layout..
<?php
$pagewidth = 800;
$sidewidth = 200;
$mainalign = 'left';
$css = array();
if ($mainalign == 'left') {
$other = 'right';
} else {
$mainalign = 'right'; // typos revert to 'right'
$other = 'left';
}
if loaded(side) {
$css[] = '#main {float:' . $mainalign . ';width:' . ($pagewidth-$sidewidth) . 'px;}';
$css[] = '#side {float:' . $other . ';width:' . $sidewidth . 'px;}';
} else {
$css[] = '#main {width:' . $pagewidth . 'px;}';
}
foreach ($css as $line) { echo $line; }
?>
loaded(side): as y'all 'll understand: this (CMS) function checks whether the side thingie is loaded
So how would I put a feature like this in external stylesheets? Can I use php in .css files? Or can I link to a stylesheet named mysheet.php (or for that matter, perl, cgi, asp whatever)
In my limited knowledge and experience I have assumed the <head> section in a webpage would be the most logical place for something like this.. just enclose the whole thing in <style> and </style>.
Let's say you put it into mycss.php and do an include somewhere in the webpages' head section, a foreach ($css as $line) { echo $line; } would still generate the css and put it in the head anyway..
I can also not write to a css file on the server and then link to that.. the next client might view a different page, where different thingies are loaded and therefore requiring different css
Alternatively, I could do these calculations in the body section, simply echoing different html such as
<body>
<?php if loaded(side) {
echo '<div id="main-' . $mainalign . '">';
/* do your content here */
echo '</div>';
echo '<div id="side-' . $other . '">';
/* do your side thingie here */
echo '</div>';
} else {
echo '<div id="main">';
/* do your content here */
echo '</div>';
};?>
</body>
Calculating it within the body, writing to divs instead of to css would be fine if it were just the few parameters and just the two divs as in this example... but it tends to grow very complex if you have a magnitude of parameters.
Any thoughts on this ??
Maybe this one tiny example will clarify one of the scenarios/reasons. Naturally the parameters would be put into a config file or somewhere in a database. You can also use http post and get or even cookies if you want the user to be able to choose/keep his favorite layout..
<?php
$pagewidth = 800;
$sidewidth = 200;
$mainalign = 'left';
$css = array();
if ($mainalign == 'left') {
$other = 'right';
} else {
$mainalign = 'right'; // typos revert to 'right'
$other = 'left';
}
if loaded(side) {
$css[] = '#main {float:' . $mainalign . ';width:' . ($pagewidth-$sidewidth) . 'px;}';
$css[] = '#side {float:' . $other . ';width:' . $sidewidth . 'px;}';
} else {
$css[] = '#main {width:' . $pagewidth . 'px;}';
}
foreach ($css as $line) { echo $line; }
?>
loaded(side): as y'all 'll understand: this (CMS) function checks whether the side thingie is loaded
So how would I put a feature like this in external stylesheets? Can I use php in .css files? Or can I link to a stylesheet named mysheet.php (or for that matter, perl, cgi, asp whatever)
In my limited knowledge and experience I have assumed the <head> section in a webpage would be the most logical place for something like this.. just enclose the whole thing in <style> and </style>.
Let's say you put it into mycss.php and do an include somewhere in the webpages' head section, a foreach ($css as $line) { echo $line; } would still generate the css and put it in the head anyway..
I can also not write to a css file on the server and then link to that.. the next client might view a different page, where different thingies are loaded and therefore requiring different css
Alternatively, I could do these calculations in the body section, simply echoing different html such as
<body>
<?php if loaded(side) {
echo '<div id="main-' . $mainalign . '">';
/* do your content here */
echo '</div>';
echo '<div id="side-' . $other . '">';
/* do your side thingie here */
echo '</div>';
} else {
echo '<div id="main">';
/* do your content here */
echo '</div>';
};?>
</body>
Calculating it within the body, writing to divs instead of to css would be fine if it were just the few parameters and just the two divs as in this example... but it tends to grow very complex if you have a magnitude of parameters.
Any thoughts on this ??
Originally posted by Dylan1968:
it tends to grow very complex if you have a magnitude of parameters
If there are that many options, then it is likely that you simply have inconsistant design and should aim for greater consistancy.
You should be able to define two or three basic layouts in your stylesheet, and then apply them using classes and ids in the document (using your server side program to decide which to use).
<div id="content" class="beside-sidebar"> ... </div>
<div id="sideBar"> ... </div>
... and if you have themes, then you just link to different stylesheets.
David Dorward
http://dorward.me.uk/
http://dorward.me.uk/
Originally posted by AndBre:
Am I wrong or "script tag" should actually be "script element"?
Strictly speaking, you are right. Changed!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
The top of the page link "Next article—Choosing the right doctype for your HTML documents" points to "http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/".
Originally posted by AndBre:
The top of the page link "Next article—Choosing the right doctype for your HTML documents" points to "http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/".
That is very weird - I've got no idea how that happened. It's fixed now.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Putting scripts in the head isn't always a good idea either, according to some people:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://developer.yahoo.com/performance/rules.html#js_bottom
Originally posted by QmunkE:
Putting scripts in the head isn't always a good idea either, according to some people:
True - we cover when to put scripts in the head, and when to put them in the body in one of the WSC JavaScript articles. These should be published by the end of this week; fingers crossed!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Which is right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
does it really matter ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or
does it really matter ?
can anyone tell me how to open the example files in the introduction? It is a explorer zip and the computer goes nuts opening like a hundred Internet Explorer windows, stinks. Thanks, I am a new guy!
http://dev.opera.com/articles/view/13-the-html-head-element/headtutorial.zip
16. May 2011, 02:21:48 (edited)
Originally posted by newejoe:
That does the same thing, I use Firefox, it wants to open in IE, that got it to the desktop but same thing. You try it, thanks though.
Hi there Joe - sorry for not replying sooner, but I've just got back off paternity leave ;-)
I just tried downloading the ZIP file and unzipping it, and everything seemed to work ok. I believe there were some problems with dev.opera.com in the last few days, which have since been fixed. Can you try it again and let me know how you get on?
thanks!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Even though this article is a few years old, it helped me solve a problem I was having. Thanks!
George A. White
http://padalog.com
http://padalog.com
Originally posted by gawhite:
Even though this article is a few years old, it helped me solve a problem I was having. Thanks!
Fab - glad to be of service!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by chrismills:
Originally posted by QmunkE:
Putting scripts in the head isn't always a good idea either, according to some people:
True - we cover when to put scripts in the head, and when to put them in the body in one of the WSC JavaScript articles. These should be published by the end of this week; fingers crossed!
In good practice I've been told to put scrips at the bottom of the page just above </body> tag that way the page loads the content faster and loads scripts thereafter. I could be wrong when it comes to this.
Originally posted by tzonetech:
In good practice I've been told to put scrips at the bottom of the page just above </body> tag that way the page loads the content faster and loads scripts thereafter. I could be wrong when it comes to this.
I think that, especially more recently, this is more commonly the best way to do it, yes. we will probably change this in the WSC upodate over at the W3C wiki.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com