von Júlia Motger Vor 14 Jahren
215
Mehr dazu
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.
La propiedad y el valor van entre llaves { }
Entre la propiedad y el valor van :
Al final del valor va un ;
Contenido: 16, 18, #000000
Elemento que va a modificarse: font-size, color, font-family…
Etiqueta o parte del documento que quedará afectada por el estilo: h2, p, body…
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>
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>
Se define en cada etiqueta XHTML.
<h2 style=“font-size:14;”>Texto del encabezado</h2>
- 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).
Validador HTML
CSS 101
Para entender CSS.
La guía de estilo (de la biblioteca de Nueva York)
Reglas para el uso de XHTML.
CSS Discuss
Lista de discusión sobre CSS.
Designing With Web Standards
De Jeffrey Seldman. Sobre los estándares web.
Cascading Style Sheets: The Definitive Guide
De Eric Meyer. Sobre CSS.
HTML & XHTML: The Definitive Guide
Base para la creación de páginas web.
Objetivos / Motivaciones
Motivar la eficiencia
Motivar la equidad
Aumentar la audiencia
Limitaciones a tener en cuenta
Cognitivas / Sociales / De entorno
Motoras
Auditivas
Visuales
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.
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.
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>
Columna
Columna normal
<td>
Columna tipo encabezado
<th>
Fila
<tr>
Border
No numeradas
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Numeradas
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
En la sección head.
Tipos
Título del enlace
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.
<a href="enlace" title="información del enlace">… </a>
Autor
Para indicar el nombre del autor. Usado por motores de búsqueda.
<meta name="autor" content="nombre" />
Palabras clave
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.
<meta name="keywords" content="palabra1, palabra2,…" />
Descripción de la página
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.
<meta name="description" content="descripción del sitio o de la página" />
Título de la página
Explicación
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.
Codificación
<title>Título del documento</title>
Finalidad
Ser leídos por los buscadores
Resultan útiles para el posicionamiento web.
Describir el documento
Enlace a un punto concreto (anchor) de una página
<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"
En qué ventana de navegador se abrirá el enlace.
Blank
En una nueva ventana.
Self
En la misma página.
Enlace a otro sitio web
<a href="http://www.destin.com">Enlace</a>
Enlace a otra carpeta dentro de la carpeta del html
<a href="/carpeta1-1/destin.htm">Enlace</a>
Enlace a un archivo en otra carpeta del mismo nivel
<a href="../carpeta2/destin.htm">Enlace</a>
Enlace dentro del mismo directorio
<a href="destin.htm">Enlace</a>
Sonidos, vídeos
<embed>
Imágenes
Almacenadas independientemente de los textos.
Editores
Freeware
XnView
Comerciales
PhotoShop
Formatos comprimidos
PNG (estándar W3C)
JPEG (fotografías)
GIF (dibujos)
Accesibilidad
Texto alternativo "alt"
Peso
Enlace a las imágenes
De una URL
<img src="http://www.imagenes.com/imagen.jpg">
De otra carpeta
<img src="File:/C:/carpeta/imagen.jpg">
De la misma carpeta
<img src="imagen.jpg">
Tipo de letra
<font face="tipo de letra"><font>
Color
<font color="color"></font>
Tamaño
<font size="número"></font>
Cursiva
<em></em>
Negrita
<bold></bold> / <strong></strong>
Cabeceras con etiqueta
<H1>Encabezado H1</H1>
<H2>Encabezado H2</H2>
<H3>Encabezado H3</H3>
<H4>Encabezado H4</H4>
<H5>Encabezado H5</H5>
<H6>Encabezado H6</H6>
Elementos con atributos
Se usarán en la hoja de estilos.
<hr size=“2”>Línea horizontal de grosor 2</hr>
Alineación de párrafo
<p align=“right”>Párrafo alineado a la derecha</p>
Elementos
Línea horizontal
<hr></hr>
Salto de párrafo
<p></p>
Salto de línea
<br></br>
Ejemplo:
<p align="right">Párrafo alineado a la derecha</p>
Cierre de etiqueta
Texto visible
Valor
Atributo
Etiqueta
Ésta sería la estructura básica de un documento en lenguaje html:
<html>
<head>
Contenido
</head>
<body>
Contenido.
</body>
</html>
