5 HTML PDF

TUTORIALBSICODELPROGRAMADORWEB:
HTMLDESDECERO.
Objetivos
HTML es el lenguaje ms bsico para la creacin de pginas web. Es usado para definir la
estructutra y el contenido en forma de texto y complementar el texto de pginas web con
imgenes, tablas y formularios. HTML se escribe en forma de etiquetas, rodeadas por
corchetes angulares (<, >). Este curso permite aprender los fundamentos para la creacin
de pginas web usando HTML.
Destinatarios
Cualquier persona con inters en aprender fundamentos que le permitan crear pginas web
usando HTML. Para realizar este curso, debes tener conocimientos bsicos de ofimtica: saber
copiar, pegar, mover y abrir archivos.
Contenidos
INTRODUCCIN A HTML. QU ES Y PARA QU SIRVE HTML.

INTERNET Y CMO SE TRANSMITE LA INFORMACIN. CLIENTE-SERVIDOR-NAVEGADOR.
ESTRUCTURA BSICA DE UNA PGINA HTML. HEAD, BODY. METATAGS BSICOS EN HTML.
ETIQUETAS HTML BSICAS: FORMATO TEXTO, IMGENES, ENCABEZADOS, PRRAFO, SALTOS
DE LNEA, SEPARADORES Y COMENTARIOS.
HIPERVNCULOS EN HTML.
LISTAS EN HTML.
TABLAS EN HTML.
FORMULARIOS EN HTML. MTODOS DE ENVO: GET Y POST. CAMPOS DE TEXTO Y BOTONES.
CREACIN DE UN PORTAL BSICO UTILIZANDO HTML.
Duracin
90 horas de dedicacin efectiva, incluyendo lecturas, estudio y ejercicios.
Direccin,modalidadesycertificados
El curso est dirigido por Enrique Gonzlez Gutirrez, responsable del Departamento
Tcnico del portal web aprenderaprogramar.com. Se oferta bajo la modalidad web
(gratuito).
Para ms informacin: contacto@aprenderaprogramar.com
C/Los Guanches, 41 38205 La Laguna Tenerife Espaa CIF 54042040K
Indice del curso Tutorial bsico programador web: HTML desde cero.
INDICE DEL CURSO
1.
INTRODUCCIN A HTML
1.1.
1.2.
1.3.
1.4.
1.5.
Introduccin: internet y cmo se transmite la informacin.

Qu es y para qu sirve HTML?
Es HTML un lenguaje de programacin?
Cules son las versiones de HTML?
Qu necesito para escribir cdigo HTML y crear pginas web?
2.
PREPARANDO EL ENTORNO DE DESARROLLO
2.1.
2.2.
2.3.
Descargar e instalar Notepad++.

Configuracin bsica de Notepad++ para crear pginas HTML.
Descargar e instalar el navegador Google Chrome.
3.
CONCEPTOS BSICOS DE HTML
3.1.
3.2.
Estructura bsica de una pgina HTML. HEAD, BODY.

Etiquetas HTML bsicas: formato texto, imgenes, encabezados, prrafo, saltos de lnea,
separadores y comentarios.
Hipervnculos en HTML.
Listas en HTML.
Tablas en HTML.
Formularios en HTML. Mtodos de envo: get y post.
Capas en HTML. Etiquetas DIV y SPAN. Maquetacin de estructura de pginas web.
3.3.
3.4.
3.5.
3.6.
3.7.
Indice del curso Tutorial bsico programador web: HTML desde cero.
4.
CREACIN DE UN PORTAL BSICO
4.1.
4.2.
4.3.
Pgina principal. Cabecera, men, cuerpo y pi.

Formulario de datos personales.
Permitir seleccin de archivos para envo a travs de un formulario.
5.
SUBIR NUESTRA WEB A UN SERVIDOR Y HACERLA ACCESIBLE EN INTERNET
5.1.
5.2.
Creacin de una cuenta en hosting gratuito y acceso va cPanel.

Subir nuestra pgina a un servidor web y hacerla accesible en internet.
6.
CONEXIN DE HTML CON OTROS LENGUAJES
6.1.
6.2.
6.3
Qu es y para qu sirve JavaScript? Ejemplos bsicos.

Qu es y para qu sirve CSS? Ejemplos bsicos.
Qu es y para qu sirve PHP? Ejemplos bsicos.
Prxima entrega: CU00702B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
Orientacin curso Tutorial bsico programador web: HTML desde cero
ORIENTACIN SOBRE EL TUTORIAL BSICO DEL PROGRAMADOR WEB: HTML DESDE CERO
HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar pginas web.
HTML no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina lenguaje
de programacin coloquialmente. Es un lenguaje descriptivo, formado por una serie de etiquetas que el
navegador interpretar de una u otra forma para mostrar distintos contenidos por pantalla. Este curso,
que estamos comenzando, va dirigido a aquellas personas que quieran adquirir unos fundamentos
bsicos para crear pginas web con vistas a poder desarrollar en el futuro pginas web atractivas y de
cierta complejidad. No vamos a desarrollar un manual de referencia de HTML, sino un curso bsico paso
a paso. No vamos a contemplar todos los aspectos del lenguaje HTML, sino aquellos que consideramos
bsicos desde el punto de vista didctico, con vistas a que posteriormente la persona que lo desee
ample sus conocimientos. Nuestro objetivo es ser claros, sencillos y breves, y para eso tenemos que
centrarnos en determinadas cuestiones de HTML y dejar de lado otras.
Como conocimientos previos para iniciar este curso recomendamos (seguir la recomendacin o no
queda a criterio del alumno y/o profesor que vayan a seguir el curso) los siguientes: Ofimtica bsica
(saber copiar, pegar, mover y abrir archivos).
Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender HTML requiere tiempo y esfuerzo. Para hacer ese recorrido ms llevadero, te recomendamos
que utilices los foros de aprenderaprogramar.com, herramienta a disposicin de todos los usuarios de
la web (http://www.aprenderaprogramar.com/foros/), y que te servir para consultar dudas y recabar
orientacin sobre cmo enfrentarte a los contenidos. Entre los miembros del portal web y otros
usuarios, trataremos de ayudarte para que el estudio te sea ms llevadero y seas capaz de adquirir los
conocimientos necesarios y avanzar como programador.
El tiempo necesario (orientativamente) para completar el curso incluyendo prcticas con ordenador,
suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 90 horas de
dedicacin efectiva o aproximadamente un mes y medio con una dedicacin de 3 horas diarias de lunes
a viernes. Aprender a crear pginas web requiere dedicacin y esfuerzo.
El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene
algunas indicaciones especficas para usuarios de Windows, pero tambin puede ser utilizado en otros
entornos (Linux, Macintosh, etc.).
Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultar de
gran utilidad.

aprenderaprogramar.com, 2006-2029
INTRODUCCIN: INTERNET Y CMO SE TRANSMITE LA INFORMACIN.

Vamos a explicar qu ocurre cuando escribimos una direccin web en nuestro navegador (el programa
que usamos para ver pginas web), desde que tecleamos la direccin hasta que vemos la pgina
solicitada
en
nuestro
monitor.
Por
ejemplo,
cuando
escribimos
la
direccin
http://www.aprenderaprogramar.com
Primero escribimos la direccin o URL del sitio web en nuestro navegador. A continuacin y sin que
nosotros nos demos cuenta, nuestro navegador solicita la pgina web al servidor que alberga el sitio
aprenderaprogramar.com. Acto seguido, el servidor enva de vuelta los datos a nuestro ordenador a
travs de Internet. Finalmente, nuestro navegador interpretar los datos, mostrando el resultado en la
pantalla de nuestro ordenador.
En el grfico anterior podemos ver cmo desde el cliente (nuestro ordenador en casa) se enva una
peticin al servidor y cmo ste devuelve una respuesta con los datos. Cuando decimos http nos
referimos a un protocolo de transmisin de datos: esto simplemente son una serie de reglas que usan
los ordenadores para comunicarse entre s a travs de internet. Sobre este protocolo no nos hace falta
comentar nada ms, no vamos a estudiarlo porque no nos resulta necesario para el objetivo del curso.
A partir de aqu, el navegador que estemos utilizando interpretar esos datos y los mostrar en la
pantalla. Es por ello, que podemos obtener visualizaciones distintas para cada navegador, porque son
stos los que interpretan los datos obtenidos que son siempre los mismos para una misma peticin de
pgina web. Por ejemplo, podemos usar como navegador Internet Explorer Firefox, y segn usemos
uno u otro obtener resultados distintos porque cada navegador interpreta la informacin de una
manera distinta.
Podemos decir, por explicarlo de forma sencilla, que el navegador es aquello que transforma los datos
obtenidos para que una persona pueda visualizarlos en su monitor.
NAVEGADORES MS USADOS
MOZILLA
FIREFOX
INTERNET
EXPLORER
Mozilla Firefox es un navegador web libre y de cdigo abierto,

desarrollado por la Fundacin Mozilla que es una organizacin
sin nimo de lucro dedicada a la creacin y difusin de
software libre.
Este navegador es uno de los ms usados por los
programadores web ya que cumple la mayora de los
estndares web conocidos y porque proporciona
herramientas muy tiles para el desarrollo y correccin del
cdigo informtico que hay detrs de las pginas web.
Conocido comnmente como IE, es un navegador web
desarrollado por Microsoft para el sistema operativo
Microsoft Windows desde 1995.
Este navegador es uno de los ms usados por los usuarios ya
que viene por defecto en el sistema operativo Windows.
SAFARI
EXPLORER
Safari es un navegador web de cdigo cerrado desarrollado

por Apple (fabricante de los famosos ordenadores Macintosh,
mviles iPhone, etc.). Est disponible para ordenadores o
dispositivos mviles que usan el sistema operativo de
Macintosh y tambin para Microsoft Windows.
Es el navegador que nos encontraremos en cualquier
ordenador de Apple.
GOOGLE
CHROME
Google Chrome es un navegador web desarrollado por

Google. Naci en el ao 2008, lo que lo convierte en uno de
los navegadores ms jvenes del mercado. Es uno de los
navegadores ms rpidos y ligeros que existe. Tambin es
muy usado por los programadores ya que cumple los
estndares web e incluye herramientas interesantes.

QU ES Y PARA QU SIRVE HTML?

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Est compuesto por una
sere de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas
para imgenes, hipervnculos que nos permiten dirigirnos a otras pginas, saltos de lnea, listas, tablas,
etc.
Podramos decir que HTML sirve para crear pginas web, darles estructura y contenido.
Un ejemplo sencillo de cdigo HTML podra ser:
<html>
<body>
<p>Esto es un prrafo. Bienvenidos a esta pgina web.</p>
</body>
</html>
Dicho ejemplo est formado por 3 etiquetas HTML. Como podemos observar cada una de las etiquetas
debe acabar con su homloga de cierre. En este caso la etiqueta <html> debe cerrarse con </html>, la
etiqueta <body> con </body> y la etiqueta <p> con </p>.
Hay muchas ms etiquetas que veremos ms adelante pero nos debe quedar claro que por cada
etiqueta que abramos, deberemos incluir la correspondiente etiqueta de cierre. As conseguiremos un
cdigo HTML bien formado y que los navegadores puedan interpretar sin ambigedad.
Este sencillo ejemplo mostrara por pantalla lo siguiente.
Qu ocurrira si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se tratara
de un cdigo HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras.
Quizs nos muestren la pgina tal y como esperbamos sin aparente error. Quizs nos muestren una
pgina de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir
pginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para
que los navegadores puedan saber exactamente qu es lo que pretendemos mostrar.
ALGO DE HISTORIA SOBRE EL LENGUAJE MS IMPORTANTE DE INTERNET

HTML naci pblicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por
primera vez en Internet por Tim Berners-Lee en 1991. En esta publicacin se describen 22 etiquetas que
mostraban un diseo inicial y relativamente simple de HTML. Varios de estos elementos se conservan
en la actualidad. Otros se han dejado de usar, y muchos otros se han ido aadiendo con el paso de los
aos. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la
historia de internet. Nosotros vamos a trabajar con el HTML estndar actual, que es el utilizado por los
navegadores y pginas web de hoy en da. Sin embargo, no vamos a prestarle atencin a las versiones y
especificidades de cada versin, ya que el objetivo de este curso es aprender los fundamentos de HTML
y entender cmo funciona, no conocer la sintaxis o especificidades de una versin concreta. Por qu
no le damos importancia a la versin? Porque una persona que cuenta con los fundamentos y
comprensin bsica sobre el lenguaje es capaz de adaptarse a las caractersticas particulares de una
versin sin problema. En cambio, centrarse en los detalles de una versin sin conocer los fundamentos
har que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos
cambios que tienen lugar en el mbito de los desarrollos web.
Tim Berners-Lee

Es HTML un lenguaje de programacin? Lenguajes de etiquetas.
ES HTML UN LENGUAJE DE PROGRAMACIN?

En principio diremos que no, aunque de forma coloquial muchas veces se oigan referencias a HTML
como si fuera un lenguaje de programacin. HTML es un lenguaje de etiquetas. Estas etiquetas (tag)
HTML comunican al navegador cual es la informacin a mostrar por pantalla, adems del formato de
dicha informacin. Es por ello que no puede definirse como un lenguaje de programacin, sino como un
sistema de etiquetas. Vemoslo con un ejemplo.
EJEMPLO PARA ENTENDER EL CONCEPTO DE LENGUAJE DE ETIQUETAS FRENTE A LENGUAJE DE

PROGRAMACIN
Si analizamos el siguiente algoritmo realizado el lenguaje de programacin Java, podremos observar
cmo una cosa tan simple como es ejecutar un proceso para escribir los nmeros del 1 al 10, no es
posible en HTML. Esto es debido a que HTML no es un lenguaje de programacin y no dispone de las
sentencias bsicas de la programacin, como instrucciones para repetir un proceso o, elegir si realizar
un proceso u otro en funcin de una circunstancia que se est produciendo.
Lenguaje
Java
Cdigo
public class MuestraDelUnoAlDiez {

public static void main(String[] args) {
for(int i=1;i<=10;i++) {
System.out.println(i);
}
}
}
Salida por pantalla

1
2
3
4
5
6
7
8
9
10
<html>
<body>
HTML
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
Es HTML un lenguaje de programacin? Lenguajes de etiquetas.
Como podemos observar, en el ejemplo anterior, HTML no tiene la capacidad de contar y debemos
escribir nosotros todo lo que queremos que salga por pantalla. Sin embargo, vemos como en Java
podemos indicar que cuente del 1 al 10 y que lo muestre por pantalla sin escribir completamente lo que
queremos visualizar.
Clsicamente se dice que los lenguajes de programacin incluyen tres capacidades bsicas de generar
flujos de procesos: la secuencial (secuencias de instrucciones), la condicional (capacidad para tomar
decisiones o ejecutar un proceso u otro en funcin del valor de uno o varios parmetros) y la de
repeticin (capacidad para repetir un proceso un cierto nmero de veces). Los lenguajes clsicos como
C, C++, Java, C#, Visual Basic, Fortran, etc. cuentan con estas capacidades. HTML no cuenta con ellas, no
porque sea mejor ni peor sino porque es una cosa distinta.
En resumen, podramos decir que HTML no es un lenguaje de programacin, es un lenguaje de
maquetacin web o lenguaje de etiquetas destinado a crear estructuras de documentos HTML.

Cules son las versiones de HTML? Strict, Transitional, Frameset.
CULES SON LAS VERSIONES DE HTML?

El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rpido crecimiento de la
web, surgi la necesidad de crear un estndar para que tanto los programadores como los navegadores
pudieran basarse en unas mismas normas para escribir HTML. Cada versin de HTML establece unas
normas respecto a cules son las etiquetas vlidas y cmo se deben escribir.
Los estndares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0 y el HTML 4.01, aunque
actualmente se trabaja en el HTML 5. El HTLM 5 ya est empezando a ser usado aunque todava no es
una especificacin oficial. El XHTML, una forma ms avanzada del HTML que se supona iba a sustituir a
ste, va a quedar integrado dentro del HTML 5.
HTML 2.0
En 1995 se publica el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es

el primer estndar oficial de HTML, es decir, el HTML 1.0 no existi como
estndar. HTML 2.0 no soportaba tablas.
Se simplificaba al mximo la estructura del documento para agilizar su edicin,
donde la declaracin explcita de los elementos body, html y head es opcional.
HTML 3.2
La versin HTML 3.2 se public en 1997 y es la primera recomendacin de

HTML publicada por el W3C (Consorcio internacional). Esta revisin incorpor
los ltimos avances de las pginas web desarrolladas hasta 1996, como applets
de Java y texto que fluye alrededor de las imgenes.
HTML 4.01
La ltima especificacin oficial de HTML se public en diciembre de 1999 y se

denomina HTML 4.01. Desde la publicacin de HTML 4.01, el W3C se centr en
el desarrollo del estndar XHTML. Por este motivo, en el ao 2004, las
empresas Apple, Mozilla y Opera mostraron su preocupacin por la falta de
inters del W3C en HTML y decidieron organizarse en una nueva asociacin
llamada WHATWG (Web Hypertext Application Technology Working Group)
que comenz el desarrollo del HTML 5, cuyo primer borrador oficial se public
en enero de 2008. Debido a la fuerza de las empresas que forman el grupo
WHATWG y a la publicacin de los borradores de HTML 5.0, en marzo de 2007
el W3C decidi retomar la actividad estandarizadora de HTML, y actualmente
W3C est trabajando para el lanzamiento del estndar HTML 5.0, dentro del
cual ha decidido integrar el XHTML.
HTML 5.0, 5.1 y 5.2
El consorcio internacional W3C marc las siguientes fechas para liberacin de

los estndares de especificacin: 2014/2015 para HTML 5.0, 2016 para HTML
5.1 y 2019 para HTML 5.2
Hasta el momento la versin de HTML ms utilizada ha venido siendo la 4.01. Esta versin fue definida
por la W3C (Comit Internacional que define los estndares web) hace varios aos. Actualmente ya est
disponible la nueva versin de HTML, denominada HTML 5. Esta versin ya se est usando de modo
experimental y se espera que se imponga como estndar en los prximos aos.
Adems de cada versin, cada una tiene variantes (digamos que distintas formas). Cuando escribimos
un documento HTML debemos indicar en una lnea inicial qu versin y variante es la que estamos
usando de forma que cualquier persona que lea ese documento HTML sepa qu versin y variante se ha
empleado. Las variantes del HTML 4.01 son:
HTML 4.01
Strict
En este tipo de documentos podemos usar etiquetas HTML 4.01, pero no se aceptan etiquetas
obsoletas, es decir, etiquetas propias de versiones ms antiguas. Es la versin que si usamos en
teora nos debera dar un resultado ptimo en los navegadores ms modernos. Esto no siempre
es as, como explicaremos un poco ms adelante.
HTML 4.01
Transitional
En este tipo de documentos se pueden usar todas las etiquetas de todas las versiones de HTML.
Usar esta variante de HTML plantea el interrogante de si es correcto permitir el uso de etiquetas
obsoletas que podran dejar de funcionar en las proximas versiones de los navegadores. Sin
embargo, este es el estndar ms usado, porque combina la posibilidad de usar etiquetas ms
antiguas y etiquetas ms modernas, de forma que podamos aspirar a una mejor visualizacin en
la mayor parte de los navegadores.
HTML 4.01
Frameset
Este tipo de documentos tiene soporte para frames. Los frames son unos marcos a modo de
pequeas subventanas dentro de una misma pgina web que se usaban mucho hace unos aos
pero que hoy en da se usan cada vez menos. Este tipo de HTML podemos considerarlo
anticuado, porque hay otras formas de disear pginas web sin frames ms modernas y tiles
que nos permiten obtener el mismo resultado de forma ms eficiente.
En la figura podemos ver cmo el ser ms estrictos supone que tengamos que usar un menor nmero
de etiquetas.
CUL ELIJO, Y CMO?

No te preocupes demasiado por utilizar una versin correcta y concreta sino por crear pginas web
que se vean bien. Para ello debes aprender cmo se construye y cul es la lgica del HTML, ms que
una versin concreta de ste. Ten en cuenta que hay diversidad de versiones y que no todos los
navegadores se cien a los estndares, con lo cual no tiene demasiado sentido preocuparse por ceirse
a una versin. Te puede resultar un poco extrao, pero cuando adquieras experiencia en desarrollos
web comprobars que las normas para los desarrollos web no estn 100 % claras.
Si ya sabas HTML pero nunca has separado contenido y diseo, o todos estos estndares te suenan a
chino, usa el HTML normal, en concreto la versin 4.01, que es la ltima. Elige la rama Strict si necesitas
cumplir el estndar Strict por algn motivo (por ejemplo porque te lo pida un cliente as
especficamente). Usar la variante Strict puede resultar un poco ms complicado porque tenemos ms
limitaciones. Por ello nosotros en este curso usaremos el 4.01 Transitional que es la variante ms
utilizada y podemos decir que intermedia: ni demasiadas restricciones ni demasiada libertad. El XHTML
es un lenguaje que va a quedar integrado dentro de HTML 5 y que no estudiaremos en este curso.
En un archivo HTML debemos indicar qu versin y variante estamos usando. Para indicar sto hay que
poner una lnea al principio de la pgina web (del archivo donde est el contenido). No es una etiqueta,
por tanto es algo rara y no hay que cerrarla ni ponerla en minsculas. Eso s, debemos ponerla en todos
nuestros documentos.
Para HTML 4.01 Strict escribiramos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Para HTML 4.01 Transitional (recomendado) escribiramos:

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/loose.dtd">
HTML
4.01
Transitional//EN"
En este curso usaremos HTML 4.01 Transitional para conseguir documentos HTML 4.01.
EJEMPLO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<body>
<p>Esto es una prueba de pgina HTML 4.01 Transitional</p>
</body>
</html>
Vista en el navegador Google Chrome que obtendramos para el documento HTML anterior.
Con este sencillo ejemplo creamos una pagina HTML 4.01 Transitional. Para visualizar esta simple
pgina web procedemos de la siguiente manera: creamos un archivo con el editor de texto que
tengamos a nuestra disposicin, en nuestro caso utilizaremos el bloc de notas de Windows pero puede
ser cualquier editor de texto.
Para abrirlo nos vamos a Inicio -> Todos los programas -> Accesorios -> Bloc de notas:
Escribimos en el bloc de notas el cdigo del ejemplo anterior como un simple texto.
A continuacin en el men Archivo elegimos la opcin Guardar como e indicamos que queremos
guardar el archivo en el directorio raz de la unidad C con el nombre ejemplo.html
Una vez realizado todos estos pasos, abrimos el archivo creado haciendo doble click sobre l desde el
explorador de archivos de Windows. Si tenemos un navegador web instalado se nos abrir
automticamente la pgina web que hemos creado en el ejemplo.
No te preocupes por no estudiar HTML 5 ahora, todo lo que aprendas sobre HTML te servir cuando
estudies HTML 5.
Tambin es normal que no comprendas bien el significado de todos los trminos en el archivo HTML,
pues los iremos explicando poco a poco. De momento, nuestro objetivo es irnos familiarizando con los
distintos aspectos que iremos estudiando.

QU NECESITO PARA ESCRIBIR CDIGO HTML Y CREAR PGINAS WEB?

Los requisitos principales y fundamentales, para escribir cdigo HTML y crear pginas web, son
bsicamente dos: saber HTML (esto lo conseguirs siguiendo este curso) y un editor de texto (nosotros
utilizaremos el Notepad++, aunque se pueden usar otros editores o programas). Hay muchos
profesionales que crean sus pginas en Dreamweaver, usando Flash u otros programas o tecnologas.
Esta forma de crear pginas web tiene a favor la fcil creacin de stas pero, si quieres hacer pginas
web de calidad y tener un control total sobre el cdigo generado, lo primero es saber HTML sin ms.
Para crear pginas web obviamente necesitas un ordenador y un navegador (Explorer, Firefox, Chrome
o similar) instalado. Necesitamos conexin a internet para crear pginas web? La respuesta es que no:
podemos crear nuestras pginas en nuestro propio ordenador y a posteriori subirlas a un servidor
remoto para que estn accesibles en internet desde cualquier parte del mundo. En este curso vamos a
trabajar inicialmente en local (es decir, en nuestro propio ordenador sin necesidad de conexin a
internet), y ms adelante veremos cmo subir una web a un servidor. Tambin podramos generar una
pgina web directamente sobre un servidor, pero por motivos de didctica y sencillez consideramos
preferible empezar trabajando en local. Una vez tengas conocimientos ms avanzados, podrs hacerlo
como te resulte ms cmodo.
Ahora indicaremos unos sencillos consejos que deberas tener en cuenta antes de crear tus pginas
web.
Tomar ideas.
Ojo, tomar ideas no es copiar contenidos con derechos de propiedad intelectual, no debes
reproducir el trabajo de otros sin valorar si ests vulnerando el derecho de propiedad
intelectual. Sin embargo, es importante inspirarte en otros sitios, buscar contenidos que te
puedan servir, combinaciones de colores que se vean bien, y diseos organizados que te
puedan ser tiles.
No uses toda la gama de colores en tu pgina web.

No crees una pgina web que parezca un arcoiris: inicialmente te puede parecer curiosa, pero
un usuario que visite tu pgina web, se sentir molesto con demasiados colores.
Por ejemplo, es preferible utilizar el clsico fondo blanco y texto negro o azul, que el fondo rosa
con puntos morados y el texto verde fosforescente. Cuida que los colores de tu pgina tengan
una buena combinacin, y que hagan fcil la lectura.
Ejemplo mal diseo, colores e imgenes:
Se ve mejor si cabe en la pantalla.

Procura que tu diseo est basado en el tamao de la pantalla, no busques escribir una novela
completa en la pgina inicial de tu web. Es preferible que las pginas no tengan scroll, o que si
lo tienen ste no sea demasiado largo.
Administra tus imgenes.

Tu pgina se ver ms atractiva si usas imgenes. No obstante, debes usarlas de una forma
moderada porque un excesivo nmero de imgenes puede ser tambin perjudicial si no
permite una buena lectura del contenido.
Haz que tu sitio sea fcil de navegar.

Por muy obvia que parezca esta recomendacin, debes dividir la informacin en diferentes
secciones y ubicar los enlaces a las mismas donde la gente espere encontrarlos.
Hay algunos sitios donde slo es posible desplazarse hacia delante o hacia atrs. En realidad,
eso no es "navegar". Es necesario que el visitante pueda elegir en todo momento qu seccin
quiere visitar y en qu orden: por ejemplo tener un men es algo generalmente aconsejable.
No te olvides de incluir en todas las pginas un enlace a la pgina de inicio (la primera pgina)
para facilitar la navegacin.
Ejemplo de men:
Tambin es interesante incluir el logotipo de tu sitio en todas las pginas, porque no siempre el
visitante ingresa al sitio por la pgina de inicio; si proviene del enlace de un buscador, es
probable que ingrese por cualquier seccin, en ese caso, el logotipo en todas las pginas ayuda
a ubicar al posible visitante donde est.
Mantn tu sitio actualizado.

Nada es ms desagradable que volver a un sitio tiempo despus de una visita y no encontrar
ningn cambio. Realizar cambios frecuentes crea en los visitantes la idea de que el contenido
es valioso y vale la pena darse una vueltecita a menudo.
Progrmate un esquema de actualizacin y cmplelo.

Renueva tus promociones, agrega ms informacin sobre nuevos productos, servicios o
artculos, incluye testimonios de clientes o usuarios satisfechos, usa tu imaginacin.
Tambin puedes incluir la fecha de la ltima actualizacin en un lugar visible de tu pgina de
inicio, o bien mantener un apartado donde se vea que los contenidos estn actualizados.
Promociona tu web: on-line y off-line.

Enva tu sitio a los principales motores de bsqueda y directorios (google, yahoo, etc.). Dedica
tiempo a realizar un trabajo a conciencia, el mismo se justificar plenamente con un mejor
posicionamiento en los buscadores.
Despus de todo de qu te sirve tener un sitio en Internet si nadie lo encuentra?
En este curso aprenderemos a utilizar palabras claves (keywords) que describan tu negocio lo
mejor posible. Aqu conviene situarse del lado de quien busca, qu keywords utilizar tu
posible cliente para buscar un sitio de tus caractersticas? Haz una lista, pregunta a amigos/as y
conocidos.
No te olvides de incluir tu direccin (http://www.tusitio.com) en toda papelera y comunicacin

que emitas: tarjeta comercial, papelera, facturas, remitos, recibos, folletos, faxes, bolsas,
publicidad, etc.
Informacin para tus clientes.

Incluye un enlace al pi de cada pgina para que puedan comunicarse contigo. En este curso
aprenderemos cmo hacerlo. El agregar informacin con la direccin fsica, telfono completo
(con el cdigo del pas), fax, etc, ayuda a crear confianza. Despus de todo t y tu web existen
en el "mundo real" no son un ente imaginario perdidos en el ciberespacio.
Cuando te sea posible, incluye un campo donde tus usuarios puedan ingresar el email para
recibir un boletn o newsletter con novedades sobre tus productos, esto ayuda a crear
confianza y lealtad a tu pgina. Otra opcin es la suscripcin mediante RSS Atom, que son
servicios para poder recibir las novedades que se van publicando en tu pgina.
Recuerda que ahora puedes utilizar las redes sociales para promocionar tu web o empresa
online: Facebook, YouTube, Slideshare, Linkedin, etc.
Todas estas ideas pueden ayudarte a tener un sitio web de calidad y bien posicionado en los
buscadores. No tienes por qu cumplirlos todos, ni son todos los puntos a tener en cuenta para que tu
sitio est el primero en los buscadores, pero pueden resultar tiles. No te preocupes si ahora algunos
conceptos no te quedan claros porque a medida que trabajes en desarrollos web irs adquiriendo una
visin ms completa.

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++.

Vamos a comenzar a preparar el entorno de desarrollo para poder crear pginas web. Lo primero que
debemos hacer es descargar el editor de texto Notepad++ e instalarlo. Para ello nos vamos a ir a la
direccin siguiente: http://notepad-plus-plus.org
Cuando la pgina haya terminado de cargar, hacemos click en la seccin download del men. Localiza el
enlace, ten en cuenta que el aspecto de la pgina puede cambiar cada pocos meses.
En la pgina web que nos aparecer, descargamos la versin Installer actual, por ejemplo Notepad++
v6.9.6.2 Installer. El archivo tendr un nombre similar a npp.6.6.9.Installer.exe.
Una vez descargado el archivo, lo ejecutamos (click sobre el archivo, botn derecho del ratn, ejecutar
como administrador) para instalarlo en nuestro ordenador. Si no sabes cmo instalar haz simplemente
doble click sobre el archivo. El proceso de instalacin es muy simple y no entraremos a explicarlo con
ms detalle.
Cuando tengamos instalado el programa, ya dispondremos del editor de texto Notepad++, con el que
podremos abrir y editar cualquier fichero HTML. Podremos acceder al programa desde Inicio
Programas Notepad++ desde el icono de acceso directo en el escritorio si se ha creado.
EJEMPLO: COMENZAR A USAR NOTEPAD++

Desde el explorador de archivos de Windows, creamos una carpeta llamada curso_html_apr2 en la
unidad C.
Una vez creada la carpeta, entramos en ella. Abrimos Notepad++ y pulsamos en Archivo -- > Guardar.
Como nombre de archivo escibimos CU00708B.html (este nombre de archivo es solo un ejemplo,
puedes ponerle el que t quieras). Paso seguido, cierra el archivo. Para editar este archivo con el
programa Notepad++, podemos hacer dos cosas. Bien abrir Notepad++ y elegir Archivo -- > Abrir y
seleccionar el archivo, o bien hacemos lo siguiente:
Clickamos sobre el archivo con el botn derecho del ratn y se mostrar un menu similar a ste (Nota:
en algunos casos aparecen conflictos entre la versin de Notepad++ y la versin de Windows y este
men contextual no se muestra. En este caso, tendremos que abrir primero Notepad++ y luego la
opcin Abrir del men Archivo.)
En el men desplegado seleccionamos Edit with Notepad++.

De una forma u otra, habremos abierto el archivo html con nuestro editor Notepad++.
Ahora escribimos el siguiente cdigo HTML y guardamos el archivo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<body>
<p>Esto es una prueba de pgina HTML 4.01 Transitional</p>
<p>Bienvenidos a aprenderaprogramar.com</p>
</body>
</html>
Una vez realizados los pasos anteriores hacemos doble click sobre el archivo creado y se nos
abrir una pantalla similar a la siguiente, donde podemos ver el resultado obtenido en nuestro
navegador.
Vista en el navegador Google Chrome
Si has seguido paso a paso todo lo que hemos expuesto y has llegado a visualizar en pantalla el texto, es
que has completado correctamente la instalacin de Notepad++, que es el editor que vamos a usar
durante el curso. Si no has podido instalarlo o tienes problemas para usarlo, revisa las instrucciones y
comprueba que las hayas seguido correctamente, consulta la ayuda de Notepad++ consulta en los
foros de aprenderaprogramar.com para obtener ayuda.

CONFIGURACIN BSICA DE NOTEPAD++ PARA CREAR PGINAS HTML.

Antes de poder comenzar a crear pginas HTML, necesitaremos realizar una configuracin bsica de
nuestro entorno de desarrollo. En nuestro caso, la configuracin ser bastante simple y consistir en
elegir la codificacin con la que guardaremos nuestros ficheros HTML y seleccionar el lenguaje con el
que vamos a trabajar.
Lo primero que vamos a hacer es abrir el programa Notepad++. Para esto, nos vamos a Inicio
Programas Notepad++ Notepad++. Despus se abrira el programa, mostrando una pantalla similar
a la siguiente.
Para seleccionar la codificacin con la que trabajaremos durante todo el curso, en la pestaa Formato,
clickamos sobre Codificar en UTF-8 sin BOM, de forma similar a como se muestra en la imagen. Cuando
edites archivos comprueba siempre que ests trabajando con esta codificacin.
Ahora tendremos que indicar que vamos a utilizar el lenguaje de etiquetas HTML. Para ello, en la
pestaa lenguaje abrimos H y seleccionamos HTML de entre todas las opciones posibles. Sera algo
similar a lo que se muestra en la imagen siguiente.
Ya tenemos todo listo para poder empezar a crear nuestras pginas HTML.
AUTOCOMPLETAR. UNA VENTAJA DE NOTEPAD++

Para facilitar la escritura de cdigo Notepad++ cuenta con una opcin de autocompletar, la cual se
activa en la pestaa Configurar -- > Preferencias. En la ventana que nos aparecer, tenemos que buscar
la opcin Autocompletar (autocompletion). Esta opcin puede estar dentro de la pestaa u opcin
Copia de seguridad/Autocompletar, o en la opcin Autocompletar, segn la versin de Notepad++
que estemos usando. Debemos activar la casilla Habilitar autocompletar en cada entrada (Enable
autocompletion on each input) para funciones y palabras (function and word completion). Tambin
activaremos Pistas para los parmetros de la funcin (Function parameters hint on input).
Ten en cuenta que la situacin de los mens y opciones puede variar de una versin a otra de
Notepad++, por lo que no siempre encontrars estas opciones en el mismo sitio que las estamos
describiendo.
AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE NOTEPAD++

Para activar el autocerrado inteligente de etiquetas HTML, en men superior seleccionamos TextFX
TextFX Settigns Autoclose XHTML/XML tag.
En algunas versiones de Notepad++ no aparece TextFX en el men superior. En este caso, debemos;
a) En el men Configurar -- > Preferencias. En la ventana que nos aparecer, tenemos que buscar la
opcin Autocompletar (autocompletion) como hicimos anteriormente y marcar la opcin html/xml
close tag
b) O bien instalar el plugin TextFX Characters accediendo a Plugins, elegir TextFX Characters y pulsar
Install. Una vez instalado el plugin, activar Autoclose XHTML/XML tag.
OTRAS VENTAJAS DE NOTEPAD++

Quizs te preguntes por qu hemos elegido Notepad++ para este curso. La respuesta es que tiene
diversas ventajas, por ejemplo:
Consume pocos recursos del sistema. No sobrecargars tu ordenador porque el programa es al

mismo tiempo que potente, ligero.
Dispone de la funcin autocompletar que ya hemos citado, que nos facilita ayuda mientras
estamos escribiendo el cdigo.
Permite abrir mltiples archivos simultneamente, y reemplazar un texto en todos los archivos
abiertos a la vez si as lo deseamos.
Permite abrir dos archivos y realizar una comparacin lnea a lnea entre ellos, indicndonos en
qu lneas existen diferencias entre un archivo y otro.
El cdigo se nos muestra con un conjunto de colores que permite ver con claridad las etiquetas
de apertura y cierre y otros elementos especiales de la codificacin.
Tiene muchsimas ms posibilidades, pero no podemos citarlas todas. En conjunto, es un buen

editor til para programadores a nivel profesional y para principiantes.
Es software libre que podemos descargar gratuitamente desde internet.
Como vers Notepad++ nos parece un buen editor de textos. Esto no quiere decir que no haya otras
editores igual de buenos y potentes. De hecho, si ya eres usuario de algn otro editor puedes seguir
este curso usndolo.

Descargar e instalar navegador Google Chrome. Visualizar pginas HTML.
LAS VENTAJAS DE GOOGLE CHROME. POR QU USAR CHROME?

En este curso vamos a usar Google Chrome, pero si lo prefieres por algn motivo como tenerlo ya
instalado, Mozilla Firefox tambin nos parece una opcin muy recomendable, y puedes seguir este
curso tambin con este navegador.
Otros navegadores como Internet Explorer tambin se pueden usar, pero en principio no es lo ms
recomendable por diversos motivos. Uno de ellos es que no dispone de las mismas herramientas que
Chrome o Firefox, que son los navegadores ms usados por programadores y desarrolladores web.
Vamos a citar algunas ventajas de Google Chrome:
-
El navegador se abre muy rpidamente en comparacin con otros navegadores. Google Chrome
es muy ligero, por eso tarda poco en abrirse.
El navegador tiene una buena velocidad de carga de las pginas web por las que vamos
navegando. Esto se debe a su estructura interna, que tambin es ligera.
Por el mero hecho de instalarlo, ya disponimos de una potente herramienta de anlisis y

depuracin de pginas web o Inspeccionador de elementos. Esta herramienta es similar a la
extensin Firebug de Mozilla Firefox. Sin embargo, en Mozilla esta extensin no viene
instalada por defecto, sino que hemos de instalarla a posteriori.
Si tenemos abiertas varias pestaas y una de ellas se tiene que cerrar debido a algn error o
bloqueo, no se nos quedar colgado el programa al completo, sino nicamente la pestaa o
pestaas afectadas.
DESCARGAR E INSTALAR EL NAVEGADOR GOOGLE CHROME. VISUALIZAR PGINAS HTML.

Para poder visualizar nuestras pginas web, vamos a instalar el navegador Google Chrome. Lo primero
que tenemos que hacer para instalar dicho navegador, es descargarlo de la web oficial de Google en la
direccin: http://www.google.com/chrome?hl=es
Tambin puedes acceder simplemente escribiendo descargar google chrome en un buscador (Google,
Yahoo, Bing, etc.) Una vez estemos en la direccin o URL de descarga se nos abrira una pantalla similar
a la siguiente:
Hacemos click en Descargar Google Chrome. Nos aparecer una pgina donde se nos pide que
aceptemos las condiciones. Aceptamos para instalar el navegador.
El proceso normalmente comienza mostrando una pantalla que indica Gracias por probar Google
Chrome y de forma automtica, comienza a su vez el proceso de instalacin en nuestro ordenador (si
te pide permiso para la instalacin acepta para permitir el proceso).
Una vez descargardo e instalado, ya podremos ver pginas web con ste navegador. Para acceder a
Google Chrome, nos iremos a Inicio --> Todos los programas --> Google Chrome. Tambin podremos
acceder desde el escritorio a travs de un enlace directo.
LAS CUESTIONES MS BSICAS EN GOOGLE CHROME (Y EN GENERAL PARA CUALQUIER NAVEGADOR)

Al abrir el navegador Google Chrome se nos mostrar una ventana similar a la siguiente. Ten en cuenta
que el aspecto puede variar segn la versin de Chrome que estemos usando, por tanto tendremos que
buscar las opciones segn aparezcan en nuestro computador, que puede diferir en algunos detalles de
lo que indicamos aqu.
Una vez abierto Chrome podremos abrir tantas pestaas como queramos, introducir una direccin URL
en la barra de direcciones, recargar la pgina actual (tambin podremos pulsar F5 como atajo de
teclado para conseguir recargar una pgina) y acceder al men de opciones de Google Chrome entre
otras operaciones.
Para cambiar la pgina web de inicio que viene por defecto en nuestro navegador Google Chrome (la
que aparece cada vez que abrimos el navegador), procederemos de la siguiente forma:
a) En algunas versiones de Chrome, tendremos que hacer click en Llave inglesa y dentro del men
desplegable que nos aparece en la opcin opciones. Se nos abrir una nueva pestaa donde en la
opcin Pagina de inicio pondremos por ejemplo http://aprenderaprogramar.com ( o la pgina que
queramos). Otras versiones no traen llave inglesa.
b) En otras versiones de Chrome, haremos click en el icono a la derecha de la barra de direcciones para
desplegar el men y elegimos Configuracin. En la opcin Iniciar sesin, elegimos la opcin Abrir
una pgina especfica o un conjunto de pginas -- > Establecer pginas, introducimos la URL de la
queramos sea nuestra pgina de inicio, por ejemplo http://aprenderaprogramar.com ( o la pgina que
queramos) y pulsamos aceptar.
c) Otra opcin para acceder a la configuracin es escribir en la barra de direcciones lo siguiente (como si
fuera una direccin web): chrome://settings/
LIMPIAR LA CACH Y OTRAS OPERACIONES TILES QUE USAREMOS CON FRECUENCIA

Llamamos cach o cache a contenidos que se almacenan en nuestro navegador y que no se
descargan desde internet, sino que los tenemos localmente en nuestro equipo. Estos contenidos
pueden ser texto o imgenes y permite que cuando navegamos por una web las pginas se muestren
ms rpido ya que parte de la informacin no se descarga de internet (o no se actualiza desde los
archivos fuente) sino que se mantiene en nuestro navegador. Sin embargo, cuando estamos creando
pginas web esto puede dar lugar a resultados engaosos, ya que tras hacer una modificacin puede
que el navegador no la muestre por estar utilizando contenidos de la cach. Por tanto una operacin
que va a ser de gran utilidad, es limpiar la cach cuando deseemos que todo el contenido venga
directamente de internet. Si no eliminamos la cache puede que lo que estemos visualizando en nuestra
pantalla de ordenador sea informacin cacheada y, por lo tanto, no actualizada.
Para limpiar la cach del navegador tenemos que hacer lo siguiente: Llave inglesa o icono para
desplegar el men --> Herramientas --> Eliminar (borrar) datos de navegacin. Tambin podemos
acceder escribiendo directamente en la barra de direcciones chrome://settings/clearBrowserData como
si se tratara de una direccin web.
En la pantalla que se nos muestra a continuacin seleccionamos todas las opciones, y para definir desde
cundo en la opcin Eliminar elementos almacenados desde: elegimos el origen de los tiempos (es
decir, borrarlo todo sin dejar nada).
Para guardar una pgina web en local debemos simplemente ir a llave inglesa o icono de despliegue de
men y seleccionar Guardar pgina como y seleccionar el nombre y ubicacin donde queremos
guardar la pgina HTML.
Para aadir una pgina a favoritos debemos clickar sobre marcadores (normalmente un icono con
forma de estrella a la derecha de la barra de direcciones) y elegir el nombre y carpeta donde
guardaremos el nuevo marcador favorito. Esto sirve para ir manteniendo una coleccin de enlaces a
pginas web que visitamos con frecuencia, de forma que pulsando sobre el enlace accedemos
directamente a la web sin necesidad de escribir la url en la barra de direcciones. Para visualizar esa
coleccin de enlaces tenemos que desplegar el men y elegir la opcin Marcadores -- > Mostrar barra
de marcadores.
Si queremos ver las propiedades de una imagen clickamos sobre la imagen con el botn derecho del
ratn y pulsamos en Inspeccionar elemento en el men desplegable que se nos abre. As veremos el
tamao de la imagen.
Para hacer zoom basta con utilizar los siguientes atajos de teclado: Ctrl + + (ms zoom, es decir,
pulsando la tecla CTRL y al mismo tiempo la tecla +, logramos acercar la vista), Ctrl + - (menos zoom,
es decir, alejar la vista). O si lo preferimos usar Ctrl + ruleta o rueda del ratn hacia arriba o hacia
abajo, para acercar o alejar la vista.
En cualquier caso, para volver a ver la pgina con su tamao original slo tenemos que pulsar Ctrl + 0.
CMO ACTUALIZAR GOOGLE CHROME

Google Chrome se actualiza automticamente cuando detecta que hay una nueva versin del
navegador. El proceso de actualizacin se produce en segundo plano y no es necesario que realices
ninguna accin.
No obstante, puedes comprobar si el navegador est actualizado pulsando sobre llave inglesa o icono
para desplegar el men --> Informacin de Google Chrome. Ah te aparecer un mensaje con la versin
que ests usando actualmente, y te indicar si el navegador est actualizado o no. Tambin puedes
acceder a esta informacin escribiendo chrome://chrome/ en la barra de direcciones como si fuera una
direccin web.
Que el navegador se mantenga actualizado sirve para tratar de evitar posibles fallos de seguridad y
ataques de virus o programas maliciosos.

Conceptos bsicos. Estructura bsica de una pgina HTML. Head, body.
CONCEPTOS BSICOS. ESTRUCTURA BSICA DE UNA PGINA HTML. ETIQUETAS HEAD, BODY.
Vamos a explicar conceptos bsicos de HTML. En primer lugar veremos cul es la estructura bsica que
toda pgina HTML debe cumplir. Para ello introduciremos las etiquetas HTML, HEAD y BODY, y sus
respectivas etiquetas de cierre.
Toda pgina web viene definida con la siguiente estructura bsica (recuerda que la primera lnea es una
etiqueta relativa a la versin/variante de HTML que declaramos usar y que esta primera etiqueta no es
estrictamente necesaria. Sirve nicamente para indicar qu estndar de HTML es el que declaramos
usar).
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
<html>
<head>
<title>Ttulo de la pgina web</title>
...
</head>
<body>
Cuerpo de la pgina web
</body>
</html>
Transitional//EN"
Vamos a analizar ms detenidamente las distintas secciones que componen la pgina.

La etiqueta <html> define que se trata de cdigo HTML.
CABECERA DEL DOCUMENTO (HEAD)

La cabecera del documento es la seccin comprendida entre <head> y </head>. En ella se debe
encontrar, obligatoriamente, el ttulo (entre las etiquetas <title> y </title>).
El ttulo de la pgina debe describir su contenido por ejemplo:
<title>Manuales y tutoriales sobre programacin aprenderaprogramar.com</title>
No sera adecuado usar el ttulo <title>Pgina de Inicio</title> porque ste no dice nada por s solo.
Debemos usar ttulos que sean descriptivos relativos al contenido de la pgina.
Adems de la etiqueta title dentro de la seccin de cabecera se suelen incluir otras etiquetas. La
siguiente tabla muestra un resumen de elementos que pueden ir dentro de la etiqueta head.
Etiqueta en cabecera
Funcin
Es obligatoria?
<title>
Da un ttulo al documento HTML
<base>
Define ruta de acceso
No
<link>
Define archivos vinculados
No
<meta>
Define metadatos como descripcin y palabras clave
No
<script>
Delimita scripts includos
No
<style>
Delimita definicin de estilos
No
Comentaremos brevemente estas etiquetas a continuacin.

Etiqueta <base>. Sirve para indicar la URL base en caso de especificarse URLs relativas dentro de la
pgina
web.
Por
ejemplo
<base
href="http://www.aprenderaprogramar.com/images/"
target="_blank"> hara que si escribimos como ruta de una imagen "logo.png" dicha ruta sea en
realidad "http://www.aprenderaprogramar.com/images/logo.png"
Etiquetas <link>. Sirven para indicar que el documento html est relacionado con otro archivo o
recurso externo. Por ejemplo <link rel="stylesheet" type="text/css" href="estilos.css"> sirve para indicar
que el documento HTML est vinculado al archivo estilos.css
Etiqueta <style>. Sirve para incluir estilos CSS que permiten dotar de colores, bordes, imgenes de
fondo, etc. a los elementos de la pgina web.
Etiquetas <meta>. Sirven para incluir informacin que no se muestra como parte de la pgina web pero
sirve para informar de caractersticas de la pgina web, como su descripcin breve y sus palabras clave.
Ejemplo:
<meta name="description" content="Didctica de la programacin aprenderaprogramar.com">
<meta name="keywords" content="didctica, divulgacin, programacin, aprender">
En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas (description) y
algunas palabras clave (keywords) para su localizacin. Esto es muy til para que nuestra pgina
aparezca en los buscadores (google, bing, yahoo, etc.).
Etiquetas <script>. Sirven para incluir cdigo en lenguajes de script.

Dentro de la cabecera en muchas pginas se incluye cdigo en JavaScript, que es un lenguaje de
programacin que los navegadores son capaces de reconocer e interpretar. El cdigo JavaScript se
reconoce porque va comprendido entre las etiquetas
<script type="text/javascript">
<!-Aqu ira el cdigo
// -->
</script>
Nosotros en este curso no vamos a estudiar JavaScript porque nos vamos a centrar en las cuestiones
bsicas de HTML, pero si continuas avanzando como programador web ser un lenguaje que debers
tener en cuenta ms adelante.
CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde debemos
colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body>.
A lo largo del curso iremos estudiando qu elementos pueden existir dentro de la etiqueta body, as
como cul es su sintaxis y organizacin.

Significado de deprecated. Etiqueta body. Cuerpo HTML.
SIGNIFICADO DE DEPRECATED
Cuando se trabaja en programacin y desarrollos web veremos que con frecuencia aparece el trmino
ingls deprecated. Algunas veces se trata de traducir al espaol por deprecado, pero en realidad
este trmino no existe en espaol. En su lugar podemos usar desaprobado o no recomendado.
Al igual que hoy da disponemos de computadoras ms potentes y efectivas que hace 20 aos por
evolucin de la tecnologa, tambin podemos decir que los lenguajes evolucionan y cambian.
As, algunas formas sintcticas o expresiones HTML que se consideraban vlidas hace unos aos han
pasado a considerarse no recomendados para los desarrollos web actuales. Sin embargo, dado la gran
cantidad de pginas web que se construyeron usando estas formas del lenguaje anticuadas y a que los
programadores no podan adaptarse de un da para otro a los cambios en los lenguajes, en lugar de no
permitir estas expresiones, las nuevas versiones de los lenguajes las clasifican como deprecated o no
recomendadas.
Un ejemplo de uso no recomendado (deprecated) es la inclusin de un atributo bgcolor en la etiqueta
body de un documento HTML.
Por ejemplo <body bgcolor=yellow> hace que la pgina web tenga un fondo amarillo mediante el uso
de un atributo, bgcolor, que est clasificado como deprecated. Esto significa que no debemos usar el
atributo bgcolor porque se ha definido otra forma de dar color de fondo al elemento body de un
documento HTML (en concreto mediante el uso de estilos CSS).
Las sintaxis, atributos, expresiones, etc. que estn catalogadas como deprecated siguen siendo
aceptadas por los navegadores, aunque con el paso del tiempo pasarn de deprecated a not
supported, es decir, no sern reconocidas por los navegadores. Por tanto en ningn caso debemos
usarlas.
Dejando claro que no debemos usarlas, sin embargo conocer las formas deprecated puede tener cierto
inters. Por qu?
1. Nos permiten conocer la evolucin del lenguaje
2. En caso de que tengamos que revisar, corregir o modificar cdigo desarrollado por otra persona
donde se usan formas deprecated, sabremos identificar y subsanar los problemas existentes.
La existencia de formas deprecated en los desarrollos web de hoy en da se debe a mltiples motivos:
miles de pginas web no se han actualizado a los nuevos estndares y se mantienen como fueron
construidas hace aos. Muchos programadores siguieron usando formas deprecated (y en algunos
casos siguen usando algunas de estas formas). Muchos programas para creacin semiautomatizada de
pginas web usaban o usan formas deprecated.
A lo largo del curso estudiaremos formas deprecated, que fueron muy utilizadas en su da pero cuyo
uso no es recomendado hoy en da. La inclusin de estas formas en este curso obedece a ser capaces de
reconocer y corregir problemas en desarrollos web con los que nos podamos encontrar. Cuando un
elemento est considerado como deprecated lo indicaremos explcitamente.
BODY BGCOLOR (DEPRECATED)

Atributo que fue muy usado en el pasado para especificar el color de fondo de la pgina. El color se
define en base hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green,
Blue). Es decir, cada color se define con el carcter # seguido de 6 letras nmeros. Cada combinacin
de letras o nmeros da lugar a distintos colores. Tambin se puede usar el nombre en ingls de los
colores predefinidos en los navegadores (red, blue, green, etc.).
Sintaxis (deprecated): <body bgcolor=#0000FF> o <body bgcolor=blue>
En este ejemplo el color azul vemos que lo podemos poner tanto con su cdigo como simplemente
escribiendo blue, porque es un color bsico. Los colores no bsicos slo podremos indicarlos como
cdigo hexadecimal. Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar
escribiendo en un buscador como Google, Yahoo o Bing el texto colores hexadecimales y entrando a
cualquiera de las pginas que te permiten seleccionar un color y te dicen cul es su cdigo.
Recordar: bgcolor es un atributo de body que no debe usarse por estar deprecated o not supported.
BODY TEXT (DEPRECATED)

Atributo que fue muy en el pasado para definir el color del texto. Su formato es el mismo que el de
bgcolor. Si no se pone nada es negro.
Sintaxis (deprecated): <body text=#0000FF> o <body text=blue>
Recordar: text es un atributo de body que no debe usarse por estar deprecated o not supported.
BODY BACKGROUND
Atributo que fue muy usado en el pasado para especificar la ruta y nombre de archivo (URL) de la
imagen (formato GIF, JPG o PNG habitualmente) que ser usada como fondo del documento. Esta se
ver como mosaico para cubrir toda la zona de visualizacin del navegador si es pequea (lo habitual
era poner como fondo una imagen pequea y dejar que se repitiera, porque as la pgina carga ms
rpido).
Sintaxis tipo (deprecated): <body background="ruta/archivo.gif">
Por ejemplo: <body background="http://www.aprenderaprogramar.com/images/BgTexture.jpg">

Cuando se trabaja en desarrollos web es conveniente especificar la ruta de modo relativo, esto quiere
decir que si cambiamos el directorio completo donde estn nuestras pginas (nuestros archivos html),
desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo vlida. En el primer ejemplo
que pusimos, la ruta utilizada es absoluta. Dentro de un servidor tambin se pueden usar rutas
relativas, el formato sera similar a ste:
<body background="images/BgTexture.jpg">
Como ves en este ejemplo no aparece el nombre del dominio. De esta forma si cambiamos el dominio,
las rutas de las imgenes seguirn siendo correctas.
Veamos otro ejemplo. Supongamos la siguiente estructura de directorios y archivos:
APR2HTML/pagina1.html: el archivo denominado pagina1.html est dentro de la carpeta

APR2HTML.
APR2HTML/gifs/fondo.gif
APR2HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html est dentro de una
subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta APR2HTML.
Si desde la pgina pagina1.html queramos poner como fondo la imagen fondo.gif, que se encuentra en
el directorio gifs, se deba poner:
<body background="gifs/fondo.gif">
Si desde la pgina pagina2.html queramos poner como fondo la imagen fondo.gif, que se encuentra en
el directorio gifs, se deba poner:
<body background="../gifs/fondo.gif">
Fjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior. Si quisiramos
subir dos niveles, por ejemplo si tenemos la pgina en APR2HTML/ejemplos/miweb/pagina3.html
escribiramos ../../gifs/fondo.gif. Aunque el atributo background est deprecated, lo dicho para las
rutas es til cuando trabajes con desarrollos web actuales.
MRGENES: LEFTMARGIN, TOPMARGIN, RIGHTMARGIN Y BOTTOMMARGIN (DEPRECATED)

Adems de bgcolor, text y background, tambin se usaban atributos para definir mrgenes, todos ellos
clasificados como deprecated hoy da.
Para especificar los mrgenes se utilizaba el atributo margin, con su correspondiente indicacin
indicadora de lateral afectado. As se utilizaba "leftmargin" para el margen izquierdo, "topmargin" para
el margen uperior, "rightmargin" para el margen de la derecha y "bottommargin" para el margen
inferior.
Los mrgenes se suelen medir en pixeles, trmino ingls que alude a cada uno de los pequeos puntos
que conforman la imagen en una pantalla (ten en cuenta que una pantalla tiene unas dimensiones en
pixeles de ancho y pixeles de alto). Para establecer mrgenes de 10 pixeles en todos los sentidos se
escriban expresiones de este tipo (deprecated):
<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>
RESUMEN
En el pasado se usaban una serie de atributos para la etiqueta body que permitan dotar el cuerpo de la
pgina de un aspecto o presentacin determinada. Prueba en tu navegador estas formas y comprueba
si tu navegador las reconoce. Hoy da el uso de estas formas est considerado una mala prctica, por lo
que no deben usarse, aunque s conocerse por si hubiera que corregir webs donde existan.
En lugar de estos atributos hoy da se usan tcnicas CSS. Cuando termines este curso, te recomendamos
consultes el curso aprenderaprogramar.com CSS desde cero para conocer estas tcnicas, dado que los
desarrollos web de hoy en da no pueden entenderse sin el uso de CSS.

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERNDICE,

SUBNDICE.
Vamos a ver una serie de etiquetas y atributos bsicos para la creacin de pginas webs. No entraremos
a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente indicaremos
las que han sido ms utilizadas en el pasado, aunque algunas se consideren deprecated (no
recomendadas).
Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para
ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que
transforman ese texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas
estn no recomendadas (deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido
un nuevo significado en las ltimas versiones de HTML, pero no vamos a entrar a definir este nuevo
significado. Debido a su amplia difusin en el pasado conviene conocer los que fueron usos
tradicionales de estas etiquetas, a medida que avances en el conocimiento de HTML podrs comprobar
cmo para algunas etiquetas se consideran hoy da nuevos significados.
ETIQUETA
USO
OBSERVACIONES
<b></b>
Poner texto en negrita
Puede ser sustituido por CSS.
<strong></strong>
Poner texto en negrita
<i></i>
Poner texto en cursiva
<em></em>
Poner texto en cursiva
<u></u>
Poner texto subrayado
Deprecated. Sustituir por CSS.
<small></small>
Poner texto ms pequeo
<big></big>
Poner texto ms grande
<sub></sub>
Poner texto subndice
<sup></sup>
Poner texto superndice
<strike></strike>
Poner texto como tachado
<s></s>
<del></del>
Como vers, algunas de las etiquetas que vamos a explicar estn obsoletas (deprecated en ingls). Estas
etiquetas en principio no deben de ser usadas porque dejarn de existir en las nuevas versiones a partir
de HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para
incluirlas en este curso son:
-
Son etiquetas que han sido muy populares en el pasado y te puedes encontrar muchas pginas
webs que hacen uso de ellas.
Son etiquetas reconocidas por prcticamente todos los navegadores actuales.
Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el
punto de vista didctico. Una vez se entiendan estos conceptos, es ms fcil abordar aspectos
ms avanzados como las hojas de estilo CSS.
Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o
la palabra que queramos transformar en su interior. Por ejemplo:
<b>Este texto aparecer escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea,
diferentes etiquetas. Por ejemplo, si queremos que un texto est en negrita y en cursiva escribiramos
esto: <b><i>Este texto aparecer escrito en negrita y en cursiva</i></b>.
Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden,
de la ms interior a la ms exterior.
Veamos las etiquetas que hemos citado en la tabla anterior.
NEGRITA
Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilizacin de cualquiera
de ellas es en principio indiferente (aunque pueda atriburseles un significado diferente a cada una de
ellas no vamos a prestarle atencin a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta
<strong>. Aqu va un ejemplo de cdigo y lo que veramos en pantalla:
Esta palabra la vamos
<strong>tambin</strong>
poner
en
<b>negrita</b>
esta
otra
Esta palabra la vamos a poner en negrita y esta otra tambin
Normalmente se preferir usar tcnicas CSS en lugar de esta etiqueta, pero es una etiqueta que
debemos conocer.
CURSIVA
Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto
debes cerrarla con la etiqueta </i>). Tambin se ha utilizado la etiqueta <em>. Como en el caso de la
negrita, aunque podran atriburseles distintos significados no vamos a prestarle atencin a esta
cuestin ahora. Aqu presentamos un ejemplo:
Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>tambin</em>
Esta palabra la vamos a poner en cursiva y esta otra tambin
Normalmente se preferir usar tcnicas CSS en lugar de esta etiqueta, pero es una etiqueta que
debemos conocer.
SUBRAYADO U (DEPRECATED)
Para que la palabra o el texto quedara subrayado se us en el pasado el rodearlo con la etiqueta <u> y
cerrarlo con su correspondiente etiqueta </u>. As se subrayara una frase:
<u>As subrayaramos una frase importante</u>
As subrayaramos una frase importante
Est etiqueta est obsoleta (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el
resultado deseado se deben usar hojas de estilo CSS como veremos ms adelante.
PALABRAS MS GRANDES O MS PEQUEAS

Puede que en una frase queramos destacar un palabra por medio de una variacin de tamao sin
necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos ms
adelante). La variacin de tamao se poda conseguir gracias a las etiquetas <big> y <small>. Sus
propios nombres en ingls nos indican cules eran sus funciones: <big> agrandar el texto y <small> lo
disminuir. No recomendamos su uso ya que las nuevas versiones de HTML no van a admitir esta
etiqueta. La modificacin del tamao del texto se debe hacer a travs de tcnicas CSS.
Cada vez que se escribe una etiqueta big, se hace el texto un punto ms grande. Estas etiquetas
tambin se podan combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la
palabra dos puntos. Un ejemplo sera el siguiente:
Esta palabra se va a escribir <small>pequeita</small>, esta se va a escribir

<big>ms grande</big> y sta <big><big>ms grande an</big></big>.
Esta palabra se va a escribir pequeita, esta se va a escribir ms grande y sta ms
grande an.
SUPERNDICES Y SUBNDICES
Mediante HTML tambin podemos escribir expresiones con smbolos matemticos. Gracias a las
etiquetas siguientes podrs escribir subndices y superndices fcilmente. La etiqueta <sub> te servir
para escribir un subndice y <sup> ser la etiqueta para un superndice. As nos queda un ejemplo como
el siguiente:
Gracias a estas etiquetas podemos escribir cualquier expresin con smbolos
matemticos como esta: H<sub>2</sub>O o nmeros elevados a potencias
7<sup>3</sup>.
Gracias a estas etiquetas podemos escribir cualquier expresin con smbolos matemticos como esta:
H2O o nmeros elevados a potencias 73.
Los subndices y superndices con estas etiquetas pueden ser sustituidos por tcnicas de CSS, pero
muchas personas prefieren usar estas etiquetas.
TEXTO TACHADO
Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos
de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Aqu presentamos una
muestra:
Puedo proceder a tachar una palabra <strike>as</strike>, <s>as</s> o <del>as</del>
Puedo proceder a tachar una palabra as, as o as
La etiqueta strike est deprecated, lo que significa que ya no se recomienda su uso. La etiqueta s
tambin fue deprecated, aunque a partir de HTML 5 se ha redefinido su significado. Para lograr el
tachado de un texto se recomienda usar tcnicas CSS (hojas de estilo) como veremos ms adelante.
EJERCICIO
En el siguiente cdigo hay elementos que en las versiones ms recientes de HTML se consideran
deprecated o not supported. Escribe el cdigo en un editor de textos como el bloc de notas o
Notepad++, gurdalo con un nombre como ejemplo.html y visualzalo en tu navegador.
Responde a las siguientes preguntas:
Qu etiquetas de las empleadas sera recomendable no utilizar y reemplazar mediante uso de tcnicas
CSS?
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo bsico: uso de etiquetas de formato y atributos bsicos para la etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Tachado</del>
<big>Grande</big>
<small>pequeo</small>
Esto es un<sub>subndice</sub>
Y esto un<sup>superndice</sup>
</pre>
</body>
</html>
Ejemplo de resultado que se puede obtener en algunos navegadores. Ten en cuenta que al usarse
atributos deprecated la respuesta de diferentes navegadores puede no ser la misma.
Nota 1: Hemos utilizado la etiqueta <pre> que comentaremos ms adelante.

Nota 2: si ests utilizando Notepad++ y obtienes una visualizacin extraa de las tildes, por ejemplo
Ejemplo bsico en lugar de Ejemplo bsico recuerda elegir como codificacin UTF-8 sin BOM.
Tambin aade la etiqueta <meta charset="utf-8"> dentro de la cabecera del cdigo para indicar el
juego de caracteres que se debe emplear.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los

foros
Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.
ETIQUETAS HTML BSICAS: IMGENES

Continuamos viendo etiquetas y atributos bsicos para la creacin de pginas webs. No entramos a
describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las
que han venido siendo ms utilizadas. Tener en cuenta que algunas etiquetas o atributos estn
obsoletas (deprecated), aunque conviene conocerlas por la difusin que tuvieron.
Incluir imgenes en una pgina web es muy sencillo, simplemente debemos tener en cuenta que las
imgenes tienen que tener los formatos GIF, JPG o PNG. Las imgenes dentro de una pgina web se
incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:
<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no
se recomienda usar (deprecated):
ATRIBUTO
USO
OBSERVACIONES
src
Este atributo es obligatorio e indica el nombre del

archivo de imagen (entre comillas) o la URL desde la
que se va a obtener la imagen.
Obligatorio. Si no se
incluye no se mostrar
imagen alguna.
align
Permite controlar la alineacin de una imagen con

respecto a una lnea de texto adyacente o a otras
imgenes en esa lnea. Los valores posibles son los ya
conocidos left, right, middle, top, bottom.
Atributo obsoleto
(deprecated). Sustituir por
CSS.
alt
Entre comillas podremos escribir un texto que se

mostrar si la imagen no llega a cargar, mientras se
carga o, cuando visualizando ya la imagen, pasamos el
ratn por encima.
Atributo requerido, se
recomienda incluirlo
aunque si no se hace la
imagen se mostrar.
width
Este atributo es opcional pero podemos ponerlo para

especificar al navegador que muestre la imagen con
un tamao especfico. Significa ancho de la imagen
que vamos a representar. Si no se escribe, se carga la
imagen con el tamao original.
Opcional. Indicar valor en

pixeles. Tambin se puede
indicar con CSS.
height
Al igual que el atributo width, es opcional. Este

atributo indica el alto de la imagen.
Opcional. Indicar valor en

pixeles. Tambin se puede
indicar con CSS.
border
Con border especificamos el ancho del borde que

rodea la imagen. Si se indica 0 equivale a sin borde.
Atributo obsoleto
(deprecated). Sustituir por
CSS.
EJEMPLO
Escribe este cdigo en un editor de texto como bloc de notas Notepad++ y guarda el archivo con
extensin html. A continuacin visualzalo en tu navegador. Si no consigues ver las imgenes, es porque
la ruta no est disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que
tengas en el mismo directorio que el archivo html.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de imgenes - aprenderaprogramar.com</title>
</head>
<body>
<img
src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png"
alt="Logotipo
APR2">
<img
alt="Logotipo APR2" width="50%">
<img
alt="Logotipo APR2" width="200px">
<img
alt="Logotipo APR2" width="200px" border="5">
</body>
</html>
Como podemos observar (ver imagen anterior), el atributo width se ha definido tanto en pixeles como
en porcentaje (al igual pasa con el atributo height), aunque las ltimas versiones de HTML no admiten
el uso de porcentajes. Por ello recomendamos indicarlo en pxeles.
Ten en cuenta que al especificar la direccin de la imagen, si esta imagen est en tu propio servidor
puedes utilizar una direccin relativa, es decir, estas dos expresiones son vlidas:
<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo
APR2">
<img src="templates/apr02062010/images/logo.png" alt="Logotipo APR2">
Tambin podrs usar como origen de la imagen otro servidor, lo que significa que el navegador ir a
buscar la imagen en la ruta que le indiques. Pero en este caso, debers especificar la ruta completa, no
ser vlido una ruta relativa. Ejemplo:
<img src="http://images4.hiboox.com/images/4711/9ed218f1fd2a5131ace4ee5a70e6198e.jpg alt=Queso
de almendras palmero>
Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya
no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se
conozca su significado, ya que se pueden encontrar en muchas pginas web. Incluso hay
desarrolladores web que siguen usando estas etiquetas. Ms adelante veremos cmo conseguir los
efectos deseados de la forma recomendada hoy da: mediante el uso de estilos (hojas de estilo CSS).
La etiqueta img cuenta con otros atributos menos usados que no vamos a citar aqu.
EJERCICIO
Abre cuatro pginas web distintas y captura la ruta de 4 imgenes que puedas encontrar en ellas (las
imgenes que prefieras). A continuacin crea un documento html donde incorpores un texto que
indique el contenido de la imagen y a continuacin se vea la imagen. Guarda el documento con un
nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo:
Imagen que refleja una boda:
( aqu la imagen)
Imagen que muestra un mercado:
( aqu la imagen)
Imagen que muestra un atleta:
( aqu la imagen)
Imagen que refleja un atardecer:
( aqu la imagen)
Nota: la ruta de una imagen de una pgina web se puede capturar normalmente haciendo click con el
botn derecho del mouse sobre la imagen y eligiendo la opcin Copiar la ruta de la imagen Ver
informacin de la imagen Propiedades Copiar URL de la imagen Inspeccionar elemento,
dependiendo del navegador que estemos utilizando.
respuestas
son
correctas
puedes
consultar
en
los

foros
Encabezados <h1><h6>, prrafos <p> y etiqueta <pre> en HTML.
ENCABEZADOS <h1><h6>, PRRAFOS <p> Y ETIQUETA <pre> EN HTML.

Continuamos viendo una serie de etiquetas y atributos bsicos para la creacin de pginas webs. No
entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente
explicaremos las que han venido siendo ms utilizadas.
ENCABEZADOS
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el ttulo del
artculo, categora, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>.
Esta etiqueta viene acompaada de un nmero, desde el 1 hasta el 6, predefiniendo stos el tamao
del encabezado. As, <h1> sera el encabezado ms grande mientras que <h6> sera el ms pequeo.
A continuacin mostramos un cdigo ejemplo de los seis diferentes encabezados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title>
</head>
<body>
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo ms grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeo</h5>
<h6>Texto muy pequeo</h6>
</body>
</html>
Podemos ver el resultado obtenido en la siguiente imagen.
Como podemos observar en el ejemplo anterior, cada encabezado est separado del anterior y del
siguiente por un salto de lnea sin que nosotros en el cdigo hayamos escrito nada ya que los
encabezados generan por s solos un salto de lnea.
Ten en cuenta que en una pgina podras poner un texto de tamao grande indicndolo de otra
manera, por ejemplo modificando el tamao de fuente sin usar encabezado. Por qu usar entonces
encabezados? Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como
google, yahoo o bing cuando encuentran una etiqueta <h1> le dan ms relevancia que a un texto del
mismo tamao que no sea un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc.
para obtener un mejor posicionamiento de nuestras pginas web en los buscadores. Es decir, usar h1
no slo supone agrandar el tamao de la letra, tambin supone indicar que el texto incluido entre esas
etiquetas tiene una importancia superior al resto de texto y esto es valorado por los buscadores. Por
supuesto, de nada servir que intentes incluir todo el texto de tu pgina web dentro de etiquetas h
porque los buscadores no son tontos: detectarn ese truco e incluso te penalizarn haciendo que no
aparezca tu pgina web en las bsquedas. Por tanto los encabezados deben usarse con moderacin y
equilibrio.
PRRAFOS Y APLICAR ESTILOS A PRRAFOS

Para indicarle al navegador que queremos poner un texto en un prrafo, debemos escribirlo entre las
etiquetas <p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por
abajo.
Un atributo muy usado en el pasado (hoy deprecated) fue align, que serva para establecer la alineacin
del texto dentro del prrafo.
ATRIBUTO
USO
Especifica la alineacin del texto dentro del prrafo.
align
left: alineacin del texto a la izquierda

right: alineacin del texto a la derecha
center: alineacin del texto centrada
justify: alineacin del texto justificada
OBSERVACIONES
Atributo obsoleto (deprecated) en su uso
en la forma <p align=center>Texto<p>.
En lugar de esta sintaxis, usar CSS.
Ejemplo de uso correcto empleando
tcnica CSS:
<p style=text-align: center;>Texto
centrado</p>
Como comprobars, hemos introducido el uso de estilos. Aunque en este curso no vamos a hablar de
CSS ms que superficialmente, conviene que te vayas familiarizando con esta tcnica. Un estilo sirve
para moldear la presentacin de algo (un prrafo, un contenedor). En nuestro caso, estamos diciendo
que el estilo a aplicar al prrafo incluye el alineado del texto (atributo text-align) al centro (center). Un
estilo se puede aplicar de distintas maneras. Una forma de hacerlo es escribiendo en lnea (a
continuacin de la etiqueta) con la sintaxis style = caracterstica a aplicar n1 ; caracterstica a aplicar
n2; caracterstica a aplicar n;.
Por ejemplo: <p style = text-align: center; font-size: 12px; color:blue;> Este texto estar centrado,
tendr un tamao de fuente de 12 pixeles y color azul cuando se vea en el navegador</p>
Como vemos para definir un estilo escribimos style = un nombre de atributo, dos puntos, el valor del
atributo y terminacin en punto y coma. Otros atributos se pueden especificar de la misma manera
(tantos como queramos) hasta terminar con un punto y coma y las comillas de cierre.
Iremos introduciendo cuestiones bsicas relacionadas con estilos poco a poco y a medida que las
vayamos necesitando. Cuando termines este curso te recomendamos seguir el curso CSS desde cero de
aprenderaprogramar.com, pues CSS es una tcnica imprescindible hoy da para desarrollos web.
EJEMPLO
Escribe este cdigo en un editor de textos como bloc de notas o Notepad++. Gurdalo como archivo
con extensin html y a continuacin visualzalo en tu navegador comprobando que obtienes el
resultado esperado.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de prrafos - aprenderaprogramar.com</title>
</head>
<body>
<p style="text-align: center;">Este texto se alinear al centro</p>
<p style="text-align: right;">Este texto se alinear a la derecha</p>
<p style="text-align: left;">Este texto se alinear a la izquierda</p>
</body>
</html>
LA ETIQUETA <PRE>
La etiqueta <pre> se denomina de texto preformateado y sirve para que el navegador interprete el
texto escrito tal y como est, respetando los saltos de lnea, espacios, etc. indicados.
Escribe este cdigo, gurdalo como archivo HTML y comprueba sus resultados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
Escribo esta lnea as
Dejo dos lneas de separacin
y escribo tres ms.

</body>
</html>
Sin poner ninguna etiqueta, el navegador respondera as:
En ausencia de la etiqueta <pre> el navegador no toma en consideracin que en el cdigo fuente

existan saltos de lnea, espacios, etc. en el texto. En cambio utilizando la etiqueta <pre> y cerrndola
con su correspondiente etiqueta el navegador s respetar los saltos de lnea, espacios, tabuladores.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
<pre>
Escribo esta lnea as
Dejo dos lneas de separacin
y escribo tres ms.

</pre>
</body>
</html>
El texto dentro de una etiqueta pre normalmente se muestra con un tipo de fuente especial (Courier o
similar) de ancho fijo, lo que le da un aspecto de texto escrito con mquina de escribir.
Como podremos observar al comprobar los resultados, con esta etiqueta se muestra el texto tal y como
lo hayamos escrito respetando saltos de lnea, espacios, tabuladores, etc.
La etiqueta <pre> interesa usarla en determinadas ocasiones, pero es poco frecuente hacer uso de ella.
Por qu? Porque normalmente se puede dar el formato adecuado a los textos usando tcnicas CSS,
que resultan ms fciles y cmodas de usar. No obstante, es una etiqueta que debemos conocer.
EJERCICIO
Crea una pgina web que conste de lo siguiente: un encabezado h1 que ponga Las fotos de mi viaje. A
continuacin un prrafo explicando un viaje. A continuacin un encabezado h2 que indique Fotos de la
primera parte del viaje y a continuacin 2 fotos. Seguidamente un encabezado h2 que indique Fotos
de la segunda parte del viaje y a continuacin 2 fotos. Finalmente usando las etiquetas pre haz que
aparezca este texto en la parte inferior usando espacios y tabuladores:
Los viajes
son libertad
son amistad
son crecimiento personal
No desaproveches una oportunidad!
Guarda el documento con un nombre como ejemploCU00715B.html y comprueba que se visualiza

correctamente. Para comprobar si tus respuestas son correctas puedes consultar en los foros
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
LNEAS SEPARADORAS. SEPARADORES EN HTML: ETIQUETA <HR>

Para separar un texto de otro o un prrafo de otro podemos utilizar una lnea horizontal de un tamao
o un grosor determinado por nosotros. Este separador lo escribimos con la etiqueta <hr>. Al contrario
que muchas etiquetas HTML, sta no necesita ser cerrada como veremos a continuacin.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de
atributos que podemos predefinir. No obstante estos atributos estn clasificados como deprecated (no
recomendados) o not supported (no admitido) en las versiones ms recientes de HTML, por lo que no
se debe hacer uso de ellos. En lugar de emplear estos atributos para definir el aspecto del separador hr
se deben usar tcnicas CSS. Por ejemplo, el atributo size de hr se usaba para definir el grosor de lnea y
el atributo color se usaba para definir el color de lnea. En lugar de estos atributos, se deber hacer uso
de tcnicas CSS.
hr no tiene su correspondiente etiqueta de cierre, aunque puede indicarse el cierre terminando con una
barra de esta manera: <hr /> (de esta forma se cumple el estndar XHTML, aunque en este curso no
vamos a detenernos a hablar de estas cuestiones).
EJERCICIO
Para definir el atributo size en la etiqueta hr se empleaba size=npx, siendo n el valor del grosor de
la franja en pixels (tambin se poda indicar en porcentajes). Sabiendo que para definir mediante CSS un
grosor de 8 pixeles y color negro se puede usar la sintaxis: style="height:8px; color: black; backgroundcolor: black;" aplicada a la etiqueta hr, modificar el siguiente cdigo para eliminar las etiquetas
deprecated y sustituirlas por expresiones CSS.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de separadores - aprenderaprogramar.com</title>
</head>
<body>
<p>A continuacin insertamos un separador.</p>
<hr size="8px" color="black" />
<p>A continuacin seguimos escribiendo debajo del separador.</p>
<hr size="2px" color="black" />
</body>
</html>
Comprueba los resultados en tu navegador tanto con el cdigo que usa atributos deprecated como con
el cdigo que usa CSS. Para comprobar si tus respuestas son correctas puedes consultar en los foros
El resultado debe ser, al menos aproximadamente, el siguiente:
Otro parmetro que se puede definir es la anchura de la franja mediante el parmetro width. El
atributo se escriba width=x%, siendo x el tanto por cien que queremos que ocupe nuestra franja
dentro de la pantalla. Tambin se puede especificar la anchura en pixeles. En el caso de no escribir nada
(como en los ejemplos anteriores), la franja ser predeterminada del 100%. La sintaxis CSS que nos
permite reemplazar el atributo deprecated consiste en aadir width:x%; dentro de los estilos definidos.
A continuacin vamos a generar una franja del 75% de ancho:
<hr width=75%" color=black/> sera la sintaxis con el atributo width (deprecated).
<hr style="color: black; background-color: black; width:75%;" /> sera la sintaxis usando CSS.
Escribe el cdigo y comprueba los resultados, que sern similares a esto:
Muchos navegadores hacan esta franja con una sombra exterior que transformaba la franja en tres
dimensiones. Para hacer la franja simple, sin sombra, se inclua el atributo noshade escribiendo
noshade=noshade. Este atributo est deprecated y para conseguir efectos se debe usar CSS.
Para definir el color que se le quera dar a la franja se usaba el atributo color. Por ejemplo, si queramos
que nuestra franja fuera de color rojo slo debamos ponerle la etiqueta: <hr color="#FF0000" /> <hr
color=red />. La aplicacin de color se debe hacer usando CSS como hemos visto en el ejercicio
anterior.
Por ltimo, para hacer que la franja quedara alineada a un lado, a otro, o al centro del prrafo se usaba
el atributo: align, tambin deprecated. Por ejemplo align = center para el centro, align = right
para la derecha y align = left para la izquierda. La definicin de alineacin se debe hacer usando CSS.
EJEMPLOS
Los atributos para la etiqueta hr, tal y como los hemos visto, estn no recomendados (deprecated) o no
admitidos (not supported) en las ltimas versiones de HTML. Esto significa que no es recomendable su
uso, aunque podemos encontrarlos en desarrollos web antiguos o no actualizados a los nuevos
estndares. Para dotar del aspecto deseado a la lnea separadora que se crea con la etiqueta hr se debe
usar CSS (tcnica de hojas de estilos). A continuacin indicamos la sintaxis recomendada.
SINTAXIS OBSOLETA
(DEPRECATED)
SINTAXIS CSS ALTERNATIVA

(BASADA EN ESTILOS)
<hr size=8px>
<hr style=height: 8px;>
<hr width=75%>
<hr style=width: 75%;>
<hr color=red>
<hr style=background-color: red; color:red;>
<hr align=right>
<hr style=text-align: right; margin-right: 0px;>

<hr style=border-style: 1px solid #000>
<hr noshade=noshade>
La sintaxis para la etiqueta noshade puede dar lugar a distintos

resultados segn el navegador que usemos.
EJERCICIO
A modo de ejercicio, reescribe el cdigo de los ejemplos que mostramos a continuacin usando la
sintaxis basada en estilos y compara los resultados de visualizar ambas formas de escritura en tu
navegador.
Ejemplo 1
Franja de grosor 5 pxeles, de un ancho del 50% y alineada al centro.
<hr size=5px width= 50% align=center color=red/>
Ejemplo 2
Franja de grosor 2 pxeles, de ancho 80%, sin sombra y alineada a la derecha.
<hr size=2px width=80% noshade=noshade align=right />

respuestas
son
correctas
puedes
consultar
en
los
foros
COMENTARIOS EN HTML.
Se llama comentario en el mbito de HTML a las notas que el autor o autores ponen en el cdigo para
facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y, por tanto, slo
sern visibles al leer el cdigo HTML de la pgina web por una persona.
En general es recomendable ir insertando comentarios al crear una pgina para marcar determinadas
partes y as encontrarlas ms fcilmente. Algunos usos que suelen darse a los comentarios son:
Notas para recordar detalles del cdigo la prxima vez que vayamos a cambiarlo, como por
ejemplo para indicar por qu hemos usado una etiqueta y no otra. Este tipo de comentarios son
muy usados cuando las pginas son complejas.
Apuntar que queda por hacer algo en una determinada seccin o cmo es conveniente
cambiarla. O bien para indicar el comienzo o fin de una determinada seccin de la pgina.
Para identificar fcilmente partes importantes del cdigo o aquellas que cambian ms a
menudo.
Usos particulares de cada programador web. De hecho los comentarios pueden usarse para
cualquier cosa y cada programador de pginas web tiene su propio modo de usarlos.
CREACIN DE COMENTARIOS EN HTML

Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar
ponemos una cadena que indica el comienzo del comentario:  , formada por dos guiones y el smbolo mayor que. La
estructura de un comentario es por tanto:

Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y
como acabamos de mostrar.
Veamos algunos ejemplos prcticos de comentarios:



El navegador ignora los contenidos del interior de los comentarios, incluso en el caso de que sean
cdigo HTML. Al mostrar la pgina los navegadores actan como si los comentarios no existieran
(aunque existen algunas excepciones, no vamos a hablar de ellas ahora).
Para terminar slo queda hacer una aclaracin. Tal y como hemos dicho todo el texto entre los
smbolos "" es un comentario sea lo que sea y tenga el nmero de lneas que tenga. Sin
embargo se recomienda que los comentarios se limiten a una sola lnea, y si debe ocupar varias
necesariamente se aconseja incluir los smbolos de comentario en cada una de ellas. Algunos
programadores siguen esta recomendacin y otros no.

Hipervnculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
HIPERVNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervnculos, tambin llamados hipertextos son los textos o los objetos sobre los que
podemos hacer clic para que nos lleven a otra parte del documento, a otra pgina web en el mismo
sitio o a otra pgina de Internet, entre otras funciones.
Cuando un visitante hace clic en el hipervnculo, el destino se mostrar en su navegador web, se abrir
o se ejecutar, en funcin del tipo de destino. El destino es con frecuencia otra pgina web, pero
tambin puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un
documento PDF, una direccin de correo electrnico o un programa.
Por tanto, con los hipervnculos podemos establecer saltos desde una pgina a otra, incluso a puntos
concretos dentro de pginas con contenidos extensos. Los hipervnculos pueden asociarse a imgenes o
a textos de modo que haciendo clic sobre ellos con el botn izquierdo del ratn se accede
automticamente al destino asociado a ellos.
Lo ms habitual es que el cursor tome la forma de una pequea mano cuando pasa sobre un
hipervnculo.
HIPERVNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervnculos locales o marcadores son enlaces dentro de la misma pgina. Es decir, al hacer clic en
uno de ellos nos llevar a una posicin distinta dentro de la misma pgina que estamos visualizando.
Esta tcnica hace que los usuarios accedan de una manera ms rpida a la informacin.
Para crear este tipo de enlaces hay que hacer dos operaciones:
Establecer marcadores (anclas) a lo largo de la pgina (son los lugares a los que queremos saltar
con los enlaces).
Poner enlaces que salten a los marcadores.
El cdigo de los marcadores se crea con los atributos name (no recomendado) id (recomendado):
<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado
por las nuevas versiones de HTML, aunque se us bastante en el pasado).
<a id="nombre_del_marcador">Texto asociado al marcador</a>
El name id de una etiqueta debe ser nico, es decir, no puede haber dos etiquetas cuyo name id sea
el mismo dentro de un documento HTML.
Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>
Por otro lado, el cdigo de un enlace para que salte a un marcador.
Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>
Hay que tener en cuenta que los marcadores distinguen entre maysculas y minsculas. Tambin hay
que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el
usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es vlido no incluir texto
alguno como veremos en el siguiente cdigo.
EJERCICIO
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a name="arriba"></a>
En esta pgina puedes ir al <a href="#primero">primer</a> apartado, al
<a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.
<a name="primero"><h1>Primer apartado</h1></a>
Aqu tienes el primer apartado. Al pulsar sobre el enlace, el
navegador habr saltado a esta parte de la pgina. Quizs si todo
entra en la pantalla no logres ver el efecto pero prueba a poner ms
texto aqu o hacer zoom y conseguirs verlo.
<a name="segundo"><h1>Segundo apartado</h1></a>

Aqu tienes el segundo apartado. Al pulsar sobre el enlace, el
<a name="tercero"><h1>Tercer apartado</h1></a>
Aqu tienes el tercer apartado. Al pulsar sobre el enlace, el
Volver <a href="#arriba">arriba</a>.

</body>
</html>
Escribe el cdigo anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre
ejemplo.html. A continuacin, haz doble clic en l y prueba a jugar con el archivo haciendo zoom en l o
aadiendo ms texto para comprobar cmo funcionan los marcadores. El resultado debe ser similar al
que se muestra en la siguiente imagen.
Ahora crea otro archivo donde reemplaces los atributos name por id, guarda el archivo como
ejemplo2.html. Visualiza los resultados en tu navegador y comprueba si el efecto es el mismo. Para
comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
HIPERVNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervnculo externo es un vnculo a otro sitio web en Internet (sitio externo). Es un vnculo a
cualquier otro lugar fuera del sitio actual. Cuando ponemos un vnculo externo, escribimos la direccin
completa de la pgina incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas
absolutas. Por ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la pgina web
aprenderaprogramar.com</a>
En el hipervnculo distinguimos las siguientes partes:
-
Las etiquetas de apertura y cierre del hipervnculo <a> y </a>

El atributo href, con un valor que se indica con el smbolo igual y la URL a la que dirige el
hipervnculo dentro de las comillas.
Un texto que es el que ve el usuario como link.
Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que
hemos visto. El resultado debe ser algo as.
DESTINO DEL HIPERVNCULO. ATRIBUTO TARGET

Cuando creamos un vnculo, por defecto el navegador abrir la pgina web destino en la misma
ventana, pero podemos pedirle al navegador que la abra aparte, es decir, en otra ventana. Esto es til
por ejemplo si queremos abrir una pgina externa a nuestro sitio pero sin que el visitante pierda la
nuestra. Para ello utilizaremos el atributo target con alguna de las siguientes opciones.
Valores de target ms habituales:
_blank: Abre el documento vinculado en una ventana nueva del navegador.

_self: Es la opcin predeterminada o por defecto. Abre el documento vinculado en el mismo
marco o ventana en el que se ha pulsado el link.
Ejemplo:
<a href=http://www.aprenderaprogramar.com target=_blank>Ir aprenderaprogramar.com en una
nueva ventana</a>
EL ATRIBUTO TITLE PARA HIPERVNCULOS

Como ltima cuestin, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada
vez que pongamos un hipervnculo en nuestras pginas. Este atributo es title y con el pondremos ttulo
a nuestro hipervnculo. Con esto conseguiremos en la mayora de los navegadores un efecto de tooltip que consiste en que cuando ponemos el cursor encima del hipervnculo nos aparezca una
informacin adicional que es la que hayamos puesto en el atributo title.
EJEMPLO
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de title - aprenderaprogramar.com</title>
</head>
<body>
<a
href=http://www.aprenderaprogramar.com
tool.tip>Ir a aprenderaprogramar.com</a>.
title=Esto
es
un
</body>
</html>
Escribe este cdigo en el editor Notepad++ y gurdalo con el nombre de archivo ejemplo.html y
comprueba los resultados que se obtienen.
Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:
IMGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y aadir en su interior en lugar de texto,
una imagen. Veamos un ejemplo:
<a href="http://aprenderaprogramar.com"> <img src="http://i.imgur.com/SpZyc.png" alt="Curso de
HTML desde cero"></a>
EJERCICIO
Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos
Animales de Africa como texto a mostrar.
Un encabezado H2 donde indicaremos Leones como texto. Dentro de este apartado incluiremos
varios prrafos que hablarn sobre los leones y un enlace externo (link) de tipo texto cuyo texto ser:
Pulsa aqu para saber ms sobre leones y que llevar con un target blank a la siguiente direccin web
de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo
Un encabezado H2 donde indicaremos Tigres como texto. Dentro de este apartado incluiremos varios
prrafos que hablarn sobre los tigres y una imagen que debe mostrar como tooltip Pulsa aqu para
saber ms sobre tigres. Al pulsar sobre la imagen se llevar al usuario a un target blank dirigido a la
direccin web http://es.wikipedia.org/wiki/Panthera_tigris
En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas
correspondientes) que indicarn: Ir al inicio Ir a leones Ir a tigres (Segn el link que pulse el usuario,
se le llevar al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).
respuestas
son
correctas
puedes
consultar
en
los

foros
Creacin de listas en HTML. Listas no ordenadas, ordenadas.
CREACIN DE LISTAS EN HTML

En la mayora de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML
incorpora distintas formas de mostrar listas, por ejemplo con vietas sencillas o tambin con letras o
nmeros. Adems, para que las pginas tengan ms vistosidad, se pueden colocar imgenes delante de
cada prrafo.
A continuacin veremos los principales tipos de listas de los que HTML dispone.
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica
unordered list), etiqueta de apertura y cierre respectivamente. Si queremos aadir un nuevo punto, lo
tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la vieta o marca que indica que se trata de un elemento de
una lista se generar de forma automtica. Pero si queremos definir nosotros mismo el smbolo del
punto o marca a emplear, debemos indicarlo especficamente. En el pasado se usaba el atributo type,
hoy en da no recomendado (deprecated). Con este atributo se poda hacer que la lista estuviera
definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por
cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuacin:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
La apariencia final que realmente consigamos depender del navegador, es decir, el resultado puede
ser distinto segn usemos un navegador u otro. No todos los navegadores se comportan de la misma
forma a la hora de mostrar un smbolo grfico como una vieta o marca.
Una lista no ordenada se usa cuando se enumeran elementos sin que el orden tenga relevancia: por
ejemplo si decimos Las personas presentes en la habitacin eran: Juan, Manuel, Pedro, Gonzalo se
trata de una lista no ordenada (Juan, Manuel, Pedro, Gonzalo). En cambio si la enumeracin implica un
orden se tratar de una lista ordenada. Ejemplo: Los mejores clasificados de la carrera fueron: Juan,
Manuel, Pedro, Gonzalo (se entiende que Juan fue el primero, Manuel el segundo, Pedro el tercero,
etc.). Para cada caso, tendremos que decidir si usamos una lista HTML como ordenada o no.
EJERCICIO
El siguiente cdigo define una lista no ordenada y hace uso de atributos deprecated para la etiqueta li.
Guarda el cdigo como archivo html con un nombre como ejemplo1dep.html. Sustituye estos atributos
por CSS y guarda el archivo como ejemplo1css.html. Compara la visualizacin de ambos documentos
HTML en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
<html>
<head>
<title>Ejemplo del uso de listas
</head>
<body>
<ul>
<li type="circle">Esto es
<li type="square">Este es
<li type="disc">Y este es
</ul>
</body>
</html>
HTML
4.01
Transitional//EN"
- aprenderaprogramar.com</title>
un tipo de punto.</li>
otro.</li>
otro diferente.</li>
El resultado a obtener ser similar a este:

respuestas
son
correctas
puedes
consultar
en
los
foros
LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol>
</ol> (ol indica ordered list). Adems, cada elemento de la lista se escribir con la misma etiqueta que
para las listas no ordenadas: <li>. Pero al ser listas ordenadas los smbolos por defecto sern nmeros y
stos se irn generando automticamente por orden, conforme escribamos nuevos elementos de la
lista.
En las listas ordenadas podemos hacer que el primer punto comience con el nmero que nosotros
queramos. Lo conseguiremos gracias al atributo value. Los siguientes puntos que escribamos se
generarn automticamente por orden, partiendo de ese nmero.
Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, podemos indicarlo en el cdigo.
Escribe este cdigo en tu editor de texto y comprueba el resultado.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ol>
<li value="20">Este ser el nmero 20.</li>
<li>Este ser el 21.</li>
<li>Este ser el 22. Y as sucesivamente.</li>
</ol>
</body>
</html>
Al igual que con las listas no ordenadas, en el pasado se usaba el atributo type, hoy en da no
recomendado (deprecated). Con este atributo se poda hacer que la lista estuviera definida por
nmeros (li type="1"), letras minsculas (li type="a"), letras maysculas (li type="A"), nmero romanos
en minscula (li type="i") mayscula (li type="I").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuacin:
<ul style="list-style-type:decimal"> para nmeros, <ul style="list-style-type:lower-alpha"> para letras
minsculas, <ul style="list-style-type:upper-alpha"> para letras maysculas, <ul style="list-styletype:lower-roman"> para nmeros romanos en minsculas, <ul style="list-style-type:upper-roman">
para nmeros romanos en maysculas.
Prueba a crear listas usando los distintos valores para este atributo y visualzalas en tu navegador.
LISTAS DE DEFICIONES O DE DESCRIPCIONES

Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este tipo
de cdigo en alguna pgina web poder interpretar su significado. Las listas de definiciones se usan
cuando queremos hacer una enumeracin tipo diccionario donde tenemos varios trminos y su
definicin o descripcin. Por ejemplo, esto seran varios trminos y sus definiciones:
Trmino
Definicin o descripcin
FTP
Protocolo para transmisin de ficheros entre ordenadores
HTML
Lenguaje de etiquetas empleado para generar pginas web
PHP
Lenguaje interpretado en servidor que permite generar pginas web dinmicas
Estos trminos y sus definiciones o descripciones podramos ponerlos de varias maneras dentro de una
pgina web (como texto sin ms, como lista ordenada, no ordenada) y una de estas maneras es
ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas
por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un trmino que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definicin o descripcin asociada a un
trmino. Un trmino podra tener varias descripciones. Por ejemplo el trmino Autor podra tener como
descripciones: Mateo Renzi, Olivo Pascua, Jorge Guilln.
Los listados de definicin se separarn automticamente si escribimos varios de ellos.
EJEMPLO
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<dl>
<dt>Aqu va el trmino que definiremos</dt>
<dd>Y aqu dentro ir la definicin propiamente dicha.</dd>
</dl>
<dl>
<dt>Aqu va la segunda definicin</dt>
<dd>Segunda definicin, separada automticamente de la anterior.</dd>
</dl>
</body>
</html>
Escribe el cdigo en tu editor de texto, gurdalo como archivo html y comprueba el resultado.
Habitualmente, los navegadores generan de forma automtica el efecto de que la definicin o

descripcin queda desplazada hacia la derecha (tabulada) respecto a el trmino, as como el espacio de
separacin entre distintas listas de definiciones.
ANIDAMIENTO O USO SIMULTNEO (COMBINACIN) DE VARIOS TIPOS DE LISTAS

Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas
dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el siguiente cdigo en
un editor de texto como bloc de notas o Notepad++ y gurdalo con un nombre de archivo como
ejemploCU00718B.html.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo de combinacin de listas - aprenderaprogramar.com</title>
</head>
<body>
<ul>
<li>Lenguajes de programacin estructurada </li>
<ol>
<li> Lenguaje C </li>
<li> Lenguaje Pascal </li>
<li> Lenguaje Fortran </li>
</ol>
<hr style="height:8px; color: black; background-color: black;" />
<li>Lenguajes de programacin orientada a objetos </li>
<ol>
<li>Lenguaje Java </li>
<li>Lenguaje PHP </li>
</ol>
</ul>
</body>
</html>
El resultado de este cdigo cuando lo visualizamos en un navegador sera algo similar a lo que
mostramos en la siguiente imagen.
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores
define una lista no ordenada cuyos elementos sean: Juana Prez, Alberto Mrquez, Ral Moreno.
Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Surez, Abel Rebollo.
Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estvez, Angela Gonzlez y
Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que
ocupe el 50% del ancho disponible.
respuestas
son
correctas
puedes
consultar
en
los

foros
Creacin de tablas en HTML. Atributos colspan y rowspan.
CREACIN DE TABLAS EN HTML

En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de informacin son las tablas. Hay
muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel
de las tablas se vuelve esencial.
El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En
principio, no deben ser usadas para crear divisiones de cara a mostrar una pgina web, es decir, es
preferible que una pgina web no est dividida en distintos espacios usando tablas. Para maquetar una
pgina web y dividirla en distintos espacios se usarn otras herramientas (capas, elementos flotantes,
etc.).
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo
de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos bsicos: el
elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento
TD (celda).
Cuando el contenido de una celda debe ser vaco, deberas usar una espacio en blanco (que en HTML se
escribe como ) como su contenido. Esto har que tu pgina se visualice correctamente, ya que
algunos navegadores tienen problemas representando celdas vacas. Ejemplo: <td> </td>
Veamos un ejemplo. Crea un archivo ejemplo.html con este cdigo y visualzalo:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> 
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
</body>
</html>
Ten en cuenta que el atributo border est deprecated o not supported por las versiones ms recientes
de HTML. Ms adelante veremos cmo reemplazarlo usando tcnicas CSS.
UNIFICACIN DE CELDAS
En algunas ocasiones, puede ser necesario unificar dos o ms celdas en una sola que pasar a ocupar el
lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos rowspan
(para unificacin vertical) y colspan (para unificacin horizontal).
UNIFICACIN HORIZONTAL CON COLSPAN

Como hemos comentado con anterioridad, para la unificacin horizontal de celdas, utilizaremos el
atributo de celda colspan. Crea un archivo ejemplo.html con este cdigo y visualzalo. Recuerda que
el atributo border est deprecated o not supported y que ms adelante veremos como reemplazarlo
mediante el uso de CSS:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head><title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
Grficamente:
UNIFICACIN VERTICAL CON ROWSPAN

En este caso, para la unificacin vertical de celdas, utilizaremos el atributo de celda rowspan. Crea un
archivo ejemplo.html con este cdigo y visualzalo (recuerda que el atributo border est deprecated o
not supported y que ms adelante veremos como reemplazarlo mediante el uso de CSS):
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
Grficamente:
CELDAS DE ENCABEZADO
Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple
(elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH table
header, cabecera de tabla) que contiene informacin de encabezado para un conjunto de celdas
especficas.
Los navegadores representan normalmente el contenido de las celdas especiales como texto centrado y
en negrita, atributos que tambin pueden ser visualmente logrados con la utilizacin de celdas
normales (elemento TD). Entonces, para que son tiles estos encabezados? Cuando utilizamos th la
celda queda definida como encabezado, no slo tiene el aspecto de un encabezado. Por poner un smil,
no es lo mismo vestirse de polica sin serlo, que ser polica. No es lo mismo una celda que parece un
encabezado sin estar definida como tal, que una celda definida realmente como encabezado. Los
navegadores para personas invidentes identifican este tipo de encabezados y le dan un tratamiento
especial. Adems algunos motores de bsqueda (bing, google, yahoo) dan un tratamiento distinto a
este tipo de celdas, y algunos navegadores crean efectos especiales para este tipo de celdas.
Finalmente, disponer de encabezados nos permitir crear tablas con un diseo especfico para los
encabezados. Escribe este cdigo con tu editor de texto y comprueba sus resultados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<tr>
<th>Alumno</th>
<th>Asignatura</td>
<th>Calificacin</td>
</tr>
<tr>
<td>Juan Prez</td>
<td>Matemticas</td>
<td>8</td>
</tr>
<tr>
<td>Rodolfo Crdenas</td>
<td>Francs</td>
<td>5</td>
</tr>
</table>
</body>
</html>
TTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, podemos definir el ttulo de una tabla. Este ttulo debera describir de
una manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en
algn lugar cercano a la tabla (su posicin puede ser establecida usando CSS). El elemento caption slo
est permitido si va justo despus de la apertura de la tabla. Escribe este cdigo y comprueba el
resultado.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<caption>Ttulo de la tabla</caption>
<tr>
<td>Contenido 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
EJERCICIO
Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a continuacin. La
primera fila debe estar compuesta por elementos de encabezado de tabla (th). No te preocupes por el
centrado de los textos, sino nicamente por que las subdivisiones en la tabla aparezcan correctamente.
Jefe departamento
Jefe seccin
Empleado
Edad empleado
Martn Lpez
Maite Surez
55
Luis Morales
Mateo Carralde
33
Carlos Hernndez
Alberto Fernndez
62
Diego Gutirrez
44
Juan Alberto Chan
Diana Rodrguez
Luis Prez

respuestas
son
correctas
puedes
consultar
en
los

foros
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
FORMULARIOS EN HTML
En HTML, un formulario es una seccin del documento destinada a que el usuario introduzca datos que
van a ser enviados a algn lado. En HTML un formulario puede contener cosas muy variadas: texto
normal, elementos especiales llamados controles (checkboxs, radiobuttons, comboboxs, etc.), y otros
elementos especiales denominados etiquetas (labels). Explicaremos el significado de estos elementos
especiales y cmo generar formularios en HTML.
Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea introduciendo
texto, seleccionando una opcin entre varias, etc., antes de enviar el formulario y que ste sea
procesado. Escribe el siguiente cdigo en un editor y gurdalo como ejemplo.html para que puedas
visualizarlo en tu navegador. No te preocupes ahora si no entiendes algunos de los elementos que
aparecen, porque los iremos explicando poco a poco.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form action="http://www.aprenderaprogramar.com" method="get">
<p>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<br/> <br/>
<label for="apellido">Apellido: </label>
<input type="text" name="apellido" id="apellido">
<br/> <br/>
<label for="email">Email: </label>
<input type="text" name="email" id="email">
<br/> <br/>
<input type="radio" name="sexo" id="varon" value="Varn">
<label for="varon">Varn: </label>
<br/> <br/>
<input type="radio" name="sexo" id="mujer" value="Mujer">
<label for="mujer">Mujer: </label>
<br/> <br/>
<input type="submit" value="Enviar">
<input type="reset">
</p>
</form>
</body>
</html>
La visualizacin que debes obtener es algo parecido a la siguiente imagen.
Supn que hemos rellenado los datos de este formulario. Cuando pulsamos en Enviar, la informacin
se enva al servidor y se utiliza para algo. Qu utilidad se le puede dar a esta informacin? En general,
un formulario html nos sirve para acceder a otra URL (direccin web) que recibe la informacin.
Cuando la nueva URL recibe la informacin pueden ocurrir varias cosas: que se muestre en pantalla,
que se escriba en una base de datos, que nos muestre una imagen distinta segn la informacin que
hayamos enviado Algunas de las cosas que hemos citado no se pueden hacer usando HTML. Por
ejemplo, no podemos escribir en una base de datos usando HTML. Sin embargo, s podemos recoger la
informacin en un formulario o pgina web HTML y luego acceder a una direccin web de tipo php, asp,
jsp que son tipos de pginas web que permiten realizar otro tipo de funciones ms avanzadas
relacionadas con la programacin, como es la escritura en bases de datos para almacenar la
informacin.
CONTROLES
Los usuarios interaccionan con los formularios a travs de los llamados controles. Un control vamos a
definirlo, de forma simplificada, como un objeto que aparece en la pantalla y que es modificable por el
usuario. Ejemplos de controles seran los que vamos a mostrar a continuacin.
Checkbox o casilla de verificacin: control que puede ser marcado o desmarcado por el usuario. Es muy
tpico cuando se requiere aceptar unas condiciones para realizar una compra en una pgina web, o
cuando se requiere aceptar la licencia para instalar un programa.
Option Button o botn circular seleccionable (radio): control que puede ser marcado o desmarcado
por el usuario, de forma que normalmente cuando se marca una opcin se desmarca la que estuviera
seleccionada previamente. Es muy tpico cuando se requiere elegir entre varias opciones.
ComboBox o lista desplegable: control que muestra una opcin seleccionada de entre varias posibles, y
que al pulsar sobre l despliega una lista de opciones.
Atributos bsicos de un control:
name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario
para poder rescatar la informacin.
value: cada control tiene un valor inicial y un valor actual. Normalmente, el valor inicial de un
control puede especificarse con el atributo value. El valor actual del control se hace en primer
lugar igual al valor inicial. A partir de ese momento, el valor actual del control puede ser
modificado mediante la accin del usuario. El valor inicial de un control no cambia. As, cuando
se carga el formulario, el valor actual de cada control se restablece a su valor inicial. Si el control
no tiene un valor inicial, el efecto de una reinicializacin o carga del formulario sobre ese
control es indefinido. Indefinido significa que no sabemos exactamente lo que va a pasar. Para
que no ocurra esto, es preferible establecer siempre un valor inicial.
id: el valor de estre atributo permite relacionar un control con una etiqueta. Por ejemplo, si un
control tiene por id el valor id=email, esto significa que ese control est relacionado con la
etiqueta (label) cuyo atributo for es for=email.
Normalmente, cuando se enva un formulario para su procesamiento, para cada control se procede al
envo de dos datos: su nombre (atributo name) y su valor actual, y esta informacin se enva a la
direccin web de destino.
Ejemplo: si introducimos en el formulario que nuestro nombre es Juan, nuestros apellidos Surez
Guerra, nuestro email juan@gmail.com y nuestro sexo Varn, la informacin que se enva a la direccin
web donde se reciben los datos es:
nombre=Juan
apellido=Surez Guerra
email=juan@gmail.com
sexo=Varn
Introduce esta informacin y enva el formulario cuyo cdigo vimos anteriormente. Fjate en la URL que
aparecer en tu navegador. Ser algo as.
http://www.aprenderaprogramar.com/?nombre=Juan&apellido=Su%E1rez+Guerra&email=juan%40gm
ail.com&sexo=Var%F3n
Lo que puedes comprobar aqu es que la informacin que hemos escrito en el formulario est
apareciendo ahora de alguna manera en la nueva direccin web. No se muestra exactamente igual
porque las direcciones web no admiten tildes, que son sustituidas por un cdigo equivalente a la letra
con tilde. Tampoco las direcciones web admiten el smbolo @, que tambin es sustituido.
Label o etiqueta: podra considerarse que no es un control en sentido estricto, puesto que es algo que
no es modificable por el usuario. Un label o etiqueta es un texto que va asociado a un control con el
que puede interactuar un usuario. Un label contiene habitualmente dos informaciones importantes: el
nombre del control con el que va asociado, y el texto a mostrar.
Por ejemplo el cdigo: <label for="nombre">Introduzca su nombre: </label>
Nos indica que el label tiene el atributo for establecido como igual a nombre. Eso signfica que el label
va asociado a un control dentro del formulario cuyo atributo id ser nombre. Por otro lado, el texto que
mostrar este label ser Introduzca su nombre:.
En realidad un label puede considerarse una parte poco importante en un formulario, puesto que se
limita a mostrar un texto y esto tambin se puede hacer de otras maneras. De hecho, podramos
prescindir de su uso. En vez de tener el texto entre etiquetas <label> y </label> podramos tenerlo entre
etiquetas <p> y </p>. Por qu usar entonces los label? Porque las pginas web conviene que estn
bien estructuradas y que todos los programadores se atengan a las mismas normas. En este caso, las
normas estndares para construccin de formularios nos dicen que los textos asociados a los controles
los pongamos dentro de etiquetas label, y que indiquemos el control al que va asociada la etiqueta
mediante el atributo for. Tambin nos servir para poder aplicar estilos especficos a los textos de
formularios mediante tcnicas CSS. Finalmente, tener en cuenta que a medida que vayamos haciendo
pginas ms complejas, no haber hecho las cosas bien puede acarrearnos problemas.
LA ETIQUETA FORM. POSIBILIDAD DE TENER VARIOS FORMULARIOS EN UNA WEB.

Cuando creamos un formulario en HTML, todo el contenido que lleva lo incluimos entre las etiquetas de
apertura <form> y de cierre </form>. Estas dos etiquetas delimitan el formulario. Dentro de una pgina
web puede haber varios formularios, por ejemplo podramos tener dos formularios en una pgina web
para que los usuarios de un tipo rellenen un formulario y los de otro tipo otro formulario:
Si eres mayor de 18 aos rellena este formulario
Si eres menor de 18 aos rellena este formulario
En muchsimas pginas web hay un formulario nico. Por ejemplo Rellena tus datos personales. Pero
debemos saber que podramos tener dos, tres o ms formularios. La forma de delimitar cada uno de
ellos es como hemos dicho: usando las etiquetas de apertura y cierre <form> y </form>.
La etiqueta form suele incluir dos atributos. El atributo action indica la direccin web (URL) a la que se
dirigir la navegacin cuando se pulse en el botn de envo del formulario. El atributo method hace
referencia a cmo se enviar la informacin.
Hay diversas cuestiones relacionadas con los formularios que todava no hemos explicado. Lo iremos
haciendo poco a poco.
EJERCICIO
Basndote en el cdigo de ejemplo que hemos visto, crea una pgina web que cumpla con lo que
indicamos a continuacin:
a) Como ttulo principal de la pgina debe figurar con etiquetas h1 el texto Inscripcin al Congreso de
Medicina Santiago 2048
b) Debe contener dos formularios: el primero ser Inscripcin al Congreso para mdicos especialistas
y el segundo Inscripcin al congreso para mdicos generalistas. Estos ttulos deben figurar antes del
formulario con etiquetas h2.
c) El formulario para mdicos especialistas debe solicitar nombre, apellidos, especialidad y ao de
obtencin de la especialidad.
d) El formulario para mdicos generalistas debe solicitar nombre, apellidos, centro mdico donde ejerce
y ao de obtencin del ttulo.
Nota: para evitar confusiones en el envo de datos, todos los campos name deben tener valores
diferentes, es decir, en ambos formularios no se pueden repetir nombres los nombres identificativos
empleados.
respuestas
son
correctas
puedes
consultar
en
los

foros
Formas de envo de los datos de un formulario. Mtodos GET y POST.
FORMAS DE ENVO DE LOS DATOS DE UN FORMULARIO HTML. MTODOS GET Y POST. EJEMPLOS
Cuando un usuario rellena un formulario en una pgina web los datos hay que enviarlos de alguna
manera. Vamos a considerar las dos formas de envo de datos posibles: usando el mtodo POST o
usando el mtodo GET.
Por ejemplo: <form action="http://www.aprenderaprogramar.com/prog/newuser" method="get">
En el ejemplo anterior la accin que se ejecutar cuando el usuario pulse el botn Enviar (submit)
ser el envo de los datos a la url especificada usando el mtodo get.
Veamos el aspecto de un formulario cualquiera para hacernos una idea general.
Este formulario consta de varios campos que al usuario se le solicitan como Nombre, Apellidos, Correo
electrnico, Pas y Mensaje. Posiblemente los nombres de los campos en el cdigo HTML sean del tipo
nombre_user, apellidos_user, email_user, pais_user y msg.
La diferencia entre los mtodos get y post radica en la forma de enviar los datos a la pgina cuando se
pulsa el botn Enviar. Mientras que el mtodo GET enva los datos usando la URL, el mtodo POST los
enva de forma que no podemos verlos (en un segundo plano u ocultos al usuario).
Un resultado usando el mtodo GET, a modo de ejemplo, podra ser el siguiente:
http://www.aprenderaprogramar.com/newuser.php?nombre=Pepe&apellido=Flores&email=h52tura
m%40uco.es&sexo=Mujer
En esta URL podemos distinguir varias partes:
http://www.aprenderaprogramar.com/newuser.php es la direccin web en s.
El smbolo ? indica dnde empiezan los parmetros que se reciben desde el formulario que ha enviado
los datos a la pgina.
Despus del smbolo ? aparecen parejas de datos con su nombre y valor separadas por el smbolo &.
Las parejas dato1=valor1, dato2=valor2, dato3=valor3 reflejan el nombre y el valor de los campos
enviados por el formulario.
Por ejemplo: nombre=Pepe, apellidos=Flores, etc. nos dice que el campo del formulario que se
denomina nombre llega con valor Pepe mientras que el campo del formulario que se denomina
apellidos llega con valor Flores. Estos valores son recibidos en la pgina web de destino del
formulario.
Tener en cuenta que para separar la primera pareja de la direccin web en s se usa el smbolo ? y para
separar las restantes parejas entre s se usa el smbolo &.
Otro aspecto a tener en cuenta es que determinados caracteres no son recibidos en la URL de la misma
forma exactamente en que fueron escritos en el formulario. Por ejemplo, el valor del campo email que
se recibe en la URL es h52turam%40uco.es, mientras que el usuario en el formulario habr introducido
con toda seguridad h52turam@uco.es. Como vemos, el carcter @ ha sido sustituido por los caracteres
%40. Estas equivalencias se introducen automticamente en la transmisin de datos debido a que las
URLs no admiten determinados caracteres como letras con tildes, arrobas y otros. No debes
preocuparte por esta codificacin, ya que si posteriormente rescatamos los valores mediante otros
mecanismos volveremos a obtener el texto original. Simplemente, conviene conocer esta circunstancia
para no pensar que estn ocurriendo cosas extraas o errores.
Hemos visto el resultado de un envo por el mtodo GET. En el caso de un envo de datos usando el
mtodo POST, aunque estos datos tambin sern enviados (de una forma que podemos denominar
oculta), no los podremos ver en la URL. Para poder recuperar los valores de los campos en el caso de
un envo con el mtodo POST necesitaramos otras herramientas (por ejemplo valernos del lenguaje
PHP para recuperar el valor de esos campos).
El resultado final con ambos mtodos podemos decir que es el mismo: la informacin se transmite de
un lado a otro. La diferencia radica en que con el mtodo GET podemos ver directamente los
parmetros pasados ya que estn dentro de la URL mientras que con el mtodo POST los parmetros
quedan ocultos y para rescatarlos hay que usar otras herramientas.
Un ejemplo de uso del mtodo post sera este:
<form action="http://www.aprenderaprogramar.com/prog/newuser" method="post">
ES MEJOR USAR EL MTODO GET O EL MTODO POST?

Tanto GET como POST son mtodos de envo de la informacin de los formularios vlidos y
ampliamente utilizados. Cada mtodo tiene sus ventajas y sus inconvenientes y no se puede decir que
uno sea mejor que otro. Elegir entre un mtodo y otro depende de la aplicacin concreta que se est
desarrollando y es algo que dentro de las empresas de desarrollos web suelen decidir los encargados
del diseo de las aplicaciones. A nosotros en este curso bsico simplemente nos interesa conocer la
existencia de ambos mtodos y sus caractersticas.
Para terminar, en la siguiente tabla mostramos un resumen de las diferencias entre GET y POST:
MTODO
CONCEPTO
OBSERVACIONES
GET
GET lleva los datos de forma "visible" al cliente

(navegador web). El medio de envo es la URL.
Los datos los puede ver cualquiera.
Los datos son visibles por la URL, por ejemplo:

www.aprenderaprogramar.com/
action.php?nombre=pedro&apellidos1=
gomez
POST consiste en datos "ocultos" (porque el

cliente no los ve) enviados por un formulario
cuyo mtodo de envo es post. Es adecuado
para formularios. Los datos no son visibles.
La ventaja de usar POST es que estos datos no

son visibles al usuario de la web. En el caso de
usar get, el propio usuario podra modificar la
URL escribiendo diferentes parmetros a los
reales en su navegador, dando lugar a que la
informacin tratada no sea la prevista.
POST

Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.
INGRESO DE DATOS EN FORMULARIOS

Los controles de entrada de datos en formularios suelen ser controles visuales y permiten la
introduccin de datos o seleccin de opciones al usuario. Su uso depende del tipo de control y tambin
del tipo de informacin que pueden obtener.
Los elementos de entrada de un formulario pueden ser definidos mediante el uso de estos elementos:
HTML input, HTML textarea, HTML select y otros elementos HTML.
ELEMENTOS DE ENTRADA DE TEXTO
Entrada de lnea
Mediante este control podemos obtener informacin textual en una sola lnea, lo que significa que el
usuario no podr utilizar la tecla "enter" para ir a la siguiente lnea (en la mayora de los formularios, la
tecla "enter" presionada en uno de estos campos, enva el formulario que lo contiene como si
pulsramos sobre el botn submit de envo del formulario.).
Este control es insertado en documentos HTML usando la etiqueta HTML input con el valor "text" en su
atributo "type". El valor inicial, mostrado cuando la pgina se carga, puede ser definido usando el
atributo "value". Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML
y comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="post" action="action.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aqu" />
</form>
</body>
</html>
Entradas de password
Este control es igual que el de entrada de lnea, es decir, usamos la etiqueta input, pero en este caso
escribiremos type = "password". Cuando el usuario escriba sobre este control, los caracteres ingresados
quedan "escondidos" mostrndose como puntos o asteriscos para evitar que los usuarios (ms bien
alguien que pase por detrs) vean su contenido.
Como hemos indicado habr que indicar el valor "password" en el atributo "type", y su valor inicial
puede ser definido usando el atributo "value". Es comnmente usado para el ingreso de contraseas.
Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML y comprueba los
resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
Ingresa
tu
contrasea:
<input
name="contrasena"
type="password"
value="123456" />
</form>
</body>
</html>
Entrada de multi-lnea
Con este control los usuarios podrn introducir texto en una o ms lneas. Se inserta utilizando la
etiqueta HTML textarea y puede ser usado para escribir comentarios, mensajes, etc. que ocupen varias
lneas. Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML y
comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2"
cols="30">...Tus comentarios aqu...</textarea>
</form>
</body>
</html>
En la prxima entrega seguiremos viendo ms controles para formularios.
EJERCICIO
Crea una pgina web que contenga un formulario de registro de usuarios que cumpla estas condiciones:
Como ttulo principal de la pgina debe figurar con etiquetas h1 el texto Solicitud de alta como
usuario. Debe contener un campo entrada de lnea para solicitar el nombre. Debe contener un campo
entrada de lnea para solicitar los apellidos. Debe contener un campo entrada de lnea para solicitar el
correo electrnico. Debe contener un campo entrada de lnea y tipo password para solicitar la
contrasea. Debe contener un campo multilnea para solicitar observaciones. El formulario se debe
enviar por el mtodo get a la direccin de destino http://aprenderaprogramar.com
respuestas
son
correctas
puedes
consultar
en
los

foros
Formularios en HTML. Controles. Opciones. Casillas de verificacin.
OPCIONES PARA PEDIR DATOS EN FORMULARIOS HTML

Podemos permitir que los usuarios elijan opciones preestablecidas de una lista en un formulario HTML.
Esto podemos lograrlo usando uno de los tres controles siguientes, que pueden construir diferentes
tipos de listas de opciones: casillas de verificacin, botones radio y listas de opciones.
Casillas de verificacin
Una casilla de verificacin es un pequeo cuadrado asociado a una opcin que puede ser marcado o
desmarcado por el usuario.
Una casilla puede encontrarse en dos situaciones: "marcada" "no marcada" ("checked"
"unchecked"). Las casillas de verificacin pueden ser agrupadas visualmente formando listas de
opciones, pero cada una de ellas es tratada individualmente.
Este control es insertado mediante la etiqueta HTML input con el valor "checkbox" en su atributo
"type". Inicialmente, la casilla aparece sin marcar a menos que se especifique lo contrario usando el
atributo booleano (verdadero o false) "checked". Para hacer que una casilla aparezca inicialmente como
casilla marcada escribiremos como atributo de la etiqueta input: checked="checked". Escribe este
cdigo en un editor de textos, gurdalo como archivo con extensin HTML y comprueba los resultados
que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
Selecciona tus intereses:
<br />
<input name="cbipeliculas" type="checkbox" />Pelculas
<br />
<input name="cbilibros" type="checkbox" />Libros
<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
</body>
</html>
En este caso ninguna casilla aparecer marcada como seleccionada inicialmente.
Si lo deseamos podemos marcar una opcin por defecto con el atributo checked para que aparezca
marcada cuando se cargue la pgina web. Cambia el cdigo como indicamos a continuacin y
comprueba los resultados:
<input name="cbilibros" type="checkbox" checked="checked" />Libros
A modo de ejercicio, aade un botn para enviar el formulario y comprueba que el resultado despus
de realizar el envo del formulario con las dos primeras casillas seleccionadas es el siguiente.
http://aprenderaprogramar.com/action.php?cbipeliculas=on&cbilibros=on
Como puedes comprobar, cuando una casilla es seleccionada la informacin que se enva a la direccin
de destino es nombreCasilla=on donde nombreCasilla es el valor que tiene el atributo name en el
cdigo HTML del formulario. Si una casilla no es seleccionada no se enva ninguna informacin.
Botones radio
Los botones radio trabajan de forma similar a las casillas de verificacin con una pequea diferencia: los
botones radio que comparten el mismo nombre conforman un grupo de opciones donde el usuario no
puede seleccionar ms de una a la vez. Esto significa que cuando un usuario elige una opcin, las dems
son automticamente deseleccionadas.
El valor inicial para el grupo depende del navegador (la mayora muestra todos los controles sin
marcar). Esto puede ser cambiado usando el atributo booleano "checked" de forma similar a como
hemos visto para las casillas de verificacin. Escribe este cdigo en un editor de textos, gurdalo como
archivo con extensin HTML y comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
Selecciona tu actividad favorita:
<br />
<input name="intereses" type="radio" value="rbipeliculas" />Pelculas
<br />
<input name="intereses" type="radio" value="rbilibros" />Libros
<br />
<input
name="intereses"
type="radio"
value="rbiinternet"
checked="checked" />Internet
</form>
</body>
</html>
A modo de ejercicio, aade un botn de envo y enva el formulario. Comprueba que en la url despus
de enviar el formulario obtienes lo siguiente:
http://aprenderaprogramar.com/action.php?intereses=rbiinternet
Para botones radio la informacin pasada a la direccin web de destino del formulario es
nameOpcionElegida = valueOpcionElegida. En una lista con muchos botones radio slo se pasar
informacin sobre uno de ellos: la opcin seleccionada. Si no hay ninguna opcin seleccionada no se
pasar ninguna informacin relacionada. Por ejemplo en el caso anterior si envas el formulario sin
ninguna opcin seleccionada la url de destino es http://aprenderaprogramar.com/action.php
Listas de opciones
Estas listas pueden ser construidas utilizando tres elementos:
El elemento HTML select (contenedor principal)
El elemento HTML option (opcin simple)
El elemento HTML optgroup (grupo de opciones). Este elemento es el nico prescindible
(opcional) para construir este tipo de listas.
Veamos primero el aspecto grfico y despus la explicacin y el cdigo.
Los controles de lista pueden ser usadas para recolectar informacin al igual que los botones radio (slo
una opcin) o como casillas de verificacin (mltiples opciones), dependiendo de la presencia del
atributo booleano "multiple".
Se puede especificar que se permite la seleccin mltiple de dos maneras:
- Escribiendo <select multiple name=" " >
- Escribiendo <select multiple="multiple" name=" " >
Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a
"seleccionado" usando el atributo booleano "selected". Escribe este cdigo en un editor de textos,
gurdalo como archivo con extensin HTML y comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
Elije solo una opcin, como en los botones radio:
<select name="entradalista1">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option selected="selected">Entrada de contrasea</option>
<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br /><br /><br />
Elije tantas opciones como quieras, como con casillas de verificacin
(manteniendo presionada la tecla "Ctrl"):<br /><br />
<select name="entradalista2[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option>Entrada de contrasea</option>
<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
</body>
</html>
En el caso de que envisemos el formulario teniendo elegido en el primer select la opcin Entradas de
contrasea y en el segundo las opciones Casillas de verificacin, Botones radio y Listas, la url de
destino quedara de la siguiente manera (pueden haber variaciones entre un navegador y otro a la hora
de codificar caracteres extraos como letras con tildes, ees o corchetes):
http://aprenderaprogramar.com/action.php?entradalista1=Entrada+de+contrase%C3%B1a&entradalist
a2[]=Casillas+de+verificaci%C3%B3n&entradalista2[]=Botones+radio&entradalista2[]=Listas
Para la primera lista sin el atributo "multiple", el valor pasado a la url de destino ser la opcin
seleccionada, pero para el segundo ejemplo el valor pasado indica los distintos valores seleccionados
uno despus de otro. Por ejemplo fruta=Fresa&fruta=Pera&fruta=Manzana.
Aqu nos encontramos con un problema: cmo saber que se han seleccionado tres opciones de fruta
en la direccin web de destino? Este problema ahora no nos resulta relevante porque no vamos a
estudiar cmo se recupera la informacin en este curso, lo nico que sealaremos es que para que
posteriormente se pueda recuperar la informacin con facilidad cuando se permite una seleccin
mltiple y el nombre es comn, es recomendable aadir unos corchetes despus del nombre (atributo
name del select). Estos corchetes permitirn que en la direccin web de destino se pueda recuperar la
informacin interpretando que fruta[]=Fresa&fruta[]=Pera&fruta[]=Manzana quiere decir
fruta[1]=Fresa&fruta[2]=Pera&fruta[3]=Manzana, es decir, que cada opcin elegida lleve un ndice para
poder diferenciarlas (esta forma de trabajar se denomina hacer uso de arrays o arreglos y el ndice
inicial normalmente es el cero). En resumen, para listas con el atributo "multiple" presente, debes
agregar los corchetes ("[]") al final del nombre de la etiqueta HTML select.
La informacin que se enva a la url de destino es:
a) Casos en los que el atributo "value" no est presente, por ejemplo <option>Fresa del
bosque</option>: se enva el texto que figura entre las etiquetas option.
b) Casos en los que el atributo "value" est presente, por ejemplo <option value="fresa">Fresa del
bosque</option>: se enva el contenido del atributo value.
Suponiendo que el atributo name es fruta, en el caso a) en la url de destino aparecera
&fruta=Fresa+del+bosque y en el caso b) aparecera &fruta=fresa
EJERCICIO
Crea una pgina web que contenga un formulario que cumpla estas condiciones. Como ttulo principal
de la pgina debe figurar con etiquetas h1 el texto Preferencias musicales. Debe contener tres
checkbox que permitan elegir tipos de msica favoritas entre Rock, Pop y Jazz. Seguidamente mediante
radio buttons se debe pedir la edad ofreciendo estas opciones: de 12 a 17 aos, de 18 a 35 aos, de 36
a 65 aos y ms de 65. Finalmente, se deben poder elegir grupos y cantantes que te gustan
permitindose la seleccin mltiple y ofreciendo un optgroup denominado Rock con tres nombres de
grupos o cantantes, otro optgroup denominado Pop con tres nombres de grupos o cantantes y otro
optgroup con tres nombres de grupos o cantantes.
respuestas
son
correctas
puedes
consultar
en
los

foros
Formularios en HTML. Botones: envo, restablecimiento, imagen.
BOTONES EN FORMULARIOS
Un botn nos permite realizar una accin con el formulario que lo contenga. Existen dos tipos bsicos
de botones: botn enviar el formulario (envo o submit) y botn poner todos los campos a sus valores
iniciales (restablecimiento o reset).
Adems de estos dos tipos de botones existe un botn especial al que denominamos botn de
contenido, que no posee ninguna accin predefinida. El resultado de pulsar este botn o accin a
ejecutar deber ser especificada en cada caso.
Los botones pueden insertarse a travs de la etiqueta (tag) HTML input (botones para enviar y
reestabler y botones de imagen) o el elemento HTML button (botones de contenido).
BOTONES DE ENVO (SUBMIT)

Este tipo de botones enva automticamente el formulario en que se encuentra cuando es presionado.
Es decir, cuando se pulsa el botn el navegador nos lleva a la direccin web indicada en el campo action
y al mismo tiempo enva a esa direccin los datos que contiene el formulario. Para insertar un botn
usamos la etiqueta <input />. Para indicar que se trata de un botn de envo dentro de esta etiqueta
escribiremos type = "submit". Escribe este cdigo en un editor de textos, gurdalo como archivo con
extensin HTML y comprueba los resultados que se obtienen.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="submit" value="Enviar este formulario" />
</form>
</body>
</html>
Fjate que hemos escrito <input type="submit" value="Enviar este formulario" />. Esta forma de
escritura es una forma abreviada equivalente a:
<input type="submit" value="Enviar este formulario"> </input>
Ambos cdigos producen el mismo resultado, pero es ms habitual usar la primera forma (abreviada)
que la segunda en este tipo de elementos (y en otros).
En el ejemplo anterior, simplemente lo que ocurrir al pulsar sobre el botn Enviar este formulario es
que el navegador ir a la pgina accion.php y recibir los datos que pudiera llevar el formulario. Si en
vez de http://aprenderaprogramar.com/accion.php escribiramos simplemente accion.php la direccion
accion.php se buscara dentro del mismo directorio donde se encontrara el archivo html.
BOTONES DE RESTABLECIMIENTO (RESET)

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es
presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type".
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="condiciones" checked="checked" />
Acepto las condiciones<br />
<input type="reset"
value="Restablecer todos los campos a su valor predeterminado" />
</form>
</body>
</html>
En el ejemplo anterior, puedes probar la funcionalidad del botn cambiando los valores de los
elementos y presionando el botn para restablecer los campos a sus valores iniciales.
BOTONES DE IMAGEN (IMAGE)

Estos tipos de botones funcionan de la misma forma que los botones de envo salvo que los de imagen
son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen
envan, adems de toda la informacin contenida en el formulario, las coordenadas donde ha ocurrido
el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior
izquierda del botn (por ejemplo, para un botn de imagen llamado "boton1" las coordenadas sern
enviadas en la forma "boton1.x" y "boton1.y"). En ocasiones las coordenadas no sern tiles, pero no
tenemos que preocuparnos por ello ya que bastar con recuperar la informacin til y ya est.
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo
"type". Escribe este cdigo en un editor de textos, gurdalo como archivo con extensin HTML y
comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te
apetezca).
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<input name="boton1" type="image"
src="http://i.imgur.com/SpZyc.png">
</form>
</body>
</html>
Si ahora, hiciramos click sobre el botn de imagen, podramos observar como se envan las
coordenadas donde hicimos el click.
Ejemplo de cmo se reflejara en la ruta que muestra el navegador los datos correspondientes a valores
x e y de coordenadas: http://www.aprenderaprogramar.com/?boton1.x=115&boton1.y=31
Ten en cuenta que adems de las coordenadas se enviar toda la informacin contenida en el
formulario. Por ejemplo si en el formulario tuviramos un campo nombre donde se ha introducido
Carlos y un campo fruta donde se ha introducido Fresa, la url de destino sera similar a esta:
http://aprenderaprogramar.com/?nombre=Carlos&fruta=Fresa&boton1.x=46&boton1.y=65
BOTONES DE CONTENIDO (BUTTON)

Los botones de contenido pueden ser usados como botones de envo o restablecimiento, o bien
pueden no tener ninguna accin preestablecida (dependiendo del valor de su atributo "type"). Su
caracterstica principal es que se puede insertar contenido HTML dentro de ellos y as dotarlos de un
aspecto atractivo, imgenes o colores de fondo, etc.
Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o
"reset" en su atributo "type". Un valor button supondr que el botn no har nada en respuesta a un
click, a no ser que se especifique una accin de otra manera (por ejemplo usando el lenguaje JavaScript,
pero no vamos a explicar ahora cmo para centrarnos en el HTML). Un valor submit har que el botn
funcione como un botn de envo. Finalmente, un valor reset har que el botn funcione como un
botn de restablecimiento de los valores predeterminados del formulario.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com ">
<button type="submit">
El <b>tag HTML type button</b><br />
permite contenido HTML en su interior.
</button>
</form>
</body>
</html>
Como podemos observar, hemos introducido contenido HTML dentro del propio botn; en concreto
hemos usado la etiqueta <b> </b> para poner texto en negrita y la etiqueta <br /> para introducir un
salto de lnea. Ten en cuenta que la apariencia puede variar segn el navegador que utilices.
A su vez hemos escrito <button type="submit">, lo que supondr que el botn funcione como un botn
de envo. Si hubiramos escrito <button type="reset"> el botn funcionara como un botn de
restablecimiento de valores por defecto, y su hubiramos escrito <button type="button"> el botn no

dara lugar a ninguna accin. En caso de no especificarse type para el botn, normalmente el navegador
considerar que es un botn tipo submit.
EJERCICIO
Crea una pgina web que contenga dos formularios que cumplan estas condiciones.
Como ttulo antes del primer formulario debe figurar con etiquetas h1 el texto <<Inscripcin al concurso
Saber y Ganar>>. Debe contener:
a) Nombre
b) Apellidos
c) email
d) Telfono
e) Un botn submit para enviar que muestre el texto <<Me apunto!!!>> y un botn reset para
restablecer que muestre el texto <<Cancelar>>.
Como ttulo antes del segundo formulario debe figurar con etiquetas h1 el texto Peticin de
informacin. Debe contener:
a) Nombre
b) Pas
c) email
d) Consulta que se quiere realizar (debe ser un textarea que permita escribir mltiples lneas).
e) Un botn para enviar de tipo imagen y un botn para restablecer de tipo button que muestre dentro
del botn lo siguiente: <<Pulse aqu para cancelar>>, un salto de lnea, y el texto <<Esto borrar los
datos>>.

respuestas
son
correctas
puedes
consultar
en
los

foros
enctype multipart/form-data. Seleccionar archivo con HTML.
SUBIR ARCHIVOS AL SERVIDOR USANDO UN FORMULARIO HTML

Los formularios HTML permiten que el usuario seleccione archivos para subirlos (enviarlos) al servidor.
El control entrada de archivos muestra una caja de texto donde el usuario debe especificar la ruta del
archivo que se encuentra en el ordenador del usuario y que ser enviado al servidor.
De esta manera podemos enviar archivos desde un computador cliente al servidor a travs de una
pgina web. El control habitualmente muestra un botn para elegir el archivo visualmente.
EL ATRIBUTO ENCTYPE DE LA ETIQUETA FORM

Para permitir el envo de archivos a travs de un formulario hemos de tener en cuenta varias cosas.
La primera, que existan dos mtodos de envo: get y post. Get transmite la informacin en forma de
texto a la url de destino, por tanto no ser un mtodo vlido para el envo de archivos (ya que no
podemos enviar un archivo en modo de texto a una url de destino). Para permitir la seleccin y envo de
archivos a travs de un formulario tendremos por tanto que usar el mtodo post.
La segunda, que existe un protocolo para el envo de la informacin desde la url donde se encuentra el
formulario hasta la url de destino. Este protocolo permite tener en cuenta si se enva simplemente
texto o si se envan cosas ms complejas como archivos, ya que no es lo mismo la transmisin de una
cosa que de otra.
Si no se especifica el valor del atributo enctype el navegador aplica un valor por defecto (dicho valor es
application/x-www-form-urlencoded). Este valor, que no es necesario especificar ya que el navegador
lo aade sin necesidad de escribirlo, indica que se enva texto y permite que se apliquen los protocolos
adecuados.
Para enviar archivos debe especificarse que para la etiqueta form el valor del atributo enctype =
"multipart/form-data" como veremos en el ejemplo de cdigo a continuacin.
TYPE FILE EN ETIQUETA INPUT

Finalmente, para crear el control en el formulario que permita al usuario seleccionar un archivo hemos
de crear una etiqueta input y establecer su atributo type = "file"
Escribe el siguiente cdigo en un editor como Notepad++ y gurdalo con el nombre que quieras, por
ejemplo pruebaEnvioArchivo.html.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<form method="post" action="accion.php" enctype="multipart/form-data">
Ingresa el archivo:
<input name="imagen" type="file" />
</form>
</body>
</html>
Abre ahora el archivo html creado en tu navegador. Debes de visualizar algo similar a esto.
La visualizacin puede ser un poco diferente segn el navegador que utilicemos.
Al presionar sobre el botn Seleccionar archivo (o Examinar en otros navegadores) se mostrar el

explorador de archivos de Windows y podremos seleccionar el archivo que deseemos.
En el cdigo que hemos escrito anteriormente nos falta un botn para poder realizar el envo del
formulario. Aade esta lnea al cdigo del formulario para disponer de ese botn:
<input type="submit" value="Enviar" />
Modifica ahora el mtodo de envo y establece que sea GET en lugar de POST, selecciona un archivo y
pulsa en el botn de envo. En la Url a donde nos dirige el navegador veremos el nombre del archivo
seleccionado como un parmetro dentro de la URL una vez hayamos enviado el formulario. Las rutas
pueden ser de este tipo, suponiendo que el archivo seleccionado se llamara foto.jpg:
file:///C:/Users/Asus/Desktop/accion.php?imagen=foto.jpg (esto sera un ejemplo de la ruta que
obtendramos si el formulario est en nuestro ordenador).
http://www.aprenderaprogramar.com/accion.php?imagen=foto.jpg (esto sera un ejemplo de la ruta

que obtendramos si el formulario est en un servidor).
Hemos cambiado el mtodo a get para poder visualizar un resultado, ya que usando post, como ya
sabemos, los datos se envan de forma oculta. Sin embargo usar get no tiene ninguna utilidad prctica,
ya que como hemos indicado no permite que se enve el archivo al servidor, aqu lo hemos empleado
nicamente con fines didcticos.
Cuando usemos post, la imagen ser enviada al servidor, lo cual significa que el archivo foto.jpg de
nuestro ejemplo se enviar a la URL de destino y usando el cdigo y lenguaje de programacin
adecuado, normalmente se proceder a almacenarlo en un directorio del servidor (ordenador remoto)
con el que estuviramos trabajando. Tanto para el proceso de recepcin como para guardar y poder
manipular posteriormente ese archivo necesitaremos de otros lenguajes de programacin a los que se
denomina lenguajes del lado del servidor como PHP, JSP, ASP, etc.
Nosotros no entraremos a describir cmo sera el proceso de recepcin y manipulacin del archivo en el
servidor despus del envo, porque esto implicara el uso de otros lenguajes de programacin que no
son objeto de este curso, que se centra exclusivamente en HTML. Si tienes inters en estudiar un
lenguaje del lado del servidor, te recomendamos que una vez completes el curso de HTML y el de CSS,
continues con el curso Tutorial bsico del programador web: PHP desde cero de
aprenderaprogramar.com, donde se explican los fundamentos del lenguaje PHP.
EJERCICIO
Crea una pgina web que contenga un formulario que cumpla estas condiciones.
Como ttulo antes del formulario debe figurar con etiquetas h1 el texto <<Inscripcin al concurso Jara y
Sedal>>. Debe contener:
a) Nombre
b) Apellidos
c) Direccin
d) Fotografa (aqu se debe dar opcin a elegir un archivo de imagen que ser la fotografa)
e) Un botn submit para enviar que muestre el texto <<Me apunto!!!>> y un botn reset para
restablecer que muestre el texto <<Cancelar>>.
Ten en cuenta que para el envo de archivos tienes que establecer correctamente los atributos del
formulario: method y enctype.
respuestas
son
correctas
puedes
consultar
en
los

foros
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las pginas.
CAPAS O CONTENEDORES HTML

Las capas o contenedores son unos recuadros o espacios rectangulares que pueden colocarse en
cualquier parte de la pgina. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual,
permitiendo organizar y dar estructura y diseo a las pginas HTML.
ETIQUETA DIV
Podemos insertar una capa o contenedor a travs de las etiquetas <div> y </div>
A travs del atributo style se establecen las propiedades de estilo de la capa mediante el lenguaje CSS.
Nosotros no vamos a estudiar CSS en este curso, pero incluiremos estilos muy bsicos para facilitar la
comprensin del cdigo de ejemplo que iremos viendo.
Imaginemos que queremos crear una pgina web con 3 partes diferenciadas: cabecera, cuerpo y pie.
Crea un archivo html con el siguiente cdigo y visualzalo en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
<html>
<head>
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="border: 1px solid red;">
Cabecera de la pgina.
</div>
<div style="border: 1px solid green;">
Cuerpo de la pgina.
</div>
<div style="border: 1px solid blue;">
Pie de la pgina
</div>
</body>
</html>
4.01
Transitional//EN"
Como podemos observar, hemos creado 3 capas (rectngulos) cada una con un borde de distinto color.
Y lo ms importante, le hemos dado estructura a la pgina y un diseo muy sencillo y bsico.
Ahora supongamos que queremos cambiar los estilos de la cabecera. Al tener bien definida y
estructurada la pgina HTML en capas, simplemente realizamos el siguiente cambio (no te preocupes si
no entiendes la sintaxis para establecer los estilos, lo nico importante es ver cmo se puede cambiar
especficamente las caractersticas de una capa HTML):
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: center; font-size: 60px; border: 1px solid red;">
Cabecera de la pgina.
</div>
Cuerpo de la pgina.
</div>
Pie de la pgina
</div>
</body>
</html>
Escribe el cdigo anterior, gurdalo en un archivo html y visualzalo en tu navegador.
Hemos aumentado el tamao de la fuente (letra) de la cabecera y, adems, hemos centrado el texto,
simplemente cambiando los estilos de la capa (div) que contena a la cabecera.
Por tanto, la principal utilidad de las capas, como ya mencionamos antes, es la de poder separar por
partes la pgina HTML (estructurar). Tener bien estructurada un documento HTML (pgina web) es
importante por distintos motivos, por ejemplo:
a) Nos permitir establecer un estilo diferente (diseo) para cada contenedor.
b) Nos permitir identificar cundo un usuario hace click sobre la pgina, en qu contenedor ha hecho
click.
c) Nos permitir crear efectos especiales para una capa concreta.
ETIQUETA SPAN
La etiqueta span al igual que casi todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su
respectiva etiqueta de cierre </span>. Qu utilidad tiene? La etiqueta span sirve normalmente para
crear subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada
subdivisin sin necesidad de crear nuevas capas.
Imaginemos que en el ejemplo anteriormente mostrado, dentro de la cabecera cuya fuente es de color
negro, quisiramos aadir texto de distintos colores pero que ese texto perteneciera a la misma capa
de la cabecera. Para ello, utilizaramos la etiqueta span.
Escribe el siguiente cdigo, gurdalo en un archivo html y visualzalo en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: center; font-size: 60px; border: 1px solid red;">
Cabecera
<span style="color: green;">de</span> la <span style="color: orange;">pgina</span>.
</div>
Cuerpo de la pgina.
</div>
Pie de la pgina
</div>
</body>
</html>
Como podemos observar, la etiqueta span permite crear subdivisiones que nos servirn para poder
identificar y aplicar estilos a porciones de texto dentro de una misma capa (div).
HTML SE COMBINA CON CSS

Para poder aprovechar todo el potencial de este par de etiquetas, deberamos tener un buen
conocimiento de maquetacin, diseo y uso de hojas de estilos (CSS). En este curso estos temas no se
van a tratar, aunque se mencionan de forma sencilla y simplificada. El verdadero potencial de estas
etiquetas lo obtenemos cuando utilizamos HTML combinado con CSS, pero desde el punto de vista
didctico, lo adecuado es ir aprendiendo los aspectos ms bsicos para luego introducir los ms
complejos. No te preocupes por hacer pginas complejas en este momento, sino por entender bien los
conceptos. Una vez termines el curso de HTML te recomendamos que continues con el curso Tutorial
bsico del programador web: CSS desde cero de aprenderaprogramar.com.
EJERCICIO
Crea una pgina web utilizando los distintos elementos HTML que hemos ido estudiando en el curso
que refleje de forma aproximada lo que se ve en esta imagen y que cumpla lo indicado ms abajo:
Los elementos a incluir son: un ttulo h1, un ttulo h2. Men, separador hr, lista de elementos que son
links, prrafos de texto que contienen algunos links. Imgenes. Un formulario. Imagen y texto de pie.
La pgina debe organizarse en capas segn esta estructura: capa de cabecera (contiene ttulos h1 y h2).
Capa de cuerpo (contiene men, prrafos y formulario). Capa de pie (contiene imagen y copyright).
respuestas
son
correctas
puedes
consultar
en
los

foros
id HTML. Creacin de un portal bsico. Cabecera, cuerpo, pie.
ATRIBUTO ID HTML
En las prximas entregas, nos vamos a centrar en poner en marcha todos los conocimientos que hemos
ido adquiriendo a lo largo del curso para crear un pequeo, y de momento modesto, portal web. Para
ello, vamos a crear un portal muy bsico incluyendo algo de maquetacin.
En primer lugar crearemos una pgina de inicio o portada que contendr lo siguiente: una cabecera, un
men, un cuerpo y un pi. No entraremos a explicar los temas de diseo ni las hojas de estilos que se
suelen usar en pginas web ya que ahora trataremos de centrarnos en cuestiones bsicas de HTML sin
complicarlo con otros aspectos aadidos.
Lo que primero vamos a hacer es crear una estructura bsica de pgina HTML. Respecto a los
conocimientos que ya tenamos, aadimos la novedad de que a cada contenedor div le vamos a poner
un nombre nico (que no puede repetirse en otro contenedor) usando esta expresin. <div
id="AquElNombreDelContenedor"> elementos </div>
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
<html>
<head>
<title>Portal bsico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="wrapper">
<div id="menu"></div>
<div id="body"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Transitional//EN"
Bsicamente, la estructura ya la tenemos montada, ahora lo necesario es ir definiendo cada uno de los
elementos por separado y posteriormente unificarlos todos.
CABECERA
<div id="header">
Portal (Tutorial bsico del programador web: HTML desde cero) - aprenderaprogramar.com
</div>
En nuestro caso la cabecera ser tan simple que solo mostrar un texto. Puedes intentar complicarla
aadiendo algunos botones, imgenes, campos de texto, o lo que creas oportuno.
PIE
<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
El pie tambin es similar en complejidad a la cabecera. En este caso, slo mostraremos el copyright
como texto. Se puede complicar aadindole imgenes, links, etc.
MEN Y CONTENIDO PRINCIPAL (CUERPO)

En este caso en concreto, el men que vamos a crear ir en un contenedor div y el contenido principal
en otro contenedor div. Para ello tendremos que usar tantas etiquetas div como resulten necesarias.

<div id="wrapper">

<div id="menu">
<div>Men</div>
<hr style="color:red; background-color:red; width:50%;" />
<ul>
<li><a href="#">Portada</a></li>
<li>
<a href="http://www.aprenderaprogramar.com">aprenderaprogramar.com
</a>
</li>
</ul>
</div>


<div id="body">
<p>
Al hablar de fundamentos de programacin nos referimos a aquellos
conocimientos bsicos que nos permitirn desenvolvernos sin excesivo nmero
de tropiezos. Veamos a qu tipo de tropiezos nos referimos utilizando un
smil de transporte. El conductor (programador) dispone de un coche
(el ordenador) y desea trasladarse
</p>
</div>

</div>

La expresin <a href="#">Portada</a> significa que hacemos un link a #. El smbolo # es obvio que no es
una URL, lo que significa es link a la misma pgina que estamos visualizando.
El cdigo resultante de todo el proceso, ms algunos detalles bsicos de diseo (no te preocupes si no
entiendes algunos elementos definidos con style, lo importante es comprender el cdigo y estructura
HTML), sera el que se muestra a continuacin. Abre un editor como Notepad++, escrbelo y gurdalo
con un nombre como ejemplo1.html. A continuacin, visualiza el resultado en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;">
<div id="header">
</div>

<br />
<br />
<br />
<div id="wrapper">

<div id="menu">
<div>Men</div>
<hr style="color:red; background-color:red; width:50%;"
/>
<ul>
<li>
</a>
</li>
</ul>
</div>


<div id="body">
<p>
Al hablar de fundamentos de programacin nos referimos a aquellos
conocimientos bsicos que nos permitirn desenvolvernos sin excesivo nmero
de tropiezos. Veamos a qu tipo de tropiezos nos referimos utilizando un
smil de transporte. El conductor (programador) dispone de un coche
(el ordenador) y desea trasladarse
</p>
</div>

</div>
<br /> <br /> <br />
<div id="footer">
</div>
</div>
</body>
</html>
Si abrimos la pgina HTML del ejemplo anterior obtendremos una visualizacin similar a la siguiente:
Si tuviramos unos conocimientos ms amplios en maquetacin y hojas de estilo (CSS), fcilmente

podramos conseguir convertir la pgina anterior en una algo ms vistosa. No vamos a entrar ahora a
describir cmo.
EJERCICIO
Define la estructura de un portal web que conste de:
a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.
b) Un cuerpo con un men que contenga 5 items, una imagen y dos prrafos.
c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.
respuestas
son
correctas
puedes
consultar
en
los

foros
Ejemplo formulario HTML. Crear un portal web bsico.
FORMULARIO DE DATOS PERSONALES

En esta entrega nos vamos a centrar en crear un formulario de entrada de datos personales: nombre,
apellidos, direccin, correo electrnico y nmero de telfono. Los formularios son elementos muy
frecuentes en las pginas web y se usan para recabar datos de todo tipo por parte de los usuarios.
Apoyndonos en el diseo obtenido en la entrega anterior. Crearemos una nueva pgina. Para ello slo
tendremos que modificar el contenido de la capa (div) body.
<div id="body">
<form method="get" action="http://aprenderaprogramar.com">
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Direccin: <input type="text" name="direccion" /><br />
Correo electrnico: <input type="text" name="correo" /><br />
Telfono: <input type="text" name="telefono" /><br />
</form>
</div>
A modo de ejercicio, abre un editor como Notepad++, escrbe el cdigo y gurdalo con un nombre
como ejemplo1.html. A continuacin, visualiza el resultado en tu navegador. Recordar que aunque en
este ejemplo falten etiquetas HTML el navegador interpretar el cdigo y tratar de mostrar un
resultado. Sin embargo, para que la pgina est correctamente construida deberamos incluir todas las
etiquetas propias de un documento HTML (como <html> </html>, etc.).
Si nuestro formulario lo incluimos dentro del pequeo portal que habamos creado en la anterior
entrega del curso, el cdigo completo sera el siguiente. Abre un editor como Notepad++, escrbelo y
gurdalo con un nombre como ejemplo2.html. A continuacin, visualiza el resultado en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;">
<div id="header">
</div>

<br />
<br />
<br />
<div id="wrapper">

<div id="menu">
<div>Men</div>
<hr style="color:red; background-color:red; width:50%;"
/>
<ul>
<li>
</a>
</li>
</ul>
</div>


<div id="body">
<form method="get" action="accion.html">
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Direccin: <input type="text" name="direccion" /><br />
Correo electrnico: <input type="text" name="correo" /><br />
Telfono: <input type="text" name="telefono" /><br />
</form>
</div>

</div>
<br /> <br /> <br />
<div id="footer">
</div>
</div>
</body>
</html>
Si abrimos la pgina HTML del ejemplo anterior obtendremos una visualizacin similar a la siguiente:
Fjate que el cdigo de la cabecera, men y pie es exactamente el mismo que el de la entrega anterior.
Slo hemos modificado el cuerpo de la pgina. Cuando navegas por Internet, se suelen mantener las
mismas cabeceras, men y pie en las pginas HTML que visitamos. Es decir, es como si existiera una
plantilla de forma que el aspecto es siempre el mismo (cabecera, pie, color de fondo) excepto una
parte de contenido central. Cuando tengas ms conocimientos, en vez de repetir el cdigo en todos los
archivos, podrs utilizar instrucciones especficas para hacer que esos contenidos de plantilla se
carguen en todas las pginas de un portal sin necesidad de ir repitindolos en todas las pginas que
creamos. Adems, as podramos cambiar el elemento cabecera en un nico lugar y obtener su cambio
en todas las pginas, sin tener que editar todas las pginas una por una para cambiar su cabecera. Sin
embargo, preferimos no explicar esto ahora para tratar de ir paso por paso.
EJERCICIO
Modifica el formulario HTML con el que hemos trabajado para incluir un campo fotografa que permita
el envo de un archivo de imagen como parte del formulario. Responde a estas preguntas:
Qu atributo ha de especificarse para el form para poder enviar archivos? Qu valor ha de darse a
dicho atributo? Qu mtodo de envo hay que especificar para el form si se envan archivos?
respuestas
son
correctas
puedes
consultar
en
los

foros
Crear una cuenta de hosting gratuita en un servidor web.
CREAR UNA CUENTA DE HOSTING GRATUITA EN UN SERVIDOR HTML Y ACCEDER VA CPANEL

En esta entrega vamos a crear una cuenta de hosting gratuita en un servidor HTML y accederemos a
ste va Panel de Control (el panel de control se suele llamar Cpanel o Control Panel). El objetivo va
a ser aprender a subir una pgina web a un servidor para que pueda estar visible en internet a todas las
personas que quieran acceder a ella desde cualquier parte del mundo.
CREAR CUENTA DE HOSTING GRATUITA

En Internet hay muchas pginas web que permiten crear una cuenta de hosting gratuito en un servidor
HTML: por ejemplo www.000webhost.com, www.byethost.com, www.agilityhoster.com y varias ms.
Creando una cuenta en un hosting gratuito, disponemos de un servidor (que compartimos con otros
usuarios) donde podemos alojar una pgina web. Nosotros usaremos el servidor de Byethost
(byethost.com), aunque podramos usar cualquier otro porque todos ellos son similares. Tambin, si
dispones de una cuenta de hosting gratuita o de pago y de un dominio, puedes utilizarlo sin necesidad
de dar todos los pasos que explicamos aqu.
En nuestro caso, en primer lugar crearemos la cuenta de hosting gratuita. Para ello, accedemos a la
pgina web de Byethost, introduciendo en nuestro navegador la siguiente direccin:
www.byethost.com
Nos aparecer una pgina similar a la siguiente (ten en cuenta que el aspecto puede ir variando cada
pocos meses):
Dentro de las opciones disponibles, buscaremos y entraremos en la seccin Free Hosting haciendo click
en la seccin marcada. Ahora debemos buscar la opcin para crear una cuenta (sign up):
Una vez accedemos a la pgina de creacin de una cuenta, se nos mostrar un formulario donde
tendremos que rellenar una serie de datos. Aqu tendremos que tener en cuenta que el nombre de
usuario que insertemos, estar ligado a la url de acceso a nuestro sitio. Es decir, si como nombre de
usuario (username) introducimos lacocinademarco, la direccin de nuestro sitio Web ser similar a la
siguiente http://lacocinademarco.byethost31.com:
En nuestro caso introduciremos una serie de datos a modo de ejemplo. Introduce t los datos que
vayas a usar para crear tu cuenta (elige un password que combine letras y nmeros).
Una vez hayamos finalizado de introducir los datos solicitados, haremos click sobre el botn Registrar
(Register) y nos aparecer una pgina Web indicndonos que se nos ha enviado un correo electrnico a
la direccin de correo que hayamos facilitado en el formulario y en ese correo nos indicarn un enlace
Web (direccin url) donde debemos activar nuestra cuenta.
El ltimo paso que nos quedara para crear nuestra cuenta de hosting gratuita sera entrar a nuestro
correo y hacer click en el enlace de activacin del correo de Byethost que nos acaba de llegar.
Dear byethost7.com's Member, Thank you for registering with byethost7.com.
Please click on the link below to activate your account. If the page does not display, you may copy and paste the link to your
browser.
http://securesignup.net/activate.php?user=b7_1022999&email=contactar@aprenderaprogramar.com&hash=8ggfg8sfdfd17c9
8efdghj99638c764&token=-576345454
While you wait for your account to activate, please 'like' us at http://www.facebook.com/free.byethost
best regards byethost7.com
Acto seguido se nos indicar que la activacin fue realizada con xito y se nos enviar un nuevo correo
electrnico con la informacin detallada de nuestros datos de acceso.
El correo que nos enva el proveedor del servicio de hosting (en nuestro caso Byethost) con la
informacin de acceso detallada tiene ms o menos el siguiente contenido:
Dear Valued Customer, Thank you for registering at byethost7.com. We are
Adems nos envan los datos de acceso:

Cpanel Username: b7_datos
Cpanel Password: elpassword
Your url: http://apr2.byethost7.com or http://www.apr2.byethost7.com
FTP Server: ftp.byethost7.com
FTP Loging: b7_datos
FTP Password: elpassword
MySQL Database Name: must create in Cpanel
MySQL Username: b7_datos
MySQL Password: elpassword
MySQL Server: see CPanel
Cpanel URL: http://cpanel.byethost7.com
Estos datos son importantes pues son los que nos permitirn gestionar todo lo necesario relativo a
nuestra pgina web. Conviene imprimirlos adems de mantenerlos bien localizados en un archivo de
texto dentro de nuestro ordenador.
ACCEDER VA PANEL DE CONTROL (CPANEL)

Para acceder va Cpanel, debemos ir a la url que nos hayan facilitando, en este ejemplo
http://cpanel.byethost7.com, e introducir el nombre de usuario y la contrasea.
Una vez comprobados que los datos sean correctos, se nos abrir el Panel de Control (Cpanel en este
hosting, pero puede ser otro panel similar si estamos usando otro hosting)
Dentro del panel de control existen distintas reas. Podremos ver normalmente un rea de informacin
de la cuenta, un rea de administrador de archivos que nos proporciona un explorador de archivos
parecido al de Windows o Filezilla, pero que adems nos permitir descomprimir archivos .zip y, una
tercera rea con la que podremos acceder a las bases de datos previamente creadas. Nosotros en este
curso slo usaremos una, el rea de administrador de archivos. Ten en cuenta que no todos los hosting
ofrecen el mismo panel de control ni las mismas posibilidades.
Subir nuestra web al servidor HTML mediante el explorador de archivos.
SUBIR NUESTRA WEB AL SERVIDOR HTML

Ahora que ya tenemos creada nuestra cuenta gratuita, vamos a subir nuestra web (conjunto de pginas
HTML) a nuestro servidor de hosting. Una vez hagamos esto, nuestra pgina web pasar a estar
accesible desde internet, de forma que cualquier persona con conexin a internet puedea acceder a
ella.
PANEL DE ADMINISTRACIN O CPANEL.

Una vez accedemos al panel de control, tal y como se explic en la entrega anterior, nos aparecer una
pgina similar a la siguiente (ten en cuenta que el aspecto puede variar):
Dentro del panel de control existen normalmente distintas reas:

1. Informacin de la cuenta
2. Administrador de archivos que nos proporciona un explorador de archivos parecido al de
Windows o Filezilla pero que adems nos permitir descomprimir archivos .zip (no todos los
servidores permiten la descompresin zip, pero la mayora de ellos s).
3. Acceso a las bases de datos previamente creadas.
4. Otras reas
Para entrar en el explorador de archivos, haremos click en el enlace Administrador de archivos,

Gestor de archivos o equivalente y nos aparecer una ventana similar al explorador de Windows,
donde podremos ver carpetas y archivos ubicados en el servidor (computador remoto).
Como podemos observar en la imagen anterior, en nuestro servidor existen un par de archivos que no
tocaremos ni prestaremos atencin y, una carpeta que se llama 'htdocs' (en algunos casos la carpeta se
llama de otra manera). Esta carpeta contendr todos los ficheros HTML o pginas webs que sern
accesibles desde Internet utilizando nuestro nombre de dominio (recordar que en nuestro caso de
ejemplo es apr2.byethost7.com). Segn el servidor y proveedor de hosting, la carpeta que contiene los
ficheros puede tomar otros nombres como 'public_html', 'html', 'www' u otros nombres.
Ahora haremos click en la carpeta htdocs y veremos su contenido.
Debemos tener en cuenta que quizs el contenido de la carpeta htdocs difiera un poco del mostrado
en la imagen anterior. Puede que Byethost o el servidor que uses haga cambios en su poltica e incluya
otros ficheros.
En nuestro caso, existe un fichero index.php, tambin es normal que pueda existir un archivo llamado
index.htm o index.html
Nosotros lo que vamos a hacer en primer lugar es borrar todos los ficheros index.* donde * puede ser
php, htm o HTML de la carpeta htdocs. Para ello, seleccionaremos todos los archivos index, y despus
haremos click en delete (eliminar) para borrarlos.
Una vez, hagamos click en delete (eliminar) se nos abrir una ventana donde nos pedir que
confirmemos el borrado del archivo o archivos. Nosotros aceptaremos haciendo click en la imagen de
aceptacin.
Tras borrar los archivos seleccionados, volveremos atrs al gestor de archivos. Una vez volvamos atrs,
haremos click en el botn upload (subir archivo) para enviar los archivos de nuestra primera pgina
web HTML y as poder acceder a ella desde cualquier parte en Internet.
Una vez pulsado upload (subir archivo) seleccionaremos el fichero que deseamos subir.
Una vez seleccionado el archivo (recordad donde guardasteis el archivo con la pgina web HTML de la
entrega CU00727B del curso, cuyo nombre era ejemplo01.html similar), pulsamos sobre el botn
abrir y confirmamos la subida.
Ahora si miramos en el gestor de archivos debemos ver el archivo que hemos subido (si no lo ves pulsa
F5 para refrescar). En este preciso momento ya tenemos nuestra web subida al servidor y accesible
desde Internet desde cualquier parte del mundo. La web est accesible gracias a que el archivo html se
encuentra en el servidor y cuando una persona escriba la direccin correcta en un navegador web, el
servidor se encargar de enviarle el cdigo HTML que permite que se visualice la pgina web en su
computador.
Para ver nuestra web, simplemente abriremos nuestro navegador y pondremos en la url:
http://apr2.byethost7.com/ejemplo01.html (en nuestro caso de ejemplo. En tu caso, pon la direccin
que corresponda).
Cada vez que una persona escriba la URL en su navegador, conectar con el servidro y ste se encargar
de enviar la informacin precisa a travs de internet de modo que pueda ver la pgina web en su
ordenador o dispositivo.
EJERCICIO
Crea tres archivos HTML con diferente contenido y gurdalos con tres nombres de archivo distintos, por
ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las
pginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de
poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuacin sube los tres
documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre
una pgina y otra.
respuestas
son
correctas
puedes
consultar
en
los

foros
Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.
QU ES Y PARA QU SIRVE JAVASCRIPT?

JavaScript es un lenguaje de programacin, al igual que PHP, si bien tiene diferencias importantes con
ste. JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador,
no en el servidor) permitiendo crear efectos atractivos y dinmicos en las pginas web. Los navegadores
modernos interpretan el cdigo JavaScript integrado en las pginas web.
Para entender lo que es JavaScript consideremos lo siguiente. Un usuario escribe una direccin web en
su navegador, por ejemplo http://www.aprenderaprogramar.com. El servidor recibe la peticin y como
respuesta a esa peticin enva al ordenador del usuario cdigo HTML junto a cdigo JavaScript. El
cdigo HTML se encarga de que en la pantalla se muestre algo, por ejemplo una imagen, un men, etc.
El cdigo JavaScript se puede encargar de crear efectos dinmicos en respuesta a acciones del usuario,
por ejemplo que se despliegue un men tipo acorden cuando el usuario pasa el ratn por encima de
un elemento del men.
La ventaja de JavaScript es que al estar alojado en el ordenador del usuario los efectos son muy rpidos
y dinmicos. Al ser un lenguaje de programacin permite toda la potencia de la programacin como uso
de variables, condicionales, bucles, etc. Tambin podemos citar algn inconveniente: por ejemplo si el
usuario tiene desactivado JavaScript en su navegador, no se mostrarn los efectos. No obstante, hoy da
la mayora de los usuarios navegan por la web con JavaScript activado.
FORMAS DE USAR JAVASCRIPT EN DOCUMENTOS HTML

La primera forma de usar JavaScript dentro de una pgina web es embebiendo directamente el cdigo
JavaScript dentro del cdigo HTML. Vamos a poner un ejemplo de cdigo JavaScript pero no vamos a
entrar en detalle a comentarlo ni explicarlo ya que en este curso no vamos a explicar JavaScript.
Simplemente queremos saber interpretar por qu dentro de un documento HTML pueden aparecer
fragmentos de cdigo escrito en otro lenguaje.
Ejemplo:
<html>
<head>
<title>Embeber JavaScript aprenderaprogramar.com</title>
</head>
<body>
document.write('Hola Mundo');
</script>
</body>
</html>
Como podemos observar, el cdigo JavaScript debe ir encerrado entre las siguientes marcas:
</script>
La segunda forma para usar JavaScript es definir JavaScript en un archivo externo. Los archivos de
JavaScript son archivos de texto guardados con la extensin .js. Veamos un ejemplo: imaginemos que
tenemos un archivo denominado mensaje.js con cdigo JavaScript:
alert('Mensaje JavaScript');
Ahora, para incluir dicho archivo en la una pgina web utilizaramos el siguiente cdigo:
<script type="text/javascript" src="archivo.js"></script>
Este cdigo se escribira dentro de las etiquetas <head> y </head> del documento HTML en el que
vayamos a insertarlo.
<html>
<head>
<title>Embeber JavaScript aprenderaprogramar.com</title>
<script type="text/javascript" src="archivo.js"></script>
</head>
<body>
Pgina web de prueba aprenderaprogramar.com
</body>
</html>
NOTA: Tal y como hemos pues la ruta, el archivo.js debe estar en el mismo directorio que el fichero
HTML. Si estuviera en otro directorio, habra que especificar la ruta.
Los resultados los vemos al cargar el documento html en nuestro navegador y sern similares a lo que
vemos en las siguientes imgenes.
Al cargar el documento HTML se incorpora el cdigo JavaScript desde el archivo incrustado, que da
lugar a que se muestre una ventana con el aviso Mensaje JavaScript. Cuando pulsemos sobre el botn
aceptar, veremos el contenido del documento HTML:
Los ejemplos anteriores son muy simples, pero usando JavaScript avanzado podemos crear funciones
interactivas en nuestra pgina web, como por ejemplo una calculadora.
En el ejemplo que hemos puesto, gracias a JavaScript el usuario podra introducir un peso (weight), los
kilates (karats) y al pulsar el botn = obtener el valor. Con JavaScript se pueden realizar numerosas
funciones que no se pueden realizar con HTML.
Otro lenguaje que se relaciona con HTML es PHP, si bien PHP no se ejecuta en nuestro ordenador sino
en el servidor.
RESUMEN
Los documentos HTML permiten incrustar fragmentos de cdigo JavaScript, bien dentro del propio
archivo HTML o bien realizando una carga de ese cdigo indicando el archivo donde se encuentra el
cdigo JavaScript. Dentro de un documento HTML puede haber ninguno, uno o varios scripts de
JavaScript. El uso de JavaScript es muy habitual en la programacin web. En este curso no entramos a
explicar el lenguaje de programacin JavaScript, pero hemos considerado adecuado dejar indicado que
JavaScript es un lenguaje que la mayor parte de los programadores web conocen porque permite hacer
muchas cosas que no se pueden hacer con HTML. Si quieres profundizar en la programacin web te
recomendamos que despus del curso de HTML realices los cursos de CSS y JavaScript de

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.
QU ES Y PARA QU SIRVE CSS?

CSS son las siglas de Cascading Style Sheets, que se traduce como Hojas de Estilo en cascada. CSS es
un lenguaje que permite que en un documento separado de tus pginas web definas todo el estilo de tu
web. Por estilo entendemos aspecto de los enlaces, colores, tipos de letra, fondos, etc. Es decir, haces
tu web con un contenido, pero el diseo o presentacin de ese contenido lo defines en un documento
externo, en una hoja CSS.
La ventaja de usar CSS es clara: al tener definido el estilo en un lugar aparte y diferenciado de los
contenidos, nosotros podemos cambiar la apariencia de una pgina web modificando nicamente la
definicin de estilos, sin necesidad de modificar los archivos donde tenemos el contenido.
HTML es utilizado para estructurar los contenidos, es el cuerpo que contiene la informacin. CSS es
usado para formatear contenidos estructurados. Para que se entienda mejor, podemos ver las dos
imgenes siguientes, que tienen el mismo contenido pero una de ellas no tiene CSS y la otra s.
Como podemos observar, siendo el contenido el mismo en las dos pginas webs mostradas en las
imgenes, sin CSS el diseo de la web es poco atractivo, por no decir nulo. Por otra parte, sin necesidad
de tocar en el contenido, slo aadiendo la hoja de estilos, conseguimos tener un diseo agradable y
atractivo.
Ahora podemos preguntarnos: para crear documentos HTML necesitamos CSS? La respuesta es que
HTML y CSS son dos cosas distintas, pero que sin embargo suelen ir muy ligadas y no se entienden la
una sin la otra. Supn que HTML fuera la estructura de un edificio y CSS algo que permite que el edificio
sea agradable y habitable: colores en las paredes, rtulos, decoracin, etc. Podramos tener un edificio
sin decoracin? Posiblemente s, pero en la prctica ambas cosas suelen ser necesarias. Con HTML y CSS
pasa algo parecido. Ser habitual que los documentos HTML se apoyen en archivos CSS para tener
estilos atractivos.
Para estudiar CSS en profundidad te recomendamos que sigas el curso Tutorial bsico del programador
web: CSS desde cero de aprenderaprogramar.com. Aqu slo vamos a mostrar algunos ejemplos
bsicos para hacernos una idea de para qu sirve y cmo se puede usar CSS: no te preocupes si no
entiendes algunos detalles de lo que expliquemos, considerlo una primera toma de contacto.
Para ver un ejemplo bsico empezaremos por especificar atributos a un elemento con CSS creando lo
que llamaremos 'clases' (class en ingls) y en ese class pondremos todos los estilos necesarios para esa
clase en concreto. El nombre de la clase comenzar por un . (punto). Por ejemplo:
.clase1 {
Propiedad: valor;
Propiedad: valor;
Propiedad: valor;
}
Tambin podremos definir estilos para los elementos ya conocidos de HTML: body, h1, h2, h3, etc. Para
estos elementos no se necesita poner el punto delante.
Las tres formas ms conocidas de dar estilo a un documento son las siguientes:
1. Utilizando una hoja de estilo externa (un archivo con extensin .css) que estar vinculada a un
documento a travs del elemento <link>, el cual debe ir situado en la seccin <head>.
<html>
<head>
<title>CSS aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="hoja_estilos.css" />
</head>
<body>
...
</body>
</html>
Donde hoja_estilos.css ser el archivo donde hemos definido los estilos.
2. Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que
generalmente se situara en la seccin <head>.
<html>
<head>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}
</style>
</head>
<body>
...
</body>
</html>
En este caso, en vez de definir los estilos en un archivo separado, los definimos dentro del mismo
documento HTML, delimitados por <style> </style>.
3. Utilizando estilos directamente sobre aquellos elementos que lo permiten a travs del atributo
style que admiten la mayora de las etiquetas HTML. Sin embargo, con este tipo de definicin
del estilo no gozamos de las ventajas que ofrecen las hojas de estilo ya que de esta manera no
mantenemos separado el contenido del aspecto o presentacin, al mezclarse una cosa y otra.
<html>
<head>
</head>
<body>
<p style="color: red;">Prrafo en color rojo</p>
</body>
</html>
EJEMPLO
Escribe este cdigo y gurdalo en un archivo cuyo nombre puede ser por ejemplo miDocumento.html.
<html>
<head>
<style type="text/css">
.color_verde { color: green; }
.color_amarillo { color: yellow; }
</style>
</head>
<body>
<p class="color_verde">Este texto va de color verde.</p>
<p class="color_amarillo">Este texto va de color amarillo.</p>
</body>
</html>
Comprueba los resultados.
A continuacin establece otros colores, guarda el archivo y vuelve a visualizar la pgina.

Nosotros dentro de este curso no vamos a explicar CSS porque esta materia es muy amplia y ser
tratada en un curso independiente. No obstante, s hemos credo conveniente reflejar la forma en que
HTML interacciona con otras tecnologas o lenguajes hoy da para construir pginas web.
Puedes acceder al curso Tutorial bsico del programador web: CSS desde cero desde la seccin
Cursos de aprenderaprogramar.com (donde encontrars todos los cursos) o usando el siguiente link:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Generar documentos HTML usando lenguaje PHP.
GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP.

Hasta ahora hemos generado documentos HTML escribiendo en un archivo de texto cdigo HTML que
guardbamos como archivo con extensin .html. Hemos visto tambin que embebido en HTML puede
ir cdigo Javascript y cdigo CSS. Vamos a ver ahora una forma muy utilizada para generar webs HTML
basada en el uso del lenguaje de programacin PHP.
En su momento indicamos que el flujo de informacin entre un ordenador en nuestra casa con
conexin a internet y un servidor era algo as:
La peticin de una pgina web tendra como respuesta cdigo HTML interpretable por el navegador
instalado en nuestro ordenador. Ahora bien, el cdigo HTML obtenido como respuesta puede provenir
de un archivo con extensin .html alojado en el servidor, pero tambin puede ser generado por el
servidor de otra manera. Esa otra manera es la que mostramos en la siguiente imagen:
Este esquema es un poco ms complicado y supone que no existe un archivo .html que contiene el
cdigo html directamente, sino que existe un archivo .php con cierto contenido que el servidor se
encarga de interpretar y una vez interpretado enva cdigo HTML a nuestro ordenador.
En ambos casos nuestro ordenador recibe cdigo HTML, pero en un caso proviene de un archivo y en
otro caso ha sido generado mediante un proceso intermedio que tiene lugar en el servidor.
PHP es un lenguaje de cdigo abierto muy popular, adecuado para desarrollo web y que puede ser
incrustado en HTML. Es popular porque un gran nmero de pginas y portales web estn creados con
PHP. Cdigo abierto significa que es de uso libre y gratuito para todos los programadores que quieran
usarlo. Incrustado en HTML significa que en un mismo archivo vamos a poder combinar cdigo PHP con
cdigo HTML, siguiendo unas reglas. Nosotros en este curso no vamos a estudiar PHP. Si tienes inters
en este lenguaje te recomendamos el curso de PHP de aprenderaprogramar.com disponible en esta
URL: http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193
En este curso simplemente vamos a dejar constancia de que PHP y HTML son lenguajes que van muy
unidos, realmente millones de sitios webs utilizan PHP con HTML. Aunque PHP y HTML son cosas
distintas, estn muy relacionados. Por eso hemos considerado conveniente al menos hacer referencia a
PHP dentro de un curso de HTML, siendo nuestro objetivo divulgativo. No es necesario que trates de
ejecutar el cdigo de ejemplo que iremos viendo, simplemente lee y trata de captar las ideas.
Los archivos con extensin PHP son archivos que se alojan en el servidor y que una vez invocados a
travs del navegador (p.ej. http://www.aprenderaprogramar.com/index.php) dan lugar a que el
servidor los procese y devuelva cdigo HTML (una pgina web) a nuestro ordenador.
El cdigo PHP se introduce dentro de etiquetas <?php como apertura y ?> como cierre. Esto sera un
ejemplo de cdigo PHP, que sera un texto creado con un editor como Notepad++ y guardado con
extensin .php.
<?php
echo "Esto es cdigo PHP."
?>
Ten en cuenta que un archivo .php no puedes verlo directamente en tu navegador porque estos
archivos necesitan un procesado previo (que se realiza en los servidores).
Cualquier archivo PHP puede estar definido como documento HTML con fragmentos de cdigo PHP
intercalados. Por lo tanto, podramos crear cdigo HTML y luego intercalar aquellos fragmentos
necesarios de cdigo PHP. Otra forma de trabajar consiste en definir un documento completamente
como cdigo PHP donde se imprime desde el propio cdigo PHP el cdigo HTML que necesitemos.
Pondremos ejemplos para entender lo que hemos indicado.
Por ejemplo, para el primero de los casos, veamos un cdigo de ejemplo que pudiera ser un archivo
como ejemplo1.php. Vamos a definir cdigo HTML donde vamos a intercalar algunos fragmentos en
PHP. Ten en cuenta que el archivo no se puede guardar con extensin html si contiene fragmentos de
php, tendramos que guardarlo con extensin php.
<html>
<head> <title>HTML con PHP aprenderaprogramar.com</title>
</head>
<body>
Esto es una pgina HTML con cdigo PHP incrustado.
<br />
<?php
echo "Esto es cdigo PHP incrustado."
?>
</body>
</html>
Si solicitramos a un servidor que nos muestre esta pgina, la visualizramos en nuestro navegador y le
pidiramos a ste que muestre el cdigo fuente, el cdigo generado es cdigo HTML. Es decir, aunque
en el archivo ejemplo1.php exista cdigo PHP, despus de que el intrprete PHP haya procesado el
cdigo PHP de la pgina todo lo que devuelve el servidor es cdigo HTML. Si visualizramos la pgina en
s, comprobaramos que no podemos distinguir qu texto ha sido creado como HTML y qu texto
proviene de una instruccin echo (instruccin para imprimir por pantalla) de PHP. Por qu? Porque el
intrprete PHP se encarga de transformar el cdigo PHP en HTML y eso es lo que podemos ver en
nuestro navegador. En nuestro navegador no podemos ver el cdigo fuente PHP porque ese cdigo no
nos llega. Nos llega el cdigo ya transformado en HTML.
Para el segundo de los casos vamos a suponer que el cdigo se encuentra en un archivo llamado
'ejemplo2.php'. En esta ocasin todo el contenido va a aparecer dentro de etiquetas de PHP como si
fuera PHP y usaremos una instruccin echo para indicarle al intrprete que devuelva como HTML todo
el contenido dentro de esa instruccin.
<?php
echo "
<html>
<head> <title>HTML con PHP aprenderaprogramar.com</title> </head>
<body> Esto es una pgina HTML generada con cdigo PHP incrustado.
</html>
";
?>
</body>
Si pedimos al navegador que nos muestre el cdigo fuente, el resultado es igualmente cdigo HTML: no
veremos cdigo PHP. No obstante, en esta ocasin el cdigo HTML lo hemos incrustado dentro de
cdigo PHP mediante una instruccin echo.
Si visualizramos la pgina 'ejemplo2.php' en nuestro navegador, el resultado obtenido sera que se
muestra por pantalla: Esto es una pgina HTML generada con cdigo PHP incrustado. Podramos
preguntarnos: si la instruccin echo es para imprimir por pantalla, por qu no se muestra por pantalla
<html> <head> etc. etc. ? El motivo es que el intrprete PHP est preparado para considerar que todo
cdigo asimilable a HTML dentro de una instruccin echo no debe ser mostrado por pantalla como si se
tratara de texto, sino que debe ser transformado en cdigo HTML. Por este motivo la salida por pantalla
no muestra las etiquetas. Si quisiramos mostrar ese contenido como texto tendramos que hacer uso
de caracteres de escape que no vamos a explicar ahora.
Qu opcin es mejor? Definir los documentos como HTML e incrustar fragmentos de PHP definir los
documentos completamente como PHP? En principio podemos decir que ambas opciones son vlidas,
por tanto los desarrolladores web hacen uso de ambas posibilidades. Ahora bien, nosotros
recomendaremos al menos inicialmente usar la definicin de documentos como cdigo HTML donde
incrustaremos el cdigo PHP. Los motivos por los que recomendamos esto son:
-
Mayor claridad, lo que facilita la interpretacin de cdigo a personas que tengan que revisarlo o
leerlo.
En muchos editores se diferencian por colores los tipos de cdigo. Si tenemos cdigo HTML
separado del cdigo PHP la diferenciacin ser clara y til. En otro caso, no podremos
diferenciar un cdigo de otro.
Es el estndar ms ampliamente usado por los programadores y desarrolladores web, lo que no
quiere decir que en algunos casos no se escriba cdigo de la otra manera.
MS ALL DE HTML
Para trabajar en creacin y programacin web podemos decir que es obligatorio conocer y saber usar
HTML, ya que este lenguaje es la base misma de los desarrollos web actualmente. Pero podemos
hacernos otra pregunta: es obligatorio saber PHP? La respuesta es que no. Sin embargo, una vez
tengamos unos conocimientos bsicos bien asentados de HTML es lgico pensar en progresar como
desarrolladores o programadores web. Para ello necesitaremos aprender un lenguaje de programacin

que nos permita realizar cosas que HTML no permite, como la interaccin con bases de datos o realizar
clculos o procesos que requieren de programacin. HTML es un lenguaje muy limitado y no es
suficiente con saber HTML para poder crear pginas web atractivas hoy da. Las pginas web se suelen
basar en HTML combinado con otros lenguajes como Javascript, CSS y un lenguaje de programacin que
interacciona con bases de datos, que puede ser PHP u otro.
Existen distintos lenguajes de programacin web que nos permitiran progresar como programadores,
como PHP, JSP, ASP.NET entre otros. PHP es uno de los lenguajes ms populares, es gratuito, muy
potente y usado por millones de servidores en todo el mundo. En este curso no vamos a profundizar en
PHP ni en ninguno de los otros lenguajes, pero dada la estrecha relacin de PHP con HTML y su inters
para personas que quieran seguir progresando como desarrolladores web, hemos credo de inters
realizar una introduccin a este lenguaje.
La realidad es que la programacin web requiere el conocimiento de diferentes lenguajes. En las
grandes empresas, suelen existir especialistas para cada una de las ramas de la programacin web (por
ejemplo especialistas en HTML, en JavaScript, en CSS, en lenguajes como PHP u otros, etc.).
Si tienes inters en saber cules son los lenguajes y conocimientos que se utilizan hoy en da en los
desarrollos web, dnde encontrar cursos relacionados con esos conocimientos y cul podra ser un plan
formativo para un programador web, te recomendamos que leas este interesante artculo:
http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=702:ique-es-y-queestudiar-para-ser-programador-web-itinerario-de-formacion-plan-de-estudios-o-decarrera&catid=39:orientacion-academica&Itemid=189

Final curso tutorial programacin web HTML desde cero.
FINAL DEL CURSO TUTORIAL

Con esta entrega llegamos al final del curso Tutorial bsico del programador web: HTML desde cero.
Esperamos que haya sido un curso til y ameno para todas las personas que lo hayan seguido. Y como
en todo final, cabe hacer algunas consideraciones especiales.
- Gracias al equipo humano de aprenderaprogramar.com que ha hecho posible su publicacin, y en

especial a Javier Roa, Jorge Maestro, Manuel Tello, Walter Sagstegui, Manuel Sierra y Mario
Rodrguez.
- Gracias a todas las personas que de una u otra forma han participado enviando propuestas de
mejora, comentarios, avisos de erratas, etc. y a los alumnos que han seguido el curso colaborando a
travs de los foros.
-
A todos los que no han participado pero han seguido el curso de forma gratuita a travs de la web,
desde aprenderaprogramar.com les agradeceramos nos hicieran llegar una opinin o propuesta de
mejora sobre el mismo, bien a travs de correo electrnico a contacto@aprenderaprogramar.com ,
bien a travs de los foros. Todas las opiniones son bienvenidas y nos sirven para mejorar.
- A quienes hayan seguido el curso de forma gratuita y piensen que los contenidos son de calidad y
que merece dar un pequeo apoyo econmico para que se puedan seguir ofreciendo ms y mejores
contenidos en este sitio web, les estaremos muy agradecidos si realizan una pequea aportacin
econmica en forma de donacin pulsando sobre el enlace que aparece en la pgina principal de
Quienes tengan inters en proseguir formndose en el rea de programacin y programacin web de

forma autodidacta les animamos a que visiten la seccin Cursos de aprenderaprogramar.com en la
URL http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86
Quienes estn interesados en cursos tutorizados on-line con seguimiento, plan de trabajo y supervisin
a cargo de un tutor asignado pueden visitar la siguiente direccin donde encontrarn informacin:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87
Agradecemos que cualquier sugerencia, crtica, comentario o errata detectada que nos pueda permitir
mejorar los contenidos para el futuro se nos haga llegar a la siguiente direccin de correo electrnico:
contacto@aprenderaprogramar.com , o alternativamente a travs de los foros o del formulario de
contacto que est a disposicin de todos los usuarios en el portal web. A todos los que nos han ledo y
nos siguen, gracias. Nos vemos en el prximo!
El equipo de aprenderaprogramar.com

5 HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5 HTML PDF

Uploaded by

Copyright:

Available Formats

TUTORIALBSICODELPROGRAMADORWEB:

INTRODUCCIN A HTML. QU ES Y PARA QU SIRVE HTML.

C/Los Guanches, 41 38205 La Laguna Tenerife Espaa CIF 54042040K

INDICE DEL CURSO

Introduccin: internet y cmo se transmite la informacin.

PREPARANDO EL ENTORNO DE DESARROLLO

Descargar e instalar Notepad++.

CONCEPTOS BSICOS DE HTML

Estructura bsica de una pgina HTML. HEAD, BODY.

Para ms informacin: contacto@aprenderaprogramar.com

C/Los Guanches, 41 38205 La Laguna Tenerife Espaa CIF 54042040K

CREACIN DE UN PORTAL BSICO

Pgina principal. Cabecera, men, cuerpo y pi.

SUBIR NUESTRA WEB A UN SERVIDOR Y HACERLA ACCESIBLE EN INTERNET

Creacin de una cuenta en hosting gratuito y acceso va cPanel.

CONEXIN DE HTML CON OTROS LENGUAJES

Qu es y para qu sirve JavaScript? Ejemplos bsicos.

Prxima entrega: CU00702B

Para ms informacin: contacto@aprenderaprogramar.com

C/Los Guanches, 41 38205 La Laguna Tenerife Espaa CIF 54042040K

Orientacin curso Tutorial bsico programador web: HTML desde cero

Prxima entrega: CU00703B

Introduccin: internet y cmo se transmite la informacin.

INTRODUCCIN: INTERNET Y CMO SE TRANSMITE LA INFORMACIN.

Introduccin: internet y cmo se transmite la informacin.

Mozilla Firefox es un navegador web libre y de cdigo abierto,

Safari es un navegador web de cdigo cerrado desarrollado

Google Chrome es un navegador web desarrollado por

Prxima entrega: CU00704B

Qu es y para qu sirve HTML?

QU ES Y PARA QU SIRVE HTML?

Qu es y para qu sirve HTML?

ALGO DE HISTORIA SOBRE EL LENGUAJE MS IMPORTANTE DE INTERNET

Prxima entrega: CU00705B

Es HTML un lenguaje de programacin? Lenguajes de etiquetas.

ES HTML UN LENGUAJE DE PROGRAMACIN?

EJEMPLO PARA ENTENDER EL CONCEPTO DE LENGUAJE DE ETIQUETAS FRENTE A LENGUAJE DE

public class MuestraDelUnoAlDiez {

Salida por pantalla

Es HTML un lenguaje de programacin? Lenguajes de etiquetas.

Prxima entrega: CU00706B

Cules son las versiones de HTML? Strict, Transitional, Frameset.

CULES SON LAS VERSIONES DE HTML?

En 1995 se publica el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es

La versin HTML 3.2 se public en 1997 y es la primera recomendacin de

La ltima especificacin oficial de HTML se public en diciembre de 1999 y se

HTML 5.0, 5.1 y 5.2

El consorcio internacional W3C marc las siguientes fechas para liberacin de

Cules son las versiones de HTML? Strict, Transitional, Frameset.

Cules son las versiones de HTML? Strict, Transitional, Frameset.

CUL ELIJO, Y CMO?

Para HTML 4.01 Strict escribiramos:

Para HTML 4.01 Transitional (recomendado) escribiramos:

Cules son las versiones de HTML? Strict, Transitional, Frameset.

Cules son las versiones de HTML? Strict, Transitional, Frameset.

Prxima entrega: CU00707B

Qu necesito para escribir cdigo HTML y crear pginas web?

QU NECESITO PARA ESCRIBIR CDIGO HTML Y CREAR PGINAS WEB?

No uses toda la gama de colores en tu pgina web.

Qu necesito para escribir cdigo HTML y crear pginas web?

Ejemplo mal diseo, colores e imgenes:

Se ve mejor si cabe en la pantalla.

Administra tus imgenes.