HTML el body y su contenido.pptx

Unidad 3: HTML El body y su
contenido

• Una vez hemos configurado adecuadamente los metadatos de nuestra
página dentro del elemento head, podemos comenzar a trabajar con el
contenido propiamente dicho.
• Todo aquello que se muestra en una web a través de un navegador se
encuentra en el body del documento HTML.
• Vamos a clasificar la gran cantidad de elementos en cuatro grupos:
• elementos estructurales, empleados para distribuir los contenidos dentro
de la página;
• otros elementos semánticos, que no forman la estructura general del sitio
sino que se encargan de definir cada componente;
• tablas, para presentar valores tabulares; y elementos incrustados.
• Como se ha dicho, los dos únicos hijos del elemento html son head y body.
Por lo tanto, tras cerrar la etiqueta head con todos los metadatos en su
interior, deberemos crear el body; dentro de él encontraremos todo el
contenido visible de nuestra página, debidamente etiquetado.

3.2.- Principales
elementos de
bloque

Normalmente, los hijos directos de body serán
elementos estructurales que organizan la página.
Todos ellos, veremos varios, son elementos de bloque.
Esto significa que ocupan (salvo que modifiquemos este
comportamiento mediante CSS) el 100% del ancho de
la página. Dicho de otra manera; tras un elemento de
bloque no se permite ningún otro contenido, ni a su
derecha ni a su izquierda, ya que ocupan el ancho
completo, independientemente de que su contenido
ocupe menos. Además nos van a permitir, mediante
CSS, modificar sus propiedades relacionadas con el
tamaño (ancho, alto, márgenes interiores y
exteriores…)
Un ejemplo de estos elementos de bloque es el
párrafo.

El otro tipo de elemento que encontramos son los
elementos en línea (inline), que a diferencia de
los anteriores, sí admiten, si su ancho lo permite,
que se ubiquen otros elementos en línea a
continuación de ellos, a la derecha o izquierda. En
este caso no podremos modificar las propiedades
relacionadas con su tamaño, ya que este será,
siempre, el de su contenido. Un ejemplo de estos
elementos puede ser un enlace, que ocupa lo que
ocupe el texto del enlace.
Quizá el más usado de los grandes elementos de
bloque sea div. Es el único de este tipo de
elementos que no añade significado semántico a
su contenido. Es un elemento genérico que
tenemos a nuestra disposición para usarlo
cuando queramos agrupar otros elementos sin
que formen una unidad semántica. Lo
utilizaremos generalmente para, mediante CSS,
crear grupos, ‘cajas’, en el diseño de la web.

Crea el código HTML que represente la página propuesta.
Título
1. Primer apartado
Texto del primer apartado. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque lobortis dapibus elit, vel mollis mauris laoreet in. Etiam sit
amet ultrices turpis. Sed sodales semper felis, a eleifend velit consequat in.
Suspendisse id orci nec tortor elementum porta. Pellentesque et orci at turpis
ornare volutpat et vitae nunc. Fusce non luctus nisi. Sed non euismod quam.
Suspendisse potenti.
Podrá contener varios párrafos. Nullam efficitur blandit eros eget dapibus.
Nullam nec risus id massa condimentum porta eget eu quam. Ut tincidunt
finibus nulla nec bibendum. Donec finibus mauris aliquet orci scelerisque
faucibus. In hac habitasse platea dictumst. Vestibulum sit amet arcu libero.
Fusce accumsan elit eu blandit imperdiet.

2. Segundo apartado
Texto del segundo apartado, en este caso contiene subapartados.
2.1 Subapartado 1
Fusce in justo molestie tellus tincidunt interdum finibus eget enim.
Donec et lorem vehicula, interdum augue condimentum, euismod
purus. Nulla elementum enim et risus tempor euismod. Nam luctus
vitae nunc egestas molestie. Donec non enim at orci consequat
accumsan in lobortis leo. Cras quis quam at dolor luctus malesuada ut
vel magna. Integer gravida tincidunt massa, eget dictum tortor
posuere quis. Phasellus pretium ultricies tellus, quis aliquam metus
cursus nec. Etiam at laoreet diam.

2.2 Subapartado 2
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Donec tincidunt, lectus nec
finibus consequat, ex tellus suscipit mauris, et condimentum lectus
turpis nec metus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Vivamus ac aliquam est.
Vivamus eget mattis metus. Ut sed sapien sed ex tincidunt tempus.
Donec quis lobortis nibh, vitae viverra nisl.

3. Tercer apartado
Párrafos del tercer y último apartado.

3.3.- Elementos
inline o en línea

Los elementos que se muestran en línea son aquellos
que ocupan lo que ocupe su contenido. Suelen usarse
principalmente para contener texto que no forma
bloques, como caracteres o palabras aisladas. En su
interior, además de texto, podemos encontrar otros
elementos en línea, pero no elementos de bloque. Hay
una excepción a esta regla: los enlaces, que son
elementos en línea, sí que pueden tener dentro de ellos
elementos de bloque como h1, div, p, article...

Principales elementos en línea
orientados al texto

•Enlaces
Son el elemento más importante del lenguaje y el que supuso su carácter
innovador. Mediante ellos podemos enlazar en un documento diferentes
recursos. Se activan al hacer clic con el ratón, o tocarlos en pantallas
táctiles. Para crearlos disponemos de la etiqueta a, anchor; el destino al que
nos llevarán se indica empleando el atributo href. En su interior suele
aparecer el texto del enlace, pero también puede haber imágenes y otros
elementos de bloque. Veamos un par de ejemplos:

Si suponemos que la página en la que se encuentra este enlace
es http://test.site.es/index.html, ambos enlaces serán idénticos y
apuntan al mismo documento. La diferencia en la forma de escribir el
destino del enlace está en el uso de direcciones absolutas, en el primer
caso, y direcciones relativas, en el segundo. Las direcciones absolutas
incluyen la ruta completa al recurso, mientras que las direcciones
relativas indican la ruta al recurso desde la ubicación del elemento desde
el que se enlaza.
Como sabemos, los enlaces no solo pueden contener texto. Podemos
convertir en enlaces imágenes y otros elementos, incluso de bloque.
Recordad que todo lo relativo a la presentación (colores, tipografías,
subrayados...) se verá en el apartado dedicado al lenguaje CSS.

•Enlaces internos
En documentos de mucha extensión podemos crear enlaces a
secciones dentro del mismo documento. Un ejemplo de este tipo de
enlaces lo podemos ver en la página del estándar HTML
en whatwg.org o en el índice de artículos de Wikipedia.
Se crean utilizando el atributo id en los destinos de los enlaces y dando
el valor del id del destino, precedido por el carácter almohadilla '#', al
atributo href de los enlaces.

•La etiqueta span
El elemento span es un contenedor en línea (ocupa lo que ocupe
su contenido) genérico que usaremos cuando queramos definir
un elemento sin dotarlo de significado semántico.
Es similar al elemento div, solo que aquel era de bloque y este es
en línea.
Se emplea normalmente para acceder al elemento usando CSS y
asignarle estilos diferenciados.

•La etiqueta em
Para dar cierto énfasis a un elemento disponemos de las etiquetas em.
Los navegadores suelen representar el texto que contiene en cursiva,
pero este comportamiento siempre lo podremos modificar mediante
CSS. En el siguiente ejemplo estamos resaltando la afirmación:

•La etiqueta strong
Se emplea para indicar que su contenido es importante y queremos
resaltarlo con mayor énfasis del que proporciona em. Los navegadores
suelen representarlo en negrita, pero como todas las etiquetas HTML,
no debemos emplearla con fines visuales, sino semánticos. Con CSS
ajustaremos cómo queremos que se muestren los elementos strong.

•Las citas
Al igual que disponemos del elemento blockquote para incluir citas a
nivel de párrafo, para pequeñas citas en línea que no crean nuevos
párrafos tenemos el elemento q.
Nótese que las comillas las coloca el navegador al identificar la cita.

Usando listas anidadas, incluye un índice en el ejercicio del reto anterior
de modo que, al hacer clic en algún elemento del índice, nos lleve al
apartado correspondiente.
Título
Índice
1.Primer apartado.
2.Segundo apartado.
1.Subapartado 1.
2.Subapartado 2.
3.Tercer apartado.

1. Primer apartado
Texto del primer apartado. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque lobortis dapibus elit, vel mollis mauris laoreet in. Etiam sit amet
ultrices turpis. Sed sodales semper felis, a eleifend velit consequat in. Suspendisse
id orci nec tortor elementum porta. Pellentesque et orci at turpis ornare volutpat et
vitae nunc. Fusce non luctus nisi. Sed non euismod quam. Suspendisse potenti.
Podrá contener varios párrafos. Nullam efficitur blandit eros eget dapibus. Nullam
nec risus id massa condimentum porta eget eu quam. Ut tincidunt finibus nulla nec
bibendum. Donec finibus mauris aliquet orci scelerisque faucibus. In hac habitasse
platea dictumst. Vestibulum sit amet arcu libero. Fusce accumsan elit eu blandit
imperdiet.

2.2 Subapartado 2
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec tincidunt, lectus nec finibus consequat,
ex tellus suscipit mauris, et condimentum lectus turpis nec metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus ac aliquam est. Vivamus eget mattis
metus. Ut sed sapien sed ex tincidunt tempus. Donec quis lobortis
nibh, vitae viverra nisl.
3. Tercer apartado
Párrafos del tercer y último apartado.

Otros elementos orientados al texto
Existen muchos otras etiquetas para dotar de significado al texto de
una página web. Su uso es menos frecuente o está limitado a
determinados ámbitos.
•Etiquetas para incluir código
Hay dos elementos principales para incluir código de cualquier tipo
en nuestro documento HTML: code y pre.
El elemento code es un elemento en línea que encierra fragmentos
de código.

Los navegadores usan familias tipográficas monospace para representar estos
fragmentos de código.
•Elementos para indicar revisiones
Los elementos HTML ins y del se emplean, respectivamente, para marcar un texto
que ha sido insertado o eliminado. Es útil indicar mediante el atributo datetime el
momento de modificación.

•Convenciones tipográficas
El lenguaje HTML nos proporciona una serie de elementos que, más que por su
carga semántica, se incluyen para poder cumplir ciertas convenciones tipográficas,
como indicar en negrita los términos que se van a definir, mediante el elemento b;
usar cursivas para la escritura de palabras en argot o las categorías taxonómicas de
los seres vivos, utilizando i; marcar en un documento las apariciones de un término
buscado, mark; escribir subíndices, sub y superíndices, sup; etcétera.

HTML el body y su contenido.pptx

HTML el body y su contenido.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML el body y su contenido.pptx

Similar a HTML el body y su contenido.pptx (20)

Último

Último (11)

HTML el body y su contenido.pptx