UTN - BA DAV PrÃ¡cticas DiseÃ o Web - 01 - HTML - Etiquetas Bã¡sicas-2

Diseño Web – HTML y CSS
01. Práctica HTML etiquetas básicas
UTN.BA - Departamento de Aprendizaje Visual (DAV)

Medrano 951 – C.A.B.A.- Argentina Tel. (011) 4867-7565/7545 / Cel. (54 9 11) 3501 - 6032
digitaljunior@frba.utn.edu.ar http://sceu.frba.utn.edu.ar/dav/index.php
0
Contenido
HTML – Etiquetas básicas ................................................................................................................................ 1
¿Qué es HTML? ................................................................................................................................................1

¿Qué significa etiquetas específicas? ..............................................................................................................1
¿Cuáles son las partes principales del elemento HTML?.................................................................................1
Estructura básica de un documento ................................................................................................................2
Etiquetas ..........................................................................................................................................................3
Etiquetas <h1> - <h6> ......................................................................................................................................3
Etiqueta <p>.....................................................................................................................................................3
Etiqueta <ul> ....................................................................................................................................................4
Etiqueta <ol> ....................................................................................................................................................4
Etiqueta <a> .....................................................................................................................................................4
Etiqueta <img> .................................................................................................................................................5
Etiqueta <div> ..................................................................................................................................................5
PRÁCTICA HTML – Etiquetas básicas ................................................................................................................ 6
Actividades para pensar .................................................................................................................................14

0
HTML – Etiquetas básicas
¿Qué es HTML?
HTML es un lenguaje de marcado o marcas como su nombre indica: HTML significa Hypertext Markup
Language (Lenguaje de marcado e hipertexto).
Este lenguaje de marcado es el código que se utiliza para estructurar y desplegar una página web y sus
contenidos. Por ejemplo, sus contenidos o elementos podrían ser párrafos, una lista con viñetas, o
imágenes o tablas de datos.
El lenguaje HTML no sirve para decorar nuestros documentos, más adelante veremos cómo lograrlo
usando CSS (Cascading Style Sheets), un lenguaje que permite aplicar estilos de manera selectiva a
elementos en documentos HTML.
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está
diferenciada, declarada y determinada por etiquetas específicas.
¿Qué significa etiquetas específicas?

Es un conjunto de etiquetas que usaremos para encerrar diferentes partes del contenido o elementos
para que se vean o comporten de una determinada manera.
Estos elementos suelen tener etiquetas de inicio y cierre para los diferentes formatos que se quieren
aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.
<etiqueta> </etiqueta>
Ejemplo:
<p>Esta etiqueta es para indicar que este texto es un párrafo</p>
<title>Esta es la etiqueta donde colocaremos el título de la página</title>
¿Cuáles son las partes principales del elemento HTML?

1
• La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por
paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener
efecto el elemento —en este caso, dónde es el comienzo del párrafo.
• La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso
dónde termina el párrafo.
• El contenido: este es el contenido del elemento, que en este caso es sólo texto.
• El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al

elemento.
Estructura básica de un documento

Hasta ahora hemos visto que para armar un documento HTML necesitamos de varios elementos, pero
estos no son muy útiles por sí solos.
Ahora veremos cómo estos elementos individuales son combinados para formar un documento HTML
para lograr armar un sitio web.
La estructura para empezar a trabajar es la siguiente:
<!DOCTYPE html> Definición del tipo de documento.
<html> </html> Especifica el principio y fin del documento HTML, entre las etiquetas de principio y fin
del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento cuyas
etiquetas correspondientes son y
<head> </head> Este elemento actúa como un contenedor de todo aquello que quieres incluir en la
página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras
clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas,
código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
2
<meta charset="UTF-8"> Este elemento establece el juego de caracteres que nuestro documento
usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos.
<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la barra

de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida
a los marcadores o como favorita.
<body> </body> Es donde se encuentra todo el contenido que deseas mostrar a los usuarios web que
visiten tu página, ya sea textos, imágenes, videos, audios, formulario, etc.
Etiquetas
Etiquetas <h1> - <h6>
Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del documento web.
La etiqueta se representa mediante las etiquetas, siendo X un número entre 1 y 6, que establece el nivel
del encabezado.
La presentación visual de los elementos de encabezado suele ser en letra negrita, y dependiendo de su
nivel, de 1 a 3 suele ser mayor que la letra base establecida, mientras que los niveles de 4 a 6 suele ser
de tamaño menor a la letra establecida como base.
Etiqueta <p>
Se utilizan para encerrar párrafos de texto; los usaremos frecuentemente para el marcado de contenido
de texto.

3
Etiqueta <ul>
Permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a su vez contenedora de otras
etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta
la lista
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

especificar el texto que compone el elemento de la lista.
Etiqueta <ol>
Permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. Esta
etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de
los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

especificar el texto que compone el elemento de la lista. Una lista puede contener como elemento de lista,
otra lista, es decir se pueden crear listas anidadas.
Etiqueta <a>
Sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros
documentos o recursos disponibles.
Los navegadores suelen visualizar los enlaces con una serie de colores predefinidos, aunque estos se
pueden cambiar.

4
Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color
púrpura y por último los enlaces activos mediante el color rojo.
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 para esta etiqueta con todos sus atributos es la siguiente:
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.
target: El atributo permite especificar el destino por defecto para todos los enlaces. El más común es:
_blank que especifica que el destino sea una nueva ventana del navegador, o una nueva pestaña.
Etiqueta <img>
La etiqueta <img>, permite definir una imagen en el documento web. Técnicamente la imagen no está
insertada dentro del documento, ya que lo que se hace es realizar un enlace a la misma, encargándose
el navegador de situar en el documento. 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.
src: permite especificar el origen de la imagen, es decir su ubicación, bien mediante una ruta absoluta
o relativa.
alt: permite especificar un texto alternativo para la imagen. Este texto alternativo es 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.
Etiqueta <div>
La etiqueta <div> sirve para crear secciones o agrupar contenidos

5
PRÁCTICA HTML – Etiquetas básicas
En la carpeta comprimida UTN.BA DAV Material Prácticas HTML - etiquetas básicas encontrará el
material necesario para resolver las consignas.
Actividad 1
a) Armar una carpeta con el nombre Actividad_1. Dentro de esta carpeta crear el archivo
actividad1.html
b) En el archivo actividad1.html definir la estructura básica de la página. Al abrir nuestra página en

el navegador la pestaña dirá: Actividad 1 seguida de su apellido. Por ejemplo: Actividad 1
González
c) Insertar como título h1: Hola soy un título!
d) Insertar un párrafo (cualquiera, puede usar Lorem) que en el medio del párrafo contenga un link a
la página de Google.
e) Insertar un título h2: Soy un subtítulo
f) Insertar un título h3: Lista desordenada
g) Armar una lista desordenada con 3 ítems.
h) Insertar un título h3: Lista ordenada
i) Armar una lista ordenada con 5 ítems.
La página debe quedar como muestra el modelo:

6
Actividad 2
a) Armar una carpeta con el nombre Actividad_2. Dentro de esta carpeta copiar la carpeta img (que
encontrará en el material) y crear el archivo actividad2.html

el navegador la pestaña dirá: Actividad 2 seguida de su apellido. Por ejemplo: Actividad 2 Martínez

7
c) Insertar como título h1: Trabajando con imágenes
d) Insertar como título h3: Imagen 1 dentro de carpeta
e) Insertar la Imagen 1 que se encuentra dentro de la carpeta img
f) Insertar como título h3: Imagen 2 con hipervínculo
g) Insertar la Imagen 2 que se encuentra dentro de la carpeta img con un hipervínculo a otra página
h) Insertar como título h3: Imagen 3 mismo directorio
i) Insertar la Imagen 3 que se encuentra en el mismo directorio que el archivo actividad2.html

8
Actividad 3
a) Armar una carpeta con el nombre Actividad_3. Dentro de esta carpeta copiar el archivo Axel.pdf
que se encuentra en materiales y crear el archivo actividad3.html

el navegador la pestaña dirá: Actividad 3 seguida de su apellido. Por ejemplo: Actividad 3 Pérez.
c) Insertar como título h1: Trabajando con la etiqueta DIV
d) Definir un primer contenedor con el siguiente contenido:
a. Insertar un título h3: Primer contenedor DIV
b. Insertar 2 párrafos cualesquiera (puede utilizar Lorem)
e) Definir un segundo contenedor con el siguiente contenido:
a. Insertar un título h3: Segundo contenedor DIV
b. Insertar las imágenes foto01.jpg y foto02.jpg que se encuentran en la carpeta del ejercicio
anterior (Actividad_2/img).
f) Definir un tercer y último contenedor con el siguiente contenido:

9
a. Insertar un título h3: Tercer contenedor DIV
b. Insertar la imagen foto03.jpg que se encuentran en la carpeta del ejercicio anterior

(Actividad_2).
c. Insertar un título h5: Descargar PDF aquí con un enlace al archivo Axel.pdf

10
Actividad 4
a) Armar una carpeta con el nombre Actividad_4. Dentro de esta carpeta copiar la carpeta
img (que contiene los archivos foto01.jpg y foto02.jpg) y crear los archivos
actividad4_pag1.html y actividad4_pag2.html
b) En el archivo actividad4_pag1.html
a. definir la estructura básica de la página. Al abrir nuestra página en el navegador la

pestaña dirá: Página 1 seguida de su apellido. Por ejemplo: Página 1 Rodríguez.
b. Definir las etiquetas necesarias para que la página quede como el modelo:
c) En el archivo actividad4_pag2.html
a. Definir la estructura básica de la página. Al abrir nuestra página en el navegador la

pestaña dirá: Página 2 seguida de su apellido. Por ejemplo: Página 2 Rodríguez.
11
Actividad 5 – Integradora
a) Armar una carpeta con el nombre Actividad_5. Dentro de esta carpeta crear la carpeta img
(con una imagen a elección – puede usar también la imagen foto_perfil.png que encontrará
en los materiales) y crear los archivos cv.html y formulario.html
b) En el archivo cv.html

pestaña dirá: CV seguido de su apellido. Por ejemplo: CV Alonso.

12
c) En el archivo formulario.html

pestaña dirá: Formulario seguido de su apellido. Por ejemplo: Formulario Alonso.

13
Actividades para pensar
1) Lea atentamente el siguiente fragmento de código y marque el o los errores que pueda encontrar:
...
<body>
<h1>Actividad para pensar</h1>
<h1>Ejemplo de lista desordenada</h1>
<li>
<ul>Item 1</ul>
<ul>Item 2</ul>
<ul>Item 3</ul>
</li>
</body>
...
2) Lea atentamente el siguiente fragmento de código y complete con el código que se necesita para
poder visualizar (después del título y antes de la descripción) la imagen foto01.jpg en la página
que está diseñando. Tener en cuenta que la estructura de carpetas es la siguiente:
...
<body>
<h1>Título de la imagen</h1>
<p>Texto descriptivo de la imagen</p>
</body>
...
3) Observe la siguiente página web. Identifique y complete con la etiqueta que corresponda:

14
15

UTN - BA DAV PrÃ¡cticas DiseÃ o Web - 01 - HTML - Etiquetas Bã¡sicas-2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UTN - BA DAV PrÃ¡cticas DiseÃ o Web - 01 - HTML - Etiquetas Bã¡sicas-2

Cargado por

Copyright:

Formatos disponibles

Diseño Web – HTML y CSS

01. Práctica HTML etiquetas básicas

UTN.BA - Departamento de Aprendizaje Visual (DAV)

HTML – Etiquetas básicas ................................................................................................................................ 1

¿Qué es HTML? ................................................................................................................................................1

Actividades para pensar .................................................................................................................................14

UTN.BA - Departamento de Aprendizaje Visual (DAV)

¿Qué significa etiquetas específicas?

<p>Esta etiqueta es para indicar que este texto es un párrafo</p>

<title>Esta es la etiqueta donde colocaremos el título de la página</title>

¿Cuáles son las partes principales del elemento HTML?

UTN.BA - Departamento de Aprendizaje Visual (DAV)

• El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al

Estructura básica de un documento

La estructura para empezar a trabajar es la siguiente:

<!DOCTYPE html> Definición del tipo de documento.

<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la barra

UTN.BA - Departamento de Aprendizaje Visual (DAV)

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

UTN.BA - Departamento de Aprendizaje Visual (DAV)

UTN.BA - Departamento de Aprendizaje Visual (DAV)

b) En el archivo actividad1.html definir la estructura básica de la página. Al abrir nuestra página en

c) Insertar como título h1: Hola soy un título!

e) Insertar un título h2: Soy un subtítulo

f) Insertar un título h3: Lista desordenada

g) Armar una lista desordenada con 3 ítems.

h) Insertar un título h3: Lista ordenada

i) Armar una lista ordenada con 5 ítems.

La página debe quedar como muestra el modelo:

UTN.BA - Departamento de Aprendizaje Visual (DAV)

b) En el archivo actividad2.html definir la estructura básica de la página. Al abrir nuestra página en

UTN.BA - Departamento de Aprendizaje Visual (DAV)

d) Insertar como título h3: Imagen 1 dentro de carpeta

e) Insertar la Imagen 1 que se encuentra dentro de la carpeta img

f) Insertar como título h3: Imagen 2 con hipervínculo

h) Insertar como título h3: Imagen 3 mismo directorio

i) Insertar la Imagen 3 que se encuentra en el mismo directorio que el archivo actividad2.html

La página debe quedar como muestra el modelo:

UTN.BA - Departamento de Aprendizaje Visual (DAV)

b) En el archivo actividad3.html definir la estructura básica de la página. Al abrir nuestra página en

c) Insertar como título h1: Trabajando con la etiqueta DIV

d) Definir un primer contenedor con el siguiente contenido:

a. Insertar un título h3: Primer contenedor DIV

b. Insertar 2 párrafos cualesquiera (puede utilizar Lorem)

e) Definir un segundo contenedor con el siguiente contenido:

a. Insertar un título h3: Segundo contenedor DIV

f) Definir un tercer y último contenedor con el siguiente contenido:

b. Insertar la imagen foto03.jpg que se encuentran en la carpeta del ejercicio anterior

La página debe quedar como muestra el modelo:

UTN.BA - Departamento de Aprendizaje Visual (DAV)

a. definir la estructura básica de la página. Al abrir nuestra página en el navegador la

a. Definir la estructura básica de la página. Al abrir nuestra página en el navegador la

a. definir la estructura básica de la página. Al abrir nuestra página en el navegador la

UTN.BA - Departamento de Aprendizaje Visual (DAV)

a. definir la estructura básica de la página. Al abrir nuestra página en el navegador la

UTN.BA - Departamento de Aprendizaje Visual (DAV)

<p>Texto descriptivo de la imagen</p>

UTN.BA - Departamento de Aprendizaje Visual (DAV)

También podría gustarte