Curso prctico avanzado
Publicaciones Altaria
HTML & CSS
HTML & CSS: Curso prctico avanzado
Sergio Lujn Mora
De la edicin: PUBLICACIONES ALTARIA, S.L.
Se ha puesto el mximo inters en ofrecer al lector una informacin completa y precisa.
No obstante, PUBLICACIONES ALTARIA, S.L. no asume ninguna responsabilidad
derivada del uso, ni tampoco por cualquier violacin de patentes y otros derechos de
terceros que pudieran ocurrir mientras este libro est destinado a la utilizacin de aficionados o a la enseanza. Las marcas o nombres mencionados son nicamente a ttulo
informativo y son propiedad de sus registros legales.
Reservados todos los derechos.
Ninguna parte de este libro puede ser reproducida, registrada en sistema
de almacenamiento o transmitida de ninguna forma ni por cualquier
procedimiento, ya sea electrnico, mecnico, reprogrfico, magntico
o cualquier otro. Queda tambin prohibida la distribucin, alquiler,
traduccin o exportacin sin la autorizacin previa y por escrito de
PUBLICACIONES ALTARIA, S.L.
ISBN: 978-84-944049-4-8
Depsito legal: T 1139-2015
Revisado por: Marta Gimnez, Mariam Msaoury y Jordi Nicols Soler
Impreso en Espaa - Printed in Spain
Editado por:
PUBLICACIONES ALTARIA, S.L.
C/ Enric dOss, 2
43005 - Tarragona
email: info@[Link]
CONSULTE NUESTRO CATLOGO POR INTERNET:
[Link]
Podr estar al corriente de todas las novedades.
Publicaciones Altaria
Curso prctico avanzado
HTML
&
CSS
CURSO PRCTICO
Este libro dispone de un sitio web en el que se encuentra el cdigo
fuente de los ejemplos desarrollados. La URL del mismo es:
[Link]
Publicaciones Altaria
HTML & CSS
Publicaciones Altaria
Curso prctico avanzado
ndice general
Captulo 1
Prembulo....................................................................... 13
Introduccin...................................................................... 13
Para quin es este libro?............................................... 14
El desarrollo de las pginas web...................................... 16
Estructura del libro........................................................... 16
Convenciones tipogrficas............................................... 17
Sitio web del libro............................................................. 20
Sugerencias y errores...................................................... 20
PARTE I
CONCEPTOS GENERALES..............21
Captulo 2
Estructura de un sitio web........................................... 23
Qu es un sitio web.......................................................... 24
Contenido de un sitio web................................................ 28
Estructura fsica................................................................ 32
Las URL............................................................................................35
Nombres de los directorios y de los ficheros....................................38
Las URL amigables.......................................................... 39
Tipos de direcciones.........................................................................41
Estructura lgica............................................................... 43
Estructura secuencial........................................................................44
Estructura en rejilla...........................................................................47
Estructura en rbol............................................................................48
Estructura en red..............................................................................50
Estructura mixta................................................................................50
Comparativa......................................................................................51
Cmo no perderse en la estructura de un sitio web.........................52
Consejos.......................................................................... 60
Publicaciones Altaria
HTML & CSS
Prlogo
Captulo 3
Los estndares web....................................................... 63
Los estndares................................................................. 64
1
El World
Wide
Web
Consortium.......................................
66
por
Ignacio
Mazo
Redondo
El juego de caracteres......................................................................69
Fuentes de informacin.................................................... 72
Microsoft Developer Network............................................................72
Corra el ao 1991 o 1992 cuando escuch por primera vez la expresin que
Mozilla Developer Network...............................................................74
daW3Schools.
ttulo al .libro.
Fue la persona que me introdujo en el apasionante mundo
......................................................................................76
de la gestin de recursos humanos, dejadme utilizar el trmino en su acepcin
habitual, quien utiliz la expresin, en el marco de una de las conversaciones
que tuvimos cuando intentaba convencerme de que tena un perfil adecuado
para dedicarme a esta actividad. Su nombre Luis Illueca, podramos decir que
fue mi maestro.
PARTE II
HTML.
..................................................79
Jos Luis Pascual, fue unos aos ms tarde alumno de Luis. Tambin alumno
mo. Un alumno muy despierto que como tal intuy que esa expresin no era
casual ni afortunada, sino que encerraba una especie de filosofa, un punto
de referencia4que permita hacernos entender en qu consiste exactamente la
Captulo
gestin de recursos humanos en las organizaciones. Y no slo lo entendi, sino
El
lenguaje de marcado de hipertexto....................... 81
que ha sido capaz de desarrollarlo en este libro.
Introduccin...................................................................... 82
Evolucin
de HTML..........................................................
82 las relaciones
Desde
el principio
el libro reconoce que su objetivo es desbrozar
entre
[Link]
y las personas, ponindolas en el mismo plano
HTML5.
............................................................................
88 porque nin-
Porde
qu
se pueden
seguir empleando
caractersticas
guna
ellas
puede estarlo.
Las empresas
no pueden existir sin personas, pero
obsoletas
en
las
pginas
web?.
.
.......................................................91
un grupo de personas sin objetivos comunes y sin mecanismos para ordenar
Diferencias
entre
HTML
XHTML....................................
92
las tareas y para
tomar
lasydecisiones,
tampoco es una empresa.
Qu recursos necesito para escribir HTML...................... 96
Coincido con el autor en la importancia de reflexionar sobre el papel de la
Conceptos bsicos de HTML........................................... 99
gestin de recursos humanos en la empresa y tambin en la importancia de
Estructura
de una
pgina
web..estar
......................................
hacer autocrtica.
Algo
debemos
haciendo mal cuando104
es algo muy poco
Variantes
de
XHTML
1.0................................................
109 de su carrera
frecuente que un profesional, que ha desarrollado toda o parte
Cmo
una pgina
110
en esta escribir
funcin, texto
llegueen
a hacerse
cargoweb.........................
de la primera responsabilidad
ejecutiva
Cmo
quea una
webenest
de una comprobar
empresa. Pese
que pgina
ha habido
los ltimos aos un nmero muy
bien
escrita.....................................................................
113 desde hace
elevado
de investigaciones sobre el futuro de la funcin, incluso
cincoqu
o seis
se viene escribir
repitiendo
una investigacin
a nivel118
europeo y a nivel
Por
esaos
importante
cdigo
correcto..............
global sobre especiales
los retos de ylasecuencias
funcin; pese
que se han propuesto
Caracteres
deaescape............
125 modelos de
referencia, algunos
deolos
estn mencionados en el texto;
Elementos
en lnea
encuales
bloque.....................................
128 pese a ello, no
tengo la sensacin
de que los profesionales de la gestin de 128
recursos humanos
Metadatos.
......................................................................
hayamos
sido
de avanzar mucho.
Novedades
encapaces
HTML5....................................................................132
Desde mi punto de vista, uno de los elementos en los que tenemos que seguir
esforzndonos es en el conocimiento del negocio. Me refiero al conocimiento
Publicaciones Altaria
Curso prctico avanzado
Captulo 5
La estructura de la pgina.......................................... 135
Encabezados de seccin............................................... 136
Nuevos elementos de HTML5........................................ 138
Captulo 6
El texto........................................................................... 151
Semntica del texto........................................................ 152
Edicin............................................................................ 158
Semntica de bloques de texto...................................... 160
Lneas horizontales........................................................ 163
Captulo 7
Enlaces........................................................................... 165
El hipertexto................................................................... 165
Enlace a un punto del mismo documento.......................................167
Enlace a otro documento................................................................173
Enlace a un punto de otro documento............................................175
Apertura de un enlace en una ventana nueva................................177
Evitar que un buscador siga un enlace...........................................178
Envo de un correo electrnico.......................................................179
Captulo 8
Listas.............................................................................. 183
Tipos de listas................................................................. 183
Listas de definicin......................................................... 184
Listas ordenadas............................................................ 186
Listas no ordenadas....................................................... 187
Captulo 9
Tablas............................................................................. 191
Tablas ........................................................................... 191
Unin de filas y columnas.............................................. 198
Publicaciones Altaria
HTML & CSS
Tablas invisibles............................................................. 200
Alineamiento del contenido de una tabla....................... 203
Distancia entre celdas.................................................... 207
Captulo 10
Imgenes....................................................................... 211
Formatos de imagen...................................................... 212
El formato GIF.................................................................................213
El formato JPEG.............................................................................216
El formato PNG...............................................................................220
Cmo insertar una imagen en una pgina web.............. 223
El atributo alt...................................................................................224
El atributo longdesc........................................................................225
Imgenes como fondo de una pgina............................ 228
Novedades en HTML5................................................... 228
La etiqueta <figure>........................................................................228
La etiqueta <canvas>......................................................................231
SVG................................................................................................233
Captulo 11
Formularios.................................................................. 241
Los formularios............................................................... 241
Controles tradicionales de un formulario........................ 243
Campos de texto y de contrasea..................................................248
Campos de verificacin...................................................................250
Campos excluyentes.......................................................................250
Envo de ficheros............................................................................250
Campos ocultos..............................................................................253
Listas de seleccin..........................................................................254
reas de texto.................................................................................257
Etiquetas de campos......................................................................259
Eventos...........................................................................................261
Novedades en HTML5................................................... 263
Alineamiento de formularios........................................... 272
Publicaciones Altaria
Curso prctico avanzado
Captulo 12
Multimedia................................................................... 283
Vdeo.............................................................................. 283
Audio.............................................................................. 290
PARTE III
CSS...........................................295
Captulo 13
Las hojas de estilo en cascada................................... 297
Evolucin de CSS.......................................................... 298
Separacin del contenido y la presentacin................... 302
Conceptos bsicos de CSS............................................ 306
Cmo aplicar los estilos................................................. 307
Comentarios....................................................................................313
Estilos para diferentes dispositivos.................................................314
Estilos alternativos..........................................................................317
Estilos persistente, preferido y alternativo......................................320
Cmo validar una hoja de estilo en cascada.................. 320
Lenguaje de estilo por defecto........................................................324
Compatibilidad con los navegadores............................. 329
Captulo 14
El color........................................................................... 337
Introduccin.................................................................... 337
Nombres bsicos de colores.......................................... 338
Nombres extendidos de colores..................................... 339
Cdigo hexadecimal....................................................... 339
Cdigo RGB decimal o en porcentaje............................ 340
Cdigo RGBA decimal o en porcentaje.......................... 341
Cdigo HSL.................................................................... 342
Cdigo HSLA.................................................................. 343
Publicaciones Altaria
HTML & CSS
Captulo 15
Selectores, unidades y funciones............................. 345
Selectores...................................................................... 345
Selectores en CSS3....................................................... 351
Unidades de medida...................................................... 354
Funciones....................................................................... 355
Elementos en lnea o en bloque..................................... 357
Recomendaciones para escribir una hoja de
estilo correcta................................................................. 361
Captulo 16
El texto........................................................................... 365
La propiedad font........................................................... 366
Tipos de letra de reserva................................................................370
Uso de cualquier tipo de letra.........................................................371
Propiedades del texto..................................................... 376
Sangra........................................................................... 377
Alineacin....................................................................... 379
Decoracin..................................................................... 382
Sombra........................................................................... 383
Cambio de minsculas y maysculas............................ 389
Espaciado de letras, palabras y lneas........................... 392
Espacios en blanco........................................................ 394
Captulo 17
Tablas............................................................................. 399
Los antiguos atributos de la tabla................................... 399
El ttulo de la tabla.......................................................... 403
Estilo cebra..................................................................... 405
10
Publicaciones Altaria
Curso prctico avanzado
Captulo 18
Transformaciones........................................................ 409
Introduccin.................................................................... 409
Escalar........................................................................... 410
Rotar............................................................................... 412
Sesgar............................................................................ 413
Trasladar........................................................................ 415
Varias transformaciones a la vez.................................... 415
Captulo 19
Transiciones................................................................. 417
Introduccin.................................................................... 417
Propiedades que pueden ser animadas......................... 419
Funciones de intervalos de transicin............................ 422
Captulo 20
Diseo........................................................................... 427
Maquetacin de una pgina web................................... 428
El modelo de caja........................................................... 430
El relleno.........................................................................................434
El borde...........................................................................................435
Ancho del borde.......................................................................................................436
Estilo del borde........................................................................................................437
Color del borde........................................................................................................440
Propiedades resumidas del borde...........................................................................444
El margen........................................................................................446
El contorno...............................................................................................................450
Posicionamiento............................................................. 452
Estilos de diseos.......................................................... 457
Diseo fijo....................................................................... 458
Diseo lquido o fluido.....................................................................462
Diseo elstico................................................................................468
Diseo hbrido.................................................................................473
Diseo adaptativo o adaptable.......................................................477
Separacin de la presentacin y la maquetacin........... 483
Publicaciones Altaria
11
HTML & CSS
12
Publicaciones Altaria
