FSI - Sesión - 03 - 2022 - HTML&CSS PDF

Universidad Católica de Santa María
Facultad de Ciencias e Ingenierías Físicas &

Formales
Ingeniería de Sistemas
Curso: Fundamentos de Sistemas de Información
Tema: Informe Práctica 03 “HTML & CSS”
Docente: Dely Marysheck Lazo Barrera
Presentado por:
Josué Abel Challa Ccoscco
Arequipa – Perú
2022
1
Actividades
1. Haciendo uso del IDE VS Code genere el siguiente Inicio de Sesión:
En el siguiente código creamos nuestro index.html en la cual nosotros escribimos en el

código que sea de lenguaje español UTF-8, en ello podemos insertar contenido como:
• Lineas.
• Párrafos.
• Tablas.
• Imágenes.
• Etc.
Entonces lo primero que hacemos en nuestro código es mandar la dirección de el estilo
que más adelante modificaremos con CSS, seguidamente agregamos un título,
seguidamente creamos un contenedor div en el cuerpo de la página “body” denominada
form-body, en ello insertaremos una imagen de usuario la cual es descargada
previamente y almacenada en una carpeta img con dicho nombre, creamos los párrafos
de texto y párrafo de contraseña (password) y para finalizar creamos un botón de
marcador para crear el forms.
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Formulario Login </title>
</head>
<body>
<div class="form-body">
<img src="img/user.png" alt="user-login">
<p class="text">Ingresar usuario</p>
<form class="login-form">
<input type="text" placeholder="Email o nombre de usuario">
<input type="password" placeholder="Contraseña">
<button>Iniciar Sesión</button>
</form>
</div>
</body>
</html>
2
Entonces una vez creado nuestro index.html nos vamos a darle estilo a la página.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Times New Roman', Times, serif;
background: linear-gradient(27deg, #34495e 50%, #2c3e50 50%);
}
.form-body{
width: 400px;
min-width: 300px;
border-radius: 10px;
border-top-left-radius: 60px;
border-bottom-right-radius: 50px;
border: solid 1px #2980b9;
margin: 10px;
}
.form-body img {
width: 160px;
display: block;
margin: 20px auto;
}
.text {
text-align: center;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
margin-bottom: 25px;
}
.form-body input{
display: block;
margin: auto;
height: 40px;
width: 75%;
padding-left: 10px;
color: #fff;
border: 1px solid #fff;
border-radius: 2px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: transparent;
font-size: 1rem;
outline: none;
}
.form-body input[type="password"]{
margin-top: 20px;
}
::placeholder{
3
font-size: 1rem;
color: rgba(255, 255, 255, 596);
}
.form-body input:hover{
transition: .5s;
border: 1px solid #2980b9;
color: #2498db;
}
.form-body button{
display: block;
margin: auto;
margin-top: 25px;
height: 40px;
width: 78%;
background: transparent;
color:#b9c4c6;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: all .5s ease ;
}
.form-body button:hover {
color: #d5dbdd;
border: 2px solid #3498db;
background:linear-gradient(#34495e, #2c3e50);
}
4
Ejercicios
2. Investigue e implemente el procedimiento para que su pantalla de Inicio de Sesión sea
responsiva para celular.
En este lenguaje le daremos los estilos a los contenedores, cuerpos, imágenes, texto, ect.
Por ello notamos que en nuestro html está separador por cuerpo o contenedores, div
entonces lo primero que modificamos es el cuerpo de la página, y le damos el formato
de letra. El form boby es la clase div la cual contiene las imágenes los párrafos de tipo
texto o contraseña, modificamos ello, en form doby tenemos una imagen descargada la
cual vamos a darle utilidad solicitando desde el código. Seguidamente el texto elegimos
el formado y el color de letra, y así sucesivamente vamos modificando cada división de
nuestra página html, para poder visualizar el cursos de button utilizamos hover para que
cuando cuando el cursos pase por ese contenedor cambie de características.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Times New Roman', Times, serif;
background: linear-gradient(27deg, #34495e 50%, #2c3e50 50%);
}
.form-body{
width: 400px;
min-width: 300px;
border-radius: 10px;
border-bottom-right-radius: 50px;
border: solid 1px #2980b9;
margin: 10px;
}
.form-body img {
width: 160px;
display: block;
margin: 20px auto;
}
.text {
text-align: center;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
}
.form-body input{
5
display: block;
margin: auto;
height: 40px;
width: 75%;
padding-left: 10px;
color: #fff;
border: 1px solid #fff;
border-radius: 2px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: transparent;
font-size: 1rem;
outline: none;
}
.form-body input[type="password"]{
margin-top: 20px;
}
::placeholder{
font-size: 1rem;
color: rgba(255, 255, 255, 596);
}
.form-body input:hover{
transition: .5s;
color: #2498db;
}
.form-body button{
display: block;
margin: auto;
margin-top: 25px;
height: 40px;
width: 78%;
background: transparent;
color:#b9c4c6;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: all .5s ease ;
}
.form-body button:hover {
color: #d5dbdd;
border: 2px solid #3498db;
background:linear-gradient(#34495e, #2c3e50);
}
6
Y para hacerlo adaptable a diferentes dispositivos utilizamos @media
Y le damos como condicional que el máximo ancho llega a 500 cumple una función para
que este se adapte a los dispositivos:
@media (max-width: 500px){
form{
width: 100%;
}
}
7
8
Cuestionario
1. Defina con sus propias palabras ¿qué es HTML?

HTML es un software que nos permite el desarrollo de paginas web, teniendo como
base de todo, pero también darle estilos y funciones con CSS y JavaScrip
2. Mencione otros editores de HTML que no fueron mencionados en la práctica.
Los editores de html o complementos de este software son varios, pero en la práctica
mencionamos Css y JavaScrip.
3. Realice un listado de las etiquetas que usa HTML e indique ¿cuál es su uso?
<body> para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…
<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de
la lista
<p> para parágrafos
<span> para estilos de una parte del texto
4. Indique ¿cuál es la estructura simple de HTML 5?
La estructura simple de html es:
<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
</div>
</body>
</html>
5. ¿Qué son las etiquetas semánticas e indique algunos ejemplos de ellas?

Son las que sirven para definir el esquema principal del documento, como HEADER,
ARTICLE, FOOTER, etc. Todas esas etiquetas semánticas nos indican qué es el
contenido que engloban y cuál es su relación con el conjunto de elementos del
documento HTML
Ejemplo:
HEADER, ARTICLE, FOOTER, etc.
6. ¿En qué se diferencia MariaDB y MySQL?
Los dos son sistemas muy similares ya que estos dos se basan en la gestión de base de
datos siendo bastantes diferentes una de ellas es que MariaDb tiene la licencia de GLP,
mientras de MySQL tiene un enfoque de doble licencia, y estas tienen diferentes formas
de almacenamientos, aguantando estos motores.
7. ¿Cuál es la finalidad de CSS?
9
La finalidad de Css es manejar el diseño o estilo de las páginas web, y podemos decir
que html va de la mano con Css debido a que sin html Css no estaría en funcionalidad
ya que requerimos de cierto contenedores o divisiones para trabajar en las páginas web.
8. Mencione las diferencias entre os diversos selectores CSS.
Selector universal.
Selector de tipo.
Selector de ID.
Selector de atributo.
Selector de pseudo-clase.
Selector de clase.
9. Investigue alguna web en la cual puede encontrar los colores en hexadecimal.
Existe variedad de páginas web, pero en clase mencionamos uno que es el Adobe pero
de una página web tendríamos dicha página: https://htmlcolorcodes.com/es/
10

FSI - Sesión - 03 - 2022 - HTML&CSS PDF

Cargado por

Copyright:

Formatos disponibles

FSI - Sesión - 03 - 2022 - HTML&CSS PDF

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

FSI - Sesión - 03 - 2022 - HTML&CSS PDF

Cargado por

Copyright:

Formatos disponibles

Universidad Católica de Santa María

Facultad de Ciencias e Ingenierías Físicas &

En el siguiente código creamos nuestro index.html en la cual nosotros escribimos en el

1. Defina con sus propias palabras ¿qué es HTML?

5. ¿Qué son las etiquetas semánticas e indique algunos ejemplos de ellas?

También podría gustarte