Portales de Información

HTML: 3. Estructura del contenido

2009 - 2010

Organización de los elementos del contenido

� Os elementos para estruturar o contido do texto organízanse:� Elementos de bloque

� Elementos en liña

� Elementos xenéricos

� Elementos identificadores - Atributos

� Listas

� Elementos de presentación

� Saltos de liña

Elementos de bloque

� Os elementos de texto divídense en:� Elementos en liña: Están no fluxo do texto e, en xeral, non causan saltos de liña

� Elementos en bloque: Por defecto, teñen unhapresentación que comeza nunha nova liña.

Elementos de bloque: Cabeceiras

� As cabeceiras empréganse para introducir ideas ouseccións de texto.

� XHTML define seis niveis de cabeceiras, de h1 a h6, de maior a menor importancia.

<h1 align="center" >

Ista é a cabeceira de maior importancia

</h1>

Elementos de bloque: Parágrafos

� Os parágrafos son os elementos mais rudimentarios dun documento de texto.

� Indícanse có elemento p.

� Os parágrafos poden conter texto pero non poden conter outros parágrafos.

� Un exemplo deste tipo de elementos é o seguinte:

<p align="right">

Este é un parágrafo aliñado á dereita

</p>

Elementos de bloque: Citas

� Citas (Blockquote) Utilizada para citas longas que ocupan varios parágrafos e teñen saltos de liña.

<blockquote cite="http://www.mancomun.org">

<p>Esta será unha cita moi moi longa... </p>

<p>E aquí vai outro parágrafo da mesma cita </p>

</blockquote>

� Los agentes de usuario visuales representan generalmente un BLOCKQUOTE como un bloque con sangría.

Elementos de bloque

� Texto preformateado: Emprégase para conservar o espazo en branco da fonte entre caracteres .

� Uno de los usos más comunes de este elemento, es la inclusión de código fuente dentro de nuestros documentos. <pre>

class Libro {

public Libro();

void establecerTitulo(char *);

void establecerPaginas(int);

void establecerCodigo(int);

void imprime();

char Titulo[40];

};

</pre>

Elementos de bloque

� Direccións: O elemento addres emprégase para proporcionar información de contacto do autor ou do encargado de mantemento do documento.<address>

Autor: Jhon Rocket<br />512 E Riverside Dr # 134<br />Austin, TX<br />(512) 411-7433<br />

</address>

Elementos en línea

Elementos en línea: Abbr

� Al escribir la abreviatura de una palabra podemos valernos del elemento abbr para marcarla e indicar en el atributo title qué palabra estamos abreviando.

� Los navegadores en general se encargarán de que al apoyar el puntero del mouse sobre la abreviatura se muestre un cartel con la palabra no abreviada que indicamos

Elementos en línea: acronym

� Los acrónimos se marcan con el elemento acronym, tienen el atributo title, y generalmente, el mismo comportamiento que abbr en los navegadores.

Elementos en línea: cite

� Para citar en la misma línea en la que estamos escribiendo.

� Suele utilizarse para pequeños trozos de texto.

Elementos en línea: code

� pre es un elemento en bloque, por lo que no se puede incluír en una línea sin romperla.

� El elemento equivalente en línea es code, que obviamente no conserva el formato (ya que no puede romper la línea), pero sigue siendo una indicación semántica de la inclusión de código.

� Además los agentes de usuario suelen representar el contenido de code con letra monoespaciada. <p> las funciones miembro: <code>Libro()</code>, <code>void establecerTitulo(char *)</code> y <code>vo idimprime()</code> </p>

Elementos en línea: em e q

� em agrega énfasis al contenido

� Usualmente los elementos con énfasis son formateados en tipografía tipo itálica.

� Utilízase o elemento <q> ... </q> para citas curtas.

Elementos en línea: strong

� Semánticamente strong marca contenido al que se le quiere dar más fuerza o importancia que el resto.

� Los navegadores suelen formatearlo en una tipografía tipo negrita

Elementos en línea: otros…

� Kbd: Indica texto introducido polo usuario. Pode ser útil para documentos técnicos. Aparecerá en Courier

� Samp: Indica mostras de saída de scripts. Pode ser útil para documentos técnicos. Aparecerá en Courier.

� Var: Indica unha variable ou argumento de programa. Aparecerán en cursiva

� Dfn: Definición dun termo. Normalmente aparecen en cursiva.

Elementos en línea: Sub y Sup

� Os elementos subíndice (sub) e superíndice (sup) fan que o texto seleccionado se mostre a menor tamaño e lixeiramente por debaixo (sub) ou por riba(sup) da liña base.

Elementos xenericos

� Os elementos xenéricos div e span permiten aosautores crear elementos personalizados

� div emprégase para indicar elementos a nivel de bloque, e span indica elementos a nivel de liña.

� Teñen atributos id e class para darlles nome, significado e contexto

Atributos id e class

� class e id poden utilizarse con case todos os elementos XHTML, non só con div e span

� O atributo id utilízase para dar a un elemento un nome específico e único no documento. � Os valores id deben ser únicos.

� Os usos para o atributo id sen os seguintes:

� Como un selector de follas de estilo.

� Como un medio para acceder a un elemento dende un script.

Atributos id e class

� O atributo class utilízanse para agrupar elementos similares. � Poden asignarse varios elementos ó mesmo nome class e deste xeito pódense tratar igual.

� O atributo class pode utilizarse para:

� Como un selector de follas de estilo.

� pautas básicas da súa utilización son:

� Lograr que os nomes class teñan significado: � O valor do atributo class debería proporcionar unha descripción do contido dun div ou dun span.

� Por exemplo, se nunha web o texto das cabeceiras vai en azul, unha boa definición do atributo sería class="texto-cabeceira" e nunca class="texto-azul" pois, seguramente, có tempo ese color cambie a verde ou a vermello.

Listas

� Existen as listas numeradas e non numeradas.

� As listas non numeradas empréganse para coleccións de elementos relacionados que aparecen sen ningún tipo de orden determinado. � En (X)HTML as listas non numeradas indícanse có elemento ul.

� O contido dun ul limítase a un ou máis elementos de lista li.

� Estes elementos de lista son elementos de bloque, polo que sempre se mostrarán nunha nova liña.

Listas no numeradas

Listas no numeradas

Listas numeradas

� As listas numeradas empréganse para listas nas que a secuencia dos elementos é importante. � As listas numeradas indícanse có elemento ol .

� Deben incluír un ou máis elementos de lista (li).

� Trátanse de elementos de bloque.

Listas numeradas

Listas de definición

� Se emprega para listas que consisten en parellas de termos e definicións.

� As listas de definición están marcadas como elementos dl.

� O contido dun dl é algún número de termos (indicados polo elemento dt) e definicións (indicados polo elemento dd).

Listas de definición

� O elemento dt (termo) só pode conter elementos en liña.

� Todos os elementos empregados nas listas de definición son elementos a nivel de bloque e comezarán por unha nova liña.

Anidar listas

� Os elementos de listas poden aniñarse noutras listas.

� Por exemplo, pódese aniñar unha lista numerada nunha de definición, ou viceversa.

Elementos de presentación

� Proporcionan instrucións sobre o tamaño, peso ouestilo da fonte empregada para mostrar un elemento.

� As follas de estilo en cascada (CSS) son o método mais empregado para especificar a presentación dundocumento.

� Na seguinte lista se indica o elemento (X)HTML e a alternativa recomendada empregando as follas de estilo:

Elementos de presentación

� b - Negriña: Como alternativa existe o elemento strong ou a propiedade font-weight: bold.

� big - Grande: Como alternativa existe a propiedadefont-size: bigger.

� i - Cursiva: Como alternativa existe o elemento emou a propiedade font-style: italic.

� s - Tachado: Este elemento está depreciado. Como alternativa existe a propiedade text-decoration: line-through para que o texto apareza tachado cunhaliña.

Elementos de presentación

� small - Pequeno: Como alternativa existe a palabra clave font-size: smaller.

� strike - Tachado: Este elemento está depreciado.Como alternativa existe a propiedade text-decoration: line-through.

� tt - Teletipo: Como alternativa existe a propiedadefont-family: "Andale Mono", monoespace que son fontes monoespaciais.

� u - Subliñado: Este elemento está depreciado.Como alternativa existe a propiedade text-decoration: underline.

Elementos de fonte

� O elemento font é un elemento en liña empregadopara especificar o tamaño, color e fonte do texto. � Para iso emprega os atributos size, color e facerespectivamente.

� Este elemento é o mellor exemplo do que foi mal no HTML, polo que se trata dun elemento que estátotalmente depreciado. Non debe utilizarse.

� Outro elemento depreciado é basefont, utilízasepara establecer o tipo de fonte, o color e o tamaño de todo o documento se está na cabeceira do documento ou para o texto que lle segue se estásituado no corpo.

Elementos de fonte

� Un exemplo có elemento font sería o seguinte:

� O mesmo exemplo anterior pero substituídas por propiedades CSS sería así:

Elementos de fonte

Elementos de fonte y css

Lineas horizontales

� o elemento hr para engadir unha liña divisoria visual entre seccións dun documento.

� Este elemento ten os seguintes atributos depreciados:

� Pódese controlar a presentación dunha liña horizontal con follas de estilo, o seguinte exemplo mostraría unha liña de azul sólido e dun só píxel.

Referencias de entidades de caracteres

� Os caracteres que non se atopan no conxunto de caracteres alfanuméricos normal, como < ou &, deben especificarse nos documentos HTML e XHTML empregando referencias de caracteres ("caracteres escapados").

� Nos documentos (X)HTML, os caracteres escapados indícanse cunhas referencias que comezan con & e rematan con punto e coma (;).

Caracteres especiales