CREACIÓN DE PÁGINA WEB, Alcaldías.
Para elaborar la página web alcaldías, deberás crear la Principal, así como cada una de ellas, el ejemplo presenta 6, debes realizar las que faltan, Descargar imágenes que llevan cada una de ellas, revisando el tipo de imagen (png, gif, jpg)
CÓDIGO PARA ELABORAR LA PRINCIPAL
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alcaldías de la CDMX</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1rem 0;
}
header h1 {
font-size: 2.5rem;
}
header img {
max-width: 100px;
margin-top: 0.5rem;
}
.content {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
}
table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
table caption {
font-weight: bold;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 1rem;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
td img {
max-width: 100px;
height: auto;
border-radius: 8px;
}
a {
color: #4CAF50;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 1rem;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<header>
<h1>Alcaldías de la Ciudad de México</h1>
<img src="mapaCDMX.png" alt="Mapa de CDMX">
</header>
<div class="content">
<p>Haz clic en una alcaldía para conocer más detalles:</p>
<table>
<caption>Detalles de las Alcaldías de la Ciudad de México</caption>
<thead>
<tr>
<th>Localización</th>
<th>Alcaldías</th>
<th>Características</th>
<th>Logotipo</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="azcapotzalco.gif" alt="Mapa Azcapotzalco"></td>
<td><a href="Azcapotzalco.html">Azcapotzalco</a></td>
<td>
<p>Superficie: 33.66 km<sup>2</sup></p>
<p>Población: 425,298 Hab.</p>
<p>Gentilicio: Chintololo</p>
</td>
<td><img src="logoazca.jpg" alt="Logotipo Azcapotzalco"></td>
</tr>
<tr>
<td><img src="cuauhtemoc.gif" alt="Mapa Cuauhtémoc"></td>
<td><a href="Cuauhtemoc.html">Cuauhtémoc</a></td>
<td>
<p>Superficie: 32.40 km<sup>2</sup></p>
<p>Población: 521,348 Hab.</p>
<p>Gentilicio: No disponible</p>
</td>
<td><img src="logocuauhtemoc.jpg" alt="Logotipo Cuauhtémoc"></td>
</tr>
<tr>
<td><img src="gustavomadero.gif" alt="Mapa Gustavo A. Madero"></td>
<td><a href="GustavoAMadero.html">Gustavo A. Madero</a></td>
<td>
<p>Superficie: 94.07 km<sup>2</sup></p>
<p>Población: 1,193,161 Hab.</p>
<p>Gentilicio: Maderense</p>
</td>
<td><img src="logogam.jpg" alt="Logotipo GAM"></td>
</tr>
<tr>
<td><img src="xochimilco.gif" alt="Mapa Xochimilco"></td>
<td><a href="Xochimilco.html">Xochimilco</a></td>
<td>
<p>Superficie: 118 km<sup>2</sup></p>
<p>Población: 404,458 Hab.</p>
<p>Gentilicio: Xochimilquense</p>
</td>
<td><img src="logoxochimilco.jpg" alt="Logotipo Xochimilco"></td>
</tr>
<tr>
<td><img src="alvaroobregon.png" alt="Mapa Álvaro Obregón"></td>
<td><a href="AlvaroObregon.html">Álvaro Obregón</a></td>
<td>
<p>Superficie: 87.79 km<sup>2</sup></p>
<p>Población: 727,034 Hab.</p>
<p>Gentilicio: Obregonense</p>
</td>
<td><img src="AlvaroO.png" alt="Logotipo Álvaro Obregón"></td>
</tr>
<tr>
<td><img src="benitojuarez.png" alt="Mapa Benito Juárez"></td>
<td><a href="BenitoJuarez.html">Benito Juárez</a></td>
<td>
<p>Superficie: 26.63 km<sup>2</sup></p>
<p>Población: 385,439 Hab.</p>
<p>Gentilicio: Juarense</p>
</td>
<td><img src="logobenitoJ.png" alt="Logotipo Benito Juárez"></td>
</tr>
<!-- Agrega más alcaldías aquí si es necesario -->
</tbody>
</table>
</div>
<footer>
© 2024 Ciudad de México. Todos los derechos reservados.
</footer>
</body>
</html>
CÓDIGO PARA ELABORAR CADA UNA DE MANERA INDIVIDUAL
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azcapotzalco</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #FFFACD; /* Color amarillo claro */
color: #333;
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: #4CAF50; /* Verde para consistencia */
color: white;
padding: 1rem;
}
header h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
}
.content {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
text-align: center;
}
.content img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 1rem;
}
.content h2 {
font-size: 2rem;
color: #4B0082; /* Púrpura */
margin-bottom: 1rem;
}
.content p {
font-size: 1.2rem;
line-height: 1.6;
}
footer {
text-align: center;
padding: 1rem;
background-color: #4CAF50;
color: white;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<h1>Azcapotzalco</h1>
</header>
<div class="content">
<img src="ptezozo.jpg" alt="Imagen del Parque Tezozómoc">
<h2>Parque Tezozómoc</h2>
<p>
El Parque Tezozómoc es uno de los espacios más emblemáticos de Azcapotzalco.
Diseñado para ofrecer áreas verdes y actividades recreativas,
es un lugar perfecto para familias y amantes de la naturaleza.
</p>
</div>
<footer>
© 2024 Alcaldía Azcapotzalco. Todos los derechos reservados.
</footer>
</body>
</html>
VISTA PRINCIPAL E INDIVIDUAL
No hay comentarios.:
Publicar un comentario