Documentos de Académico
Documentos de Profesional
Documentos de Cultura
5 HTML PDF
5 HTML PDF
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
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
Indice del curso Tutorial bsico programador web: HTML desde cero.
1.
INTRODUCCIN A HTML
1.1.
1.2.
1.3.
1.4.
1.5.
2.
2.1.
2.2.
2.3.
3.
3.1.
3.2.
3.3.
3.4.
3.5.
3.6.
3.7.
Indice del curso Tutorial bsico programador web: HTML desde cero.
4.
4.1.
4.2.
4.3.
5.
5.1.
5.2.
6.
6.1.
6.2.
6.3
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
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.
aprenderaprogramar.com, 2006-2029
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
SAFARI
EXPLORER
GOOGLE
CHROME
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
Tim Berners-Lee
aprenderaprogramar.com, 2006-2029
Lenguaje
Java
Cdigo
<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>
aprenderaprogramar.com, 2006-2029
1
2
3
4
5
6
7
8
9
10
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.
aprenderaprogramar.com, 2006-2029
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
HTML 3.2
HTML 4.01
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>Esto es una prueba de pgina HTML 4.01 Transitional</p>
</body>
</html>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
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.
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:
aprenderaprogramar.com, 2006-2029
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).
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
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/
aprenderaprogramar.com, 2006-2029
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).
aprenderaprogramar.com, 2006-2029
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.
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
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ttulo de la pgina web</title>
...
</head>
<body>
Cuerpo de la pgina web
</body>
</html>
Transitional//EN"
aprenderaprogramar.com, 2006-2029
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>
<base>
No
<link>
No
<meta>
No
<script>
No
<style>
No
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.).
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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 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">
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
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>
<strong></strong>
<i></i>
<em></em>
<u></u>
<small></small>
<big></big>
<sub></sub>
<sup></sup>
<strike></strike>
<s></s>
<del></del>
aprenderaprogramar.com, 2006-2029
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
Normalmente se preferir usar tcnicas CSS en lugar de esta etiqueta, pero es una etiqueta que
debemos conocer.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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
"http://www.w3.org/TR/html4/loose.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.
aprenderaprogramar.com, 2006-2029
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.
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
Obligatorio. Si no se
incluye no se mostrar
imagen alguna.
align
Atributo obsoleto
(deprecated). Sustituir por
CSS.
alt
Atributo requerido, se
recomienda incluirlo
aunque si no se hace la
imagen se mostrar.
width
height
border
Atributo obsoleto
(deprecated). Sustituir por
CSS.
aprenderaprogramar.com, 2006-2029
Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.
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"
"http://www.w3.org/TR/html4/loose.dtd">
<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
src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png"
alt="Logotipo APR2" width="50%">
<img
src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png"
alt="Logotipo APR2" width="200px">
<img
src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png"
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>
aprenderaprogramar.com, 2006-2029
Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
aprenderaprogramar.com, 2006-2029
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.
USO
align
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;.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<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.
aprenderaprogramar.com, 2006-2029
Escribe este cdigo, gurdalo como archivo HTML y comprueba sus resultados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
Escribo esta lnea as
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.
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<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
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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)
<hr size=8px>
<hr width=75%>
<hr color=red>
<hr align=right>
<hr noshade=noshade>
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/>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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.
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>
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<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.
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
Ejemplo:
<a href=http://www.aprenderaprogramar.com target=_blank>Ir aprenderaprogramar.com en una
nueva ventana</a>
EJEMPLO
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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.
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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).
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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.
aprenderaprogramar.com, 2006-2029
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
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
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.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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.
aprenderaprogramar.com, 2006-2029
Definicin o descripcin
FTP
HTML
PHP
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
aprenderaprogramar.com, 2006-2029
Escribe el cdigo en tu editor de texto, gurdalo como archivo html y comprueba el resultado.
El resultado de este cdigo cuando lo visualizamos en un navegador sera algo similar a lo que
mostramos en la siguiente imagen.
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<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.
aprenderaprogramar.com, 2006-2029
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).
aprenderaprogramar.com, 2006-2029
Grficamente:
Grficamente:
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<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>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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
Diana Rodrguez
Luis Prez
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
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
aprenderaprogramar.com, 2006-2029
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:.
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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.
aprenderaprogramar.com, 2006-2029
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).
aprenderaprogramar.com, 2006-2029
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">
MTODO
CONCEPTO
OBSERVACIONES
GET
POST
aprenderaprogramar.com, 2006-2029
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.
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aqu" />
</form>
</body>
</html>
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
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.
aprenderaprogramar.com, 2006-2029
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2"
cols="30">...Tus comentarios aqu...</textarea>
</form>
</body>
</html>
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
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</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>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
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
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
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
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
foros
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).
aprenderaprogramar.com, 2006-2029
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.
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.
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
foros
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.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</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.
aprenderaprogramar.com, 2006-2029
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).
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
<div style="border: 1px solid green;">
Cuerpo de la pgina.
</div>
<div style="border: 1px solid blue;">
Pie de la pgina
</div>
</body>
</html>
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.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<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>
<div style="border: 1px solid green;">
Cuerpo de la pgina.
</div>
<div style="border: 1px solid blue;">
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).
aprenderaprogramar.com, 2006-2029
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:
aprenderaprogramar.com, 2006-2029
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).
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Portal bsico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header"><!-- Aqu vendra el cdigo de la cabecera --></div>
<div id="wrapper">
<div id="menu"><!-- Aqu vendra el cdigo del men --></div>
<div id="body"><!-- Aqu vendra el cdigo del cuerpo --></div>
</div>
<div id="footer"><!-- Aqu vendra el cdigo del pi --></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>
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Portal bsico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;">
<div id="header">
Portal (Tutorial bsico del programador web: HTML desde cero) - aprenderaprogramar.com
</div>
<!-- contenedor -->
<br />
<br />
<br />
<div id="wrapper">
<!-- menu -->
<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>
<!-- fin menu -->
<!-- cuerpo -->
<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>
<!-- fin cuerpo -->
aprenderaprogramar.com, 2006-2029
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
</div>
</body>
</html>
Si abrimos la pgina HTML del ejemplo anterior obtendremos una visualizacin similar a la siguiente:
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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.
aprenderaprogramar.com, 2006-2029
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Portal bsico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;">
<div id="header">
Portal (Tutorial bsico del programador web: HTML desde cero) - aprenderaprogramar.com
</div>
<!-- contenedor -->
<br />
<br />
<br />
<div id="wrapper">
<!-- menu -->
<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>
<!-- fin menu -->
<!-- cuerpo -->
<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>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
</div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
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?
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
foros
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):
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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:
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.
aprenderaprogramar.com, 2006-2029
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.
Prxima entrega: CU00730B
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
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
aprenderaprogramar.com, 2006-2029
foros
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.
aprenderaprogramar.com, 2006-2029
Como podemos observar, el cdigo JavaScript debe ir encerrado entre las siguientes marcas:
<script type="text/javascript">
</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>
<meta charset="utf-8">
<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.
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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.
aprenderaprogramar.com, 2006-2029
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>
aprenderaprogramar.com, 2006-2029
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>
<title>CSS aprenderaprogramar.com</title>
<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>
<title>CSS aprenderaprogramar.com</title>
</head>
<body>
<p style="color: red;">Prrafo en color rojo</p>
</body>
</html>
aprenderaprogramar.com, 2006-2029
EJEMPLO
Escribe este cdigo y gurdalo en un archivo cuyo nombre puede ser por ejemplo miDocumento.html.
<html>
<head>
<title>CSS aprenderaprogramar.com</title>
<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>
aprenderaprogramar.com, 2006-2029
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:
aprenderaprogramar.com, 2006-2029
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
?>
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.
aprenderaprogramar.com, 2006-2029
<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>
";
?>
aprenderaprogramar.com, 2006-2029
</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
aprenderaprogramar.com, 2006-2029
aprenderaprogramar.com, 2006-2029
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
aprenderaprogramar.com.
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
aprenderaprogramar.com, 2006-2029