Html y Css

Argumento de Html y Css

Introducción
Antecedentes
¿A quién va dirigido este libro?
Qué vamos a conseguir
Convenciones
Código fuente

Parte I. Fundamentos de XHTML

1. ¿Es usted un estandarista Web?
Breve historia de la World Wide Web
Ha nacido la Web
La Web perfecta
La caótica Web
Origen de HTML
HTML evolucionado
La X en XHTML
Estándar Web
¿Qué son los estándares?
¿Estándares Web?
¿Por qué utilizar estándares Web?
Separar contenido y presentación
Eficiencia con un reducido etiquetado
Mayor accesibilidad
Compatibilidad en navegadores
Compatibilidad fuera de los navegadores
Compatibilidad en el futuro
El enfoque de los estandaristas Web
"Dar cera. pulir cera"
¿Por qué utilizar XHTML?
Ventajas de CSS
Caja de herramientas de los estandaristas Web
No somos WYSIWYG
¿Cuál es su editor de texto sin formato favorito?
¿Mac OS X, Windows o Linux?
Resumen
Ejercicio: Establecer el entorno de trabajo

2. Crear páginas Web básicas
HTML: etiquetas en acción
¿Qué son etiquetas?
Las etiquetas suelen venir de dos en dos
Se trata de un elemento, mi querido Watson
Su primera página Web: Hello World!
Para marcar una página Web, simplemente escriba
El etiquetado hace la página Web
Aprender de otros: cómo ver el código fuente
Todas las páginas tienen un y un
La importancia de utilizar el elemento title
Definir el tipo de documento
Todo comienza con un DOCTYPE
Breve definición de Quirks Mode
Todo está en un namespace
Sólo una cosa más
Todo esto no hay que memorizarlo
Hello World!: Edición DOCTYPE
Las etiquetas también tienen estructura: elementos anidados
Etiquetado fácil de seguir
Comentar el etiquetado
Espacios en blanco
Resumen
Ejercicio: Cree su primera página XHTML sobre un mono espacial

3. Etiquetado estructurado
Añadir estructura y significado
¿Qué es etiquetado estructurado?
¿Qué es etiquetado semántico?
Etiquetado con significado
POSH
Signposts for Reading
Crear estructura con encabezados y párrafos
Aplicar jerarquía de información
Caso práctico: el guardián
Introducción a elementos de frase
¿Qué es un elemento?
Añadir significado a fragmentos de texto
Añadir énfasis: y
Otros elementos de frase
Elementos block-level e inline-level
Imagine una caja
Diferencia entre elementos block-level e inline-level
El código válido es etiquetado compatible con los navegadores
W3C Markup Validation Service
El código válido no es necesariamente código bien estructurado
Facilitar la búsqueda
Resumen
Ejercicio: Presentar a Miss Baker

4. Etiquetado que aporta significado
Listas: organizadores de primer nivel
¿Por qué utilizar listas?
Listas ordenadas y sin ordenar
Lista ordenada
Anidar listas
Listas de definición
Tablas: las buenas, las malas y las alternativas
¿Qué son datos tabulares?
, y Mejorar la accesibilidad de las tablas
Añadir un resumen descriptivo a una tabla
Entrecomillar texto
¿Qué es ?
Citas (o )
Entrecomillados (o )
Otras etiquetas
Abreviaturas
El caso de

Etiquetas de auto cierre
y

Etiquetar cambios con  y  
 y 
Resumen
Ejercicio: La aventura de Gordo
5. Imágenes
Etiqueta
Ejemplo de etiqueta
Añadir a las imágenes atributos de anchura, de altura y de título
Trabajar con imágenes
¿Qué editor de imágenes?
Photoshop
Fireworks
Photoshop Express
GIMP (y sus amigos)
Optimización de imágenes
Por qué es importante comprimir las imágenes
Guardar para la Web
Formatos de imagen para la Web
JPG: Fotografías
GIF: Gráficos y tipos
PNG
PNG-8
PNG-24
Un píxel es un píxel
Tamaño
Las limitaciones de los mapas de bits
Gráficos vectoriales
Encontrar la imagen adecuada
Imágenes de bajo coste
Flickr y Creative Commons
Resumen
Ejercicio: Una imagen vale más que mil palabras
6. Crear vínculos con anclas
Etiqueta
Utilizar texto descriptivo en el vínculo
Atributo title
¡Vamos a crear algunos vínculos!
Vínculos externos
El temido & y el validador
Comprobar los vínculos
El (maldito) atributo target
Vínculos locales
Vínculos internos
Vínculos de correo electrónico
Recapitulación
Vínculos absolutos vs. vínculos relativos
Estructurar el sitio Web
Organizar los archivos y carpetas
Archivo mágico de índice
Vincular diferentes carpetas de nuestro sitio entre sí
Vincular dentro de una carpeta
Vincular a una subcarpeta
Vincular a una carpeta "progenitora"
Vincular hacia arriba y después hacia abajo
Resumen
Ejercicio: Orden primero, vínculos después
7. Su sitio online
Su dirección en la Web
¿Qué es un nombre de dominio?
¿Qué es un TLD?
¡Piense un nombre!
Registrar un nombre de dominio
Hosting en la Web
¿Hosting gratuito en la Web?
El equilibrio adecuado
Aspectos que debe tener una compañía de hosting
Espacio de disco
Ancho de banda
Correo electrónico
Panel de control
Soporte
Cambiar de compañía de hosting
Subir archivos
Local frente a remoto
FTP (File Transfer Protocol)
Propagación
Herramientas que utilizamos
¿Qué cliente FTP?
Transferir archivos al servidor
¿Qué necesitamos?
La dirección del servidor
El nombre de usuario
La contraseña
Comenzar
Demostración online
Resumen
Ejercicio: Subir el sitio online
Parte II. Añadir estilo con CSS
8. CSS 101
Añadir estilo
HTML: breve repaso
CSS no es nuevo
¿Sopa de etiquetas o simplificado y optimizado?
CSS al rescate
Introducción a CSS
Anatomía de una regla de CSS
Formato
Regla un poco más compleja
Añadir CSS a una página Web
Añadir una hoja de estilo insertada
Procedimiento sencillo
Colores
Aplicar estilo a
Aplicar estilo a los encabezados: y
Aplicar estilo a
Comentarios en CSS
Resumen
Ejercicio: Añadir CSS a la página Web de Gordo
9. Aplicar estilo al texto
Tipografía en la Web
¿Qué es tipografía?
CSS: Nuestro amigo flexible
Hacer accesible el texto
Herencia y especificidad
Herencia
Especificidad
Especificar fuentes en la Web
Fuentes Web básicas
Escribir reglas de CSS más fiables para especificar fuentes
Serif
Sans serif
Monospace
Cursive
Fantasy
Tamaño
Tamaño de texto con píxeles
Tamaño de texto con ems
Escribir reglas más eficientes
Añadir más reglas
Especificar un tipo de letra
Vamos a perder peso
Transformar texto
Espacio entre letras
Aplicar estilo a párrafos
Establecer un alto de línea
Añadir sangría a párrafos
Alinear texto utilizando text-align
Aplicar estilo a los vínculos
Utilizar pseudo clases para aplicar estilo a vínculos
LoVe HAte
Resumen
Ejercicio: Mejorar la tipografía de Gordo
10. Presentación a una columna con CSS
La cascada en Cascading Style Sheets
¿Qué es exactamente la cascada?
El orden de sus reglas de CSS es importante
Márgenes, bordes y relleno
Modelo de cajas
Aplicar márgenes, bordes y relleno
Usar CSS abreviado para márgenes, bordes y relleno
Aplicar estilo a
Dividir el documento
Identificar las secciones del documento
Elementos div y span con atributos id y class
Elementos div y span
Atributos id y class
Todo está en un nombre
Elementos div para crear presentaciones con CSS
Presentación a una columna con CSS
Selectores descendientes para minimizar el etiquetado
Aplicar estilo a detalles con el elemento span
Utilizar un span para aplicar estilo al contenido inline
El lustroso símbolo & de Dan Cederholm
Aplicar estilo con atributos class
Perfeccionar el diseño añadiendo imágenes de fondo con CSS
Añadir una imagen de fondo al body
Utilizar imágenes de fondo con otros elementos
Resumen
Ejercicio: Crear una presentación a una columna con CSS
11. Presentación a dos columnas con CSS
Presentación con CSS basada en floats
Divs flotantes
Aplicar floats a las presentaciones
Crear nuestra presentación a dos columnas con CSS
Calcular el ancho de los elementos
Breve recapitulación del modelo de cajas
¿Qué ocurre si los elementos son demasiado anchos?
Márgenes colapsados
Aplicar un float a una imagen
Columnas falsas
Conclusión con King Kong
Resumen
Ejercicio: Añadir una segunda columna a la página Web de Gordo
12. Listas de navegación
Aplicar estilo a listas
Aplicar estilo a una lista sencilla
Aplicar estilo a una lista de navegación
Crear listas horizontales
Aplicar estilo a listas anidadas
Aplicar estilo a un mapa de sitio con una lista anidada
Aplicar estilo a una lista ordenada
Resumen
Ejercicio: Añadir la navegación de la Web Famous Primates
13. Aprovechar la eficacia de las hojas de estilo externas
Los elementos de encabezado que lo hacen posible
La importancia de las meta etiquetas
Todo está en un nombre
Hablar un idioma extranjero
Hojas de estilo externas
Hojas de estilo insertadas frente a vinculadas
Vincular a una hoja de estilo externa
Tipos de medios
@import
Crear nuestro archivo externo de CSS
El verdadero poder de CSS
Añadir una hoja de estilo para imprimir
Construir la hoja de estilo para imprimir
Aplicar estilo al body
Ocultar contenido innecesario
Aplicar estilo a los encabezados
Aplicar estilo a los vínculos
Hacer clic en Imprimir y comprobar el resultado
Comentarios condicionales para Internet Explorer
Ejemplo de comentario condicional
Añadir un favicon
Añadir scripts
Comprobación y solución de problemas
Comprobación
Servicios de comprobación de navegador en la Web
Construir un suite de comprobación de guerrilla
Soporte clasificado de navegador
Resolución de problemas
Validar, validar, validar
Apendrer a deleterear
Adoptar una paleta refulgente
Comprobar repeticiones
Reducir para deducir
Reglas de XHTML
Resumen
Ejercicio: Vincular a hojas de estilo externas
14. ¿Desde aquí hacia dónde?
Pero realmente ¿desde aquí hacia dónde?
Bibliotecas de JavaScript
Sitios basados en bases de datos
Aplicaciones AJAX y Rich Internet
www.webstandaristas.com
El periódico de los estandaristas Web
Consultas a libros
Recursos
Herramientas
Sellos, insignias, distintivos.
Té
Herramientas para hacerle la vida más fácil
Add-on Web Developer de Firefox
Firebug
Herramientas para otros navegadores
Basecamp
¿Qué más encontramos por ahí?
Libros recomendados
Bulletproof Web Design
CSS Artistry
The Zen of CSS Design
CSS Mastery
HTML Mastery
Otros libros que recomendamos
Sitios recomendados
Organizaciones y publicaciones
W3C
Web Standards Project
A List Apart
Revista Web digital
Diseño e inspiración
Design Observer
The Elements of Typographic Style Applied to the Web
Stylegala
CSS Zen Garden
Accesibilidad
456 Berea Street
Dive Into Accesibility
Joe Clark
North Temple Journal of Design
Gente
Dan Cederhom
John Gruber
John Hicks
Jeffrey Zeldman
Despedida
Resumen
Ejercicio: Se ha ganado los distin alfabético