You are on page 1of 6

12/04/2012

¿Que es W3C?

Introducción a HTML / XHTML
Eduardo Ceballos S.

¿Que es W3C?
• El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la World Wide Web (Web) a largo plazo.

¿Qué es HTML?
• El W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".

¿Qué es HTML?
• HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.

¿Qué es el XHTML?
• XHTML, siglas del inglés eXtensible HyperText Markup Language. • XHTML es básicamente HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores entre otros. • XHTML es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan.

1

com">un enlace</a></p> Reglas básicas del XHTML 3) El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.com">un enlace</A></P> Ejemplo incorrecto en XHTML (pero correcto en HTML): <p>Este es un párrafo con <a href=http://www.google.google. siglas del inglés Cascading Style Sheets.com>un enlace</a></p> 2 . ¿Qué es CSS? • CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos: Estructura de un Documento HTML • Esquema de las etiquetas principales que contiene un documento HTML: Reglas básicas del XHTML 1) Las etiquetas se tienen que cerrar de acuerdo a como se abren: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a>un enlace</a></p> Ejemplo incorrecto en XHTML (pero correcto en HTML): <p>Este es un párrafo con <a>un enlace</p></a> Reglas básicas del XHTML 2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.google. • CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).12/04/2012 ¿Qué es CSS? • CSS. • El W3C es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario (navegadores).google.com">un enlace</a></p> Ejemplo incorrecto en XHTML (pero correcto en HTML): <P>Este es un párrafo con <A HREF="http://www. también conocido como hojas de estilo.

.org/TR/xhtml1/DTD/xhtml1-frameset.Type " content =" text / html .0 Frameset//EN" "http://www. sino que define el tipo de DTD (Document Type Definition o Definición de tipo de documento) a emplear en los documentos.12/04/2012 Reglas básicas del XHTML 4) Los atributos no se pueden comprimir: Ejemplo correcto en XHTML: <dl compact="compact">.w3. es obligatorio.0 Strict//EN" "http://www. • Al principio del documento: <?xml version =" 1.equiv =" Content .dtd"> • XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.. La codificación estándar es la Unicode (utf-8)... el cual no es parte del documento en sí.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.</dl> Reglas básicas del XHTML 5) Todas las etiquetas deben cerrarse siempre: Ejemplo correcto en XHTML: <br/> Ejemplo incorrecto en XHTML (pero correcto en HTML): <dl compact>. charset =utf -8" /> Estructura del Documento XHTML: DOCTYPE • XHTML 1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 .dtd"> Estructura del Documento XHTML: El elemento raíz (HTML) • Todos los elementos de nuestro documento deben ir dentro de las etiquetas <html></html> • HTML 1.0 Transitional: :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. • En el HEAD: <meta http .0" encoding ="UTF -8" ?> Estructura del Documento XHTML: DOCTYPE • Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE.w3.org/TR/xhtml1/DTD/xhtml1-strict.</dl> Ejemplo incorrecto en XHTML (pero correcto en HTML): <br> Estructura del Documento XHTML: La Codificación • La codificación es formato en el que se guardan los caracteres en el archivo.w3.0 Transitional//EN" "http://www.

css"> <link rel="shortcut icon" href="favicon.tuwb.0 Transitional//EN" "http://www.dtd"> <html xmlns="http://www.css"> <link rel="stylesheet" media="print" href="imprimir.w3. follow" /> • <meta name="author" content="Carlos Orós" /> • <meta name="distribution" content="Global" /> • <meta name="copyright" content="© IST" /> • <meta name=”keywords” content=”palabras clave”/ > Estructura del Documento XHTML: El cuerpo (BODY) Estructura del Documento XHTML: Plantilla <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. charset=utf-8" /> <title>Título de la web</title> </head> <body> Aquí va el contenido </body> </html> Atributos <h> <h1>Título</h1> <h2>Subtítulo</h2> <h3>Sub-subtítulo</h3> 4 .org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html.w3.org/TR/xhtml1/DTD/xhtml1-transitional.ico"> </head> <head> <link rel="stylesheet" media="screen" href="estilo.css"> </head> Ejemplos de Contenido Meta • <meta http-equiv="refresh" content="15" url="http://www. charset=iso-8859-1" /> • <meta name="description" content=“Pagina de Prueba" /> • <meta http-equiv="Content-Language" content="ES-ES" /> • <meta name="robot" content="index.com/" /> • <meta name="Content-Type" content="text/html.12/04/2012 Estructura del Documento XHTML: La cabecera (HEAD) • • • • • Información del documento Lenguaje de la página Título Inclusión de Scripts y Páginas de estilos Información Meta Estructura del Documento XHTML: La cabecera (HEAD) <head> <link rel="stylesheet" href="estilo.

<q>¡Vamos a aprender HTML!</q></p> Atributos <blockquote> <p>Y entonces él dijo<p> <blockquote><p>Le haré una oferta que no podrá rechazar</p></blockquote> Atributos <ul> <ul> <li>Lunes</li> <li>Martes</li> <li>Miércoles</li> </ul> Atributos <ol> <ol> <li>Lunes</li> <li>Martes</li> <li>Miércoles</li> </ol> Atributos <strong> <strong>HTML</strong> es un lenguaje de marcado Atributos <table> <table> <tr> <th>Lenguaje</th> <th>Año</th> </tr> <tr> <td>HTML</td> <td>1991</td> </tr> <tr> <td>CSS</td> <td>1996</td> </tr> <tr> <td>XHTML</td> <td>2000</td> </tr> </table> 5 ..12/04/2012 Atributos <p><br> <p>Primera línea<br> Segunda línea<br><br> Cuarta línea</p> <p>Y entonces él dijo..

número de columnas abarcado por la celda rowspan.número de filas abarcado por la celda Atributos de una celda • <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> CellSpacing CellPadding Contenido Border 6 .12/04/2012 Atributos <tr> • <TR> Define una fila (table row) Atributos <th> • <TH> Define el encabezado de una columna (table header) Atributos <td> • <TD> Define una celda (table data) • • • • Atributos de <td> align .alineacion vertical (No HTML5 Si XHTML) colspan.alineacion horizontal valign .