Está en la página 1de 104

CABECERA DEL DOCUMENTO (HEAD)

La cabecera del documento es la sección comprendida entre <head> y </head>. En ella se debe encontrar,
obligatoriamente, el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo: <title>Manuales y tutoriales sobre programación
– aprenderaprogramar.com</title>

No sería adecuado usar el título <title>Página de Inicio</title> porque éste no dice nada por sí solo. Debemos
usar títulos que sean descriptivos relativos al contenido de la página.

Además de la etiqueta title dentro de la sección 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 Función ¿Es


cabecera obligatoria?

<title> Da un título al documento HTML Sí

<base> Define ruta de acceso No

<link> Define archivos vinculados No

<meta> Define metadatos como descripción y palabras No


clave

<script> Delimita scripts incluídos No

<style> Delimita definición de estilos No

Comentaremos brevemente estas etiquetas a continuación.

Etiqueta <base>. Sirve para indicar la URL base en caso de especificarse URLs relativas dentro de la página
web. Por ejemplo <base href="http://www.aprenderaprogramar.com/images/" target="_blank"> haría que si
escribimos como ruta de una imagen "logo.png" dicha ruta sea en realidad
"http://www.aprenderaprogramar.com/images/logo.png"

Etiquetas <link>. Sirven para indicar que el documento html está relacionado con otro archivo o recurso
externo. Por ejemplo <link rel="stylesheet" type="text/css" href="estilos.css"> sirve para indicar que el
documento HTML está vinculado al archivo estilos.css

Etiqueta <style>. Sirve para incluir estilos CSS que permiten dotar de colores, bordes, imágenes de fondo, etc.
a los elementos de la página web.

Etiquetas <meta>. Sirven para incluir información que no se muestra como parte de la página web pero sirve
para informar de características de la página web, como su descripción breve y sus palabras clave.

Ejemplo:
<meta name="description" content="Didáctica y divulgación de la programación aprenderaprogramar.com">

<meta name="keywords" content="didáctica, divulgación, programación, aprender">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas
palabras clave (keywords) para su localización. Esto es muy útil para que nuestra página aparezca en los
buscadores (google, bing, yahoo, etc.).

Etiquetas <script>. Sirven para incluir código en lenguajes de script.

Dentro de la cabecera en muchas páginas se incluye código en JavaScript, que es un lenguaje de programación
que los navegadores son capaces de reconocer e interpretar. El código JavaScript se reconoce porque va
comprendido entre las etiquetas

<script type="text/javascript">

// Aquí iría el código

</script>

Nosotros en este curso no vamos a estudiar JavaScript porque nos vamos a centrar en las cuestiones básicas de
HTML, pero si continuas avanzando como programador web será un lenguaje que deberás tener en cuenta más
adelante.

CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el
contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas <body> y </body>.

A lo largo del curso iremos estudiando qué elementos pueden existir dentro de la etiqueta body, así como cuál es
su sintaxis y organización.

FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE,


SUBÍNDICE.

Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a
describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente indicaremos las que han
sido más utilizadas en el pasado, aunque algunas se consideren deprecated (no recomendadas).

Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello
tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese
texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas están 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 difusión
en el pasado conviene conocer los que fueron usos tradicionales de estas etiquetas, a medida que avances en el
conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran hoy día nuevos
significados.

ETIQUETA USO OBSERVACIONES

<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.

<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.

<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.

<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.

<u>…</u> Poner texto subrayado Deprecated. Sustituir por CSS.

<small>…</small> Poner texto más pequeño Puede ser sustituido por CSS.

<big>…</big> Poner texto más grande Puede ser sustituido por CSS.

<sub>…</sub> Poner texto subíndice Puede ser sustituido por CSS.

<sup>…</sup> Poner texto superíndice Puede ser sustituido por CSS.

<strike>…</strike> Poner texto como tachado Deprecated. Sustituir por CSS.

<s>…</s> Poner texto como tachado Deprecated. Sustituir por CSS.

<del>…</del> Poner texto como tachado Puede ser sustituido por CSS.

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas
etiquetas en principio no deben de ser usadas porque dejarán 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 páginas webs que
hacen uso de ellas.

- Son etiquetas reconocidas por prácticamente todos los navegadores actuales.

- Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista
didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más 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 escribiríamos 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 más
interior a la más 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 utilización de cualquiera de ellas
es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a
prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un
ejemplo de código y lo que veríamos en pantalla:

Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>

Esta palabra la vamos a poner en negrita y esta otra también

Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta, pero es una etiqueta que debemos
conocer.

CURSIVA

Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto debes
cerrarla con la etiqueta </i>). También se ha utilizado la etiqueta <em>. Como en el caso de la negrita, aunque
podrían atribuírseles distintos significados no vamos a prestarle atención a esta cuestión ahora. Aquí
presentamos un ejemplo:

Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>

Esta palabra la vamos a poner en cursiva y esta otra también

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 subrayaría una frase:

<u>Así subrayaríamos una frase importante</u>

Así subrayaríamos 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 más adelante.

PALABRAS MÁS GRANDES O MÁS PEQUEÑAS

Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de
utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación
de tamaño se podía conseguir gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos
indican cuáles eran sus funciones: <big> agrandará el texto y <small> lo disminuirá. No recomendamos su uso
ya que las nuevas versiones de HTML no van a admitir esta etiqueta. La modificación del tamaño del texto se
debe hacer a través de técnicas CSS.

Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas etiquetas también se
podían combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un
ejemplo sería el siguiente:

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más


grande</big> y ésta <big><big>más grande aún</big></big>.

Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.

SUPERÍNDICES Y SUBÍNDICES

Mediante HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas
siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un
subíndice y <sup> será la etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos
como esta: H<sub>2</sub>O o números elevados a potencias 7<sup>3</sup>.

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H2O o
números elevados a potencias 73.

Los subíndices y superíndices con estas etiquetas pueden ser sustituidos por técnicas 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 también fue
deprecated, aunque a partir de HTML 5 se ha redefinido su significado. Para lograr el tachado de un texto se
recomienda usar técnicas CSS (hojas de estilo) como veremos más adelante.

EJERCICIO

En el siguiente código hay elementos que en las versiones más recientes de HTML se consideran deprecated o
not supported. Escribe el código en un editor de textos como el bloc de notas o Notepad++, guárdalo con un
nombre como ejemplo.html y visualízalo en tu navegador.

Responde a las siguientes preguntas:

¿Qué etiquetas de las empleadas sería recomendable no utilizar y reemplazar mediante uso de técnicas CSS?

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo básico: uso de etiquetas de formato y atributos básicos para la
etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Subrayado</del>
<big>Grande</big>
<small>pequeño</small>
Esto es un<sub>subíndice</sub>
Y esto un<sup>superíndice</sup>
</pre>
</body>
</html>

Ejemplo de resultado que se puede obtener en algunos navegadores. Ten en cuenta que al usarse atributos
deprecated la respuesta de diferentes navegadores puede no ser la misma.
Nota 1: Hemos utilizado la etiqueta <pre> que comentaremos más adelante.

Nota 2: si estás utilizando Notepad++ y obtienes una visualización extraña de las tildes, por ejemplo “Ejemplo
básico” en lugar de “Ejemplo básico” recuerda elegir como codificación UTF-8 sin BOM. También añade la
etiqueta <meta charset="utf-8"> dentro de la cabecera del código para indicar el juego de caracteres que se
debe emplear.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

ETIQUETAS HTML BÁSICAS: IMÁGENES

Continuamos viendo etiquetas y atributos básicos para la creación de páginas webs. No entramos a describir una
a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las que han venido siendo
más utilizadas. Tener en cuenta que algunas etiquetas o atributos están obsoletas (deprecated), aunque
conviene conocerlas por la difusión que tuvieron.

Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes
tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página 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

Este atributo es obligatorio e indica el Obligatorio. Si no se incluye


src
nombre del archivo de imagen (entre no se mostrará imagen alguna.
comillas) o la URL desde la que se va a
obtener la imagen.

Permite controlar la alineación de una


imagen con respecto a una línea de texto Atributo obsoleto
align adyacente o a otras imágenes en esa línea. (deprecated). Sustituir por
Los valores posibles son los ya conocidos CSS.
left, right, middle, top, bottom.

Entre comillas podremos escribir un texto


Atributo requerido, se
que se mostrará si la imagen no llega a
recomienda incluirlo aunque
alt cargar, mientras se carga o, cuando
si no se hace la imagen se
visualizando ya la imagen, pasamos el ratón
mostrará.
por encima.

Este atributo es opcional pero podemos


ponerlo para especificar al navegador que
Opcional. Indicar valor en
muestre la imagen con un tamaño específico.
width pixeles. También se puede
Significa “ancho de la imagen” que vamos a
indicar con CSS.
representar. Si no se escribe, se carga la
imagen con el tamaño original.

Opcional. Indicar valor en


Al igual que el atributo width, es opcional.
height pixeles. También se puede
Este atributo indica el alto de la imagen.
indicar con CSS.

Con border especificamos el ancho del borde Atributo obsoleto


border que rodea la imagen. Si se indica 0 equivale (deprecated). Sustituir por
a “sin borde”. CSS.

EJEMPLO

Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión
html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, 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>
<html>
<head>
<title>Ejemplo del uso de imágenes - 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 píxeles.

Ten en cuenta que al especificar la dirección de la imagen, si esta imagen está en tu propio servidor puedes
utilizar una dirección relativa, es decir, estas dos expresiones son válidas:

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo


APR2">

<img src="templates/apr02062010/images/logo.png" alt="Logotipo APR2">

También podrás 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, deberás especificar la ruta completa, no será válido una
ruta relativa. Ejemplo:

<img src="http://images4.hiboox.com/images/4711/9ed218f1fd2a5131ace4ee5a70e6198e.jpg" alt="Queso de


almendras palmero">
Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya no se
recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se conozca su
significado, ya que se pueden encontrar en muchas páginas web. Incluso hay desarrolladores web que siguen
usando estas etiquetas. Más adelante veremos cómo conseguir los efectos deseados de la forma recomendada
hoy día: 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 páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes
que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la
imagen y a continuación 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 página web se puede capturar normalmente haciendo click con el botón
derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la
imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador
que estemos utilizando.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

ENCABEZADOS

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo,
categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>.

Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del
encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.

A continuación mostramos un código ejemplo de los seis diferentes encabezados:


<!DOCTYPE html>
<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 más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
</body>
</html>

PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS

Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las etiquetas
<p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por abajo.

Un atributo muy usado en el pasado (hoy deprecated) fue align, que servía para establecer la alineación del
texto dentro del párrafo.

ATRIBUTO USO OBSERVACIONES

Especifica la
alineación del texto
dentro del párrafo.

left --> Alineación


del texto a la
izquierda
Atributo obsoleto (deprecated) en su uso en la
forma <p align=”center”>Texto<p>. En lugar de esta sintaxis,
right --> Alineación
usar CSS como se muestra a continuación.
align del texto a la
derecha
Ejemplo de uso correcto empleando técnica CSS:
<p style="text-align: center;">Texto centrado</p>
center -->
Alineación del texto
centrada

justify -->
Alineación del texto
justificada
EJEMPLO

Escribe este código en un editor de textos como bloc de notas o Notepad++. Guárdalo como archivo con
extensión html y a continuación visualízalo en tu navegador comprobando que obtienes el resultado esperado.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de párrafos - 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 línea, espacios, etc. indicados.

Escribe este código, guárdalo como archivo HTML y comprueba sus resultados:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
Escribo esta línea así

Dejo dos líneas de separación

y escribo tres más.


</body>
</html>

En ausencia de la etiqueta <pre> el navegador no toma en consideración que en el código fuente existan saltos
de línea, espacios, etc. en el texto. En cambio utilizando la etiqueta <pre> y cerrándola con su correspondiente
etiqueta el navegador sí respetará los saltos de línea, espacios, tabuladores.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
<pre>
Escribo esta línea así

Dejo dos líneas de separación

y escribo tres más.


</pre>
</body>
</html>

LÍNEAS SEPARADORAS. SEPARADORES EN HTML: ETIQUETA <HR>

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un
grosor determinado por nosotros. Este separador lo escribimos con la etiqueta <hr>. Al contrario que muchas
etiquetas HTML, ésta no necesita ser cerrada como veremos a continuación.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de atributos
que podemos predefinir. No obstante estos atributos están clasificados como deprecated (no recomendados) o
not supported (no admitido) en las versiones más 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 técnicas CSS. Por
ejemplo, el atributo size de hr se usaba para definir el grosor de línea y el atributo color se usaba para definir el
color de línea. En lugar de estos atributos, se deberá hacer uso de técnicas 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 estándar 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 (también se podía 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; background-color: black;"
aplicada a la etiqueta hr, modificar el siguiente código para eliminar las etiquetas deprecated y sustituirlas por
expresiones CSS.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de separadores - aprenderaprogramar.com</title>
</head>
<body>
<p>A continuación insertamos un separador.</p>
<hr size="8px" color="black" />
<p>A continuación seguimos escribiendo debajo del separador.</p>
<hr size="2px" color="black" />
</body>
</html>

Comprueba los resultados en tu navegador tanto con el código que usa atributos deprecated como con el código
que usa CSS. Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

El resultado debe ser, al menos aproximadamente, el siguiente:

Otro parámetro que se puede definir es la anchura de la franja mediante el parámetro width. El atributo se
escribía "width=x%", siendo "x" el tanto por cien que queremos que ocupe nuestra franja dentro de la pantalla.
También 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 añadir width:x%; dentro de los estilos definidos.
A continuación vamos a generar una franja del 75% de ancho:

<hr width="75%" color="black"/> sería la sintaxis con el atributo width (deprecated).

<hr style="color: black; background-color: black; width:75%;" /> sería la sintaxis usando CSS.

Escribe el código y comprueba los resultados, que serán similares a esto:

Muchos navegadores hacían esta franja con una sombra exterior que transformaba la franja en tres dimensiones.
Para hacer la franja simple, sin sombra, se incluía 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 quería dar a la franja se usaba el atributo color. Por ejemplo, si queríamos que
nuestra franja fuera de color rojo sólo debíamos ponerle la etiqueta: <hr color="#FF0000" /> ó <hr color="red"
/>. La aplicación 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 párrafo se usaba el
atributo: "align", también deprecated. Por ejemplo "align = center" para el centro, "align = right" para la derecha
y "align = left" para la izquierda. La definición de alineación se debe hacer usando CSS.

EJEMPLOS

Los atributos para la etiqueta hr, tal y como los hemos visto, están 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 estándares. Para dotar
del aspecto deseado a la línea separadora que se crea con la etiqueta hr se debe usar CSS (técnica de “hojas de
estilos”). A continuación indicamos la sintaxis recomendada.

SINTAXIS SINTAXIS CSS ALTERNATIVA


OBSOLETA (BASADA EN ESTILOS)
(DEPRECATED)

<hr size="8px"> <hr style="height: 8px;">

<hr width="75%"> <hr style="width: 75%;">

<hr color="red"> <hr style="background-color: red;">

<hr align="right"> <hr style="text-align: right; margin-right: 0px;">


<hr style="border: 1px solid #000;">
<hr noshade="noshade"> La sintaxis para la etiqueta noshade puede dar lugar a distintos resultados según el
navegador.

EJERCICIO

A modo de ejercicio, reescribe el código de los ejemplos que mostramos a continuación 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 píxeles, de un ancho del 50% y alineada al centro.

<hr size="5px" width="50%" align="center" color="red"/>

Ejemplo 2

Franja de grosor 2 píxeles, de ancho 80%, sin sombra y alineada a la derecha.

<hr size="2px" width="80%" noshade="noshade" align="right" />

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
COMENTARIOS EN HTML.

Se llama comentario en el ámbito de HTML a las notas que el autor o autores ponen en el código para facilitar su
entendimiento. Estos comentarios no son mostrados por el navegador y, por tanto, sólo serán visibles al leer el
código HTML de la página web por una persona.

En general es recomendable ir insertando comentarios al crear una página para marcar determinadas partes y
así encontrarlas más fácilmente. Algunos usos que suelen darse a los comentarios son:

 Notas para recordar detalles del código la próxima 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 páginas son complejas.

 Apuntar que queda por hacer algo en una determinada sección o cómo es conveniente cambiarla. O
bien para indicar el comienzo o fin de una determinada sección de la página.

 Para identificar fácilmente partes importantes del código o aquellas que cambian más a menudo.

 Usos particulares de cada programador web. De hecho los comentarios pueden usarse para cualquier
cosa y cada programador de páginas web tiene su propio modo de usarlos.

CREACIÓN DE COMENTARIOS EN HTML

Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos
una cadena que indica el comienzo del comentario: <!--, esto es, el símbolo menor que, seguido del símbolo fin
de exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto que le siga será considerado
como comentario. El comentario se considerará finalizado cuando insertemos la cadena de finalización: --> ,
formada por dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto:

<!-- Esto es un comentario -->

Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como
acabamos de mostrar.

Veamos algunos ejemplos prácticos de comentarios:

<!-- Aquí comienza el cuerpo de la página -->

<!-- Cambiar este párrafo para que se entienda mejor -->

<!-- Debería añadir más enlaces en esta página -->

El navegador ignora los contenidos del interior de los comentarios, incluso en el caso de que sean código HTML.
Al mostrar la página los navegadores actúan como si los comentarios no existieran (aunque existen algunas
excepciones, no vamos a hablar de ellas ahora).

Para terminar sólo queda hacer una aclaración. Tal y como hemos dicho todo el texto entre los símbolos "<!-- " y
" -->" es un comentario sea lo que sea y tenga el número de líneas que tenga. Sin embargo se recomienda que
los comentarios se limiten a una sola línea, y si debe ocupar varias necesariamente se aconseja incluir los
símbolos de comentario en cada una de ellas. Algunos programadores siguen esta recomendación y otros no.
HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos
hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página
de Internet, entre otras funciones.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se
ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser
una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de
correo electrónico o un programa.

Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos
dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo
que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a
ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.

HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de
ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

 Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con
los enlaces).

 Poner enlaces que salten a los marcadores.

El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las


nuevas versiones de HTML, aunque se usó bastante en el pasado).

<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el
mismo dentro de un documento HTML.

Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>

Por otro lado, el código 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 mayúsculas y minúsculas. También 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 válido no incluir texto alguno como veremos en el
siguiente código.

EJERCICIO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>

<a name="arriba"></a>

En esta página 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
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.

<a name="segundo"><h1>Segundo apartado</h1></a>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de
la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto
aquí o hacer zoom y conseguirás verlo.

<a name="tercero"><h1>Tercer apartado</h1></a>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.

Volver <a href="#arriba">arriba</a>.

</body>
</html>
Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre
ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o
añadiendo más texto para comprobar cómo 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.

HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro
lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página
incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por
ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web
aprenderaprogramar.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro
de las comillas.

- Un texto que es el que ve el usuario como link.


Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos
visto. El resultado debe ser algo así.

DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero
podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si
queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello
utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

• _blank: Abre el documento vinculado en una ventana nueva del navegador.

• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.

Ejemplo:

<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva


ventana</a>

EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que
pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro
hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en
que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que
hayamos puesto en el atributo ‘title’.

EJEMPLO

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a
aprenderaprogramar.com</a>.
</body>
</html>

Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba los
resultados que se obtienen.

Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:

IMÁGENES COMO ENLACES


Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una
imagen. Veamos un ejemplo:

<ahref="http://aprenderaprogramar.com"><img src="http://i.imgur.com/SpZyc.png"alt="Curso de HTML desde


cero"></a>

EJERCICIO

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales
de Africa” como texto a mostrar.

Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos
que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber
más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia:
http://es.wikipedia.org/wiki/Panthera_leo

Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos
que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre
tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección 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 indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le
llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).

HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos
hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página
de Internet, entre otras funciones.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se
ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser
una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de
correo electrónico o un programa.

Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos
dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo
que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a
ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.

HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.


Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de
ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

 Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con
los enlaces).

 Poner enlaces que salten a los marcadores.

El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las


nuevas versiones de HTML, aunque se usó bastante en el pasado).

<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el
mismo dentro de un documento HTML.

Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>

Por otro lado, el código 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 mayúsculas y minúsculas. También 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 válido no incluir texto alguno como veremos en el
siguiente código.

EJERCICIO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>

<a name="arriba"></a>

En esta página 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
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.

<a name="segundo"><h1>Segundo apartado</h1></a>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de
la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto
aquí o hacer zoom y conseguirás verlo.

<a name="tercero"><h1>Tercer apartado</h1></a>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.

Volver <a href="#arriba">arriba</a>.

</body>
</html>

Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre
ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o
añadiendo más texto para comprobar cómo 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.

HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro
lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página
incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por
ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web
aprenderaprogramar.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro
de las comillas.

- Un texto que es el que ve el usuario como link.

Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos
visto. El resultado debe ser algo así.
DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero
podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si
queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello
utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

• _blank: Abre el documento vinculado en una ventana nueva del navegador.

• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.

Ejemplo:

<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva


ventana</a>

EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que
pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro
hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en
que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que
hayamos puesto en el atributo ‘title’.

EJEMPLO

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a
aprenderaprogramar.com</a>.
</body>
</html>

Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba los
resultados que se obtienen.

Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:

IMÁGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una
imagen. Veamos un ejemplo:

<ahref="http://aprenderaprogramar.com"><img src="http://i.imgur.com/SpZyc.png"alt="Curso de HTML desde


cero"></a>
EJERCICIO

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales
de Africa” como texto a mostrar.

Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos
que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber
más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia:
http://es.wikipedia.org/wiki/Panthera_leo

Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos
que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre
tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección 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 indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le
llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).

CREACIÓN DE TABLAS EN HTML

En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos
sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se
vuelve esencial.

El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no
deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página
web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos
espacios se usarán 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 básicos: 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 vacío, deberías usar una espacio en blanco (que en HTML se escribe
como &nbsp;) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos
navegadores tienen problemas representando celdas vacías. Ejemplo: <td>&nbsp;</td>

Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:

<!DOCTYPE html>
<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 más recientes de HTML.
Más adelante veremos cómo reemplazarlo usando técnicas CSS.

UNIFICACIÓN DE CELDAS

En algunas ocasiones, puede ser necesario unificar dos o más 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 unificación
vertical) y “colspan” (para unificación horizontal).

UNIFICACIÓN HORIZONTAL CON COLSPAN


Como hemos comentado con anterioridad, para la unificación horizontal de celdas, utilizaremos el atributo de
celda “colspan”. Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el atributo border está
deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>

Gráficamente:
UNIFICACIÓN VERTICAL CON ROWSPAN

En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. Crea un archivo
ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y
que más adelante veremos como reemplazarlo mediante el uso de CSS):

<!DOCTYPE html>
<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>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>

Gráficamente:
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 información de encabezado para un conjunto de celdas específicas.

Los navegadores representan normalmente el contenido de las celdas especiales como texto centrado y en
negrita, atributos que también pueden ser visualmente logrados con la utilización de celdas normales (elemento
TD). Entonces, ¿para que son útiles estos encabezados? Cuando utilizamos th la celda queda definida como
encabezado, no sólo tiene el aspecto de un encabezado. Por poner un símil, no es lo mismo vestirse de policía
sin serlo, que ser policía. 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. Además algunos motores de búsqueda (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 diseño específico para los
encabezados. Escribe este código con tu editor de texto y comprueba sus resultados:

<!DOCTYPE html>
<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</th>
<th>Calificación</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>Matemáticas</td>
<td>9</td>
</tr>
<tr>
<td>Rodolfo Cárdenas</td>
<td>Francés</td>
<td>5</td>
</tr>
</table>
</body>
</html>

TÍTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, podemos definir el título de una tabla. Este título debería describir de una manera
breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano
a la tabla (su posición puede ser establecida usando CSS). El elemento caption sólo está permitido si va justo
después de la apertura de la tabla. Escribe este código y comprueba el resultado.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
</body>
</html>

EJERCICIO

Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a continuación. La primera
fila debe estar compuesta por elementos de encabezado de tabla (th). No te preocupes por el centrado de los
textos, sino únicamente por que las subdivisiones en la tabla aparezcan correctamente.

Jefe departamento Jefe sección Empleado Edad empleado

Martín López Maite Suárez 55


Juan Alberto Chan
Luis Morales Mateo Carralde 33
Diana Rodríguez Carlos Hernández Alberto Fernández 62

Luis Pérez Diego Gutiérrez 44

Formularios HTML. form, label. name, value, id. Ejemplos.


Checkbox, option button, combobox (CU00720B)
Resumen: Entrega nº20 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00720B

FORMULARIOS EN HTML

En HTML, un formulario es una sección del documento destinada a que el usuario introduzca datos que van a ser
enviados a algún 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 cómo generar
formularios en HTML.

Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea introduciendo texto,
seleccionando una opción entre varias, etc., antes de enviar el formulario y que éste sea procesado. Escribe el
siguiente código en un editor y guárdalo 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>
<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="Varón">
<label for="varon">Varón: </label>
<br/> <br/>
<input type="radio" name="sexo" id="mujer" value="Mujer">
<label for="mujer">Mujer: </label>
<br/> <br/>
<input type="submit" value="Enviar">
<input type="reset">
</p>
</form>
</body>
</html>

La visualización que debes obtener es algo parecido a la siguiente imagen.

Supón que hemos rellenado los datos de este formulario. Cuando pulsamos en “Enviar”, la información se envía
al servidor y se utiliza para algo. ¿Qué utilidad se le puede dar a esta información? En general, un formulario
html nos sirve para acceder a otra URL(dirección web) que recibe la información. Cuando la nueva URL
recibe la información pueden ocurrir varias cosas: que se muestre en pantalla, que se escriba en una base de
datos, que nos muestre una imagen distinta según la información 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 información en un formulario o página web HTML y luego
acceder a una dirección web de tipo php, asp, jsp… que son tipos de páginas web que permiten realizar otro tipo
de funciones más avanzadas relacionadas con la programación, como es la escritura en bases de datos para
almacenar la información.

CONTROLES

Los usuarios interaccionan con los formularios a través 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 serían los que vamos a mostrar a continuación.

Checkbox o casilla de verificación: control que puede ser marcado o desmarcado por el usuario. Es muy
típico cuando se requiere aceptar unas condiciones para realizar una compra en una página web, o cuando se
requiere aceptar la licencia para instalar un programa.

Option Button o botón circular seleccionable (“radio”): control que puede ser marcado o desmarcado por
el usuario, de forma que normalmente cuando se marca una opción se desmarca la que estuviera seleccionada
previamente. Es muy típico cuando se requiere elegir entre varias opciones.
ComboBox o lista desplegable: control que muestra una opción seleccionada de entre varias posibles, y que
al pulsar sobre él despliega una lista de opciones.

Atributos básicos de un control:

1.- name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario para
poder rescatar la información.

2.- 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 acción del
usuario. El valor inicial de un control no cambia. Así, cuando se carga el formulario, el valor actual de
cada control se restablece a su valor inicial. Si el control no tiene un valor inicial, el efecto de una
reinicialización 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.
3.- 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 envía un formulario para su procesamiento, para cada control se procede al envío de
dos datos: su nombre (atributo name) y su valor actual, y esta información se envía a la dirección web de
destino.

Ejemplo: si introducimos en el formulario que nuestro nombre es Juan, nuestros apellidos Suárez Guerra, nuestro
email juan@gmail.comy nuestro sexo Varón, la información que se envía a la siguiente dirección web donde se
reciben los datos es:

· nombre=Juan

· apellido=Suárez Guerra

· email=juan@gmail.com

· sexo=Varón

Introduce esta información y envía el formulario cuyo código vimos anteriormente. Fíjate en la URL que
aparecerá en tu navegador. Será algo así:
http://www.aprenderaprogramar.com/?nombre=Juan&apellido=Su%E1rez+Guerra&email=juan%40gmail.com&s
exo=Var%F3n

Lo que puedes comprobar aquí es que la información que hemos escrito en el formulario está apareciendo ahora
de alguna manera en la nueva dirección web. No se muestra exactamente igual porque las direcciones web no
admiten tildes, que son sustituidas por un código equivalente a la letra con tilde. Tampoco las direcciones web
admiten el símbolo @, que también es sustituido.

Label o etiqueta: podría 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 código: <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 será nombre. Por otro lado, el texto que mostrará este
label será “Introduzca su nombre:”.

En realidad un label puede considerarse una parte “poco importante” en un formulario, puesto que se limita a
mostrar un texto y esto también se puede hacer de otras maneras. De hecho, podríamos prescindir de su uso.
En vez de tener el texto entre etiquetas <label> y </label> podríamos tenerlo entre etiquetas <p> y </p>. ¿Por
qué usar entonces los label? Porque las páginas web conviene que estén bien estructuradas y que todos los
programadores se atengan a las mismas normas. En este caso, las normas estándares para construcción 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. También nos servirá para poder
aplicar estilos específicos a los textos de formularios mediante técnicas CSS. Finalmente, tener en cuenta que a
medida que vayamos haciendo páginas más complejas, no haber hecho las cosas bien puede acarrearnos
problemas.

LA ETIQUETA FORM. POSIBILIDAD DE TENER VARIOS FORMULARIOS EN UNA WEB.


Cuando creamos un formulario en HTML, todo el contenido que lleva lo incluimos entre las etiquetas de apertura
<form> y de cierre </form>. Estas dos etiquetas delimitan el formulario. Dentro de una página web puede
haber varios formularios, por ejemplo podríamos tener dos formularios en una página web para que los usuarios
de un tipo rellenen un formulario y los de otro tipo otro formulario:

- “Si eres mayor de 18 años rellena este formulario”

- “Si eres menor de 18 años rellena este formulario”

En muchísimas páginas web hay un formulario único. Por ejemplo “Rellena tus datos personales”. Pero debemos
saber que podríamos tener dos, tres o más 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 dirección web (URL) a la que se dirigirá la
navegación cuando se pulse en el botón de envío del formulario. El atributo method hace referencia a cómo se
enviará la información.

Hay diversas cuestiones relacionadas con los formularios que todavía no hemos explicado. Lo iremos haciendo
poco a poco.

EJERCICIO

Basándote en el código de ejemplo que hemos visto, crea una página web que cumpla con lo que indicamos a
continuación:

a) Como título principal de la página debe figurar con etiquetas h1 el texto “Inscripción al Congreso de Medicina
Santiago 2048”

b) Debe contener dos formularios: el primero será “Inscripción al Congreso para médicos especialistas” y el
segundo “Inscripción al congreso para médicos generalistas”. Estos títulos deben figurar antes del formulario con
etiquetas h2.

c) El formulario para médicos especialistas debe solicitar nombre, apellidos, especialidad y año de obtención de
la especialidad.

d) El formulario para médicos generalistas debe solicitar nombre, apellidos, centro médico donde ejerce y año de
obtención del título.

Nota: para evitar confusiones en el envío de datos, todos los campos name deben tener valores diferentes, es
decir, en ambos formularios no se pueden repetir nombres los nombres identificativos empleados.

FORMAS DE ENVÍO DE LOS DATOS DE UN FORMULARIO. MÉTODOS GET Y POST. EJEMPLOS


Cuando un usuario rellena un formulario en una página web los datos hay que enviarlos de alguna manera.
Vamos a considerar las dos formas de envío de datos posibles: usando el método POST o usando el método
GET.

Por ejemplo: <form action="http://www.aprenderaprogramar.com/prog/newuser" method ="get">

En el ejemplo anterior la acción que se ejecutará cuando el usuario pulse el botón “Enviar” (submit) será el envío
de los datos a la url especificada usando el método 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
electrónico, País y Mensaje. Posiblemente los nombres de los campos en el código HTML sean del tipo
nombre_user, apellidos_user, email_user, pais_user y msg.
La diferencia entre los métodos get y post radica en la forma de enviar los datos a la página cuando se pulsa el
botón “Enviar”. Mientras que el método GET envía los datos usando la URL, el método POST los envía de forma
que no podemos verlos (en un segundo plano u "ocultos" al usuario).

Un resultado usando el método GET, a modo de ejemplo, podría ser el siguiente:

http://www.aprenderaprogramar.com/newuser.php?nombre=Pepe&apellido=Flores&email=h52t
uram%40uco.es&sexo=Mujer

En esta URL podemos distinguir varias partes: http://www.aprenderaprogramar.com/newuser.php es la


dirección web en sí.

El símbolo ? indica dónde empiezan los parámetros que se reciben desde el formulario que ha enviado los datos
a la página.

Después del símbolo ? aparecen parejas de datos con su nombre y valor separadas por el símbolo &. 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 página web de destino del formulario.

Tener en cuenta que para separar la primera pareja de la dirección web en sí se usa el símbolo ‘?’ y para separar
las restantes parejas entre sí se usa el símbolo ‘&’.

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 carácter @ ha sido sustituido por los caracteres %40. Estas
equivalencias se introducen automáticamente en la transmisión de datos debido a que las URLs no admiten
determinados caracteres como letras con tildes, arrobas y otros. No debes preocuparte por esta codificación, 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 están ocurriendo cosas extrañas o
errores.

Hemos visto el resultado de un envío por el método GET. En el caso de un envío de datos usando el método
POST, aunque estos datos también serán 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 envío con el método
POST necesitaríamos otras herramientas (por ejemplo valernos del lenguaje PHP para recuperar el valor de esos
campos).

El resultado final con ambos métodos podemos decir que es el mismo: la información se transmite de un lado a
otro. La diferencia radica en que con el método GET podemos ver directamente los parámetros pasados ya que
están dentro de la URL mientras que con el método POST los parámetros quedan ocultos y para rescatarlos hay
que usar otras herramientas.

Un ejemplo de uso del método post sería este:

<form action="http://www.aprenderaprogramar.com/prog/newuser" method ="post">

¿ES MEJOR USAR EL MÉTODO GET O EL MÉTODO POST?

Tanto GET como POST son métodos de envío de la información de los formularios válidos y ampliamente
utilizados. Cada método tiene sus ventajas y sus inconvenientes y no se puede decir que uno sea mejor que
otro. Elegir entre un método y otro depende de la aplicación concreta que se esté desarrollando y es algo que
dentro de las empresas de desarrollos web suelen decidir los encargados del diseño de las aplicaciones. A
nosotros en este curso básico simplemente nos interesa conocer la existencia de ambos métodos y sus
características.

Para terminar, en la siguiente tabla mostramos un resumen de las diferencias entre GET y POST:

MÉTODO CONCEPTO OBSERVACIONES

GET lleva los datos de


forma "visible" al
cliente (navegador Los datos son visibles por la URL, por ejemplo:
GET web). El medio de www.aprenderaprogramar.com/
envío es la URL. Los action.php?nombre=pedro&apellidos1= gomez
datos los puede ver
cualquiera.

POST consiste en datos


"ocultos" (porque el
La ventaja de usar POST es que estos datos no son
cliente no los ve)
visibles al usuario de la web. En el caso de usar get,
enviados por un
el propio usuario podría modificar la URL
POST formulario cuyo
escribiendo diferentes parámetros a los reales en su
método de envío es
navegador, dando lugar a que la información tratada
post. Es adecuado para
no sea la prevista.
formularios. Los datos
no son visibles.

INGRESO DE DATOS EN FORMULARIOS

Los controles de entrada de datos en formularios suelen ser controles visuales y permiten la introducción de
datos o selección de opciones al usuario. Su uso depende del tipo de control y también del tipo de información
que pueden obtener.

Los elementos de entrada de un formulario pueden ser definidos mediante el uso de estos elementos:

- El elemento HTML input.

- El elemento HTML textarea.

- El elemento HTML select.


- Otros elementos HTML.

ELEMENTOS DE ENTRADA DE TEXTO

- Entrada de línea

Mediante este control podemos obtener información textual en una sola línea, lo que significa que el usuario no
podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter"
presionada en uno de estos campos, envía el formulario que lo contiene como si pulsáramos sobre el botón
submit de envío 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 página se carga, puede ser definido usando el atributo "value".
Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los
resultados que se obtienen.

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

- Entradas de password

Este control es igual que el de entrada de línea, 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" mostrándose como puntos o asteriscos para evitar que los usuarios (más bien alguien que pase por
detrás) 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 comúnmente usado para el ingreso de contraseñas. Escribe este código
en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>
<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 contraseña:
<input name="contrasena" type="password" value="123456" />
</form>
</body>
</html>

- Entrada de multi-línea

Con este control los usuarios podrán introducir texto en una o más líneas. Se inserta utilizando la etiqueta HTML
textarea y puede ser usado para escribir comentarios, mensajes, etc. que ocupen varias líneas. Escribe este
código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se
obtienen.

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

En la próxima entrega seguiremos viendo más controles para formularios.

EJERCICIO

Crea una página web que contenga un formulario de registro de usuarios que cumpla estas condiciones:

Como título principal de la página debe figurar con etiquetas h1 el texto “Solicitud de alta como usuario”. Debe
contener un campo entrada de línea para solicitar el nombre. Debe contener un campo entrada de línea para
solicitar los apellidos. Debe contener un campo entrada de línea para solicitar el correo electrónico. Debe
contener un campo entrada de línea y tipo password para solicitar la contraseña. Debe contener un campo
multilínea para solicitar observaciones. El formulario se debe enviar por el método get a la dirección de destino
http://aprenderaprogramar.com

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

OPCIONES PARA PEDIR DATOS EN FORMULARIOS HTML

Podemos permitir que los usuarios elijan opciones preestablecidas de una lista en un formulario HTML. Esto
podemos lograrlo usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de
opciones: casillas de verificación, botones radio y listas de opciones.
Casillas de verificación

Una casilla de verificación es un pequeño cuadrado asociado a una opción que puede ser marcado o desmarcado
por el usuario.

Una casilla puede encontrarse en dos situaciones: "marcada" ó "no marcada" ("checked" ó "unchecked"). Las
casillas de verificación 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 código en un editor de textos,
guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>
<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" />Películas
<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros
<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
</body>
</html>

En este caso ninguna casilla aparecerá marcada como seleccionada inicialmente.


Si lo deseamos podemos marcar una opción por defecto con el atributo checked para que aparezca marcada
cuando se cargue la página web. Cambia el código como indicamos a continuación y comprueba los resultados:

<input name="cbilibros" type="checkbox" checked="checked" />Libros

A modo de ejercicio, añade un botón para enviar el formulario y comprueba que el resultado después de realizar
el envío 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 información que se envía a la dirección de
destino es nombreCasilla=on donde nombreCasilla es el valor que tiene el atributo name en el código HTML del
formulario. Si una casilla no es seleccionada no se envía ninguna información.

Botones radio

Los botones radio trabajan de forma similar a las casillas de verificación con una pequeña diferencia: los botones
radio que comparten el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar
más de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente
deseleccionadas.
El valor inicial para el grupo depende del navegador (la mayoría 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 verificación. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y
comprueba los resultados que se obtienen.

<!DOCTYPE html>
<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" />Películas
<br />
<input name="intereses" type="radio" value="rbilibros" />Libros
<br />
<input name="intereses" type="radio" value="rbiinternet" checked="chec
ked" />Internet
</form>
</body>
</html>

A modo de ejercicio, añade un botón de envío y envía el formulario. Comprueba que en la url después de enviar
el formulario obtienes lo siguiente: http://aprenderaprogramar.com/action.php?intereses=rbiinternet
Para botones radio la información pasada a la dirección web de destino del formulario es nameOpcionElegida =
valueOpcionElegida. En una lista con muchos botones radio sólo se pasará información sobre uno de ellos: la
opción seleccionada. Si no hay ninguna opción seleccionada no se pasará ninguna información relacionada. Por
ejemplo en el caso anterior si envías el formulario sin ninguna opción seleccionada la url de destino
es http://aprenderaprogramar.com/action.php

Listas de opciones

Estas listas pueden ser construidas utilizando tres elementos: el elemento HTML select (contenedor principal), el
elemento HTML option (opción simple) y el elemento HTML optgroup (grupo de opciones). Este elemento es el
único prescindible (opcional) para construir este tipo de listas.

Veamos primero el aspecto gráfico y después la explicación y el código.

Los controles de lista pueden ser usadas para recolectar información al igual que los botones radio (sólo una
opción) o como casillas de verificación (múltiples opciones), dependiendo de la presencia del atributo booleano
"multiple".

Se puede especificar que se permite la selección múltiple 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 código en un editor de textos, guárdalo como
archivo con extensión HTML y comprueba los resultados que se obtienen.
<!DOCTYPE html>
<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 opción, como en los botones radio:
<select name="entradalista1">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option selected="selected">Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificación
(manteniendo presionada la tecla "Ctrl"):<br /><br /><br />
<select name="entradalista2[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option>Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
</body>
</html>

En el caso de que enviásemos el formulario teniendo elegido en el primer select la opción “Entradas de
contraseña” y en el segundo las opciones “Casillas de verificación”, “Botones radio” y “Listas”, la url de destino
quedaría de la siguiente manera (pueden haber variaciones entre un navegador y otro a la hora de codificar
caracteres extraños como letras con tildes, eñes o corchetes):

http://aprenderaprogramar.com/action.php?entradalista1=Entrada+de+contrase%C3%B1a&entradalista2[]=Cas
illas+de+verificaci%C3%B3n&entradalista2[]=Botones+radio&entradalista2[]=Listas

Para la primera lista sin el atributo "multiple", el valor pasado a la url de destino será la opción seleccionada,
pero para el segundo ejemplo el valor pasado indica los distintos valores seleccionados uno después de otro. Por
ejemplo fruta=Fresa&fruta=Pera&fruta=Manzana.

Aquí nos encontramos con un problema: ¿cómo saber que se han seleccionado tres opciones de fruta en la
dirección web de destino? Este problema ahora no nos resulta relevante porque no vamos a estudiar cómo se
recupera la información en este curso, lo único que señalaremos es que para que posteriormente se pueda
recuperar la información con facilidad cuando se permite una selección múltiple y el nombre es común, es
recomendable añadir unos corchetes después del nombre (atributo name del select). Estos corchetes permitirán
que en la dirección web de destino se pueda recuperar la información interpretando que
fruta[]=Fresa&fruta[]=Pera&fruta[]=Manzana quiere decir fruta[1]=Fresa&fruta[2]=Pera&fruta[3]=Manzana, es
decir, que cada opción 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 información que se envía 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
envía 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 envía el contenido del atributo value.

Suponiendo que el atributo name es fruta, en el caso a) en la url de destino aparecería


&fruta=Fresa+del+bosque y en el caso b) aparecería &fruta=fresa

EJERCICIO

Crea una página web que contenga un formulario que cumpla estas condiciones. Como título principal de la
página debe figurar con etiquetas h1 el texto “Preferencias musicales”. Debe contener tres checkbox que
permitan elegir tipos de música favoritas entre Rock, Pop y Jazz. Seguidamente mediante radio buttons se debe
pedir la edad ofreciendo estas opciones: de 12 a 17 años, de 18 a 35 años, de 36 a 65 años y más de 65.
Finalmente, se deben poder elegir “grupos y cantantes que te gustan” permitiéndose la selección múltiple 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 denominado Jazz con tres nombres de grupos o
cantantes.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

BOTONES EN FORMULARIOS

Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de
botones: botón enviar el formulario (envío o submit) y botón poner todos los campos a sus valores iniciales
(restablecimiento o reset). Normalmente un formulario contendrá, como mínimo, un botón (el botón enviar).
Además de estos dos tipos de botones existe un botón especial al que denominamos “botón de contenido”, que
no posee ninguna acción predefinida. El resultado de pulsar este botón o acción a ejecutar deberá ser
especificada en cada caso.

Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y reestabler y
botones de imagen) o el elemento HTML button (botones de contenido).

BOTONES DE ENVÍO (SUBMIT)

Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir,
cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo
tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta
<input … />. Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type =
"submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba
los resultados que se obtienen.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="submit" value="Enviar este formulario" />
</form>
</body>
</html>
Fíjate 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 códigos producen el mismo resultado, pero es más 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 botón ‘Enviar este formulario’ es que el
navegador irá a la página ‘accion.php’ y recibirá los datos que pudiera llevar el formulario. Si en vez de
http://aprenderaprogramar.com/accion.php escribiéramos simplemente accion.php la direccion accion.php se
buscaría dentro del mismo directorio donde se encontrara el archivo html.

BOTONES DE RESTABLECIMIENTO (RESET)

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado.
Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este código en
un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="condiciones" checked="checked" />
Acepto las condiciones<br />
<input type="reset"
value="Restablecer todos los campos a su valor predeterminado" />
</form>
</body>
</html>
En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y
presionando el botón para restablecer los campos a sus valores iniciales.

BOTONES DE IMAGEN (IMAGE)

Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son
representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían,
además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el
formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por
ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas en la forma "boton1.x" y
"boton1.y"). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que
bastará con recuperar la información útil y ya está.

Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe
este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que
se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca).

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<input name="boton1" type="image"
src="/images/aprenderaprogramar/imagen.png">
</form>
</body>
</html>
Si ahora, hiciéramos click sobre el botón de imagen, podríamos observar como se envían las coordenadas donde
hicimos el click.

Ejemplo de cómo se reflejaría 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 además de las coordenadas se enviará toda la información contenida en el formulario. Por
ejemplo si en el formulario tuviéramos un campo nombre donde se ha introducido “Carlos” y un campo fruta
donde se ha introducido “Fresa”, la url de destino sería similar a esta:
http://aprenderaprogramar.com/?nombre=Carlos&fruta=Fresa&boton1.x=46&boton1.y=65

BOTONES DE CONTENIDO (BUTTON)

Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener
ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Su característica principal es que se
puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de
fondo, etc.

Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset" en su
atributo "type". Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se
especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar
ahora cómo para centrarnos en el HTML). Un valor submit hará que el botón funcione como un botón de envío.
Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores
predeterminados del formulario.

Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los
resultados que se obtienen.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<button type="submit">
El <b>tag HTML type button</b><br />
permite contenido HTML en su interior.
</button>
</form>
</body>
</html>

Como podemos observar, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado
la etiqueta <b> </b>para poner texto en negrita y la etiqueta <br /> para introducir un salto de línea. Ten en
cuenta que la apariencia puede variar según el navegador que utilices.

A su vez hemos escrito <button type="submit">, lo que supondrá que el botón funcione como un botón de
envío. Si hubiéramos escrito <button type="reset"> el botón funcionaría como un botón de restablecimiento de
valores por defecto, y su hubiéramos escrito <button type="button"> el botón no daría lugar a ninguna acción.
En caso de no especificarse type para el botón, normalmente el navegador considerará que es un botón tipo
submit.

EJERCICIO

Crea una página web que contenga dos formularios que cumplan estas condiciones.

Como título antes del primer formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Saber y
Ganar>>. Debe contener:

a) Nombre

b) Apellidos

c) email

d) Teléfono
e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer
que muestre el texto <<Cancelar>>.

Como título antes del segundo formulario debe figurar con etiquetas h1 el texto “Petición de información”. Debe
contener:

a) Nombre

b) País

c) email

d) Consulta que se quiere realizar (debe ser un textarea que permita escribir múltiples líneas).

e) Un botón para enviar de tipo imagen y un botón para restablecer de tipo button que muestre dentro del botón
lo siguiente: <<Pulse aquí para cancelar>>, un salto de línea, y el texto <<Esto borrará los datos>>.

SUBIR ARCHIVOS AL SERVIDOR USANDO UN FORMULARIO HTML

Los formularios HTML permiten que el usuario seleccione archivos para subirlos (enviarlos) al servidor. El control
“entrada de archivos” muestra una caja de texto donde el usuario debe especificar la ruta del archivo que se
encuentra en el ordenador del usuario y que será enviado al servidor.

De esta manera podemos enviar archivos desde un computador cliente al servidor a través de una página web.
El control habitualmente muestra un botón para elegir el archivo visualmente.

EL ATRIBUTO ENCTYPE DE LA ETIQUETA FORM

Para permitir el envío de archivos a través de un formulario hemos de tener en cuenta varias cosas.

La primera, que existían dos métodos de envío: get y post. Get transmite la información en forma de texto a la
url de destino, por tanto no será un método válido para el envío de archivos (ya que no podemos enviar un
archivo en modo de texto a una url de destino). Para permitir la selección y envío de archivos a través de un
formulario tendremos por tanto que usar el método post.

La segunda, que existe un protocolo para el envío de la información desde la url donde se encuentra el
formulario hasta la url de destino. Este protocolo permite tener en cuenta si se envía simplemente texto o si se
envían cosas más complejas como archivos, ya que no es lo mismo la transmisión de una cosa que de otra.

Si no se especifica el valor del atributo enctype el navegador aplica un valor por defecto (dicho valor es
application/x-www-form-urlencoded). Este valor, que no es necesario especificar ya que el navegador lo añade
sin necesidad de escribirlo, indica que se envía texto y permite que se apliquen los protocolos adecuados.

Para enviar archivos debe especificarse el valor del atributo enctype = "multipart/form-data" como veremos en
el ejemplo de código a continuación.
TYPE FILE EN ETIQUETA INPUT

Finalmente, para crear el control en el formulario que permita al usuario seleccionar un archivo hemos de crear
una etiqueta input y establecer su atributo type = "file"

Escribe el siguiente código en un editor como Notepad++ y guárdalo con el nombre que quieras, por ejemplo
pruebaEnvioArchivo.html.

<!DOCTYPE html>
<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.

La visualización puede ser un poco diferente según el navegador que utilicemos.


Al presionar sobre el botón ‘Seleccionar archivo’ (o ‘Examinar’ en otros navegadores) se mostrará el explorador
de archivos de Windows y podremos seleccionar el archivo que deseemos.

En el código que hemos escrito anteriormente nos falta un botón para poder realizar el envío del formulario.
Añade esta línea al código del formulario para disponer de ese botón: <input type="submit" value="Enviar" />

Modifica ahora el método de envío y establece que sea GET en lugar de POST, selecciona un archivo y pulsa en
el botón de envío. En la Url a donde nos dirige el navegador veremos el nombre del archivo seleccionado como
un parámetro 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 sería un ejemplo de la ruta que obtendríamos si
el formulario está en nuestro ordenador).

http://www.aprenderaprogramar.com/accion.php?imagen=foto.jpg(esto sería un ejemplo de la ruta que


obtendríamos si el formulario está en un servidor).

Hemos cambiado el método a get para poder visualizar un resultado, ya que usando post, como ya sabemos, los
datos se envían de forma oculta. Sin embargo usar get no tiene ninguna utilidad práctica, ya que como hemos
indicado no permite que se envíe el archivo al servidor, aquí lo hemos empleado únicamente con fines didácticos.

Cuando usemos post, la imagen será enviada al servidor, lo cual significa que el archivo foto.jpg de nuestro
ejemplo se enviará a la URL de destino y usando el código y lenguaje de programación adecuado, normalmente
se procederá a almacenarlo en un directorio del servidor (ordenador remoto) con el que estuviéramos
trabajando. Tanto para el proceso de recepción como para guardar y poder manipular posteriormente ese
archivo necesitaremos de otros lenguajes de programación a los que se denomina lenguajes del lado del servidor
como PHP, JSP, ASP, etc.

Nosotros no entraremos a describir cómo sería el proceso de recepción y manipulación del archivo en el servidor
después del envío, porque esto implicaría el uso de otros lenguajes de programación que no son objeto de este
curso, que se centra exclusivamente en HTML. Si tienes interés 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 básico del
programador web: PHP desde cero” de aprenderaprogramar.com, donde se explican los fundamentos del
lenguaje PHP.

EJERCICIO

Crea una página web que contenga un formulario que cumpla estas condiciones.

Como título antes del formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Jara y
Sedal>>. Debe contener:

a) Nombre

b) Apellidos

c) Dirección

d) Fotografía (aquí se debe dar opción a elegir un archivo de imagen que será la fotografía)

e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer
que muestre el texto <<Cancelar>>.

Ten en cuenta que para el envío de archivos tienes que establecer correctamente los atributos del formulario:
method y enctype.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

div y span HTML tags. Capas o contenedores. Ejemplos


uso. Maquetar estructura de páginas web (CU00726B)
Resumen: Entrega nº26 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00726B

CAPAS O CONTENEDORES HTML

Las capas o contenedores son unos recuadros o espacios rectangulares que pueden colocarse en cualquier parte
de la página. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y
dar estructura y diseño a las páginas HTML.

ETIQUETA DIV

Podemos insertar una capa o contenedor a través de las etiquetas <div> y </div>

A través 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 básicos para facilitar la comprensión del
código de ejemplo que iremos viendo.

Imaginemos que queremos crear una página web con 3 partes diferenciadas: cabecera, cuerpo y pie. Crea un
archivo html con el siguiente código y visualízalo en tu navegador.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="border: 1px solid red;">
Cabecera de la página.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;">
Pie de la página
</div>
</body>
</html>
Como podemos observar, hemos creado 3 capas (rectángulos) cada una con un borde de distinto color. Y lo
más importante, le hemos dado estructura a la página y un diseño muy sencillo y básico.

Ahora supongamos que queremos cambiar los estilos de la cabecera. Al tener bien definida y estructurada la
página 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 cómo se puede cambiar específicamente las características
de una capa HTML). Escribe este código y visualiza los resultados en tu navegador.

<!DOCTYPE html>
<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 página.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;">
Pie de la página
</div>
</body>
</html>
Hemos aumentado el tamaño de la fuente (letra) de la cabecera y, además, hemos centrado el texto,
simplemente cambiando los estilos de la capa (div) que contenía a la cabecera.

Por tanto, la principal utilidad de las capas, como ya mencionamos antes, es la de poder separar por partes la
página HTML (estructurar). Tener bien estructurada un documento HTML (página web) es importante por
distintos motivos, por ejemplo:

a) Nos permitirá establecer un estilo diferente (diseño) para cada contenedor.

b) Nos permitirá identificar cuándo un usuario hace click sobre la página, en qué contenedor ha hecho click.

c) Nos permitirá crear efectos especiales para una capa concreta.

ETIQUETA SPAN

La etiqueta span al igual que casi todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su
respectiva etiqueta de cierre </span>. ¿Qué utilidad tiene? La etiqueta span sirve normalmente para crear
subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada subdivisión sin
necesidad de crear nuevas capas.

Imaginemos que en el ejemplo anteriormente mostrado, dentro de la cabecera cuya fuente es de color negro,
quisiéramos añadir texto de distintos colores pero que ese texto perteneciera a la misma capa de la cabecera.
Para ello, utilizaríamos la etiqueta span.

Escribe el siguiente código, guárdalo en un archivo html y visualízalo en tu navegador.

<!DOCTYPE html>
<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;">página</span>.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;">
Pie de la página
</div>
</body>
</html>

Como podemos observar, la etiqueta span permite crear subdivisiones que nos servirán para poder identificar y
aplicar estilos a porciones de texto dentro de una misma capa (div).

HTML SE COMBINA CON CSS

Para poder aprovechar todo el potencial de este par de etiquetas, deberíamos tener un buen conocimiento de
maquetación, diseño y uso de hojas de estilos (CSS). En este curso estos temas no se van a tratar, aunque se
mencionan de forma sencilla y simplificada. El verdadero potencial de estas etiquetas lo obtenemos cuando
utilizamos HTML combinado con CSS, pero desde el punto de vista didáctico, lo adecuado es ir aprendiendo los
aspectos más básicos para luego introducir los más complejos. No te preocupes por hacer páginas complejas en
este momento, sino por entender bien los conceptos. Una vez termines el curso de HTML te recomendamos que
continues con el curso “Tutorial básico del programador web: CSS desde cero” de aprenderaprogramar.com.

EJERCICIO

Crea una página 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 más abajo:
Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links,
párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie.

La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa
de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright).

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

id HTML. Creación de un portal web básico. Página


principal. Cabecera, menú, cuerpo y pie. Código
(CU00727B)
Resumen: Entrega nº27 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00727B

CREACIÓN DE UN PORTAL BÁSICO

En las próximas entregas, nos vamos a centrar en poner en marcha todos los conocimientos que hemos ido
adquiriendo a lo largo del curso para crear un pequeño, y de momento modesto, portal web. Para ello, vamos a
crear un portal muy básico incluyendo algo de maquetación.

En primer lugar crearemos una página de inicio o portada que contendrá lo siguiente: una cabecera, un menú,
un cuerpo y un pié. No entraremos a explicar los temas de diseño ni las hojas de estilos que se suelen usar en
páginas web ya que ahora trataremos de centrarnos en cuestiones básicas de HTML sin complicarlo con otros
aspectos añadidos.

Lo que primero vamos a hacer es crear una estructura básica de página HTML. Respecto a los conocimientos que
ya teníamos, añadimos la novedad de que a cada contenedor div le vamos a poner un nombre único (que no
puede repetirse en otro contenedor) usando esta expresión. <div id="AquíElNombreDelContenedor"> …
elementos … </div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portal básico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header"><!-- Aquí vendría el código de la cabecera --></div>
<div id="wrapper">
<div id="menu"><!-- Aquí vendría el código del menú --></div>
<div id="body"><!-- Aquí vendría el código del cuerpo --></div>
</div>
<div id="footer"><!-- Aquí vendría el código del pié --></div>
</div>
</body>
</html>

Básicamente, la estructura ya la tenemos montada, ahora lo necesario es ir definiendo cada uno de los
elementos por separado y posteriormente unificarlos todos.

CABECERA

En nuestro caso la cabecera será tan simple que solo mostrará un texto. Puedes intentar complicarla añadiendo
algunos botones, imágenes, campos de texto, o lo que creas oportuno.

<div id="header">
Portal (Tutorial básico del programador web: HTML desde cero) -
aprenderaprogramar.com
</div>

PIE

El pie también es similar en complejidad a la cabecera. En este caso, sólo mostraremos el copyright como texto.
Se puede complicar añadiéndole imágenes, links, etc.

<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
MENÚ Y CONTENIDO PRINCIPAL (CUERPO)

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

<!-- contenedor -->


<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 programación nos referimos a aquellos
conocimientos básicos que nos permitirán desenvolvernos sin excesivo número
de tropiezos. Veamos a qué tipo de tropiezos nos referimos utilizando un
símil de transporte. El conductor (programador) dispone de un coche
(el ordenador) y desea trasladarse
</p>
</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor -->

La expresión <href="#">Portada</a> significa que hacemos un link a #. El símbolo # es obvio que no es una
URL, lo que significa es “link a la misma página que estamos visualizando”.

El código resultante de todo el proceso, más algunos detalles básicos de diseño (no te preocupes si no entiendes
algunos elementos definidos con style, lo importante es comprender el código y estructura HTML), sería el que
se muestra a continuación. Abre un editor como Notepad++, escríbelo y guárdalo con un nombre como
ejemplo1.html. A continuación, visualiza el resultado en tu navegador.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portal básico - 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 básico 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 programación nos
referimos a aquellos
conocimientos básicos que nos permitirán
desenvolvernos sin excesivo número
de tropiezos. Veamos a qué tipo de tropiezos nos
referimos utilizando un
símil de transporte. El conductor (programador) dispone
de un coche
(el ordenador) y desea trasladarse
</p>
</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
</div>
</body>
</html>

Si abrimos la página HTML del ejemplo anterior obtendremos una visualización similar a la siguiente:

Si tuviéramos unos conocimientos más amplios en maquetación y hojas de estilo (CSS), fácilmente podríamos
conseguir convertir la página anterior en una algo más vistosa. No vamos a entrar ahora en describir cómo.
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 párrafos.

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver
curso completo.

Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona
independientemente de su nivel de conocimiento.

FORMULARIO DE DATOS PERSONALES

En esta entrega nos vamos a centrar en crear un formulario de entrada de datos personales: nombre, apellidos,
dirección, correo electrónico y número de teléfono. Los formularios son elementos muy frecuentes en las páginas
web y se usan para recabar datos de todo tipo por parte de los usuarios.
Apoyándonos en el diseño obtenido en la entrega anterior. Crearemos una nueva página. Para ello sólo
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 />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Teléfono: <input type="text" name="telefono" /><br />
</form>
</div>

A modo de ejercicio, abre un editor como Notepad++, escríbe el código y guárdalo con un nombre como
ejemplo1.html. A continuación, visualiza el resultado en tu navegador. Recordar que aunque en este ejemplo
falten etiquetas HTML el navegador las completará y tratará de mostrar un resultado. Sin embargo, para que la
página esté correctamente construida deberíamos incluir todas las etiquetas propias de un documento HTML
(como <html> … </html>, etc.).

Si nuestro formulario lo incluimos dentro del pequeño portal que habíamos creado en la anterior entrega del
curso, el código completo sería el siguiente. Abre un editor como Notepad++, escríbelo y guárdalo con un
nombre como ejemplo2.html. A continuación, visualiza el resultado en tu navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portal básico - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header">
Portal (Tutorial básico 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">aprenderapro
gramar.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 />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br
/>
Teléfono: <input type="text" name="telefono" /><br />
</form>
</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2006-2012 aprenderaprogramar.com
</div>
</div>
</body>
</html>

Si abrimos la página HTML del ejemplo anterior obtendremos una visualización similar a la siguiente:

Fíjate que el código de la cabecera, menú y pie es exactamente el mismo que el de la entrega anterior. Sólo
hemos modificado el cuerpo de la página. Cuando navegas por Internet, se suelen mantener las mismas
cabeceras, menú y pie en las páginas 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 más conocimientos, en vez de repetir el código en todos los archivos, podrás utilizar instrucciones
específicas para hacer que esos contenidos de plantilla se carguen en todas las páginas de un portal sin
necesidad de ir repitiéndolos en todas las páginas que creamos. Además, así podríamos cambiar el elemento
cabecera en un único lugar y obtener su cambio en todas las páginas, sin tener que editar todas las páginas 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 fotografía que permita el envío
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é método de envío hay que especificar para el form si se envían archivos?

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Cómo crear cuenta hosting gratuita en servidor HTML y


acceder vía panel administración CPANEL. (CU00729B)
Resumen: Entrega nº29 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00729B

CREAR UNA CUENTA DE HOSTING GRATUITA

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

CREAR CUENTA DE HOSTING GRATUITA

En Internet hay muchas páginas web que permiten crear una cuenta de hosting gratuito en un servidor HTML:
por ejemplo www.000webhost.com, www.byethost.com, www.agilityhoster.com y varias más. Creando una
cuenta en un hosting gratuito, disponemos de un servidor (que compartimos con otros usuarios) donde podemos
alojar una página web. Nosotros usaremos el servidor de Byethost (byethost.com), aunque podríamos usar
cualquier otro porque todos ellos son similares. También, si dispones de una cuenta de hosting gratuita o de
pago y de un dominio, puedes utilizarlo sin necesidad de dar todos los pasos que explicamos aquí.

En nuestro caso, en primer lugar crearemos la cuenta de hosting gratuita. Para ello, accedemos a la página web
de Byethost, introduciendo en nuestro navegador la siguiente dirección: www.byethost.com

Nos aparecerá una página similar a la siguiente (ten en cuenta que el aspecto puede ir variando cada pocos
meses):

Dentro de las opciones disponibles, buscaremos y entraremos en la sección Free Hosting haciendo click en la
sección marcada. Ahora debemos buscar la opción para crear una cuenta (sign up):
Una vez accedemos a la página de creación 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 dirección 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 números).
Una vez hayamos finalizado de introducir los datos solicitados, haremos click sobre el botón Registrar (Register)
y nos aparecerá una página Web indicándonos que se nos ha enviado un correo electrónico a la dirección de
correo que hayamos facilitado en el formulario y en ese correo nos indicarán un enlace Web (dirección url)
donde debemos activar nuestra cuenta.

El último paso que nos quedaría para crear nuestra cuenta de hosting gratuita sería entrar a nuestro correo y
hacer click en el enlace de activación 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@aprenderaprogram
ar.com&hash=8ggfg8sfdfd17c98efdghj99638c764&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 activación fue realizada con éxito y se nos enviará un nuevo correo
electrónico con la información detallada de nuestros datos de acceso.

El correo que nos envía el proveedor del servicio de hosting (en nuestro caso Byethost) con la información de
acceso detallada tiene más o menos el siguiente contenido:

“Dear Valued Customer, Thank you for registering at byethost7.com. We are…”

Además nos envían los datos de acceso:

Cpanel Username: b7_datos


Cpanel Password: elpassword
Your url: http://apr2.byethost7.com or http://www.apr2.byethost7.com
FTP Server: ftp.byethost7.com
FTP Loging: b7_datos
FTP Password: elpassword
MySQL Database Name: must create in Cpanel
MySQL Username: b7_datos
MySQL Password: elpassword
MySQL Server: see CPanel
Cpanel URL: http://cpanel.byethost7.com

Estos datos son importantes pues son los que nos permitirán gestionar todo lo necesario relativo a nuestra
página web. Conviene imprimirlos además de mantenerlos bien localizados en un archivo de texto dentro de
nuestro ordenador.

ACCEDER VÍA PANEL DE CONTROL (CPANEL)

Para acceder vía Cpanel, debemos ir a la url que nos hayan facilitando, en este
ejemplo http://cpanel.byethost7.com, e introducir el nombre de usuario y la contraseña.
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 información de la
cuenta, un área de administrador de archivos que nos proporciona un explorador de archivos parecido al de
Windows o Filezilla, pero que además 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 sólo 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.
ómo subir nuestra web al servidor HTML (Internet)
mediante el explorador de archivos del CPanel. (CU00730B)
Resumen: Entrega nº30 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00730B

SUBIR NUESTRA WEB AL SERVIDOR HTML

Ahora que ya tenemos creada nuestra cuenta gratuita, vamos a subir nuestra web (conjunto de páginas HTML) a
nuestro servidor de hosting. Una vez hagamos esto, nuestra página web pasará a estar accesible desde internet,
de forma que cualquier persona con conexión a internet puedea acceder a ella.

PANEL DE ADMINISTRACIÓN O CPANEL

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

1. Información de la cuenta

2. Administrador de archivos que nos proporciona un explorador de archivos parecido al de Windows o


Filezilla pero que además nos permitirá descomprimir archivos .zip (no todos los servidores permiten la
descompresión zip, pero la mayoría de ellos sí).

3. Acceso a las bases de datos previamente creadas.

4. Otras áreas

Para entrar en el explorador de archivos, haremos click en el enlace ‘Administrador de archivos’, ‘Gestor de
archivos’ o equivalente y nos aparecerá una ventana similar al explorador de Windows, donde podremos ver
carpetas y archivos ubicados en el servidor (computador remoto).
Como podemos observar en la imagen anterior, en nuestro servidor existen un par de archivos que no tocaremos
ni prestaremos atención 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 páginas webs que serán accesibles desde Internet
utilizando nuestro nombre de dominio (recordar que en nuestro caso de ejemplo es apr2.byethost7.com). Según
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 quizás 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 política e incluya otros ficheros.

En nuestro caso, existe un fichero index.php, también es normal que pueda existir un archivo llamado index.htm
o index.html

Nosotros lo que vamos a hacer en primer lugar es borrar todos los ficheros index.* donde * puede ser php, htm
o HTML de la carpeta ‘htdocs’. Para ello, seleccionaremos todos los archivos index, y después 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 aceptación.
Tras borrar los archivos seleccionados, volveremos atrás al gestor de archivos. Una vez volvamos atrás, haremos
click en el botón ‘upload’ (subir archivo) para enviar los archivos de nuestra primera página web HTML y así
poder acceder a ella desde cualquier parte en Internet.

Una vez pulsado ‘upload’ (subir archivo) seleccionaremos el fichero que deseamos subir.
Una vez seleccionado el archivo (recordad donde guardasteis el archivo con la página web HTML de la entrega
CU00727B del curso, cuyo nombre era ejemplo01.html ó similar), pulsamos sobre el botón 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 dirección correcta en un navegador web, el servidor se encargará de enviarle el
código HTML que permite que se visualice la página 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 dirección que
corresponda)

Cada vez que una persona escriba la URL en su navegador, conectará con el servidro y éste se encargará de
enviar la información precisa a través de internet de modo que pueda ver la página web en su ordenador o
dispositivo.

EJERCICIO

Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo
webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas 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 continuación sube los tres documentos HTML al servidor y comprueba
que puedan visualizarse y navegar mediante los links entre una página y otra.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

¿Qué es y para qué sirve JavaScript? Embeber JavaScript


en HTML. Ejercicio ejemplo básico (CU00731B)
Resumen: Entrega nº31 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00731B

¿QUÉ ES Y PARA QUÉ SIRVE JAVASCRIPT?

JavaScript es un lenguaje de programación, al igual que PHP, si bien tiene diferencias importantes con éste.
JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el
servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos
interpretan el código JavaScript integrado en las páginas web.
Para entender lo que es JavaScript consideremos lo siguiente. Un usuario escribe una dirección web en su
navegador, por ejemplo http://www.aprenderaprogramar.com. El servidor recibe la petición y como respuesta a
esa petición envía al ordenador del usuario código HTML junto a código JavaScript. El código HTML se encarga
de que en la pantalla se muestre algo, por ejemplo una imagen, un menú, etc. El código JavaScript se puede
encargar de crear efectos dinámicos en respuesta a acciones del usuario, por ejemplo que se despliegue un
menú tipo acordeón cuando el usuario pasa el ratón 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 rápidos y
dinámicos. Al ser un lenguaje de programación permite toda la potencia de la programación como uso de
variables, condicionales, bucles, etc. También podemos citar algún inconveniente: por ejemplo si el usuario tiene
desactivado JavaScript en su navegador, no se mostrarán los efectos. No obstante, hoy día la mayoría de los
usuarios navegan por la web con JavaScript activado.

FORMAS DE USAR JAVASCRIPT EN DOCUMENTOS HTML

La primera forma de usar JavaScript dentro de una página web es embebiendo directamente el código JavaScript
dentro del código HTML. Vamos a poner un ejemplo de código JavaScript pero no vamos a entrar en detalle a
comentarlo ni explicarlo ya que en este curso no vamos a explicar JavaScript. Simplemente queremos saber
interpretar por qué dentro de un documento HTML pueden aparecer fragmentos de código escrito en otro
lenguaje.

Ejemplo:

<html>
<head>
<title>Embeber JavaScript – aprenderaprogramar.com</title>
</head>
<body>
<script type="text/javascript">
document.write('Hola Mundo');
</script>
</body>
</html>

Como podemos observar, el código 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 extensión .js. Veamos un ejemplo: imaginemos que tenemos un archivo
denominado mensaje.js con código JavaScript:
alert('Mensaje JavaScript');

Ahora, para incluir dicho archivo en la una página web utilizaríamos el siguiente código:

<script type="text/javascript" src="archivo.js"></script>

Este código se escribiría 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>
Página 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, habría que especificar la ruta.

Los resultados los vemos al cargar el documento html en nuestro navegador y serán similares a lo que vemos en
las siguientes imágenes.
Al cargar el documento HTML se incorpora el código JavaScript desde el archivo incrustado, que da lugar a que
se muestre una ventana con el aviso “Mensaje JavaScript”. Cuando pulsemos sobre el botón aceptar, veremos el
contenido del documento HTML:

Los ejemplos anteriores son muy simples, pero usando JavaScript avanzado podemos crear funciones
interactivas en nuestra página web, como por ejemplo una calculadora.

En el ejemplo que hemos puesto, gracias a JavaScript el usuario podría introducir un peso (weight), los kilates
(karats) y al pulsar el botón = 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 código JavaScript, bien dentro del propio archivo HTML
o bien realizando una carga de ese código indicando el archivo donde se encuentra el código JavaScript. Dentro
de un documento HTML puede haber ninguno, uno o varios scripts de JavaScript. El uso de JavaScript es muy
habitual en la programación web. En este curso no entramos a explicar el lenguaje de programación 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 programación web te recomendamos que después del curso de HTML realices los cursos de
CSS y JavaScript de aprenderaprogramar.com.

¿QUÉ ES Y PARA QUÉ SIRVE CSS?

CSS son las siglas de “Cascading Style Sheets”, que se traduce como “Hojas de Estilo en cascada”. CSS es un
lenguaje que permite que en un documento separado de tus páginas web definas el estilo. Por estilo
entendemos aspecto de los enlaces, colores, tipos de letra, fondos, etc.
Es decir, haces tu web con un contenido, pero el diseño o presentación de ese contenido lo defines en un
documento externo, en una hoja CSS.

La ventaja de usar CSS es clara: al tener definido el estilo en un lugar aparte y diferenciado de los contenidos,
nosotros podemos cambiar la apariencia de una página web modificando únicamente la definición 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 información. CSS es usado para
formatear contenidos estructurados. Para que se entienda mejor, podemos ver las dos imágenes 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 páginas webs mostradas en las imágenes, sin
CSS el diseño de la web es poco atractivo, por no decir nulo. Por otra parte, sin necesidad de tocar en el
contenido, sólo añadiendo la hoja de estilos, conseguimos tener un diseño agradable y atractivo.

Ahora podemos preguntarnos: ¿para crear documentos HTML necesitamos CSS? La respuesta es que HTML y
CSS son dos cosas distintas, pero que sin embargo suelen ir muy ligadas y no se entienden la una sin la otra.
Supón que HTML fuera la estructura de un edificio y CSS algo que permite que el edificio sea agradable y
habitable: colores en las paredes, rótulos, decoración, etc. ¿Podríamos tener un edificio sin decoración?
Posiblemente sí, pero en la práctica 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 básico del programador web:
CSS desde cero” de aprenderaprogramar.com. Aquí sólo vamos a mostrar algunos ejemplos básicos para
hacernos una idea de para qué sirve y cómo se puede usar CSS: no te preocupes si no entiendes algunos
detalles de lo que expliquemos, considerálo una primera toma de contacto.

Para ver un ejemplo básico empezaremos por especificar atributos a un elemento con CSS creando lo que
llamaremos 'clases' (class en inglés) 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;
}

También 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 más conocidas de dar estilo a un documento son las siguientes:

1. Utilizando una hoja de estilo externa (un archivo con extensión .css) que estará vinculada a un documento
a través del elemento <link>, el cual debe ir situado en la sección <head>.

<html>
<head>
<title>CSS – aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="hoja_estilos.css" />
</head>
<body>
...
</body>
</html>
Donde hoja_estilos.css será el archivo donde hemos definido los estilos.

2. Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que
generalmente se situaría en la sección <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 través del atributo style que
admiten la mayoría de las etiquetas HTML. Sin embargo, con este tipo de definición 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 presentación, al mezclarse una cosa y otra.

<html>
<head>
<title>CSS – aprenderaprogramar.com</title>
</head>
<body>
<p style="color: red;">Párrafo en color rojo</p>
</body>
</html>
EJEMPLO

Escribe este código y guárdalo 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>

Comprueba los resultados.

A continuación establece otros colores, guarda el archivo y vuelve a visualizar la página.

Nosotros dentro de este curso no vamos a explicar CSS porque esta materia es muy amplia y será tratada en un
curso independiente. No obstante, sí hemos creído conveniente reflejar la forma en que HTML interacciona con
otras tecnologías o lenguajes hoy día para construir páginas web.
Puedes acceder al curso “Tutorial básico del programador web: CSS desde cero” desde la sección “Cursos” de
aprenderaprogramar.com (donde encontrarás todos los cursos) o usando el siguiente
link: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP.

Hasta ahora hemos generado documentos HTML escribiendo en un archivo de texto código HTML que
guardábamos como archivo con extensión .html. Hemos visto también que “embebido” en HTML puede ir código
Javascript y código CSS. Vamos a ver ahora una forma muy utilizada para generar webs HTML basada en el uso
del lenguaje de programación PHP.

En su momento indicamos que el flujo de información entre un ordenador en nuestra casa con conexión a
internet y un servidor era algo así:

La petición de una página web tendría como respuesta “código HTML” interpretable por el navegador instalado
en nuestro ordenador. Ahora bien, el código HTML obtenido como respuesta puede provenir de un archivo con
extensión .html alojado en el servidor, pero también puede ser generado por el servidor de otra manera. Esa
otra manera es la que mostramos en la siguiente imagen:
Este esquema es un poco más complicado y supone que no existe un archivo .html que contiene el código html
directamente, sino que existe un archivo .php con “cierto contenido” que el servidor se encarga de interpretar y
una vez interpretado envía código HTML a nuestro ordenador.

En ambos casos nuestro ordenador recibe código 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 código abierto muy popular, adecuado para desarrollo web y que puede ser incrustado en
HTML. Es popular porque un gran número de páginas y portales web están creados con PHP. Código 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 código PHP con código HTML, siguiendo unas reglas.
Nosotros en este curso no vamos a estudiar PHP. Si tienes interés 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, están 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 código de ejemplo que
iremos viendo, simplemente lee y trata de captar las ideas.

Los archivos con extensión PHP son archivos que se alojan en el servidor y que una vez invocados a través del
navegador (p.ej. http://www.aprenderaprogramar.com/index.php) dan lugar a que el servidor los procese y
devuelva código HTML (una página web) a nuestro ordenador.

El código PHP se introduce dentro de etiquetas <?php como apertura y ?> como cierre. Esto sería un ejemplo de
código PHP, que sería un texto creado con un editor como Notepad++ y guardado con extensión .php.

<?php
echo "Esto es código
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 código PHP intercalados.
Por lo tanto, podríamos crear código HTML y luego intercalar aquellos fragmentos necesarios de código PHP.
Otra forma de trabajar consiste en definir un documento completamente como código PHP donde se imprime
desde el propio código PHP el código HTML que necesitemos. Pondremos ejemplos para entender lo que hemos
indicado.

Por ejemplo, para el primero de los casos, veamos un código de ejemplo que pudiera ser un archivo como
ejemplo1.php. Vamos a definir código HTML donde vamos a intercalar algunos fragmentos en PHP. Ten en
cuenta que el archivo no se puede guardar con extensión html si contiene fragmentos de php, tendríamos que
guardarlo con extensión php.

<html>
<head>
<title>HTML con PHP – aprenderaprogramar.com</title>
</head>
<body>
Esto es una página HTML con código PHP incrustado.
<br />
<?php
echo "Esto es código PHP incrustado."
?>
</body>
</html>

Si solicitáramos a un servidor que nos muestre esta página, la visualizáramos en nuestro navegador y le
pidiéramos a éste que muestre el código fuente, el código generado es código HTML. Es decir, aunque en el
archivo ejemplo1.php exista código PHP, después de que el intérprete PHP haya procesado el código PHP de la
página todo lo que devuelve el servidor es código HTML. Si visualizáramos la página en sí, comprobaríamos que
no podemos distinguir qué texto ha sido creado como HTML y qué texto proviene de una instrucción echo
(instrucción para imprimir por pantalla) de PHP. ¿Por qué? Porque el intérprete PHP se encarga de transformar el
código PHP en HTML y eso es lo que podemos ver en nuestro navegador. En nuestro navegador no podemos ver
el código fuente PHP porque ese código no nos llega. Nos llega el código ya transformado en HTML.

Para el segundo de los casos vamos a suponer que el código se encuentra en un archivo llamado 'ejemplo2.php'.
En esta ocasión todo el contenido va a aparecer dentro de etiquetas de PHP como si fuera PHP y usaremos una
instrucción echo para indicarle al intérprete que devuelva como HTML todo el contenido dentro de esa
instrucción.

<?php echo "


<html>
<head> <title>HTML con PHP – aprenderaprogramar.com</title> </head>
<body> Esto es una página HTML generada con código PHP incrustado. </body>
</html>
";
?>

Si pedimos al navegador que nos muestre el código fuente, el resultado es igualmente código HTML: no veremos
código PHP. No obstante, en esta ocasión el código HTML lo hemos incrustado dentro de código PHP mediante
una instrucción echo.

Si visualizáramos la página 'ejemplo2.php' en nuestro navegador, el resultado obtenido sería que se muestra por
pantalla: “Esto es una página HTML generada con código PHP incrustado”. Podríamos preguntarnos: si la
instrucción echo es para imprimir por pantalla, ¿por qué no se muestra por pantalla <html> <head> … etc. etc.
? El motivo es que el intérprete PHP está preparado para considerar que todo código asimilable a HTML dentro
de una instrucción echo no debe ser mostrado por pantalla como si se tratara de texto, sino que debe ser
transformado en código HTML. Por este motivo la salida por pantalla no muestra las etiquetas. Si quisiéramos
mostrar ese contenido como texto tendríamos que hacer uso de “caracteres de escape” que no vamos a explicar
ahora.

¿Qué opción 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 válidas, por tanto
los desarrolladores web hacen uso de ambas posibilidades. Ahora bien, nosotros recomendaremos al menos
inicialmente usar la definición de documentos como código HTML donde incrustaremos el código PHP. Los
motivos por los que recomendamos esto son:

- Mayor claridad, lo que facilita la interpretación de código a personas que tengan que revisarlo o leerlo.

- En muchos editores se diferencian por colores los tipos de código. Si tenemos código HTML separado del
código PHP la diferenciación será clara y útil. En otro caso, no podremos diferenciar un código de otro.

- Es el estándar más ampliamente usado por los programadores y desarrolladores web, lo que no quiere decir
que en algunos casos no se escriba código de la otra manera.

MÁS ALLÁ DE HTML

Para trabajar en creación y programación 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 básicos
bien asentados de HTML es lógico pensar en progresar como desarrolladores o programadores web. Para ello
necesitaremos aprender un lenguaje de programación que nos permita realizar cosas que HTML no permite,
como la interacción con bases de datos o realizar cálculos o procesos que requieren de programación. HTML es
un lenguaje muy limitado y no es suficiente con saber HTML para poder crear páginas web atractivas hoy día.
Las páginas web se suelen basar en HTML combinado con otros lenguajes como Javascript, CSS y un lenguaje de
programación que interacciona con bases de datos, que puede ser PHP u otro.

Existen distintos lenguajes de programación web que nos permitirían progresar como programadores, como PHP,
JSP, ó ASP.NET entre otros. PHP es uno de los lenguajes más populares, es gratuito, muy potente y usado por
millones de servidores en todo el mundo. En este curso no vamos a profundizar en PHP ni en ninguno de los
otros lenguajes, pero dada la estrecha relación de PHP con HTML y su interés para personas que quieran seguir
progresando como desarrolladores web, hemos creído de interés realizar una introducción a este lenguaje.

La realidad es que la programación web requiere el conocimiento de diferentes lenguajes. En las grandes
empresas, suelen existir especialistas para cada una de las ramas de la programación web (por ejemplo
especialistas en HTML, en JavaScript, en CSS, en lenguajes como PHP u otros, etc.).

Si tienes interés en saber cuáles son los lenguajes y conocimientos que se utilizan hoy en día en los desarrollos
web, dónde encontrar cursos relacionados con esos conocimientos y cuál podría ser un plan formativo para un
programador web, te recomendamos que leas este interesante
artículo: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=702:ique-es-y-que-
estudiar-para-ser-programador-web-itinerario-de-formacion-plan-de-estudios-o-de-carrera&catid=39:orientacion-
academica&Itemid=189