DOMINGUEZ MINGUEZ
1.INTRODUCCIÓN 11.1
1.1 Qué es HTML 1
1.2 Qué es CSS 2
2. ESTRUCTURA DE UNA PÁGINA WEB 7
2.1 Elementos HTML 7
2.2 Su primera página web 10
2.3 Etiquetas básicas de la cabecera 15
2.3.1 Metadatos 16
2.3.2 Título del documento17
2.3.3 Recursos externos 18
2.4 Etiquetas básicas del cuerpo 24
2.4.1 Texto 25
2.4.1.1 Encabezados y párrafos 25
2.4.1.2 Formato 31
2.4.1.3 Entidades HTML 33
2.4.1.4 Citas 37
2.4.2 Imágenes 39
2.4.3 Audio y vídeo 44
2.4.4 Hipervínculos 49
2.4.4.1 Enlaces a páginas de otros servidores web 50
2.4.4.2 Enlaces a páginas locales 3
2.4.4.3 Enlaces a secciones de una misma página 56
2.4.4.4 Enlaces a servicios y aplicaciones 9
2.4.5 Listas 60
2.4.6 Contenedores 62
2.4.6.1 Contenedores semánticos 63
2.4.6.2 Contenedores genéricos 71
3. APARIENCIA DE UNA PÁGINA WEB 77
3.1 Formas de aplicar un estilo 78
3.1.1 Estilos en línea 78
3.1.2 Reglas de estilo 81
3.1.2.1 Selector de etiqueta 83
3.1.2.2 Selector de identificador 84
3.1.2.3 Selector de clase 86
3.1.2.4 Selectores compuestos 89
3.1.3 Hojas de estilo 93
3.2 Colores 95
3.2.1 Espacios de color 97
3.2.2 Transparencias102
3.3 El modelo de caja 104
3.3.1 Ancho y alto del contenido 106
3.3.1.1 Desbordamiento 111
3.3.1.2 Valores máximos y mínimos114
3.3.2 Márgenes 116
3.3.3 Bordes121
3.3.4 Box sizing 136
3.4 Textos 139
3.4.1 Fuente 140
3.4.2 Tamaño 142
3.4.3 Alineación 145
3.4.4 Espaciado 147
3.4.5 Formato150
3.5 Hipervínculos 155
3.6 Listas 158
3.7 Imágenes 164
3.7.1 Dimensiones165
3.7.2 Transparencia 166
3.7.3 Bordes 169
3.7.4 Fondo de pantalla 172
3.8 Sombras 175
3.9 Valores por defecto y heredados 182
4. DISTRIBUCIÓN DE ELEMENTOS EN PANTALLA 185
4.1 Modos de presentación 186
4.1.1 Modos en bloque y en línea 187
4.1.2 Modo de caja flexible 195
4.1.2.1 Distribución de elementos en filas 199
4.1.2.2 Distribución horizontal de elementos 202
4.1.2.3 Distribución vertical de elementos 205
4.2 Elementos flotantes 213
4.2.1 Ordenación de elementos al mismo nivel 213
4.2.2 Ordenación de elementos en varios niveles 221
4.3 Tipos de posicionamiento 231
4.3.1 Posicionamiento relativo 232
4.3.2 Posicionamiento fijo 234
4.3.3 Posicionamiento absoluto 236
4.3.4 Superposición de elementos 241
4.4 Centrado y alineación de elementos 244
4.4.1 Centrado horizontal 245
4.4.2 Centrado vertical 251
4.4.3 Alineación lateral 257
4.5 Reparto del espacio entre elementos 260
4.5.1 Reparto horizontal del espacio 261
4.5.2 Reparto vertical del espacio 263
4.5.3 Reparto combinado del espacio 265
5. PRÁCTICAS DE DESARROLLO DE PÁGINAS WEB 2715.1 Página con un diseño estándar 271
5.1.1 Diseño general 272
5.1.2 Cabecera 275
5.1.3 Barra de navegación 276
5.1.4 Contenido principal 277
5.1.5 Contenido relacionado 278
5.1.6 Pie de página 279
5.2 Página del buscador Google 279
5.2.1 Diseño general 280
5.2.2 Cabecera y barra de navegación 284
5.2.3 Contenido principal 291
5.2.4 Pie de página 297
6. HOSTING WEB 301
6.1 Acceso al servicio 302
6.2 Interfaz de usuario del servicio 308
6.2.1 Gestión de espacios 309
6.2.2 Gestión de archivos 314
6.2.3 Editor web de código 316
6.3 Práctica de uso del servicio 320
7. PÁGINAS WEB ADAPTABLES AL TIPO DE DISPOSITIVO 325
7.1 Unidades de medida relativas 329
7.2 La etiqueta 330
7.3 La regla @media 334
8. ANEXO. CÓDIGO COMPLETO DE LAS PRÁCTICAS
DE DESARROLLO DE PÁGINAS WEB 341
8.1 Página con un diseño estándar 341
8.1.1 Código HTML 341
8.1.2 Código CSS 343
8.2 Página del buscador Google 345
8.2.1 Código HTML 345
En el mundo actual resulta casi impensable vivir al margen de Internet. Desde una simple búsqueda, pasando por la consulta de las últimas novedades en redes sociales, hasta la realización de gestiones o compras online, siempre hay algún motivo para conectarse. En la mayoría de estos casos, lo que está haciendo es realizar una petición a un servidor que devuelve como resultado una página web con la información solicitada. Quizás piense que el desarrollo de estas páginas sea algo complejo, solo al alcance de especialistas con conocimientos de programación. Pero nada más lejos de la realidad, porque para crear páginas web no es necesario ser un experto en este campo. Únicamente deberá saber lo imprescindible de HTML y CSS. En este libro aprenderá a desarrollar sus propias páginas web sin conocimientos previos, desde cómo estructurar la información con HTML hasta cómo darle el aspecto deseado con CSS. Incluso tendrá ocasión de utilizar un servicio de hosting web que le permitirá acceder a ellas desde cualquier dispositivo en cualquier lugar. Si ya tiene conocimientos básicos de ambos lenguajes, este libro también le será de gran ayuda, ya que no se centra en la descripción de un conjunto de etiquetas HTML y propiedades CSS, sino en la manera de organizar en pantalla los elementos de una página según el diseño gráfico establecido. Por ese motivo, se hace un énfasis especial en los diversos modos de presentación, en los distintos tipos de posicionamiento y en la distribución de los espacios que componen las diferentes secciones de una página. Por último, se hace particular hincapié en la adaptación de contenidos a todo tipo de dispositivos, imprescindible si quiere que una misma página se vea correctamente en la pantalla de un ordenador, una tableta o un teléfono móvil. Además del capítulo exclusivo de prácticas que se presenta en el libro, todos los conceptos se describen con ejemplos explicados línea a línea, lo que hará que experimente el efecto de las técnicas aplicadas en cada uno de ellos. Tomás Domínguez es ingeniero de telecomunicación y doctorado en inteligencia artificial. Su labor profesional se ha desarrollado en una multinacional de telecomunicaciones, donde ha ocupado diversos cargos relacionados con la tecnología. Asimismo, ha ejercido como profesor universitario de ingeniería informática en la Universidad Alfonso X el Sabio de Madrid.
