Curso Completo de HTML.pdf

(6307 KB) Pobierz
9580916 UNPDF
Curso completo de HTML
por Jorge Ferrer
por Víctor García
por Rodrigo García
Curso completo de HTML
por Jorge Ferrer
por Víctor García
por Rodrigo García
Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo en una
guía didáctica para aprender a hacer páginas web. No se requieren más que conocimientos básicos de informática
para llevarlo a cabo y se cubren desde los aspectos más básicos de HTML hasta los más avanzados. Todo ello
resaltando en todo momento las partes más importantes de este lenguaje y la mejor forma de emplearlo. Esperamos
que lo disfrutes.
Copyright Jorge Ferrer, Rodrigo Garcia y Victor García. Se otorga permiso para copiar, distribuir y/o modificar este documento bajo
los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra versión posterior publicada por la Free Software
Foundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html
Para obtener la última versión de este documento, informar de fallos que hayas encontrado o colaborar a su mejora visita
http://freek.jorgeferrer.com.
9580916.002.png
 
Tabla de contenidos
Introducción al lenguaje HTML ................................................................ 1
Introducción ............................................................................ 1
Características del lenguaje HTML ................................................... 2
Qué se necesita para crear una página web ............................................ 2
Algunas razones para usar HTML .................................................... 5
HTML es un lenguaje descriptivo .................................................... 6
Las bases de HTML ................................................................ 8
Primeros pasos con HTML .............................................................. 10
Estructura de una página ........................................................... 11
Los encabezados .................................................................. 15
El ejemplo mejorado .............................................................. 18
Conclusión ............................................................................ 20
La primera página Web ....................................................................... 21
Párrafos en HTML ...................................................................... 21
Saltos de línea .................................................................... 22
Cómo se insertan párrafos .......................................................... 22
Líneas horizontales para separar párrafos ............................................ 26
La etiqueta <blockquote>... </blockquote> ......................................... 28
La etiqueta <address>... </address> ................................................ 29
La etiqueta <center>... </center> .................................................. 30
Cómo insertar imágenes en una página. ................................................... 31
Cómo crear enlaces hipertexto. .......................................................... 32
La etiqueta <a>... </a> ........................................................... 33
Páginas en otros directorios ........................................................ 34
Enlaces externos .................................................................. 34
PRÁCTICA 1: La página web de "La chistera" ............................................ 36
La propuesta ...................................................................... 36
La solución ....................................................................... 40
Anclas ................................................................................ 41
¿Qué es un ancla? ................................................................. 41
Creando anclas ................................................................... 42
Enlaces a anclas de otras páginas ................................................... 47
Uso de enlace y ancla en la misma etiqueta ........................................... 49
El atributo ’title’ .................................................................. 50
Los atributos ’rel’ y ’rev’ ........................................................... 51
Formato de texto y Caracteres especiales ....................................................... 53
Formato de texto ....................................................................... 53
Etiquetas de estilo físico ........................................................... 53
Etiquetas de estilo lógico ........................................................... 59
La etiqueta FONT. ...................................................................... 63
Cambiando el tamaño del texto. .................................................... 63
Cambiando el color del texto ....................................................... 68
Texto preformateado. ................................................................... 69
Uso de otras etiquetas dentro de <PRE>...</PRE> ................................... 72
Acentos y otros caracteres especiales ..................................................... 72
Entidades de caracteres para caracteres españoles ..................................... 73
Entidades de caracteres para caracteres reservados .................................... 74
Otras entidades de caracteres ....................................................... 75
Listas y Comentarios en HTML ............................................................... 77
Listas en HTML ........................................................................ 77
Etiquetas necesarias para crear listas ................................................ 79
iii
Curso completo de HTML
Listas no ordenadas ............................................................... 80
Listas ordenadas .................................................................. 82
Listas de glosario ................................................................. 85
Directorios y menús ............................................................... 87
Anidamiento de listas .............................................................. 89
Comentarios en HTML .................................................................. 92
Creación de comentarios en HTML ................................................. 93
Práctica 2: Un sitio web completo. ....................................................... 94
Planificación ...................................................................... 95
Secciones de la página ............................................................. 95
Diseño gráfico .................................................................... 99
Programación en HTML ........................................................... 99
Imágenes y color en el WWW ................................................................ 103
Usando color en el WWW. ............................................................ 105
Cómo cambiar la apariencia de una página. ............................................. 107
Color de fondo. ................................................................ 107
Color del texto y Links. ......................................................... 108
Imágenes de fondo: ............................................................. 110
Imágenes en las páginas Web. ......................................................... 114
Insertando Imágenes. ........................................................... 114
Imágenes y texto. ............................................................... 115
Alineamiento de imágenes. ...................................................... 119
Texto que envuelve a las imágenes o alineamiento horizontal. ....................... 123
Como terminar el texto envolvente. ............................................... 126
Márgenes alrededor de las imágenes. ............................................. 128
Imágenes enlace. ............................................................... 129
Cómo cambiar la apariencia de las imágenes ............................................. 130
Borde de las imágenes ............................................................ 130
Modificando el tamaño de las imágenes ............................................ 133
Alternativas a las imágenes inline ....................................................... 137
El atributo ALT .................................................................. 137
Imágenes externas ................................................................ 140
Imágenes mapa .................................................................. 145
Mejoras en las imágenes ............................................................... 150
Formatos GIF y JPEG ............................................................ 150
Transparencia, Entrelazado y GIFs animados ....................................... 153
Creación de tablas HTML ................................................................... 157
Cómo se crea una tabla ................................................................. 159
Borde de las tablas ............................................................... 164
Insertar un título para la tabla ...................................................... 170
Tamaño de las tablas ............................................................. 173
Ejercicio 7.1 ..................................................................... 174
Alineamiento de tablas ................................................................. 174
Alineamiento de celdas y filas .......................................................... 177
Ancho de tablas y celdas ............................................................... 180
Tamaño de las celdas ............................................................. 181
EJERCICIO 7-2 ................................................................. 181
El atributo NOWRAP ............................................................ 185
Celdas que abarcan varias filas o columnas ............................................... 187
Márgenes y separación de celdas ........................................................ 188
Ejercicio 7.3 ..................................................................... 190
Conclusión ...................................................................... 191
Anidamiento .......................................................................... 191
iv
9580916.003.png
 
Curso completo de HTML
Práctica 3 - Tabla de Datos. ............................................................ 194
Paso 1. ......................................................................... 196
Paso 2. ......................................................................... 197
Paso 3. ......................................................................... 197
Paso 4. ......................................................................... 198
Paso 5. ......................................................................... 200
Práctica 4 - Página Web con una estructura creada con tablas. .............................. 202
Paso 1 - Planificación. ............................................................ 203
Paso 2 - Código básico. .......................................................... 208
Paso 3 - Estructura de la página principal. .......................................... 209
Paso 4 - Estructura del resto de páginas. ............................................ 211
Paso 5 - Contenido de la página principal. .......................................... 212
Paso 6 - Contenido gráfico. ....................................................... 215
Paso 7 - Cambiar el fondo y color del texto. ........................................ 219
Paso 8 - Realización del resto de las páginas. ....................................... 222
Paso 9 - Retoques, pruebas, revisión y mantenimiento. ............................... 224
HTML avanzado ............................................................................ 225
Estándares y extensiones del lenguaje HTML ............................................. 227
El estándar HTML 2.0 ............................................................ 230
El estándar HTML 3.2 ............................................................ 232
HTML 4.0 y XHTML ............................................................ 235
El futuro de HTML .............................................................. 237
Conclusiones .................................................................... 237
Extensiones a las listas ................................................................. 241
Listas no ordenadas .............................................................. 241
Listas ordenadas ................................................................. 245
Alineamiento ......................................................................... 249
La etiqueta META ..................................................................... 253
Carga automática de páginas ...................................................... 253
Información para los buscadores ................................................... 253
Otros usos ....................................................................... 255
Otras etiquetas del lenguaje HTML 3.2 .................................................. 255
Descriptor de tipo de documento ................................................... 255
Otras etiquetas ................................................................... 256
Frames, las ventanas llegan al WWW ......................................................... 257
El atributo TARGET ................................................................... 261
La etiqueta BASE ..................................................................... 265
Creación de páginas con frames ......................................................... 269
Creación del documento de definición de frames .......................................... 270
División en columnas ............................................................. 271
División en filas ................................................................. 276
Combinando COLS y ROWS ...................................................... 276
La etiqueta FRAME .............................................................. 278
Página completa con frames ............................................................ 279
Atributos de la etiqueta FRAME ........................................................ 282
Compatibilidad: NOFRAME ........................................................... 284
Anidamiento de framesets .............................................................. 287
Bordes de los frames ................................................................... 292
Cambiando el color del borde ..................................................... 292
Como quitar el borde ............................................................. 295
Grosor del borde ................................................................. 297
Valores especiales del atributo TARGET ................................................. 299
Ejercicio con TARGET ........................................................... 301
v
9580916.001.png
 
Zgłoś jeśli naruszono regulamin