Dreamweaver CC 2017 esencial

Estructura semántica de la página HTML en Dreamweaver 2017

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
La forma correcta de organizar los contenidos dentro del HTML es mediante etiquetas semánticas: etiquetas que, además de englobar contenidos, sirven para añadir información sobre para qué sirven esos contenidos o qué importancia tienen.

Transcripción

Además del "head" dentro del HTML tengo la etiqueta "body". Esta etiqueta "body" es donde voy a meter todos los contenidos de mi página. Pero dentro de ella voy a poder también trabajar con la estructura de esa página quiero decir, aparte de que se divida el HTML en la configuración y luego en los contenidos, estos contenidos los puedo organizar de tal manera que se sepa muy fácilmente para qué sirve cada uno de esos contenidos y dónde los voy a colocar. Es lo que se llama HTML semántico. Y es muy práctico, primero porque sirve para que nuestras páginas sean más fácilmente interpretables tanto por lectores de código, por ejemplo para temas de accesibilidad como también y sobre todo para los buscadores para que los buscadores entiendan mejor la importancia de los contenidos que yo tengo alojados en mi página y por tanto encuentren mejor mis páginas. Estas etiquetas van a definir entonces los contenidos que estoy añadiendo por su utilidad. Dentro de insertar en HTML tenemos las etiquetas semánticas de HTML5 que van a ser 'Header', 'Navigation' que es la etiqueta 'nav', 'Main', la etiqueta 'Aside', 'Article', 'Section' y 'Footer'. Más o menos, todas las páginas tienen una estructura parecida. No es que tengan que tener todas estas etiquetas pero suelen compartir bastantes. Por ejemplo, en una página normal, en la parte superior de la página tendremos el logotipo, el menú principal, etc. Es lo que suele venir dentro del 'header'. Así que yo puedo hacer clic en 'Header' y eso añadirá ese 'header' al cuerpo. ¿Dónde quiero que lo añada? En el punto de inserción donde tengo ahora mismo el cursor. Puedo añadirle clases CSS automáticamente, en mi caso no quiero añadírselas y también puedo ponerle identificadores únicos; en el caso del 'header' no tiene sentido, pero en otros casos sí que podría tenerlo. Pulso en 'Aceptar' y automáticamente me ha añadido esa etiqueta 'header' y además con un texto para que sepa donde puedo irlo modificando. Por ejemplo, aquí podría poner DW Runners, que va a ser pues ni más ni menos que el rótulo de la portada. Si hago clic y añado un 'Intro' puedo añadir el siguiente elemento principal que es el 'Main'. Aquí es donde va a venir el contenido. Igual que tengo un cabecero, tengo una zona central en la página donde va ese contenido. En el punto de inserción lo voy a meter directamente y aquí dentro iría metiendo diferentes secciones o artículos o meter dentro de una sección varios artículos, por ejemplo, o dentro de un artículo varias secciones; eso ya depende un poco de gustos. Así que podría hacer clic y veremos que lo que ocurrirá ahora será que va a mostrarme opciones distintas a las que tenía antes y es que cuando yo tengo seleccionado un trozo de código, me deja elegir si quiero que ajuste alrededor de la selección que la ponga después del inicio de la etiqueta o del final de la etiqueta. Voy a decir que lo ajuste alrededor, o sea que sustituya una cosa por otra. Y aquí vemos cómo ha añadido la etiqueta sección alrededor de ese contenido. Dentro de esa etiqueta sección, por ejemplo podría añadir un artículo. Haciendo exactamente lo mismo conseguiré que se haya estructurado correctamente. Pero es que podría añadir, por ejemplo, otro segundo artículo. Y aquí tendría este segundo artículo. Y luego por último, dentro de esta estructura en la que tengo un cabecero y unos contenidos, lo suyo es poner lo que aparecerá abajo, por ejemplo las condiciones legales, enlaces de contacto, cosas de ese estilo. Y eso es lo que se llama 'footer', el pie de la página. Pulso en 'Footer' y aquí me ha añadido este 'footer'. Esto básicamente es la estructura habitual de casi cualquier página web Lo normal es intentar hacer que esto esté colocado con un poco más de estilo para que se vea más fácilmente cómo están metidas unas etiquetas dentro de otras. De todas formas que conste que todavía se pueden añadir más elementos, por ejemplo, se pueden añadir los "aside". Esto sirve para hacer menús en el lateral para que aparezca un elemento en el lateral colocado, por ejemplo que tenga los enlaces secundarios. No obstante es interesante ver que aunque sea un "aside", sin embargo lo ha colocado directamente con el resto de los elementos y esto es debido a que yo según voy añadiendo etiquetas HTML, el HTML no sabe cómo se tiene que colocar. Él lo único que va a hacer es colocar secuencialmente cada uno de los elementos que voy añadiendo Si el siguiente elemento cabe hacia la derecha, pues lo pone seguido y si no lo pone debajo, salvo el caso de que sean elementos estructurales como son todos estos en los cuales, perdón aquí faltaría también una tabulación, van a colocarse siempre unos encima de otros. En cualquier caso es bueno recordar que hay que procurar utilizar siempre este tipo de estructuras, cuando estemos creando páginas web.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.