This document provides an introduction to converting HTML documents to XHTML, including the basic syntax changes needed like making all tags lowercase and closing all tags. It provides examples of correct XHTML markup for different tags. It also explains the new DOCTYPE declaration and shows a sample well-formed XHTML document with the discussed syntax. Resources for learning more about XHTML are listed at the end.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Findability Bliss Through Web StandardsAarron Walter
Connecting with your audience is objective number one for any website. Findability—the discipline of helping users discover the content they seek—not only helps businesses get their message out, but it improves the user experience, too. The secret to attaining findability bliss, both with search engines and beyond, lies in the wisdom of web standards.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Findability Bliss Through Web StandardsAarron Walter
Connecting with your audience is objective number one for any website. Findability—the discipline of helping users discover the content they seek—not only helps businesses get their message out, but it improves the user experience, too. The secret to attaining findability bliss, both with search engines and beyond, lies in the wisdom of web standards.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
Unicode, PHP, and Character Set CollisionsRay Paseur
In recent years UTF-8 has become the dominant character encoding scheme, supplanting extended ASCII. This has led to an uneasy transition for users of PHP, where the assumption has always been that one character equals one byte. This presentation is for the DC PHP Developers' Community meeting on September 10, 2014. It examines the history of character set encoding and the ways that the PHP community is responding to the transition to UTF-8. Not surprisingly, there are surprises in the process! The slides are derived from the article here:
http://iconoun.com/articles/collisions
2001: Bridging the Gap between RSS and Java Old School StyleRussell Castagnaro
Before things had really caught on with Atom, RSS etc. There were many people looking for ways to handle Syndicated content. This was a pretty successful talk that I ended up giving quite a bit.
Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it.
Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS.
This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.
2. Fast and Easy XHTML, XHTML Tutorial, HTML, Web Standards, by Shirley ...ML Tutorials, CSS Tutorials and Tips, Website Tips at Websitetips.com
1. All your markup needs to be in lowercase. For example, instead of <P></P>
it needs to be <p></p> for XHTML.
2. Every tag must have a corresponding ending tag, such as <p></p> and
<li></li>. Some tags don't have a corresponding ending tag, such as <br>,
<hr>, and others. Those tags, to be backward compatible will look like this
instead:
<br />
<hr />
(Below is an XHTML document sample that shows more of these.)
3. Every attribute value must be in double quotes, such as:
<img src="image.gif" height="150" width="40" alt="funny face" />
Notice that since the <img> tag doesn't have a corresponding ending tag that
it also is closed with the extra space and slash, too.
4. Nesting must be correct (and symmetrical). HTML also requires correct
nesting, but it wasn't always as problematic in browsers. XHTML requires it
done properly, though. For example, this is incorrect:
<p><strong>Text</p></strong>
This is correct:
<p><strong>Text</strong></p>
5. An ampersand (&) within an attribute value must use its character entity
reference. For example, a URL like this:
<a href="http://www.foo.com/cgi-bin/
http://websitetips.com/articles/xhtml/basics/ (2 of 6)3/20/2006 11:32:47 AM
3. Fast and Easy XHTML, XHTML Tutorial, HTML, Web Standards, by Shirley ...ML Tutorials, CSS Tutorials and Tips, Website Tips at Websitetips.com
class.pl?saturday&night&live">foo</a>
must instead be:
<a href="http://www.foo.com/cgi-bin/
class.pl?saturday&night&live">foo</a>
6. Your markup must be well-formed. If you've already been writing good
markup that validates with W3C, it's no big deal. If not, it's a good time to
clean up your markup.
A New DTD
In addition to the above is a new DTD, too. The sample below is for XHTML 1.0
transitional.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
The first line, beginning with <?xml version= ..., is the xml prolog, and it's
recommended but not required. Note that using the xml prolog will trigger IE6 Quirks
Mode, so you might want to leave it out or learn more about it before deciding. The
http://websitetips.com/articles/xhtml/basics/ (3 of 6)3/20/2006 11:32:47 AM
4. Fast and Easy XHTML, XHTML Tutorial, HTML, Web Standards, by Shirley ...ML Tutorials, CSS Tutorials and Tips, Website Tips at Websitetips.com
xml prolog tells the browser that your document is based upon a DTD using XML, and
that it's using a standard character encoding.
The second line, beginning with <!DOCTYPE ....>, will look more familiar to you, this
time representing XHTML 1.0 transitional.
Then, the last line beginning with <html xmlns=" ....> replaces the <html>
element, telling the browser the language and the namespace.
Below is a sample XHTML document. Note that all the markup is in lowercase, there
are quotes around the attribute values, the new endings for the tags that don't have
corresponding ending tags, and it is all well formed.
A Sample XHTML Document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nifty New XHTML document</title>
<meta name="description" content="This is the coolest XHTML document
on the Internet." />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<p>Content here.</p>
<p>Content here.</p>
http://websitetips.com/articles/xhtml/basics/ (4 of 6)3/20/2006 11:32:47 AM
5. Fast and Easy XHTML, XHTML Tutorial, HTML, Web Standards, by Shirley ...ML Tutorials, CSS Tutorials and Tips, Website Tips at Websitetips.com
<ol>
<li>List item one</li>
<li>List item two</li>
</ol>
<dl>
<dt>Term</dt>
<dd>definition</dd>
</dl>
<img src="image.gif" height="150" width="40" alt="funny face" />
<br/>
<table class="data">
<tr><td>Green eggs</td><td>Ham</td></tr>
</table>
<form method="get" action="foo">
<select name="">
<option value="all">All Products</option>
<option value="books">Books</option>
</select>
<input type="text" name="keyword" size="10"
value="" />
<input type="submit" name="Search" value="Go!" />
</form>
</body>
</html>
Resources
http://websitetips.com/articles/xhtml/basics/ (5 of 6)3/20/2006 11:32:47 AM