El Live Server es una extensión para Visual Studio Code, nos permite visualizar nuestro sitio web sin necesidad de recargarlo para ir viendo las modificaciones que le vamos realizando.
En la barra lateral izquierda pulsar en extensiones
Buscar Live Server
Pulsar en Instalar o install.
Una vez instalado estará listo para poder usar.
Clic derecho sobre nuestro html, Open with Live Server
Se mostrará en el navegador de internet con el siguiente formato: un ip local, dos puntos, un puerto, barra y nuestro archivo html.
___________________________________________
Layout o Diseño de Página:
Etiquetas semánticas para la estructura principal de nuestro sitio web: mejoran la accesibilidad y ayudan al motor de búsqueda a entender como está estructurado nuestra página. Se agregan dentro del body.
Etiquetas semánticas para la estructura principal de nuestro sitio web: mejoran la accesibilidad y ayudan al motor de búsqueda a entender como está estructurado nuestra página. Se agregan dentro del body.
header: Representa la cabecera de la página, suele contener elementos de introducción o información importante, como el logo, el título, el menú de navegación, etc. No se debe usar como contenedor general para cualquier cosa.
Emmet: header
Significado semántico: si
Puede repetirse: si, especialmente dentro de section o para menús adicionales.
nav: Se usa para envolver los enlaces de navegación. Especifica el área de la página que contiene los enlaces principales para navegar por el sitio web.
Emmet: nav
Significado semántico: si
Puede repetirse: si, especialmente dentro de section o article.
Emmet: main
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
Significado semántico: si
Puede repetirse: no.
aside: Se utiliza para contenido que está ligeramente relacionado con el contenido principal, pero que puede ser separado sin afectar la comprensión del contenido principal. Ejemplos: Barras laterales con enlaces adicionales, Widgets de redes sociales, Publicidad o promociones, Notas al margen o información complementaria.
Emmet: aside
Significado semántico: si
Puede repetirse: si.
footer: El pie de página de un documento, normalmente contiene información adicional, como derechos de autor, enlaces a la política de privacidad, información de contacto, etc.
Emmet: footer
Significado semántico: si
Puede repetirse: si, especialmente dentro de section o article.
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
© Símbolo de copyright (©)
® Símbolo de marca registrada (®)
® Símbolo de marca registrada (®)
Ejemplo básico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estructura principal del sitio</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main></main>
<aside></aside>
<footer></footer>
</body>
</html>
Es posible agrupar main y aside con un div para que vayan en la misma fila.
<body>
<header>
<nav></nav>
</header>
<div>
<main></main>
<aside></aside>
</div>
<footer></footer>
</body>
___________________________________________
Display: Grid para organizar la estructura de la página.
La estructura creada con header, main, aside y footer se encuentra dentro del body, por lo tanto, se le aplicaría una forma de mostrar el contenido; para esto podremos utilizar display: grid;
El contenedor (nuestro body) se convierte en una rejilla y sus elementos se distribuyen siguiendo este modelo.
En el css se asigna lo siguiente:
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dónde el display grid se aplica al contenedor body y se trazan 3 filas, que coinciden con header, (main + aside), y con footer.
auto significa que el alto de la fila se ajusta al contenido de la misma automáticamente, usando el espacio mínimo. Esto significa que la altura de estas filas será tan grande como sea necesario para acomodar su contenido.
1fr significa una fracción y ocupa todo el espacio que puede para la misma.
Se le puede aplicar un gap para dar separación entre columnas. Ejemplo: gap: 20px;
También será necesario indicar que el body ocupe minimamente 100% del alto (height) del viewport (área visible del navegador). height: 100vh; o respecto al ancho width: 100vw;
Esto es necesario para que el footer se pegue al pie del viewport.
Ejemplo completo:
body {
height: 100vh; /* Asegura que el body ocupe el 100% de la altura de la
ventana */
display: grid; /* Usamos Grid para la estructura del layout */
grid-template-rows: auto 1fr auto; /* Tres filas: header (auto),
contenido (1fr), footer (auto) */
gap: 5px;
}
___________________________________________
Quitando estilo a la Lista
Esta es una lista típica:
- uno
- dos
- tres
En el css, vamos a seleccionar la ul (lista) que está dentro de la etiqueta nav, que se encuentra dentro de la etiqueta header, esto es una selección por etiqueta sin aplicar id o class, pero siendo específico en cuanto a la ubicación de la lista, ya que podría haber otras listas dentro de nuestro body. Es otra forma de seleccionar elementos en css.
header nav ul{
list-style: none;
}
al aplicar list-style: none; eliminamos las viñetas.
Para los ítems, queremos que se dispongan uno al lado del otro y no uno debajo del otro, entonces desde el css podemos indicarle lo siguiente:
li{
display: inline;
}
Pasan de su forma predeterminada de display: block; que si bien no está especificado, es su forma de mostrarse por defecto; a un display: inline; es decir, uno al lado del otro.
_______________
Display: inline, block, inline-block
- display: block; ocupa una línea completa, es decir, todo el ancho disponible.
- display: inline; ocupa solo el espacio necesario, y los elementos se colocan uno al lado del otro en una linea horizontal. No podemos aplicar una ancho (width), alto (height), aunque si nos permite aplicar márgenes horizontales, pero no verticales.
- display: inline-block; se comportan como elementos en línea, pero les podemos aplicarles ancho, alto, margen, padding.
_______________
Enlaces de color blanco:
En el html, los enlaces los ubicamos dentro de los elementos de la lista.
<ul>
<li>
<a href="#">uno</a>
</li>
<li>
<a href="#">dos</a>
</li>
<li>
<a href="#">tres</a>
</li>
</ul>
Nuevamente se selecciona en el css según la etiqueta contenedora, es decir, los a (enlaces) que están dentro del header. (de otro modo podríamos ponerles a cada etiqueta a una class del siguiente modo: <a href="#" class="enlace">uno</a> pero esto sería más engorroso).
color: white; aplica directamente color blanco al enlace.
text-decoration: none; elimina el subrayado.
Ahora bien, lo que si queremos, es que al pasar el mouse por encima se subraye como cualquier enlace. Esto es muy fácil, simplemente a la etiqueta a en el css debemos agregar :hover para indicar el momento en el que el mouse pasa por encima.
El css quedaría del siguiente modo:
Recordemos también que en el ejemplo final de página los enlaces estarán dentro del header pero a su vez dentro del nav y dentro del ul y li. No es necesario ser tan específico con el css, basta indicar que son los enlaces dentro del header, se sobreentiende que será todo lo que está dentro de la etiqueta y de las etiquetas contenidas en su interior.header a {
color: white;
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
___________________________________________
Centrar elementos:
En el html, insertamos dentro del body un div y un texto dentro.
<body>
<div>
Este es el contenido de un div
</div>
</body>
- Centrar un elemento como un div:
margin: 0 auto;
body{
background-color: rgb(255, 190, 137);
}
div{
background-color: rgb(30, 148, 109);
width: 300px;
margin: 0 auto;
}
- Centrar un texto dentro de un div:
text-align: center;
body{
background-color: rgb(255, 190, 137);
}
div{
background-color: rgb(30, 148, 109);
width: 300px;
text-align: center;
}
___________________________________________
Ejemplo de Web:
Práctica:
_page-0001.jpg)
_page-0002.jpg)
Continúa creando el resumen de los emmet y toma nota de las explicaciones.
Degradados Css: https://cssgradient.io
