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

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?

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

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Indice 36 Por lo tanto: FF0000 es el rojo base 00FF00 es el verde base 0000FF es el azul base es el negro FFFFFF es el blanco 4. El color

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

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

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

Indice 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 Mapa de la web Estructura lineal:

Indice Mapa de la web Estructura lineal ramificada:

Indice Mapa de la web Estructura jerárquica:

Indice Mapa de la web Estructura lineal ramificada:

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

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

Indice Formateo de texto y párrafos Saltos de línea: Para visualizar un salto de línea basta con utilizar la etiqueta abierta

Indice 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

Indice 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

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

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

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

Indice 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

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

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

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