Formato a nivel de bloques
Dando formato
Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.
Además tienes los bloques DIV, un tipo de elmento web con unas utiliades que van más allá de los bloques que te muestro aquí. Los puedes ver en el apartado de capas.
Estilos de párrafo
Etiqueta | Significado | Resultado |
---|---|---|
<p> |
Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. | Soy un párrafo: fíjate en los espacios de antes y de después. |
<p ALIGN=x> ... </p> |
Justificar el texto del párrafo a la izquierda (align=left ), derecha (right ), al centro (center ) o a ambos márgenes (justify ) |
Alineación izquierda
Texto centrado
Alineación derecha
Texto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho. |
<center> ... </center> |
Permite centrar todo el bloque de texto encerrado. | Alineación por defecto
Texto centrado |
<pre width=x> ... </pre> |
Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parámetro WIDTH especifica el número máximo de caracteres en una línea. | Estoy en paso fijo |
<blockquote> ... </blockquote> |
Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como tabulador | Si quieres ver el texto indentado por ambos márgenes usa el Blockquote. |
Encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.
Etiqueta | Resultado |
---|---|
<h1> ... </h1> |
Cabecera de nivel 1 |
<h2> ... </h2> |
Cabecera de nivel 2 |
<h3> ... </h3> |
Cabecera de nivel 3 |
<h4> ... </h4> |
Cabecera de nivel 4 |
<h5> ... </h5> |
Cabecera de nivel 5 |
<h6> ... </h6> |
Cabecera de nivel 6 |
Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrás. Habitualmente se utilizan para destacar títulos de los diferentes apartados o secciones de un texto.
Estilos de texto
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar dentro de un párrafo.
Etiqueta | Utilidad | Resultado |
---|---|---|
<B> ... </B> |
Pone el texto en negrita. | Soy un texto negro como el tizón |
<I> ... </I> |
Representa el texto en cursiva. | Estoy ladeado |
<U> ... </U> |
Para subrayar algo. | Como soy muy importante estoy subrayado |
<S> ... </S> |
Para tachar. | |
<TT> ... </TT> |
Permite representar el texto en un tipo de letra de paso fijo. | No soy variable |
<SUP> ... </SUP> |
Letra superíndice. | E=mc2 |
<SUB> ... </SUB> |
Letra subíndice. | ai,j=bi,j+1 |
<BIG> ... </BIG> |
Incrementa el tamaño del tipo de letra. | Soy GRANDE |
<SMALL> ... </SMALL> |
Disminuye el tamaño del tipo de letra. | Creí ver un lindo gatito |
Tipo de letra
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.
Etiqueta | Significado | Efectos |
---|---|---|
<cite> ... </cite> |
Cita, por ejemplo de un texto | Esta frase no es mía |
<code> ... </code> |
Código | int x=0; |
<strong> ... </strong> |
Fuerte, negrita. | Hay cosas importantes. |
<em> ... </em> |
Enfasis. | Para poner énfasis |
<kbd> ... </kbd> |
Teclado | El usuario debe teclear Multivac es el mejor. |
<var> ... </var> |
Representar variables de un código. | La variable x, definida anteriormente... |
<samp> ... </samp> |
Para representar una serie de caracteres literalmente. | Estoy en un literal |
<abbr> ... </abbr> |
Abreviaturas. | La WWW usa el protocolo http |
Otros elementos
Estas etiquetas realmente no son formato ni de párrafo ni de texto, pero hay que ponerlas en algún sitio:
Etiqueta | Significado | Resultado |
---|---|---|
<br> |
Cambio de línea. | Simple salto de linea |
<hr> |
Barra horizontal. | |
<!-- ... --> |
Comentarios. | No se ve el contenido |