ESCUELA ACADÉMICA PROFESIONAL DE

INGENIERÍA DE SISTEMAS

LABORATORIO N° 01
Escuela Profesional: Ingeniería de Sistemas. Asignatura: INGENIERÍA WEB
Sección: C1 Semestre Académico: 2024-I

Ejemplos Prácticos
Ejemplo1: Confeccionar una tabla que muestre la facturación de los
últimos tres meses de los artículos: 'Audífonos', 'CPU' y 'Monitores'. La
primera columna debe mostrar solo el texto 'recursos' y en la primera fila
el texto 'Facturación de los últimos tres meses'.
Paso 1: Crear un Folder
Aquí es donde vamos a almacenar nuestros archivos que utilizaremos
 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

En la siguiente ruta crearemos nuestro folder llamado ejemplo 1

Paso 2: Crear nuestro primer php.

Le damos click a nuevo archivo y le damos el nombre de ejemplo1.php (solo si has
seguidos los pasos de instalación de php) o ejemplo1.html cualquiera de estas 2
formas funcionara para estos problemas.
 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Aquí ya podemos iniciar a resolver el problema

Paso 3: Creando las secciones

Iniciamos creando las secciones que todo HTML tiene que son la cabecera y el cuerpo

Paso 4: Creando tablas

Utilizamos la etiqueta <table> para ello y creamos las filas y celdas respectivas,
ingresando los datos del problema. Utilizamos también Colspan para definir las columnas
que va a ocupar y Rowspan para definir las filas que va a ocupar
 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Paso 5: Guardamos y corremos el programa

 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Ejemplo 2: Confeccionar una página que muestre dos imágenes (foto1 y

foto2) como hipervínculos. Al ser presionados llamar a otra página. Las
imágenes se encuentran en una carpeta llamada imágenes que depende
directamente de la raíz del sitio.

Paso1: creamos el folder llamado ejemplo2

 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Paso 2: creamos 3 php o html con los siguientes nombres y la carpeta donde estará
nuestras imágenes

Paso 3: ingresamos las imágenes a la carpeta img.

Paso 4: ingresamos el código html a paginaprincipal.php

Aquí utilizaremos la etiqueta <a></a>para realizar los hipervínculosdonde en el href
Ingresamos el destino del enlace y el img para llamar a la imagen que tenemos
almacenada en la carpeta img donde podemos alterar el tamaño de esta utilizando
height(altura) y width(anchura) en caso sea demasiado grande.

Paso 5: Ahora ingresaremos el código html para las páginas 1 y 2

 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Como se puede visualizar cada página tiene su párrafo utilizando la etiqueta <p></p> y
la etiqueta <a></a> para regresar a la página principal donde ingresamos el destino del
enlace y el texto indicativo en la pantalla

Paso 6: Guardamos todo y corremos el programa

 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Damos clic en las imágenes y veremos que nos manda a su respectiva pagina.
 ESCUELA ACADÉMICA PROFESIONAL DE
INGENIERÍA DE SISTEMAS

Ejemplo 3: Crear una página que contenga cuatro párrafos. En el primero

enfatizar con el máximo nivel y en los otros párrafos emplear el elemento
de enfatizar de menor fuerza.
PASO 1: creamos carpeta llamada ejemplo3 y creamos el html llamado pagina.html

PASO 2: ingresamos las siguientes etiquetas para lograr enfatizar lo mas importante del texto.
Utilizamos la etiqueta <p></p> para crear un párrafo, la etiqueta <em></em> para enfatizar
texto y la etiqueta <strong></strong> para marcar el texto en negrita.

PASO 3. Guardamos todo y corremos el programa