Etiquetas
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, etc. La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo, <a href="https://www.aulaclic.es">Visita aulaClic</a>
Produce este resultado en el navegador: Visita aulaClic
Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.
En general las etiquetas se pueden anidar (unas dentro de otras) pero no se pueden 'cruzar'. Estas dos etiquetas <p> y <div>, están anidadas correctamente:
<div>
<p>
Texto del párrafo
</p>
</div>
Es incorrecto cruzarlas así:
<div>
<p>
Texto del párrafo
</div>
</p>
La sintaxis de las etiquetas HTML ha sufrido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en dia, sin embargo, esas páginas siguen funcionando y mostrando el contenido para el que fueron diseñadas.
Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la página correctamente, como si no tuviera esos errores. Para ver los errores de una página web existen validadores de código HTML, como el de W3C, que nos muestran los errores indicando su grado de gravedad.
En esta unidad vamos a empezar a ver las etiquetas que sirven para colocar el texto en una página web. Antes de continuar observa con atención los siguientes videos que te permitirán repasar los temas vistos hasta el momento:
- En este vídeo puedes ver la estructura de una página web y párrafos de texto:
- En este vídeo puedes ver las etiquetas de texto:
Escribiendo texto en el cuerpo de la página
Como estamos diciendo todo el texto de la página estará dentro del <body>, el texto dentro del <body> debe estar, principalmente, dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto. Dentro de un párrafo no debe haber otros párrafos anidados.
A su vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos o rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El propio texto de cada apartado iría fuera del encabezado contenido en párrafos <p></p> u otras etiquetas.
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente escribimos Bienvenido a aulaClic se verá Bienvenido a aulaClic. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio,
El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.
Cada etiqueta <p></p> lleva implicito un salto de línea.
Veremos con más detalle y ejemplos la etiqueta <p>, un poco más adelante, en esta misma unidad.
Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div> y <span>. La etiqueta <div> se utiliza a nivel de bloque y la etiqueta <span> a nivel de línea o palabras. Estas etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las etiquetas de apertura y de cierre <div> contenido </div>, el criterio para agrupar contenido no está definido estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar estilo al contenido.
Podríamos decir que las etiquetas <div> y <span> son unas etiquetas neutras dentro de la semántica de HTML. Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el contenido según su significado. Estas nuevas etiquetas a nivel de bloque son, section para secciones, article para artículos, header para cabeceras, nav para menús, footer para pies de página y aside para contenido en el lateral. A nivel de línea o texto tenemos muchas etiquetas semánticas como strong, em, cite. A lo largo del curso iremos viéndolas con detalle.
El uso de estas nuevas etiquetas semánticas no es obligatorio, pero sí recomendable, sobre todo para tener la información mejor estructurada y también para que los buscadores sean capaces de identificar mejor el contenido de nuestra página. Resumiendo, lo recomendable es utilizar las etiquetas semánticas y en los casos en los que no exista una etiqueta semántica apropiada utilizar etiquetas <div> y <span>. En la unidad 12 veremos todo esto con más detalle.
ACTIVIDADES
1. Realiza un resumen en tu cuaderno de la información suministrada en esta entrada de blog incluyendo gráficos cuando sea necesario.
2. Consulte , qué es HTML 5.
3. Observe con atención los 2 videos presentados anteriormente y realice un resumen de cada uno de ellos.
4. En la clase del próximo jueves se realizará preguntas al azar sobre estos temas para evaluar su participación.
WEBGRAFIA
https://www.aulaclic.es/html/t_2_3.htm
No hay comentarios:
Publicar un comentario