Ryan Tew-200

ESCUELA INDUSTRIAL SUPERIOR
“PEDRO DOMINGO MURILLO”

CARRERA : INFORMÁTICA INDUSTRIAL
ASIGNATURA : TEW-200 Tecnología Web I
TEMA LAB. : HTML 5 Y CSS 3
DOCENTE : Edgar Mendoza F.
INTEGRANTE : Marca Patiño Ryan Kenneth
FECHA : 27- 09- 2022
HTML 5 Y CSS 3
1. OBJETIVOS.
1.1 OBJETIVO GENERAL.

Como objetivo se tiene aprender a personalizar la pagina HTML con el CSS para que sea de
agradable presencia y personalizado unico en especial.
1.2 OBJETIVOS ESPECÍFICOS
 Hacer una página HTML con varias personalizaciones con CSS.

 Lograr hacer formularios con diversas etiquetas 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.
 Realizar la configuración de la IP, para el acceso a una página web alojada en el
servidor Web Apache.
 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. FUNDAMENTO TEÓRICO
¿Qué es CSS?
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un
lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario
las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de las páginas.
Se les denomina hojas de estilo «en cascada» porque puedes tener varias hojas y una de ellas con las
propiedades heredadas (o «en cascada») de otras.
Para muchas personas una simple plantilla de blog es suficiente. Aun así, cuando quieras personalizar la
apariencia de un sitio necesitarás implementar CSS que, en conjunto con un buen CMS, te ayudará a
potenciar el alcance de tu contenido.
¿Para qué sirve CSS?
Con CSS puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la información y guardar los
comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran
el contenido.
Además, puedes crear formatos específicos útiles para comunicar tus ideas y producir experiencias más
agradables visualmente para los usuarios del sitio web.
Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso,
los elementos <p> ). Para dar estilo a un elemento diferente, solo cambia el selector.
Declaración
Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.
Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del
elemento <p> ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.
Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una
de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además
de red).
3. MATERIAL, EQUIPOS, HERRAMIENTAS, SOFTWARE UTILIZADO

 Notepad ++ 7.8.5 release.
 Visual Code 1.42.1 .
 XAMPP 7.2.29 o superior para la plataforma a utilizar en este caso Windows.
 Set de instrucciones .
 Explorador(Mozilla Firefox, Google Chrome, Brave, etc ).
4. RESULTADOS OBTENIDOS
a. DIAGRAMAS, CAPTURA DE PANTALLAS Y ESQUEMAS
b. PASOS DESARROLLADOS EN EL LABORATORIO, CÁLCULOS REALIZADOS, CÓDIGO
FUENTE, RESULTADOS OBTENIDOS
PAGINA HTML proy.html
<!DOCTYPE html>
<html lang="es">
<head>
<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>Celulares</title>
<style>
html {
background: url(./img/2.webp);
background-size: 1350px 2000px;
background-attachment: fixed;
background-attachment: scroll;
h1 {
color: rgb(255, 7, 243);
text-align: center;
font-size: 45px;
h3 {
color: rgb(255, 7, 243);
text-align: center;
font-size: 35px;
h4 {
color: rgb(255, 255, 255);
text-align: justify;
font-size: 20px;
}
div {
border: 5px solid;
border-color: rgb(174, 0, 255);
</style>
</head>
<body>
<h3>
<i>
<b>
TIENDA DE CELULARES
</b>
</i>
</h3>
<hr align=left width=100%>
<h2 align=left><u><a href=""><i><b>
<a href="./mi.html">CAT. XIAOMI</a>
</b></i></a></u>
</h2>
<h2 align=left><u><a href=""><i><b>
<a href="">CAT. SAMSUNG</a>
</b></i></a></u>
</h2>
<h2 align=rigth><u><a href=""><i><b>
<a href="">CAT. IPHONE</a>
</b></i></a></u>
</h2>
<h3>
<i>
<b>
INTRODUCCION
</b>
</i>
</h3>
<div>
<h4>
<p>
El teléfono móvil o teléfono celular es un aparato indispensable en la actualidad; sin embargo su
popularización ha sido un fenómeno muy reciente. <br>
En un principio el teléfono móvil solo podía ser usado en vehículos por su tamaño, reduciéndose
posteriormente a una unidad portátil, y finalmente al tamaño de
bolsillo que se utiliza hoy en día. <br>
El sistema celular fue creado para satisfacer la demanda de comunicación móvil dentro de un
espectro de
radiofrecuencia limitado. <br>
Esta limitación es el factor original que motivó y sigue motivando el
desarrollo del teléfono móvil, frente a otros de los varios factores como la duración de la batería o
el
tamaño del aparato.
</p>
</h4>
</div>
<h3>
<i>
<b>
PRIMER INVENTOR DEL TELEFONO CELULAR
</b>
</i>
</h3>
<div>
<h4>
<p>
Martin Cooper puede no ser un nombre famoso, pero su invento es conocido por más de la mitad
de la
población mundial que cuenta con un teléfono celular. <br>
El concepto de un teléfono de mano estaba en su cerebro cuando era niño y, con la ayuda de un
equipo de
Motorola, el primer auricular de telefonía móvil nació en 1973. Pesaba más de dos kilos. <br>
Cuando, parado en una calle de Nueva York, realizó su primera llamada telefónica desde un
prototipo de
celular, no podría haber sido capaz de concebir el éxito que alcanzaría su invento. <br>
Hoy en día la industria de telecomunicaciones móviles se ha extendido a lo largo de todo el globo,
desarrollando una gran colección de tecnologías para celulares.
</p>
</h4>
</div><br>
<center>
<img src="./img/1.jpg" alt="Primer inventor" height="300px" width="600px">
</center>
<h1>
<i>
<b>
<a href="./archivo/Catalogo-Digital.pdf">VER CATALOGO DIGITAL</a><br>
</b>
</i>
</h1>
<h1>
<i>
<b>
<a href="./archivo/Catalogo-Digital.docx">DESCARGAR CATALOGO DIGITAL</a><br>
</b>
</i>
</h1>
<hr align=left width=100%><br>
<center>
<a href="./form.html"><input type="button" value="ESCRIBENOS...!!! :)"></a><br><br><br><br>
</center>
</body>
</html>
PAGINA HTML mi.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>XIAOMI</title>
<style>
html {
h1 {
color: rgb(255, 7, 243);
text-align: center;
font-size: 45px;
p{
text-align: center;
</style>
</head>
<body>
<h1>
<i>
<b>
TIENDA XIAOMI
</b>
</i>
</h1>
<p align=left>GAMA BAJA</p>
<p align=right>GAMA MEDIA</p>
<p align=right>GAMA BAJA</p>
</body>
</html>
PAGINA HTML form.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CONSULTAS</title>
<style>
html {
</style>
</head>
<body>
<form action="" id="form1">
<legend>
<fieldset>
<label>NOMBRES:</label><input type="text"><br><br>
<label>APELLIDOS:</label><input type="text"><br><br>
<label>FECHA:</label><input type="date" name="" id=""><br><br>
<label>CELULAR:</label> <input type="number"> <br><br>
<label>CORREO:</label><input type="email" name="" id=""

placeholder="correo@email.com"><br><br>
<label for="">HEMBRE</label><input type="radio" name="" id="">
<label for="">MUJER</label><input type="radio" name="" id=""><br><br>
<select name="" id="">
<option value="1">LA PAZ</option>
<option value="2">ORURO</option>
<option value="3">SANTA CRUZ</option>
<option value="4">TARIJA</option>
<option value="5">COCHABAMBA</option>
<option value="6">CHUQUISACA</option>
<option value="7">PANDO</option>
<option value="8">BENI</option>
</select><br><br>
<label for="">MENSAJE:</label><br><br>
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<a href="./proy.html"><input type="button" value="VOLVER PAGINA

PRINCIPAL"></a><br><br><br><br>
</fieldset>
</legend>
</form>
</body>
</html>
5. ANEXOS
https://knowledge.hubspot.com/es/design-manager/create-edit-and-attach-css-files-to-style-your-
site#:~:text=Crear%20un%20nuevo%20archivo%20de%20CSS&text=En%20el%20cuadro%20de%20di%
C3%A1logo,y%20haz%20clic%20en%20Crear.
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics
6. CONCLUSIONES Y RECOMENDACIONES
La plantilla Style hace possible del uso del CSS dentro del HTML recomendado que se tiene que utilizer
el CSS para la personalizacion de la pagina.
7. REFERENCIAS BIBLIOGRÁFICAS
MINI, O. (29 de ABRIL de 2018). UM. Obtenido de
https://www.um.es/docencia/barzana/DAWEB/Desarrollo-de-aplicaciones-web-teoria-html5-
etiquetas-estructurales.html
MINI, O. (2022). developer.mozilla. Obtenido de

https://developer.mozilla.org/es/docs/Web/HTML/Element/a
MINI, O. (2022). disenowebakus. Obtenido de https://disenowebakus.net/html5.php

Ryan Tew-200

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

Ryan Tew-200

Cargado por

Copyright:

Formatos disponibles

ESCUELA INDUSTRIAL SUPERIOR

“PEDRO DOMINGO MURILLO”

FECHA : 27- 09- 2022

1.1 OBJETIVO GENERAL.

 Hacer una página HTML con varias personalizaciones con CSS.

¿Para qué sirve CSS?

3. MATERIAL, EQUIPOS, HERRAMIENTAS, SOFTWARE UTILIZADO

PAGINA HTML proy.html

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

background-size: 1350px 2000px;

color: rgb(255, 7, 243);

color: rgb(255, 7, 243);

color: rgb(255, 255, 255);

border: 5px solid;

border-color: rgb(174, 0, 255);

<hr align=left width=100%>

<h2 align=left><u><a href=""><i><b>

<a href="./mi.html">CAT. XIAOMI</a>

<h2 align=left><u><a href=""><i><b>

<a href="">CAT. SAMSUNG</a>

<h2 align=rigth><u><a href=""><i><b>

<a href="">CAT. IPHONE</a>

<hr align=left width=100%>

El teléfono móvil o teléfono celular es un aparato indispensable en la actualidad; sin embargo su

popularización ha sido un fenómeno muy reciente. <br>

posteriormente a una unidad portátil, y finalmente al tamaño de

bolsillo que se utiliza hoy en día. <br>

radiofrecuencia limitado. <br>

Esta limitación es el factor original que motivó y sigue motivando el

tamaño del aparato.

PRIMER INVENTOR DEL TELEFONO CELULAR

población mundial que cuenta con un teléfono celular. <br>

Hoy en día la industria de telecomunicaciones móviles se ha extendido a lo largo de todo el globo,

desarrollando una gran colección de tecnologías para celulares.

<img src="./img/1.jpg" alt="Primer inventor" height="300px" width="600px">

<a href="./archivo/Catalogo-Digital.pdf">VER CATALOGO DIGITAL</a><br>

<a href="./archivo/Catalogo-Digital.docx">DESCARGAR CATALOGO DIGITAL</a><br>

<hr align=left width=100%><br>

<a href="./form.html"><input type="button" value="ESCRIBENOS...!!! :)"></a><br><br><br><br>

PAGINA HTML mi.html

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

background-size: 1350px 2000px;

color: rgb(255, 7, 243);

<hr align=left width=100%>

<p align=left>GAMA BAJA</p>

<p align=right>GAMA MEDIA</p>

<p align=right>GAMA BAJA</p>

PAGINA HTML form.html

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

background-size: 685px 680px;

<form action="" id="form1">

<label>FECHA:</label><input type="date" name="" id=""><br><br>

<label>CELULAR:</label> <input type="number"> <br><br>

<label>CORREO:</label><input type="email" name="" id=""

<label for="">HEMBRE</label><input type="radio" name="" id="">

<label for="">MUJER</label><input type="radio" name="" id=""><br><br>

<select name="" id="">

<option value="1">LA PAZ</option>

<option value="3">SANTA CRUZ</option>

<textarea name="" id="" cols="30" rows="10"></textarea><br>