Universidad Nacional del Altiplano

DISEÑO DE PAGINAS
CON HTML
 ¿Qué es Internet?
• Una red de redes TCP/IP
(Visión tecnológica)
• Un conjunto de servicios entretenidos
(Visión del usuario final)
• Una plataforma de soluciones integrales para
la vida diaria
(Visión estratégica)
• La base operacional del futuro ...
 Tiempo Real:
Nuevo Paradigma de Negocios

“Las empresas mejor equipadas para

el siglo 21 considerarán a los
sistemas en tiempo real como
esenciales para mantener su ventaja
competitiva y retener a sus
clientes….ellas usarán tecnología de
información y de telecomunicaciones
para responder a circunstancias
cambiantes y, aún más importante,
para responder a lo que esperan los
clientes dentro del menor lapso de
tiempo posible.”
 Pregunta
• ¿Cuál es nuestro negocio?
• ¿cuáles son nuestros clientes?
• ¿Cómo podemos generar un gran impacto
sobre nuestro negocio y nuestros clientes?
Ejemplos de Páginas Web
 Introducción
• 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
identificación única es conocida como dirección IP.

Una dirección IP se compone de cuatro números entre 0 y 255,

cada uno separado por un punto. Una dirección IP sería
146.83.141.25.
 Introducción
• El organismo creado para administrar los números IP se llama
InterNIC.
• Dominios
las direcciones IP, pueden ser difíciles de recordar. Por este
motivo, Internet emplea nombre de dominios para ocultar la
complejidad de la dirección numérica.
Ejemplo: 146.83.141.70
www.tiendalibre.pe
 Introducción

• 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 páginas 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 página.
 World Wide Web
• Hipertexto

Al pulsar sobre un hiperenlace, el navegador recibe una

dirección. A continuación, el navegador localiza el servidor
que contiene el documento, se recibe una copia del documento
solicitado y se despliega la información en pantalla.
 World Wide Web
• Localizador Uniforme de Recursos (URL)

El URL (Uniform Resource Locator) sirve como

identificador para todos los documentos Web. También se
conoce como dirección de página Web. Todo sitio y página
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 categoría 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, imágenes
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,
 Imágenes,
 Multimedia
 Y enlaces a otros documento.
 MarkUp
Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada
uno de estos símbolos 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 organización internacional de Estándares 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 elementos
desarrollados por Netscape. (Incorpora Tablas, Applets, Texto alrededor de
Tim Berners-Lee
imágenes) Director del W3C

 En 1997 se define el estándar HTML 4.0

 En 1999 aparece el estándar actual HTML 4.01

 Más información 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 público en general trabajan para
desarrollar Estándares Web.
 La misión del W3C es la de maximizar el potencial de la WWW desarrollando protocolos
y guías 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 Telefónica de España
Citigroup Microsoft Yahoo, inc.
Deutsche Telekom Mozilla Foundation VeriSign
…Y decenas de universidades de todo el mundo
 HTML – CSS – Javascript
Página Web
• Párrafos •Tablas
Estructura • Encabezados • Capas
• Listas • Etc. HTML
• Textos
Contenido • Imágenes
• Enlaces
• Colores • Fondos
Apariencia • Tipografías • Tamaños CSS
• Alineación • Etc.
• Efectos
Comportamiento • Validaciones Javascript
• Automatización
 Elementos HTML
 Los elementos son los componentes fundamentales del HTML
Los elementos son los componentes fundamentales del HTML
 Cuentan con 2 propiedades básicas:
 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 algún 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 propósito del texto y no denotan ningún formato específico.
 Por ejemplo:
<h1>Curso HTML</h1>
 De Presentacion
 Describen la apariencia del texto, independientemente de su función.
 Por ejemplo:
<b>Curso HTML</b>
 Los elementos de presentación se encuentran obsoletos desde la aparición 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 código HTML de la página.

• Firefox, Internet Explorer, Opera, Google C.
EDITORES
• Programa que permite redactar documentos.
 Editores visuales. Evitan la escritura de código
HTML (la pagina se construye).
 Editores de texto. La pagina se crea a través del
código 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 programación”
que ofrecen funcionalidades adicionales de gran
utilidad tales como numeración de líneas o
resaltado de sintaxis.
• JEdit, Notepad++, Programers Notepad
• Si se utiliza un Procesador de Textos para trabajar,
asegúrese de que sea capaz de guardar archivos
como texto ASCII sencillo.
 Estructura de una página
• <!DOCTYPE > Su propósito 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 código HTML de la
<title> página
Curso de HTML
</title> <head> y </head>. Cabecera de la pagina
puede contener <link>, <style>, <script>
</head> <meta> <title>
<body>
... El cuerpo del documento contiene la
información propia del documento (el texto
</body> de la página, las imágenes, los formularios,
</html> etc.
•color o la imagen de fondo de la
página .
 Aunque muchos navegadores modernos muestran correctamente el
código HTML sin estas etiquetas es una MALA práctica omitirlas.

Incluso aunque las páginas 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
 Creación 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 código:

<!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

Carácter Representación
< &lt;
> &gt;
Algunos caracteres á &aacute;

especiales
Se puede escribir directamente
sin la representación en HTML
&nbsp espacio en blanco
Á &Aacute;
é &eacute;
É &Eacute;
í &iacute;
Í &Iacute;
ó &oacute;
Ó &Oacute;
ú &uacute;
Ú &Uacute;
ñ &ntilde;
Ñ &Ntilde;
™ &#153;
<!-- y //-->. comentarios

<br> Saltos de línea,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 imágenes), <object>
(para incluir objetos como animaciones),
<big>, <small>, <sub> ni <sup>

<hr> separar secciones dentro de una misma

Regla horizontal página.
no precisa ninguna etiqueta de cierre
 algunos atributos de la regla horizontal:

Significado Posibles valores

Atributo

alineación de la left (izquierda)

align regla dentro de la right (derecha)
página center (centro)

un número, acompañado de % cuando se desee que

width ancho de la regla
sea en porcentaje
size alto de la regla un número
eliminar el
noshade sombreado de la no puede tomar valores
regla

Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi página.

 Una ilustración 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 común

como están, canción&oacute<br>
cuando se esta pensando
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
Inicio de un separador horizontal<hr align="left" width="50%" size="10"
noshade>Bienvenidos a mi página.
</body>
</html>
<font> y </font> propiedades del texto

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
size tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

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

Bienvenidos a mi página, 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 (máquina de
<tt> curso HTML aulaclic
escribir)
aumenta el tamaño
<big> curso HTML aulaclic
de la fuente
disminuye el tamaño
<small> curso HTML aulaclic
de la fuente

 
<p> y </p> Parráfos
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 párrafo (la
separacion es amplia).</p>

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

diferencia de que la separación entre
ellos es menor. Tiene los mismos
atributos de alineación.
<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 - Títulos
Etiqueta Ejemplo

<H1> Título 1: HTML

<H2>
Título 2: HTML
<H3>
Título 3: HTML

 
<H4> Título 4: HTML
<H5> Título 5: HTML
<H6> Título 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
viñeta
<ul type="circle">
<li>Perro</li> circle (círculo), disc (disco) o square (cuadrado).
<li>Gato</li>
<li>Periquito</li>
</ul>

<ol> y </ol>. Lista ordenada

type
1 (números), a (letras minúsculas), A (letras
mayúsculas), i (numeros romanos en minúsculas)
o I (números romanos en mayúsculas).

Listas anidadas: combinación de las anteriores.

 ENLACES
hiperenlace, hipervínculo, o vínculo

<a> y </a>.

href especifica la página a la que está asociado el enlace

Referencia absoluta: Conduce a una ubicación 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 página 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 vínculo

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

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

Anclas o puntos de fijación

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 electrónico:

<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>

Vínculo 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 imágenes 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 numéricos

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

El texto alternativo “alt” también 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>

tamaño 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 alineación de las imágenes con

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

bottom inferior

left izquierda                 

middle medio                 

right derecha               

texto
texttop          
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 número, acompañado de % cuando se
width ancho de la tabla
desee que sea en porcentaje
un número, acompañado de % cuando se
height altura de la tabla
desee que sea en porcentaje
espacio entre el contenido de
cellpadding un número
las celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla dentro
align right (derecha)
de la página
center (centro)
bgcolor color de fondo número hexadecimal
 
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

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

bordercolor="green" bgcolor="blue">
nombre descripción FOTOGRAFIA

POR EL
aqui va texto,
FIESTA 3 DE JULIO CENTENARIO DE
imagenes, 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 número, acompañado de % cuando se desee
width ancho de la tabla
que sea en porcentaje
un número, acompañado de % cuando se desee
height altura de la tabla
que sea en porcentaje
left (izquierda)
alineación horizontal del
align right (derecha)
contenido de la celda
center (centro)
baseline (línea de base)
alineación vertical del bottom (inferior)
valign
contenido de la celda middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background   imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal

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

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

Titulo de columna

<th> y </th> idéntico a td pero centrado y negrilla

Combinación de celdas
colspan y rowspan

colspan especifica el número de columnas por las que se extenderá la celda

rowspan especifica el número de filas por las que se extenderá la celda

 combinación 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
tamaño de cada una de las un número (acompañado de % cuando se desee
cols columnas en que se divide que sea en porcentaje) por cada columna,
el documento separados por comas.
tamaño de cada una de las un número (acompañado de % cuando se desee
rows columnas en que se divide que sea en porcentaje) por cada fila, separados por
el documento comas.
aparece o no el borde de yes
frameborder
  los marcos no
separación entre los
framespacing un número
marcos
un número, acompañado de % cuando se desee
border grosor del borde
que sea en porcentaje
bordercolor color del borde número 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
noresize no puede tomar valores
el tamaño de este marco
anchura del margen con respecto a los bordes un número, acompañado de % cuando se desee
marginwidth
del marco que sea en porcentaje
altura del margen con respecto a los bordes del un número, acompañado de % cuando se desee
marginheight
marco que sea en porcentaje

 
se mostrará o no la barra de desplazamiento yes
scrolling cuando la página 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 página 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, menús desplegables, y botones

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

El atributo action indica una dirección de correo electrónico o la dirección

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 número de caracteres

El atributo maxlenght indica el número 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">

CONTRASEÑA <input name="contra" type="password"

value="contraseña" 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">