6. Elementos Semánticos HTML y CSS Responsivo

W3Schools

Diseño de Sitios Web

Elementos Semánticos HTML y CSS Responsivo

HTML tiene varios elementos semánticos que definen las diferentes partes de una página web:<header> - Define un encabezado para un documento o una sección<nav> - Define un conjunto de enlaces de navegación<section> - Define una sección en un documento<article> - Define un contenido independiente y autónomo<aside> - Define contenido aparte del contenido (como una barra lateral)<footer> - Define un pie de página para un documento o una sección<details> - Define detalles adicionales que el usuario puede abrir y cerrar a pedido<summary> - Define un encabezado para el elemento <details>

Elementos y técnicas de diseño HTML

El elemento <section> define una sección en un documento. Una sección es una agrupación temática de contenido, normalmente con un encabezado.Ejemplos:

• Capítulos
• Introducción
• Noticias
• Información de contacto

Una página web normalmente se puede dividir en secciones para la introducción, el contenido y la información de contacto.

Elemento HTML <section>

<section><h1>WWF</h1><p>El Fondo Mundial para la Naturaleza (WWF) es una organización internacional que trabaja en cuestiones relacionadas con la conservación, la investigación y la restauración del medio ambiente, anteriormente llamada Fondo Mundial para la Naturaleza. El WWF se fundó en 1961.</p></section><section><h1>El símbolo del panda del WWF</h1><p>El panda se ha convertido en el símbolo del WWF. El conocido logotipo del panda de WWF tiene su origen en un panda llamado Chi Chi que fue trasladado del Zoológico de Pekín al Zoológico de Londres el mismo año de la creación de WWF.</p></section>

Elemento HTML <section>

El elemento <article> especifica contenido independiente y autónomo. Un artículo debe tener sentido por sí mismo y debe ser posible distribuirlo independientemente del resto del sitio web.Ejemplos:

• Publicaciones en foros
• Publicaciones en blogs
• Comentarios de usuarios
• Fichas de productos
• Artículos de periódicos

Elemento HTML <article>

<article><h2>Google Chrome</h2><p>Google Chrome es un navegador web desarrollado por Google, lanzado en 2008. ¡Chrome es el navegador web más popular del mundo en la actualidad!</p></article><article><h2>Mozilla Firefox</h2><p>Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla. Firefox ha sido el segundo navegador web más popular desde enero de 2018.</p></article><article><h2>Microsoft Edge</h2><p>Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015. Microsoft Edge reemplazó a Internet Explorer.</p></article>

Elemento HTML <article>

El elemento <footer> define un pie de página para un documento o una sección.Un elemento <footer> normalmente contiene:

• información de autoría
• información de copyright
• información de contacto
• mapa del sitio
• enlaces para volver al principio
• documentos relacionados

<footer><p>Autor: Hege Refsnes</p><p><a href="mailto:hege@example.com">hege@example.com</a></p></footer>

Elemento HTML <footer>

El elemento <nav> define un conjunto de enlaces de navegación.<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a></nav>

Elemento HTML <nav>

Un iframe HTML se utiliza para mostrar una página web dentro de una página web.La etiqueta HTML <iframe> especifica un marco en línea.Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.<iframe src="url" title="description"></iframe><iframe src="https://raisaretif.com/" title="description"></iframe>

iFrames HTML

Utilice los atributos de altura y anchura para especificar el tamaño del iframe.La altura y la anchura se especifican en píxeles de forma predeterminada:Ejemplo:<iframe src="demo_iframe.htm" height="200" width="300" title="Ejemplo de iframe"></iframe>O puede agregar el atributo de estilo y utilizar las propiedades de altura y anchura de CSS:Ejemplo<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Ejemplo de iframe"></iframe>

iFrames HTML: Alto y Ancho

p {border-right: 6px solid red;}

p {border-top: 6px solid red;}

p {border-bottom: 6px solid red;}

La propiedad border-radius se utiliza para agregar bordes redondeados a un elemento:p {border: 2px solid red;border-radius: 5px;}

Bordes redondeados CSS

p {border-left: 6px solid red;}

Bordes individuales CSS

El parámetro de desenfoque define el radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra.div {box-shadow: 10px 10px 5px lightblue;} Sintaxis: horizontal vertical blur color

Blur CSS

La propiedad CSS box-shadow se utiliza para aplicar una o más sombras a un elemento.div { box-shadow: 10px 10px lightblue;} Sintaxis: horizontal vertical color

Box Shadow CSS

Todas las propiedades de margen pueden tener los siguientes valores:

• auto: el navegador calcula el margen
• length: especifica un margen en px, pt, cm
• %: especifica un margen en % del ancho del elemento contenedor
• inherit: especifica que el margen debe heredarse del elemento padre

p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;}

Las propiedades de margen de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.Con CSS, tienes control total sobre los márgenes. Existen propiedades para configurar el margen de cada lado de un elemento (superior, derecho, inferior e izquierdo).CSS tiene propiedades para especificar el margen de cada lado de un elemento:margin-topmargin-rightmargin-bottommargin-left

Márgenes CSS

Si la propiedad de margen tiene cuatro valores:margin: 25px 50px 75px 100px;

• el margen superior es de 25px
• el margen derecho es de 50px
• el margen inferior es de 75px
• el margen izquierdo es de 100px

p { margin: 25px 50px 75px 100px;}

Para acortar el código, es posible especificar todas las propiedades de margen en una sola propiedad.La propiedad de margen es una propiedad abreviada para las siguientes propiedades de margen individuales:margin-topmargin-rightmargin-bottommargin-left

Márgenes CSS: Propiedad abreviada

Todas las propiedades de relleno pueden tener los siguientes valores:

• length: especifica un relleno en px, pt, cm
• %: especifica un relleno en % del ancho del elemento contenedor
• inherit: especifica que el relleno debe heredarse del elemento principal

div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;}

Las propiedades de relleno de CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.CSS tiene propiedades para especificar el relleno para cada lado de un elemento:padding-toppadding-rightpadding-bottompadding-left

Padding CSS

Si la propiedad de relleno tiene cuatro valores:padding: 25px 50px 75px 100px;

• el relleno superior es de 25px
• el relleno derecho es de 50px
• el relleno inferior es de 75px
• el relleno izquierdo es de 100px

div { padding: 25px 50px 75px 100px;}

Para acortar el código, es posible especificar todas las propiedades de relleno en una sola propiedad.La propiedad de relleno es una propiedad abreviada para las siguientes propiedades de relleno individuales:padding-toppadding-rightpadding-bottompadding-left

Padding CSS: Propiedad abrieviada

El diseño web adaptable consiste en crear páginas web que se vean bien en todos los dispositivos.Un diseño web adaptable se ajustará automáticamente a diferentes tamaños de pantalla y ventanas gráficas.El diseño web responsivo consiste en utilizar HTML y CSS para redimensionar, ocultar, reducir o ampliar automáticamente un sitio web para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).

Diseño web responsivo

Para crear un sitio web responsivo, agregue la siguiente etiqueta <meta> a todas sus páginas web:<meta name="viewport" content="width=device-width, initial-scale=1.0">Esto configurará la ventana gráfica de su página, que le dará al navegador instrucciones sobre cómo controlar las dimensiones y el escalado de la página.

Viewport

Si la propiedad de ancho CSS se establece al 100 %, la imagen responderá y se ampliará o reducirá:<img src="img_girl.jpg" style="width:100%;"> En CSS:img{width:100%;}

Propiedad de width

Las imágenes adaptables son imágenes que escalan perfectamente para adaptarse a cualquier tamaño de navegador.

Imágenes Responsivas

Si la propiedad max-width se establece al 100%, la imagen se reducirá si es necesario, pero nunca se ampliará para ser más grande que su tamaño original:<img src="img_girl.jpg" style="max-width:100%;height:auto;">En CSS:img{max-width: 100%;height: auto;}

Propiedad max-width

El tamaño del texto se puede configurar con una unidad "vw", que significa "ancho de la ventana gráfica".De esa manera, el tamaño del texto seguirá el tamaño de la ventana del navegador:<h1 style="font-size:10vw">Hello World</h1>En CSS:h1{font-size:10vw;}

Texto Responsivo

Instrucciones en Actividad 6

Ejercicio

¡Gracias!