Bruno: /* Organización dos elementos */

2014-10-08T07:18:49Z

Organización dos elementos

Página nueva

Este apartado trata de como estruturar o contido do texto do documento, que é do que se encarga, basicamente, XHTML. Isto fai que aquí se atopen máis da metade dos elementos da recomendación XHTML.

== Organización dos elementos ==
Os elementos para estruturar o contido do texto organízanse deste xeito:
{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Elementos de bloque'''
|-
| '''''<h1> a <h6>'''''
| Cabeceira
|-
| ''''''''''
| Parágrafo
|-
| '''''<pre>'''''
| Texto preformatado
|-
| '''''<address>'''''
| Información de contacto
|-
| '''''<blockquote>'''''
| Cita longa
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Elementos en liña'''
|-
| '''''<abbr>'''''
| Abreviatura
|-
| '''''<acronym>'''''
| Acrónimo
|-
| '''''<cite>'''''
| Cita ou referencia
|-
| '''''<code>'''''
| Fragmento de código
|-
| '''''<dfn>'''''
| Término definitorio
|-
| ''''''''''
| Texto resaltado (cursiva)
|-
| '''''<q>'''''
| Cita en liña breve
|-
| ''''''''''
| Moi resaltado (negriña)
|-
| '''''<samp>'''''
| Saída de mostra
|-
| '''''<kbd>'''''
| Texto introducido por un usuario
|-
| '''''<var>'''''
| Variable ou argumento de programa
|-
| ''''''''''
| Subscript (Subíndice)
|-
| ''''''''''
| Superscript (Superíndice)
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Elementos xenéricos'''
|-
| '''''<div>'''''
| División de bloque
|-
| ''''''''''
| Span ou contido en liña
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Elementos identificadores - Atributos'''
|-
| '''''id'''''
| Dar a un elemento un nome específico e único
|-
| '''''class'''''
| Agrupa elementos similares
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Listas'''
|-
| '''''<ul>'''''
| Lista sen numerar
|-
| '''''<ol>'''''
| Lista numerada
|-
| '''''<li>'''''
| Elemento de lista
|-
| '''''<dl>'''''
| Lista de definición
|-
| '''''<dt>'''''
| Término
|-
| '''''<dd>'''''
| Definición
|-
| '''''<menu>'''''
| Lista de menú ('''obsoleta''')
|-
| '''''<dir>'''''
| Directorio ('''obsoleta''')
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Elementos de presentación'''
|-
| ''''''''''
| Negriña
|-
| '''''<big>'''''
| Texto grande
|-
| ''''''''''
| Cursiva
|-
| '''''<s>'''''
| Tachado ('''obsoleta''')
|-
| '''''<strike>'''''
| Tachado ('''obsoleta''')
|-
| '''''<tt>'''''
| Teletipo
|-
| ''''''''''
| Subliñado ('''obsoleta''')
|-
| ''''''''''
| Fonte, cor e tamaño ('''obsoleta''')
|-
| '''''<basefont>'''''
| Establece unha fonte predeterminada ('''obsoleta''')
|-
| ''''''''''
| Non salto
|-
| ''''''''''
| División de palabra
|-
| '''''<hr>'''''
| Liña horizontal
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Saltos de liña'''
|-
| ''''' '''''
| Inserir salto de liña
|-
|}

{| border="0" cellspacing="0" cellpadding="5" width="50%"
|+ style="background:#ffdead;" | '''Notación de edición'''
|-
| '''''<ins>'''''
| Texto inserido
|-
| '''''<del>'''''
| Texto eliminado
|-
|}

== Elementos en bloque ==
Os elementos de texto divídense en elementos en liña e elementos en bloque.
Os elementos en liña están no fluxo do texto e, en xeral, non causan saltos de liña.
Os elementos en bloque, por defecto, teñen unha presentación que comeza nunha nova liña.
Os elementos en bloque son os compoñentes principais da estrutura do documento.

=== Cabeceiras ===
As cabeceiras empréganse para introducir seccións de texto. XHTML define seis niveis de cabeceiras, de ''h1'' a ''h6'', de maior a menor importancia.
<source lang="html4strict">
<h1 align="center">Ista é a cabeceira de maior importancia</h1>
</source>

=== 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:
<source lang="html4strict">
Este é un parágrafo aliñado á dereita
</source>

=== Citas (''blockquote'') ===
Utilizada para citas longas que ocupan varios parágrafos e teñen saltos de liña.
<source lang="html4strict">
<blockquote cite="http://www.mancomun.org">
Esta será unha cita moi moi longa... 
E aquí vai outro parágrafo da mesma cita 
</blockquote>
</source>
=== Texto preformatado ===
Emprégase para conservar o espazo en branco da fonte entre caracteres ou para simular a saída dun computador (código fonte, un comando por consola, etc.). Para isto último tamén se pode empregar a etiqueta %lt;code>
<source lang="html4strict">
<pre>Este é un texto con espazos </pre>
</source>

=== Direccións ===
O elemento ''addres'' emprégase para proporcionar información de contacto do autor ou do encargado de mantemento do documento.

== Elementos en liña ==
A maioría dos elementos de texto son elementos en liña.
Estes elementos, por defecto, non engaden saltos de liña nin espazos extra.
Non teñen que ver co tipo de letra, nin coa cor ou o tamaño, iso déixano ás follas de estilo.

=== Elementos de frase ===
Engaden estrutura e significado ó texto en liña.
* '''''em'':''' Indica texto enfatizado. Os elementos em case sempre aparecen en cursiva.
* '''''strong'':''' Indica texto moi enfatizado. Os elementos strong case sempre aparecen en negriña.
* '''''abbr'':''' Indica unha forma abreviada.
* '''''acronym'':''' Indica un acrónimo.
* '''''cite'':''' Indica unha cita. Normalmente aparecen en cursiva.
* '''''dfn'':''' Definición dun termo. Normalmente aparecen en cursiva.
* '''''code'':''' Exemplo de código. Normalmente móstrase coa fonte Courier.
* '''''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.

=== Citas breves ===
Utilízase o elemento ''<q> ... </q>'' para citas curtas.

== Elementos xenéricos ==
Os elementos xenéricos '''''div''''' e '''''span''''' permiten aos autores crear elementos personalizados.
* O elemento ''div'' emprégase para indicar elementos a nivel de bloque, e ''span'' indica elementos de liña.
* Estes dous elementos teñen atributos '''''id''''' e '''''class''''' para darlles nome, significado e contexto.
* Outro elemento xenérico é ''span'', a diferenza de ''div'', ''span'' emprégase para elementos en liña e non introduce un salto de liña.

== Elementos identificadores ==
Os atributos ''class'' e ''id'' poden utilizarse con case todos os elementos XHTML, non só con ''div'' e ''span''.

=== Identificador id ===
'''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'' son os seguintes:
* Como un selector de follas de estilo.
* Como ancla para vínculos (coa mesma función que <a name=" ">).
* Como un medio para acceder a un elemento dende un script.
* Para o procesado por parte de axentes de usuario, esencialmente tratando os elementos como datos.

=== Identificador 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.
* Para o procesado por parte de axentes de usuario.

=== Notas sobre o uso de class ===
A capacidade de crear os nosos propios elementos personalizados empregando ''id'' e ''class'' é moi útil. Pero sobre todo, ''class'' é un atributo moi propenso a ser mal utilizado. Unhas 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.
* Non se debe abusar das clases: É fácil excederse asignando nomes ''class'' a elementos. Moitas veces poderanse empregar selectores contextuales ou de atributo. Por exemplo, en lugar de etiquetar todos os elementos ''h1'' dunha barra lateral como ''class="barralateral"'' podería utilizarse o selector contextual do seguinte xeito:
<source lang="css">
div#sidebar h1 {font: Verdana 1.2em bold #444;}
</source>

== Elementos de presentación ==
Existen varios elementos (X)HTML dedicados á presentación, é dicir, proporcionan instrucións sobre o tamaño, peso ou estilo da fonte empregada para mostrar un elemento.

Xa se comentou que as follas de estilo en cascada (CSS) son o método mais empregado para especificar a presentación dun documento, polo que na seguinte lista se indica o elemento (X)HTML e a alternativa recomendada empregando as follas de estilo:
* '''''b'' - Negriña: ''' Como alternativa existe o elemento ''strong'' ou a propiedade ''font-weight: bold''.
* '''''big'' - Grande: ''' Como alternativa existe a propiedade ''font-size: bigger''.
* '''''i'' - Cursiva: ''' Como alternativa existe o elemento ''em'' ou a propiedade ''font-style: italic''.
* '''''s'' - Tachado: ''' Este elemento está obsoleto. Como alternativa existe a propiedade ''text-decoration: line-through'' para que o texto apareza tachado cunha liña.
* '''''small'' - Pequeno: ''' Como alternativa existe a palabra clave ''font-size: smaller''.
* '''''strike'' - Tachado: ''' Este elemento está obsoleto. Como alternativa existe a propiedade ''text-decoration: line-through''.
* '''''tt'' - Teletipo: ''' Como alternativa existe a propiedade ''font-family: "Andale Mono", monoespace'' que son fontes monoespaciais.
* '''''u'' - Subliñado: ''' Este elemento está obsoleto. Como alternativa existe a propiedade ''text-decoration: underline''.

== Elementos de fonte ==

=== ''font'' e ''basefont'' ===
O elemento '''''font''''' é un elemento '''en liña''' empregado para especificar o tamaño, color e fonte do texto. Para iso emprega os atributos ''size'', ''color'' e ''face'' respectivamente.

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

'''Outro elemento obsoleto''' é '''''basefont''', utilízase para 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.

Un exemplo có elemento ''font'' sería o seguinte:
<source lang="html4strict">
Texto...
</source>
O mesmo exemplo anterior pero substituídas por propiedades CSS sería así:
<source lang="css">
p.nova { font-family: sans-serif;
font-size: 120%;
color: white; }
</source>

=== Subíndice e superíndice ===
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.

Exemplos:
<source lang="html4strict">
H2O
E = M·C2
</source>

Que darían como resultado:
<h2 style="margin:0; background:#E6ECFF; font-size:100%; border:1px solid #cccccc; text-align:left; padding:0.2em 0.4em; -moz-border-radius:6px">
H2O
E = M·C2
</h2>

== Saltos de liña ==
Poden engadirse saltos de liña no fluxo do texto empregando o elemento '''''br'''''. Trátase dun dos poucos elementos de presentación conservados nas DTD XHTML 1.0 estrito e XHTML 1.1.

<source lang="html4strict">
 
</source>

== Axuste de liñas ==
Outro característica do texto a ter en conta é o corte das liñas onde sexa necesario á hora de encher os renglóns, segundo o ancho dispoñible (ou ''word wrapping''). En CSS pódese evitar que as liñas se corten axustando a propiedade '''''white-space''''' a '''''nowrap'''''. As recomendacións HTML e XHTML non definen ningún elemento para evitar que as liñas se corten.

== Liñas horizontais ==
(X)HTML inclúe o elemento '''''hr''''' para engadir unha liña divisoria visual entre seccións dun documento.

<source lang="html4strict">
<hr />
</source>

Trátase dun elemento de bloque polo que sempre aparece na súa propia liña e, normalmente, sempre cun pouco espazo por riba e por debaixo.

Este elemento ten os seguintes atributos obsoletos:
* '''''align'' = "''center'' | ''left'' | ''right''"'''
* '''''noshade'' = "''noshade''"'''
* '''''size'' = "''número''"'''
* '''''width'' = "''número''" ou "''%número''"'''

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.
<source lang="css">
hr { height: 10px;
width: 100%;
color: blue;
background-color: blue; }
</source>

== 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 (''';''').

Pódese ver unha lista completa das entidades de caracteres definidas en XHTML 1.0/1.1 no seguinte [http://www.desarrolloweb.com/articulos/11.php enlace].

--[[Usuario:Vieites|Vieites]] e --[[Usuario:Arribi|Arribi]] 12:18 21 oct 2010 (BST)

Elementos para estruturar o contido do texto - Historial de revisiones

Bruno: /* Organización dos elementos */