Taller

IMG

Objeto	Tabla	Incomedia

<b>Archivo de pruebas</b>

src es la ruta del archivo de la imagen.
alt es la etiqueta que le asignas a la imagen.
Ten en cuenta que esos números están en píxeles.
También puedes usar la etiqueta style.
Por ejemplo, tendrías el siguiente código en el texto:

.
La etiqueta style garantiza que la imagen se quede del mismo tamaño y anule cualquier comando de tamaño de imagen adicional.[1]
Cambia los valores de height y width.

<nav>

La etiqueta <nav> se utiliza típicamente para contener enlaces de navegación a las áreas más importantes de un sitio web, como las páginas principales, las categorías o las secciones de contenido relevantes. Ejemplo de uso A continuación, se presenta un ejemplo básico de cómo utilizar la etiqueta <nav>:
Ejemplo de etiqueta nav

Nombre del sitio web

En este ejemplo, la etiqueta <nav> contiene una lista no ordenada (ul) de enlaces de navegación (a) a las páginas principales del sitio web.

Atributos y estilos
Una vez que hayas creado la estructura básica de la etiqueta <nav>, puedes mejorar su apariencia y accesibilidad utilizando atributos y estilos relevantes.

Atributo “arial-label”
El atributo “aria-label” permite proporcionar un título descriptivo para la etiqueta <nav> que será leído por las tecnologías asistivas, mejorando la accesibilidad del sitio.
Ejemplo de uso del atributo “aria-label” en la etiqueta <nav>:

Atributos “class” e “id”:
Puedes utilizar los atributos “class” e “id” para asignar clases e identificadores a la etiqueta <nav>, lo que facilita la selección y manipulación de la etiqueta en CSS y JavaScript.
Ejemplo de uso de atributos class e id en la etiqueta <nav>:

Atributo “style”
Es importante mencionar que utilizar estilos en línea puede dificultar el mantenimiento y la organización del código, por lo que generalmente es preferible aplicar estilos utilizando hojas de estilo externas o bloques de estilo dentro del elemento <style>.
Ejemplo de aplicación de estilos en línea en la etiqueta <nav>:

Aplicar estilos CSS a la etiqueta <nav> y sus elementos
Puedes utilizar CSS para aplicar estilos y personalizar la apariencia de la etiqueta <nav> y sus elementos internos.
Por ejemplo, puedes cambiar el color de fondo, el estilo de los enlaces y la disposición de los elementos de la lista.

Ejemplo de aplicación de estilos CSS en la etiqueta <nav> y sus elementos:
Ejemplo de estilos en etiqueta nav
Al combinar estos atributos generales, atributos específicos y estilos CSS, puedes personalizar aún más la etiqueta <nav> y adaptarla a las necesidades de tu proyecto y el diseño de tu sitio.

Navegación accesible
Utilizar el atributo “aria-label”
Ejemplo de uso del atributo “aria-label” en la etiqueta <nav>:

Utilizar texto claro y descriptivo para los enlaces

Añadir estados de enfoque y activos visibles
Para mejorar la experiencia de navegación con el teclado, es fundamental proporcionar estilos visibles para los estados de enfoque y activos de los enlaces. Esto puede lograrse utilizando las pseudo clases CSS :focus y :active.

Ejemplo de estilos para estados de enfoque y activos:
.menu-principal a:focus, .menu-principal a:active { background-color: #777; outline: none; }
Navegación responsiva
En esta sección, exploraremos cómo crear una navegación responsiva utilizando la etiqueta <nav> y estilos CSS.
Utilizar consultas de medios CSS
Las consultas de medios son una característica de CSS que permite aplicar estilos específicos según las características del dispositivo o la ventana del navegador, como el ancho de la pantalla.
Ejemplo de consulta de medios para adaptar la navegación a diferentes tamaños de pantalla:
/* Estilos base para navegación */
.menu-principal ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu-principal a {
display: block;
text-decoration: none;
padding: 10px;
}
/* Estilos para pantallas más grandes */
@media (min-width: 768px) {
.menu-principal li {
display: inline;
}

.menu-principal a {
display: inline-block;
}
}

Crear un menú hamburguesa
Un menú hamburguesa es un icono comúnmente utilizado en la navegación móvil para indicar que hay un menú oculto. Al hacer clic en este icono, se muestra el menú de navegación. Puedes crear un menú hamburguesa utilizando HTML, CSS y JavaScript.

Ejemplo de un menú hamburguesa básico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de navegación responsiva</title>
<style>
/* Estilos base para navegación */
.menu-principal ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}

.menu-principal a {
display: block;
text-decoration: none;
padding: 10px;
}

/* Estilos para pantallas más grandes */
@media (min-width: 768px) {
.menu-principal li {
display: inline;
}

.menu-principal a {
display: inline-block;
}

.menu-principal ul {
display: block;
}
}

/* Estilos para menú hamburguesa */
.hamburguesa {
cursor: pointer;
font-size: 24px;
display: block;
padding: 10px;
}

@media (min-width: 768px) {
.hamburguesa {
display: none;
}
}
</style>
<script>
function toggleMenu() {
var menu = document.querySelector(".menu-principal ul");
menu.style.display = menu.style.display === "block" ? "none" : "block";
}
</script>
</head>
<body>
<nav class="menu-principal" aria-label="Menú principal">
<span class="hamburguesa" onclick="toggleMenu()">☰</span>

Inicio

Acerca de

Servicios

Contacto

</nav>
<!-- Resto del contenido -->
</body>
</html>

En este ejemplo, el menú hamburguesa se muestra en pantallas más pequeñas y se oculta en pantallas más grandes. Cuando se hace clic en el icono hamburguesa, la función toggleMenu() de JavaScript se encarga de mostrar u ocultar el menú de navegación.

Ajustar el diseño de la navegación según el tamaño de la pantalla
Ejemplo de ajuste de la disposición de la navegación según el tamaño de la pantalla:
.menu-principal li {
display: inline;
}

.menu-principal a {
display: inline-block;
}

@media (max-width: 767px) {
.menu-principal li {
display: block;
}

.menu-principal a {
display: block;
}
}

Aquí hay algunos ejemplos más detallados de código HTML5 con la etiqueta <nav>:
Navegación principal:

En este ejemplo, la etiqueta <nav> define una sección de navegación principal en la página web. El contenido dentro de la etiqueta está estructurado como una lista desordenada (<ul>) con elementos de lista (<li>) que contienen enlaces (<a>) a otras páginas o secciones dentro de la misma página.

Navegación secundaria:

En este ejemplo, la etiqueta <nav> define una sección de navegación secundaria en la página web. El contenido dentro de la etiqueta está estructurado de la misma manera que en el ejemplo anterior, pero esta vez se enlazan a secciones o páginas secundarias o complementarias dentro del sitio.

Navegación con secciones anidadas:

En este ejemplo, la etiqueta <nav> define una sección de navegación principal con secciones anidadas. El contenido dentro de la etiqueta está estructurado como una lista desordenada (<ul>) con elementos de lista (<li>) que contienen enlaces (<a>) a otras páginas o secciones dentro de la misma página.

TABLE

Encabezado 1	Encabezado 2
Celda 1	Celda 2

Tabla 2 td 1

Tabla 2 td 2 logo país

Search Engine Colossus código A index 2

Tabla 2 td 3

Página País Zimbabwe imagen boton código A index código A Página Académico