Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      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.

      arriba


      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 html4 )
      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.
      arriba


      Los 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.

      arriba


      Cambiando el tipo de letra

      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
      arriba


       Estilos de texto

      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
      arriba


      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
      arriba


      Comunidad Virtual. Alojamiento gratis