m2-front-end-101/s1-html-elements/index.html

<!DOCTYPE html>
<html lang="es-cl">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>HTML elements</title>
	</head>
	<body>
		<h1>Elementos HTML - catalog</h1>

		<h2>Uso de headlines</h2>
		<h3>Headline 1</h3>
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
			consequatur excepturi expedita debitis quidem id voluptas perferendis
			cumque quia nostrum obcaecati, labore sequi iste earum recusandae
			reprehenderit optio possimus nesciunt.
		</p>
		<h3>Headline 2</h3>
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa tempora
			ipsum dolores animi repellat distinctio officiis ad veniam sunt molestias
			nam modi deserunt quam repudiandae eveniet eius architecto, commodi nihil.
		</p>

		<h2>Uso de elementos en línea</h2>
		<p>
			Lorem ipsum, <b>dolor sit amet consectetur adipisicing elit</b>.
			Accusantium similique ut delectus molestiae omnis vero aspernatur
			asperiores odit maxime perferendis. <i>Rem, laborum</i>. Dignissimos
			veniam fuga dolorum nisi explicabo voluptatum illum.
		</p>

		<h2>Uso de listas ordenadas y enumeradas</h2>
		<h3>Lista de comidas favoritas</h3>
		<ul>
			<li>Papas fritas con huevo</li>
			<li>Atún con papas</li>
			<li>Pastis de poma</li>
		</ul>
		<h3>Lista de lugares a visitar, por prioridad</h3>
		<ol>
			<li>Japón</li>
			<li>China</li>
			<li>Estados Unidos</li>
		</ol>

		<h2>Uso de divisor hr y salto de línea br</h2>
		<h3>p1</h3>
		<p>Párrafo Uno<br />Uno.uno<br />Uno.dos</p>
		<hr />
		<h3>p2</h3>
		<p>Dos</p>
		<hr />
		<h3>p3</h3>
		<p>Tres</p>
		<hr />

		<h2>Uso de links</h2>
		<ul>
			<li>
				<a href="https://www.apple.com/" target="_blank">Página de Apple</a>
			</li>
			<li>
				<a href="https://www.42barcelona.com/es/" target="_self"
					>Página de 42</a
				>
			</li>
			<li>
				<a href="https://chatgpt.com/" target="_blank">Página de ChatGPT</a>
			</li>
		</ul>

		<h2>Uso de imágenes</h2>
		<div style="display: flex; align-items: center; justify-content: center">
			<img
				src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Spirited_Away_logo.png"
				width="200px"
				alt="png spirited away logo"
			/>
			<img
				src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Spirited_Away_Logo_fr.svg"
				width="200px"
				alt="svg spirited away"
			/>

			<img
				src="https://24.media.tumblr.com/3abcecacd69fd4c35b773e5016245485/tumblr_mn1te4C7FA1sry5k1o1_500.gif"
				width="200px"
				alt="gif Chihiro"
			/>
			<img
				src="https://upload.wikimedia.org/wikipedia/en/d/db/Spirited_Away_Japanese_poster.png"
				width="100px"
				alt="jpg chihiro teathrical poster"
			/>
		</div>

		<h2>Uso de tablas</h2>

		<h3>El Viaje de Chihiro | Personajes</h3>
		<table border="1">
			<thead>
				<tr>
					<th>Nombre</th>
					<th>Edad</th>
					<th>País</th>
					<th>Avatar</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Chihiro</td>
					<td>10</td>
					<td>Japón</td>
					<td>
						<img
							src="https://i.pinimg.com/originals/c4/aa/b6/c4aab69d530f9d613e8919f239e3b9fd.jpg"
							width="80px"
							alt="chihiro avatar"
						/>
					</td>
				</tr>
				<tr>
					<td>Haku</td>
					<td>12</td>
					<td>Japón</td>
					<td>
						<img
							src="https://pbs.twimg.com/media/EmEJe8VXEAApY5j.jpg"
							width="80px"
							alt="haku avatar"
						/>
					</td>
				</tr>
				<tr>
					<td>Yubaba</td>
					<td>60</td>
					<td>Japón</td>
					<td>
						<img
							src="https://www.researchgate.net/publication/323481479/figure/fig4/AS:599406848000000@1519921137270/The-Depiction-of-Yubabas-Luxury-Miyazaki-Isao-2002-003605_Q320.jpg"
							width="80px"
							alt="yubaba avatar"
						/>
					</td>
				</tr>
			</tbody>
		</table>

		<h3>Old software I used to use</h3>
		<table border="3">
			<thead>
				<tr>
					<th>Software</th>
					<th>Final Release</th>
					<th>Year</th>
					<th>Description</th>
					<th>Screenshot</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>
						<a
							href="https://artsandculture.google.com/asset/computer-software-ms-dos-kid-pix-2/TgF-um3wh_Hukg?hl=en"
							target="_blank"
							rel="noopener noreferrer"
							>Kid Pix 2</a
						>
					</th>
					<th>?</th>
					<th>1994</th>
					<th>
						Painting program for kids. It featured a ton of fun to use tools
						such as stamps, brushes, magic erasers that would reveal a bitmap,
						mixing tools that would scramble your pictures, really hours and
						hours of fun for creative kids.
					</th>
					<th>
						<img
							src="https://www.macintoshrepository.org/_resize.php?w=640&h=480&bg_color=333333&imgenc=ZmlsZ2bcXMvdXBsb2Fkcy9zY3JlZW5zaG90cy8xNTA1NDMwOTQ1Ljk2XzEuanBnfHd3dy5tYWNpbnRvc2hyZXBvc2l0b3J5Lm9yZy8xMDM3NS1raWQtcGl4LTItNQ%3D%3D"
							width="300px"
							alt="kid pix 2 app"
						/>
					</th>
				</tr>
				<tr>
					<th>
						<a
							href="https://en.wikipedia.org/wiki/MSN_Messenger"
							target="_blank"
							rel="noopener noreferrer"
							>MSN Messenger</a
						>
					</th>
					<th>16.4</th>
					<th>2012</th>
					<th>Cross-platform instant-messaging client.</th>
					<th>
						<img
							src="https://www.techspot.com/articles-info/2373/images/2021-11-23-image-8.jpg"
							width="300px"
							alt="MSN messenger app"
						/>
					</th>
				</tr>
				<tr>
					<th>
						<a
							href="https://www.ciencia.cl/CienciaAlDia/volumen2/numero3/articulos/articulo2.html"
							target="_blank"
							rel="noopener noreferrer"
							>La Plaza</a
						>
					</th>
					<th>?</th>
					<th>1992</th>
					<th>
						Software educativo que enlazaba escuelas entre si, similar a eWorld
						de Apple en apariencia.
					</th>
					<th>
						<img
							src="https://live.staticflickr.com/3182/5710716400_a474d835cc_o.jpg"
							width="300px"
							alt="La Plaza app"
						/>
					</th>
				</tr>
				<tr>
					<th>
						<a
							href="http://www.sonic.net/mnitepub/pccafe/editorspic/microsoftpublisher/editorstoppick.html"
							target="_blank"
							rel="noopener noreferrer"
							>Publisher 98</a
						>
					</th>
					<th>?</th>
					<th>1991</th>
					<th>
						Desktop publishing program for small or home-based businesses,
						students, nonprofits, and families. Users can create newsletters to
						flyers to greeting cards to Web sites.
					</th>
					<th>
						<img
							src="http://www.sonic.net/mnitepub/pccafe/editorspic/microsoftpublisher/catalog.jpg"
							width="300px"
							alt="Publisher 98 app"
						/>
					</th>
				</tr>
			</tbody>
		</table>

		<h2>Uso de Formularios</h2>
		<form action="index.html" method="get">
			<fieldset>
				<legend>Login</legend>
				<label for="user-name">Username</label>
				<input type="text" id="user-name" />
				<br />
				<label for="user-surname">Surname</label>
				<input type="text" id="user-surname" />
				<br />
				<label for="user-email">Email</label>
				<input type="email" id="user-email" placeholder="example@domain.com"/>
				<br />
				<label for="user-password">Password</label>
				<input type="password" id="user-password" />
				<br />
				<button type="submit">Enviar</button>
			</fieldset>
		</form>


	</body>
</html>