Unidad 2: Arquitectura de la Información (I)

HTML

r

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), constituye el lenguaje más común para la elaboración de páginas web.El XHTML debe usarse para los contenidos.

Estructura básica

r

Ésta sería la estructura básica de un documento en lenguaje html:<html> <head> Contenido </head> <body> Contenido. </body></html>

Contenido de la sección head (no se visualiza)

Contenido de la sección body (sí se visualiza)

Etiquetas HTML

r

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web.

Estructura de las etiquetas

r

Ejemplo:<p align="right">Párrafo alineado a la derecha</p>

Etiqueta

Atributo

Valor

Texto visible

Cierre de etiqueta

Formato de documento

Elementos

Salto de línea

r

<br></br>

Salto de párrafo

r

<p></p>

Línea horizontal

r

<hr></hr>

Elementos con atributos

r

Se usarán en la hoja de estilos.

Alineación de párrafo

r

<p align=“right”>Párrafo alineado a la derecha</p>

Línea horizontal

r

<hr size=“2”>Línea horizontal de grosor 2</hr>

Cabeceras con etiqueta <Hn>

r

<H1>Encabezado H1</H1><H2>Encabezado H2</H2><H3>Encabezado H3</H3><H4>Encabezado H4</H4><H5>Encabezado H5</H5><H6>Encabezado H6</H6>

Formato de texto

Negrita

r

<bold></bold> / <strong></strong>

Cursiva

r

<em></em>

Tamaño

r

<font size="número"></font>

Color

r

<font color="color"></font>

Tipo de letra

r

<font face="tipo de letra"><font>

Inclusión de objetos

Imágenes

r

Almacenadas independientemente de los textos.

Enlace a las imágenes

De la misma carpeta

r

<img src="imagen.jpg">

De otra carpeta

r

<img src="File:/C:/carpeta/imagen.jpg">

De una URL

r

<img src="http://www.imagenes.com/imagen.jpg">

a

Accesibilidad

Peso

Texto alternativo "alt"

Formatos comprimidos

GIF (dibujos)

JPEG (fotografías)

PNG (estándar W3C)

Editores

Comerciales

PhotoShop

Freeware

XnView

Sonidos, vídeos

r

<embed>

Enlaces

Enlace dentro del mismo directorio

r

<a href="destin.htm">Enlace</a>

Enlace a un archivo en otra carpeta del mismo nivel

r

<a href="../carpeta2/destin.htm">Enlace</a>

Enlace a otra carpeta dentro de la carpeta del html

r

<a href="/carpeta1-1/destin.htm">Enlace</a>

Enlace a otro sitio web

r

<a href="http://www.destin.com">Enlace</a>

a

Enlace a un punto concreto (anchor) de una página

r

<a href="destin.htm#anchor1">Enlace</a><a href="http://www.destin.com#anchor1">Enlace</a>Sumario<p><li><a href="#introduccion">1. Introducción</a><li><a href="#metodologia">2. Metodología</a><li><a href="#resultados">3. Resultados</a>

Target="valor"

r

En qué ventana de navegador se abrirá el enlace.

Self

r

En la misma página.

Blank

r

En una nueva ventana.

Metaelementos

r

En la sección head.

Finalidad

Describir el documento

Ser leídos por los buscadores

r

Resultan útiles para el posicionamiento web.

Tipos

Título de la página

Codificación

r

<title>Título del documento</title>

Explicación

r

Es el dato desplegado en la barra superior del programa navegador. Es usado también por los motores de búsqueda para presentar el título de la página en los resultados de una búsqueda.

Descripción de la página

Codificación

r

<meta name="description" content="descripción del sitio o de la página" />

Explicación

r

Es usado por los motores de búsqueda indizar el sitio y para presentar la descripción del sitio en los resultados de una búsqueda.

Palabras clave

Codificación

r

<meta name="keywords" content="palabra1, palabra2,…" />

Explicación

r

Sirve para representar el contenido de la página, para indizar la página web por motores internos y por algunos motores de búsqueda.

Autor

Codificación

r

<meta name="autor" content="nombre" />

Explicación

r

Para indicar el nombre del autor. Usado por motores de búsqueda.

Título del enlace

Codificación

r

<a href="enlace" title="información del enlace">… </a>

Explicación

r

Provoca la aparición de un recuadro explicativo cuando el usuario desplaza el cursor sobre el enlace. Usado también por lo motores de búsqueda para indizar la página.

Listas

Numeradas

r

<ol> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol>  

No numeradas

r

<ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>

Tablas

Border

Fila

r

<tr>

Columna

Columna tipo encabezado

r

<th>

Columna normal

r

<td>

Formularios

r

Ejemplo:<FORM action=“mailto:nombre@mail.com" ENCTYPE="text/plain" method="post"> <P> Nombre: <INPUT type="text" name="nombre"><BR> Apellidos: <INPUT type="text" name="apellido"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sexo" value="Hombre">Hombre<BR> <INPUT type="radio" name="sexo" value="Mujer">Mujer<BR> <INPUT type="submit" value="Enviar"> <INPUT type=“reset“ value="Restablecer"> </P> </FORM>

a

Los estándares web (W3C)

r

- Los estándares web constituyen un conjunto de recomendaciones del World Wide Web Consortium (abreviado como W3C) y otras organizaciones internacionales sobre cómo crear e interpretar documentos web. - W3C es un consorcio internacional que produce recomendaciones para la World Wide Web, y está dirigida por Tim Berners-Lee (creador de URL, HTTP y HTML).

Beneficios

Mayor consistencia visual

Perfeccionamiento de los efectos de estilo

Más información y menos código

Mayor relevancia en los motores de búsqueda y directorios

Permite crear sitios extensibles

Compatibilidad con todos los navegadores

Facilidad de mantener y actualizar el sitio web

Mayor accesibilidad y facilidades a personas con discapacidades

Limitaciones a tener en cuenta

Visuales

Auditivas

Motoras

Cognitivas / Sociales / De entorno

Objetivos / Motivaciones

Aumentar la audiencia

Motivar la equidad

Motivar la eficiencia

Recursos útiles

Bibliografia

HTML & XHTML:
The Definitive Guide

r

Base para la creación de páginas web.

Cascading
Style Sheets: The Definitive Guide

r

De Eric Meyer. Sobre CSS.

Designing
With Web Standards

r

De Jeffrey Seldman. Sobre los estándares web.

Webgrafia

CSS Discuss

r

Lista de discusión sobre CSS.

a

La guía de estilo (de la biblioteca de Nueva York)

r

Reglas para el uso de XHTML.

CSS 101

r

Para entender CSS.

a

Validador HTML

CSS

r

Las hojas de estilo o documentos CSS (Cascading Style Sheets) constituyen un conjunto de reglas que definen la apariencia de los elementos XHTML.Plantillas de formato de documentos XHTML.El CSS debe usarse para el aspecto visual.

Ventajas

Mayor control sobre el aspecto del documento

Evitan tener que indicar el estilo en cada etiqueta

Permiten hacer cambios globales en todo el documento

Formas de aplicar CSS

Estilo en línea

r

Se define en cada etiqueta XHTML.<h2 style=“font-size:14;”>Texto del encabezado</h2>

Estilo interno

r

Se define en el head del documento y afecta a esa página en concreto.<style type=“text/css”>body { background-color:#ccdd00;}h2 { font-size:14;}</style>

Estilo externo

r

Se crea en un documento aparte y se vincula desde cada página web afectada en el head.<head><link rel=“stylesheet” type=“text/css” href>=“fichero_estilos.css” /></head>

Elementos

r

La propiedad y el valor van entre llaves { }Entre la propiedad y el valor van :Al final del valor va un ;

Selector

r

Etiqueta o parte del documento que quedará afectada por el estilo: h2, p, body…

Propiedad

r

Elemento que va a modificarse: font-size, color, font-family…

Valor

r

Contenido: 16, 18, #000000

Enlaces

Wikipedia: W3C

Maestros del Web

a

W3C Guias breves

a

Wikipedia: CSS

Accesibilidad Web