ESCUELA INDUSTRIAL SUPERIÓR

¨PEDRO DOMINGO MURILLO¨

CARRERA : INFORAMTICA INDUSTRIAL
ASIGNATURA : TEW-200 Tecnología Web I
TEMA LAB. : HTML 5 Y CSS 3
DOCENTE : Lic. Edgar Mendoza F.
INTEGRANTE : LOZA YUGRA ABEL
FECHA : 04/10/22

HTMIL 5 Y CSS 3
1 OBJETIVOS
1.1 Objetivos General
 Diseñar una página web en base a un rubro específico seleccionado, aplicando HTML 5 y los estilos vistos con
CSS 3.
 Una vez diseñada la pagina web, entrar de manera local desde el mismo ordenador y de manera local desde
otro equipo.

1.2 Objetivo Especifico

 Realizar la aplicación de formularios con diversas características de la etiqueta “input” en una página web.
 Realizar la configuración del servidor web Apache, por medio del gestor XAMPP accediendo a una página web
montada en este servidor.
 Acceder a una página web de manera local desde el mismo equipo donde está instalado el servidor web.
 Acceder a una página web de manera local desde otro equipo que tenga acceso al servidor web.

2 MATERIALES, EQUIPO Y SOFTWARE

 Visual Code 1.42.1
 XAMPP 7.2.29 o superior para la plataforma a utilizar en este caso Windows.
 Explorador (Mozilla Firefox, Google Chrome, Brave, opera etc).
 Set de instrucciones.

3 MARCO TEORICO PARA EL DESARROLLO DEL LABORATORIO

3.1 CSS 3
3.1.1 Que significa CSS 3
CSS3 es una tecnología que ha tenido una evolución en el tiempo, que actualmente se encuentra en su versión 3,
como su propio nombre indica.

Sus siglas corresponden a “Cascading Style Sheets” (CSS), que tiene el siguiente significado:

 CASCADING

Que significa que los estilos que aplicamos a los elementos de una página web se propagan a los elementos que
contiene, se propagan en cascada.

 STYLE

Porque mediante CSS lo que hacemos es aplicar estilos visuales a los distintos elementos de nuestra página web.

 SHEETS
1
Que significa hojas, porque los estilos de una página web se añaden en ficheros aparte, en ficheros con la
extensión .css de manera general.

3.1.2 Funcionamiento
Vamos a ver en un pequeño esquema qué es lo que sucede desde que se solicita una página web hasta que se le
aplica el estilo. El proceso es el siguiente:

Cuando desde un navegador, por ejemplo, Chrome, solicitamos una página a través de una dirección, por ejemplo,
http:// .... /index.html, esta petición va a un servidor web, que nos devuelve la página que se ha solicitado.

Para aplicar estilos en las páginas HTML, se utiliza un fichero aparte, una hoja de estilos con la extensión .css, por lo
que cuando estos dos documentos llegan al navegador, lee el documento HTML, le aplica los estilos CSS y lo muestra.

3.1.3 ¿Cómo funcionan las hojas de estilo en casacada?

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describen el aspecto que deben
tener los diferentes elementos HTML de una página.

La idea más importante detrás de las hojas de estilo CSS es separar el contenido de su presentación, es decir, de su
aspecto visual. En las páginas web el lenguaje HTML se usa para estructurar el contenido semánticamente (títulos,
subtítulos, texto, etc.) y CSS para la maquetación y estética del mismo.

Este principio es fundamental por muchos motivos. Un ejemplo claro es el “diseño adaptativo” (responsive design):
poder adaptar el mismo contenido a diferentes dispositivos. Es decir, que una misma página web se puede visualizar
de una manera diferente en un PC que un móvil, optimizada para cada caso.

Veamos un ejemplo de cómo se expresarían las reglas anteriores en el lenguaje de las CSS:

3.1.4 Los elementos básicos CSS: Reglas, Selectores y Propiedades

Para hacer esto, el concepto fundamental de las hojas CSS son las reglas. Con las reglas podemos definir cosas como
éstas:

2
  “El título principal de cada página (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente
“Montserrat” con un tamaño de 40 pixeles”
 “Los subtítulos de cada página de nivel dos (<h2>) deben estar alineados a la izquierda, color negro
ligeramente más claro y usar también el tipo de letra “Montserrat”, pero con un tamaño de 32 pixeles.”
 “Las imágenes dentro de la columna principal deben expandirse siempre al ancho máximo de dicha
columna.”
 Etc. etc., etc.

Si observamos, como mencionamos es lo mismo que hacemos de manera visual con cualquier editor de texto, pero
expresado de una manera literal y en un lenguaje que no es nuestro lenguaje natural, sino un lenguaje especial, más
aptado a un ordenador.

Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían este aspecto:

Con este ejemplo ya podemos ver perfectamente cómo funcionan las hojas
de estilo CSS.

3.1.4.1 Las reglas de escritura de CSS

En primer lugar, nos fijaremos cómo esta hoja de estilos se divide en tres bloques
diferenciados, envueltos en llaves, “{…}”.

Esto son las reglas. Cada una implementa una directiva concreta de la pequeña lista
de reglas que había formulario de una manera redactada un poco más arriba.

3.1.4.2 Los selectores en CSS

Para especificar a qué partes de la página HTML se aplica cada regla en cuestión, le
precede un selector. Este selector especifica el ámbito de aplicación de la regla, es
decir, a qué partes de la página aplica.

Si nos imaginamos un documento HTML como sus elementos como un árbol (recuerda que están organizados de
manera jerárquica), este ámbito de aplicación va a ser una o varias ramas de ese árbol.

En las dos primeras reglas (selectores “h1” y “h2”) el ámbito de aplicación es muy amplio porque los selectores son
elementos HTML. Es decir, estamos diciendo que la primera regla se aplique a todos los elementos <h1> y que la
segunda se aplique a todos elementos <h2>.

El último selector hila un poco más fino: éste nos está diciendo que la tercera regla se aplica solamente a elementos
<img> que sean hijos de un elemento <div>. Esto se hace con la posición de los elementos, es decir, al poner “img” a
la derecha de “div” estamos diciendo que img tiene que tener un <div> como padre.

Pero, además, con el sufijo de “. contenido” estamos diciendo que ese “div” no puede ser cualquier div, sino que, a su
vez, este <div> tiene que pertenecer a la clase “contenido”. Esto nos es útil para diferenciar distintos bloques <div> y
en el ejemplo lo usaremos para diferenciar la columna principal de contenido de la columna de la barra lateral.

3
Podríamos haber hecho lo mismo con cualquier otro elemento HTML. En general, las clases (atributo “class” en
HTML) son muy útiles para tratar los mismos elementos HTML de una manera diferenciada según su lugar y función
en la página.

3.1.4.3 Las propiedades en CSS

Por último, están las propiedades, esto es lo que vemos encerrado dentro de las llaves de una regla.

Las reglas siguen la sintaxis de propiedad: valor.

Por ejemplo:

Aquí estamos diciendo que a los elementos que entran dentro del ámbito de la regla se les aplique un tamaño de
letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>, <h2>,
<p>, etc. Pero aunque entre algún elemento dentro del ámbito de la regla que no sea tipo texto, no pasa nada. En ese
caso, se ignora esa propiedad concreta y listo.

Hay cientos de propiedades de las cuales destacaremos las más frecuentemente usadas y más útiles. En cuanto a los
selectores, los ejemplos han sido simple puesto que se refieren a elementos HTML sin más, pero hay formas mucho
más sofisticadas de diseñar selectores.

En resumen podemos mencionar:

3.1.5 Maquetación Básica

 width: Ancho de un elemento.
 height: Alto de un elemento.
 vertical-align: Alineamiento vertical dentro de un elemento.
 margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo,
izquierda, derecha).
 padding: Relleno interior que se añade en los bordes y el contenido diferencia de margin, cuenta para el
tamaño del elemento.
 float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento
flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de
usar esta propiedad.

4
3.1.6 Propiedades CSS para fuentes y texto
 font-family: Tipo de letra
 font-size: Tamaño de letra
 font-weight: Peso (normal, negrita, …)
 font-style: Estilo (normal, cursiva, …)
 letter-spacing: espacio entre letras.
 text-decoration: “Decoraciones” como subrayado, tachado, etc.
 text-align: Alineación del texto (izquierda, derecha, etc.)
 text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra

3.1.7 propiedades CSS para color y fondos

 color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green,
etc.) RGB o como valor hexadecimal.
 background-color: Color del fondo del elemento.
 background-image: Permite especificar una imagen de fondo.
 background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
 opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta 1 (sólido). Un valor de 0.5
sería, por tanto, un nivel de transparencia del 50%.
 box-shadow: Crear un efecto de sombra para un elemento.

3.1.8 Listas
 list-style-image: Usar la imagen especificada como viñeta para la lista.
 list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

3.1.9 Propiedades CSS para bordes

 border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
 border-color: Color del borde.
 border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
 border-radius: Permite crear esquinas redondeadas para un elemento.

3.1.10 Otras propiedades CSS interesantes

 float: propiedad avanzada que permite una maquetación más sofisticada. Posicionar los elementos de manera
“flotante”.
 clear: controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante.
 overflow: controla el comportamiento de los contenidos que no caben en su elemento contenedor (valores:
visible, hidden, scroll, auto, inherit)

5
3.2 VISUAL STUDIO CODE
Visual Studio Code es un editor de código fuente que permite trabajar con diversos lenguajes de programación,
admite gestionar tus propios atajos de teclado y refactorizar el código. Es gratuito, de código abierto y nos
proporciona una utilidad para descargar y gestionar extensiones con las que podemos personalizar y potenciar esta
herramienta.

Las extensiones de Visual Studio Code nos otorgan infinidad de opciones, como colorear tabulaciones, etiquetas o
recomendaciones de autocompletado. También hay extensiones que nos ayudan con el lenguaje de programación
que vayamos a usar, como por ejemplo para Python, C / C++, JavaScript, etc.

3.2.1 Atajos en visual code

3.2.1.1 Identacion o sangría

3.2.1.2 Comentar y descimentar de golpe

3.2.1.3 Autocompletado

3.3 FORMULARIOS
3.3.1 label
<label> representa una etiqueta para un elemento en una interfaz de usuario.

Este puede estar asociado con un control ya sea mediante la utilización del atributo for, o ubicando el control dentro
del elemento label. Tal control es llamado "el control etiquetado" del elemento label.

6
3.3.2 input
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de
recibir datos del usuario.Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que
dependen del dispositivo y el agente de usuario (user agent).

El elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de
combinaciones de tipos y atributos de entrada.

3.3.2.1 ATRIBUTOS
Este elemento incluye los atributos globales, y los indicados a continuación.

3.3.2.1.1 Type
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo. Los posibles valores
son:

 button: Botón sin un comportamiento específico.

 checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este
elemento. Se usa el atributo checked para indicar si el elemento está seleccionado. También se puede usar el
atributo indeterminate (el cual solo se puede establecer programaticamente) para indicar que la casilla está
en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la
casilla).
 color: HTML5 Control para espicificar un color. Una interfaz de selección de color no requiere más
funcionalidad que la de aceptar colores simples como texto.
 date: HTML5 Control para introducir una fecha (año, mes y día, sin tiempo).
 datetime: HTML5 Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo),
basado en la zona horaria UTC.
 datetime-local: HTML5 Control para introducir fecha y hora, sin zona horaria específica.
 email: HTML5 Campo para introducir una dirección de correo electrónico. El valor introducido se valida para
que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases :valid
y :invalid son aplicadas segun corresponda.
7
 file: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para definir los
tipos de archivo que el control podrá seleccionar.
 hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
 image: Botón de envío de formulario con gráfico. Se debe usar el atributo src para definir el origen de la
imagen y el atributo alt para definir un texto alternativo. Se puede usar los atributos height y width para
definir el tamaño de la imagen en píxeles.
 month: HTML5 Control para introducir un mes y año, sin zona horaria específica.
 number: HTML5 Control para introducir un número de punto flotante.
 password: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo maxlength para
especificar la longitud máxima del valor que se puede introducir.
 radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se
usa el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones
radio que tengan el mismo valor para su atributo name están dentro del mismo "grupo de botones radio".
Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
 range: HTML5 Control para introducir un número cuyo valor exacto no es importante. Este control usa los
siguientes valores predeterminados si no se especifica cada atributo:
 min: 0
 max: 100
 value: min + (max - min) / 2, o min si max es menor que min
 step: 1
 reset: Botón que restaura los contenidos de un formulario a sus valores predeterminados.
 search: HTML5 Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son
eliminados automáticamente del valor introducido.
 submit: Botón que envía el formulario.
 tel: HTML5 Control para introducir un número telefónico. Los saltos de línea son eliminados
automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como
pattern y maxlength para restringir los valores introducidos en este control. Las pseudo-clases CSS :valid
y :invalid son aplicadas segun corresponda.
 text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor
introducido.
 time: HTML5Control para introducir un valor de tiempo sin zona horaria específica.
 url: HTML5 Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o
una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del

8
 valor son eliminados automáticamente. Se pueden usar atributos como pattern y maxlength para restringir
los valores introducidos en el control. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
 week: HTML5 Control para introducir una fecha que consiste en número de semana del año y número de
semana sin zona horaria específica.

3.4 Para el ingreso desde el local host, utilizando XAMMP

La carpeta Proyecto es la ubicación donde se estructuro todo nuestro index y de igual forma donde se creo carpetas
donde se encuentra nuestras sub carpetas donde podremos encontrar enlaces posteriores, imágenes, videos, música,
documentos y archivos.

3.5 Código en HTML 5 con CSS (el código se realizó en Visual Studio Code)
<!DOCTYPE html>
<html lang="en">
<head>

9
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACADEMIA TESLA</title>
    <style>
            html{background: url(./Img/organica.jpg);}
            h1{ color:#E9D985 ;
                text-align: center;
                font-size: 50px;}
            h2{ color:blanchedalmond ;
                text-align:justify;
                font-size: 20px;}
            h3{ color:#E9D985 ;
                text-align:center;
                font-size: 30px;}
            #For1{
                background-color: #CCD7C5;
            }
            div{
                background-color:cadetblue;
                border: 8px solid;  
                border-color: darkolivegreen;
            }

    </style>
</head>
<body>
    <header>
        <center>
            <h1> <img src="./Img/NIKOLA.jpg" height="150 px" width="150px">
                INSTITUTO ACADEMICO "NIKOLA TESLA"</h1>
        </center>
       <div> <p> <h2>La educación a distancia virtualizada, busca desarrollar aprendizajes
sin necesidad de una
            relación presencial entre el docente y el estudiante, permitiendo romper las
barreras del
            espacio y del tiempo, ampliar las opciones para la educación, ofreciendo nuevos
espacios para
            la formación, posibilitando a las personas acceder a sistemas de formación sin
extraerlo de su
            contexto laboral y familiar, viabilizando la educacióncontinua. <br><br>

            La educación virtual es una experiencia reciente, pero que ha tenido una

expansión vertiginosa
            en el mundo entero, es por esta razón que interesa saber cuáles son las
principales líneas

10
            metodológicas que se utilizan en la educación virtual dado que los docentes
virtuales tendrán
            que asumir nuevos retos al intentar aplicar estrategias de enseñanza
aprendizaje no
            presenciales con la utilización de herramientas tecnológicas
virtuales.</h2></p></div>

            <center><video height="430px" width="400px" controls>

                <source src="./Media/Video1.mp4">
            </video>
            <video height="500px" width="400px" controls>
                <source src="./Media/Video2.mp4">
            </video></center><br>

            <p><h3>SELECCIONE LA MATERIA DE SU INTERES</h3></p><br>

        </div>

        <a href="./Archivo/Inventario.pdf"> Descargar los modelos </a>

   

        <img src="./Img/ALGEBRA.webp" height="150 px">

        <img src="./Img/ANALISIS.webp" height="150 px">
        <img src="./Img/ARITMETICA.webp" height="150 px">
        <img src="./Img/BASE DE DATOS.webp" height="150 px">
        <img src="./Img/CALCULO.webp" height="150 px">
        <img src="./Img/CINEMATICA.webp" height="150 px">
        <img src="./Img/CIRCUITOS.webp" height="150 px">
        <img src="./Img/DISEÑO GRAFICO.webp" height="150 px">
        <img src="./Img/ELECTROMAGNETISMO.webp" height="150 px">
        <img src="./Img/ELECTROMAGNETISMO.webp" height="150 px">
        <img src="./Img/ESTADISTICA.webp" height="150 px">
        <img src="./Img/FISICA.webp" height="150 px">
        <img src="./Img/GEOMETRIA.webp" height="150 px">
        <img src="./Img/INFORMATICA.webp" height="150 px">
        <img src="./Img/INGENIERIA.webp" height="150 px">
        <img src="./Img/MATEAMTICAS.webp" height="150 px">
        <img src="./Img/PROGRAMACION.webp" height="150 px">
        <img src="./Img/QUIMICA INORGANICA.webp" height="150 px">
        <img src="./Img/QUIMICA ORGANICA.webp" height="150 px">
        <img src="./Img/TERMODINAMICA.webp" height="150 px">

        <p>
            <h3><a href="https://megacenter.com.bo/cine-center/">PUEDE VISITARNOS EN LOS
SIGUIENTES DEPARTAMENTOS </a></h3><br>
        </p> <br>
        <center>
            <h1>  
11
                NUESTRA UBICACION EN LA CIUDAD DE LA PAZ</h1>

            <h2>SUCURSAL 1 </h2><br>

            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3809.003529772033!2d-63.27688981848225!3d-17.31537883447016!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x0%3A0x633862f1bd085ab4!2zMTfCsDE4JzU1LjQiUyA2M8KwMTYnMjEuNiJX!5e0!
3m2!1ses!2sbo!4v1661302022038!5m2!1ses!2sbo"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
            <br>
        </center>

        <form action="" id="For1">

            <fieldset>
                <legend><center>INICIAR SESION</center></legend>
                    <label>Nombre:</label>
                    <input type="text"> <br><br>
                    <label>Apellido:</label>
                    <input type="text"> <br><br>
                    <label>FECHA:</label> <input type="date"><br><br>
                    <label>Celular:</label>
                    <input type="text"> <br><br>
                    <label>Correo Electronico:</label>
                    <input type="text"> <br><br>
                   
                   <center><a
href="file:///C:/Users/NIKO/Desktop/examen/principal.html"><input type="button"
value="ACEPTAR"> </a>  
                    </center>  
            </fieldset>
        </form>
        <h2>NUESTRAS REDES SOCIALES</h2>
        <a
href="https://m.facebook.com/people/Veterinaria-Bronce-Vet/100012639640835">FACEBOOK</a>

    </header>
   
</body>
</html>

12
3.6 Presentación de nuestra Página Web (Academia de Educación Tesla)

13
3.7 Para el ingreso de manera local desde un servidor externo (celular)

 Acá la única información que nos interesa es la siguiente: IPv4……: 192.168.236.122 que llegaría a ser la IP
con la cual mi celular puede acceder a nuestra pagina web.
 Accediendo desde otro dispositivo externo, en este caso mi disipositivo móvil.

14
3.8 CONCLUSIONES
Se concluyo de manera satisfactoria el desarrollo del laboratorio, aplicando algunos estilos de CSS 3.

Se llego a conocer la gran importancia e impacto que llega a tener CSS en HTML 5, debido a la gran variedad de
estilos, propiedades y diseños que podemos llegar a hacer con CSS.

3.9 RESULTADOS
Se obtuvo buenos resultados, pero sin olvidar mencionar las dificultades que se tuvo en el procedimiento de la red
local, se presentaron problemas de conexión, debido a que no podía ingresar a mi local host desde un dispositivo
externo, pero con la ayuda de las guías del docente se pudo sub sanar todos estos detalles.

También mencionar que se cometieron errores en la codificación con el abre y cierre de llaves para el CSS, de igual
forma el nombras los ID, las etiquetas, pero con la practica todo esto va mejorando.

3.10 BIBLIOGRAFIA
 Mendoza, E. F. (2022). Guia de Laboratorio N°4 (HTML 5 Y CSS 3). Bolivia
 Mendoza, E. F. (2022). Guia de Laboratorio N°3 (CONFIGURACION DE SERVIDORES WEB). Bolivia

15