S02_GUIA DE LAB_Ejercicios basicos HTML

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
Replicar los ejercicios que se describen. Utilice sus propios textos.
Prepárese para presentar y sustentar los resultados de sus ejercicios.
INSTRUCCIONES
1. Crear la carpeta APELLIDO_PATERNO_APELLIDO_MATERNO_NOMBRE
➢Por ejemplo: RODRIGUEZ_ABAD_JOSE_LUIS
2. Dentro de la carpeta creada desarrollar todos los ejercicios del presente laboratorio.
3. Abrir un block de notas y tipear las etiquetas HTML que se muestran a continuación. Replicar cada
ejemplo. Iniciar con las etiquetas y textos del archivo 01_practica01.html
4. Al grabar su archivo (en adelante, conocido como página web) utilice la siguiente nomenclatura, por
ejemplo: Guardar el archivo como 01_practica01.html
5. Para ejecutar el documento HTML (la página web), pulsar doble click en el archivo guardado.
6. Al término, al completar todos los ejercicios, comprimir la carpeta con formato .ZIP
➢Otro formato no será considerado y corresponderá CERO puntos en su calificación.
7. Subir la carpeta comprimida a la plataforma virtual que indicará el docente.
01_practica01.html
<!DOCTYPE html>
<html>
<head>

<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>HOLA MUNDO</p><br><p>Esta es mi primera página web</p>
</body>
</html>
ARQUITECTURA WEB
ANALICE
• ¿Qué efecto tiene la etiqueta ?
• Explique los efectos de las etiquetas <title> <meta name …> <meta http-equiv…>
Sugerencia: pase el mouse por la pestaña del navegador
02_practica01A.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<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>
03_practica02.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p align=center> La Tierra es nuestro planeta </p>
</body>
</html>
ARQUITECTURA WEB
04_practica03_Repaso pag 1.html
<!DOCTYPE html>
<html>
<head>
<title>practica03_repaso pag 1</title>
</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>
ANALICE
• ¿Qué efecto tienen los caracteres < y >?
• Explique los efectos de los atributos align y style de la etiqueta <p>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>
<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>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>
<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 &LT;/p> permite
que el navegador muestre dicho titulo centrado en la pantalla.
</p>
<p> VERDADERO</p>
<p> FALSO</p>
</h3>
</body>
</html>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</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>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</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>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</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>
ARQUITECTURA WEB
<!DOCTYPE html>
<html>
<head>
</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>
11_CV_[ApellidoPaterno_ApellidoMaterno_Nombre]_version 1.html
NOTA.
• Incluir su página web de ejercicio 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.
• Presente, entregue o suba a la plataforma indicada, en el plazo establecido por el docente.

S02_GUIA DE LAB_Ejercicios basicos HTML

Cargado por

Copyright:

Formatos disponibles

S02_GUIA DE LAB_Ejercicios basicos HTML

Cargado por

Información del documento

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

S02_GUIA DE LAB_Ejercicios basicos HTML

Cargado por

Copyright:

Formatos disponibles

ARQUITECTURA WEB

GUÍA DE PRÁCTICA DE LABORATORIO

LOGRO DE LA SESIÓN DE APRENDIZAJE

04_practica03_Repaso pag 1.html

05_practica03_Repaso pag 2.html

06_practica03_Repaso pag 3.html

07_practica04_Repaso pag 1.html

08_practica04_Repaso pag 2.html

09_practica04_Repaso pag 3.html

10_practica04_Repaso pag 4.html

También podría gustarte