Introducción al HTML
Descargar como PPT, PDF0 recomendaciones871 vistas
El documento introduce el lenguaje HTML y sus principales etiquetas y estructura. Explica que HTML permite crear páginas web mediante etiquetas de texto, imágenes y enlaces. Las páginas HTML se componen de una cabecera <head> y un cuerpo <body>, y se visualizan en un navegador como Internet Explorer o Firefox.
Introducción al HTML
- 2. 1. Introducción 2. Etiquetas 3. Estructura de una página HTML 4. El color 5. Enlaces 6. Mapa de la web 7. Formateo de textos y párrafos 8. Ver código fuente Indice 2
- 3. 1. Introducción Responde a estas preguntas: •¿Qué es Internet? • ¿Cómo nació Internet? • ¿Qué es www? • ¿Qué servicios ofrece Internet además de WWW? • ¿Qué es HTML? Indice 3
- 4. 1. Introducción Estamos acostumbrados a ver un ordenador como una máquina individual, en la que trabajamos sobre los archivos que tenemos en nuestro disco duro y manejamos algún programa que tenemos instalado. Sin embargo, los ordenadores no sólo pueden trabajar individualmente. También pueden conectarse entre ellos, con lo cual pueden compartir la información. A esto se le denomina “tener los ordenadores en red”, o “red de ordenadores”. Indice 4
- 5. 1. Introducción Internet no es más que un sistema que conecta a multitud de ordenadores en red para que puedan compartir la información. Internet surgió a finales de los 60, desde el departamento de defensa de los Estados Unidos. Indice 5
- 6. 1. Introducción ¿Qué es HTML? HTML son las siglas de Hyper Text Markup Lenguage, lenguaje de Hipertexto, y es el lenguaje de mediante el cual se escriben y diseñan las páginas Web. En realidad es mucho más sencillo de lo que parece, porque se escribe como si fuera un documento de texto y es suficiente con un procesador/editor de textos (por ejemplo el Bloc de Notas de Windows) para poder realizar el trabajo. Indice 6
- 7. 1. Introducción Un documento HTML es simplemente un documento de texto que contiene algunas instrucciones sobre cómo se representarán los elementos. El HTML permite incluir en el diseño de las páginas Webs textos, sonidos e imágenes, combinándolos de acuerdo a nuestras necesidades. Además, podemos incluir enlaces (links) a otras páginas Web. Indice 7
- 8. 1. Introducción Para poder ver lo que hemos diseñado en HTML necesitamos un navegador. El navegador “entiende” el lenguaje HTML y hace visible lo que hemos escrito usando el citado código. El cliente (ordenador que quiere ver una página ) se conecta al servidor (ordenador que tiene almacenada el código html). El cliente solicita la página al servidor y éste le envía el fichero de texto HTML que el navegador del cliente interpreta. Esto se hace mediante el protocolo HTTP. Indice 8
- 9. 1. Introducción ¿Qué es un navegador? Los navegadores son los programas informáticos que comprenden” el lenguaje HTML y permiten visualizar las páginas Web. Dos de los más utilizados son: Internet Explorer Mozilla Firefox Indice 9
- 10. 1. Introducción Aplicaciones mínimas para construir una página HTML: • Procesador de textos básico (p.e. Notepad) • Navegador para visualizar el resultado (`p.e. Explorer) Indice 10
- 11. 1. Introducción En el editor de textos iremos introduciendo lo que queremos visualizar y cómo queremos hacerlo para que después pueda ser entendido por un navegador. Indice 11
- 12. 1. Introducción Pasos para crear la primera página: • Creamos un directorio dentro “Mis documentos” llamado HTML. Crear directorio Prueba01 • Abrir “Block de notas” • Escribir: Página de prueba HTML • Guardar como index.html en el directorio creado • Abrir la página con un navegador • Ya hemos creado nuestra primera página web Indice 12
- 13. 1. Introducción Aparte del block de notas de windows se pueden encontrar muchos editores HTML, más elaborados y complejos, que nos pueden facilitar el trabajo a la hora de programar. Por ejemplo AlleyCode, CoffeeCup, PageBreeze o WebGlu. Sin embargo, este curso lo haremos simplemente con el bloc de notas de windows, porque pretendemos conocer el lenguaje HTML desde su inicio. Sólo así seremos capaces después de sacar todo el rendimiento a los distintos programas que existen en el mercado. Indice 13
- 14. 1. Introducción Ejercicio: Bajar de Internet algún editor de textos que nos ayude a escribir código HTML, por ejemplo, AlleyCode. Abrir la página que hemos creado con el block de notas. Este es nuestro punto de partida Indice 14
- 15. 1. Introducción Sobre los nombres de archivo: El archivo puede tener el nombre que deseemos, no obstante, se recomienda guardar los archivos con algún criterio para facilitar su identificación. Es habitual que la primera página o portada lleve el nombre de “index.htm” o “index.html”. Es una convención que nos ayuda a distinguir la página que dará entrada a todas las demás. Indice 15
- 16. 1. Introducción En cuanto a las extensiones, podemos usar indistintamente .htm o .html. Ambos archivos son igualmente interpretados, aunque es recomendable tener el hábito de guardar los archivos siempre con la misma extensión. IMPORTANTE: cuando incluimos archivos o enlaces a ficheros en nuestro código, es importante que las mayúsculas/minúsculas coincidan con el nombre del archivo. De lo contrario podemos encontrarnos con problemas inesperados Indice 16
- 17. 1. Introducción Podemos grabar los archivos generados en HTML en cualquier directorio creado, pero, al igual que con los nombres, es importante ser muy ordenado en su colocación, ya que cuando enlazamos diferentes páginas Web es vital conocer la ubicación exacta de los archivos. Por ejemplo, las imágenes las agruparemos en una misma carpeta, evitando así que se diseminen entre los distintos archivos. Indice 17
- 18. 2. Etiquetas Las etiquetas (tags en inglés) son elementos especiales que sirven para indicarle al navegador cómo tiene que mostrar el texto, las imágenes.... que queremos incluir en nuestra página Indice 18
- 19. 2. Etiquetas La mayoría de las etiquetas están formadas por dos partes, una de Apertura y otra de Cierre: Etiqueta de Apertura: <etiqueta> Etiqueta de Cierre: </etiqueta> Todo lo que introduzcamos entre ellas se verá afectado por el formato que indique la etiqueta. Indice 19
- 20. 2. Etiquetas Hay otro tipo de etiquetas que no son necesario cerrar como: <BR> que indica un salto de línea <HR> que muestra un separador Indice 20
- 21. 2. Etiquetas Ejemplo. en el directorio prueba02 crearemos el fichero index.html y guardaremos lo siguiente: Texto sin formato Texto sin formato <br> <b>Texto en negrita</b><br> Texto sin formato Indice 21
- 22. 2. Etiquetas Ejercicio: crear una página que tenga este aspecto y guardarla en el directorio prueba03: __________________________________ Contenidos del tema: Introducción Etiquetas Estructura de una página HTML Formateo de textos y párrafos Listas Imágenes y color Tablas __________________________________ Indice 22
- 23. 2. Etiquetas Atributos: las directivas pueden contener atributos que indican características del elemento al que hacen referencia. Por ejemplo, la directiva FONT puede incluir el color que tendrá el texto al que afecte de la siguiente manera: <FONT color=“red”>Rojo</FONT>Rojo Indice 23
- 24. 2. Etiquetas Es muy importante el orden de en que se escriben las etiquetas. Ejemplo (prueba04): <font color=red> Contenidos del tema:<br><br> <font color=green> Introducción<br> Etiquetas<br> Estructura de una página HTML<br> Formateo de textos y párrafos<br> Listas<br></font> Imágenes y color<br></font> Tablas<br> Indice 24
- 25. 3. Estructura de una página HTML La estructura general de una página web es: <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML> NOTA: aunque todo funcione sin estas etiquetas, es conveniente estructurar correctamente las páginas. Indice 25
- 26. 3. Estructura de una página HTML Las etiquetas <HTML> y </HTML> delimitan el principio y final de todo el documento HTML <HTML> </HTML> Indice 26
- 27. 3. Estructura de una página HTML Dentro de las etiquetas <HTML> y </HTML> podemos distinguir dos partes : • Cabecera: delimitada por las etiquetas <HEAD> y </HEAD>. Lo que pongamos en la cabecera normalmente no se verá en la página, pero sí será muy importante para incluir determinadas informaciones. • Cuerpo: delimitado por las etiquetas <BODY> y </BODY>. Entre estas etiquetas colocamos el contenido que podremos visualizar mediante un navegador. Aquí pondremos todo el texto, imágenes, sonidos, tablas, etc.… Indice 27
- 28. 3. Estructura de una página HTML Cabecera: <HEAD> … </HEAD> Aquí podemos encontrar elementos que ayudan a la correcta interpretación del cuerpo como por ejemplo: <TITLE> <META> Indice 28
- 29. 3. Estructura de una página HTML Ejercicio: Buscar en Internet un manual HTML y bajarlo para utilizarlo de consulta cuando lo necesitemos Ejercicio: buscar la utilidad de cada uno de estos elementos Indice 29
- 30. 3. Estructura de una página HTML Cuerpo: <BODY> … </BODY> Es la parte que contiene los contenidos de la página, lo que se visualizará en el navegador Indice 30
- 31. 3. Estructura de una página HTML La directiva <BODY> puede contener atributos que permitirán, entre otras cosas, establecer un color de fondo, una imagen de fondo, el color del texto por defecto,… Ejemplo: <BODY bgcolor=yellow text=blue> … </BODY> Indice 31
- 32. 3. Estructura de una página HTML Ejercicio: Enumerar utilizando el manual los posibles atributos que podemos incluir en BODY Ejercicio: Crear una página web con fondo azul, texto amarillo, enlaces en blanco, y enlaces visitados en verde. Guardar en el directorio prueba05. Indice 32
- 33. 4. El color A muchos de los elementos que incluimos en las páginas se les puede asignar color. Cuando utilizamos un atributo de color, éste se puede indicar de dos formas: • Utilizando una de las palabras reservadas a tal efecto como por ejemplo: red, purple, black,… • Utilizando un valor numérico hexadecimal que representa el color Indice 33
- 34. 4. El color En la siguiente tabla podemos ver una lista de palabras reservadas junto al color que representan. A la derecha de cada palabra podemos ver el valor hexadecimal correspondiente. Indice 34
- 35. 4. El color El listado anterior es un listado limitado. En realidad podemos usar una cantidad de colores mayor a la de la tabla anterior. Para ello debemos codificar los colores mediante una combinación de rojo, verde y azul (RGB). Esta combinación se va a expresar mediante un número hexadecimal de 6 dígitos, dos dígitos para el rojo, dos para el verde y dos para el azul. Indice 35
- 36. 4. El color Por lo tanto: FF0000 es el rojo base 00FF00 es el verde base 0000FF es el azul base 000000 es el negro FFFFFF es el blanco Indice 36
- 37. 4. El color Para calcular el valor hexadecimal de un color podemos utilizar cualquier programa de dibujo (por ejemplo Paint de windows) o bien programas especificos como GetColor o EyeDropper. Ejercicio: Visitar la siguiente página: http://www.pagetutor.com/colorpicker/index.html Indice 37
- 38. 5. Enlaces Los enlaces o hipertexto o hipervínculos permiten pasar de una página a otra de manera sencilla, simplemente pulsando el ratón sobre un trozo de texto o una imagen. Normalmente, los enlaces o links se identifican por ser palabras que se diferencian en su color, resaltando entre todas las demás. También, por convencionalismo, el cursor cambia de forma para transformarse en una pequeña mano señalando el enlace. Indice 38
- 39. 5. Enlaces La etiqueta <A>…</A> nos permite crear enlaces en nuestras páginas. Para indicar a dónde queremos que salte utilizaremos el atributo href. Por ejemplo si queremos que salte a la página de google, lo indicaremos de la siguiente forma: <A href=“http://www.google.com”> Indice 39
- 40. 5. Enlaces Lo que pongamos entre <A …> y </A> es lo que aparecerá en la página como hipervínculo, es decir, donde tendremos que pulsar para saltar a la página de destino. Dentro de dichas etiquetas podremos poner texto o bien alguna imagen. Indice 40
- 41. 6. Mapa de la web Una de las tareas más importantes a la hora de concebir un sitio web es la organización de los contenidos y el análisis del número de páginas que conformarán nuestro sitio web, así como la relación existente entre ellas. Veamos varios tipos de estructura existentes. Indice 41
- 42. 6. Mapa de la web Estructura lineal: Indice 42
- 43. 6. Mapa de la web Estructura lineal ramificada: Indice 43
- 44. 6. Mapa de la web Estructura jerárquica: Indice 44
- 45. 6. Mapa de la web Estructura lineal ramificada: Indice 45
- 46. 7. Formateo de texto y párrafos En este apartado veremos las etiquetas o directivas que permiten dar formato al texto, es decir, poder representar saltos de línea, tabuladores y otros separadores que el navegador no interpreta y además hacer que el texto sea más atractivo mediante los colores, los tipos de letra, el tamaño,… Indice 46
- 47. 7. Formateo de texto y párrafos En los editores de texto basta con pulsar la barra espaciadora tres veces para que se visualicen tres espacios. En HTML hay que indicar esos espacios de manera especial. Lo mismo ocurre con los tabuladores, saltos de línea,.. Indice 47
- 48. 7. Formateo de texto y párrafos Tenemos el siguiente texto en un archivo HTML: WWW basa su diseño y funcionamiento en varios puntos: La idea de un mundo sin límites para la información El sistema de direcciones URL El protocolo de red HTTP El lenguaje HTML Indice 48
- 49. 7. Formateo de texto y párrafos Si visualizamos el texto anterior en un navegador el resultado es el siguiente: WWW basa su diseño y funcionamiento en varios puntos: La idea de un mundo sin límites para la información El sistema de direcciones URL El protocolo de red HTTP El lenguaje HTML No hay separadores de ningún tipo, solo una separación entre palabras Indice 49
- 50. 7. Formateo de texto y párrafos Espacios entre caracteres: Para que el navegador muestre más de un espacio entre palabras hay que añadir lo siguiente por cada espacio: Indice 50
- 51. 7. Formateo de texto y párrafos Caracteres especiales: Existen caracteres especiales que se suelen utilizar para especificar directivas entre otras cosas, por ejemplo, <>. Para visualizar estos caracteres y no sean interpretados hay que escribirlos de forma especial, para ello utilizaremos las referencias Indice 51
- 52. 7. Formateo de texto y párrafos Caracteres especiales: Las referencias no son más que una forma especial de escribir caracteres, como ocurre con los espacios entre caracteres. Por ejemplo, para visualizar <CENTER> en un navegador sin que se interprete, debemos poner <CENTER> Indice 52
- 53. 7. Formateo de texto y párrafos Saltos de línea: Para visualizar un salto de línea basta con utilizar la etiqueta abierta<BR> Indice 53
- 54. 7. Formateo de texto y párrafos Párrafo: Para delimitar un párrafo se antepone la etiqueta <P> al inicio del mismo y </P> al final. Puede parecer que <BR> y <P> hacen lo mismo, insertar una nueva línea, pero no es así. Ejercicio: practicar con ambas para ver la diferencia Indice 54
- 55. 7. Formateo de texto y párrafos Párrafo: Hay dos diferencias fundamentales: <P> deja un espacio mayor entre líneas <P> no se acumula NOTA: si queremos acumular <P> pondremos entre ellos Indice 55
- 56. 7. Formateo de texto y párrafos Párrafo: La directiva <P> puede contener el atributo align que sirve para alinear el texto Indice 56
- 57. 4. Formateo de texto y párrafos Alineación: En los procesadores de texto podemos alinear el texto a la izquierda, a la derecha,… con un simple click de ratón. En HTML existen etiquetas para alinear el texto, pero también podemos hacerlo mediante atributos de algunas directivas. Indice 57
- 58. 7. Formateo de texto y párrafos Alineación: Con el atributo ‘align’ de algunas etiquetas podemos alinear el texto donde queramos. Los valores que se pueden asignar son left (valor por defecto), right y center Agunas de las etiquetas que tienen este atributo son: <P>, <HR>, <DIV>, <COL>, <IMG>, <INPUT>, <TABLE>,... Indice 58
- 59. 7. Formateo de texto y párrafos Alineación: Con la directiva <CENTER> podemos alinear elementos al centro Se finaliza con </CENTER> Indice 59
- 60. 7. Formateo de texto y párrafos Preformateo del texto: La directiva <PRE> permite que el navegador tenga en cuenta los separadores (espacios, tabuladores,...) existentes en el código fuente. Finaliza con </PRE> Indice 60
- 61. 7. Formateo de texto y párrafos Estilos del texto: negrita cursiva subrayado texto tachado subíndice superíndice Ejercicio: Busca la etiqueta para cada uno de estos estilos Indice 61
- 62. 7. Formateo de texto y párrafos Directiva FONT y BASEFONT: <BASEFONT> nos permite establecer el tamaño y el color de fuente para todo el documento <FONT> nos permite cambiar el color, tamaño y tipo de letra establecidos por defecto. Ejercicio: enumera los atributos de la etiqueta FONT Indice 62
- 63. 7. Formateo de texto y párrafos Ejercicio: Buscar un programa de diseño de letra como imagen. Xara Indice 63
- 64. 8. Ver código fuente Todas las páginas web tienen su programación detrás, y ésta es pública en la mayoría de los casos. Eso quiere decir que podemos ver el código fuente de la mayoría de las páginas por las que navegamos en Internet, lo que acaba siendo el mejor método de aprendizaje de todos. Una vez que tengamos la base de conocimientos necesario, ver el código fuente de las páginas web que nos gusten es una forma de seguir aprendiendo en este mundo de la programación. Indice 64