domingo, 15 de diciembre de 2013

Etiquetas Para Color, Imágenes y Texto


La etiqueta <font>

Es una etiqueta especial que tiene atributos, estos atributos son:

  • face (Tipo de letra)
  • color (Color de letra)
  • size (Tamaño de letra)
Ejemplos:
  • <font color="#FF6600" > Texto </font>
  • <font color="#ff0000" size="3" face="Arial"> Texto </font>

La etiqueta <img>

Se usa esta etiqueta para enlazar imágenes en la página Web, tiene varias propiedades, las principales son:
  • height (altura)
  • width (ancho)
Ejemplos:
  • <img src="pareja.gif" />
  • <img src="chavo.jpg" height="300px" />
  • <img src="doctor.jpg" width="200px" height="300px" />
Notas. Al usar una imagen el tamaño esta en pixeles, esto significa el px. Es importante recordar que la imagen que se usa debe estar en la misma carpeta donde esta grabado el archivo html.

La Etiqueta <hr />

Es una etiqueta usada para colocar una linea horizontal en la Web, esta etiqueta es especial ya que no tiene un cierre como las demás, tiene las siguientes propiedades:
  • color
  • size
  • width
Ejemplos:
  • <hr />
  • <hr color="#CC6600" size="15px" width="50%" />

La etiqueta <marquee>

Se usa para que un texto, imagen o elemento se desplace de derecha a izquierda en la página.
Ejemplo:

  • <marquee>Texto</marquee>
  • <marquee> <img src="pareja.gif" /> </marquee>

Ejemplo. Uso de Imágenes y Colores

Clic aquí y descargue el ejemplo, luego descomprima para verlo completo


<html>
        <head> <title>Etiquetas básicas de HTML</title> </head>
        <body bgcolor="#CCFFCC">
                <font color="#FF6600" >
                <h1>Caricaturas</h1>
                </font>
                <center>
                <img src="pareja.gif" />
                <h5>Este es un Dibujo Animado</h5>
                </center>
                <p>
                <font color="#ff0000" size="3" face="Arial">Una caricatura (del italiano caricare: cargar, exagerar) es un retrato que exagera o distorsiona la apariencia física de una persona o varias, en ocasiones un retrato de la sociedad reconocible, para crear un parecido fácilmente identificable y, generalmente, humorístico.</font> También puede tratarse de alegorías. Su técnica usual se basa en recoger los rasgos más marcados de una persona (labios, cejas, etc.) y exagerarlos o simplificarlos para causar comicidad o para representar un defecto moral a través de la deformación de los rasgos, en tal caso es una forma de humor gráfico.
                </p>
                <hr />
                <marquee>
                <img src="chavo.jpg" height="300px" />
                </marquee>
                <hr color="#CC6600" size="15px" width="50%" />
                <p>
                La caricatura también se usa abundantemente en la historieta, pero sin limitarse a un género concreto, pudiendo aparecer en hagiografías como el Buda de Osamu Tezuka o en relatos costumbristas como los de Daniel Clowes.
                </p>
                <center>
                <img src="doctor.jpg" width="200px" height="300px" />
                <h5>Esta es una caricatura</h5>
                </center>
        </body>
</html>

Plantilla de Colores HTML


Posted on 12:55 p.m. by ghel

No comments

domingo, 1 de diciembre de 2013

HTML

 HyperText Markup Language, es un lenguaje de marcación de hipertexto, es decir un lenguaje de texto enriquecido con formato, color, imágenes, sonido y vídeo.  
La base del lenguaje son las etiquetas, mediante estas se puede organizar la información de forma que esta adquiera un formato estándar que pueda ser usado por cualquier navegador de páginas Web. El HTML es la base para la creación de páginas Web, es necesario conocer el lenguaje para poder estructurar y diseñar páginas.
Para escribir una página en HTML no se necesita de grandes y complicados programas, pueden usarse programas como el bloc de notas, el objetivo es escribir un archivo en formato de texto. Las páginas Web que escribiremos tendrán la extensión html.

Estructura de una página Web

  • Las páginas Web tienen una etiqueta de inicio y una etiqueta de final, esta es: <html> ... </html>
  • Se tiene una cabecera donde se ponen las configuraciones básicas de la página, esta tiene la etiqueta <head> ... </head>
  • Existe un titulo en la Web esta aparece como titulo de la ventana o pestaña, esta es <title> ... </title>
  • El cuerpo es la parte que contiene la información visible de la página Web, su etiqueta es: <body> ... </body>




Las Etiquetas

Debes considerar que las etiquetas son la estructura esencial de la Web y tener en cuenta que toda etiqueta tiene un inicio y un fin, también tiene un contenido en su interior, las etiquetas pueden contener otros contenidos y otras etiquetas.


Etiquetas básicas


  • h1, h2, h3, h4, h5, h6, son etiquetas de título.
  • b, etiqueta para negrita
  • u, etiqueta de subrayado
  • i, etiqueta para cursiva
  • center, etiqueta para centrado
  • p, etiqueta de párrafo
  • hr, etiqueeta de linea horizontal
Ejemplo 1. Los Títulos

Ejemplo 2. Las Etiquetas Básicas
Clic para ver el ejemplo


Código de la Figura en HTML

<html>
        <head>
                <title>
                        Etiquetas básicas de HTML
                </title>
        </head>
        <body>
                <center><h1>La Historia de la Web</h1></center>
                <p>
                        <b><u>La World Wide Web</u> (“WWW” o simplemente la "Web")</b> es un medio global de informaci&oacute;n cuyos usuarios pueden leer y escribir a través de computadoras conectadas a Internet. 
                </p>
                <p>
                        La porci&oacute;n de hipertexto de la Web en particular tiene una intrincada historia intelectual; notables influencias y precursores incluyen Memex,1 de Vannevar Bush, Lenguaje de Marcado Generalizado,2 de IBM y el Proyecto Xanadu de Ted Nelson.1
                </p>
                <p>
                        <i>El cuento de 1946 "A Logic Named Joe" de Murray Leinster describe a Joe, un "l&oacute;gico", es decir, un ordenador.</i> Ésta es una de las primeras descripciones de un ordenador en la ficci&oacute;n. En este relato Leinster estuvo décadas por delante de su tiempo al imaginar Internet.
                </p>
                <hr />
                <h5>Texto extra&iacute;do de Wikipedia</h5>
        </body>
</html

Posted on 7:51 p.m. by ghel

No comments