Apuntes HTML5

5/13/2018 Apuntes HTML5 - slidepdf.com

http://slidepdf.com/reader/full/apuntes-html5 1/3

Apuntes HTML5La 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 siguede 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.

Documents

Apuntes HTML5