MARCAS DE TEXTO

NCD Guía de Diseño en HTML v6.0

+ Párrafo

Párrafo <p> 

<p>Este es el primer párrafo. 
<p>Este es el segundo párrafo.

Este es el primer párrafo.

Este es el segundo párrafo.



Alineación del Párrafo
<p align=#> #=left, center, right

<p align=#> #=justify

<p align=left>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<p align=center>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<p align=right>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<p align=justify>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!




+ Quotation

<blockquote>...</blockquote> 

Su canción:
<blockquote>
Cuando era joven,
escuchaba la radio
esperando mis canciones favoritas...
</blockquote>
 Su canción:
Cuando era joven, escuchaba la radio esperando mis canciones favoritas...


+ Corte de Linea

Corte de Linea <br> 

Cómo estás?<br>Bien, gracias.
 Cómo estás?
Bien, gracias.


Sin Corte <nobr>
Con Corte Suave <wbr> 

<nobr> 
Cierre el ancho de la ventana del navegador para ver cómo trabaja esta
marca!
Este es el primer párrafo. Es una gran historia, cierto?
Es emocionante... <wbr> y romántico!
</nobr>
Cierre el ancho de la ventana del navegador para ver cómo trabaja esta marca! Este es el primer párrafo. Es una gran historia, cierto? Es emocionante... y romántico!


+ Centrado

<center>...</center> 

<center>Hola</center>
Hola



+ Agrupación de Elementos

División (agrupando por bloque de texto)     <div> ... </div> 

<div class="seccion">
<H1>1. Primer Paso</H1>
En esta sección usted debe ...
<div class="subseccion">
<H2>1-1. Música</H2>
La música es un lenguaje importante...
</div>
</div>

1. Primer Paso

En esta sección usted debe ...

1-1. Música

La música es un lenguaje importante...


Alineación de la División
<div align=#> #=left, center, right

<div align=#> #=justify

<left>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<center>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<right>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!

<justify>

Este es el primer párrafo. Es una gran historia, cierto? Es emocionante, interesante, fantástico y romántico!


Expansión (agrupando por palabras)     <span> ... </span> 

TELEFONO: 
<span class="telefono">
000-0000000
</SPAN>
TELEFONO: 000-0000000


+ Listado Básico

Lista sin Orden <ul><li>...</ul> 

<ul>
<li>Hoy
<li>Mañana
</ul>
  • Hoy
  • Mañana 

<ul><li>UNO
    <ul><li>DOS
        <ul><li>TRES
</ul></ul></ul>
  • UNO
    • DOS
      • TRES

Listas Ordenadas <ol><li>...</ol> 

<ol>
<li>Hoy
<li>Mañana
</ol>
  1. Hoy
  2. Mañana 

<ol><li>UNO
    <ol><li>DOS
        <ol><li>TRES
</ol></ol></ol>
  1. UNO
    1. DOS
      1. TRES

Listas de Definición <dl><dt>...<dd>...</dl> 

<dl>
<dt>Hoy
<dd>Hoy será ayer.
<dt>Mañana
<dd>Mañana será hoy.
</dl>
Hoy
Hoy será ayer.
Mañana
Mañana será hoy.

Listas como Directorio <dir><li>...</dir> 

<dir>
<li>Hoy
<li>Ayer
</dir>
  • Hoy
  • Ayer

    • Listas como Menú <menu><li>...</menu> 

    <menu>
<li>Hoy
<li>Ayer
</menu>
  • Hoy
  • Ayer



    • + Listado Personalizado

    Estilo de Marca <li type=#> #=disk, circle, square 

    <ul>
<li type=disc>UNO
<li type=circle>DOS
<li type=square>TRES
</ul>
    • UNO
    • DOS
    • TRES


    Letras/Números <li type=#> #=A, a, I, i, 1 

    <ol>
<li type=A>UNO-UNO
<li>UNO-DOS
</ol>
    1. UNO-UNO
    2. UNO-DOS 

    <ol>
<li type=a>UNO-UNO
<li>UNO-DOS
</ol>
    1. UNO-UNO
    2. UNO-DOS 

    <ol>
<li type=I>UNO-UNO
<li>UNO-DOS
</ol>
    1. UNO-UNO
    2. UNO-DOS 

    <ol>
<li type=i>UNO-UNO
<li>UNO-DOS
</ol>
    1. UNO-UNO
    2. UNO-DOS 

    <ol>
<li type=1>UNO-UNO
<li>UNO-DOS
</ol>
    1. UNO-UNO
    2. UNO-DOS



    Lista con Número de Inicio <ol start=#> #=número 

    <ol start=5>
<li type=A>UNO-UNO
<li>UNO-DOS
	<ol start=10>
	<li>DOS-UNO
	<li type=i>DOS-UNO
</ol></ol>

    1. UNO-UNO
    2. UNO-DOS
      1. DOS-UNO
      2. DOS-DOS

    Lista Compacta de Definición <dl compact>

    <dl compact>
<dt>Hoy
<dd>Hoy será ayer.
<dt>Mañana
<dd>Mañana será hoy.
</dl>
    Hoy
    Hoy será ayer.
    Next
    Mañana será hoy.



    + Texto Preorganizado

    <pre>...</pre> 

    <pre>
Por favor use su tarjeta.
VISA    Master
<b>Aquí está el formato de envío.</b>
<ul><li>Fax
<li>Correo Aéreo</ul>
</pre>
    		 
    Por favor use su tarjeta.
VISA    Master
Aquí está el formato de envío.

    • Fax

    • Correo Aéreo


    <listing>...</listing> 

    <listing>
Por favor use su tarjeta.
VISA    Master
<b>Aquí está el formato de envío.</b>
<ul><li>Fax
<li>Correo Aéreo</ul>
</listing>
    		 Por favor use su tarjeta. VISA Master Aquí está el formato de envío.
    • Fax
    • Correo Aéreo


    <xmp>...</xmp> 

    <xmp>
Por favor use su tarjeta.
VISA    Master
<b>Aquí está el formato de envío.</b>
<ul><li>Fax
<li>Correo Aéreo</ul>
</xmp>
    		 Por favor use su tarjeta. VISA Master <b>Aqu&iacute; est&aacute; el formato de env&iacute;o.</b> <ul><li>Fax <li>Correo A&eacute;reo</ul>


    + Comentario

    <!-- ... --> 

    CASO 1
<!-- esto es una prueba -->
    		 CASO 1

    <comment>...</comment> 

    CASO 1
<comment>Esta es una prueba</comment>
    		CASO 1Esta es una prueba


    + Espaciador

    <spacer type="horizontal" size=#> #=espacio horizontal
    <spacer type="vertical" size=#> #=espacio vertical 

    AYER 
<pspacer type="horizontal" size=50> HOY
<spacer type="vertical" size=50> MAÑANA
    AYER HOY MAÑANA

    <spacer type="block" width=# height=# align=-->
    #=tamaño del espacio
    --=top, middle, bottom, left, right 

    <spacer type="block" width=150 height=50 align=left>
AYER<br> HOY<br> MAÑANA
    AYER
    HOY
    MAÑANA


    + Texto en Múltiples Columnas

    <multicol cols=#> ... </multicol> #=Número de Columnas 

    <multicol cols=2>
texto texto texto...
</multicol>
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

    <multicol gutter=#> ... </multicol> #=Espacio entre Columnas 

    <multicol cols=2 gutter=100>
texto texto texto...
</multicol>
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

    <multicol width=#> ... </multicol> #=Ancho de columnas 

    <multicol cols=2 width=400>
texto texto texto...
</multicol>
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto


    + Recuadros

    Recuadro <marquee>...</marquee> 

    <marquee>Hola desde Colombia!</marquee>
    Hola desde Colombia!

    Atributos del Recuadro



    + Dirección del Texto

    <bdo dir="#">...</bdo>     #=ltr (izquierda-derecha), rtl (derecha-izquierda) 

    <bdo dir="rtl">
Es un buen día! <BR>
!aíd neub nu sE
</bdo>
    		 Es un buen día!
    !aíd neub nu sE

    + Texto para Mostrar (Ruby)

    <ruby>
       <rb> #1 </rb>
       <rt> #2 </rt>
       <rp> #3 </rt>
    </ruby>
    #1=Texto base, #2=Texto Ruby, #3=Texto para el navegador que no lo soporta 

    <ruby>
   <rb><img src="japanese.gif"></rb>
   <rp> ( </rp>
   <rt>Network Communication Design</rt>
   <rp> ) </rp>
</ruby>
    		( Network Communication Design )

    + Control de Edición y Selección

    Control de Edición
    <div contenteditable="#">     #=true, false 

    <div contenteditable="true">
Es un buen día.
Mañana será mejor.
</div>
    Es un buen día. Mañana será mejor. 
    <div contenteditable="false">
Es un buen día.
Mañana será mejor.
</div>
    Es un buen día. Mañana será mejor.

    Control de Selección
    <div unselectable="#">     #=on, off 

    <div unselectable="on">
Es un buen día.
Mañana será mejor.
</div>
    Es un buen día. Mañana será mejor. 
    <div unselectable="off">
Es un buen día.
Mañana será mejor.
</div>
    Es un buen día. Mañana será mejor.


    Guía de Diseño en HTML | Guía de Hojas de Estilo
    Documento | Página | Fuente (Letra) | Texto | Imagen | Formatos | Tabla | Marco | Objetos | XML
    LISTA DE MARCAS HTML | Edición PDF

    BACK TO NCD HOME
    Network Communication Design - http://www.ncdesign.org/
         Copyright & Publishing 1994-2002 Network Communication Design msg@ncdesign.org
    Derechos Reservados 1995-2006 por: Carlos J. Naranjo e-mail: <webmaster <ARROBA> orange-tech <PUNTO> net>