Crea tu web, tutor html, css

Formato a nivel de bloques

Tutor HTML4

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.

 La información mostrada en la página no es algo plano, puede ir formateada para ser más útil

Estilos de párrafo

Estos estilos o formatos actúan a nivel 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.
 Al hablar de párrafos nos refereimos a un conjunto de texto que forman un todo y suelen llevar antes y despues un espacio mayor que entre las lineas de texto

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.

 Los encabezadas se usan para establecer jerarquias de partes de la página

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>HTML 3.2 Para tachar. A mí, en cambio, nadie me quiere
<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>HTML 3.2 Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL>HTML 3.2 Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
 Los textos pueden ponerse en negrita, cursiva, subrayados, entre otras formas para resaltar las partes que quermos que llamen la atención

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>HTML 4.0 Abreviaturas. La WWW usa el protocolo http
 Es posible utilizar distintos estilos de letra en una pagina sin necsidad de cambiar el font. Son como fuentes predefinidas para un uso concreto.

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
 Los saltos e linea, lineas horizontales o marcadores de comentarios comeltan este resumen de elmentos HTML