Estructura semantica Html5.pptx
EliAlbertoMendoza1
401 views
22 slides
Mar 28, 2022
Slide 1 of 22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
About This Presentation
Presentación sobre la estructura de una pagina web utilizando cajas para contener y estructurar la información
Slide Content
Diseño web I Tema: Estructura Semántica de una página en HTML5 Martes 8 de marzo del 2022 Eli Alberto Mendoza
Estructura básica de una página en HTML5 <! doctype html > < html > <head> <head> <meta charset ="utf-8"/> < title >Título de la web</ title > </head> < body > < body > Contenido de la web </ body > </ html > En HTM la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico, que sería el siguiente:
Partes de una página web ¿Qué es y qué contiene el <head >? El <head> es una parte de la web donde colocamos todas aquellas etiquetas (que no se van a visualizar), pero que sirven para indicar todas las características que el navegador necesita, como por ejemplo: <meta charset ="utf-8"/> La etiqueta charset es una de las impriscindibles , ya que indica la codificación que tendrá la página. Con un valor de utf-8 se mostrarán símbolos como la "ñ", "ç" o los acentos correctamente. < title >Título de la página</ title > El texto indicado dentro de la etiqueta < title > se mostrará en la pestaña del navegador. Además ser el que se muestre en las búsquedas de los diferentes buscadores y es un elemento importante (a nivel de SEO) para el posicionamiento de la página. <meta name =" description " content ="Descripción de la página"/> Dentro del atributo content =" " escribiremos el texto que queremos que aparezca como descripción de nuestra página cuando ésta aparezca dentro de los resultados de búsqueda de los buscadores. No influye en el posicionamiento, pero si puede condicionar a que los usuarios hagan clic y accedan en un mayor número a nuestra página. La longitud idónea no debe ser superior a 156 carácteres , para que el buscador no lo corte por donde más le convenga.
Partes de una página web ¿Qué es style >? <style type="text/ css "> /* código CSS */ </ style> Dentro de estas etiquetas style ubicaremos el código CSS que única y exclusivamente afectará a los elementos de este mismo fichero HTML < link rel = stylesheet href =" css /estilo.css" type="text/ css "/> En el atributo href =" " indicaremos la ruta donde está ubicado al fichero CSS externo (código que afectará a todos los elementos de todas las páginas HTML donde se coloque esta etiqueta). En el caso de que una página tenga estas dos últimas etiquetas se ejecutarán las dos. Si tienen las mismas propiedades, tendrá más valor la que se indique en último lugar
Partes de una página web ¿Qué es script >? Dentro de esta etiqueta script escribiremos el código de javaScript (en el caso de que exista) que única y exclusivamente afectará y se ejecutará dentro este mismo fichero HTML. <meta name =" viewport " content =" width = device-width , initial-scale =1.0"> El valor viewport únicamente será leído por móviles, tablets y dispositivos conectados a internet en general, en los que el tamaño de su navegador esté supeditado al tamaño de la pantalla del dispositivo
Las etiquetas semánticas de HTML5 El < body > es donde se colocan todos los elementos que sí se van a mostrar y que forman el contenido de la página. Habitualmente todo este contenido deberá estar dentro de cajas . Con la versión anterior de HTML sólo existía un tipo de caja <div> , por lo que una caja podía contener cualquier tipo de contenido. Una de las novedades de HTML5, aparte de disponer de esta misma caja genérica <div> , tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto <main> , < header > , < nav > , <section> , <article> , <aside> y <footer> . De esta manera el navegador puede entender qué contiene cada una de estas cajas, sin necesidad de tener que entender el idioma utilizado y sin tener que leer ni analizar el texto que contiene.
Estructura básica de una página en HTML5
Partes de una página web ¿< header > encabezado </ header > Dentro de la caja < header > ubicamos el contenido que estaría destinado al encabezado de la página. Normalmente contiene el logo y el nombre de la página y suele estar ubicado al inicio. < footer > pie de página </footer > La caja <footer> contiene la información que figura al pie de la página (normalmente es la última caja de todas) y es donde se ubica el ©, e información como el mapa de la página, autor, fecha y otros datos finales. Actualmente existe la tendencia de hacer <footer> enormes donde figura todo lo que se puede encontrar en el sitio.
Partes de una página web <nav> </nav > La caja < nav > contiene todos los enlaces de la página, ya sea a otras secciones de nuestro mismo sitio web o a páginas externas. Por ello, en algunos casos pueden existir varios < nav >, como por ejemplo el del principio de la página y otro final ubicado dentro del <footer> < section > sección de información </section> Las cajas <section> contienen el contenido genérico de la página . Se pueden utilizar varios <section> al mismo tiempo en la misma página. Pueden contener múltiples <div> y otras cajas relacionadas, como <article>. Normalmente se utilizan para grandes cantidades o secciones de información de tipo similar.
Partes de una página web < article > artículo </article> Las cajas <article> también están destinadas a contener el contenido de la página, aunque normalmente suelen utilizarse para mostrar información más reducida y concreta y que puede ser independiente del resto. < aside > contenido </aside> Dentro de las cajas de tipo <aside> se ubican los contenidos que no tienen relación directa con el contenido, como por ejemplo información sobre vacunas o pasaportes en una web de viajes, calendario de eventos de una entidad, publicidad o la biografía del autor de un blog.
Partes de una página web < figure > imagen </figure> Aunque <figure> no tiene las mismas funcionalidades ni características que el resto de cajas, tiene como objetivo contener imágenes que opcionalmente pueden tener vinculadas un pie de imágen (información más detallada en el tema figure y figcaption ).
<! doctype html > < html > <head> <meta charset ="utf-8"/> <meta name =" description " content ="Resumen del contenido de la página"> < title >Título de la página</ title > <link rel =" stylesheet " href =" css /estilo.css" type="text/ css "/> <style type="text/ css "> código CSS código CSS </style> <script type="text/ javascript "> código javaScript código javaScript </script> <script type="text/ javascript " src =" js /codigo.js"></script> <meta name =" viewport " content =" width = device-width , initial-scale =1.0"> </head> < body > < header >cabecera</ header > < nav > enlace1 enlace2 </ nav > <main> <section> <article> contenido </article> <article> contenido </article> </section> </main> <footer> © pie de la página </footer> </ body > </ html >
¿En qué apartado del HTML no añadirías un < footer >? ¿Un < article > puede ir dentro de un < section >? En HTML5 ¿es correcto seguir utilizando <div>? ¿Qué formato se debe utilizar al guardar un fichero html para que se muestren los acentos? ¿Qué 'etiqueta html ' está indicada para CONTENER imágenes? <FIGURE> ¿Cómo se llama la 'etiqueta html ' dónde se ubica el encabezado de la página? ¿Cómo se llama la 'etiqueta html ' dónde se ubican los enlaces de navegación de la página?
Etiquetas básicas: párrafos, líneas y encabezados etiquetas más básicas, pero fundamentales para separar párrafos (<p>), crear saltos de línea (<br>), crear negritas (<b>), cursivas (<i>), señalar encabezados (<h1>-<h6>), y colocar sangrías (<dd >). La actividad de este tema se basa en rellenar el archivo index.html creado la clase anterior pero esta vez ya con información sobre el instituto Choloma que a continuación se le muestra. Escribir el contenido de texto dentro de cada una de las cajas semánticas ( < title > , < header > , < nav > , < section > , < article > , < footer > entre otros). Añadir saltos de página ( <br> ) y separaciones de párrafo ( <p> ). Añadir encabezados (de <h1> a <h7> ) para resaltar la relevancia del contenido. Añadir cursivas (<i>), sangrías (<dd >).
Imágenes, listas y enlaces listas ordenadas ( <ol> ) y desordenadas ( <ul> ), personalización de las viñetas, vinculación de imágenes ( <img> ) y la utilización de enlaces ( <a> ), tanto en formato texto como con imágenes. Asimismo, vamos a ver un resumen de propiedades y selectores propios para poder dar formato CSS a los enlaces (quitar subrayado, configurar colores, cambiar el color al pasar el cursor por encima ). < img src ="carpeta/nombre_imagen.png" alt ="descripción"> Es importante añadir información de tipo textual a la imagen para que los buscadores (a nivel de SEO) puedan saber qué muestra la imagen e indexar esta información, y los dispositivos "lectores de pantalla" para personas invidentes, puedan describir la imagen oralmente. Para ello utilizamos el parámetro alt , seguido de la "descripción de la imagen".
Formatos de imagen de HTML5 HTML5 acepta 4 formatos de imagen para nuestras páginas web (JPG, GIF, PNG y SVG)
Actividad con Imagenes La actividad de este tema se basa en añadir los vínculos a las imágenes de esta página utilizando la etiqueta <img> (sin importar de momento su colocación) en los siguientes casos: Añadir las imágenes del contenido donde sean necesarias. Es conveniente establecer el tamaño final de la imagen modificando su tamaño desde cualquier programa de edición de imagen (como Photoshop o similar). Las imágenes que posteriormente queramos maquetar independientemente del resto de elementos que la acompañen, podremos aprovechar para colocarlas dentro de un <div>.
<figure> y < figcaption > <figure> es un nuevo tipo de caja de HTML5 con contenido semántico propio orientado a contener imágenes, con la interesante posibilidad de añadir un pie de imágen vinculada a ésta. De esta manera el navegador y cualquier robot que acceda a nuestra página conocerá la naturaleza del contenido que contiene este tipo de bloque y su información asociada . Para añadir un pie de imagen, utilizamos la etiqueta < figcaption > seguida del texto que se mostrará como pie vinculado a la imagen. Para dar características al texto del figcaption (pie de imagen)
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 401
- Slides 22
- Age 1344 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views