Separata HTML

Lenguaje HTML
IDAT
Por Luis Arias Hidalgo
Lenguaje HTML
HTML (HyperText Markup Language) es un lenguaje de programacin que se utiliza para la creacin de pginas en la WWW. Por pgina entenderemos el documento que aparece en el visualizador. En resumen las paginas web son hechas en HTML y el navegador,visualizador,cliente o el web browser como se le quiera llamar lo interpreta, compila y ejecuta mostrando como resultado el contenido de la pagina. Para hacer una pagina web solo se necesita un editor de texto desde el block de notas hasta programas hechos exclusivamente para editar paginas web(Frontpage, Visual Interdev,Dreamweaver, etc). El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> El documento en s est dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla principal, principalmente el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones). Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.) Por tanto, la estructura queda de esta manera: <HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY> [Aqu van las etiquetas que visualizan la pgina] </BODY>
</HTML>
Ahora que sabemos lo primordial de HTML podemos comenzar a conocer los Tags(elementos o etiquetas) mas usados. Puesta en forma de los caracteres <B>...</B> Texto en negrita 1
Lenguaje HTML
<BIG>...</BIG> <BLINK>...</BLINK> <EM>...</EM> <FONT color="#XXXXXX">...</FONT > <FONT size=X>...</FONT> <I>...</I> <NOBR>...</NOBR> <PRE>...</PRE> <SMALL>...</SMALL> <STRONG>...</STRONG> <SUB>...</SUB> <SUP>...</SUP> <U>...</U> Puesta en forma del texto  <BR> <BLOCKQUOTE>...</BLOCK QUOTE> <CENTER>...</CENTER> <DIV align=center> ...</DIV> <DIV align=left> ...</DIV> <DIV align=right> ...</DIV> <Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx> <P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P> Listas y rayas <UL> <LI> </UL> <OL> <LI>
IDAT
Ampliacin del tamao de los caracteres Texto parpadeante (Netscape solo) Texto en itlico Texto en color donde XXXXXX es un valor hexadecimal Tamao de los caracteres donde X es un valor de 1 a 7 Texto en itlico(Cursiva) Impide las rupturas automticas de l nea de los browser Texto preformateado, o sea con una visualizacin de todos los espacios y saltos de l nea Reduccin del tamao de los caracteres Puesta en negrita del texto Texto en indicio Texto en exponente Texto subrayado Comentarios ignorado por el navegador Salto de lnea Citacin (introduce un retracto de texto) Centra cada elemento comprendido en la etiqueta Centra el elemento encuadrado por la etiqueta Alinea el elemento a la izquierda Alinea el elemento a la derecha Ttulo o x tiene un valor de 1 6 Ttulo centrado Ttulo alineado a la izquierda Titulo alineado a la derecha Nuevo prrafo Prrafo centrado Prrafo alineado a la izquierda Prrafo alineado a la derecha Lista no numerada Elemento de lista Lista numerada Elemento de lista
Lenguaje HTML
</OL> <DL> <DT>...</DT> <DD>...</DD> </DL> <HR> <HR width="x%"> <HR width=x> <HR size=x> <HR align=center> <HR align=left> <HR align=right> <HR noshade> Enlaces <A href="http://...">...</A> <A href="mailto:...">...</A> <A href="fichier.htm">...</A> <A name="xyz">...</A> <A href="xyz">...</A> <A href="fichier#xyz">...</A> Imgenes <IMG src="xyz.gif"> <IMG src="xyz.pjg> <IMG ... width=x height=y> < IMG ... border=x> <IMG ... alt="votre texte"> <IMG <IMG <IMG <IMG <IMG <IMG <IMG ... ... ... ... ... ... ... align=bottom> align=middle> align=top> align=left> align=right> hspace=x> vspace=y>
IDAT
Lista de glosario Termino de glosario (sin retracto) Explicacin del termino (con retracto) Lnea de separacin Raya horizontal Anchura de la raya en % Anchura de la raya en pixeles Altura de la raya en pixeles Raya centrada Raya alineada a la izquierda Raya alineada a la derecha Raya sin efecto de sombreado Enlace hacia una pgina Web Enlace hacia una direccin Email Enlace hacia la pgina fichero.htm situada en el mismo directorio Definicin de una ancla(Marcador) Enlace hacia una ancla(Marcador) Insercin de una imagen al formato Gif o Jpg (ver enlaces para la direccin) Puesta a la escala de la imagen en pixeles Definicin del borde de una imagen con un enlace Texto alternativo cuando la imagen no esta mostrada Alinea la imagen abajo Alinea la imagen en el medio Alinea la imagen arriba Alinea la imagen a la izquierda Alinea la imagen a la derecha Espaciamiento horizontal entre la imagen y el texto Espaciamiento vertical entre la imagen y el texto Definicin de una tabla Anchura de la tabla en % Anchura de la tabla en pixeles Anchura del borde Espacio entre el borde y el texto Espesor de la raya entre las celdas Lnea de la tabla
Tablas <TABLE>...</TABLE> <TABLE width="x%"> < TABLE width=x> <TABLE border=x> <TABLE cellpadding=x> <TABLE cellspacing=x> <TR>...</TR>
Lenguaje HTML
<TD>...</TD> <TD bgcolor="#XXXXXX"> <TD width="x%"> <TD width=x> <TD align=center> <TD align=left> <TD align=right> <TD valign=top> <TD valign=middle> <TD valign=bottom> <TD colspan=x> <TD rowspan=x> Frames <FRAMESET>...</FRAMESET > <FRAMESET rows="x%,y %,..."> <FRAMESET cols="x%,y %,..."> <FRAME src="fichier.htm"> <NOFRAMES>...</NOFRAME S> Fichero Html <HTML>...</HTML> <HEAD>...</HEAD> <TITLE>...</TITLE> <BODY>...</BODY> <BODY bgcolor="#XXXXXX"> <BODY background="xyz.gif"> Tabla de Colores Color Rojo Azul Cod. Color FF0000 00FF00
IDAT
Celda de la tabla Color de una celda de la tabla Anchura de columna en % Anchura de columna en pixeles Texto centrado en la celda Texto alineado a la izquierda en la celda Texto alineado a la derecha en la celda Alineacin hacia arriba del contenido de la celda Centrado vertical del contenido de una celda Alineacin hacia el bajo del contenido de la celda Numero de celdas para fusionar horizontalmente Numero de celdas para fusionar verticalmente Define una estructura de frames (reemplaza la etiqueta BODY) Divisin horizontal de la ventana en % Divisin vertical de la ventana en % Fichero mostrado en una ventana de frames Contenido para los browser no previstos para los frames Principio y fin del fichero Html Zona de encabezamiento de un fichero Html Titulo visualizado por el browser (elemento de HEAD) Principio y fin del cuerpo del fichero Html Color del fondo (en hexadecimal) Imagen del fondo Verde 0000FF Amarillo FFFF00 Magenta FF00FF Negro 000000 Blanco FFFFFF
Lenguaje HTML
IDAT
Tabla de Codigo de los caracteres en HTML.- Algunos navegadores no aceptan

ciertos caracteres para lo cual el lenguaje HTML da su equivalente en ALIAS Por ejemplo si queremos escribir la palabra Seor tendramos que poner en el editor Señor.
Alias á é í ó ú ñ Ñ ¡ ¿ < > & "
Carcter obtenido < > &
Formularios en HTML.- El formulario no es ms que una pgina escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opcin desde botones fijos o de todas ellas combinadas. Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesar y devolver una respuesta. Pueden utilizarse tambin para enviar su contenido a una direccin de correo electrnico, o que simplemente abran otra pgina. Un formulario se crea con el tag <FORM> generalmente se pone abajo del body y se cierra antes de cerrar el body</FORM> Se puede tener varios formularios en una misma pagina. Algunas de las propiedades del FORM son las siguientes: NAME nombre que se le asigna al formulario. No es obligatorio, pero si el formulario va a ser utilizado en pginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitar un nombre, ya que el formulario ser considerado como un objeto. METHOD se refiere al mtodo que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programacin basadas en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta ms longitud es POST, y ser el que utilicemos en casi todos los ejemplos. ACTION se refiere a la accin que queremos que ejecute el formulario en un servidor http o en local. Ejemplo: <FORM NAME=FORM1 METHOD=POST ACTINO=PAGINA2.ASP> El formulario se llama FORM1 y la accin que hara sera llamar a la PAGINA2.ASP con el metodo POST. 5
Lenguaje HTML
IDAT
Controles de los formularios:

El elemento INPUT INPUT sin ningn atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una lnea de ancho: Se escribe: <FORM> <INPUT> </FORM> <INPUT> admite varios atributos: SIZE define la longitud de la ventana de texto. MAXLENGTH define la mxima longitud de la cadena que se puede escribir dentro de la ventana. NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes: <FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM> Como puedes comprobar, slo se pueden escribir 10 caracteres dentro de la ventana, que tambin es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor. VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vaca como hace por defecto:
HOLA
Se escribe: <FORM> <INPUT VALUE="HOLA"> </FORM> TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse. TYPE=PASSWORD para que el valor predeterminado de la ventana est en formato oculto: Se escribe: <FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM> TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estn en formato oculto: Se escribe: <FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM> Esta opcin se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana. TYPE=SUBMIT para generar un botn que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.
Procesar
Se escribe: <FORM METHOD="POST" ACTION="PAGINA2.ASP"> <INPUT NAME="campo1">
Lenguaje HTML
IDAT
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM> VALUE puede acompaar a SUBMIT , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Submit". Existe otro tipo llamado TYPE=BUTTON que genera un botn igual al generado por el tipo submit, pero que no realiza ninguna accin; es simplemente un botn "muerto" en cuanto a acciones directas. Suele utilizarse para asociarle instrucciones en JavaScript mediante el evento onClick. Se escribe: <INPUT NAME="campo1"> <INPUT TYPE="BUTTON" VALUE="No hace nada"> TYPE=RESET para generar un botn que al ser pulsado inicializa todos los componentes del formulario.
Inicializar
Se escribe: <INPUT NAME="campo1"> <INPUT TYPE="RESET" VALUE="Inicializar"> VALUE puede acompaar a RESET , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Reset". TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratn. Lo que el formulario enva al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parmetros .x=n .y=n donde n son los nmeros de las coordenas x y del punto en el que estaba el ratn en el momento del envo. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sera un ejemplo de respuesta: imagen.x=99&imagen.y=15 Prueba a pulsar en cualquier parte de esta imagen:
Se escribe: <INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif"> Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen. TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opcin
Procesar Inicializar
Clase A
Clase B
Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A
Lenguaje HTML
IDAT
<INPUT TYPE="RADIO" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"> En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor: ... VALUE="B" CHECKED></form> TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opcin Clase A Clase B Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"> En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor: ... VALUE="B" CHECKED></form> El elemento SELECT SELECT sin ningn atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho: Se escribe: <FORM> <SELECT> </SELECT> </FORM> Como evidentemente esto no es muy prctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que ste es un campo ms del formulario, la diferencia es que no hay que escribir en l sino escoger un valor de los que nos muestre al desplegarlo, se usar el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION.
Procesar Inicializar Procesar Inicializar
Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1"> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 </SELECT> Se deben tener en cuenta varias cosas respecto a SELECT:
Lenguaje HTML
IDAT
La longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. La ventana de seleccin, por defecto, muestra una lnea, si se quieren mostrar ms se utilizar el atributo SIZE. Se debe procurar que los contenidos de los campos sean lo ms cortos posibles; una excesiva longitud implica mayor trfico por la red, pero se deben construir las listas de forma clara, y que resulten de fcil lectura al usuario, lo que puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parmetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista:
Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" SIZE=3> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION VALUE="Valor 5">Este es el Valor 5 <OPTION>Valor 6 <OPTION>Valor 7 </SELECT> Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se enva al servidor es "Valor 5". Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviar el primer valor de la lista. Se puede hacer que haya un valor preseleccionado aadiendo el parmetro SELECTED al atributo OPTION, y si se quiere permitir ms de una seleccin, se pondr el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows.
Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" MULTIPLE SIZE=3> <OPTION>Valor 1 <OPTION SELECTED>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION>Valor 5 <OPTION>Valor 6 <OPTION>Valor 7
Lenguaje HTML
</SELECT>
IDAT
El elemento TEXTAREA Este elemento, como su nombre indica, permite definir un rea de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (lneas) y COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deber ir acompaado de los componentes necesarios para enviar e inicializar.
Procesar
Inicializar
Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA> Aunque no es habitual, dentro de un rea de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribir el texto entre <TEXTAREA> y </TEXTAREA>. As: <>TEXTAREA NAME="texto1" ROWS=5 COLS=40> Contenido del area de texto </TEXTAREA>
10

Separata HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Separata HTML

Cargado por

Copyright:

Formatos disponibles

Lenguaje HTML

Tabla de Codigo de los caracteres en HTML.- Algunos navegadores no aceptan

Carcter obtenido < > &

Controles de los formularios:

Se escribe: <FORM METHOD="POST" ACTION="PAGINA2.ASP"> <INPUT NAME="campo1">

Se escribe: <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A

También podría gustarte