doctype « WordPress.com Tag Feed

Teaching HTML and CSS [#2]

DM — Thu, 14 Aug 2008 02:48:59 +0000

The vastness of the internet leaves a lot to imagine what exactly content sits inside in order to be visible. After thinking about how to go about teaching how and what it takes to create websites, I realized that I need to do what I do best. I have to explain how to do things and why it works in my own way in order to keep things interesting. I am not a programmer (see my About page for more info on me) so this experiment isn't going to be your typical html class.

Its called the Document Object Model, or DOM, and is what one needs to be aware of when creating content in any type page. It is the official "standard for representing structured documents in a platform and language neutral manner," w3c.org .

Eh, yeah, so now that you know exactly what it "is", lets discuss what it ... is.

The space in which you organize your information in order for things to receive information, and do whatever you tell it to do. I view it as one piece of blackness in the vastness of the internet universe. Being that there are multiple types of html pages (versions and compatibilities), the doctype defines the page in a "machine-readable language specifying the information of a type of HTML". You must set the doctype in order for your page to be viewed and function properly.

These are the ones we need to know;

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

[source]

The one that we will be using is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It will comply with all major web browsers and allow us to write what we need. This snippet will go at the extreme top of the page, first thing with nothing else.

Codificación de caracteres para documentos web.

cuatroxl — Fri, 25 Jul 2008 12:38:32 +0000

Voy a hacer una pequeña introdución con una anecdota.

Suelo ír a una libreria a comprar libros; lo curioso de ésta librería es que en la puerta, con un rotulo en rojo, pone "libros en Español".
Un día fui a comprar un libro, más que nada porque el autor estaba allí. Llego a la librería, entro y hablo con el autor del libro y me dice que el libro está escrito en Francés; porque el cree que ese idioma es mucho más romántico y va más acorde con los relatos que el narra en el libro.
Llego a casa; contento porque traigo el libro firmado y me ha salido bien de precio. Lo abro y cual es mi sorpresa; ¡el libro está escrito en Ingles! WTF?

Pues bien; ahora vamos a hacer una pequeña conversión de identidates; para poder extrapolar el caso a el tema de codificación de carácteres:

Librería            = Servidor web(IIS, Apache, ...)
Autor del libro = el programador; creador del documento web
El libro             = documento web
yo, lector         = navegador web(firefox, Internet Explorer)

Lo primero; yo(como el navegador web) me acuerdo de la madre que pario al de la librería, y al autor; porque me están timando. Pero bueno ya tengo el libro y tendré que leerlo, que para eso lo he comprado, pero antes tendré que saber como tengo que leer el libro.

Hay una diferencia entre yo y el navegador web; el navegador web sabe muchos idiomas, pero no sabe identificarlos; esto es que hay que decirle en que "idioma" tiene que leer el libro.

Así que el navegador tiene una regla(porque se lo marca los estándares) y es que va a hacer caso a la librería(servidor) y va a intentar leer mi libro en Español, por lo que comienza a balbucear tonterías sin sentido(esto es lo que pasa cuando vemos webs con simbolos raros, sin acentos, ...)

Pero el "autor" (programador) sabe un truquito para que se salte a la librería y le haga caso a él, y le dice algo como:

"el cabecera de este documento pone que está en francés, así que léelo en francés"

Que más o menos fue lo que me dijo cuando compre el libro, así en voz muy bajita para que no me escuchase el dueño de la librería.

Pero claro; el navegador, con su inocencia que le caracteriza, le hace caso y comienza a leer el libro en francés, y la misma canción; a balbucear tonterías sin sentido.

Por lo que yo he identificado a los culpables para que estas cosas pasen;

La maldita regla estándar que dice que la orden del servidor(librería) prevalece sobre la que pone el programador(el autor del libro)
La ineptitud del programador(autor del libro) que no sabe ni en que codificación(idioma) a escrito su propio libro(documento web)
Después de años de adelantos en la informática; aún hoy por hoy es casi imposible para los programas(navegador web) saber que codificación(lenguaje) tienen los documentos(libros). Se ha "avanzado" mucho con el boom de UTF8, pero aún eso no es suficiente, porque muchos programas no sabes que es ese Boom

Por lo que señores programadores; poneros de acuerdo con lo que dice el servidor y poner en el Doctype la verdadera codificación de carácteres y dejen de tocar las narices.

update: Recomiendo esta lectura:
ASCII, Unicode, UTF-8 y la Iñtërnâçiônàlizæçiøn - parte I

Tragedy

Hector — Sun, 06 Jul 2008 21:27:45 +0000

About a month ago, I began putting together a new website for Forbes Office Furniture. Their current website, while not absolutely hideous, is very clumsy and incomplete. As I examined the client and server-side code, it became evident that someone with poor web development skills put the site together. Examples?

Absolute positioning everywhere.
Poor search engine optimization.
Dreamweaver JavaScript functions.
IFRAME tags.
Images with distorted aspect ratios.

One of the main goals behind my Forbes website remake was search engine visibility. In order to measure the impact of my search engine optimization strategy, I setup Google Analytics on the current site. One of today's referrers was logicstory.com. Out of curiosity, I visited the site, and found out it belonged to the current site's creator. His website has some issues. Even more disturbing, he has a new book coming out in November... on JavaScript? Have you no shame, sir? Publishing a book on web development, while your very own site has no DOCTYPE, is equivalent to me publishing a book on heart surgery because I sliced the turkey at Thanksgiving dinner.

I'm no web development or JavaScript expert, but I am smart enough to know that a book like this is bad for web development. Anyone who buys this book without significant web development experience will learn the wrong way. It is said that cigarrettes shave years off of your life. The publishing of this book will spawn serveral more years of bad web development.

Doctype Decoration

zurahn — Thu, 05 Jun 2008 23:40:13 +0000

If you look at the source code a web page, you'll see this at the top of almost every page. What does it mean, and why it is there? Apparently you aren't alone in your confusion. A simple validation will yield ugly results.

XHTML is an HTML coding standard that sets rules for the otherwise extremely loosely typed HTML mark-up language. It helps with browser standards, something most web developers should be very familiar with. It's getting rather ubiquitous, particularly XHTML transitional, but it's not much good when you're using a Doctype Decoration.

A Doctype Decoration is what I call an XHTML doctype declaration on a page that fails, particularly miserably. Just putting it there doesn't magically make the page better -- the whole point is to tell a validator what to validate. If you're not going to bother with whether it validates or not, it has no point.

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 1374 Errors
Address: http://gamespot.com

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 100 Errors
Address: http://arstechnica.com/index.ars

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 139 Errors
Address: http://digg.com

This is pathetic.

Let's give the browser sites a run:

This Page Is Valid XHTML 1.0 Strict!
Result: Passed validation
Address: http://www.opera.com

This Page Is Valid HTML 4.01 Strict!
Result: Passed validation, 1 warning(s)
Address: http://mozilla.org

This Page Is Valid HTML 4.01 Strict!
Result: Passed validation
Address: http://webkit.org

This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 183 Errors
Address: http://www.microsoft.com/en/us/default.aspx

I guess that explains the state of browser standards pretty well, now doesn't it?

Google Doctype

Syed Aslam — Tue, 27 May 2008 05:40:25 +0000

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Pareiza tag ievietošana

horninc — Mon, 21 Apr 2008 21:30:04 +0000

Laiku pa laikam aizmirstas kā tad īsti pareizi iesāk <html> failus… ,jo jau ilgāku laiku ar : <html><head><title></title></head><body…. vien nepietiek. Lai interneta pārlūksprogramma spētu objektīvi un precīzi nolasīt <html> faila kodu tai ir jāzin noteikumi un parametri pēc kuriem vadīties. Šo kopumu tad arī dēvē par document type declaration, jeb vnk Doctype! Ikvienam <html> dokumentam būtu jāsākas ar šo kodu, ja mēs vēlamies, lai pārlūkprogramma veiksmīgi tiktu galā ar visiem kodā sastopamajiem soļiem. Pareizi ievadītam Doctype! būtu jāizskatās šādi :

1: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

2: <html lang=”en”>

Taču tas ir nepieciešams lai pilnībā atpazītu lapā lietotos elementus, un tā lietošana noteikti ir labs ieradums ;)

Vēl kāds elements kam neatkarīgi no Doctype! ir jāpievērš vērība ir <meta> tags. Tas pastarpināti Doctype! rūpējas par pareizu lapas nolasīšanu. Šeit gan uzsvars vairāk tiek likts uz lapas, nevis koda saturu, jo šis tags norāda uz lapas saturu (description, content, keywords, encoding). Veiksmīgi izveidots <Meta> tags izskatās šādi :

1: <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1257″>

Kopsavilkumā veiksmīgs <html> faila iesākums varētu izskatīties apmēram šādi :

1: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

2: <html lang=”en”>

3: <head>

4: <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1257″>

5: <title></title>

Top 10 κακών συνηθειών στη συγγραφή του markup

leaverou — Thu, 10 Apr 2008 12:49:15 +0000

Το παρόν πόστ δεν έχει τόσο ως σκοπό να βοηθήσει, αλλά να τα γράψω κάπου και να ξεσπάσω διότι πραγματικά έχω κουραστεί απίστευτα να βλέπω ξανά και ξανά τα ίδια λάθη/κακοτεχνίες στον κώδικα κυρίως των πολύ αρχάριων στο αντικείμενο (ή ενίοτε αρκετά "παλιών" που απλά έχουν συνηθίσει έτσι). Το χειρότερο είναι ότι από όσα πανεπιστήμια έχω εμπειρία, είτε προσωπική, είτε μέσω φίλων, η HTML που διδάσκουν σχεδόν πάντα πέφτει σε όλα τα παρακάτω ατοπήματα. Γιατί; Ο λόγος είναι απλός. Ακολουθούν την αρχή "ο,τι δουλεύει μην το πειράζεις". Δεν έχει σημασία αν ο κώδικας είναι απαίσιος, και παρουσιάζει τα άπειρα λάθη στο validation, ή αν θυμίζει κώδικα ιστοσελίδας του 1996, αυτό που έχει σημασία για τους περισσότερους είναι ότι ...δουλεύει όπως θέλουν. Ή έτσι νομίζουν.

Έλλειψη DOCTYPE declaration
Κεφαλαία στα tags και τα attributes. Ενίοτε βλέπω και περιπτώσεις όπου τα μισά είναι κεφαλαία και τα άλλα μισά πεζά, κάτι που φαίνεται ακόμα χειρότερο.
Παράλειψη εισαγωγικών στις τιμές των html attributes
Παράλειψη δήλωσης τίτλου της σελίδας (<title>...</title>).
Χρησιμοποίηση deprecated tags & attributes, με top τα: <font>, <center>, <u>, <s> και από attributes τις bgcolor, vspace, hspace, link, vlink, leftmargin, topmargin, marginwidth, marginheight
Κλασσικότατο: <script language="JavaScript">. Πόσες φορές δεν το έχετε δει;
Παράλειψη του closing tag στα <li> και <p> elements.
Παράλειψη της καθέτου (/) στα self closing tags (πχ img, input κοκ)
Αγνόηση των σωστών indents, με αποτέλεσμα το markup να είναι εντελώς δυσανάγνωστο.
Παράλειψη του alt tag στα images.

Εσάς τι σας εκνευρίζει όταν το βλέπετε στο markup μιας σελίδας;

Web development mistakes

frensraz — Tue, 01 Apr 2008 11:34:34 +0000

When I surfing the internet I used to find the web is overflowing with sites that use horribly invalid, broken, and inaccessible markup. Even sites built by people who have been in the web business for many years, and who really should know better, are full of problems that shouldn’t be there. The reason? Ignorance, laziness, lack of time, bad tools, you name it. Yes, I’ve been guilty of making many mistakes myself through the years. However, I do my best to learn, and avoid making the same mistakes over and over again.

Here’s a list, in no particular order, of some of the most common mistakes that even experienced web professionals tend to make:

DOCTYPE confusion

Completely missing, incorrect, or in the wrong place. I have seen HTML 4.0 Transitional used in documents containing XHTML markup as well as in <frameset> documents, DOCTYPE declarations appearing after the opening <html> tag, and incomplete DOCTYPES.

<span> mania

A common way of styling something with CSS is to wrap it in a <span> element with a class attribute and use that to hook up the styling. I’m sure we’ve all seen things like <span class="heading"> and <span class="bodytext">.

(too much) Visual thinking

Treating the web as WYSIWYG – starting off by focusing on how things look instead of thinking about structure first, and presentation later.

Lack of semantics

Non-semantic markup. Basing the choice of which HTML element to use on the way most graphical browsers render it by default, instead of on which meaning the element has.

Character encoding mismatches

Specifying one character encoding in the HTTP header sent by the server, and using another in the document. This may confuse browsers and make them display the document improperly.

Bad alt-attributes

Missing or useless. <img> elements with missing alt attributes can be found in billions on the web. Not quite as common are useless attribute values like “spacer GIF used to make the layout look good”, “big blue bullet with dropshadow”, and “JPEG image, 123 KB”. Remember, the alt attribute is required for <img> and <area> elements.

Invalid id and class attributes

Multiple uses of the same value for the id attribute. Invalid characters used in id and class attributes and CSS selectors.

For CSS:

In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit.

For HTML:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).

Browser sniffing

Using scripts, server or client side, in an attempt to detect the visitor’s browser, and send or execute browser-specific code. Very commonly fails for reasons like new browsers, updated browsers, and user agent spoofing (Opera does this by default).

Missing units in CSS

Length values (horizontal or vertical measurements) require units in CSS, except when the value is zero. It’s not like in HTML, where you can type width="10". In CSS, it has to be width:10px; (or whatever unit you’re using).

Browser-specific CSS

Scrollbar styling, expressions, filters etc. Proprietary CSS that only works in Internet Explorer. Invalid, too.

JavaScript dependency

Making a site depend on JavaScript. More people than you’d like are either using a browser with no JavaScript support, or have disabled JavaScript in their browser. Current stats indicate that this is 8-10 percent of web users. Search engine robots currently don’t interpret JavaScript very well either, so if your site requires JavaScript to navigate, say goodbye to good search engine rankings.

Flash dependency

Assuming everybody has Flash installed. Not everybody has. And most search engine robots do not (Google has reportedly started experimenting with indexing of Flash files, but they still recommend that you make sure all your text content and navigation is available in HTML files), so if your whole site depends on Flash being available, you’re not going to score high with search engines.

Text as image

Making images of text, and not providing a more accessible alternative. Not only does it take longer for visitors to download images instead of text, you also make it impossible for most visitors to enlarge the text.

Bad forms

Inaccessible, hard-to-use forms. Learn to use the <label>, <fieldset>, and <legend> elements, and do not use a “Reset” button.

Old skool HTML

Multiple nested tables, spacer GIFs, <font> elements, presentational markup. So common I don’t really have to mention it here.

Being IE-centric

Coding for IE/Win first, then adjusting for others, if there is time.

Invalid HTML attributes

Using deprecated or browser specific attributes like marginwidth, leftmargin, language, height for <table> elements, and border for <img> elements (in strict DOCTYPEs) just to name a few.

Unencoded ampersands

Many URIs contain long query strings with unencoded ampersands (&). This is invalid, and may cause problems. Ampersands must be written as &

Basic Seo Tips for Web Designer

santosh setty — Tue, 25 Dec 2007 08:57:59 +0000

After designing a layout for a web site, we obviously start converting it into HTML during this session as a web designer we mainly concentrate on cross browser compatibility but we also need to concentrate on some basic seo things like...

1. Using Correct Doctype.

2. Using Meta Content and Meta Keywords.

3. Using Alt tags for Images.

4. Using Valid HTML and CSS code.

5. Make your web site load fast.

1. Why to Use Doctype and what does correct doctype means?

Document type defination(DTD) is also know as Doctype, doctype informs the browser how to interpret the content of the page. If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into quirks mode. If you know what you are doing and include a correct HTML doctype, your page will be rendered in standards mode.

Use correct doctype, for example your using strict doctype and you use used align in in div tag or in p tag then doctype you used is not correct because align attribute is deprecated in strict doctype.

2. Using Meta Content and Meta Keywords.

Use proper keywords and content relate to your web site, that helps search engine to crawl your web site.

3. Using Alt tags for Images.

Specify alt tag for image and that alt tag should be a keyword related to web site, because images you have placed on site can be seen by visitors but not by search engines, so alt tag help search engines to read, with the help of alt tags search engines display the image results.

4. Using Valid HTML and CSS code.

Validate your html and css code and make your code w3c standard.

validate your html code here

http://validator.w3.org

validate your css code here

http://jigsaw.w3.org/css-validator

5. Make your web site load fast.

Don’t mess up your site with heavy images that makes your site heavy and slow, try to optimize images that reduces weight and helps to load fast.

Online Image Optimizer

Estructura del html y primeros pasos del css

donestandares — Wed, 05 Dec 2007 19:29:46 +0000

Hi!, Ahora vamos a comenzar con todo el cuento de la creación de paginas web con css, lo primero es lo primero. crear un documento en dreamweaver... ó si usas archivos de texto pues creas un index.html

Ahora, como sabes... todo tiene un orden, las etquetas html también, todo html inicia con algo llamado DOCTYPE, son algunas indicaciones como el documento y unos estandares que se manejan para el html, generalmente... para todo html se maneja la siguiente etiqueta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transición//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La anterior etiqueta SIEMPRE va al comienzo de todo documento html, Ahora hay un dato importante. Recuerdas el xml, del que tanto hablan, pues para los que noconosen el xml es un estandar y este maneja etiquetas a la hora de escribirse, por ejemplo los RSS estan basados en xml, entonces digamos en un documento xml tenemos que insertar NOMBRE, APELLIDOS, según las especificaciones el xml debería ir así, con etiquetas según la info que vamos a escribir: <nombre>Andrés</nombre><apellido>Lara</apellido>, si analizamos la etiqueta cuando quiero terminar el contenido la cierro con una etiqueta similar, pero precedida con un / , esto nos indica que la etiqueta termino, ejemplo: <comentario>"Hola pedrito como vas?"</comentario>, ahí el comentario termina con </comentario>, así se puede entender donde comienza las cosas y donde terminan, entonces estos genios... del html comenzaron a trabajar en el html y descubrieron que el html podía ser un xml... ósea si yo comienso una etiqueta la cierro con un </, y todo se dio para que crearan algo llamado xhtml, que quiere decir... un html muy parecido al xml.

Volviendo al tema :P la siguiente etiqueta es la html, que es la que me dice si el documento html que estoy haciendo es HTML ó es XHTML, como nosotros vamos a la delantera, y queremos descrestar a todos, vamos a usar el xhtml que es le mas estandar, el que todos usan, así que si en la calle te dicen "OYE TRABAJAS CON HTML, no! eso es del pasado yo trabajo con xhtml!", entonces seguimos, la etiqueta html va con esta estructura:

Recuerda que esta etiqueta HTML esta abierta hasta el final, solo se cierra en el ultimo punto, a continuación vemos una etiqueta llamada HEAD y esta etiqueta maneja como su nombre lo dice en español CABEZA en español, esta etiqueta hasta donde se cierra maneja todo lo relacionado con titulos... iconos y otras vainas que a continuación vamos a ver, la estructura del head es simple solo abrimos la etiqueta:

<head>

Ahora vamos con las etiquetas META, son etiquetas que sirve para dar algunos detalles del documento XHTML por ejemplo con la etiqueta META podemos manejar las palabras claves... el autor... y la descripción del sitio, por que no me puedo demorar mucho en la explicación les dejo dos enlaces relacionados con HEAD y con META

Etiqueta head

Etiquetas meta

Y la estructura de las etiquetas meta viene siendo así:

Ahora si vamos con una etiqueta importante, la etiqueta TITLE , etiqueta fundamental si queremos hablar del titulo del documento XHTML , ¿Si han visto en las paginas web que aparece el titulo del sitio en la ventana del navegador?, esto lo podemos hacer mediante la eqitueta TITLE , su estructura es la siguiente:

<title>La empresa de mi papa.com</title>

Ahora seguimos con algo que es muy importante entender... por eso es necesario que antes de continuar, creemos una nueva carpeta en donde estamos alojando el index.html, la carpeta deve llamarse "css", sin comillas, en esta carpeta vamos a guardar los archivos css necesarios a lo largo de toooooodo el blog.

dentro de la carpeta css, crea un archivo llamado: "principal.css", sin comillas, y a continuación dentro del archivo inserta el siguiente código:

@charset "utf-8";
/* CSS Document */

Esa porción de código SIEMPRE deve ir SIEMPRE, ahora que creamos el archivo .css continuamos en index.html, ahora para llamar al archivo css que acabamos de crear, utilizamos una instrucción muy simple:

Con esta instrucción, estamosagregando el archivo css, con esto permitimos que el archivo css quede en el caché, como algunas imagenes.

Ahora el paso ultimo seria cerrar la etiqueta </head>, para indicar que hasta ahí va todo.

A continuación abrimos una etiqueta llamada BODY, y el código seria así:

<body>

Repasemos hasta ahora como tenemos el código aproximadamente:

<!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" xml:lang="es-ES" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author"
CONTENT="WebMaster de Los Alpes">
<meta name="keywords" CONTENT="viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda">
<meta name="description" CONTENT="La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.">
<link rel="shortcut icon" href="img/favicon.ico" mce_href="img/favicon.ico" type="image/x-icon" />
<title>La empresa de mi papa</title>

Ahora dentro del body va el contenido del xhtml, desde tablas hasta imagenes, todo lo que vayamos a trabajar, lo anteriormente colocado es esencial para poder laborar con estos documentos ya que se hace gura que aya compatibilidad entre navegadores y entre dispositivos anteriormente comentados.

Para cerrar solo quedaría colocar las etiquetas finales que seria finalizar la etiqueta BODY y HTML:

</body>
</html>

y pues el código quedaría algo así:

<!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" xml:lang="es-ES" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author"
CONTENT="WebMaster de Los Alpes">
<meta name="keywords" CONTENT="viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda">
<meta name="description" CONTENT="La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.">
<title>La empresa de mi papa</title>
<style type="text/css" media="screen">

</style>
</head>
<body>

</body>
</html>

Espero que les aya servido para comenzar, APENAS ES LO BASICO, mas adelante iremos con mas, mañana comenzamos ya completamente con las clases :P chau!.

XHTML - O que é?

Rogério Alencar Lino Filho — Mon, 03 Jul 2006 19:17:28 +0000

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre "" (alt="Olá"), e as tags simples devem ser fechadas com "/>" (<img src="foto.gif" alt="eu" />).

Alguns exemplos:

Tags e atributos:

errado: <IMG src="foto.gif" ALT="eu">

certo: <img src="foto.gif" alt="eu">

Aninhamento das tags:

errado: <p>parágrafo <em> negrito </p></em>

certo: <p>parágrafo <em> negrito </em></p>

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seje seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo ( <dl compact> para <dl compact="compact"> ). E a "troca" do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com - Tutorial XHTML
W3.org - O que é XHTML?
W3schools - XHTML validation
W3Schools - Diferença entre XHTML e HTML
Revolução.ect.br - O que é XHTML?
Revolução.etc.br - Doctype
Linha de Código - Tutorial XHTML
Linha de Código - Escrevendo um XHTML válido