Skip to content

Resolucion de ejercicios HTTML - Marisol Goñi #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Resolucion de ejercicios HTTML - Marisol Goñi #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added imagen bob esponja arcoiris.jpg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 99 additions & 93 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fullstack 2024</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>

<body>
<!--

Ejercicios <3

1) Agregar un heading nivel 2, y 2 parrafos.
2) Crear una ordered list con 3 items.
3) Crear una unordered list con 3 items.
4) Crear 2 <div>, dentro de cada div: agregar una imagen, un h2 para mostrar un titulo para esa imagen y un <p> con breve descripcion.
5) Crear 3 enlaces/links apuntando a sitios diferentes.
6) Crear menú de navegación <nav> usando una unordered list <ul> que contenga 3 items con links cada uno.
7) Crear un form con un input tipo texto, que tenga placeholder Buscar y un botón que diga Buscar.
8) Agregar al form, un input tipo texto para Nombre.
9) Agregar al form, un textarea para Descripción.
10) Crear footer que contenga el siguiente párrafo: &copy; 2024 Fullstack.
11) Plus: agregar placeholders en los inputs y textarea
12) Plus: agregar labels y ids para input y textarea.
13) Plus: agregar 3 items más, dentro de un item de la <nav>, usando <ul> y <li>
14) Plus: agregar 2 inputs más con labels y ids que elijan.
<!-- Ejercicios <3 1) Agregar un heading nivel 2, y 2 parrafos.-->

<h1>Formación FullStack</h1>
<h2>Clase HTML</h2>

<p>Párrafo 01</p>
<p>Párrafo 02</p>

<!--Crear una ordered list con 3 items.-->

Lista ordenada
<ol>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
</ol>

<!--Crear una unordered list con 3 items-->
Lista desordenada
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
</ul>

<!--Crear 2 <div>, dentro de cada div: agregar una imagen, un h2 para mostrar un titulo para esa imagen y un <p> con breve descripcion-->

<div>
<h2>imagen</h2>
<p><strong> Nosotras aprendiendo HTML</p></strong>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSDUxntYcZ8DbSPacyqkHzdkYAIX9wlrrv1A&s" alt="imagen 1">
</div>

<div>
<h2>imagen 2</h2>
<p><strong> Nosotras despues de saber HTML</p></strong>
<img src="imagen bob esponja arcoiris.jpg.jpg" alt="bob esponja arcoiris" style="width: 200px; height: auto;">

</div>

<!--5) Crear 3 enlaces/links apuntando a sitios diferentes-->

<a href="https://www.w3schools.com/html/html_links.asp">html machete</a> <br>
<a href="https://www.w3schools.com/css/default.asp">css machete</a> <br>
<a href="https://www.w3schools.com/sql/default.asp">sql machete</a>


<!--6)Crear menú de navegación <nav> usando una unordered list <ul> que contenga 3 items con links cada uno-->
<!--Plus: agregar 3 items más, dentro de un item de la <nav>, usando <ul> y <li>-->
<nav>
<ul>
<li>
<a href="https://www.w3schools.com/html/html_links.asp"> HTML</a>
<ul>
<li>Introduction to HTML</li>
<li>HTML basics</li>
<li>HTML Elements</li>
</ul>
</li>
<li><a href="https://www.w3schools.com/css/default.asp">CSS</a></li>
<li><a href="https://www.w3schools.com/sql/default.asp">SQL</a></li>
</ul>
</nav>

<!--7)Crear un form con un input tipo texto, que tenga placeholder Buscar y un botón que diga Buscar-->
<!--8) Agregar al form, un input tipo texto para Nombre.
9) Agregar al form, un textarea para Descripción.
11) Plus: agregar placeholders en los inputs y textarea
12) Plus: agregar labels y ids para input y textarea-->
<form>

<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="Nombre" placeholder="Nombre"><br><br>

<label for="descripcion">Descripción:</label> <br>
<textarea id="descripcion" name="Descripción" placeholder="Descripción"></textarea><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Tu correo electrónico"><br><br>

<!--14) Plus: agregar 2 inputs más con labels y ids que elijan.-->

<label for="telefono">Teléfono:</label><br>
<input type="tel" id="telefono" name="telefono" placeholder="Tu número de teléfono"><br><br>

<label for="buscar">Buscar:</label> <br>
<input type="text" id="buscar" name="Buscar" placeholder="Buscar"><br><br>

<button type="submit">Buscar</button>

</form>


<!--10) Crear footer que contenga el siguiente párrafo: &copy; 2024 Fullstack-->
<footer>
<p>&copy; 2024 Fullstack.</p>
</footer>

<!--
Más práctica y ejercicios online en: https://www.w3schools.com/html/html_exercises.asp

Documentación:
https://www.w3schools.com/html/html_intro.asp
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML



Ejercicios CSS <3

Documentación CSS en: https://www.w3schools.com/css/default.asp
Documentación Fonts: https://www.w3schools.com/css/css_font_google.asp
Práctica y ejercicios online: https://www.w3schools.com/css/exercise.asp


Ejercicio 1:
Aplicar color de fondo del cuerpo (body).
Aplicar color de texto del título <h1>.
Aplicar colores a los párrafos.


Ejercicio 2: Estilos de fuentes
Cambiar la fuente del título <h1> a Arial.
Cambiar el tamaño de la fuente del párrafo a 18px.
Plus: Agregar otra fuente de https://fonts.google.com/ y usarla en algún párrafo.


Ejercicio 3: Bordes y márgenes
Aplicar un borde sólido de 1px de color claro a un párrafo (<p>).
Aumentar el margen superior del título <h1> a 20px.
Agregar un padding de 10px alrededor del contenido del párrafo.


Ejercicio 4: Estilos en botón
Cambiar el color de fondo del botón a verde (#28a745) y el color del texto a blanco.
Agregar bordes redondeados (border-radius) de 5px.
Agregar padding 10px.
Aplicar ancho del botón a 100px.
Establecer margen superior e inferior de 10px.
Quitar el color del borde del botón.


Ejercicio 5: Inputs del formulario
Agregar padding de 5px.
Quitar bordes.
Agregar márgenes superiores e inferiores de 5px entre cada control
Plus: Aplicar un tipo de fuente para los labels de cada control.
Plus: Aplicar width y height al textarea. Ejemplo: 300px ancho y 100px alto.


Ejercicio 6: Footer
Aplicar color de fondo.
Cambiar color del texto del footer.
Agregar padding de 20px.
Alinear texto al centro.


Ejercicio 7: Header
Crear etiqueta header con un texto.
Aplicar color de fondo y color de texto.
Agregar padding de 50px.
Alinear textos al centro.


Ejercicio 8: Nav menu
Aplicar color de fondo a la etiqueta nav y color de texto.
Eliminar las bullets de la <ul> con: list-style: none;
En cada item <li>, agregar padding 10px y aplicar display: inline-block; para mostrar los elementos en línea.
Plus: Ocultar el submenu (ul dentro del li) con display: none;


Ejercicio 9: Diseño responsive - Media queries
Agregar media queries para que el color de fondo del body tenga un color diferente en distintas pantallas.
Ejemplos: @media screen and (min-width: 768px) {}
@media screen and (min-width: 1280px) {}




-->
<h1>Formación FullStack <3</h1>
<p>Hola!</p>
</body>
</html>