Introducción al Lenguaje HTML

Definición

HTML (HyperText Markup Language) es el lenguaje que se emplea para el desarrollo de páginas de internet.

Este lenguaje está constituido de elementos que el navegador interpreta y despliega en la pantalla de acuerdo a su objetivo.

Existen elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.

Edición de páginas HTML

Frames

Un frame o marco es la división de la pantalla del navegador en dos o más cuadros que muestran contenidos de dos o más sitios simultáneamente.

Su utilización principal radica en establecer un link con otro sitio y mostrar ese otro sitio dentro de una ventana o marco.

Ventajas de los Frames:

  • Mayor rapidez al cargar información.
  • Mejor visualización por temas.

Desventajas de los Frames:

  • El uso de frames podría hacer menos accesible el sitio.
  • Es mucho más difícil imprimir su contenido.

Ejercicio Propuesto

Problema: Confeccione una página con las marcas mínimas señaladas anteriormente que muestre el Nombre de esta Universidad.

Ejercicio Propuesto

Problema: Confeccione una página con las marcas mínimas señaladas anteriormente, que muestre su nombre y edad.

Formateo elemental de textos

Salto de línea

Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importando si cuando tipeamos la página escribimos cada palabra en una línea distinta (es decir, un navegador no toma en cuenta la tecla ENTER).

Formateo elemental de textos

Salto de línea

Para indicarle al navegador que queremos que continúe en la próxima línea, debemos hacerlo con el elemento HTML <br>.

Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente.

Es uno de los pocos elementos HTML que no tiene marca de cerrado.

Ejercicio Resuelto

Problema: Confeccione una página con las marcas mínimas señaladas anteriormente que muestre el Nombre de esta Universidad, y Sede, uno por línea.

Formateo elemental de textos

Encabezamientos (Títulos)

<H1></H1>………..<H6></H6>

El título de mayor nivel es <h1>, es decir, el que tiene una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente. Más adelante veremos que uno puede modificar la fuente, tamaño, color, etc.)

Requiere la marca de cerrado del título con la barra invertida como hemos visto.

Atributos de etiquetas

Alineación de párrafos

  • Izquierda: ALIGN=left (opción por defecto)
  • Derecha: ALIGN=right
  • Centrado: ALIGN=center

Utilización:

<p ALIGN=opción>

Hipervínculos

Permiten enlazar dos páginas cualesquiera independientemente de la ubicación de cada una: local o en red.

Normalmente un navegador, al encontrar esta marca, muestra un texto subrayado, y al hacer clic con el Mouse sobre éste, el navegador carga la página indicada por dicho hipervínculo.

Hipervínculos

Ejemplos a páginas del mismo sitio:

<A HREF= pagina.html > Página1 </A>

Ejemplos a páginas de otros sitios:

<A HREF= http://www.elpais.es > Diario El País </A>

Creación de Hipervínculos

Enlace desde una página (listado de cursos.html) a una sección del mismo documento.

Primero creamos la referencia:

<A HREF= #A1 > Curso1 </A>

A continuación creamos el anclaje en el mismo documento:

<A NAME= A1 > Curso1 </A>

Creación de Hipervínculos

Enlace desde una página (índice de cursos.html) a una sección específica en otro documento (cursos.html).

Primero creamos la referencia en el primer documento:

<A HREF= cursos.html#A1 > Curso1 </A>

A continuación creamos el anclaje en el segundo documento:

<A NAME= A1 > Curso1 </A>

Creación de Hipervínculos

Apertura de un hipervínculo en otra instancia del navegador:

El elemento “a” tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página:

El valor “_blank” indica que el recurso será abierto en otra ventana.

<A HREF= http://www.elsur.cl" target="_blank" > Diario El Sur </A>

Creación de Hipervínculos

A un cliente de correo:

Permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.

<A HREF= mailto:[email protected] > Enviar </A>

<A HREF= mailto:[email protected]? subject=aquí eltítulo&[email protected]&[email protected]& body=Este es el cuerpo > Enviar </A>

Ejercicios de Hipervínculos

La empresa LlicoSándwich tiene 3 ofertas que desea promocionar:

  • Carne, Tomate, Palta = $2.000
  • Pollo, Choclo= $2.000
  • Carne, Pollo, Tomate, Choclo, Palta=$3.500

Confeccionar una página principal que contenga la Información de la Empresa, con un link grande que diga “Ofertas”, el cual abrirá otra página que contendrá la descripción de dichas ofertas.

Bajo cada Oferta existirá un link que abrirá el cliente de correo y enviará la promoción correspondiente. En el título indicar si se trata de la promoción 1, 2 o 3. En el cuerpo del mensaje solicite ingresar la dirección y teléfono de la persona que hace el pedido.

Creación de listas

Listas ordenadas:

Este elemento HTML es útil cuando debemos numerar una serie de objetos.

Se identifica por las marcas <ol></ol>, y <li></li> para sus elementos interiores.

Creación de listas

Listas no ordenadas:

No utiliza un número delante de cada ítem, sino un pequeño símbolo gráfico.

Se identifica por las marcas <ul></ul> y <li></li> para sus elementos interiores.

Añadir viñetas a las listas

Sintaxis general

<UL TYPE=atributo>

<OL TYPE=atributo>

Atributos listas no ordenadas

  • DISC, CIRCLE, SQUARE

Atributos listas ordenadas

  • 1, A, I

Otras etiquetas

Línea horizontal <HR>

Atributos de <HR>

<HR NOSHADE SIZE=valor WIDTH=porcentaje ALIGN=valor>

La etiqueta <BLINK>

<BLINK> ¡Hola Pepe! </BLINK>

La etiqueta <META>

<META HTTP-EQUIV= refresh CONTENT= 5; url=http://www.uam.es >

Insertar Imágenes <img>

La sintaxis de esta marca es:

<img src="foto1.jpg" alt=USS>

Atributos

<IMG SRC= 1.gif HEIGHT= valor WIDTH= valor >

Alineación

<IMG SRC= imagen.gif ALIGN= top >

Como mínimo, debemos inicializar las propiedades src y alt de la marca HTML img.

Insertar Imágenes <img>

Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalización (similar a la marca <br>).

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

Insertar Imágenes <img>

Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será:

<img src="imagenes/foto1.jpg" alt="Pintura geométrica">

Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /

Insertar Imágenes <img>

Si queremos subir dos carpetas luego escribimos:

<img src="../../foto1.jpg" alt="Pintura">

Si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:

<img src="../imagenes/foto1.jpg" alt="Pintura">

Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.

Hipervínculo mediante una imagen <a> y <img>

Consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace (<a>)