PSD to XHTML – Part 1
Monday, February 1st, 2010
This is part one of how to turn a PSD into a tableless Xhtml webpage.
Brought to you by Bronson Quick http://www.quickit.net.au/
Duration : 0:7:11
This is part one of how to turn a PSD into a tableless Xhtml webpage.
Brought to you by Bronson Quick http://www.quickit.net.au/
Duration : 0:7:11
Can anyone provide me with a detailed explanation on this so I can fully understand it?
HTML is based on SGML (Standard Generalized Markup Language) which is a very forgiving markup standard, you can do things like this in HTML:
<ul>
<li>
<li>
<li>
</ul>
or
<B><i><u>Some text</b></i></U>
or
<a href="somepage.htm"><img href=someimg.jpg></a>
or
<span><div>Some Text</div></span>
In short, it is very loose.
One day, the maintainer of the standard (W3C) said: "We have enough of this mess, people are getting more and more creative in writing their markups, let’s stricken up the standard."
So the XHTML standard is born, xhtml is based on XML, which is a stricter subset of SGML. In XHTML, the tags must be written up to a certain requirements, I’ll highlight some of the most important:
- all tags must be properly closed, and in case of tags like img, it must be self closed, i.e.
<ul>
<li></li>
<li></li>
<ul>
<!– proper care must be excercised, XML only require <img/> but some older browser have problems with that so give space before the ‘/’ in a self closing tag –>
<img />
- All attributes must be enclosed in quotes:
<a href="link.htm">Hello this is a valid Xhtml</a>
<a href=link.htm>Go away this is an invalid XHTML</a>
- All tags must be properly nested, tags must be closed in the order they’re opened, e.g.:
<b><i><u>Incorrect XTHML</b></i></u>
<b><i><u>Incorrect XTHML</u></i></b>
Proper nesting also means that a block level tags (p, div, blockquote, etc) can’t be nested inside inline tags (span, a, i, u, b, etc). In short, block can contain block and inline, inline can contain only other inline. It also means that certain tags can only be placed inside another tags, like <li> must be inside <ul> or <ol>
- All tags are case-sensitive, and all XHTML tags are in lower case (<a> is correct, <A> is incorrect)
- Attributes minimization is a no-no:
<tag attr></tag> is WRONG
write it as:
<tag attr="attr"></tag>
- and many others, I don’t remember all of them (as I write XHTML by heart, I’ve never written invalid XHTML, as far as I know)
Why is the need for a change? Mainly because of CSS. CSS requires a tree-like structure to work, or else it is undetermined what browser would do in case of a maligned nesting, they may break, they may give out wrong result, they may give odd result, they may do anything. Some people call a non-XHTML pages as "tag soup" to illustrate the mess.
It’s also because it’s (much) easier to create an XML parser rather than trying to guess what the author want to do. In XML, if you see something not right, you spew errors and point the author to correct it, in SGML, you’ve got to chew those irky tags and produce a result (whatever it is) because it’s in the standard.
In this html website design tutorial I will teach you how to change background and text colours/colors with microsoft notepad.
Difficulty Level:
Easy/Beginner
If you have any problems or need help with any of this tutorial please leave a comment below or message me on YouTube.
Duration : 0:3:3
Today, i’ll be teaching you how to make Div Layers, using CSS and HTML.
To make a Html or Css file in notepad, just open notepad, click save as,
CSS = style.CSS
HTML = index. HTML
You dont have to name them “style” or “index” but it’s easier for me. Just put at the end “.css” or “.html” that’s what’s important.
================================================================================
Sorry that the sound is soft, i’ll try to make it again with better sound. :S
If you think it’s god and you would want more of these videos, please subscribe.
Duration : 0:9:12
This is part two of how to turn a PSD into a tableless Xhtml webpage.
Brought to you by Bronson Quick http://www.quickit.net.au/
Duration : 0:10:15
This is part three of how to turn a PSD into a tableless Xhtml webpage.
Brought to you by Bronson Quick http://www.quickit.net.au/
Duration : 0:7:51
This is the final part of how to turn a PSD into a tableless Xhtml webpage.
Brought to you by Bronson Quick http://www.quickit.net.au/
Duration : 0:4:59
http://www.1stoptutorials.com – In this tutorial we will start building our div tags and html coding for our top link bar. You will notice once we have finished that we do not have much html code atall to make this work. Let me know if you get any problems and i will be more than happy to help.
Ali
Duration : 0:9:59
I am remaking all of the tutorial videos that I made before. I am now using my new recording software that records in much higher quality, so you can read it a lot easier. I will be remaking the entire series of videos in this tutorial, so please be patient. Thanks.
Please Subscribe & Favorite.
Duration : 0:2:36
They say it XHTML and CSS are both extensions of HTML. And when Im starting to make new website there is Doctype I need to choose – either HTML or XHTML..but doesnt matter what I choose I always use the same tags dont I?? I am very confused.
The only essential difference between XHTML and HTML is that XHTML must be well-formed XML, while HTML does not. (HTML 4 and earlier were nominally SGML, while HTML 5 defines its own parsing model in great detail.) Some examples of differences this imposes in practice are:
In HTML, some tags (e.g., <br>) are always empty and may not have closing tags. All elements must be explicitly closed in XHTML. XML permits two types of closing tag for empty elements: <br /> and <br></br>. In XML these are interchangeable, and either can be used freely for any tag. However, if xhtml content is to be served under a text/html MIME type to legacy browsers, only the self-closing form should be used for always-empty elements (like <br />), and only the explicit closing tag should be used for elements that are not always empty (like <div></div>). Otherwise, browsers will usually parse the tag incorrectly.
Similarly, HTML permits omitting end tags for some elements, such as <p>. Xhtml forbids this.
In HTML, almost everything is case-insensitive, while in XML, all element and attribute names are case-sensitive. XHTML requires all element and attribute names to be lowercase, while in HTML documents it’s common to find uppercase or even mixed-case names.
Various versions of HTML often permit quotes to be omitted from attribute values, e.g., <body lang=en>.[10] In XHTML, all attribute values must be enclosed by quotes, either single or double: <body lang="en"> or <body lang=’en’>.
HTML permits "attribute minimization", where boolean attributes can have their value omitted entirely, e.g., <option selected>. All XML attributes must have explicit quoted values, so in XML this would be written as <option selected="selected">.
Some required elements may be omitted in HTML, in which case they are implicitly added by the parser. For instance, various versions of HTML don’t require <html>, <head>, or <body> tags to be present unless they’re intended to have attributes. On the other hand, in XML the DOM must be determined without having to know which elements are required, so these tags must be specified explicitly.
In addition to these differences, some specifications define only an HTML serialization or only an XHTML serialization. XHTML 1.0 is roughly just an XML serialization of HTML 4.0, but XHTML 1.1, 1.2, and 2.0 have no HTML serialization, while HTML versions less than 4 have no XML serialization. HTML 5 is the first (X)HTML standard designed to support both HTML and XHTML serializations equally.