Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Guia 01
Guia 01
Facultad de Ingeniería
Escuela de Computación
Guía de laboratorio Nº 1
Nombre de la práctica: Introducción y concepto básicos de HTML.
Ciclo II - 2022
Lugar de ejecución: Centro de computo
Materia: Lenguajes Interpretados en el Cliente.
I. Objetivos
¿Qué es HTML?
HTML son las siglas de HyperText Markup Language, que significa, en español, Lenguaje de Marcas de
Hipertexto. El concepto de hipertexto apareció por 1965, basado en la idea general de unos elementos de
texto especiales dentro de un documento que permitieran enlazar con otra parte de ese mismo
documento, o con otro documento diferente.
La idea original era poder transferir y compartir recursos a través de Internet. Esto implicaba nuevas
formas de comunicación entre equipos informáticos, y así, la CERN (Consejo Europeo para la Investigación
Nuclear), junto con otras instituciones, implementaron la tecnología de base para que esto fuera posible.
Lo primero fue el protocolo de red específico, que se denominó http (HyperText Transfer Protocol), que
permitiría transferir de forma adecuada los diferentes documentos de hipertexto. Lo segundo, fue
desarrollar un mecanismo de identificación de los recursos, esto se plasmó en lo que hoy conocemos como
URL (Uniform Resource Lacator), o Identificador Uniforme de Recursos. Este URL indica tanto la
localización exacta del recurso, así como, el protocolo necesario para su transferencia.
Protocolo://www.servidor.dominio/carpeta/página.html
http://www.udb.edu.sv/biblioteca/catalogo.html
1
Estructura básica de un documento HTML 5
En general, se suele decir que una página web tiene tres
secciones bien identificadas, que son:
▪ La precabecera
▪ La cabecera (head)
▪ El cuerpo (body)
La precabecera.
Es la parte del documento que está situada por encima de la etiqueta <HTML>. En esta sección suele colocarse la
Definición del Tipo de Documento (DTD).
▪ <!DOCTYPE>
En primer lugar, necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es
extremadamente sencillo:
IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De
esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas
siempre que sea posible, o ignoradas en caso contrario.
La cabecera
Es el código HTML, comprendido entre las etiquetas <HEAD> </HEAD>. El contenido de la cabecera no es
visible en el navegador del cliente. A excepción del elemento TITLE que permite colocar un título en la
barra de título del navegador del usuario.
Las etiquetas más importantes que puede contener la cabecera son: <TITLE>, <BASE>, <LINK>, <META>,
<STYLE>, <SCRIPT>, etc.
▪ <meta>
Se utiliza para identificar propiedades de un documento y para asignar valores a esas propiedades. El
atributo name identifica la propiedad y el atributo content especifica el valor de la propiedad. Esta
información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda
y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información
que contiene.
Por ejemplo:
▪ <title>
La etiqueta <title> simplemente especifica el título del documento. Por ejemplo:
2
▪ <link>
Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado
para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos.
Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:
Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href.
El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos
incorporando por medio de href.
En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css
es un archivo CSS con estilos requeridos para presentar la página en pantalla (en las próximas clases
estudiaremos cómo utilizar estilos CSS).
Líneas
En HTML se pueden dibujar líneas horizontales en las páginas. Para ello se utilizar la etiqueta o elemento
<HR>.
Saltos de linea
Para indicar un Enter o salto de línea se utiliza el elemento <BR>.
Párrafos
Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede
utilizar la etiqueta <P></P>.
<P>
La comprensión psicológica del miedo experimentado como consecuencia de las experiencias represivas
requiere ser ubicado en el contexto de la situación específica y referido a los distintos niveles de
comprensión de los procesos psicológicos como tales.
</P>
<P>
Así, se observa que el miedo puede provocar conductas específicas que pueden ser descritas como
procesos adaptativos como algo que se anticipa como un desastre, o como una catástrofe personal,
inminente e imprevista.
</P>
3
Etiquetas de cabeceras o títulos.
Este tipo de etiquetas se suelen utilizar para los títulos en el texto de las páginas. Existen en total seis
etiquetas para este propósito. Estas se muestran en la siguiente tabla:
Etiqueta Resultado
<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2>
Cabecera de nivel 2
<H3> ... </H3>
Cabecera de nivel 3
<H4> ... </H4>
Cabecera de nivel 4
<H5> ... </H5>
Cabecera de nivel 5
<H6> ... </H6>
Cabecera de nivel 6
Colocar comentarios
<! ---- >: Comentarios. Son etiquetas que nunca se mostrarán a través del navegador y que le servirán
para recordatorios en futuras revisiones del documento.
Capas
El elemento HTML <DIV> </DIV> permite a los autores asignar ciertos atributos a bloques de contenido.
Se utiliza para definir una sección o división en un documento HTML.
Es principalmente utilizado en conjunto con hojas de estilo para dar atributos visuales a porciones de
contenido en un documento.
Para utilizar negritas utilice la etiqueta con cierre <b> y para itálicas la etiqueta, también con cierre <i>.
Para utilizar estas etiquetas simplemente coloque dentro de ellas el texto que se quiere resaltar, por
ejemplo:
Es posible que usted desee que algún texto se vea con negritas y con itálica al mismo tiempo, para lograr
esto usted puede anidar ambas etiquetas como sigue:
4
De la misma manera trabaja la etiqueta <ins>, que sirve para resaltar un texto con una línea de subrayado.
Subíndices y superíndices
HTML contiene un par de etiquetas para escribir subíndices (<sub>) y superíndices (<sup>), ambas con cierre.
Bloque de citas
La etiqueta con cierre <blockquote> da un resultado similar al párrafo, inserta espacio antes y después de un bloque
de código, pero también inserta un margen a la izquierda y a la derecha. El resultado visual tiene la finalidad de
manejar el texto dentro las etiquetas <blockquote> </blockquote> como los libros lo hacen con una frase que ha
dicho alguien más, es decir, manejar el texto como una fuente de información externa, el código sería:
Figura 2. Diseño común para sitios web Figura 3. Elementos de estructura de HTML5
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus
partes (Figura 3). A partir de ahora podemos decir al navegador para qué es cada sección.
12
▪ <header>
Uno de los nuevos elementos incorporados en HTML5 es <header>.
El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento.
Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos,
logos), pero difiere con respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de
proveer información acerca de todo el documento, <header> es usado solo para el cuerpo o secciones específicas
dentro del cuerpo.
▪ <nav>
Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5
con el elemento <nav>:
▪ <section>
El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto,
es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente
cualquier cosa que incluya su propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de
contacto etc.
▪ <aside>
En un típico diseño web (como el mostrado en la figura 2) la columna llamada Barra Lateral se ubica al lado de la
columna Información Principal. Esta es una columna o sección que normalmente contiene datos relacionados con la
información principal pero que no son relevantes o igual de importantes. En HTML5 podemos diferenciar esta clase
secundaria de información utilizando el elemento <aside>:
▪ <footer>
El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información
general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.
▪ <article>
El elemento article representa una entrada independiente en un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo
exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa
el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuarios.
Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante
dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de
estas partes.
13
Agregando imágenes.
La etiqueta <img>, permite definir una imagen en el documento web. Entre los formatos más populares de imagen
aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más
formatos. Se ha de observar que la etiqueta no tiene etiqueta de cierre. La sintaxis de la etiqueta es la siguiente.
<img alt=“valor” height=“valor” width=“valor” src=“ruta”/>
Atributo Descripción
Permite especificar el origen de la imagen, es decir su ubicación, bien
src mediante una ruta absoluta o relativa.
Permite especificar el alto de la imagen en pixeles. El especificar ancho y alto de la imagen, no
significa que se realice una reducción o ampliación del tamaño en bytes de la imagen, es decir la
imagen se ha de leer completa, independientemente del tamaño especificado. Si se especifica un
height tamaño que no siendo el tamaño real de la imagen, se puede producir un efecto de pixelado, con
la respectiva pérdida de
calidad en la visualización de la imagen.
El atributo width, permite especificar el ancho de visualización de la
width imagen, con un valor numérico en pixeles.
El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es
alt visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el
usuario utiliza un lector de pantalla.
Agregando enlaces
La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con
otros documentos o recursos disponibles. Por defecto al pulsar sobre un enlace, el contenido al cual se está
accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que
se quiere acceder. La sintaxis básica de esta etiqueta es la siguiente:
<a href=“ruta” target=“valor”>Este es un vinculo</a>
▪ Atributo href
Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el
documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace” en el mismo documento.
▪ Atributo target
Permite especificar el destino por defecto del enlace. Entre los posibles valores que se le pueden aplicar al atributo
target, encontramos los siguientes:
14
target Descripción
_blank Especifica que el destino sea una nueva ventana del navegador, o una pestaña nueva
_self Por defecto. Abre el destino en el mismo lugar donde se haya realizado el click
Nº Cantidad Descripción
1 1 Computadora con Sublime Text,nodepad++, visual studio code y navegadores
instalados
2 1 Guía de Laboratorio #1 Introducción y concepto básicos de HTML
3 1 Memoria USB
IV. Procedimiento
7. Guardar los cambios realizados puesto que este archivo nos servirá como base para los siguientes ejemplos.
Recomendaciones:
• Debe guardar todos los archivos en una sola carpeta, para que no tenga problemas a la hora de trabajar con
ellos.
15
• Cuando guarde el documento Web siempre digite la extensión .html
• Cuando realice cambios a un documento Web, y su página ya está cargada en un navegador solamente actualice
el navegador y observara los nuevos cambios.
Ejemplo:
7. Actualice la página en su navegador y pregúntese ¿Hay cambios en la visualización del sitio web? Si la respuesta
es negativa, razone ¿Entonces para qué sirven las etiquetas meta? Busque esa respuesta en la introducción
teórica de la guía o consulte con su instructor.
4. En este ejemplo construiremos una página web con una estructura similar a la mostrada en la Figura 3 (ver
introducción teoríca).
5. Agregar el siguiente codigo al body de la pagina web:
18
6. Guardar los cambios y visualizar el resultado obtenido en el navegador de su preferencia.
7. ¿El resultado obtenido es similar al mostrado en la figura 3 de la introducción teórica? ¿Por qué? Razónelo y
consulte con su docente.
V. Análisis de resultados.
1. Realice una página web con la información de su programa de televisión favorito por ejemplo nombre del
programa, personajes principales, tipo de programa (comedia, romance, documental, etc).
2. Realice una página web para cada uno de los países de Centroamérica. En dichas páginas se debe mostrar los
símbolos patrios, historia, extensión territorial, lista de departamentos y lugares turísticos más importantes. En
este ejercicio se debe hacer uso de las etiquetas semánticas (header, section, footer, etc), imágenes, párrafos,
etc.
VI. Bibliografía.
Deitel, Paul / Deitel, Harvey / Deitel, Abbey. Internet & World Wide Web. Cómo programar. 5a. Edición. Editorial
Pearson. 2014. México DF.
19