1 Tema 1A Introducción al lenguaje HTML. Indice 2 1.IntroducciónIntroducción 2.EtiquetasEtiquetas 3.Estructura de una página HTMLEstructura de una página.

Presentación del tema: "1 Tema 1A Introducción al lenguaje HTML. Indice 2 1.IntroducciónIntroducción 2.EtiquetasEtiquetas 3.Estructura de una página HTMLEstructura de una página."— Transcripción de la presentación:

1 1 Tema 1A Introducción al lenguaje HTML

2 Indice 2 1.IntroducciónIntroducción 2.EtiquetasEtiquetas 3.Estructura de una página HTMLEstructura de una página HTML 4.El colorEl color 5.EnlacesEnlaces 6.Mapa de la webMapa de la web 7.Formateo de textos y párrafosFormateo de textos y párrafos 8.Ver código fuenteVer código fuente

3 Indice 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?

4 Indice 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”.

5 Indice 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.

6 Indice 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.

7 Indice 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.

8 Indice 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.

9 Indice 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

10 Indice 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)

11 Indice 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.

12 Indice 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

13 Indice 13 1. Introducción Además 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.

14 Indice 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

15 Indice 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. No utilizaremos ni espacios ni caracteres extraños (,;/\@...) en los nombres de archivo.

16 Indice 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

17 Indice 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.

18 Indice 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

19 Indice 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 de Cierre: Todo lo que introduzcamos entre ellas se verá afectado por el formato que indique la etiqueta.

20 Indice 20 2. Etiquetas Hay otro tipo de etiquetas que no son necesario cerrar como: que indica un salto de línea que muestra un separador

21 Indice 21 2. Etiquetas Ejemplo. en el directorio prueba02 crearemos el fichero index.html y guardaremos lo siguiente: Texto sin formato Texto en negrita Texto sin formato

22 Indice 22 __________________________________ Contenidos del tema: Introducción Etiquetas Estructura de una página HTML Formateo de textos y párrafos Listas Imágenes y color Tablas __________________________________ Ejercicio: crear una página que tenga este aspecto y guardarla en el directorio prueba03: 2. Etiquetas

23 Indice 23 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: Rojo Rojo 2. Etiquetas

24 Indice 24 Es muy importante el orden de en que se escriben las etiquetas. Ejemplo (prueba04): Contenidos del tema: Introducción Etiquetas Estructura de una página HTML Formateo de textos y párrafos Listas Imágenes y color Tablas 2. Etiquetas

25 Indice 25 3. Estructura de una página HTML La estructura general de una página web es: … … NOTA: aunque todo funcione sin estas etiquetas, es conveniente estructurar correctamente las páginas.

26 Indice 26 3. Estructura de una página HTML Las etiquetas y delimitan el principio y final de todo el documento HTML

27 Indice 27 3. Estructura de una página HTML Dentro de las etiquetas y podemos distinguir dos partes : Cabecera: delimitada por las etiquetas y. 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 y. Entre estas etiquetas colocamos el contenido que podremos visualizar mediante un navegador. Aquí pondremos todo el texto, imágenes, sonidos, tablas, etc.…

28 Indice 28 3. Estructura de una página HTML Cabecera: … Aquí podemos encontrar elementos que ayudan a la correcta interpretación del cuerpo como por ejemplo:

29 Indice 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

30 Indice 30 3. Estructura de una página HTML Cuerpo: … Es la parte que contiene los contenidos de la página, lo que se visualizará en el navegador

31 Indice 31 3. Estructura de una página HTML La directiva 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: …

32 Indice 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.

33 Indice 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

34 Indice 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.

35 Indice 35 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. 4. El color

36 Indice 36 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 4. El color

37 Indice 37 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 4. El color

38 Indice 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.

39 Indice 39 5. Enlaces La etiqueta … 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: http://www.google.com

40 Indice 40 5. Enlaces Lo que pongamos entre y 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.

41 Indice 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.

42 Indice 42 6. Mapa de la web Estructura lineal:

43 Indice 43 6. Mapa de la web Estructura lineal ramificada:

44 Indice 44 6. Mapa de la web Estructura jerárquica:

45 Indice 45 6. Mapa de la web Estructura lineal ramificada:

46 Indice 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,…

47 Indice 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,..

48 Indice 48 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 7. Formateo de texto y párrafos

49 Indice 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

50 Indice 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:

51 Indice 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

52 Indice 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 en un navegador sin que se interprete, debemos poner <CENTER>

53 Indice 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

54 Indice 54 7. Formateo de texto y párrafos Párrafo: Para delimitar un párrafo se antepone la etiqueta al inicio del mismo y al final. Puede parecer que y hacen lo mismo, insertar una nueva línea, pero no es así. Ejercicio: practicar con ambas para ver la diferencia

55 Indice 55 7. Formateo de texto y párrafos Párrafo: Hay dos diferencias fundamentales: deja un espacio mayor entre líneas no se acumula NOTA: si queremos acumular pondremos entre ellos

56 Indice 56 7. Formateo de texto y párrafos Párrafo: La directiva puede contener el atributo align que sirve para alinear el texto

57 Indice 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.

58 Indice 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:,,,,,,,...

59 Indice 59 7. Formateo de texto y párrafos Alineación: Con la directiva podemos alinear elementos al centro Se finaliza con

60 Indice 60 7. Formateo de texto y párrafos Preformateo del texto: La directiva permite que el navegador tenga en cuenta los separadores (espacios, tabuladores,...) existentes en el código fuente. Finaliza con

61 Indice 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

62 Indice 62 7. Formateo de texto y párrafos Directiva FONT y BASEFONT: nos permite establecer el tamaño y el color de fuente para todo el documento nos permite cambiar el color, tamaño y tipo de letra establecidos por defecto. Ejercicio: enumera los atributos de la etiqueta FONT

63 Indice 63 7. Formateo de texto y párrafos Ejercicio: Buscar un programa de diseño de letra como imagen. Xara

64 Indice 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.