Introducción al Lenguaje HTML: Guía Básica y Ejercicios
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>
)