Laboratorio 1 AplicandoHTML

Desarrollo Web
Profesora Nichol Sánchez Kirsch
Laboratorio #1.
Estructura de HTML y sus etiquetas
Ahora a conocer un poco sobre HTML. En este laboratorio instalará un

editor de código en su computador y creará la estructura de una página HTML y
probará múltiples etiquetas HTML. Recomiendo no copiar y pegar, escríbelos
para que vayas identificando donde te equivocas y aprendas a depurar errores.
Objetivo
Examinar las etiquetas de HTML5 mediante el uso de un editor de texto y la creación
y prueba de una página de HTML.
Indicaciones
1. Revise la Unidad I, del Módulo II.

2. Siga todos los pasos indicados en este documento.
3. Terminado todos los pasos, suba en la sección de Laboratorio #1, el archivo html
con el nombre: ApellidoNombre-Laboratorio1.
1
Desarrollo Web
Parte I- Instalar un editor de texto
1. Acceda a: https://code.visualstudio.com/download
2. Seleccione su versión a descargar, dependiendo de su sistema operativo:
Windows, Linux o MacOS.
3. Descargado el archivo, abra el archivo:
4. Aparecerá una ventana, solicitando que acepte el acuerdo, selecciona que

acepta el acuerdo y presiona Siguiente. Solicitará otras opciones como la
ubicación donde se instalará y otras configuraciones, puede darle siguiente a
todas, hasta llegar a la ventana Listo para Instalar, seleccione Instalar.
Terminada la instalación, Finalizar.
5. Se abrirá el programa. Seleccione New File:
6. Aparecerá un campo para escribir el nombre del archivo y la extensión

coloque:
mi-pagina-web.html y presione la techa Intro/Enter
2
Desarrollo Web
7. Solicitará seleccionar la ubicación donde desea guardar el archivo. Seleccione

la ubicación y presione Create File/Crear Archivo:
8. Se abrirá el archivo HTML, listo para agregar nuestro código.
Hasta aquí, ya cuenta con el editor de código instalado y el

archivo HTML creado.
3
Desarrollo Web
Parte II- Estructura de HTML
9. En el HTML mi-pagina-web escriba lo siguiente:
<!DOCTYPE html>
Esta línea define la versión de HTML que se está utilizando en la página. En este
caso, se está utilizando HTML5.
Seguido, para indicar el inicio y el cierre del código HTML coloque:
<!DOCTYPE html>
<html>
</html>
Dentro de las etiquetas HTML, proceda colocando la etiqueta HEAD y TITLE

para el nombre de la página en la pestaña del navegador:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
</ html >
10. Grabe sus avances, presionando las teclas: CTRL+S
11. Abra el archivo mi-pagina-web.html en un navegador.
Como resultado debe salir la página en blanco y la pestaña debe tener el nombre
del título:
Como puede observar la tilde de página no se visualiza adecuadamente.

4
Desarrollo Web
Para esto, agregue: <meta charset="utf-8"/> así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
</ html >
Esta etiqueta permite que el navegador web sepa cómo interpretar los caracteres
de la página y mostrar el contenido correctamente al usuario.
12. Nuevamente guarde el archivo html y en el navegador presione la tecla F5.

En el navegador ahora la pestaña debe verse así:
13. Ya tenemos la cabeza, ahora vamos con el cuerpo. Para esto, coloque después
del cierre de head (</head>), la etiqueta body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</ html >
14. Grabe sus avances, presionando las teclas: CTRL+S
¡Excelente! Ya cuenta con una estructura básica de HTML

5
Desarrollo Web
Parte III – Elementos HTML
15. Agregue algunos elementos semánticos html. Todos los elementos se

colocarán en el body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>Aquí vamos a colocar el encabezado</header>
<main>Acá todo el contenido principal</main>
<footer>Aquí el pie de página del sitio</footer>
</body>
</ html >
16. Ahora, agrega elementos de contenido de html:
<body>
<header>
<h1>Encabezado de mi página web</h1>
</header>
<main>
<p>Contenido principal de mi página</p>
</main>
<footer><p>pie de página</p></footer>
</body>
6
Desarrollo Web
17. Como resultado, debe tener un código como la imagen:
18. Nuevamente guarde el archivo html y en el navegador presione la tecla F5.

En el navegador ahora la pestaña debe verse así:
7
Desarrollo Web
¡Muy bien! Has creado tu primera página web en HTML

Agrega y prueba unas cuantas etiquetas más
¡Vas muy bien, ya falta menos!
19. Antes de avanzar a la IV Parte, añade a tu código 5 etiquetas de contenido

HTML listados en la Unidad 1 en el body, que no están agregados aún en tu
archivo de HTML.
8
Desarrollo Web
Parte IV – Etiquetas de listas ordenadas
20. Agrega los siguientes elementos a la etiqueta body y prueba:
<p>Lista no ordenada o con viñetas</p>

<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
</ul>
21. Ahora, basándote del paso 20, utiliza la etiqueta correcta para agregar una lista
ordenada. ¿Sabes cuál es?
Parte V – Marcadores o anclas
22. Por último, añade los marcadores o anclas, que permitirá direccionar por medio
de un enlace, contenido en nuestra página:
<ul>
<li><a href="#seccion1">Sección 1</a></li>
</ul>
<h2 id="seccion1">Sección 1</h2>

<p>Esta es la sección 1 del contenido.</p>


9
Desarrollo Web
23. Nuevamente guarda el archivo html y en el navegador presiona la tecla F5.
¡Listo! Este laboratorio fue más de probar las funciones de

cada etiqueta.
Sigue practicando, en la siguiente unidad veremos más
etiquetas como imágenes, videos, tablas, etc.
10

Laboratorio 1 AplicandoHTML

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

Laboratorio 1 AplicandoHTML

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web

Profesora Nichol Sánchez Kirsch

Ahora a conocer un poco sobre HTML. En este laboratorio instalará un

1. Revise la Unidad I, del Módulo II.

Parte I- Instalar un editor de texto

3. Descargado el archivo, abra el archivo:

4. Aparecerá una ventana, solicitando que acepte el acuerdo, selecciona que

5. Se abrirá el programa. Seleccione New File:

6. Aparecerá un campo para escribir el nombre del archivo y la extensión

mi-pagina-web.html y presione la techa Intro/Enter

7. Solicitará seleccionar la ubicación donde desea guardar el archivo. Seleccione

8. Se abrirá el archivo HTML, listo para agregar nuestro código.

Hasta aquí, ya cuenta con el editor de código instalado y el

Parte II- Estructura de HTML

9. En el HTML mi-pagina-web escriba lo siguiente:

Seguido, para indicar el inicio y el cierre del código HTML coloque:

Dentro de las etiquetas HTML, proceda colocando la etiqueta HEAD y TITLE

10. Grabe sus avances, presionando las teclas: CTRL+S

11. Abra el archivo mi-pagina-web.html en un navegador.

Como puede observar la tilde de página no se visualiza adecuadamente.

Para esto, agregue: <meta charset="utf-8"/> así:

12. Nuevamente guarde el archivo html y en el navegador presione la tecla F5.

14. Grabe sus avances, presionando las teclas: CTRL+S

¡Excelente! Ya cuenta con una estructura básica de HTML

Parte III – Elementos HTML

15. Agregue algunos elementos semánticos html. Todos los elementos se

16. Ahora, agrega elementos de contenido de html:

17. Como resultado, debe tener un código como la imagen:

18. Nuevamente guarde el archivo html y en el navegador presione la tecla F5.

¡Muy bien! Has creado tu primera página web en HTML

¡Vas muy bien, ya falta menos!

19. Antes de avanzar a la IV Parte, añade a tu código 5 etiquetas de contenido

Parte IV – Etiquetas de listas ordenadas

20. Agrega los siguientes elementos a la etiqueta body y prueba:

<p>Lista no ordenada o con viñetas</p>

Parte V – Marcadores o anclas

<h2 id="seccion1">Sección 1</h2>

<h2 id="seccion2">Sección 2</h2>

<h2 id="seccion3">Sección 3</h2>

23. Nuevamente guarda el archivo html y en el navegador presiona la tecla F5.

¡Listo! Este laboratorio fue más de probar las funciones de

También podría gustarte