Diferencia entre revisiones de «Lenguaje HTML/Formateo de texto»
Contenido eliminado Contenido añadido
Sin resumen de edición |
m Bot controlado: actualizada sintaxis de tabla; cambios triviales |
||
Línea 4:
|siguiente=Texto con estilo
}}
Los documentos suelen tener un título, el texto esta dividido en párrafos, pueden tener partes resaltadas. incluir citas... <br />
En esta sección veremos los elementos HTML que nos permiten darle forma a un documento.
Línea 12:
Una buena forma de estructurar un documento es dividirlo en secciones. El HTML permite hacerlo mediante encabezados, que son los títulos de cada sección. El elemento de encabezado es el carácter '''h''' seguido de un número del 1 al 6. Así tenemos que los encabezados son:
<tt>'''h1'''</tt>, <tt>'''h2'''</tt>, <tt>'''h3'''</tt>, <tt>'''h4'''</tt>, <tt>'''h5'''</tt> y <tt>'''h6'''</tt>. <br />
El h1 es el encabezado de mayor tamaño y el h6 es el encabezado de menor tamaño.
Se pueden utilizar los encabezados para anidar secciones, creando una ''estructura jerárquica''.
De este modo, el encabezado h1 será la primer sección sin anidar, y el sexto será el máximo nivel de anidamiento.
|-
|
<pre>
<h1>Encabezado 1 - Sección 1</h1>
<h1>Encabezado 1 - Sección 2</h1>
<h1>Encabezado 1 - Sección 3</h1>
<h1>Encabezado 1 - Sección 4</h1>
</pre>
|}
{| border='0' align='center'
Línea 39 ⟶ 40:
|-
|
= Encabezado 1 - Sección 1 =
__NOEDITSECTION__
== Encabezado 2 - Sección 1.1 ==
__NOEDITSECTION__
== Encabezado 2 - Sección 1.2 ==
__NOEDITSECTION__
== Encabezado 2 - Sección 1.3 ==
__NOEDITSECTION__
=== Encabezado 3 - Sección 1.3.1 ===
__NOEDITSECTION__
=== Encabezado 3 - Sección 1.3.2 ===
__NOEDITSECTION__
== Encabezado 2 - Sección 1.4 ==
__NOEDITSECTION__
= Encabezado 1 - Sección 2 =
__NOEDITSECTION__
= Encabezado 1 - Sección 3 =
__NOEDITSECTION__
= Encabezado 1 - Sección 4 =
__NOEDITSECTION__
|}
== Párrafos ==
* El elemento: '''p'''
Es el componente básico de edición de textos. Es un elemento en bloque que no puede contener elementos en bloque. <br />
Sus etiquetas son: <'''p'''> y </'''p'''> (la de cierre es opcional, pero ¡úsala de todos modos!)
Línea 72 ⟶ 73:
:''align'' - (alineación)
* El elemento: '''br'''
La etiqueta <'''br'''> introduce un "retorno de carro", es decir que el texto a continuación de la etiqueta pasa al renglón siguiente. <br />
== Citas ==
Para incluir citas en nuestro texto tenemos tres elementos:
* Elemento '''blockquote'''
(blockquote = cita-bloque) Es apropiado para citas extensas. <br />
Sus etiquetas son: <'''blockquote'''> y </'''blockquote'''> <br />
El efecto de '''blockquote''' es que el texto encerrado entre las etiquetas se muestre con sangría a ambos lados.
* Elemento '''q'''
(quote = cita) Es apropiado para citas cortas. <br />
Sus etiquetas son: <'''q'''> y </'''q'''> (ambas obligatorias)
* Elemento '''cite'''
(cite = cita) Es el elemento indicado para señalar la fuente o el autor de la cita. <br />
Sus etiquetas son: <'''cite'''> y </'''cite'''> (ambas obligatorias)
|-
|
<pre>El gran filósofo <cite>Sócrates</cite> dijo: <q>sólo sé que nada sé.</q></pre>
|}
|-
|
<pre>La <cite> especificación del HTML 4.01 </cite> dice: <blockquote> Nota. Recomendamos
signos de puntuación de citas antes y después de una cita delimitada por un BLOCKQUOTE
de un modo apropiado según el contexto del idioma actual y el grado de anidamiento de
las citas. </blockquote></pre>
|}
== Dándole énfasis a lo importante ==
* Elemento '''em'''
Sirve para darle énfasis al texto. <br />
Sus etiquetas son <'''em'''> y </'''em'''> (ambas obligatorias)
* Elemento '''strong'''
Sirve para darle mucho énfasis al texto. <br />
Sus etiquetas son <'''strong'''> y </'''strong'''> (ambas obligatorias)
<table border='1' cellspacing='1' cellpadding='10'>▼
<caption>Ejemplo de énfasis '''em'''</caption>▼
<tr> <td>Sirve para darle <'''em'''>énfasis</'''em'''> al texto</td>▼
<td>Sirve para darle <em>énfasis</em> al texto</td></tr>▼
|-
! Codificado así
! Se muestra así*
|-
|}
<table border='1' cellspacing='1' cellpadding='10'>▼
|-
<td>Sirve para darle <strong> mucho énfasis</strong> al texto</td></tr>▼
! Codificado así
! Se muestra así*
|-
| Sirve para darle <'''strong'''> mucho énfasis </'''strong'''>al texto
|}
<nowiki>*</nowiki> El ejemplo muestra como se representan los elementos por defecto, la forma de ser representados varia entre navegadores y puede ser modificada mediante CSS.
== Definiendo que es gerundio ==
* Elemento '''dfn'''
(definition = definición) Indica que el texto marcado es una definición. <br />
Sus etiquetas son <'''dfn'''> y </'''dfn'''> (ambas obligatorias)
* Elemento '''abbr'''
(abbreviation = abreviatura) Indica que el texto marcado es una abreviatura. <br />
Sus etiquetas son <'''abbr'''> y </'''abbr'''> (ambas obligatorias)
* Elemento '''acronym'''
(acronym = acrónimo) Indica que el texto marcado es un acrónimo. <br />
Sus etiquetas son <'''acronym'''> y </'''acronym'''> (ambas obligatorias)
== Centrar textos o imágenes ==
* Elemento '''center'''
Las etiquetas <'''center'''> y </'''center'''> sirven para centrar todo lo que se encuentre entre dichas etiquetas, ya sean textos o imágenes.<br />
| |||