Embed or link this publication
Popular Pages
p. 2
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.[close]
p. 3
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
[close]
p. 4
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[close]
p. 5
curso completo de html práctica 3 tabla de datos paso 1 paso 2 paso 3 paso 4 paso 5 práctica 4 página web con una estructura creada con tablas paso 1 planificación paso 2 código básico paso 3 estructura de la página principal paso 4 estructura del resto de páginas paso 5 contenido de la página principal paso 6 contenido gráfico paso 7 cambiar el fondo y color del texto paso 8 realización del resto de las páginas paso 9 retoques pruebas revisión y mantenimiento html avanzado estándares y extensiones del lenguaje html el estándar html 2.0 el estándar html 3.2 html 4.0 y xhtml el futuro de html conclusiones extensiones a las listas listas no ordenadas listas ordenadas alineamiento la etiqueta meta carga automática de páginas información para los buscadores otros usos otras etiquetas del lenguaje html 3.2 descriptor de tipo de documento otras etiquetas frames las ventanas llegan al www el atributo target la etiqueta base creación de páginas con frames creación del documento de definición de frames división en columnas división en filas combinando cols y rows la etiqueta frame página completa con frames atributos de la etiqueta frame compatibilidad noframe anidamiento de framesets bordes de los frames cambiando el color del borde como quitar el borde grosor del borde valores especiales del atributo target ejercicio con target 194 196 197 197 198 200 202 203 208 209 211 212 215 219 222 224 225 227 230 232 235 237 237 241 241 245 249 253 253 253 255 255 255 256 257 261 265 269 270 271 276 276 278 279 282 284 287 292 292 295 297 299 301 v[close]
p. 6
curso completo de html práctica 5 web de los alpes con frames documento de definición de frames el frame banner frame principal Últimos retoques frames flotantes atributos de los frames flotantes vídeos sonido y multimedia sonido vídeo y otros ficheros externos ficheros de sonido ficheros de vídeo otros tipos de archivos multimedia inline vídeo inline el atributo lowsrc sonidos inline marquesinas animadas texto que parpadea controles multimedia plug-ins y objetos incrustados como usar los plug-ins alternativas para navegadores sin soporte para plug-ins sonido inline con la etiqueta embed applets de java y controles activex java en las páginas web inserción de applets java especificando la dirección del applet otros atributos de la etiqueta applet la etiqueta param alternativas a los applets java el nuevo estándar la etiqueta object inserción de un applet java activex la tecnología del futuro inserción de un control activex formularios formularios en html controles de formularios cajas de texto cajas de texto para claves botones de elección cajas de selección imágenes botón de borrado botón genérico campos ocultos los formularios vistos desde lynx innovaciones de microsoft otros controles cajas de texto multilínea textarea cuadros de selección prÁctica 6-formulario para los alpes como usar los datos de un formulario formularios sin cgis 302 303 306 309 310 312 313 319 319 322 324 326 328 328 329 331 333 337 337 339 342 342 344 347 347 350 352 353 356 357 361 362 363 366 371 371 379 380 383 385 388 390 395 399 402 403 404 408 408 412 418 427 427 vi[close]
p. 8
lista de figuras 1.1 aunque al principio el texto predominaba en el www en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto kde 1 1.2 un editor de texto simple como el block de notas de windows es todo lo necesario para crear una página web 3 1.3 algunos editores wysiwyg permiten además modificar el código html directamente 4 1.4 los navegadores en modo texto como lynx también pueden mostrar páginas web gracias al carácter descriptivo de html 6 1.5 uso básico de una etiqueta html sin ningún tipo de parámetros ejemplo usando la etiqueta[close]
p. 9
curso completo de html 2.17 con el atributo title podemos incluir información adicional sobre el link explorer mostrará esta información con un bocadillo 50 3.1 con el tipo de letra times new roman no todas las letras ocupan lo mismo 53 3.2 con el tipo de letra courier todas las letras ocupan lo mismo monoespaciadas 55 3.3 los navegadores gráficos como explorer pueden mostrar perfectamente todos los tipos de estilos lógicos como vemos en esta figura 56 3.4 el navegador lynx sólo puede mostrar texto y usa los medios a su alcance para formatear el texto que debería ser negrita cursiva 58 3.5 en esta figura observamos los estilos lógicos con explorer la gran mayoría de ellos son mostrados como letra en negrita o cursiva 61 3.6 usando estilos lógicos no se nota tanto la diferencia entre explorer y lynx aunque los medios de este sean más limitados 62 3.7 ejemplo de uso de la etiqueta font y su atributo size para cambiar el tamaño del texto 64 3.7 ejemplo de uso de la etiqueta font y su atributo size para cambiar el tamaño del texto 65 3.8 los tamaños del texto que hallamos modificado usando el método relativo se calcularán a partir del al tamaño por defecto del texto normal pero sin pasar nunca de 7 67 3.9 gracias a la etiqueta font y a su atributo color nuestras páginas tomarán un colorido totalmente diferente 69 3.10 como se puede ver se pueden crear firmas muy originales usando únicamente caracteres y sin necesidad de imágenes 70 3.11 si no usamos la etiqueta de texto preformateado la figura construida con caracteres se convertirá en algo ilegible 70 3.12 una entidad de caracter con nombre tiene tres partes nombre 72 3.13 una entidad de caracter numérica tiene cuatro partes número 73 3.1 entidades de caracteres numéricas y nominales para caracteres acentuados u con diéresis y eñe 73 3.2 entidades de caracter numéricas y nominales para caracteres reservados del lenguaje html 74 3.3 entidades de caracteres numéricas y nominales para algunos caracteres especiales de uso común 75 4.1 en esta figura podemos apreciar la presentación de la segunda práctica del curso que realizaremos al final del capítulo 77 4.2 como aperitivo mostramos una lista no numerada en la que ya se pueden apreciar las características fundamentales que tienen en html 79 4.3 los elementos de las listas no numeradas van precedidos de una viñeta en explorer esta viñeta es habitualmente un punto grande 81 4.4 lista no ordenada en lynx cada uno de los elementos de lista comienza con un asterisco simulando a los símbolos gráfico que usan netscape o explorer 81 4.5 en las listas ordenadas cada uno de los elementos de lista aparecen numerados y sangrados hacia la derecha 82 4.6 cuando insertamos un nuevo elemento de lista en una lista ordenada los elementos siguientes son automáticamente renumerados 83 4.7 en el caso de las listas numeradas la diferencia entre la visualización con lynx y con explorer es menor 84 4.8 las listas de glosario constan de dos partes la palabra de definición y la propia de definición que es mostrada como un nuevo párrafo con sangrado 85 4.9 listas de glosario en lynx de nuevo las diferencias respecto a la visualización con explorer son escasas 86 4.10 en explorer las listas de menú menu y de directorio dir son mostradas de igual manera que las listas no numeradas ul 88 4.11 en lynx las listas de menú y de directorio son mostradas simplemente insertando cada elemento de lista en una nueva línea 88 4.12 gracias al anidamiento podemos crear listas muy complejas en html el segundo nivel de lista no numerada usa una viñeta distinta 90 4.13 comparando esta figura con la 4.8 podemos ver las ligeras diferencias que existen en los distintos tipos de listas entre netscape y explorer 91 ix[close]
p. 10
curso completo de html 4.14 al mostrar la página los navegadores actúan como si los comentarios no existieran como vemos explorer permite comentarios multilínea y con etiquetas dentro 93 4.15 pantalla de presentación de la segunda página web de nuestro website es importante mantener un parecido entre todas las páginas que lo componen 96 4.16 en la sección los alpes 20 años a su servicio podemos apreciar el uso de la etiqueta blockquote y de una lista no ordenada 97 4.17 logo de los alpes 99 4.18 letrero de los alpes que junto con el logo aparecerá en todas las páginas del sitio web 99 5.1 aprovechando las capacidades del html para incluir colores e imágenes en un web podemos conseguir resultados tan atractivos como el que observamos en el web de disney 103 tabla 5.1 colores usados más frecuentemente 105 5.2 el lenguaje html nos permite cambiar el color de fondo de nuestras páginas podemos indicar el color por su nombre en inglés o con su número rgb 108 5.3 también podemos cambiar el color del texto de los enlaces de los enlaces visitados y de los enlaces activos a nuestro gusto igual que hacíamos con el fondo 109 5.4 para crear un mayor impacto visual podemos usar como fondo una imagen esta imagen se replicará es puesta en mosaico por toda la página luego los bordes deben coincidir 111 5.5 en esta ocasión la imagen de fondo es un logo sobre un fondo de color sólido gris esta es una manera sencilla para que no se noten los bordes cuando el navegador la pone en mosaico 111 5.6 esta es la imagen usada como fondo en la página de la figura 5.4 como vemos es de pequeño tamaño pero al coincidir sus bordes simula una imagen que ocupa toda la pantalla 112 5.7 también podemos poner fotos como fondo de la página pero hay que tener cuidado porque los bordes no encajan y además la página queda demasiado sobrecargada 113 5.8 podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera en cuyo caso queda en la línea superior 115 5.9 como veíamos en el fascículo 2 fig 2.9 cuando la imagen es pequeña puede entremezclarse con el texto sin problema 117 5.10 cuando la imagen es grande al insertarla en una línea de texto ésta queda muy separada de la línea anterior en lugar de envolver la imagen 117 5.11 con las técnicas de alineamiento del lenguaje html que estudiamos en este capítulo podemos crear interesantes efectos como texto envolviendo a una imagen 119 5.12 ejemplos de align=top en el primer caso la parte superior de la imagen coincide con la del texto y en el segundo con la parte superior de la imagen azul 120 5.13 ejemplos de align=middle en el primer caso el centro de la imagen coincide con la base del texto en el segundo intenta centrarse con la imagen azul 121 5.14 ejemplos de align=bottom en ambos casos la parte inferior de la imagen se alinea con la base del texto aunque la imagen azul baje por debajo 122 5.15 alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen 124 5.16 usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora ésta se situará a la derecha de la página 125 5.17 usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendo debajo de la imagen 126 5.18 usando los atributos hspace y vspace podemos controlar la separación entre la imágen y el texto que la envuelve 128 5.19 combinando las etiquetas img y a adecuadamente podemos crear imágenes enlace los navegadores indican esto mostrando un borde azul alrededor de estas imágenes 130 5.20 las imágenes enlace tienen un borde azul por defecto pero podemos quitarlo o variar su grosor usando el atributo border de la etiqueta img 131 5.21 las imágenes enlace se usan a menudo para crear iconos de navegación como los que aquí vemos en estos casos es conveniente quitar el borde usando border=0 132 5.22 las imágenes normales también pueden tener un borde de grosor variable aunque en este caso el color no es azul sino negro 132 x[close]
p. 11
curso completo de html 5.23 usando los atributos width y height podemos variar el tamaño de las imágenes si sólo usamos uno la otra dimensión se ajusta para mantener las proporciones 134 5.24 si incluimos junto con la imagen la información de sus dimensiones el navegador podrá reservar espacio para ellas con sólo leer el código 136 5.25 con el atributo alt podemos especificar un texto alternativo a las imágenes en esta figura vemos como lo muestran explorer y netscape 138 5.26 algunos navegadores como explorer muestran el texto de alt como un bocadillo que aparece cuando ponemos el cursor encima de la imagen 139 5.2 extensiones y breve descripción de los principales formatos de imágenes usados en el www 141 5.27 ejemplos de thumnails en el primer caso se muestra un trozo de la imagen y en el segundo la imagen completa reducida el efecto es similar en ambos casos 142 5.28 imagen completa que será mostrada cuando el visitante seleccione los enlaces que acompañan a los thumbnails de la figura 5.27 143 5.29 en la página principal de post-it vemos un excelente ejemplo de la utilidad de las imágenes mapa 145 5.30 en esta figura podemos ver los valores que puede tomar el atributo coords en función de si la zona es rectangular circular o poligonal 148 5.31 imagen mapa que puede sustituir el menu en forma de lista de la página de la agencia de viajes los alpes 150 5.32 mientras que el tamaño de la imagen jpeg es mucho menor la pérdida de calidad apenas es apreciable 151 5.33 en ocasiones especialmente si usamos una imagen como fondo se consigue un efecto mucho mejor haciendo que nuestras imágenes sean transparentes 153 5.34 aspecto final de la página de los alpes después de aplicar los conocimientos sobre imágenes que hemos adquirido en este capítulo 155 7.1 en el web de gnome hispano encontramos multitud de elementos gráficos y texto con una disposición muy cuidada ¿cómo lo hacen con tablas 157 7.2 ya hemos creado nuestra primera tabla aunque es sencilla ya podemos observar varias cosas curiosas en ella por ejemplo que por defecto no se dibujan los bordes 161 7.3 en esta segunda tabla ya podemos ver como son mostrados los encabezados de tabla 163 7.4 tabla con bordes en esta tabla podemos observar lo que ocurre cuando una fila tiene más celdas que otra o cuando insertamos una celda sin nada dentro 165 7.5 tabla con celdas vacías poniendo[close]
p. 12
curso completo de html 7.15 los atributos colspan y rowspan nos permiten crear celdas que se extiendan varias columnas o varias filas 187 7.16 el atributo cellspacing controla el espaciado entre los bordes de cada una de las celdas de la tabla 189 7.17 con el atributo cellpadding podemos aumentar los márgenes entre el contenido de las celdas y su borde 189 7.18 ejercicio 7.3 aunque pueda parecer que hay una sola imagen en realidad hay cuatro cuidadosamente colocadas 190 6.20 las etiquetas anidadas son aquellas que se encuentran entre la instrucción de inicio y la instrucción de fin de otra etiqueta de esta forma conseguimos que los efectos de ambas se sumen 192 6.21 en este ejemplo vemos como anidando una tabla dentro de otra podemos crear interesantes efectos en las páginas web 193 6.22 nuestro objetivo en esta práctica 3 será realizar esta tabla para su realización necesitaremos usar gran parte de los atributos que hemos aprendido 194 6.23 una vez que sabemos como queremos que quede la tabla es muy útil desglosarla en columnas y filas para no liarnos al escribir el código 195 6.24 ya tenemos hecha una parte de la tabla algunas de las celdas se expanden 2 filas 2 columnas o ambas aunque en algún caso todavía no es apreciable 197 6.25 ya tenemos la tabla prácticamente terminada sólo quedan algunos detalles para darla por concluida 199 6.26 los asistente wizard para la creación de tablas como este incluido con el editor de html homesite son de gran ayuda en la creación de tablas complicadas 201 6.27 estructura del sitio web de los alpes la página principal tendrá enlaces a las otras tres que además estarán enlazadas entre sí 203 6.28 boceto de la disposición de los elementos en la página principal y las tablas que vamos a necesitar crear para conseguir esa visualización 204 6.29 boceto de la disposición de los elementos del resto de páginas aunque conserva un parecido con la página principal hay algunos cambios 206 6.30 usando las opciones de cortar y pegar nos ahorraremos el proceso reescribir el código de las prácticas anteriores 208 6.31 la coletilla aporta un toque de profesionalidad a nuestra página además de ofrecer información interesante a los visitantes 210 6.32 página principal de la agencia de viajes los alpes aunque no podemos ver los bordes de las tablas podemos intuir por donde irían 212 6.33 visualización de medida.htm 216 6.34 resultado final de la página mes.htm 219 6.35 resultado final de la página superofe.htm 222 7.1 usando adecuadamente las etiquetas del lenguaje html y con algunos conocimientos de diseño se pueden crear webs tan atractivos como este 225 7.2 en el cern http www.cern.ch un instituto de física con poca relación con internet se engendró la idea del world wide web 227 7.3 el world wide web consortium o w3c fue creado para regular el world wide web esta regulación incluye una estandarización del lenguaje html 230 7.4 tanto microsoft como netscape crearon sitios web especialmente dedicados a programadores de internet en el que informan de las tecnologías propietarias soportadas por sus navegadores 232 7.5 en el servidor web del w3c podemos ver la especificación del nuevo estándar html 4.0 la dirección concreta es http www.w3c/tr/pr-html40 235 7.6 en esta figura vemos un excelente uso de los frames o marcos que dividen la pantalla en cuatro partes para facilitar la navegación 239 7.7 en html 3.2 existen 3 tipos de viñetas para las listas no ordenadas con el atributo type podemos elegir entre ellos 242 7.8 comparando esta figura con la anterior vemos la similitud entre las distintas viñetas de los elementos de las listas usadas por netscape navigator e internet explorer 243 xii[close]
p. 13
curso completo de html 7.9 usando el atributo type en una etiqueta li podemos cambiar la viñeta de un único elemento de lista sin afectar a los demás 244 7.1 los cinco tipos distintos que puede tomar el atributo type para listas ordenadas 245 7.10 con el atributo type podemos elegir entre 5 tipos distintos de numeración en las listas de html en esta figura vemos los 4 nuevos 246 7.11 si usamos el atributo start podemos variar el número o letra en estos casos por los que se empiezan a numerar los elementos de la lista 247 7.12 con el atributo value podemos indicar el valor de la numeración de cada uno de los elementos de las listas numeradas 248 7.13 con la nueva etiqueta div podemos cambiar el alineamiento de todo tipo de elementos html imágenes listas párrafos etc de una sola vez 250 7.14 los buscadores permiten a los navegantes encontrar la información que buscan usando la etiqueta meta podemos proporcionarles datos para que incluyan nuestras páginas en sus bases de datos 253 8.1 los frames nos permiten dividir la ventana del navegador en varias secciones diferentes en este caso la ventana a sido dividida en 4 frames 257 8.2 en el web www.chess.com podemos ver un excelente ejemplo del uso de frames para mantener visibles las barras de navegación 259 8.3 usando el atributo target podremos lograr que pulsando el enlace de un frame el resultado se muestre en otro 261 8.4 este debe ser el resultado final tras llevar a cabo todos los pasos en el ejemplo de uso del atributo target para crear varias ventanas 264 8.5 variando la dirección de base con la etiqueta base variará el significado de las direcciones relativas 267 8.6 en este web pulsando sobre los enlaces del frame izquierdo nos movemos por los diferentes temas del frame derecho 268 8.7 los webs con frames constarán de varios documentos html en este ejemplo al haber tres frames serán necesarios 4 documentos html 270 8.8 la estructura de las páginas con frames es diferente a las que no tienen la principal diferencia es la sustitución de body por frameset 270 8.9 como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20 y del 80 del ancho total de la ventana 272 8.10 las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles la tercera al haber usado el asterisco ocupará el resto que en este ejemplo son 372 pixeles 273 8.11 en esta ocasión vemos un ejemplo del uso de frameset combinando los distintos modos de indicar el tamaño y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho 275 8.12 es posible usar los atributos cols y rows simultáneamente para dividir la ventana en varias filas y columnas 277 8.13 ejemplo completo de una página con frames formado por un frame izquierdo pequeño que puede servir de índice y otro derecho con el contenido principal 281 8.14 usando los diferentes atributos de la etiqueta frame podemos tener un mayor control sobre las diferentes características de los frames 283 8.15 el navegador ncsa mosaic no soporta frames con lo que los usuarios de dicho navegador no verán nada si no usamos la etiqueta noframe 285 8.16 en este caso sí hemos usado noframes ofreciendo al navegante un enlace para ver una versión sin frames de las páginas 286 8.17 para conseguir estructuras de frames más complejas puede anidarse la etiqueta frameset en esta figura se indica cómo hacerlo 287 8.18 nuestra primera página con frames la ventana está dividida en 3 apartados los frames el izquierdo es el índice el superior el título y el central el que tiene el contenido 290 8.19 en general los navegadores dibujan líneas con aspecto 3-d para separar los frames 292 170 con el atributo bordercolor podemos elegir el color que queramos para los bordes de los frames 293 xiii[close]