Repaso desde HTML a XHTML
¿Qué es HTML? HTML es un lenguaje que hace posible presentar información (por ej, investigaciones científicas) en Internet. Es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual". Texto se explica por sí solo. Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc. Lenguaje HTML es un lenguaje
Formato HTML La estructura básica de un documento HTML sería: <head> Definiciones de la cabecera </head> <body> Instrucciones HTML </body> </html>
Formato HTML A la mayoría de los navegadores les da igual si se escribe en mayúscula, minúscula o mezcla de las 2. Sin embargo la manera correcta es escribir las etiquetas en minúscula.
La cabecera <head> y </head> La cabecera de un documento HTML está delimitada por las etiquetas <head> y </head> Se incluyen las definiciones generales que afectarán a todo el documento. Todas sus etiquetas son opcionales y se utilizarán sólo en casos muy determinados. Solo la etiqueta title tiene un uso general y aunque es opcional, se recomienda incluirla en todos los documentos que creemos.
El cuerpo <body> El cuerpo de un documento HTML está delimitado por las etiquetas <body> y </body> y en él se incluirán todas las instrucciones HTML y el texto que forman el documento. Al igual que la cabecera (head) es opcional.
Algunas etiquetas relevante <h#></h#> #Є{1,2..n} se utilizan para crear encabezados (h de heading) <p></p> nuevo parrafo. <strong>: letra negrita <small>: texto más pequeño <i>: texto en cursiva <u>: texto subrayado <img src=”...” /> insertar imágenes <br/> etiqueta de salto de linea. Como se ve en este caso no es necesario tener etiquetas de cierre.
Tablas Las tablas son la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align. Las tablas se definen de la siguiente manera: Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda.
Tablas Las tablas son la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align. Las tablas se definen de la siguiente manera: Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. <table> <tr> <td>1,1</td> </tr> <td>2,1</td> </table>
Formularios Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en el que se desee una interacción por parte del usuario. Se podrán definir distintos tipos de recuadros de diálogo, botones de selección, menús de múltiples opciones..., para permitir obtener los datos de una manera más intuitiva.
Formularios <form> Para la creación de formularios se usa la etiqueta form: < form action="fichero que trata el formulario" method= POST | GET > < /form> Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Se definirán los tipos de botones, cajas de diálogo y ventanas para la introducción de datos así como las variables que almacenarán los datos introducidos por el usuario.
Formularios – Campos <input type=””/> se utilzan para definir campos de entrada de datos. type = {TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET} se usa para determinar el tipo de recuadro de diálogo. TEXT = texto de entrada PASSWORD = texto que lo muestra con * HIDDEN = no se muestra, pero se envia con el formulario SUBMIT = Es un botón para enviar los datos del formulario. RADIO = cada una de las etiquetas, tendrá el mismo atributo NAME, y con distinto VALUE que será el valor que tome si se seleccióna.
Formularios – Campos <textarea> permite la introducción de un texto que puede abarcar varias lineas. <select> si se desea que sea un menú simple o múltiple en forma de pop-up. <select name="variable"> <option selected value=valor1> Opción Primera <option value=valor2> Opción Segunda . . . <option value=valorn> Opción Enésima </select> Para todos los campos se puede colocar DISABLE que permite desctivar el campo, impidiendo que el usuario lo utilice. Ej: <input type=”text” disabled />
Frames <frameset cols="20%,80%"> Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada página se divide en la práctica en varias páginas independientes. <frameset> esta etiqueta contiene el número, tamaño de cada frame, tamaño de los bordes FRAMEBORDER, etc. <frame> define cada marco. Ejemplo: <frameset cols="20%,80%"> <frame name="indice" src="indice.html"> <frameset rows="*,80"> <frame name="principal" src="introduccion.html"> <frame name="ejemplos" src="ejemplo.html"> </frameset>
XHTML – Introducción XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del tradicional HTML. XHTML es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas (deja de lado el aspecto estético), sino lo que significan. Por ejemplo: si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página. Haz algo para que destaque”. Y ese “algo” lo dejamos a decisión del navegador.
XHTML – Introducción Por compatibilidad con XML, en XHTML todas las etiquetas deben ir en minúsculas. Todos los atributos tienen que estar entre comillas dobles. Ninguna etiqueta puede quedar sin cerrar.En el caso de <img> y <br> las cerramos agregando / al final con lo cual seria <img /> <br />. La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, scripts, etc.
XHTML - La plantilla <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Título de la web</title> </head> <body> Aquí va el contenido </body> </html>
XHTML – Cambios Deja de lados cietos atributos <font> y <basefont> carecen de sentido. Atributos de algunas etiquetas como color, imagen de fondo, etc. son sustitutos. <b>, <i>, etc. no se recomiendan porque hacen refernecia exclusivamente a la apariencia. Si se quiere dar énfasis utilizamos <em> y más fuerte seria <strong> XHTML hace hincapié en la accesibilidad y por eso debemos facilitar atributos de “apoyo”. Ej: <a href="http://www.google.es" title="Buscador">Google</a>
XHTML – Cambios XHTML es muy estricto en cuanto a la anidación de etiquetas. Los block son etiquetas como párrafos, listas, etc. Los inline no interrumplen el flujo del texto.(Etiquetas de formato, enlaces y demás) Ejemplo: <a href=".." title="..."><h1>Texto</h1></a> ERROR <h1><a href="..." title="...">Texto</a></h1> OK
XHTML – La cabecera La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, scripts, etc. Los block son etiquetas como párrafos, listas, etc. Los inline no interrumplen el flujo del texto.(Etiquetas de formato, enlaces y demás) Ejemplo: <a href=".." title="..."><h1>Texto</h1></a> ERROR <h1><a href="..." title="...">Texto</a></h1> OK