I heard there was fundamental lack of web-browser comprehension of those, and often IE6,7, opera would flounder trying to display them.
Is that indeed true? Should those be avoided? And while we're at it, do they have a specific advantage when using forms? (except for the impeccably square frame around)
That sounds unreasonable. In fact, XHTML 1.x STRICT requires a block-level element like fieldset to enclose input elements. As for labels, they are valuable for users with screen readers. I would not substitute either tag.
Related
Screen readers will read out things like   when formatting a <title> tag to be clean for people that can see.
<title>contact • company</title>
Is there any way to make this less confusing?
I don't believe that it's technically invalid to include formatting like you're doing. That said, I'd question the utility of this approach for any visitor regardless of whether they are sighted or not.
If you want to make it less verbose, you could use unicode characters, but be aware that HTML does strip out extra whitespace, and the only way to make more than one consecutive space is to use the non-breaking-space ( ) character.
<title>contact • company</title>
As far as whether it's correct or not, the WHATWG HTML 5 specification states that the <title> element's content mode is "Text", however the definition of a Text content model states that it also includes Phrasing content.
The W3C HTML validator doesn't seem to complain about phrasing content being included in the title element. Search engines may handle this differently, and some may truncate your content based on length of characters or pixel widths.
When reading css related text, I've came across this rather cryptic sentence:
"It is possible that a document will contain presentational hints that are not CSS - for example, the font element.".
I am not quite sure what "non-css presentational hints" are and what are their use cases.
Are they legacy features which are depreciated now? Could someone give an example?
Thanks.
In HTML, they are rendering guidance drawn from features that are frequently but not always obsolete.
In general, if a feature's only purpose is presentational - like the <font> element - then it will be obsolete. Nevertheless, it will still normally have an effect on the rendering in browsers. For example, the <center> element centres its contents horizontally on the page, but because it is obsolete, is should not be used. The CSS declaration text-align:center should be used instead.
However, features can have uses beyond the rendering, for example, the height and width attributes of <img> element are intended to convey information about the intrisic size of the image, without having to download that image. That means that a browser can use that information to decide whether to download the image, using up what might be precious bandwidth, or not. In addition, the information can be used as a presentational hint to determine the space used on screen to display the image, when there is no CSS doing that available. These attributes are not obsolete.
For more information see the HTML5 spec 14.2 The CSS user agent style sheet and presentational hints.
Is there a way to word wrap only when there's white space? Right now I have it breaking one some special characters (?-!) but I only want to it to break at the tabs to keep the columns straight.
Example:
gw5g7#IVKNcvP02r pFJxywU#B-L.Qp.f u#hGsrr8g.S4,GtR !t1oa(2%?tb()lML -cky!YT8-/*xsCfT nbjAekWZenH8udR8 sM*e#aSM#89C#$4Z (r6+$]1j9mw)U72+ !V2O2_UO7(mMM6HP o6u?D&97&QNJ93D1 .a,,hg%vtl[^PGLO F(v*CP#aJD13_m&. /9?[OL?ktCmv8gRP 6CSZuRuu98MT3*,R O/cclHD+HrG4G^h9 JI]edN.F]hRg8,&n -6S/S9U[Ai]Sh[8D LM+Gpkk7-BP1pgpR -XX4EZjb24Kl9Kgm j!eK#0?i&kwo&ADg lvZ#)T%xRFYOV#-.
No, there is currently no way in CSS way to word wrap only when there’s white space. The reason is that browsers apply, rather inconsistently, some of the Unicode line breaking rules. The rules allow line breaks at many points, e.g. after some punctuation characters in some contexts. In the CSS3 Text draft, there are some proposed additions that would let authors have better control over such issues, but mainly as regards to rendering East Asian languages.
You would need to wrap pieces of text in elements (like span) and set white-space: nowrap on them, or use the more concise nonstandard but widely supported nobr element. In the example case, this would be rather straightforward and could be done with a small piece of JavaScript code (or server-side or in a preprocessor when the page is generated):
<nobr>gw5g7#IVKNcvP02r</nobr> <nobr>pFJxywU#B-L.Qp.f</nobr>...
However, it is not clear whether the multiple spaces should be preserved and what the rendering context is (pre? textarea?). This is a different problem and best addressed as a separate question.
I haven't done any real web design in a few years, and I'm now tasked with creating a set of web pages that will need relatively complex (and exact) layouts. I've started exploring CSS, and while I'm starting to get an idea of how to use it, it doesn't really seem like the appropriate tool for the kind of layout I need.
The layout I need has a top, middle, and bottom section, and each of those sections is broken down into different areas. I need something that is kinda like:
35%, 35% (right justified), 15%, 15%
70%, 15%, 15%
70%, 15%, 15%
Percents are of browser width, and where the percentage of the column end is the same as the row above/below, the columns edges need to meet. Further, rows must be below each other, regardless of what content I put in them.
CSS seemed like it would do what I want, but then when I started trying for the complexity I needed, I couldn't get columns to match up, or rows flowed into other rows, etc.
What I really want is something like frames, where I can position elements exactly where I want them. Does that exist, or do I just fight with CSS?
Thanks,
Sean.
You need to learn CSS, not fight it. CSS has been used to create much more complex layouts than what you have described. And it is the only way you should be styling your web pages and implementing a layout design.
CSS gives you much more control over the presentation of a webpage and positioning of elements than frames can (frames only give you frames to put load multiple pages in; you still need to style those pages separately).
This is a rather broad question, so I'll just say this:
Use HTML to semantically organize/structure your content.
Use CSS for your presentation.
In other words, don't use any of the following tags or similar tags:
<b> (use <strong> instead)
<i> (use <em> instead)
<font>
<u>
Remember to use structuring tags where appropriate like:
<h1> up to <h6>
<p>
<blockquote>
<pre>
And use semantically correct tags. So if you have a definition list, use <dl>, <dt> and <dd>. If you have a form, use <label for="{input id}">, e.g.:
<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->
Don't use tables for layouts. Use them only for tabular data. And when you do, make sure you use proper semantic markup <thead>, <th>, <tbody>, etc.
Put title attributes in your links and alt attributes in your images for accessibility and usability.
And use stylesheets (preferably external ones for DRY) instead of inline styles.
Lastly, as Jan_V mentioned, w3schools.com is a great resource for CSS, JavaScript, HTML, and most web standards. There is a lot for you to learn, but luckily there's a ton of tutorials, references, and other resources on the web to help you along. Learn how to properly use CSS/HTML, and you will produce higher quality webpages as well as save time in maintenance.
If you're struggling with the layout you have in mind, start with something simpler and work your way up. E.g. try an evenly drawn 2 column, 2 row layout first. Once you get that working, start changing the proportions and adding more columns/rows.
CSS can do pretty much anything you want, it is the defacto tool for positioning and styling elements on your web pages. I think you should look into position: absolute and float capabilities based on your description. The difficulty with it lies in getting consistent behavior/interpretations across browsers. Using a css-reset like YUI's is highly recommended to help with this. YUI also has javascript utilities that help normalize some CSS behavior (e.g. float and opacity) across browsers. YUI is by no means the only way of accomplishing these goals.
You could try using tables for the layout, but I would suggest using CSS and DIV elements.
If you are going to use frames or tables you'll get in trouble later (probably). Also, CSS isn't that hard, just spend a bit time on learning it and maybe W3Schools, which have nice tutorials.
Remember using Tables as apposed to CSS will cause accessibility problems. This means that people with using accessibility to browse your site will have problems using screen readers.
I agree with some of the previous answers. Spend time getting to know CSS. When it is written correctly it means that your styles will be reuseable and easy to implement and change once you have done them. Trying to change styles that have been individualy coded on a number of pages will cause you headaches.
If your website is going to be complex then try and make sure you are making it as simple to maintain as possible and CSS will definately help you there.
Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then div+CSS?
And what should I teach between HTML or XHTML? Both are same so should I start directly with XHTML 1.0 Strict?
You should teach them to use CSS for layout and tables for tabular data. They will figure out that they can (mis)use tables for layout all by themselves.
You should teach CSS directly.
More importantly than "doing layouts" they need to understand the Separation Of Layers: Content, Presentation, And Behavior. As soon as you teach them the better.
If you're concerned about CSS complexity, just do simple exercises. About XHTML of HTML, choose one to teach, stick to it and after they are confortable with you say there are alternatives. IMHO, I would choose HTML though.
Better teach css layout first. Tables are too easy - if they learn tables first, and then switch to css, they will wonder why you are telling them to use a system which requires hacks and tricks to work in different browsers, and to get the same-height columns and flexible widths that you get free with tables.
I would start with non-tables, why teach what's going further out the door?
Also I'd go with the HTML 4/5, XHTML is abandoned at this point...that's not to say it's not used, but the next few years are moving to HTML5, not XHTML.
i'll speak from a perspective of a really inexperienced person when it comes to layout design...
so, in old days it was all html tables and although at times cumbersome to get what you want, but at least it was logical.
then i read all about the 'correct way of doing things' ie how css can save the world. and got lost, may be it's me, but getting something trivial done always takes lots of fiddling with css and really a huge amount of guesswork and trial and error. now i must admit i haven't spent lot of time figuring out css, but it seems a lot less intuitive than table layout.
so. i would suggest you start with css layout and i trust your students can get it right. when they are comfortable with that, introduce table layout. if you do other way round you will confuse them (or at least i'm confused and still trying to apply same patterns to css, which obviously doesn't work)
Don't teach them tables!!
And teach them xHtml, it is more structured and they will understand the syntax better.
Whilst we all hate tables for layouts I think it's important to introduce them to the concept so they can understand exactly how important CSS is.
I would also suggest teaching them XHTML instead of HTML5, sure you can perhaps do a session on what HTML5 might be like when it's finally completed, but it's pointless doing this when it's so young, wait until they understand XHTML first.
If you start it wrong, don't expect it to be naturally fixed later (with the level of careless laziness we deal with in the web industry).
How about first you teach them accessibility and how a table in the layout will asplode any screen reader, then you don't have to justify why tables would be easier.
Iam teaching some people html design in our company. The best way till now was to start with clean xhtml 1.0, than add some styles with css, than start to add divs with floating and such things.
Later show them how easy it is to create an 3 column layout with one of the popluar css frameworks like Bluetrip oder grid960.gs. I think there is NO reasons to teach design with tables (only if you use css3 and the new table styles).
HTML or XHTML?
HTML and XHTML are the same language (i.e. the same tags, with the same meaning), just with slightly different syntaxes. If you know HTML, you know XHTML. In terms of learning, there’s no appreciable difference between them.
The difference between HTML 4 and HTML5 is greater than the difference between HTML 4 and XHTML 1.