Apuntes HTML5

La estructura de un sitio web con elementos HTML5. A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer.

Elementos <video> y <audio> para incorporar contenidos multimedia
<video src="catz.mp4" width="400" height="300"></video> <audio src="high_seas_rip.mp3" controls preload="auto" autobuffer></audio>

Cómo se representa el código HTML en el navegador

Para entender mejor la relación entre el código HTML y lo que vemos en el navegador al abrir el archivo, en este ejemplo se muestra la conexión entre ambos:

A. Doctype. Esta línea indica al navegador que debe interpretar todo el código que sigue de acuerdo con un conjunto de reglas específico. B. Elemento HTML. Este elemento contiene a los demás y le indica al navegador que contiene un documento HTML. C. Elemento HEAD. En esta sección aparece información sobre la página, pero no se muestra en la pantalla. D. Elemento TITLE. Cualquier contenido dentro de las etiquetas "title" se muestra en la parte superior del navegador. Es lo que se utiliza cuando un usuario marca una página como "favorito" en el navegador. E. Elemento BODY. Todo el contenido dentro del body se muestra en la ventana principal del navegador. F. Elemento HEADING 1. El primero de seis elementos de cabecera. El contenido dentro de un heading de nivel 1 se muestra en tipografías grandes y en negrita. G. Elemento IMAGE: enlaza a un archivo de imagen y la muestra en pantalla. H. Elemento PARAGRAPH: por defecto, el navegador añade un salto antes y después de este elemento, que suele contener varias líneas de texto. I. Elemento STRONG: el texto dentro de él se muestra en negrita. J. Elemento ORDERED LIST: abre una lista de elementos en forma de líneas numeradas por orden. K. Elemento LIST: cada línea con esta etiqueta recibe automáticamente un número ordinal empezando por el 1.

Tres maneras de utilizar estilos
Los estilos inline o directos son la tercera posibilidad pero se utilizan mucho menos que las otras dos. En este caso, las reglas se declaran dentro de las propias etiquetas HTML. Un ejemplo de estilo inline para escribir en rojo el texto del título puede ser:
<h1 style="color:red">Worldwide Apparel</h1>

En las hojas de estilo internas, las reglas CSS quedan escritas directamente dentro del documento utilizando la etiqueta <style>. La hoja de estilos queda ubicada dentro de la sección <head> del documento. Una página HTML no tiene por qué limitarse a utilizar solamente una hoja de estilos externa, y en muchos sitios web de grandes dimensiones, las definiciones de estilos suelen repartirse entre varios archivos, para facilitar su organización y mantenimiento. Podemos incluso utilizar hojas de estilos para funciones concretas, como imprimir una página o visualizar el contenido en dispositivos móviles. Se pueden diseñar hojas de estilo también para que nuestros sitios web sean compatibles con navegadores antiguos.
La etiqueta <div> así como los párrafos y listas, entre otros, son elementos de bloque. Los elementos de bloque generalmente se insertan en las páginas en la línea siguiente al elemento previo. La etiqueta div suele asociarse bien con una clase CSS o con un ID, y con ello ya podemos aplicarles reglas individualizadas para controlar su aspecto. Antes de hacer esto vamos a echar un vistazo a la página tal y como se ve en el original.

Sign up to vote on this title
UsefulNot useful