Configuración metaetiqueta viewport, web responsive

Configuración metaetiqueta viewport Cuando trabajamos con una web responsive es necesario definir un viewport adecuado, de lo contrario es muy probable que la página no lea correctamente los media queries y que se vea en formato muy reducido, siendo necesario hacer zoom para ver el contenido.

La etiqueta viewport se define en el elemento del documento HTML y puede contener diferentes atributos para ajustar el comportamiento de la página en dispositivos móviles.

< meta name="viewport" content="...">

Las propiedades más comunes utilizadas en «content» de la metaetiqueta viewport son:
«width«: Especifica el ancho inicial del viewport. Por ejemplo, «width=device-width» establece el ancho inicial del viewport para que coincida con el ancho del dispositivo.
«initial-scale«: Define el nivel de escala inicial del viewport. Por ejemplo, «initial-scale=1.0» establece que la página se mostrará inicialmente sin ninguna escala.
«minimum-scale» y «maximum-scale»: Estos atributos permiten establecer los límites mínimos y máximos de escala del viewport, controlando si el usuario puede hacer zoom en la página.
«user-scalable«: Este atributo permite habilitar o deshabilitar la capacidad del usuario para hacer zoom en la página. Si se establece en
«yes», el usuario podrá hacer zoom; si se establece en «no», se deshabilitará el zoom.
Height: altura virtual de la pantalla o altura del viewport

Resumen de etiquetas HTML

•Estructura basica

•Elementos estructurales

•Elementos semánticos

**< head>< /head>
**< nav> < /nav>
**< section> < /section>
** < article> < /article>
**< footer>< /footer>

•Etiquetas de contenido

•Etiquetas de texto

•Hiperenlaces: valores del atributo target

•Caracteres especiales

• Etiquetas para la creación de formularios

•Atributos de la etiqueta < input>

•Tipos de inputs: atributo type

•Patrones y expresiones regulares

•Tablas de contenido

•Contenido incrustado

• Elementos en bloque o block

•Elementos en línea o inline

•Marcadores o anclas en HTML

•Metaetiquetas
La declaración viewport nos permite definir los parámetros de visualización de un página web en los diferentes dispositivos. Consiste en una metaetiqueta mediante la que se establece si se puede hacer zoom en una página, el zoom inicial o la anchura de la pantalla del dispositivo.

•Metaetiqueta viewport
Metaetiqueta viewport

Ejercicios resueltos HTML

•Crea una página con las siguientes etiquetas
Crea una página web HTML que cumpla con las siguientes especificaciones:

**Estructura Básica: Crea la estructura básica de un documento HTML con las siguientes etiquetas:
< !DOCTYPE html>
< html lang="es">
< head> con:
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title>Mi Página Web< /title>
< body> que contenga:
< header> con:
< h1>Bienvenidos a Mi Página Web< /h1>
< p>Esta es una página de ejemplo para el ejercicio.< /p>

**Secciones: Agrega dos secciones a tu página:
Una sección principal < main> con:
< h2>Acerca de Nosotros< /h2>
< p>Somos una empresa dedicada a ofrecer soluciones web.< /p>
Una sección < section> con:
< h2>Nuestros Servicios< /h2>
Una lista ordenada < ol> con tres elementos < li> que describan los servicios que ofrece tu empresa. Las viñetas deben ser de tipo abecedario.
Un enlace < a> con el texto «Ver más servicios» que lleve a https://www.ejemplo.com. Abre el enlace en una nueva ventana o pestaña del navegador.

**Pie de Página: Crea un pie de página < footer> con dos enlaces:
Un enlace < a> con el texto «Enviar correo electrónico» que tenga href="mailto:info@miempresa.com".
Un enlace < a> con el texto «Llamar por teléfono» que tenga href="tel:+1234567890".
Incluye el carácter especial «©» seguido del nombre de tu empresa para indicar «Todos los derechos reservados». Utiliza entidades, código hexadecimal o decimal para incluir el carácter especial

Resolucion:

• Crea una página web utilizando contenido incrustado y marcadores
Crea una página web que incluya las siguientes características:
**Utiliza la etiqueta < img> para mostrar una imagen en tu página. Debes incluir los siguientes atributos:
src: Especifica la URL o la ruta de la imagen que deseas mostrar.
alt: Proporciona un texto alternativo para la imagen en caso de que no se cargue correctamente.
width: Establece el ancho de la imagen en píxeles.
height: Establece la altura de la imagen en píxeles.

**Inserta un video de YouTube en tu página. Para ello, debes utilizar la etiqueta < iframe>. Asegúrate de seguir estos pasos:
Ve al video de YouTube que deseas insertar.
Haz clic en el botón «Compartir» debajo del video.
Selecciona la opción «Insertar».
Copia el código HTML proporcionado por YouTube y pégalo en tu página.

**Agrega un título o encabezado a tu página utilizando la etiqueta < h1>. Elige un título relevante para tu página.
Utiliza marcadores para crear enlaces internos que permitan a los usuarios navegar rápidamente entre la imagen y el video. Para ello, utiliza la etiqueta < a> con el atributo href que apunte a los marcadores.
Incluye las etiquetas para la metainformación, como < meta name="description" content="Descripción de la página"> y < meta name="author" content="Tu Nombre">.

Resolucion: