¡Descarga Apuntes sobre HTML: elementos, listas, citas y más y más Monografías, Ensayos en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
Lección 3: body
- 1 Descripción...................................................................................................................................... CONTENIDO
- 2 Principales elementos de bloque
- 2.1 Párrafos
- 2.2 Encabezados............................................................................................................................
- 2.3 Listas........................................................................................................................................
- 2.4 Citas.........................................................................................................................................
- 3 Elementos inline o en línea
- 3.1 Enlaces
- 3.2 Enlaces internos
- 3.3 La etiqueta span
- 3.4 La etiqueta em.........................................................................................................................
- 3.5 La etiqueta strong
- 3.6 Las citas
- 4 Otros elementos orientados al texto
- 4.1 Etiquetas para incluir código...................................................................................................
- 4.2 Elementos para indicar revisiones
- 4.3 Convenciones tipográficas
- 5 Tablas
- 6 Elementos incrustados:.................................................................................................................
- 6.1 Imágenes
- 6.1.1 La etiqueta img
- 6.1.2 La etiqueta figure
- 7 Contenido web
- 8 TAREAS
- 8.1 Reto: listas (10%)...................................................................................................................
- 8.2 Reto: Tablas (10%)
- 8.3 Reto: IMÁGENES (10%)
- 8.4 Reto: contenido web (10%)
- 8.5 Reto: body (60%)
1 DESCRIPCIÓN
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.
2.1 PÁRRAFOS
Quizá el elemento de bloque más empleado para contener texto sea el párrafo. El elemento p se emplea para definir párrafos de texto. En su interior puede haber texto, otros elementos en línea ( inline ), pero no elementos de bloque. Si no modificamos su aspecto usando CSS, los navegadores los muestran añadiendo un margen superior e inferior que sirve para diferenciar unos párrafos de otros en un texto escrito. El lenguaje HTML
Son las siglas de lenguaje de marcas de hipertexto, en inglés.
Se ha convertido en la base de lo que conocemos como la Web.
Si deseamos introducir un salto de línea, sin crear un nuevo párrafo, podremos recurrir a la etiqueta vacía br. El lenguaje HTML
Encontramos su especificación en la página web del WHATWG:
html.spec.whatwg.org/multipage/
Ahí dispondremos siempre de la última versión publicada.
2.2 ENCABEZADOS
HTML proporciona 6 niveles diferentes de encabezados o títulos: h1, h2, h3, h4, h5 y h6. Bien empleados sirven para definir la estructura jerárquica de una página. Normalmente, si no empleamos los nuevos elementos estructurales de HTML5 que no se verán en este curso de iniciación, cada página HTML solo tendrá un elemento h1, su título principal, pudiendo tener uno o varios de los siguientes subniveles. h1 es, por lo tanto, el título de mayor jerarquía; mientras que h6 representa el título de menor jerarquía en su contenedor. Títulos con igual número se corresponden con elementos de la misma jerarquía.
El lenguaje HTML Sobre el lenguaje y sus especificaciones Aspectos generales Estructura básica del documento Los metadatos. El elemento head El elemento title [...] El body y su contenido
2.3 LISTAS
En HTML disponemos de tres tipos de listas: ordenadas, desordenadas y listas de definición. Las listas ordenadas se construyen mediante la etiqueta ol ordered list. Sus elementos se identifican empleando las etiquetas li list item. Generan listas cuyos elementos van ordenados. La forma de ordenación (números, letras, numeración romana, mayúsculas o minúsculas) se define mediante CSS.
Apuntes Tareas Lecturas recomendadas
Las listas desordenadas se crean igual que las anteriores, pero empleando la etiqueta ul unordered list. El tipo de viñeta que se usa para cada elemento (puntos, círculos, cuadrados…) se define también mediante CSS.
Apuntes Tareas Lecturas recomendadas
Por último, las listas de definición son un tipo especial de listas que permiten asociar términos con sus definiciones o descripciones. Se crean empleando la etiqueta dl description list ; sus elementos serán dt description term y dd definition.
Autores: Felipe Gil Ana Osuna Editorial: Libros Digitales S.L.
Por supuesto, todas las listas pueden mostrar otras listas dentro de alguno de sus elementos. Son las llamadas listas anidadas. Nótese dónde se cierra el elemento li que contiene otra lista.
Apuntes
Tema 01 Tema 02 Tema 03
Tareas Lecturas recomendadas
Curso HTML
Página del curso sobre HTML del CRFPTIC
Si deseamos que el enlace se abra en una ventana nueva, podemos indicarlo mediante el atributo target="_blank" Contacto También podemos decir al navegador que, en vez de cargar el destino del enlace, lo descargue. Lo haremos mediante el atributo download Curriculum actualizado
3.2 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.
El lenguaje HTML
Sobre el lenguaje y sus especificaciones Aspectos generales Estructura básica del documento Los metadatos. El elemento head El body y su contenido
Sobre el lenguaje y sus especificaciones
Aspectos generales
Estructura básica del documento
Los metadatos. El elemento head
El elemento title
[...]
El body y su contenido
3.3 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.
¡Cómpralo YA!
3.4 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:
Sin duda podemos afirmar que HTML es un lenguaje muy versátil.
3.5 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.
Capítulo 1. El lenguaje HTML. Una introducción práctica.
3.6 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.
El arranque de El Quijote: En un lugar de la Mancha [...], es quizá el más reconocible de la novela moderna.
(Nótese que las comillas las coloca el navegador al identificar la cita). ### 4.3 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.
Retrónimo Un retrónimo es un tipo de neologismo acuñado para representar un concepto cuyo significado se ha visto afectado debido a la aparición de uno nuevo que incluye una idea más reciente.
La taxonomía del gato, Felis silvestris catus, no ha sido del todo fácil.
Hay una gallina pelada, pelada que se casa con un gallo pelado, peludo, pelado, y tienen pollitos pelados, peludos y pelados
Castilla y León ocupa una superficie de 94 226 km 2
La suma de x 1 y x 2 debe ser mayor que 0.
5 TABLAS
Las tablas se emplearon de forma intensiva en las primeras páginas web. Se usaban como elemento de maquetación, ya que las herramientas disponibles para modificar la presentación de los elementos eran muy limitadas. Eso ya no sucede en la actualidad, ahora disponemos de un lenguaje, CSS, que proporciona todo lo necesario para modificar la apariencia de nuestro documento HTML. En la actualidad las tablas deben usarse para lo que fueron pensadas: representar datos tabulares. El elemento table se crea con las etiquetas
[...]
Dentro de este elemento definiremos las filas, rows , y dentro de ellas las columnas, columns. Para organizar estos elementos, especialmente en tablas grandes, podemos emplear etiquetas que agrupen las filas para formar una cabecera, elemento thead, un pie tfoot o el cuerpo de la tabla tbody. También podremos indicar el título de la tabla utilizando la etiqueta caption; esta etiqueta, si aparece, debe colocarse inmediatamente a continuación de la etiqueta de inicio de la tabla.
Tabla 1. Población de las provincias de Castilla y León. enero 2018
[...]
[...]
[...]
En determinadas ocasiones nos puede interesar combinar varias celdas de una fila o columna. Lo haremos utilizando los atributos colspan y rowspan en las celdas. Para mejorar la presentación se ha añadido código CSS que pone bordes a las celdas.
Columna 1 Columna 2 Columna 3 Columna 4
Fila 1, columnas 1 y 2 Fila 1, columna 3 Filas 1, 2 y 3; columna 4
Fila 2, Columna 1 Fila 2, Columna 2 Fila 2, Columna 3
Fila 3, Columna 1 Fila 3, Columna 2 Fila 3, Columna 3
Podemos ver un ejemplo completo con el horario de clases de un grupo escolar. Se puede ver que podemos usar las celdas de encabezado th tanto en la primera fila para construir el encabezado de las columnas (lunes, martes…) como en la primera celda de cada fila, para dotar de encabezado a las filas (08:00, 09:00...)
Horario de clases
2019/20
Lunes Martes Miércoles Jueves Viernes
09:00 Matemáticas Literatura Educación física Plástica Geografía
10:00 Literatura Matemáticas Hª de España Filosofía
10:00 Recreo
10:30 Tecnología Música Lengua Física Biología
11:30 Literatura Matemáticas Hª de España Filosofía
Instituto de Educación Secundaria
Incluso podemos, mediante el atributo sizes, indicar el tamaño de visualización de las distintas imágenes que forman el conjunto:
Lo que hemos logrado con el ejemplo anterior es, no solo mostrar el archivo de imagen adecuado a cada dispositivo; sino, además, indicar que, si disponemos de hasta 500 px de ancho, la imagen se muestre ocupando el 100 % de la ventana (veremos que las unidades vw representan el porcentaje de ancho de la ventana), si disponemos de más de 500 px, la imagen se mostrará ocupando el 50 % del ancho de la ventana del navegador. Como la sintaxis es algo compleja, en internet hay servicios que se encargan de generar esta etiqueta img con múltiples imágenes de forma automática. Uno de los mejores es responsivebreakpoints.com en el que podremos cargar una imagen (o usar una de las que proponen como muestra), indicar las resoluciones máxima y mínima a las que se mostrará, señalar cada cuánto se cortará la imagen para reducir su peso y definir el número máximo de imágenes que se quieren crear. Pulsando REGENERATE se crearán las imágenes para cada resolución y el código HTML de la etiqueta img.
6.1.2 La etiqueta figure Se suele emplear como contenedor para añadir a los elementos img un significado semántico y mostrar su título empleando, dentro del elemento figure, la etiqueta figcaption.
CRFPTIC
El elemento figure no se emplea solo para insertar imágenes; puede usarse para incluir cualquier otro tipo de objetos, ya que lo que hace es indicar que el contenido dentro del elemento forma parte del contenido donde aparezca, pero puede trasladarse a otro lugar sin afectar al origen. Por ejemplo: diagramas, esquemas, trozos de código y, por supuesto, imágenes. Lo ideal es que donde aparezca estén correctamente referenciadas por su nombre (ver cuadro 1: Población de Castilla y León por provincias) y usar esa referencia en el título del elemento figure. Evolución demográfica
Los datos de población de la comunidad autónoma que se pueden ver en el cuadro 1, demuestran que en la última década [...]
Cuadro 1. Población de Castilla y León por provincias. INE 2018
Provincia Población
Ávila 158 498 habitantes
Burgos 357 070 habitantes
En la página de referencia de este elemento en la especificación HTML pueden consultarse variados ejemplos de su uso.
8 TAREAS 3
(Realice los retos del 1 al 4 en un mismo documento HTML).
8.1 RETO: LISTAS (10%)
1º Crea el código de una página, con listas (“ol”, “li”, etc.), que contenga:
- Título: Documento con jerarquía de títulos o 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. o Segundo apartado ▪ Texto del segundo apartado, en este caso contiene subapartados. ▪ 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. ▪ 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. o Tercer apartado ▪ Párrafos del tercer y último apartado. 2º Envía el código.
8.2 RETO: TABLAS (10%)
Crea una tabla para mostrar el número de alumnos y alumnas en cada uno de los cursos escolares de un instituto de educación secundaria. Su título podría ser «Alumnado por cursos». Recuerda que ahora no modificaremos su apariencia, solo tenemos que crear su estructura, que se podría parecer a: Educación Secundaria Obligatoria Bachillerato 1º 2º 3º 4º 1º Humanidades 2º Humanidades 1º Ciencias 2º Ciencias Alumnas 45 33 21 20 34 13 65 30 Alumnos 42 40 15 22 25 10 67 25
