HTML
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es ellenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también 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.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida delXML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
PARA QUE SIRVE
permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++,Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.
El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX(el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html
Estos documentos pueden ser mostrados por los visores o "browsers" depaginas Web en Internet, como Netscape Navigator, Mosaic, Opera yMicrosoft Internet Explorer.
También existe el HTML Dinámico (DHTML), que es una mejora deMicrosoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página.
Estos documentos pueden ser mostrados por los visores o "browsers" de
También existe el HTML Dinámico (DHTML), que es una mejora de
| Etiquetas | |||
|---|---|---|---|
| Apertura | Acción | Atributos | Cierre |
| < ! | Comentario. | Ninguno | --> |
| <A> | Hipervínculo. | HREF, NAME, REL, REV, TITLE | </A> |
| <ADDRESS> | Formato para dirección del autor. | Ninguno | </ADDRESS> |
| <BASE> | Url del autor; contexto del documento. | HREF | </BASE> |
| <BASEFONT SIZE> | Tamaño de la fuente base. | Ninguno | NO |
| <BGSOUND> | Sonido de fondo. | SRC, LOOP. | NO - Internet Explorer |
| <BIG> | Aumenta el tamaño. | Ninguno | </BIG> |
| <BLINK> | Hace parpadear el texto. | Ninguno | </BLINK> - Netscape |
| <BLOCKQUOTE> | Da formato con sangría a un párrafo | Ninguno | </BLOCKQUOTE> |
| <BODY> | Cuerpo del documento. | BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK | </BODY> |
| <BR> | Retorno de línea. | CLEAR: Se utiliza en combinación con ALIGN de IMAGE. | NO |
| <CAPTION> | Posición de la leyenda en una tabla. | ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER | </CAPTION> |
| <CENTER> | Centrar. | Ninguno | </CENTER> |
| <CITE> | Formato para citas en itálicas. | Ninguno | </CITE> |
| <CODE> | Formato en tipo código. | Ninguno | </CODE> |
| <DD> | Definiciones marcadas, para Lista de Definiciones <DL>. | Ninguno | NO |
| <DFN< | Formato en itálica. | Internet Explorer | </DFN< |
| <DIR> | Lista de directorio, con elementos marcados con <LI>. | Ninguno | </DIR> |
| <DL> | Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. | Ninguno | </DL> |
| <DT> | Términos marcados, para Lista de Definiciones <DL>. | Ninguno | NO |
| <EM> | Formato enfatizado en itálica. | Ninguno | </EM> |
| <EMBED> | Sonido de Fondo. | SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. | NO - Netscape |
| <FONT> | Definición de la fuente. | SIZE, COLOR. Internet Explorer: FACE. | </FONT> |
| <FORM> | Para ingreso de datos del usuario en un formulario. | ACTION, METHOD | </FORM> |
| <H1 ...H6> | Tamaño de letras del 1 al 6. | HTML 3.0: LEFT, CENTER, RIGHT | </H1 .../H6> |
| <HEAD> | Encabezamiento del documento. | BASE, TITLE, ISINDEX, NEXTID, META | </HEAD> |
| <HR> | Línea horizontal. | NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR | NO |
| <HTML> | Al principio y al fin de todo documento. | HEAD, BODY | </HTML> |
| <I> | Itálica (Cursiva). | Ninguno | </I> |
| <IMG> | Cargar imágenes. | ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE | NO |
| <INPUT> | Define un objeto de ingreso en un formulario. | TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED | </INPUT> |
| <ISINDEX> | Indica que existe un index en el server para el documento. | Netscape: PROMPT | NO |
| <ISMAP> | Activa la selección de imágenes para el usuario. | Ninguno | NO |
| <KBD> | Formato monoespaciado. | Ninguno | </KBD> |
| <LI> | Ítem de lista. | Netscape: VALUE, TYPE | NO |
| <LISTING> | Listados | Ninguno. Obsoleto. | </LISTING> |
| <LIT> | Literal. Como PRE, pero usa letra proporcional. | Ninguno | </LIT> |
| <MARQUEE> | Marquesina. | ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. | </MARQUEE> - Internet Explorer |
| <MENU> | Lista menú. | Ninguno | </MENU> |
| <META> | Metainformación ubicada en HEAD. | EQUIV, CONTENT, NAME | NO |
| <NEXTID> | Es un parámetro que identifica al documento. | NO | NO |
| <NOBR> | Elimina los saltos de líneas. | Ninguno | NO |
| <OL> | Lista ordenada, con elementos marcados con <LI>. | TYPE, START, VALUE. | </OL> |
| <OPTION> | Opción de selección dentro de un formulario. | VALUE, SELECTED VALUE | NO |
| <P> | Retorno de línea, con un espacio. | Ninguno | NO |
| <P ALIGN> | Alineación de texto. | LEFT, CENTER, RIGHT | </P> |
| <PLAINTEXT> | Pasaje de texto plano. | Ninguno. Obsoleto. | </PLAINTEXT> |
| <PRE> | Visualiza el texto en su formato original. | WIDTH | </PRE> |
| <S> | Texto tachado. | Ninguno | </S> |
| <SAMP> | Formato tipo ejemplo. | Ninguno | </SAMP> |
| <SELECT> | Para selección de opciones dentro de un formulario. | NAME, SIZE, MULTIPLE | </SELECT> |
| <SMALL> | Disminuye el tamaño. | Ninguno | </SMALL> |
| <STRONG> | Formato enfatizado más fuerte que <EM>. | Ninguno | </STRONG> |
| <SUB> | Subíndice. | Ninguno | </SUB> |
| <SUP> | Superíndice. | Ninguno | </SUP> |
| <TABLE> | Tabla. | BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR | </TABLE> |
| <TD> | Celdas de una fila en una tabla, dentro de <TR>. | ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH | </TD> |
| <TEXTAREA> | Área para ingreso de texto dentro de un formulario. | NAME, ROWS, COLS. | </TEXTAREA> |
| <TH> | Título de Tabla. | ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH | </TH> |
| <TITLE> | Título dentro de HEAD. | Ninguno | </TITLE> |
| <TR> | Fila de una Tabla. | ALIGN, VALIGN | </TR> |
| <TT> | Formato tipo máquina. | Ninguno | </TT> |
| <UL> | Lista no ordenada, con elementos marcados con <LI> . | COMPACT, TYPE | </UL> |
| <VAR> | Formato tipo variable. | Ninguno | </VAR> |
| <WBR> | Se usa con NOBR para una sección que deba ser separada. | Ninguno | NO |
| <XMP> | Similar a PRE. | Ninguno | </XMP> |
<A>
| Atributos | |||
|---|---|---|---|
| Nombre | Etiqueta | Acción | Valor |
| HREF | Dirección del URL local o remoto. | href="www.hp.com" | |
| LOOP | <BGSOUND> | Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. | loop=infinite |
| SRC | Nombre del archivo de sonido (Internet Explorer) | src="sonido.wav" | |
| LOOP | <EMBED> | Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. | loop=-1 |
| SRC | Nombre del archivo de sonido (con Crescendo) | src="sonido.mid" | |
| SRC | <IMAGE> | Nombre del gráfico | src="imagen.gif" |
| ALT | Nombre que reemplaza a la imágen cuando ésta no puede ser cargada. | alt="Nombre de Imágen" | |
| BGCOLOR | <BODY> | Color de fondo | bgcolor="#FFFFFF" (blanco) |
| BACKGROUND | Imágen de fondo | background="foto.gif" | |
| TEXT | Color del texto | text="#000000" (negro) | |
| LINK | Color de vínculo | link="#0000FF" (azul) | |
| VLINK | Color de vínculo visitado | vlink="#FF0000" (rojo) | |
| ALINK | Color de vínculo presionado | alink="#00FF00" (verde) | |
| ALIGN | <CAPTION> dentro de <TABLE> | Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla. | align=top |
| ALIGN | <H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>, | Alinear el texto: LEFT, RIGHT, CENTER | align=center |
| ALIGN | <HR> | Alinear el texto: LEFT, RIGHT, CENTER | align=center |
| SIZE | Valor de la altura en pixels o porcentaje | size=3 | |
| WIDTH | Valor del ancho en pixels o porcentaje | width=50% | |
| SIZE | <FONT> | Tamaño de la letra de 1 a 7 | size=6 |
| COLOR | Color de la letra | color="#000000" (negro) | |
| FACE | Fuente del texto (Internet Explorer) | face="helv" (helvética) | |
| HEIGHT | <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH> | Valor de la altura en pixels o porcentaje | heigth=80 |
| WIDTH | Valor del ancho en pixels o porcentaje | width=50% | |
| BORDER | <TABLE> | Borde y ancho del borde en la tabla | border=5 |
| CELLPADDING | Espacio entre el borde y el texto | cellpadding=10 | |
| CELLSPACING | Espacio entre las líneas interna y externa del borde | cellspacing=3 | |
| HEIGHT | Valor de la altura en pixels o porcentaje | heigth=80 | |
| WIDTH | Valor del ancho en pixels o porcentaje | width=50% | |
| COLSPAN | <TD> dentro de <TABLE> | Expandir una celda varias columnas | colspan=4 |
| ROWSPAN | Expandir una celda varias filas | rowspan=4 | |
Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:
1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
2. Mediante la especificación del nombre del color en ingles
2. Mediante la especificación del nombre del color en ingles
Ejemplos:
"<font color='#0000FF'>Esto es texto azul..</font>, esto es texto normal";
| <FONT COLOR="WHITE">Blanco</FONT> | Blanco | #FFFFFF |
| <FONT COLOR="BLACK">Negro</FONT> | Negro | #000000 |
| <FONT COLOR="RED">Rojo</FONT> | Rojo | #FF0000 |
| <FONT COLOR="GREEN">Verde</FONT> | Verde | #00FF00 |
| <FONT COLOR="BLUE">Azul</FONT> | Azul | #0000FF |
| <FONT COLOR="YELLOW">Amarillo</FONT> | Amarillo | #FFFF00 |
| <FONT COLOR="CYAN">Cyan</FONT> | Cyan | #00FFFF |
| <FONT COLOR="MAGENTA">Magenta</FONT> | Magenta | #FF00FF |
ETIQUETAS DE UNA TABLA :
ALINEAR TABLAS
Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:
align | Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. | ||||||||||
valign | Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. | ||||||||||
bgcolor | Da color a la celda o línea elegida. | ||||||||||
bordercolor | Define el color del borde.
|
Así,
<td colspan="2">
Fusionara la celda en cuestión con su vecina derecha.
<td colspan="2">
Fusionara la celda en cuestión con su vecina derecha.
Esta celda tiene un colspan="2" | |
Celda normal | Otra celda |
Del mismo modo,
<td rowspan="2">
Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo. | Celda Normal |
Otra celda normal |
ETIQUETAS
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.
No hay comentarios:
Publicar un comentario