ARQUITECTURA WEB
GUÍA DE LABORATORIO
GUÍA DE PRÁCTICA DE LABORATORIO
CURSO : Arquitectura WEB
SESIÓN : Laboratorio Nro. 2
TEMA : Ejercicios de introducción
LOGRO DE LA SESIÓN DE APRENDIZAJE
Al término de la sesión de aprendizaje, el participante será capaz de:
✓ Implementar documentos HTML denominadas páginas web.
✓ Explicar las características de las etiquetas HTML utilizadas.
INSTRUCCIONES
1. Crear la carpeta APELLIDO PATERNO_APELLIDO MATERNO_NOMBRE 1_NOMBRE 2
a. Es obligatorio usar mayúsculas y guiones bajos
b. Todos los archivos de trabajo deben guardarse dentro de la carpeta creada
2. Abrir un block de notas por cada ejercicio y tipear las etiquetas HTML que se muestran a continuación.
a. En la guía se describen los diferentes ejercicios a desarrollar
3. Replicar exactamente cada ejercicio de la guía, ejecutar los ejercicios y leer los contenidos.
a. Iniciar con las etiquetas y textos del archivo 01_practica01.html
b. Luego, continuar con cada ejemplo de la guía.
4. Guardar cada ejercicio en un archivo diferente dentro de la carpeta creada.
5. Al grabar su archivo (en adelante, conocido como página web utilice la siguiente nomenclatura, por ejemplo:
Guardar el archivo como 01_practica01.html
a. Cumplir con las nomenclaturas especificadas (OBLIGATORIO).
6. Ejecutar cada documento HTML (página web), para lo cual pulsar doble click en el archivo guardado.
a. Analizar el resultado de cada documento HTML ejecutado.
7. A continuación, replicar los ejercicios que se describen, pero con sus propios textos.
a. Es decir, realizar dos veces cada ejercicio
8. Presentar y sustentar los resultados de todos sus ejercicios.
9. Al terminar con todos los ejercicios, comprimir la carpeta con formato .ZIP
a. Verificar el archivo comprimido
APELLIDO PATERNO_APELLIDO MATERNO_NOMBRE 1_NOMBRE 2.zip
10. Subir a la plataforma virtual la carpeta comprimida según indicaciones del docente.
TIPEAR EL CODIGO HTML, EJECUTAR LA PAGINA Y ESTUDIAR EL CONTENIDO
Página web 01_practica01.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>Web saludo</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!--Cuerpo de la página web--><p>HOLA MUNDO</p><br><p>Esta es mi primera página web</p>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
ANALICE
• ¿Qué efecto tiene la etiqueta <!--Cuerpo de la página web-->?
• Explique los efectos de las etiquetas <title> <meta name …> <meta http-equiv…>
o Averigüe en internet
Sugerencia: pase el mouse por la pestaña del navegador
Página web 02_practica01A.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>Web saludo</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- Cuerpo de la página web -->
<p>HOLA MUNDO hermoso. Me siento feliz de practicar HTML</p><br>
<p>Esta es mi primera página web y espero crear muchas más...</p>
</body>
</html>
RESULTADO
Página web 03_practica02.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>Web saludo</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba,html,web">
<meta http-equiv="content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p align=center> La Tierra es nuestro planeta </p>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 04_practica03_Repaso pag 1.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica03_repaso pag 1</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ALINEACION DE TEXTOS</p>
<p>< p align ="center" > Este es un texto centrado </p></p>
<p align ="center" style="color: blue"> Este es un texto centrado </p>
<p>< p align="right" > Este es un texto alineado a derecha </p></p>
<p align ="right" style="color: blue"> Este es un texto alineado a derecha </p>
<p>< p align="left" > Este es un texto ajustado hacia izquierda </p></p>
<p align ="left" style="color: blue"> Este es un texto ajustado hacia izquierda </p>
</h3>
</body>
</html>
RESULTADO
ANALICE
• ¿Qué efecto tienen los caracteres < y >?
• Explique los efectos de los atributos align y style de la etiqueta <p>
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 05_practica03_Repaso pag 2.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica03_repaso pag 2</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba,html,web">
<meta http-equiv="content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<h3>
<p>ALINEACION DE TEXTOS</p>
<p style="color: red"> ¿Qué pasa si escribimos incorrectamente? </p>
<h3><p>< p align="rigth" > TEXTO QUE QUISE AJUSTAR A DERECHA</p></p></h3>
<h2><p align="rigth" style="color: blue">TEXTO QUE QUISE AJUSTAR A DERECHA</p></h2>
<h3><p>< p align="right" > TEXTO AJUSTADO A DERECHA </p></p></h3>
<h2><p align="right" style="color: blue">TEXTO AJUSTADO A DERECHA</p></h2>
<h3><p style="color: red"> ¿Qué pasa si omitimos un corchete angular? </p></h3>
<h3><p>< p align="center" ESTRATEGIA DE MARKETING</p></p></h3>
<h2><p align="center" ESTRATEGIA DE MARKETING </p><br></h2>
<h3><p>< p align="center" > ESTRATEGIA DE MARKETING </p> </p></h3>
<h2><p align="center" style="color: blue"> ESTRATEGIA DE MARKETING </p></h2>
</h3>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 06_practica03_Repaso pag 3.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica03_repaso pag 3</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ALINEACION DE TEXTOS</p>
<p>PREGUNTA 01</p>
<p>
El atributo "align" de la etiqueta "p" se utiliza para centrar los titulos de mis documentos de trabajo en La Escuela. La
instrucción < p align="center" MI TRABAJO DE INVESTIGACION </p> permite que el navegador muestre dicho
titulo centrado en la pantalla.
</p>
<p> VERDADERO</p>
<p> FALSO</p>
</h3>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 07_practica04_Repaso pag 1.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica04_repaso pag 1</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ENCABEZADOS</p>
<p>< h1> esta es la cabecera más grande </h1></p>
<h1> esta es la cabecera más grande </h1>
<p>< h6> esta es la cabecera más chica </h6></p>
<h6> esta es la cabecera más chica </h6>
<p>< p> y este es un texto en tamaño normal </p></p>
<p> y este es un texto en tamaño normal </p><br>
</h3>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 08_practica04_Repaso pag 2.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica04_repaso pag 2</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ENCABEZADOS</p>
<p> Usualmente se trabaja con textos en tamaño normal y, de ser necesario, se utiliza encabezados para los titulos y los
subtitulos según lo requiera quien elabora el documento. Para ello, combinamos etiquetas. Por ejemplo:</p><br>
<p>< h2> < p align="center" style="color: green" > TITULAR ECOAMIGABLE </p> </h2></p>
<h2><p align="center" style="color: green">TITULAR ECOAMIGABLE</p></h2><br>
<h3><p>Es importante resaltar que si es posible incluir más de un atributo en las etiquetas de apertura. </p></h3>
</h3>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 09_practica04_Repaso pag 3.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica04_repaso pag 3</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ENCABEZADOS</p>
<p style="color: red">El orden de los factores a veces altera el producto...</p>
<p>< p align="center" style="color: blue" > < h1> NOTICIA DE IMPACTO </h1> </p></p>
<p align="center" style="color: blue"><h1>NOTICIA DE IMPACTO</h1></p>
<h3><p>< h1> < p align="center" style="color: blue" > NOTICIA DE IMPACTO </p> </h1>
</p></h3>
<h1><p align="center" style="color: blue">NOTICIA DE IMPACTO</p></h1>
</h3>
</body>
</html>
RESULTADO
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Página web 10_practica04_Repaso pag 4.html
Código HTML
<!DOCTYPE html>
<html>
<head>
<!--Cabecera de la página web-->
<title>practica04_repaso pag 4</title>
<meta name="description" content="página de prueba">
<meta name="keywords" content="prueba, html, web">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>
<p>ENCABEZADOS</p>
<p>PREGUNTA 02</p>
<p>
Presentar un informe con profesionalismo implica centrar los titulos y que se destaquen del contenido restante. El
siguiente esquema de etiquetado coloca el titulo del informe al centro del documento: < p align="center" > <
h1> REPORTE DE AUDITORIA </h1> </p>
</p>
<p>VERDADERO</p>
<p>FALSO</p>
</h3>
</body>
</html>
RESULTADO
11_CV_[ApellidoPaterno_ApellidoMaterno_Nombre]_version 1.html
NOTA.
• Incluir su página web de ejercicio pendiente como tarea de la clase anterior
• Cíñase estrictamente a lo indicado; es decir, no utilice otras etiquetas y/o funciones diferentes de las presentadas
en el curso. El incumplimiento de este requisito invalidará su presentación.
ARQUITECTURA WEB
GUÍA DE LABORATORIO
MISCELANEO
Página web 12_miscelaneo01.html
Objetivo
• Crear una página web, para lo cual:
o Editar un texto obtenido de la Web según procedimiento descrito.
• Exponer el contenido de la página web creada.
Procedimiento
• Identificar un sitio web cuyo contenido sea de su interés.
• Copiar al menos tres (03) textos de una de sus páginas web.
• En la página a implementar, los tres grandes textos copiados deberán separarse entre sí por medio de una línea
separadora.
• Estos textos deben subdividirse al menos en dos (02) párrafos cada uno.
• Entonces, en este caso, los textos de dichos párrafos (al menos seis en total) deberán desplegar características
variadas en cuanto a su alineamiento y color.
• Incluir un título general del tema con letras del tamaño más destacado posible.
• Incluir tres títulos de segundo tamaño precediendo cada uno de los tres grandes textos copiados.
• Todos los títulos deben desplegarse con colores variados, diferentes entre sí y diferentes del color estándar
(negro).
• Verificar la ortografía y prepararse para exponer el tema con apoyo de la página creada.
• Incluir un superíndice para referir la fuente bibliográfica.
ETIQUETAS DE REFERENCIA BIBLIOGRÁFICA
• <sup>3</sup> incluye el texto 3 como superíndice.
• <sub>5</sub> incluye el texto 5 como subíndice.
Por ejemplo,
…los elementos químicos pueden ser de origen natural o artificial <sup>7</sup>…
ARQUITECTURA WEB
GUÍA DE LABORATORIO
Aquí se aprecia el superíndice que referencia a la fuente bibliográfica.
El código correspondiente es el siguiente
