Introducción al Lenguaje HTML Básico
Introducción al Lenguaje HTML Básico
Formación inicial para aprender el lenguaje de marcado estándar utilizado para estructurar y organizar el contenido de una página web. Se considera el "esqueleto" o la columna
vertebral de cualquier sitio en internet
ESTRUCTURAS BASICAS
<Base href="[Link]
Especifica la dirección del Documento por defecto en Uso. Util cuando se hace referencia a otra página dentro del Documento.
ATRIBUTOS
Amarillo = #FFFF00
Azul = #0000FF
Azul Claro = #00CCFF
Blanco = #FFFFFF
Gris = #CC9999
Lila = #CC33FF
Negro = #000000
Rojo = #FF0000
Verde = #00FF00
ATRIBUTOS
SIZE="..." Fija el tamaño de las Letras, se usa un número entre 1 y 7 donde el 3 es el tamaño por omisión. Tambien permite tamaños relativos, e.j. SIZE=+2 .
COLOR="..." Especifica el color de las Letras en todo el Documento.
NAME="..." Especifica el tipo de apariencia de la Letra en todo el Documento.
<Hn>...< /Hn>
Especifica un encabezado de texto de varios tamaños, n indica los tamaños de 1 a 6, 1 es el más grande y 6 es el más pequeño.
<ISINDEX>
Muestra un diálogo de indice de busqueda. Con este comando solamente no se puede crear una pagina de busqueda, el Servidor debe ser configurado para soportarlo.
Atributos:
ACTION="..." Especifica la ubicación del puerto del programa donde se pasará los parámetros de busqueda.
PROMPT="..." Especifica un mensaje alterno para el diálogo.
Formato General:
<ADDRESS>.....< /ADDRESS>
Encierra el archivo de firma del autor de la página. El texto se muestra en Italicas.
<B>...< /B>
Resalta en Negritas el Texto encerradot.
<BIG>...< /BIG>
Incrementa el tamaño del Texto.
<BLINK>.....< /BLINK>
Hace el texto parapadeante.
<BLOCKQUOTE>.....< /BLOCKQUOTE>
Encierra un enfasis. El margen izquierdo y derecho están indentados.
<BR>
Inserta un final de línea.
Atributos:
CLEAR="..."--Causa que el texto alrededor de la imagen se elimine. Los valores posibles son: RIGHT, LEFT, o ALL.
<CENTER>.....< /CENTER>
Centra los objetos que contiene. Este comando puede centrar cualquier cosa incluyendo imagenes, texto, tablas, formularios, etc.
<CITE>.....< /CITE>
Encierra una Cita como un titulode un libro,etc.
<CODE>.....< /CODE>
Encierra Codigo de ejemplo. El texto se muestra en letras pequeñas.
<COMMENT>.....< /COMMENT>
Define un comentario. Todo el texto es ignorado aun si incluye codigo HTML.
<DFN>.....< /DFN>
Encierra una definición. El texto dentro de este comando se formatea como una definición.
Atributos:
ALIGN="..."--Fija el alineaminto. Por ejemplo: "center", "right", o "left".
<EM>...< /EM>
El texto se muestra en cursivas (Itálicas).
Atributos:
SIZE="..."--Fija el tamaño de las letras desde valores entre 1 y 7 donde 3 es el valor por omisión. Se puede especificar valores relativos, ejemplo. SIZE=+3 .
COLOR="..."--Especifica el color de las letras.
FACE="..."--Especifica el tipo de letra. Se puede definir una lista separada por comas. Por ejemplo: Arial, Verdana, etc.
Atributos:
SIZE="..."--Especifica el grosor de la línea.
COLOR="..."--Especifica el color de la línea.(IE)
WIDTH="..."--Especifica la longitud de la línea como porcentaje de la página, ejemplo. WIDTH=70% .
ALIGN="..."--Especifica el alineamiento: RIGHT, LEFT, o CENTER.
NOSHADE--Muestra la línea como sólido.
<I>...< /I>
Presenta el texto encerrado como Itálicas.
<KBD>...< /KBD>
Especifica el texto a ser entrado por teclado. El texto se muestra en negritas y de tamaño fijo.
<LISTING>.....< /LISTING>
Muestra texto en tamaño fijo. Obsoleto -- se usa el comando PRE.
<MULTICOL>.....< /MULTICOL>
Muestra un texto en columnas.
Atributos:
COLS="..."--Especifica el numero de columnas.
GUTTER="..."--Especifica el numero de pixels entre columnas.
WIDTH="..."-- Especifica el ancho de las columnas.
<NOBR>.....< /NOBR>
El texto que lo contiene no se trunca en la pantalla.
Atributos:
ALIGN="..."--Especifica el alineamiento del parrafo. Por ejemplo:"center", "left", o "right".
<PLAINTEXT>.....< /PLAINTEXT>
Muestra el texto sin formato aun cuando contenga comandos de HTML. Obsoleto -- Se usa el comando PRE.
<PRE>.....< /PRE>
Muestra texto sin formato, sin eliminar espacios y saltos.
<S>.....< /S>
Muestra el texto con una línea por el centro (tachado). Es diferente al comando <STRIKE>.
<SAMP>...< /SAMP>
Indica un ejemplo de salida para un formulario o programa. El texto se muestra en tamaño pequeño.
<SMALL>...< /SMALL>
Muestra el texto en tamaño pequeño.
Atributos:
ALIGN="..."--Cuando el tipo es de Bloque (BLOCK) especifica el alineamiento del texto alrededor.
Valores:
RIGHT o LEFT--Alinea el bloque de espacios en el lado especificado, y el texto se trunca alrededor del bloque.
TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, y ABSBOTTOM--Especifica el alineaminto vertical del bloque con cualquier elemento el la misma línea.
HEIGHT="..."--Cuando el tipo es BLOCK, especifica la altura del bloque.
SIZE="..."--Cuando el tipo es HORIZONTAL, o VERTICAL, especifica el tamaño del espacio.
TYPE="..."--Especifica el tipo de espacio.
Valores:
<STRONG>...< /STRONG>
Muestra el texto en negritas, resaltado.
<SUB>...< /SUB>
Muestra el texto encerrado como un subindice.
<SUP>...< /SUP>
Muestra el texto encerrado como superindice.
<TT>...< /TT>
Muestra el texto en formato teletipo.
<U>...< /U>
Muestra el texto subrayado. No use este comando puede confundir con una dirección o Link.
<VAR>...< /VAR>
Especifica una variable. Eltexto se muestra en letras pequeñas y de tamaño fijo.
<WBR>
Hace que el texto que contiene, se trunque si es necesario.
<XMP>...< /XMP>
Hace que el texto encerrado se muestre sin procesar los coamdos HTML que contenga. Obsoleto -- Se usa el comando PRE.
Multimedia:
Atributos:
SRC="..." Especifica la ubicación de la Imagen.
DYNSRC="..." Especifica la ubicación de un video o un mundo VRML. Se puede soportar una imagen usando el SRC de primero para aquellos Browser que no soportan Videos. (IE)
CONTROLS Activa una serie de controles de Video. (IE)
LOOP="n" Para videos, especifica en número de repetición del video. Un valor de "-1" o "INFINITE" repite el video indefinidamente. (IE)
START="..." Especifica el momento inicial de reproducción del video. Se puede usar "FILEOPEN" por omisión, "MOUSEOVER", o ambos. (IE)
USEMAP="#map1" Dice al Browser que use la imagen como una interface de selección definida con el nombre de "map1".
ISMAP Dice al Browser que la imagen es un mapa de Selección.
ALT="..." Especifica un texto que se muestra en los Browser que no soportan imagenes.
BORDER="..." Especifica el ancho del borde alrededor de la imagen. Si BORDER es "0", No presenta bordes en la imagen.
LOWSRC="..."--Especifica la Direeción de la imagen que se cargará primero antes de que la imagen sea cargada. LOWSRC usualmente se refiere a una imagen pequeña.
ALIGN="..."--especifica el alineamiento de la imagen.
Valores:
RIGHT o LEFT--Alinea a un lado especifico de la página, y todo el texto se justifica al lado de la imagen.
TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, y ABSBOTTOM--Especifica el alineamiento vertical de la imagen.
VSPACE="..."--Especifica el espacio entre el borde de la imagen y los items encima o debajo de ella.
HSPACE="..."--Especifica el espacio entre el borde de la imagen y los items a la derecha e izquierda.
WIDTH="..."--Especifica el ancho de la imagen. Si el tamaño no coincide con el original se ajusta.
HEIGHT="..."--Igual al anterior pero con la altura.
Atributos:
NAME="..."--Especifica el nombre del mapa para ser usado después.
Atributos:
SHAPE="..."--Especifica la Silueta del area de selección. Los valores posibles son RECT, RECTANGLE, CIRC, CIRCLE, POLY, o POLYGON.
COORDS="..."--Especifica la coordenada de la silueta. Dos pares de coordenadas indican un rectangulo, tres o mas pares definen un poligono, y un par de coordenadas y un radio
define un Circulo.
HREF="..."--Especifica la dirección donde apunta el area del mapa.
NOHREF--Indica que esta silueta no apunta a una dirección.
TARGET="..."--Especifica la ventana donde se mostrará la página. El target puede ser el nombre de un Frame o alguno de los siguientes valores:
Atributos:
NAME="..."--Especifica el nombre del mapa para ser usado después.
Atributos:
SHAPE="..."--Especifica la Silueta del area de selección. Los valores posibles son RECT, RECTANGLE, CIRC, CIRCLE, POLY, o POLYGON.
COORDS="..."--Especifica la coordenada de la silueta. Dos pares de coordenadas indican un rectangulo, tres o mas pares definen un poligono, y un par de coordenadas y un radio
define un Circulo.
HREF="..."--Especifica la dirección donde apunta el area del mapa.
NOHREF--Indica que esta silueta no apunta a una dirección.
TARGET="..."--Especifica la ventana donde se mostrará la página. El target puede ser el nombre de un Frame o alguno de los siguientes valores:
Atributos:
SRC="..."-- indica el archivo de musica.
LOOP="n"-- Indica el numero de veces que se repite. Un valor de "-1" o "INFINITE" indica una reproducción sin interrupción.
Atributos:
ALIGN="..."-- Especifica el alineaminto del texto. Loa valores posibles son "TOP", "MIDDLE", o "BOTTOM".
BEHAVIOR="..."--Indica la forma de presentación "SCROLL" (omisión), "SLIDE", o "ALTERNATE". "SLIDE" hace que el texto se desplaze afuera y adentro , "ALTERNATE" muestra el
texto adelante y atras repetidamente.
BGCOLOR="..."-- Fija el color de fondo.
DIRECTION="..."--Indica la Dirección "LEFT" (omisión) o "RIGHT".
HEIGHT="..."-- Fija la altura del texto en Pixels o %.
HSPACE="n"--Fija el margen en espacios a la derecha e izquierda del texto.
LOOP="n"-- Fija el numero de repeticiones. Un valor de "-1" o "INFINITE" repite indefinidamente.
SCROLLAMOUNT="n"-- Fija el Numero de pixel entre cada display.
SCROLLDELAY="n"--Indica el tiempo de espera para mostrar cada texto.
VSPACE="n"-- Fija el margen superior e inferior del texto.
WIDTH="..."-- Fija el ancho del Marquee en pixels o %.
Atributos:
ALIGN="..."-- Fija el alineamiento del applet, los parametros son "LEFT", "RIGHT", "TOP", "MIDDLE", o "BOTTOM".
ALT="..."--Muestra un mensaje cuando el brwoser no puede ejecutar el applet.
CODE="..."--Especifica el nombre del applet.
CODEBASE="..."--Especifica la dirección de inicio del applet. El directorio donde se encuentra el applet.
DOWNLOAD=n--Especifica el orden de descarga de la imagenes.
HIGHT="..."--Especifica la altura del applet en pixels o %.
HSPACE="n"--Especifica los margenes en espacios fuera del applet en pixels.
NAME="..."-- Indica el nombre de un applet (rutina), si hay mas applets en una misma página.
VSPACE="n"--Especifica el margen superio e inferior del applet.
WIDTH="..."--Fija el ancho del applet en pixel o en %.
Parametros:
Estos son los parametros especificaos de cada applet, que son pasasdos como argumentos. Se expresan como comandos así
Atributos:
AUTOSTART="..."--Especifica si iniciar la ejecución o No."TRUE" o "FALSE".
HIGHT="..."-- Especifica el tamañ en pixels o %.
LOOP="..."-- Fija el numero de repeticiones. Los valores son "TRUE" o "FALSE".
NAME="..."-- Indica el nombre del Objeto, en caso de haber otros en la página.
SRC="..."-- Indica la ubicación del archivo.
WIDTH="..."--Especifica el ancho donde se mostrará el objeto.
Atributos:
LANGUAGE="..."--Especifica el elnguaje usado en el script, como "VBScript" Visual Basic Script o "JavaScript" Java Script. b>
SRC="..."-- Indica la ubicación del archivo que contiene un script.
Se usa si ud. no quiere tener el codigo de programación en la página.
Direcciones (Links):
TITLE="..."--Especifica una leyenda que aparece cuando se ubica sobre el link, pero que aun no se ha seleccionado.
Listas (Lists:):
<LI atributo>
Este comando enumera los parrafos como una lista de palabras usando los siguientes sub-comandos: <DIR>,<MENU>, <OL>, o <UL>.
Atributos:
TYPE="..."
--Especifica el tipo de indicador de la lista. Los valores mas comunes son: DISC, CIRCLE, SQUARE, A, a, I, i, 1.
<DIR>...< /DIR>
Convierte el texto encerrado por <LI>, en una lista de directorio.
<MENU>...< /MENU>
Convierte el texto encerrado por <LI>, en una lista de menus.
Atributos:
TYPE="..."--Especifica el tipo de numeracion para el indicador. Un tipo de indicador sería: A, a, I, i, 1.
START="..."--Especifica el valor inicial de la numeración.
<UL atributo>...< /UL>
Convierte el texto encerrado por <LI>, en una lista indicada.
Atributos:
TYPE="..."--Especifica el tipo de indicador para la lista. Los valores comunes son: DISC, CIRCLE, SQUARE.
<DL>...< /DL>
Crea una lista definida. Donde, <DT> especifica un termino de la lista y <DD> especifica el contenido del termino.
Atributos:
BORDER="..."--Indica el ancho (en pixels) del borde alrededor del frame.(Netscape)
COLS="..."--Crea el frame como columnas y fija el tamaño de cada columna. El ancho se puede expresar en %, pixels, o en tamaño relativo (*). Por ejemplo, Si usted queire 3
frames de igual tamaño en forma de columna use el atributo COL así: COLS=33%,33%,*
FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE)
FRAMESPACING="..."--Especifica la separación en pixels entre frames.
ROWS="..."--Al igual que COLS especifica frames en forma de filas.
Por ejemplo, si desea un pequeño frame arriba de la página y uno grande debajo el atributo ROWS sería: ROWS=15%,*
SCROLLING="..."--Indica si los frames llevan barra de desplazamiento.
Los valores mas comunes son "yes", "no", y "auto".
Atributos:
BORDER="..."--Especifica el ancho en pixels del borde alrededor del frame.(Netscape)
FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE)
MARGINHEIGHT="..."--Especifica los margenes superior e inferior.
MARGINWIDTH="..."--Especifica el margen izquierdo y derecho.
NAME="..."--Asigna un nombre al frame.
NORESIZE--Impide que el usuario cambie el tamaño.
SCROLLING="..."--Indica si los frames llevan barra de desplazamiento. Los valores mas comunes son "yes", "no", y "auto".
SRC="..."--Indica el archivo que contiene el frame.
Atributos:
ALIGN="..."--Especifica la posicion del texto alrededor del frame. Los valores posibles son TOP, MIDDLE, BOTTOM, LEFT, y RIGHT.
FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE)
HEIGHT="..."--Especifica la altura del frame eventual.
MARGINHEIGHT="..."--Especifica los margenes superior e inferior.
MARGINWIDTH="..."--Especifica el margen izquierdo y derecho.
NAME="..."--Asigna un nombre al frame.
NORESIZE--Impide que el usuario cambie el tamaño.
SCROLLING="..."--Indica si los frames llevan barra de desplazamiento. Los valores mas comunes son "yes", "no", y "auto".
SRC="..."--Indica el archivo que contiene el frame.
WIDTH="..."--Especifica el ancho del frame eventual.
<NOFRAMES>...< /NOFRAMES>
Se utiliza dentro de FRAMESET, cualquier objeto dentro de este comando se ve solo en browsers que no soportan frames.
TABLAS
Atributos:
Atributos:
ALIGN="..."--Fija la posición del titulo. los valores usados son:LEFT, RIGHT, BOTTOM, o TOP.
Atributos:
ALIGN="..."--Indica el alineamiento de los datos en la fila. Por ejemplo; LEFT, RIGHT, y CENTER.
BGCOLOR="..."--Fija un color de fondo para una fila.
BORDERCOLOR="..."--Fija el color del borde de la fila.
BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE)
BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE)
VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE.
HEIGHT="..."--Especifica el alto de la celda.
Atributos:
ALIGN="..."--Indica el alineamiento de los datos en la fila. Por ejemplo; LEFT, RIGHT, y CENTER.
BGCOLOR="..."--Fija un color de fondo para una fila.
BORDERCOLOR="..."--Fija el color del borde de la fila.
BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE)
BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE)
VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE.
HEIGHT="..."--Especifica el alto de la celda.
NOWRAP--Previene el truncamineto del texto en la celda.
ROWSPAN="..."--Especifica el numero de filas a unir.
COLSPAN="..."--Especifica el numero de Columnas a unir.
WIDTH="..."--Especifica el ancho de la celda.
Atributos:
BACKGROUND="..."--Usa una imagen para el fondo de la celda.(IE)
BGCOLOR="..."--Fija el color de fondo de la celda.
BORDERCOLOR="..."--Fija el color del borde.
BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE)
BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE)
WIDTH="..."--Especifica el ancho de la tabla en la página.
HEIGHT="..."--Especifica el alto de la celda.
NOWRAP--Previene el truncamineto del texto en la celda.
ROWSPAN="..."--Especifica el numero de filas a unir.
COLSPAN="..."--Especifica el numero de Columnas a unir.
WIDTH="..."--Especifica el ancho de la celda.
VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE.
ALIGN="..."--Especifica el alineamiento horizontal de la celda. Los parametros son; LEFT, RIGHT, and CENTER.
Atributos:
ALIGN="..."--Especifica la posición del texto dentro de la columna. Los parámetros son; CENTER, LEFT, RIGHT, BOTTOM, o TOP.
SPAN="..."--Indica las colunas donde se aplica.
Atributos:
ALIGN="..."--Especifica la posición del texto dentro de la columna. Los parámetros son; CENTER, LEFT, RIGHT, BOTTOM, o TOP.
SPAN="..."--Indica las colunas donde se aplica.
<TBODY>...< /TBODY>(IE)
Encierra el cuerpo de la tabla. Este comando es opcional si se usan los comandos THEAD o TFOOT. Util para separar las filas de la tabla de el encabezado y el pie de tabla.
<TFOOT>...< /TFOOT>(IE)
Encierra las filas que van a ser usadas como pie de tabla. Se usa despues del comando TBODY.
<THEAD>...< /THEAD>(IE)
Encierra las filas que serán usadas como encabezado. Se usa antes del comando TBODY.
Formularios (Forms):
<FORM atributo1="..." atributo2="...">.....< /FORM>
Especifica un formulario (Form). Estos se usan para enviar información a un servidor.
Atributos:
ACTION="..."--Especifica la dirección de la acción de salida del Form. Usualmente es la dirección de un archivo CGI. También se puede especificau na dirección de correo.
METHOD="..."--Indica el metodo usado para enviar la información. Los valores posibles son: POST o GET. Cuando se usa GET, el servido adjunta los argumentos al final de la
dirección fijada en ACTION. Cuando se usa POST, La información es enviada como un formato HTTP.
TARGET="..."--Especifica la ventana donde se mostrará la información. El target puede ser un frame previamente definido o uno de los valores siguientes:
Valores:
Atributos:
ALIGN="..."--Si el tipo es una imagen, especifica el alineamiento del texto alrrededor de la imagen. Por ejemplo: TOP, MIDDLE, BOTTOM, LEFT, o RIGHT.
CHECKED--Usar este atributo en una caja de tipo RADIO o CHECKBOX, y será preselecionado cuando se cargue el formulario.
MAXLENGTH="..."--Especifica el máximo número de caracteres en la caja de entrada.
NAME="..."--Especifica el nombre del contro o la caja de entrada. (Parte de la información)
SIZE="..."--Especifica el tamaño del texto que se muestra en la caja de entrada.
SRC="..."--si es una imagen, especifica la ubicación de la imagen.
VALUE="..."--Especifica el valor que se enviará con el nombre correspondiente de la información. Especifica el texto por omisión (TEXT). Para RESET y SUBMIT, especifica el texto
que se mostrará en el boton tipo 3D.
TYPE="..."--Especifica el tipo de control.
Valores:
CHECKBOX--Crea una caja de chequeo (checkbox). Si el usuario la selecciona, Se envía la información correspondiente al servidor.
HIDDEN--No se muestra nada, pero la información es enviada de todas maneras.
PASSWORD--Crea una linea de entrada tipo texto, la información aparece representada por * (No se permite visualizar).
RADIO--Crea una lista de Botones de selección (radio) de los caules solo uno se puede selccionar. Las alternativas pueden tener el mismo nombre, pero pueden tener valores
diferentes.
RESET--Crea un boton 3D que borra el contenido del formulario. Se puede asignar un nombre diferente a RESET con el atributo VALUE.
SUBMIT--Crea un botón 3D que envía el formulario.
IMAGE--Al igual que el tipo SUBMIT, puede enviar un formulario inmediatamente cuando el usuario seleccione la imagen. Junto con la información normal, cuando se envía
seleccionando la imagen, las coordenadas del punto de selección (en pixels desde el punto superior izquierdo) se envían tambien. La coordenada X se envía como ".x" junto a la
coordenada Y ".y" al lado del nombre.
TEXT--Crea una caja de entrada. Se puede especificar el tamaño con el atributo SIZE.
Atributos:
COLS="..."--Especifica la longitud del texto.
ROWS="..."--Especifica el numero de líneas.
NAME="..."--Especifica un nombre a la caja de entrada.
WRAP="..."--Especifica si el texto se truncará. Los valores posibles son "HARD", "SOFT", o "NONE".