Skip to content

subiendo ejercicios de html clase3 frontend #6

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

subiendo ejercicios de html clase3 frontend #6

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
83 changes: 82 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Fullstack 2024</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!--

Expand Down Expand Up @@ -34,7 +34,88 @@
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML

-->


<!--6) Crear menú de navegación <nav> usando una unordered list <ul> que contenga 3 items con links cada uno.-->
<nav>
<h3>Menú de navegación</h3>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><a href="acerca">Acerca de nosotros</a></li>
</ul>
</nav>

<h1>Formación FullStack</h1>

<!-- 1) Agregar un heading nivel 2, y 2 parrafos.-->
<h2>Bienvenido a FullStack 2024</h3>
<p>Hoy tuvimos la Clase 3 de Frontend, en la que hablamos sobre HTML.</p>
<p>También realizamos una trivia muy divertida, en la que repasamos conceptos clave tanto de Git como de HTML.</p>

<!--2) Crear una ordered list con 3 items. -->
<ol>
<li>Git</li>
<li>Html</li>
<li>Recursos varios</li>
</ol>

<!--3) Crear una unordered list con 3 items.-->
<ul>
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ul>

<!--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.-->
<div>
<h2>Etiquetas básicas de HTML</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJDkQY1L-bOumVsVaS5f2cp12h5uPH6Wz1eg&s"
alt="Imagen de etiquetas HTML"/>
<p>Esta imagen muestra la estructura básica de una página en HTML</p>
</div>

<div>
<h2>Comandos básicos de Git</h2>
<img src="data:image/png;base64,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"
alt="Imagen de comandos básicos de Git"/>
<p>Esta imagen muestra graficamente como se usan los comandos de Git</p>
</div>

<!--5) Crear 3 enlaces/links apuntando a sitios diferentes.-->
<h2>Enlaces útiles</h2>
<a href="https://www.w3schools.com/html/html_intro.asp">w3schools</a><br>
<a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML">Mozilla</a><br>
<a href="https://github.com/">Git</a><br>

<!--7) Crear un form con un input tipo texto, que tenga placeholder Buscar y un botón que diga Buscar. -->
<h3>Formulario de búsqueda</h3>
<form>
<label for="buscar">Buscar:</label>
<input type="text" id="buscar" placeholder="Buscar" /><br>

<!--8) Agregar al form, un input tipo texto para Nombre.-->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" placeholder="Nombre" /><br>

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Email" /><br>

<label for="password">Contraseña:</label>
<input type="password" id="password" placeholder="Contraseña" /><br>

<!--9) Agregar al form, un textarea para Descripción.-->
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" placeholder="Descripción"></textarea><br>


<button type="submit">Enviar</button>
</form>

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

</body>
</html>