Está en la página 1de 10

HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web.

Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1

HTML tambin es usado para referirse al contenido del tipo de MIME text/html o todava ms ampliamente como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Con etiqueta

Sin etiqueta

Con etiqueta

Sin etiqueta CITE CODE

Con etiqueta

Sin etiqueta

ADDRESS ADDRESS CITE

B: B: NEGRITA NEGRITA DFN DFN KBD STRONG S Tachado VAR

BIG
EM SAMP SUB5
TT

BIG EM SAMP SUB 5 TT

CODE

I: ITALICA
SMALL

I: KBD ITALICA SMALL SUP 5 STRONG S Tachado

SUP5

U U VAR Subrayado Subrayado

Etiquetas
Apertura <! <A> <ADDRESS> Accin Comentario. Hipervnculo. Formato para direccin del Atributos Ninguno HREF, NAME, REL, REV, TITLE Ninguno --> </A> </ADDRESS> Cierre

autor. <BASE> <BASEFONT SIZE> <BGSOUND> <BIG> <BLINK> Url del autor; contexto del documento. Tamao de la fuente base. Sonido de fondo. Aumenta el tamao. Hace parpadear el texto. HREF </BASE>

Ninguno SRC, LOOP. Ninguno Ninguno

NO NO - Internet Explorer </BIG> </BLINK> Netscape </BLOCKQUOTE>

Da formato con <BLOCKQUOTE> sangra a un prrafo Cuerpo del documento.

Ninguno BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK CLEAR: Se utiliza en combinacin con ALIGN de IMAGE. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER Ninguno Ninguno Ninguno

<BODY>

</BODY>

<BR>

Retorno de lnea.

NO

<CAPTION>

Posicin de la leyenda en una tabla. Centrar. Formato para citas en itlicas. Formato en tipo cdigo. Definiciones marcadas, para Lista de Definiciones <DL>. Formato en

</CAPTION>

<CENTER> <CITE> <CODE>

</CENTER> </CITE> </CODE>

<DD>

Ninguno

NO

<DFN<

Internet Explorer

</DFN<

itlica. Lista de directorio, con elementos marcados con <LI>. Lista de Definiciones, con trminos marcados con <DT> y definiciones marcadas con <DD>. Trminos marcados, para Lista de Definiciones <DL>. Formato enfatizado en itlica.

<DIR>

Ninguno

</DIR>

<DL>

Ninguno

</DL>

<DT>

Ninguno

NO

<EM>

Ninguno SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. SIZE, COLOR. Internet Explorer: FACE. ACTION, METHOD HTML 3.0: LEFT, CENTER, RIGHT BASE, TITLE, ISINDEX, NEXTID, META NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR

</EM></TD< tr>

<EMBED>

Sonido de Fondo.

NO Netscape</TD< tr>

<FONT>

Definicin de la fuente. Para ingreso de datos del usuario en un formulario. Tamao de letras del 1 al 6. Encabezamiento del documento.

</FONT>

<FORM>

</FORM>

<H1 ...H6>

</H1 .../H6>

<HEAD>

</HEAD>

<HR>

Lnea horizontal.

NO

<HTML> <I>

Al principio y al fin de todo documento. Itlica (Cursiva).

HEAD, BODY Ninguno ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED

</HTML> </I>

<IMG>

Cargar imgenes.

NO

<INPUT>

Define un objeto de ingreso en un formulario. Indica que existe un index en el server para el documento. Activa la seleccin de imgenes para el usuario. Formato monoespaciado. tem de lista. Listados Literal. Como PRE, pero usa letra proporcional.

</INPUT>

<ISINDEX>

Netscape: PROMPT

NO

<ISMAP>

Ninguno

NO

<KBD> <LI> <LISTING>

Ninguno Netscape: VALUE, TYPE Ninguno. Obsoleto.

</KBD> NO </LISTING>

<LIT>

Ninguno

</LIT>

<MARQUEE>

Marquesina.

ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. Ninguno EQUIV, CONTENT,

</MARQUEE> Internet Explorer

<MENU> <META>

Lista men. Metainformacin

</MENU> NO

ubicada en HEAD. <NEXTID> Es un parmetro que identifica al documento. Elimina los saltos de lneas. Lista ordenada, con elementos marcados con <LI>. Opcin de seleccin dentro de un formulario. Retorno de lnea, con un espacio. Alineacin de texto. Pasaje de texto plano. Visualiza el texto en su formato original. Texto tachado. Formato tipo ejemplo. Para seleccin de opciones dentro de un formulario. Disminuye el tamao. Formato enfatizado ms fuerte que <EM>. Subndice. Superndice.

NAME

NO

NO

<NOBR>

Ninguno

NO

<OL>

TYPE, START, VALUE.

</OL>

<OPTION>

VALUE, SELECTED VALUE Ninguno LEFT, CENTER, RIGHT Ninguno. Obsoleto.

NO

<P> <P ALIGN> <PLAINTEXT>

NO </P> </PLAINTEXT>

<PRE> <S> <SAMP>

WIDTH Ninguno Ninguno NAME, SIZE, MULTIPLE Ninguno

</PRE> </S> </SAMP>

<SELECT>

</SELECT>

<SMALL>

</SMALL>

<STRONG> <SUB> <SUP>

Ninguno Ninguno Ninguno

</STRONG> </SUB> </SUP>

<TABLE>

Tabla.

BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH NAME, ROWS, COLS. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH Ninguno ALIGN, VALIGN Ninguno

</TABLE>

<TD>

Celdas de una fila en una tabla, dentro de <TR>. rea para ingreso de texto dentro de un formulario.

</TD>

<TEXTAREA>

</TEXTAREA>

<TH>

Ttulo de Tabla.

</TH>

<TITLE> <TR> <TT>

Ttulo dentro de HEAD. Fila de una Tabla. Formato tipo mquina. Lista no ordenada, con elementos marcados con <LI> . Formato tipo variable.

</TITLE> </TR> </TT>

<UL>

COMPACT, TYPE

</UL>

<VAR>

Ninguno

</VAR>

<WBR>

Se usa con NOBR para una seccin Ninguno que deba ser separada. Similar a PRE. Ninguno

NO

<XMP>

</XMP>

Atributos
Nombre HREF<A> Etiqueta Direccin del URL local o Accin href="www.hp.com" Valor

remoto. Nmero de veces que se reproduce el archivo de loop=infinite sonido. Para permanente se usa INFINITE o -1. Nombre del archivo de sonido (Internet Explorer) src="sonido.wav"

LOOP <BGSOUND> SRC

LOOP <EMBED> SRC SRC <IMAGE> ALT

Nmero de veces que se reproduce el archivo de loop=-1 sonido. Para permanente se usa INFINITE o -1. Nombre del archivo de sonido (con Crescendo) Nombre del grfico Nombre que reemplaza a la imgen cuando sta no puede ser cargada. Color de fondo Imgen de fondo Color del texto src="sonido.mid" src="imagen.gif" alt="Nombre de Imgen" bgcolor="#FFFFFF" (blanco) background="foto.gif" text="#000000" (negro) link="#0000FF" (azul) vlink="#FF0000" (rojo) alink="#00FF00" (verde) align=top

BGCOLOR BACKGROUND TEXT <BODY> LINK VLINK ALINK <CAPTION> dentro de <TABLE>

Color de vnculo Color de vnculo visitado Color de vnculo presionado Colocar ttulo arriba (TOP) o debajo (BOTTOM) de la tabla.

ALIGN

ALIGN

<H1..H6>, <P ALIGN>, <TD>, Alinear el texto: LEFT, <TH>, <TR>, RIGHT, CENTER <DIV>, Alinear el texto: LEFT, RIGHT, CENTER <HR> Valor de la altura en pixels o porcentaje

align=center

ALIGN SIZE

align=center size=3

WIDTH SIZE COLOR FACE HEIGHT WIDTH BORDER CELLPADDING <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH> <FONT>

Valor del ancho en pixels o porcentaje Tamao de la letra de 1 a7 Color de la letra Fuente del texto (Internet Explorer) Valor de la altura en pixels o porcentaje Valor del ancho en pixels o porcentaje

width=50% size=6 color="#000000" (negro) face="helv" (helvtica) heigth=80 width=50%

Borde y ancho del borde border=5 en la tabla Espacio entre el borde y cellpadding=10 el texto Espacio entre las lneas interna y externa del borde Valor de la altura en pixels o porcentaje Valor del ancho en pixels o porcentaje <TD> dentro de <TABLE> Expandir una celda varias columnas Expandir una celda varias filas cellspacing=3

CELLSPACING <TABLE>

HEIGHT WIDTH COLSPAN ROWSPAN

heigth=80 width=50% colspan=4 rowspan=4

Adobe Dreamweaver es una aplicacin en forma de suite (basada en la forma de estudio de Adobe Flash) que est destinada a la construccin, diseo y edicin de sitios y aplicaciones Web basados en estndares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edicin de imgenes como para animacin a travs de su integracin con otras. Hasta la versin MX, fue duramente criticado por su escaso soporte de los estndares de la web, ya que el cdigo que generaba era con frecuencia

slo vlido para Internet Explorer y no validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones recientes. Se vende como parte de la suite Adobe Creative Suite. La gran ventaja de este editor sobre otros es su gran poder de ampliacin y personalizacin del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervnculo, una imagen o aadir un comportamiento) estn hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto. Las versiones originales de la aplicacin se utilizaban como simples editores WYSIWYG. Sin embargo, versiones ms recientes soportan otras tecnologas web como CSS, JavaScript y algunos frameworks del lado servidor. Dreamweaver ha tenido un gran xito desde finales de los aos 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicacin est disponible tanto para la plataforma MAC como para Windows, aunque tambin se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine. Como editor WYSIWYG que es, Dreamweaver permite ocultar el cdigo HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear pginas y sitios web fcilmente sin necesidad de escribir cdigo. Algunos desarrolladores web criticaban esta propuesta ya que crean pginas HTML ms largas de lo que solan ser al incluir mucho cdigo intil, lo cual va en detrimento de la ejecucin de las pginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicacin facilita en exceso el diseo de las pginas mediante tablas. Adems, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba cdigo que no cumpla con los estndares del consorcio Web (W3C). No obstante, Adobe ha aumentado el soporte CSS y otras maneras de disear pginas sin tablas en versiones posteriores de la aplicacin, haciendo que se reduzca el exceso de cdigo. Dreamweaver permite al usuario utilizar la mayora de los navegadores Web instalados en su ordenador para previsualizar las pginas web. Tambin dispone de herramientas de administracin de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar lneas de texto y cdigo por cualquier tipo de parmetro especificado, hasta el sitio web completo. El panel de comportamientos tambin permite crear JavaScript bsico sin conocimientos de cdigo. Con la llegada de la versin MX, Macromedia incorpor herramientas de creacin de contenido dinmico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, tambin permite la conexin a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnologa de script como, por

ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programacin. Un aspecto de alta consideracin de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeos programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo as funcionalidades aadidas a la aplicacin. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayora de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra. Tambin podra decirse que, para un diseo ms rpido y a la vez fcil, podra complementarse con Fireworks en donde se podra disear un men u otras creaciones de imgenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo ms pequeo, gif animado websnap) para un sitio web y despus exportar la imagen creada y as utilizarla como una sola en donde ya llevar los vnculos para dicho sitio.