HTML

HTML
M. en E. Norma Fernández Osorio

¿Qué es HTML?
El HTML (Hyper Text Markup Language) es un

sistema para estructurar documentos.
Básicamente, HTML consta de una serie de

órdenes, que indican al visor que se esté
utilizando, la forma de representar los elementos
(texto, gráficos, etc...) que contenga el documento.
Las órdenes de HTML pueden ser de dos tipos,
cerradas o abiertas.
Las órdenes cerradas son aquellas que tienen una

palabra clave que indica el principio de la orden y
otra que indica el final.
Entre la orden inicial y la final se pueden encontrar

otras ordenes.
Las órdenes abiertas constan de una sola palabra
clave.
Para diferenciar las órdenes del resto del texto del

documento se encierran entre los símbolos
<y>
Las órdenes cerradas incluyen el carácter / antes de
la palabra clave para indicar el final.
Una orden puede contener "parámetros". Estos

parámetros se indican a continuación de la palabra
clave de la orden.
Ejemplos:
Orden cerrada
<CENTER> Una página ejemplo </CENTER>
Orden abierta
<HR>
Orden con parámetros

<BODY bgcolor="#FF00FF"> </BODY>
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
Etiquetas de apertura
Todo documento HTML debe estar incluido dentro de

las etiquetas <HTML></HTML>. Esto le indica al
navegador en que lenguaje está creado el documento.
<HTML>
CENTRO NACIONAL DE ACTUALIZACIÓN DOCENTE
</HTML>
Estructura básica
Dentro de las etiquetas <HTML></HTML>.
Existen dos partes fundamentales la cabecera del

documento que son:
<HEAD> </HEAD>
<TITLE> </TITLE>
Comentarios
Para incluir comentarios en la página Web se utiliza
la orden
.
Ejemplo:

Los comentarios no serán mostrados por el visor y
son útiles para realizar anotaciones en el
documento HTML que nos indiquen lo que estamos
haciendo en una determinada parte del documento.
<HTML>
<HEAD> 

<TITLE> TÍTULO DEL PROGRAMA</TITLE>

</HEAD>
<BODY>
Entre estas etiquetas pondremos el contenido
de nuestra página Web
</BODY>
</HTML>
Párrafos
Cuando llegamos al final de la línea de texto, éste

saltará automáticamente a la línea siguiente, pero
si queremos crear párrafos separados por una
línea en blanco utilizaremos la etiqueta <P>
<HTML>
<HEAD><TITLE> Párrafos</TITLE></HEAD>
<BODY>
<P>Esto es un párrafo dentro de una página
Web.
<P> Esto es otro párrafo que está separado del

anterior por una línea en blanco.
</BODY>
</HTML>
Encabezados
También podemos crear diferentes tamaños de

encabezados (también llamados cabeceras) para
el texto por ejemplo para señalar los distintos
encabezados tenemos los siguiente:
<HTML>
<HEAD><TITLE> Encabezados</TITLE></HEAD>
<BODY>
<H1>Encabezado 1</H1>
</BODY>
</HTML>
Centrado
Para centrar los elementos del documento

HTML utilizamos las etiquetas
<center> </center>
<HTML>
<HEAD><TITLE>Centrado</TITLE></HEAD>
<BODY>
<CENTER>CNAD</CENTER>
</BODY>
</HTML>
Etiquetas anidadas
Son aquellas órdenes que se encuentran

dentro de una orden general.
<HTML>
<HEAD>
<TITLE>ETIQUETAS ANIDADAS</TITLE>
</HEAD>
<BODY>
ETIQUETAS ANIDADAS
<CENTER><H1>CNAD</H1></CENTER>
<CENTER><H2>MECATRÓNICA</H2></CENTER>
<CENTER><H3>CURSO HTML</H3></CENTER>
<HR>
</BODY>
</HTML>
Salto de línea
Para conseguir que las líneas nos sean continuas,

utilizaremos la etiqueta
<BR>
<HTML>
<HEAD><TITLE>SALTO DE LÍNEA</TITLE></HEAD>
<BODY>
SALTOS DE LÍNEA
<BR>
<HR>
<CENTER><H1>CNAD</H1></CENTER>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<HR>
</BODY>
</HTML>
Negritas y cursivas
Para aplicar el formato de texto en negritas y

cursivas, se utilizaran las siguientes etiquetas:
<B> TEXTO EN NEGRITAS </B>

<I> TEXTO EN CURSIVAS </I>
<HTML>
<HEAD>
<TITLE>NEGRITAS Y CURSIVAS</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
<BR>
<BR>
<BR>
<BR>
<HR>
</BODY>
</HTML>
Tipo de fuente
<FONT></FONT>
Esta etiqueta admite varios atributos: tamaño de
fuente, tipo de fuente añadiremos a esta etiqueta el
atributo size=“Número del tamaño de la letra”.
Los tamaños de letras van, de menor a mayor, del 1 al

7. Si dentro del cuerpo del documento escribimos lo
siguiente:
<P><FONT SIZE=”5”>Tamaño 5</FONT>
El tamaño por defecto es el 3 y podemos cambiar
el texto con respecto a este tamaño base
utilizando -1 para un tamaño algo menor, +1 para
un tamaño algo mayor que el 3 y +2 para un
tamaño aún mayor.
<P><FONT>el tamaño base </FONT>

<P><FONT SIZE=”-1”>menor</FONT>
<P><FONT SIZE=”+1”>mayor</FONT>
<P><FONT SIZE=”+2”>Tgrande 5</FONT>
<HTML>
<HEAD><TITLE>TAMAÑO DE FUENTE</TITLE></HEAD>
<BODY>
TAMAÑO DE FUENTE
<P><FONT SIZE="48">
<HR>
<CENTER>Mecatrónica</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una máquina
de escribir,
para ello utilizamos las etiquetas
el texto aparecerá con el tipo de letra de las máquinas de escribir antiguas
(tipo Courier)
respetará los espacios en blanco y los saltos de línea sin necesidad de
incluir
ninguna etiqueta más.
</FONT>
</BODY>
</HTML>
Viñetas
Para poner una lista con viñetas se utilizarán las

siguientes etiquetas:
<UL>
<LI>
<LI>
<LI>
</UL>
<HTML>
<HEAD><TITLE>LISTA CON VIÑETAS></TITLE></HEAD>
<BODY>
<HR>
LISTA CON VIÑETAS
<HR>
<BR>
<BR>
<UL>
<LI>CAPITULO 1
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>
</BODY>
</HTML>
Viñetas con números romanos
Con la etiqueta
<UL TYPE="I">
Se podrá poner una lista con números romanos.
<HTML>
<HEAD><TITLE>VIÑETAS DE NÚMEROS ROMANOS</TITLE></HEAD>
<BODY>
LISTAS CON VIÑETAS DE NÚMEROS ROMANOS
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
<HR>
<UL>
<LI>CAPITULO 1
<UL TYPE="I">
<LI>INICIO
<LI>TRAMA
<LI>DESENLACE
</UL>
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>
</BODY>
</HTML>
Atributo face
Define el tipo de letra.
<font face="Comic Sans MS,arial,verdana">Este

texto tiene otra tipografía</font>
<HTML>
<HEAD><TITLE>ATRIBUTO FACE</TITLE></HEAD>
<BODY>
<font face="Comic Sans MS">Este texto tiene otra

tipografía</font>
<HR>
<HR>
<HR>
Podemos crear un texto que aparezca muy

colorido con las siguientes etiquetas
</BODY>
</HTML>
Colores de fondo
Si se desea cambiar el color de fondo se utilizará
la etiqueta del atributo
<BGCOLOR=”#RRVVAA”>
dentro de la etiqueta <BODY>.

<HTML>
<HEAD><TITLE>Colores de fondo</TITLE></HEAD>
<BODY BGCOLOR="#00FF00">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una
máquina de escribir,
para ello utilizamos las etiquetas
el texto aparecerá con el tipo de letra de las máquinas de escribir
antiguas
(tipo Courier)
respetará los espacios en blanco y los saltos de línea sin necesidad
de incluir
ninguna etiqueta más.
</FONT>
</BODY>
</HTML>
Etiquetas
<BODY TEXT="#RRVVAA"> Color del texto

<BODY LINK="#RRVVAA"> Color de los enlaces
<BODY VLINK="#RRVVAA"> Color de los enlaces una vez visitados
<BODY ALINK="#RRVVAA"> Color de los enlaces activos

(el que se ve al hacer clic sobre él)
<HTML>
<HEAD>
<TITLE>COLORES DE TEXTO</TITLE>
</HEAD>
<BODY TEXT="#B1EB21">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<HR>
<HR>
Podemos crear un texto que aparezca muy
colorido con las siguientes etiquetas
</FONT>
</BODY>
</HTML>
Hipervínculos
Una de las características fundamentales de las

páginas web es la posibilidad de enlazar distintos
documentos
La sintaxis para crear un enlace es:
<A HREF=”yahoo.com.mx”>Enlace</A>
Distintos enlaces
Podemos distinguir 4 tipos de enlaces que son:
• Enlaces dentro de la misma página

• Enlace con otra página de forma local
• Enlace con una página ya publicada en Internet
• Enlaces con una dirección de correo
electrónico
Tablas
Las tablas son fundamentales para organizar las
páginas web. No solo sirven para ordenar datos,
sino que también nos permiten dividir la página
La etiqueta que define la tabla completa es

<TABLE></TABLE>
Y dentro las etiquetas
<TR> </TR>
Para crear una tabla, formada por 3 filas y con 3 celdas en cada fila
escribiremos lo siguiente:
<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>
<TABLE>
<TR>
<TD>CELDA 1 FILA1</TD>
</TR>
<TR>
</TR>
<TR>
<TD>CELDA1 FILA3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tabla con bordes
Para agregar los bordes de una página
utilizaremos la siguiente etiqueta:
<TABLE BORDER="2">
<HTML>
<HEAD> <TITLE> TABLAS CON BORDES</TITLE></HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Color de borde
También podemos determinar un color para el borde de
la tabla, bastará con añadir a la etiqueta table el atributo
bordercolor=”#rrvvaa”, la misma tabla de antes con el
borde de color negro tendría este código
<TABLE BORDER="5" BORDERCOLOR=“#RRVVAA”>

<HTML>
<HEAD> <TITLE> COLOR DEL BORDE</TITLE></HEAD>
<BODY>
<TABLE BORDER="5" BORDERCOLOR=“#RRVVAA”>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Separación entre celdas
Si queremos que exista un espacio entre cada una
de las celdas, añadiremos el atributo
CELLSPACING=”No. De pixeles de la separación”
a la etiqueta TABLE.
<HTML>
<HEAD> <TITLE> SEPARACIÓN ENTRE CELDAS</TITLE></HEAD>
<BODY>
<TABLE BORDER="2" BORDERCOLOR=”#FFFF00”
CELLSPACING=“12">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Separación entre el contenido y el
borde de la celda
Añadimos el atributo CELLPADDING=”No. De pixeles
de separación” a la etiqueta TABLE.
<TABLE BORDER="2" BORDERCOLOR=”#FFFF00”

CELLSPACING="2" CELLPADDING="12">
<HTML>
<HEAD> <TITLE> SEPARACIÓN ENTRE EL CONTENIDO Y EL BORDE</TITLE></HEAD>
<BODY>
<TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2"
CELLPADDING="12">
<TR>
</TR>
<TR>
</TR>
<TR>
<TD >CELDA 3 FILA3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dimensiones de la tabla
Utilizando el atributo WIDTH (ancho) en la etiqueta
TABLE podemos establecer las dimensiones de la tabla
completa.
<table border="2" bordercolor=”#ffff00”

cellspacing="2" cellpadding="12" width="50%">
<HTML>
<HEAD> <TITLE> DIMENSIONES DE LA TABLA</TITLE></HEAD>
<BODY>
<TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2"
CELLPADDING="12" WIDTH="50%">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Filas desiguales
Hasta ahora hemos trabajado con tablas que

tenían filas con igual números de celdas. Pero
también existe la posibilidad de crear una tabla
que tenga filas desiguales.
<HTML>
<HEAD> <TITLE> FILAS DESIGUALES</TITLE></HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Título de la tabla arriba
<HTML>
<HEAD> <TITLE> TITULO DE LA TABLA ARRIBA</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Título de la tabla abajo
<HTML>
<HEAD> <TITLE> TITULO DE LA TABLA ABAJO</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TD>Enero</TD>
<TD>Febrero</TD>
<TD>Marzo</TD>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tablas con cabecera
Podemos crear una serie de celdas de cabecera en

la tabla. En este tipo de celdas aparecerá el texto en
negritas y centrado, para crearlas utilizamos las
etiquetas
<TH></TH>
<HTML>
<HEAD> <TITLE> TITULO DE LA TABLA ARRIBA</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR><TH>ENERO</TH><TH>FEBRERO</TH><TH>MARZO</TH></TR>
<TR><TD>JUAN</TD> <TD>HUGO</TD> <TD>JESÚS</TD> </TR>
<TR><TD>ANTONIO</TD><TD>FÉLIX</TD><TD>EFRA</TD></TR>
</TABLE>
</BODY>
</HTML>
Celdas combinadas
<HTML>
<HEAD> <TITLE> CELDAS COMBINADAS</TITLE></HEAD>
<BODY>
<TABLE BORDER=”2” BORDERCOLOR=”#000000”>
<CELLSPACING=”2” CELLSPADING=”3”>
<TR>
<TD COLSPAN=”3”> AGOSTO </TD>
</TR>
<TR>
<TD>SEMANA UNO 1 AL 5</TD>
<TD>SEMANA DOS 8 AL 12</TD>
<TD>SEMANA TRES 15 AL 19</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Combinación de celdas verticales
<HTML>
<HEAD><TITLE>COMBINACION DE CELDAS VERTICALES</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD ROWSPAN=“2”>PLANTELES DE COAHUILA</TD>
<TD>CETIS 60</TD> <TD>CBTIS 49</TD> <TD>CBTIS 64</TD>
</TR>
<TR>
<TD>CETIS 1</TD> <TD>CETIS 153</TD> <TD>CETIS 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Posición del contenido dentro de la celda
Por defecto el contenido de la celda aparece alineado a la

izquierda. Para cambiar la alineación utilizaremos el
atributo ALIGN dentro de la etiqueta TD. Este atributo
ofrece tres posibilidades:
CENTER (contenido centrado)

LEFT (contenido alineado a la izquierda)
RIGHT(contenido alineado a la derecha)
<HTML>
<HEAD> <TITLE>ALINEACION HORIZONTAL DEL CONTENIDO
DE UNA CELDA</TITLE></HEAD>
<BODY>
<TABLE BORDER=”2” BORDERCOLOR=”#000000”
CELLSPACING=”2” CELLPADDING=”3” WIDTH="50%">
<TR>
<TD ALIGN="CENTER"> A </TD>
<TD ALIGN="LEFT"> B </TD>
<TD ALIGN="RIGHT"> C </TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Alineación vertical del texto
<HTML>
<HEAD> <TITLE> ALINEACION VERTICAL DEL TEXTO DE
UNA CELDA</TITLE></HEAD>
<BODY>
<TABLE BORDER=”2” BORDERCOLOR=”#000000”

CELLSPACING=”2” CELLPADDING=”3” HEIGHT="60%">
<TR>
<TD VALIGN="TOP"> Celda 1 fila 1 </TD>
<TD VALIGN=“MIDDLE"> Celda 2 fila 1 </TD>
<TD VALIGN="BOTTOM"> Celda 3 fila 1 </TD>
<TD Celda 3 fila 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dimensiones de las celdas
Es posible establecer un ancho y alto para la tabla.
Obviamente, si hemos establecido la tabla con un ancho
en pixeles de 250, la suma de ancho de las celdas no
pueden ser mayor que el ancho total de la tabla.
En este caso es aconsejable utilizar ancho y alto en

porcentajes.
Para establecerlo utilizamos los atributos WIDTH y

HEIGHT aplicados a la etiqueta TD.
<HTML>
<HEAD> <TITLE>Dimensiones de la celdas</TITLE></HEAD>
<BODY>
<TABLE BORDER=“2” BORDERCOLOR=“0000FF”

CELLPADDING=“3” WIDTH="30%" HEIGHT=“60%”>
<TR>
<TD WIDTH=“60%"> Celda 1 fila 1 </TD>
<TD WIDTH=“20%"> Celda 2 fila 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Color de fondo de la tabla
Utilizaremos el atributo
“BGCOLOR=”#RRVVAA”
dentro de la etiqueta TABLE para establecer el

color de fondo de la tabla completa.
<HTML>
<HEAD> <TITLE> COLOR DEL FONDO DE LA
TABLA</TITLE></HEAD>
<BODY>
<TABLE BGCOLOR=”#00FFFF” BORDER="4">
<TR>
<TD> Celda 1 fila 1 </TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Color de fondo de las celdas
Para establecer un color de fondo en una celda

determinada aplicaremos el atributo
BGCOLOR=”#RRVVAA”
<HTML>
<HEAD><TITLE>Color en las celdas</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00">
<TABLE BGCOLOR=”#FFFFF0” BORDER="2">
<TR>
<TD BGCOLOR="#00FF00">Celda 1 fila 1</TD>
<TD> Celda 2 fila 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Imagen de fondo de la tabla
<HTML>
<HEAD><TITLE>IMAGEN DE FONDO EN TABLAS</TITLE></HEAD>
<TABLE BACKGROUND="IMAGENES/YARIS.jpg" WIDTH="44" HEIGHT="44"
BORDER="2" BORDERCOLOR=”#FF0000”>
<TR>
<TD WIDTH="100%">Celda 1 fila 1</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
Imagen de fondo de la celda
Si utilizamos el atributo BACKGROUND=”imagen.gif”

dentro de la etiqueta TD, solo la celda donde lo
pongamos tendrá la imagen de fondo que
determinemos.
<HTML>
<HEAD><TITLE>imagen de fondo de celda</TITLE></HEAD>
<TABLE BGCOLOR=”#FFFFF0” BORDER="2">
<TR>
<TD WIDTH="50"
BACKGROUND="IMAGENES/yaris.jpg">Celda 1 fila 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Formularios
La manera más eficaz de conseguir que los usuarios de
nuestra página se comuniquen con nosotros es a través
de un formulario.
Hay dos formas de recibir la información que introduce el

usuario: recibirla directamente en nuestra dirección de
correo o utilizar un programa que gestione los datos y
después nos los incluya en una base de datos.
Estructura general de un formulario
Etiqueta de inicio:
<FORM ACTION=”mailito: dirección@correo.com”
METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
El atributo ACTION indica al navegador que el formulario se
enviará a la dirección de correo electrónico que
determinaremos.
El atributo METHOD=”POST” indica que los datos serán

enviados por correo electrónico inmediatamente después de
que en usuario pulse el botón de envió.
El atributo ENCTYPE=”(TEXT/PLAIN” consigue que

recibamos la respuesta en formato de fichero de texto y si
codifica.
En el cuerpo del formulario: incluiremos los
distintos elementos de introducción de datos.
Botones de envió y de borrado.
La etiqueta de cierre de formulario
</FORM>
Elementos de introducción de datos
La etiqueta base para crear elementos de

introducción de datos es la siguiente:
<INPUT TYPE=“tipo del elemento” NAME=“nombre

del elemento” VALUE=”valor predeterminado”>
Si queremos crear un campo de texto en el que el
usuario debe introducir su nombre la línea de código
que tendríamos que incluir dentro de las etiquetas
<FORM></FORM> (en el cuerpo del documento
HTML) sería la siguiente:
Escriba su nombre: <INPUT TYPE=”text”

NAME=”nombre”>
<HTML>
<HEAD><TITLE>FORMULARIOS</TITLE></HEAD>
<BODY>
<FORM>
Introduzca su nombre: <INPUT TYPE="text"NAME="nombre">
<BR>
Ponga su dirección: <INPUT TYPE="text"NAME="dirección">
<BR>
Ponga su Teléfono: <INPUT TYPE="text"NAME="teléfono">
</FORM>
</BODY>
</HTML>
Campo de texto más largo
La longitud por defecto de un campo de texto de
una línea es de 20 caracteres.
Para crear un campo de texto más largo

utilizaremos el atributo size=”número”, dentro de la
etiqueta del elemento.
<HTML>
<AHEAD><TITLE>FORMULARIOS</TITLE></HEAD>
<BODY>
<FORM>
Introduzca su nombre: <INPUT
TYPE="text"NAME="nombre" SIZE="50">
<BR>
<BR>
<BR>
Ponga su dirección: <INPUT
TYPE="text"NAME="dirección" SIZE="50">
<BR>
<BR>
<BR>
Ponga su Teléfono: <INPUT
TYPE=“INT"NAME="teléfono" SIZE=“15">
</FORM>
</BODY>
</HTML>
Campo limitado para caracteres
También podemos limitar el número de caracteres
utilizando el atributo maxlenfth=número”. Si se escribe:
NOMBRE: <INPUT TYPE="text"NAME="nombre"

SIZE="20" MAXLENGTH=“40”>
El usuario sólo podrá incluir 40 caracteres en el campo

de texto y sólo 20 caracteres se verán dentro del mismo.
<HTML>
<BODY>
<FORM>
INTRODUZCA SU NOMBRE: <INPUT
TYPE="text"NAME="nombre" SIZE="20"
MAXLENGTH="30">
</FORM>
</BODY>
</HTML>
Contraseñas
También se puede crear un campo de texto
codificado, es decir que el usuario sólo vería
asteriscos al escribir el texto. Esto es muy útil para
contraseñas de usuario.
Para ello cambiamos el atributo
TYPE=“text” por TYPE=“password”:

Campo de comentarios
Si lo que queremos es que el usuario escriba sus

comentarios o que introduzca un texto largo,
utilizaremos la siguiente etiqueta:
<TEXTAREA NAME="nombre del elemento"

ROWS="número de filas" COLS="número de
columnas"></TEXTAREA>
Botón de envío
Es importante al menos crear un botón para que el

usuario envíe el formulario. La etiqueta sería la
siguiente:
<INPUT TYPE="SUBMIT" VALUE="ENVIAR">

<HTML>
<BODY>
<FORM>
TYPE="text"NAME="nombre" SIZE="20"
MAXLENGTH=”40”>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA
PÁGINA<TEXTAREA NAME="QUE LE PARECIO LA
PÁGINA" ROWS="10" COLS="30"></TEXTAREA>
<BR>
<BR>
</FORM>
</BODY>
</HTML>
Botón de borrado
Aunque no es necesario, si es habitual y recomendable
incluir además un botón de borrado de los datos por si el
usuario se ha equivocado al escribirlos.
Para ello utilizamos la etiqueta:
<INPUT TYPE="reset" VALUE="BORRAR">

<HTML>
<BODY>
<FORM>
TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=”40”>
<BR>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA
PÁGINA<TEXTAREA NAME="QUE LE PARECIO LA PÁGINA"
ROWS="10" COLS="30"></TEXTAREA>
<BR>
<BR>
<BR>
<INPUT TYPE="RESET" VALUE="BORRAR">
</FORM>
</BODY>
</HTML>

HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

M. en E. Norma Fernández Osorio

El HTML (Hyper Text Markup Language) es un

Básicamente, HTML consta de una serie de

Las órdenes cerradas son aquellas que tienen una

Entre la orden inicial y la final se pueden encontrar

Para diferenciar las órdenes del resto del texto del

Una orden puede contener "parámetros". Estos

Orden con parámetros

Todo documento HTML debe estar incluido dentro de

Dentro de las etiquetas <HTML></HTML>.

Existen dos partes fundamentales la cabecera del

<HEAD>

Cuando llegamos al final de la línea de texto, éste

<P> Esto es otro párrafo que está separado del

También podemos crear diferentes tamaños de

Para centrar los elementos del documento

Son aquellas órdenes que se encuentran

Para conseguir que las líneas nos sean continuas,

Para aplicar el formato de texto en negritas y

<B> TEXTO EN NEGRITAS </B>

Los tamaños de letras van, de menor a mayor, del 1 al

<P><FONT>el tamaño base </FONT>

Para poner una lista con viñetas se utilizarán las

Define el tipo de letra.

<font face="Comic Sans MS,arial,verdana">Este

<font face="Comic Sans MS">Este texto tiene otra

Podemos crear un texto que aparezca muy

dentro de la etiqueta <BODY>.

<BODY TEXT="#RRVVAA"> Color del texto

<BODY ALINK="#RRVVAA"> Color de los enlaces activos

Una de las características fundamentales de las

• Enlaces dentro de la misma página

La etiqueta que define la tabla completa es

<TABLE BORDER="5" BORDERCOLOR=“#RRVVAA”>

CELLSPACING=”No. De pixeles de la separación”

<TABLE BORDER="2" BORDERCOLOR=”#FFFF00”

<table border="2" bordercolor=”#ffff00”

Hasta ahora hemos trabajado con tablas que

Podemos crear una serie de celdas de cabecera en

<HEAD> <TITLE> TITULO DE LA TABLA ARRIBA</TITLE></HEAD>

<HEAD><TITLE>COMBINACION DE CELDAS VERTICALES</TITLE></HEAD>

Por defecto el contenido de la celda aparece alineado a la

CENTER (contenido centrado)

<TABLE BORDER=”2” BORDERCOLOR=”#000000”

En este caso es aconsejable utilizar ancho y alto en

Para establecerlo utilizamos los atributos WIDTH y

<HEAD> <TITLE>Dimensiones de la celdas</TITLE></HEAD>

<TABLE BORDER=“2” BORDERCOLOR=“0000FF”

dentro de la etiqueta TABLE para establecer el

Para establecer un color de fondo en una celda

Si utilizamos el atributo BACKGROUND=”imagen.gif”

Hay dos formas de recibir la información que introduce el

El atributo METHOD=”POST” indica que los datos serán

El atributo ENCTYPE=”(TEXT/PLAIN” consigue que

Botones de envió y de borrado.

La etiqueta de cierre de formulario

La etiqueta base para crear elementos de

<INPUT TYPE=“tipo del elemento” NAME=“nombre

Escriba su nombre: <INPUT TYPE=”text”

Para crear un campo de texto más largo

NOMBRE: <INPUT TYPE="text"NAME="nombre"

El usuario sólo podrá incluir 40 caracteres en el campo