Universidad Nacional del Altiplano

DISEO DE PAGINAS
CON HTML
 Qu es Internet?
Una red de redes TCP/IP
(Visin tecnolgica)
Un conjunto de servicios entretenidos
(Visin del usuario final)
Una plataforma de soluciones integrales para la
vida diaria
(Visin estratgica)
La base operacional del futuro ...
 Tiempo Real:
Nuevo Paradigma de Negocios

Las empresas mejor equipadas para

el siglo 21 considerarn a los
sistemas en tiempo real como
esenciales para mantener su ventaja
competitiva y retener a sus
clientes.ellas usarn tecnologa de
informacin y de telecomunicaciones
para responder a circunstancias
cambiantes y, an ms importante,
para responder a lo que esperan los
clientes dentro del menor lapso de
tiempo posible.
 Pregunta
Cul es nuestro negocio?
cules son nuestros clientes?
Cmo podemos generar un gran impacto sobre
nuestro negocio y nuestros clientes?
Ejemplos de Pginas Web
 Introduccin
Direcciones

Debido a la gran cantidad de usuarios conectados a la red, ha

sido necesario crear un sistema de direcciones, de modo que cada
computadora se identifique de manera nica. Esta identificacin
nica es conocida como direccin IP.

Una direccin IP se compone de cuatro nmeros entre 0 y 255,

cada uno separado por un punto. Una direccin IP sera
146.83.141.25.
 Introduccin
El organismo creado para administrar los nmeros IP se llama
InterNIC.
Dominios
las direcciones IP, pueden ser difciles de recordar. Por este
motivo, Internet emplea nombre de dominios para ocultar la
complejidad de la direccin numrica.
Ejemplo: 146.83.141.70
www.tiendalibre.pe
 Introduccin

Servidores de Nombre de Dominio(DNS), traducen los

nombres de dominio a direcciones IP para agilizar el acceso a
Internet.
 World Wide Web
Hipertexto

El hipertexto consiste en permitir al usuario navegar entre

diferentes pginas Web. Para conseguirlo simplemente se pulsa
con el mouse sobre una palabra, icono o grafico, resaltado de
manera clara, obteniendo como respuesta el cambio a una nueva
pgina.
 World Wide Web
Hipertexto

Al pulsar sobre un hiperenlace, el navegador recibe una direccin.

A continuacin, el navegador localiza el servidor que contiene el
documento, se recibe una copia del documento solicitado y se
despliega la informacin en pantalla.
 World Wide Web
Localizador Uniforme de Recursos (URL)

El URL (Uniform Resource Locator) sirve como

identificador para todos los documentos Web. Tambin se
conoce como direccin de pgina Web. Todo sitio y pgina tiene
un URL.
 World Wide Web
Dominios de Organizaciones
Dominio Usuario.
com Organizaciones comerciales.
edu Instituciones educativas.
gov Organizaciones del Gobierno.
int Organizaciones internacionales.
mil Instituciones Militares.
net entidades con categora de red.
org Organizaciones sin fines de lucro.
 CONCEPTOS
HTML (Hyper Text Markup Language)
Lenguaje con el que se escriben paginas web.
Es un lenguaje de hipertexto.
Permite escribir texto de forma estructurada.
Compuesto por etiquetas (marcan el inicio y fin de
cada elemento del documento)
Documento hipertexto contiene texto, imgenes
sonido y video (documento multimedia).
 HTML
HTML (Hypertext Markup Language)
HTML = Hypertext + MarkUp
Hypertext
Es texto ordinario al que se le incorporan funcionalidades adicionales
como:
Formato,
Imgenes,
Multimedia
Y enlaces a otros documento.
MarkUp
Es el proceso de tomar el texto ordinario e incorporarle smbolos
adicionales. Cada uno de estos smbolos identifica a un comando que le
indica al navegador como mostrar ese texto.
 HTML
Cualquiera que recuerde los antiguos
programas de procesamiento de textos
anteriores al WYSIWYG, ya estar familiarizado
con el etiquetado de texto
 Historia del HTML
En 1986 la organizacin internacional de Estndares publica el
SGML (Standard Generalized Markup Language)
En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un
subconjunto del SGML.
En 1993 se crea el HTML 2.0 (o HTML+)
En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0
El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta
Tim Berners-Lee
elementos desarrollados por Netscape. (Incorpora Tablas, Applets, Director del W3C

Texto alrededor de imgenes)

En 1997 se define el estndar HTML 4.0
En 1999 aparece el estndar actual HTML 4.01

Ms informacin en: http://www.w3.org/

 El W3C
El W3C (World Wide Web Consortiun) es un consorcio internacional
donde Organizaciones miembro, Personal Full-time y el pblico en general
trabajan para desarrollar Estndares Web.
La misin del W3C es la de maximizar el potencial de la WWW
desarrollando protocolos y guas que aseguren el crecimiento futuro de la
Web.
Algunas Organizaciones miembro del W3C
Adobe Ericsson Nokia
Apple Google, inc. Opera Software
AT&T HP Sun Microsystems
Cisco IBM Corporation Telefnica de Espaa
Citigroup Microsoft Yahoo, inc.
Deutsche Telekom Mozilla Foundation VeriSign
Y decenas de universidades de todo el mundo
 HTML CSS Javascript
Pgina Web
Prrafos Tablas
Estructura Encabezados Capas
Listas Etc. HTML
Textos
Contenido Imgenes
Enlaces
Colores Fondos
Apariencia Tipografas Tamaos CSS
Alineacin Etc.
Efectos
Comportamiento Validaciones Javascript
Automatizacin
 Elementos HTML
Los elementos son los componentes fundamentales del HTML
Cuentan con 2 propiedades bsicas:
Atributos
Contenido
En general se conforman con una Etiqueta de Apertura y otra Cierre.
Los atributos se colocan dentro la etiqueta de apertura, y el contenido se
coloca entre la etiqueta de apertura y la de cierre.

Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre

<p class=texto>Curso HTML CEMA</p>

Nombre Valor
Atributo
 Atributos
Los atributos de un elemento son pares de nombres y valores separados por un
= que se encuentran dentro de la etiqueta de apertura de algn elemento. Los
valores deben estar entre comillas.
Ejemplos:

<span id=iddeesteelemento' style='color:red;' title=Curso de HTML'>

Curso de HTML
</span>

<a href=http://www.universidad.edu.pe class=milink target=_blank>

Universidad
</a>
 Tipos de Elementos
Algunos tipos de Elementos
Estructurales
Describen el propsito del texto y no denotan ningn formato especfico.
Por ejemplo:
<h1>Curso HTML</h1>
De Presentacion
Describen la apariencia del texto, independientemente de su funcin.
Por ejemplo:
<b>Curso HTML</b>
Los elementos de presentacin se encuentran obsoletos desde la aparicin
del CSS.
De HiperTexto
Relaciona una parte del documento a otros documentos.
Por ejemplo:
<a href=http://www.cema.edu.ar>Universidad del Cema</a>
 NAVEGADORES

Interpreta el cdigo HTML de la pgina.

Firefox, Internet Explorer, Opera, Google C.
EDITORES
Programa que permite redactar documentos.
Editores visuales. Evitan la escritura de cdigo
HTML (la pagina se construye).
Editores de texto. La pagina se crea a travs del
cdigo HTML.
 Editores Visuales: (generan basura)
Macromedia Dreamweaver, Microsoft Frontpage,
Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y
Arachnophilia
Editores de texto.(solo lo necesario)
Wordpad o el Bloc de notas
 Aunque el Bloc de notas es un editor de texto
perfectamente valido, hay disponibles muchos
programas llamados editores de programacin
que ofrecen funcionalidades adicionales de gran
utilidad tales como numeracin de lneas o resaltado
de sintaxis.
JEdit, Notepad++, Programers Notepad
Si se utiliza un Procesador de Textos para trabajar,
asegrese de que sea capaz de guardar archivos
como texto ASCII sencillo.
 Estructura de una pgina
<!DOCTYPE > Su propsito es notificar la especialidad de
HTML que estamos utilizando en el
<html> documento
<head> Entre las etiquetas <html> y </html> esta
... comprendido el resto del cdigo HTML de la
<title> pgina

Curso de HTML <head> y </head>. Cabecera de la pagina

</title> puede contener <link>, <style>, <script>
</head> <meta> <title>
<body> El cuerpo del documento contiene la
... informacin propia del documento (el texto
</body> de la pgina, las imgenes, los formularios,
etc.
</html> color o la imagen de fondo de la
pgina .
 Aunque muchos navegadores modernos muestran correctamente el
cdigo HTML sin estas etiquetas es una MALA prctica omitirlas.

Incluso aunque las pginas se muestren correctamente en nuestro propio

ordenador, no tenemos NI IDEA del sistema operativo y del navegador
que van a utilizar nuestros visitantes, que pueden no tener tanta suerte.

Algunos atributos de body

<body bgcolor="#0000FF">
<body bgcolor="blue">
<body background="fondo.gif">
<body background="imagenes/fondo.gif">
<body text="#FF0000">
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
 Colores en hexadecimal

Color Hexadecimal Nombre

#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia

#FFFF00 yellow
 Creacin de la primera pagina
Crear un directorio de trabajo para la pagina.(ejm. mipagina) en mis
documentos
Con el bloc de notas escribir el siguiente cdigo:

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01

Transitional//EN http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" >
</body>
</html>

Guardar el archivo guardar como con el nombre inicio.html en la carpeta

mipagina
La pagina resultante es como sigue:
 TEXTO
Se requiere dar formato al texto

<y> indican inicio y fin de etiqueta

Carcter Representacin
< &lt;
> &gt;
Algunos caracteres &aacute;

especiales &Aacute;
&eacute;
&Eacute;
&iacute;
&Iacute;
&oacute;
Se puede escribir directamente &Oacute;
sin la representacin en HTML &uacute;
&Uacute;
&ntilde;
&nbsp espacio en blanco
&Ntilde;
&#153;
<!-- y //-->. comentarios

<br> Saltos de lnea,no requiere fin de etiqueta

texto preformateado. Aparece tal como se

<pre> y </pre>
lo escribe, no requiere saltos de linea ni
espacios en blanco en HTML

No permite incluir en el texto etiquetas:

<img> (para incluir imgenes), <object>
(para incluir objetos como animaciones),
<big>, <small>, <sub> ni <sup>

<hr> separar secciones dentro de una misma

Regla horizontal pgina.
no precisa ninguna etiqueta de cierre
 algunos atributos de la regla horizontal:

Significado Posibles valores

Atributo

alineacin de la left (izquierda)

align regla dentro de la right (derecha)
pgina center (centro)

un nmero, acompaado de % cuando se desee que sea

width ancho de la regla
en porcentaje
size alto de la regla un nmero
eliminar el
noshade sombreado de la no puede tomar valores
regla

Inicio<hr align="left" width=50%" size=10" noshade>Bienvenidos a mi pgina.

 Una ilustracin simple

<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" background="imagenes/fondopatas.gif"
leftmargin="40" topmargin="40" marginwidth="40" marginheight="40">

hola mundo este es un texto comn

como estn, cancin&oacute<br>
cuando se esta pensando
<pre>Hola, BIENVENIDOS
esta ES MI PGINA WEB
y esto un texto preformateado</pre>
Inicio de un separador horizontal<hr align="left" width="50%" size="10"
noshade>Bienvenidos a mi pgina.
</body>
</html>
<font> y </font> propiedades del texto

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes
color color del texto nmero hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
size tamao del texto o desplazamiento respecto al tamao por defecto,
aadiendo + o - delante del valor

<font color="#993366" size="4" face="Arial">

Bienvenidos a mi pgina, texto con propiedades
</font>

fuente para todo el documento

<body>
<basefont color="#006699" size="4" face="Arial">
 etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo

<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
curso HTML aulaclic
<u> subrayado

<s> tachado curso HTML aulaclic

teletipo (mquina de
<tt> curso HTML aulaclic
escribir)
aumenta el tamao de
<big> curso HTML aulaclic
la fuente
disminuye el tamao
<small> curso HTML aulaclic
de la fuente
<p> y </p> Parrfos
atributo align: cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) o
justify (justificado).

<p align="center">este es un parrafo

muy simple (centrado)</p>
<p>Aqu&iacute encontra otro prrafo (la
separacion es amplia).</p>

<div> y </div> agrupar bloques de texto, pero con la

diferencia de que la separacin entre
ellos es menor. Tiene los mismos
atributos de alineacin.
<div align="center">otro parrafo con
agrupacion de bloques </div>
<div>note que el espacio es menor</div>

<center> y </center> Texto centrado

<center>texto centrado</center>
 Encabezados - Ttulos
Etiqueta Ejemplo

<H1> Ttulo 1: HTML

<H2>
Ttulo 2: HTML
<H3>
Ttulo 3: HTML

<H4> Ttulo 4: HTML

<H5> Ttulo 5: HTML
<H6> Ttulo 6: HTML

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

 Marquesinas
<marquee> y </marquee>.

<marquee bgcolor="#006699" behavior="alternate" direction="right">

<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>

behavior alternate scroll slide

direction down up left right

Listas
Perro
<li>Perro</li> Gato
<li>Gato</li> Periquito
<li>Periquito</li>
 <ul> y </ul>. Lista desordenada
vieta
<ul type="circle">
<li>Perro</li> circle (crculo), disc (disco) o square (cuadrado).
<li>Gato</li>
<li>Periquito</li>
</ul>

<ol> y </ol>. Lista ordenada

type
1 (nmeros), a (letras minsculas), A (letras
maysculas), i (numeros romanos en minsculas)
o I (nmeros romanos en maysculas).

Listas anidadas: combinacin de las anteriores.

 ENLACES
hiperenlace, hipervnculo, o vnculo

<a> y </a>.

href especifica la pgina a la que est asociado el enlace

Referencia absoluta: Conduce a una ubicacin externa al sitio

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Referencia relativa al sitio: Conduce a un documento situado

dentro del mismo sitio

<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>

<a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>

<a href="//D:/diplomado/tutoriales/www.aulaclic.es/html/index.htm">navegar
por el tutorial</a>
Destino del enlace
determina en qu ventana va a ser abierta la pgina vinculada

atributo target _blank Abre el documento vinculado en una

ventana nueva del navegador.
_self Abre el documento vinculado en el
mismo marco o ventana que el vnculo

<a href="inicio1.html" target="_blank">

cambiar a otro documento "ref. relativa"</a> <br>

Anclas o puntos de fijacin

permite ir directamente al apartado deseado en un documento extenso

<a name="miancla"></a>Texto con ancla define el ancla

<a href="#miancla">Enlace al ancla</a> lleva al ancla

Correo electrnico:

<a href="mailto:jucebeva@hotmail.com">mi e-mail </a>

<a href="mailto:jucebeva@hotmail.com?subject=el asunto del mensaje">

mi e-mail </a>

Vnculo a ficheros para descarga:

<a href="sib1.doc" tarjet=_blank >

haz clic aqu&iacute; para descargarte el fichero
</a>
 IMAGENES
<img>

src : especifica el nombre de la imagen

Las imgenes pueden ser de formatos diferentes: bmp, gif, jpg, etc

<img src="imagenes/gatito.gif" alt="imagen ejemplo">

<img src="imagenes/foto.gif" alt="mi fiesta">

El atributo border puede tomar valores numricos

<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">

El texto alternativo alt tambin puede ser importante a la hora

de hacer accesible un sitio web para personas con problemas
visuales u otras discapacidades.
imagen con borde y con un enlace:

<a href="inicio1.html" target="_blank" >

<img src="imagenes/gatito.gif" border="4" >
</a>

tamao de la imagen

width (anchura) y height (altura)

<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">

Alineacion de la imagen align

Este atributo indica la alineacin de las imgenes con

respecto a la lnea de texto en la que se encuentran.
 Los valores del atributo align pueden ser los siguientes:

bottom inferior

left izquierda

middle medio

right derecha

texttop texto superior

top superior

Este
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle">
es un grafico
 TABLAS
<table> y </table> INICO Y FIN DE TABLA

<tr> y </tr> Inicio y fin de fila

<td> y </td> columna o celda

<table> inicio de tabla

<tr> inicio de fila 1
<td></td> celda 1 de la fila 1
<td></td> celda 2 de la fila 1
</tr> fin de la fila 1
<tr> inicio de fila 2
<td></td> celda 1 de la fila 2
<td></td> celda 2 de la fila 2
</tr> fin de la fila 2
..
</table> fin de la tabla
 Atributos de una tabla:

Significado Posibles valores

Atributo
un nmero, acompaado de % cuando se desee
width ancho de la tabla
que sea en porcentaje
un nmero, acompaado de % cuando se desee
height altura de la tabla
que sea en porcentaje
espacio entre el contenido de
cellpadding un nmero
las celdas y el borde
cellspacing espacio entre celdas un nmero
border grosor del borde un nmero
left (izquierda)
alineacin de la tabla dentro
align right (derecha)
de la pgina
center (centro)
bgcolor color de fondo nmero hexadecimal
background imagen de fondo nmero hexadecimal
bordercolor color del borde nmero hexadecimal

<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="green" bgcolor="blue">
nombre descripcin FOTOGRAFIA

POR EL
aqui va texto, imagenes,
FIESTA 3 DE JULIO CENTENARIO DE
video
LA FACULTAD

GRAFICO
GATITO EXTARIDO DEL
TUTORIAL

PUEDE IR O SIMPLEMENTE
OTRO CUALQUIERA
CUALQUIER COSA TEXTO
<table border="2">
<tr>
<td>nombre</td>
<td>descripocion</td>
<td>FOTOGRAFIA</td>
</tr>
<tr>
<td>FIESTA 3 DE JULIO</td>
<td>POR EL CENTENARIO DE LA FACULTAD</td>
<td>aqui va texto, imagenes, video</td>
</tr>
<tr>
<td>GATITO</td>
<td>GRAFICO EXTARIDO DEL TUTORIAL</td>
<td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td>
</tr>
<tr>
<td>OTRO CUALQUIERA</td>
<td>PUEDE IR CUALQUIER COSA</td>
<td>O SIMPLEMENTE TEXTO</td>
</tr>
</table>
 Atributos de una celda:

Significado Posibles valores

Atributo
un nmero, acompaado de % cuando se desee
width ancho de la tabla
que sea en porcentaje
un nmero, acompaado de % cuando se desee
height altura de la tabla
que sea en porcentaje
left (izquierda)
alineacin horizontal del
align right (derecha)
contenido de la celda
center (centro)
baseline (lnea de base)
alineacin vertical del contenido bottom (inferior)
valign
de la celda middle (medio)
top (superior)
bgcolor color de fondo nmero hexadecimal
background imagen de fondo nmero hexadecimal

bordercolor color del borde nmero hexadecimal

 <tr align="center" bgcolor="yellow"> Para toda la fila la alineacin es
Centrado y el fondo amarillo

<td bgcolor="purple">GATITO</td> Solo para la celda el fondo es prpura

Titulo de columna

<th> y </th> idntico a td pero centrado y negrilla

Combinacin de celdas
colspan y rowspan

colspan especifica el nmero de columnas por las que se extender la celda

rowspan especifica el nmero de filas por las que se extender la celda

 combinacin de 4 columnas
DATOS
NOMBRE FECHA
NOTA 1 NOTA 2

JUAN CARLOS 10.75 12.97 16/AGOSTO/2007

LUISA 20.65 2.65 30/AGOSTO/2007

<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">combinacion de 4 columnas</th>
</tr>
<tr align="center" valign="middle">
<th rowspan="2">NOMBRE</th>
<th colspan="2">DATOS</th>
<th rowspan="2">FECHA</th>
</tr>
<tr align="center" valign="middle">
<th>NOTA 1</th>
<th>NOTA 2</th>
</tr>
<tr align="center" valign="middle">
<td>JUAN CARLOS</td>
<td>10.75</td>
<td>12.97</td>
<td>16/AGOSTO/2007</td>
</tr>
<tr align="center" valign="middle">
<td>LUISA</td>
<td >20.65</td>
<td >2.65</td>
<td>30/AGOSTO/2007</td>
</tr>
</table>
 MARCOS (FRAME)
<frameset> y </frameset> Define el conjunto de marcos
no requiere las etiquetas <body> y
</body>
Atributo Significado Posibles valores
tamao de cada una de las un nmero (acompaado de % cuando se desee que
cols columnas en que se divide sea en porcentaje) por cada columna, separados por
el documento comas.
tamao de cada una de las un nmero (acompaado de % cuando se desee que
rows columnas en que se divide sea en porcentaje) por cada fila, separados por
el documento comas.
aparece o no el borde de yes
frameborder
los marcos no

framespacing separacin entre los marcos un nmero

un nmero, acompaado de % cuando se desee que

border grosor del borde
sea en porcentaje

bordercolor color del borde nmero hexadecimal

 <frame> indica el documento a cargar en el marco

atributos de un marco:

Significado Posibles valores

Atributo
yes o 1
frameborder aparece o no el borde del marco
no o 0
name nombre del marco cualquier valor
si aparece, el usuario no podr redimensionar el
noresize no puede tomar valores
tamao de este marco
anchura del margen con respecto a los bordes un nmero, acompaado de % cuando se desee
marginwidth
del marco que sea en porcentaje
altura del margen con respecto a los bordes del un nmero, acompaado de % cuando se desee
marginheight
marco que sea en porcentaje
se mostrar o no la barra de desplazamiento yes
scrolling cuando la pgina del marco no se pueda no
visualizar completamente en l auto
src documento que se cargar en el marco ruta y nombre del documento
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue">
<frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red">
<frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize>
<frame src="inicio.html" name="marcoderecho">
</frameset>
</frameset>
 Destino de los enlaces de un marco

Los nombres de los marcos pueden constituirse en el destino

De un documento

En la pgina del marco izquierdo (menu.html) crear el siguiente enlace:

<a href="inicio1.html" target="marcoderecho">matematicas</a>

 FORMULARIOS
Permite recoger datos introducidos por el usuario.

Un formulario est formado, entre otras cosas, por etiquetas,

campos de texto, mens desplegables, y botones

<form> y </form> indican el inicio y fin de un formulario

El atributo action indica una direccin de correo electrnico o la

direccin del programa que se encargar de procesar el contenido del
formulario.

El atributo method indica el metodo mediante el que se transfieren

las variables del formulario. Su valor puede ser get o post
ELEMENTOS DE UN FORMULARIO
<textarea> y </textarea> rea de texto

<textarea name=area1" cols="30" rows="3">

Aqu se escribe el texto</textarea>

<input> elemento de entrada

atributo name indica el nombre del elemento de entrada
atributo type indica el tipo de elemento de entrada.
El atributo size indica el nmero de caracteres

El atributo maxlenght indica el nmero de caracteres

El atributo value indica el valor inicial del campo de texto

 Elementos para type:

TEXTO <input name="campo" type="text" value="Campo de texto"

size="20" maxlength="15">

CONTRASEA <input name="contra" type="password"

value="contrasea" size="20" maxlength="15">

BOTON <input name="boton" type="submit"

value="Enviar">

CASILLA DE <input name="casilla" type="checkbox"

VERIFICACION value="acepto" checked>

<input name="prefiere" type="radio"

value="estudiar" checked>
BOTON DE OPCION
<input name="prefiere" type="radio"
value="trabajar">
 <select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
SELECION MULTIPLE <option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>

RESTABLECER <input name="borrar" type="reset" id="borrar"

value="borrar">