tutorial básico del programador web: html desde cero.

 TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO. Objetivos HTML es el lenguaje más básico para la creación de páginas web. Es usado para definir la
estructutra y el contenido en forma de texto y complementar el texto de páginas web con
imágenes, tablas y formularios. HTML se escribe en forma de «etiquetas», rodeadas por
corchetes angulares (<, >). Este curso permite aprender los fundamentos para la creación
de páginas web usando HTML.
Destinatarios Cualquier persona con interés en aprender fundamentos que le permitan crear páginas web
usando HTML. Para realizar este curso, debes tener conocimientos básicos de ofimática: saber
copiar, pegar, mover y abrir archivos.
Contenidos 








INTRODUCCIÓN A HTML. QUÉ ES Y PARA QUÉ SIRVE HTML.
INTERNET Y CÓMO SE TRANSMITE LA INFORMACIÓN. CLIENTE-SERVIDOR-NAVEGADOR.
ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. HEAD, BODY. METATAGS BÁSICOS EN HTML.
ETIQUETAS HTML BÁSICAS: FORMATO TEXTO, IMÁGENES, ENCABEZADOS, PÁRRAFO, SALTOS
DE LÍNEA, SEPARADORES Y COMENTARIOS.
HIPERVÍNCULOS EN HTML.
LISTAS EN HTML.
TABLAS EN HTML.
FORMULARIOS EN HTML. MÉTODOS DE ENVÍO: GET Y POST. CAMPOS DE TEXTO Y BOTONES.
CREACIÓN DE UN PORTAL BÁSICO UTILIZANDO HTML.
Duración 90 horas de dedicación efectiva, incluyendo lecturas, estudio y ejercicios.
Dirección, modalidades y certificados El curso está dirigido por Enrique González Gutiérrez, responsable del Departamento
Técnico del portal web aprenderaprogramar.com. Se oferta bajo la modalidad web
(gratuito).
Para más información: [email protected]
C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K
Indice del curso “Tutorial básico programador web: HTML desde cero”.
INDICE DEL CURSO
1.
INTRODUCCIÓN A HTML
1.1.
1.2.
1.3.
1.4.
1.5.
Introducción: internet y cómo se transmite la información.
¿Qué es y para qué sirve HTML?
¿Es HTML un lenguaje de programación?
¿Cuáles son las versiones de HTML?
¿Qué necesito para escribir código HTML y crear páginas web?
2.
PREPARANDO EL ENTORNO DE DESARROLLO
2.1.
2.2.
2.3.
Descargar e instalar Notepad++.
Configuración básica de Notepad++ para crear páginas HTML.
Descargar e instalar el navegador Google Chrome.
3.
CONCEPTOS BÁSICOS DE HTML
3.1.
3.2.
Estructura básica de una página HTML. HEAD, BODY.
Etiquetas HTML básicas: formato texto, imágenes, encabezados, párrafo, saltos de línea,
separadores y comentarios.
Hipervínculos en HTML.
Listas en HTML.
Tablas en HTML.
Formularios en HTML. Métodos de envío: get y post.
Capas en HTML. Etiquetas DIV y SPAN. Maquetación de estructura de páginas web.
3.3.
3.4.
3.5.
3.6.
3.7.
Para más información: [email protected]
C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K
Indice del curso “Tutorial básico programador web: HTML desde cero”.
4.
CREACIÓN DE UN PORTAL BÁSICO
4.1.
4.2.
4.3.
Página principal. Cabecera, menú, cuerpo y pié.
Formulario de datos personales.
Permitir selección de archivos para envío a través de un formulario.
5.
SUBIR NUESTRA WEB A UN SERVIDOR Y HACERLA ACCESIBLE EN INTERNET
5.1.
5.2.
Creación de una cuenta en hosting gratuito y acceso vía cPanel.
Subir nuestra página a un servidor web y hacerla accesible en internet.
6.
CONEXIÓN DE HTML CON OTROS LENGUAJES
6.1.
6.2.
6.3
¿Qué es y para qué sirve JavaScript? Ejemplos básicos.
¿Qué es y para qué sirve CSS? Ejemplos básicos.
¿Qué es y para qué sirve PHP? Ejemplos básicos.
Próxima entrega: CU00702B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
Para más información: [email protected]
C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K
Orientación curso “Tutorial básico programador web: HTML desde cero”
ORIENTACIÓN SOBRE EL “TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO”
HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web.
HTML no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje
de programación coloquialmente. Es un lenguaje descriptivo, formado por una serie de etiquetas que el
navegador interpretará de una u otra forma para mostrar distintos contenidos por pantalla. Este curso,
que estamos comenzando, va dirigido a aquellas personas que quieran adquirir unos fundamentos
básicos para crear páginas web con vistas a poder desarrollar en el futuro páginas web atractivas y de
cierta complejidad. No vamos a desarrollar un manual de referencia de HTML, sino un curso básico paso
a paso. No vamos a contemplar todos los aspectos del lenguaje HTML, sino aquellos que consideramos
básicos desde el punto de vista didáctico, con vistas a que posteriormente la persona que lo desee
amplíe sus conocimientos. Nuestro objetivo es ser claros, sencillos y breves, y para eso tenemos que
centrarnos en determinadas cuestiones de HTML y dejar de lado otras.
Como conocimientos previos para iniciar este curso recomendamos (seguir la recomendación o no
queda a criterio del alumno y/o profesor que vayan a seguir el curso) los siguientes: Ofimática básica
(saber copiar, pegar, mover y abrir archivos).
Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender HTML requiere tiempo y esfuerzo. Para hacer ese recorrido más llevadero, te recomendamos
que utilices los foros de aprenderaprogramar.com, herramienta a disposición de todos los usuarios de
la web (http://www.aprenderaprogramar.com/foros/), y que te servirá para consultar dudas y recabar
orientación sobre cómo enfrentarte a los contenidos. Entre los miembros del portal web y otros
usuarios, trataremos de ayudarte para que el estudio te sea más llevadero y seas capaz de adquirir los
conocimientos necesarios y avanzar como programador.
El tiempo necesario (orientativamente) para completar el curso incluyendo prácticas con ordenador,
suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 90 horas de
dedicación efectiva o aproximadamente un mes y medio con una dedicación de 3 horas diarias de lunes
a viernes. Aprender a crear páginas web requiere dedicación y esfuerzo.
El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene
algunas indicaciones específicas para usuarios de Windows, pero también puede ser utilizado en otros
entornos (Linux, Macintosh, etc.).
Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultará de
gran utilidad.
Próxima entrega: CU00703B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Introducción: internet y cómo se transmite la información.
INTRODUCCIÓN: INTERNET Y CÓMO SE TRANSMITE LA INFORMACIÓN.
Vamos a explicar qué ocurre cuando escribimos una dirección web en nuestro navegador (el programa
que usamos para ver páginas web), desde que tecleamos la dirección hasta que vemos la página
solicitada
en
nuestro
monitor.
Por
ejemplo,
cuando
escribimos
la
dirección
http://www.aprenderaprogramar.com
Primero escribimos la dirección o URL del sitio web en nuestro navegador. A continuación y sin que
nosotros nos demos cuenta, nuestro navegador solicita la página web al servidor que alberga el sitio
aprenderaprogramar.com. Acto seguido, el servidor envía de vuelta los datos a nuestro ordenador a
través de Internet. Finalmente, nuestro navegador interpretará los datos, mostrando el resultado en la
pantalla de nuestro ordenador.
En el gráfico anterior podemos ver cómo desde el cliente (nuestro ordenador en casa) se envía una
petición al servidor y cómo éste devuelve una respuesta con los datos. Cuando decimos http nos
referimos a un protocolo de transmisión de datos: esto simplemente son una serie de reglas que usan
los ordenadores para comunicarse entre sí a través de internet. Sobre este protocolo no nos hace falta
comentar nada más, no vamos a estudiarlo porque no nos resulta necesario para el objetivo del curso.
A partir de aquí, el navegador que estemos utilizando interpretará esos datos y los mostrará en la
pantalla. Es por ello, que podemos obtener visualizaciones distintas para cada navegador, porque son
éstos los que interpretan los datos obtenidos que son siempre los mismos para una misma petición de
página web. Por ejemplo, podemos usar como navegador Internet Explorer ó Firefox, y según usemos
uno u otro obtener resultados distintos porque cada navegador interpreta la información de una
manera distinta.
© aprenderaprogramar.com, 2006-2029
Introducción: internet y cómo se transmite la información.
Podemos decir, por explicarlo de forma sencilla, que el navegador es aquello que transforma los datos
obtenidos para que una persona pueda visualizarlos en su monitor.
NAVEGADORES MÁS USADOS
MOZILLA
FIREFOX
INTERNET
EXPLORER
Mozilla Firefox es un navegador web libre y de código abierto,
desarrollado por la Fundación Mozilla que es una organización
sin ánimo de lucro dedicada a la creación y difusión de
software libre.
Este navegador es uno de los más usados por los
programadores web ya que cumple la mayoría de los
estándares web conocidos y porque proporciona
herramientas muy útiles para el desarrollo y corrección del
código informático que hay detrás de las páginas web.
Conocido comúnmente como IE, es un navegador web
desarrollado por Microsoft para el sistema operativo
Microsoft Windows desde 1995.
Este navegador es uno de los más usados por los usuarios ya
que viene por defecto en el sistema operativo Windows.
SAFARI
EXPLORER
Safari es un navegador web de código cerrado desarrollado
por Apple (fabricante de los famosos ordenadores Macintosh,
móviles iPhone, etc.). Está disponible para ordenadores o
dispositivos móviles que usan el sistema operativo de
Macintosh y también para Microsoft Windows.
Es el navegador que nos encontraremos en cualquier
ordenador de Apple.
GOOGLE
CHROME
Google Chrome es un navegador web desarrollado por
Google. Nació en el año 2008, lo que lo convierte en uno de
los navegadores más jóvenes del mercado. Es uno de los
navegadores más rápidos y ligeros que existe. También es
muy usado por los programadores ya que cumple los
estándares web e incluye herramientas interesantes.
Próxima entrega: CU00704B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
¿Qué es y para qué sirve HTML?
¿QUÉ ES Y PARA QUÉ SIRVE HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una
seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas
para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas,
etc.
Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido.
Un ejemplo sencillo de código HTML podría ser:
<html>
<body>
<p>Esto es un párrafo. Bienvenidos a esta página web.</p>
</body>
</html>
Dicho ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada una de las etiquetas
debe acabar con su homóloga de cierre. En este caso la etiqueta <html> debe cerrarse con </html>, la
etiqueta <body> con </body> y la etiqueta <p> con </p>.
Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro que por cada
etiqueta que abramos, deberemos incluir la correspondiente etiqueta de cierre. Así conseguiremos un
código HTML bien formado y que los navegadores puedan interpretar sin ambigüedad.
Este sencillo ejemplo mostraría por pantalla lo siguiente.
© aprenderaprogramar.com, 2006-2029
¿Qué es y para qué sirve HTML?
¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría
de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras.
Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una
página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir
páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para
que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.
ALGO DE HISTORIA SOBRE EL LENGUAJE MÁS IMPORTANTE DE INTERNET
HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por
primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que
mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan
en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los
años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la
historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los
navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y
especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML
y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué
no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y
comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una
versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos
hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos
cambios que tienen lugar en el ámbito de los desarrollos web.
Tim Berners-Lee
Próxima entrega: CU00705B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.
¿ES HTML UN LENGUAJE DE PROGRAMACIÓN?
En principio diremos que no, aunque de forma coloquial muchas veces se oigan referencias a HTML
como si fuera un lenguaje de programación. HTML es un lenguaje de etiquetas. Estas etiquetas (tag)
HTML comunican al navegador cual es la información a mostrar por pantalla, además del formato de
dicha información. Es por ello que no puede definirse como un lenguaje de programación, sino como un
sistema de etiquetas. Veámoslo con un ejemplo.
EJEMPLO PARA ENTENDER EL CONCEPTO DE LENGUAJE DE ETIQUETAS FRENTE A LENGUAJE DE
PROGRAMACIÓN
Si analizamos el siguiente algoritmo realizado el lenguaje de programación Java, podremos observar
cómo una cosa tan simple como es ejecutar un proceso para escribir los números del 1 al 10, no es
posible en HTML. Esto es debido a que HTML no es un lenguaje de programación y no dispone de las
sentencias básicas de la programación, como instrucciones para repetir un proceso o, elegir si realizar
un proceso u otro en función de una circunstancia que se esté produciendo.
Lenguaje
Java
Código
public class MuestraDelUnoAlDiez {
public static void main(String[] args) {
for(int i=1;i<=10;i++) {
System.out.println(i);
}
}
}
Salida por pantalla
1
2
3
4
5
6
7
8
9
10
<html>
<body>
HTML
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
1
2
3
4
5
6
7
8
9
10
¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.
Como podemos observar, en el ejemplo anterior, HTML no tiene la capacidad de contar y debemos
escribir nosotros todo lo que queremos que salga por pantalla. Sin embargo, vemos como en Java
podemos indicar que cuente del 1 al 10 y que lo muestre por pantalla sin escribir completamente lo que
queremos visualizar.
Clásicamente se dice que los lenguajes de programación incluyen tres capacidades básicas de generar
flujos de procesos: la secuencial (secuencias de instrucciones), la condicional (capacidad para tomar
decisiones o ejecutar un proceso u otro en función del valor de uno o varios parámetros) y la de
repetición (capacidad para repetir un proceso un cierto número de veces). Los lenguajes clásicos como
C, C++, Java, C#, Visual Basic, Fortran, etc. cuentan con estas capacidades. HTML no cuenta con ellas, no
porque sea mejor ni peor sino porque es una cosa distinta.
En resumen, podríamos decir que HTML no es un lenguaje de programación, es un lenguaje de
maquetación web o lenguaje de etiquetas destinado a crear estructuras de documentos HTML.
Próxima entrega: CU00706B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.
¿CUÁLES SON LAS VERSIONES DE HTML?
El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rápido crecimiento de la
web, surgió la necesidad de crear un estándar para que tanto los programadores como los navegadores
pudieran basarse en unas mismas normas para escribir HTML. Cada versión de HTML establece unas
normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir.
Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0 y el HTML 4.01, aunque
actualmente se trabaja en el HTML 5. El HTLM 5 ya está empezando a ser usado aunque todavía no es
una especificación oficial. El XHTML, una forma más avanzada del HTML que se suponía iba a sustituir a
éste, va a quedar integrado dentro del HTML 5.
HTML 2.0
En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es
el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como
estándar. HTML 2.0 no soportaba tablas.
Se simplificaba al máximo la estructura del documento para agilizar su edición,
donde la declaración explícita de los elementos body, html y head es opcional.
HTML 3.2
La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de
HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó
los últimos avances de las páginas web desarrolladas hasta 1996, como applets
de Java y texto que fluye alrededor de las imágenes.
HTML 4.01
La última especificación oficial de HTML se publicó en diciembre de 1999 y se
denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en
el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las
empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de
interés del W3C en HTML y decidieron organizarse en una nueva asociación
llamada WHATWG (Web Hypertext Application Technology Working Group)
que comenzó el desarrollo del HTML 5, cuyo primer borrador oficial se publicó
en enero de 2008. Debido a la fuerza de las empresas que forman el grupo
WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007
el W3C decidió retomar la actividad estandarizadora de HTML, y actualmente
W3C está trabajando para el lanzamiento del estándar HTML 5.0, dentro del
cual ha decidido integrar el XHTML.
HTML 5.0, 5.1 y 5.2
El consorcio internacional W3C marcó las siguientes fechas para liberación de
los estándares de especificación: 2014/2015 para HTML 5.0, 2016 para HTML
5.1 y 2019 para HTML 5.2
© aprenderaprogramar.com, 2006-2029
¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.
Hasta el momento la versión de HTML más utilizada ha venido siendo la 4.01. Esta versión fue definida
por la W3C (Comité Internacional que define los estándares web) hace varios años. Actualmente ya está
disponible la nueva versión de HTML, denominada HTML 5. Esta versión ya se está usando de modo
experimental y se espera que se imponga como estándar en los próximos años.
Además de cada versión, cada una tiene variantes (digamos que “distintas formas”). Cuando escribimos
un documento HTML debemos indicar en una línea inicial qué versión y variante es la que estamos
usando de forma que cualquier persona que lea ese documento HTML sepa qué versión y variante se ha
empleado. Las variantes del HTML 4.01 son:
HTML 4.01
Strict
En este tipo de documentos podemos usar etiquetas HTML 4.01, pero no se aceptan etiquetas
obsoletas, es decir, etiquetas propias de versiones más antiguas. Es la versión que si usamos en
teoría nos debería dar un resultado óptimo en los navegadores más modernos. Esto no siempre
es así, como explicaremos un poco más adelante.
HTML 4.01
Transitional
En este tipo de documentos se pueden usar todas las etiquetas de todas las versiones de HTML.
Usar esta variante de HTML plantea el interrogante de si es correcto permitir el uso de etiquetas
obsoletas que podrían dejar de funcionar en las proximas versiones de los navegadores. Sin
embargo, este es el estándar más usado, porque combina la posibilidad de usar etiquetas más
antiguas y etiquetas más modernas, de forma que podamos aspirar a una mejor visualización en
la mayor parte de los navegadores.
HTML 4.01
Frameset
Este tipo de documentos tiene soporte para frames. Los frames son unos marcos a modo de
pequeñas subventanas dentro de una misma página web que se usaban mucho hace unos años
pero que hoy en día se usan cada vez menos. Este tipo de HTML podemos considerarlo
anticuado, porque hay otras formas de diseñar páginas web sin frames más modernas y útiles
que nos permiten obtener el mismo resultado de forma más eficiente.
En la figura podemos ver cómo el ser más estrictos supone que tengamos que usar un menor número
de etiquetas.
© aprenderaprogramar.com, 2006-2029
¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.
¿CUÁL ELIJO, Y CÓMO?
No te preocupes demasiado por utilizar una versión “correcta y concreta” sino por crear páginas web
que se vean bien. Para ello debes aprender cómo se construye y cuál es la lógica del HTML, más que
una versión concreta de éste. Ten en cuenta que hay diversidad de versiones y que no todos los
navegadores se ciñen a los estándares, con lo cual no tiene demasiado sentido preocuparse por ceñirse
a una versión. Te puede resultar un poco extraño, pero cuando adquieras experiencia en desarrollos
web comprobarás que las normas para los desarrollos web no están 100 % claras.
Si ya sabías HTML pero nunca has separado contenido y diseño, o todos estos estándares te suenan a
chino, usa el HTML normal, en concreto la versión 4.01, que es la última. Elige la rama Strict si necesitas
cumplir el estándar Strict por algún motivo (por ejemplo porque te lo pida un cliente así
específicamente). Usar la variante Strict puede resultar un poco más complicado porque tenemos más
limitaciones. Por ello nosotros en este curso usaremos el 4.01 Transitional que es la variante más
utilizada y podemos decir que intermedia: ni demasiadas restricciones ni demasiada libertad. El XHTML
es un lenguaje que va a quedar integrado dentro de HTML 5 y que no estudiaremos en este curso.
En un archivo HTML debemos indicar qué versión y variante estamos usando. Para indicar ésto hay que
poner una línea al principio de la página web (del archivo donde está el contenido). No es una etiqueta,
por tanto es algo rara y no hay que cerrarla ni ponerla en minúsculas. Eso sí, debemos ponerla en todos
nuestros documentos.
Para HTML 4.01 Strict escribiríamos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Para HTML 4.01 Transitional (recomendado) escribiríamos:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/loose.dtd">
HTML
4.01
Transitional//EN"
En este curso usaremos HTML 4.01 Transitional para conseguir documentos HTML 4.01.
EJEMPLO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>Esto es una prueba de página HTML 4.01 Transitional</p>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.
Vista en el navegador Google Chrome que obtendríamos para el documento HTML anterior.
Con este sencillo ejemplo creamos una pagina HTML 4.01 Transitional. Para visualizar esta simple
página web procedemos de la siguiente manera: creamos un archivo con el editor de texto que
tengamos a nuestra disposición, en nuestro caso utilizaremos el bloc de notas de Windows pero puede
ser cualquier editor de texto.
Para abrirlo nos vamos a Inicio -> Todos los programas -> Accesorios -> Bloc de notas:
Escribimos en el bloc de notas el código del ejemplo anterior como un simple texto.
© aprenderaprogramar.com, 2006-2029
¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.
A continuación en el menú Archivo elegimos la opción Guardar como… e indicamos que queremos
guardar el archivo en el directorio raíz de la unidad C con el nombre ejemplo.html
Una vez realizado todos estos pasos, abrimos el archivo creado haciendo doble click sobre él desde el
explorador de archivos de Windows. Si tenemos un navegador web instalado se nos abrirá
automáticamente la página web que hemos creado en el ejemplo.
No te preocupes por no estudiar HTML 5 ahora, todo lo que aprendas sobre HTML te servirá cuando
estudies HTML 5.
También es normal que no comprendas bien el significado de todos los términos en el archivo HTML,
pues los iremos explicando poco a poco. De momento, nuestro objetivo es irnos familiarizando con los
distintos aspectos que iremos estudiando.
Próxima entrega: CU00707B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
¿Qué necesito para escribir código HTML y crear páginas web?
¿QUÉ NECESITO PARA ESCRIBIR CÓDIGO HTML Y CREAR PÁGINAS WEB?
Los requisitos principales y fundamentales, para escribir código HTML y crear páginas web, son
básicamente dos: saber HTML (esto lo conseguirás siguiendo este curso) y un editor de texto (nosotros
utilizaremos el Notepad++, aunque se pueden usar otros editores o programas). Hay muchos
profesionales que crean sus páginas en Dreamweaver, usando Flash u otros programas o tecnologías.
Esta forma de crear páginas web tiene a favor la fácil creación de éstas pero, si quieres hacer páginas
web de calidad y tener un control total sobre el código generado, lo primero es saber HTML sin más.
Para crear páginas web obviamente necesitas un ordenador y un navegador (Explorer, Firefox, Chrome
o similar) instalado. ¿Necesitamos conexión a internet para crear páginas web? La respuesta es que no:
podemos crear nuestras páginas en nuestro propio ordenador y a posteriori subirlas a un servidor
remoto para que estén accesibles en internet desde cualquier parte del mundo. En este curso vamos a
trabajar inicialmente en local (es decir, en nuestro propio ordenador sin necesidad de conexión a
internet), y más adelante veremos cómo subir una web a un servidor. También podríamos generar una
página web directamente sobre un servidor, pero por motivos de didáctica y sencillez consideramos
preferible empezar trabajando en local. Una vez tengas conocimientos más avanzados, podrás hacerlo
como te resulte más cómodo.
Ahora indicaremos unos sencillos consejos que deberías tener en cuenta antes de crear tus páginas
web.
•
Tomar ideas.
Ojo, tomar ideas no es copiar contenidos con derechos de propiedad intelectual, no debes
reproducir el trabajo de otros sin valorar si estás vulnerando el derecho de propiedad
intelectual. Sin embargo, es importante inspirarte en otros sitios, buscar contenidos que te
puedan servir, combinaciones de colores que se vean bien, y diseños organizados que te
puedan ser útiles.
•
No uses toda la gama de colores en tu página web.
No crees una página web que parezca un arcoiris: inicialmente te puede parecer curiosa, pero
un usuario que visite tu página web, se sentirá molesto con demasiados colores.
Por ejemplo, es preferible utilizar el clásico fondo blanco y texto negro o azul, que el fondo rosa
con puntos morados y el texto verde fosforescente. Cuida que los colores de tu página tengan
una buena combinación, y que hagan fácil la lectura.
© aprenderaprogramar.com, 2006-2029
¿Qué necesito para escribir código HTML y crear páginas web?
Ejemplo mal diseño, colores e imágenes:
•
Se ve mejor si cabe en la pantalla.
Procura que tu diseño esté basado en el tamaño de la pantalla, no busques escribir una novela
completa en la página inicial de tu web. Es preferible que las páginas no tengan scroll, o que si
lo tienen éste no sea demasiado largo.
•
Administra tus imágenes.
Tu página se verá más atractiva si usas imágenes. No obstante, debes usarlas de una forma
moderada porque un excesivo número de imágenes puede ser también perjudicial si no
permite una buena lectura del contenido.
•
Haz que tu sitio sea fácil de navegar.
Por muy obvia que parezca esta recomendación, debes dividir la información en diferentes
secciones y ubicar los enlaces a las mismas donde la gente espere encontrarlos.
Hay algunos sitios donde sólo es posible desplazarse hacia delante o hacia atrás. En realidad,
eso no es "navegar". Es necesario que el visitante pueda elegir en todo momento qué sección
quiere visitar y en qué orden: por ejemplo tener un menú es algo generalmente aconsejable.
No te olvides de incluir en todas las páginas un enlace a la página de inicio (la primera página)
para facilitar la navegación.
© aprenderaprogramar.com, 2006-2029
¿Qué necesito para escribir código HTML y crear páginas web?
Ejemplo de menú:
También es interesante incluir el logotipo de tu sitio en todas las páginas, porque no siempre el
visitante ingresa al sitio por la página de inicio; si proviene del enlace de un buscador, es
probable que ingrese por cualquier sección, en ese caso, el logotipo en todas las páginas ayuda
a ubicar al posible visitante donde está.
•
Mantén tu sitio actualizado.
Nada es más desagradable que volver a un sitio tiempo después de una visita y no encontrar
ningún cambio. Realizar cambios frecuentes crea en los visitantes la idea de que el contenido
es valioso y vale la pena darse una vueltecita a menudo.
•
Prográmate un esquema de actualización y cúmplelo.
Renueva tus promociones, agrega más información sobre nuevos productos, servicios o
artículos, incluye testimonios de clientes o usuarios satisfechos, usa tu imaginación.
También puedes incluir la fecha de la última actualización en un lugar visible de tu página de
inicio, o bien mantener un apartado donde se vea que los contenidos están actualizados.
•
Promociona tu web: on-line y off-line.
Envía tu sitio a los principales motores de búsqueda y directorios (google, yahoo, etc.). Dedica
tiempo a realizar un trabajo a conciencia, el mismo se justificará plenamente con un mejor
posicionamiento en los buscadores.
Después de todo ¿de qué te sirve tener un sitio en Internet si nadie lo encuentra?
En este curso aprenderemos a utilizar palabras claves (keywords) que describan tu negocio lo
mejor posible. Aquí conviene situarse del lado de quien busca, ¿qué keywords utilizará tu
posible cliente para buscar un sitio de tus características? Haz una lista, pregunta a amigos/as y
conocidos.
© aprenderaprogramar.com, 2006-2029
¿Qué necesito para escribir código HTML y crear páginas web?
No te olvides de incluir tu dirección (http://www.tusitio.com) en toda papelería y comunicación
que emitas: tarjeta comercial, papelería, facturas, remitos, recibos, folletos, faxes, bolsas,
publicidad, etc.
•
Información para tus clientes.
Incluye un enlace al pié de cada página para que puedan comunicarse contigo. En este curso
aprenderemos cómo hacerlo. El agregar información con la dirección física, teléfono completo
(con el código del país), fax, etc, ayuda a crear confianza. Después de todo tú y tu web existen
en el "mundo real" no son un ente imaginario perdidos en el ciberespacio.
Cuando te sea posible, incluye un campo donde tus usuarios puedan ingresar el email para
recibir un boletín o newsletter con novedades sobre tus productos, esto ayuda a crear
confianza y lealtad a tu página. Otra opción es la suscripción mediante RSS ó Atom, que son
servicios para poder recibir las novedades que se van publicando en tu página.
Recuerda que ahora puedes utilizar las redes sociales para promocionar tu web o empresa
online: Facebook, YouTube, Slideshare, Linkedin, etc.
Todas estas ideas pueden ayudarte a tener un sitio web de calidad y bien posicionado en los
buscadores. No tienes por qué cumplirlos todos, ni son todos los puntos a tener en cuenta para que tu
sitio esté el primero en los buscadores, pero pueden resultar útiles. No te preocupes si ahora algunos
conceptos no te quedan claros porque a medida que trabajes en desarrollos web irás adquiriendo una
visión más completa.
Próxima entrega: CU00708B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++.
Vamos a comenzar a preparar el entorno de desarrollo para poder crear páginas web. Lo primero que
debemos hacer es descargar el editor de texto Notepad++ e instalarlo. Para ello nos vamos a ir a la
dirección siguiente: http://notepad-plus-plus.org
Cuando la página haya terminado de cargar, hacemos click en la sección download del menú. Localiza el
enlace, ten en cuenta que el aspecto de la página puede cambiar cada pocos meses.
En la página web que nos aparecerá, descargamos la versión “Installer” actual, por ejemplo Notepad++
v6.9.6.2 Installer. El archivo tendrá un nombre similar a npp.6.6.9.Installer.exe.
© aprenderaprogramar.com, 2006-2029
Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
Una vez descargado el archivo, lo ejecutamos (click sobre el archivo, botón derecho del ratón, ejecutar
como administrador) para instalarlo en nuestro ordenador. Si no sabes cómo instalar haz simplemente
doble click sobre el archivo. El proceso de instalación es muy simple y no entraremos a explicarlo con
más detalle.
Cuando tengamos instalado el programa, ya dispondremos del editor de texto Notepad++, con el que
podremos abrir y editar cualquier fichero HTML. Podremos acceder al programa desde Inicio 
Programas  Notepad++ ó desde el icono de acceso directo en el escritorio si se ha creado.
EJEMPLO: COMENZAR A USAR NOTEPAD++
Desde el explorador de archivos de Windows, creamos una carpeta llamada curso_html_apr2 en la
unidad C.
Una vez creada la carpeta, entramos en ella. Abrimos Notepad++ y pulsamos en Archivo -- > Guardar.
Como nombre de archivo escibimos CU00708B.html (este nombre de archivo es solo un ejemplo,
puedes ponerle el que tú quieras). Paso seguido, cierra el archivo. Para editar este archivo con el
programa Notepad++, podemos hacer dos cosas. Bien abrir Notepad++ y elegir Archivo -- > Abrir y
seleccionar el archivo, o bien hacemos lo siguiente:
Clickamos sobre el archivo con el botón derecho del ratón y se mostrará un menu similar a éste (Nota:
en algunos casos aparecen conflictos entre la versión de Notepad++ y la versión de Windows y este
menú contextual no se muestra. En este caso, tendremos que abrir primero Notepad++ y luego la
opción Abrir del menú Archivo.)
© aprenderaprogramar.com, 2006-2029
Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
En el menú desplegado seleccionamos “Edit with Notepad++”.
De una forma u otra, habremos abierto el archivo html con nuestro editor Notepad++.
•
Ahora escribimos el siguiente código HTML y guardamos el archivo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>Esto es una prueba de página HTML 4.01 Transitional</p>
<p>Bienvenidos a aprenderaprogramar.com</p>
</body>
</html>
•
Una vez realizados los pasos anteriores hacemos doble click sobre el archivo creado y se nos
abrirá una pantalla similar a la siguiente, donde podemos ver el resultado obtenido en nuestro
navegador.
Vista en el navegador Google Chrome
© aprenderaprogramar.com, 2006-2029
Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
Si has seguido paso a paso todo lo que hemos expuesto y has llegado a visualizar en pantalla el texto, es
que has completado correctamente la instalación de Notepad++, que es el editor que vamos a usar
durante el curso. Si no has podido instalarlo o tienes problemas para usarlo, revisa las instrucciones y
comprueba que las hayas seguido correctamente, consulta la ayuda de Notepad++ ó consulta en los
foros de aprenderaprogramar.com para obtener ayuda.
Próxima entrega: CU00709B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Configuración básica de Notepad++ para crear páginas HTML.
CONFIGURACIÓN BÁSICA DE NOTEPAD++ PARA CREAR PÁGINAS HTML.
Antes de poder comenzar a crear páginas HTML, necesitaremos realizar una configuración básica de
nuestro entorno de desarrollo. En nuestro caso, la configuración será bastante simple y consistirá en
elegir la codificación con la que guardaremos nuestros ficheros HTML y seleccionar el lenguaje con el
que vamos a trabajar.
Lo primero que vamos a hacer es abrir el programa Notepad++. Para esto, nos vamos a Inicio 
Programas  Notepad++  Notepad++. Después se abrira el programa, mostrando una pantalla similar
a la siguiente.
Para seleccionar la codificación con la que trabajaremos durante todo el curso, en la pestaña Formato,
clickamos sobre Codificar en UTF-8 sin BOM, de forma similar a como se muestra en la imagen. Cuando
edites archivos comprueba siempre que estás trabajando con esta codificación.
Ahora tendremos que indicar que vamos a utilizar el lenguaje de etiquetas HTML. Para ello, en la
pestaña lenguaje abrimos H y seleccionamos HTML de entre todas las opciones posibles. Sería algo
similar a lo que se muestra en la imagen siguiente.
Ya tenemos todo listo para poder empezar a crear nuestras páginas HTML.
© aprenderaprogramar.com, 2006-2029
Configuración básica de Notepad++ para crear páginas HTML.
AUTOCOMPLETAR. UNA VENTAJA DE NOTEPAD++
Para facilitar la escritura de código Notepad++ cuenta con una opción de autocompletar, la cual se
activa en la pestaña Configurar -- > Preferencias. En la ventana que nos aparecerá, tenemos que buscar
la opción Autocompletar (autocompletion). Esta opción puede estar dentro de la pestaña u opción
“Copia de seguridad/Autocompletar”, o en la opción “Autocompletar”, según la versión de Notepad++
que estemos usando. Debemos activar la casilla “Habilitar autocompletar en cada entrada” (Enable
autocompletion on each input) para funciones y palabras (function and word completion). También
activaremos “Pistas para los parámetros de la función” (Function parameters hint on input).
Ten en cuenta que la situación de los menús y opciones puede variar de una versión a otra de
Notepad++, por lo que no siempre encontrarás estas opciones en el mismo sitio que las estamos
describiendo.
AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE NOTEPAD++
Para activar el autocerrado inteligente de etiquetas HTML, en menú superior seleccionamos TextFX 
TextFX Settigns  Autoclose XHTML/XML tag.
En algunas versiones de Notepad++ no aparece TextFX en el menú superior. En este caso, debemos;
© aprenderaprogramar.com, 2006-2029
Configuración básica de Notepad++ para crear páginas HTML.
a) En el menú Configurar -- > Preferencias. En la ventana que nos aparecerá, tenemos que buscar la
opción Autocompletar (autocompletion) como hicimos anteriormente y marcar la opción “html/xml
close tag”
b) O bien instalar el plugin TextFX Characters accediendo a Plugins, elegir TextFX Characters y pulsar
Install. Una vez instalado el plugin, activar Autoclose XHTML/XML tag.
OTRAS VENTAJAS DE NOTEPAD++
Quizás te preguntes por qué hemos elegido Notepad++ para este curso. La respuesta es que tiene
diversas ventajas, por ejemplo:
-
Consume pocos recursos del sistema. No sobrecargarás tu ordenador porque el programa es al
mismo tiempo que potente, ligero.
-
Dispone de la función autocompletar que ya hemos citado, que nos facilita ayuda mientras
estamos escribiendo el código.
-
Permite abrir múltiples archivos simultáneamente, y reemplazar un texto en todos los archivos
abiertos a la vez si así lo deseamos.
-
Permite abrir dos archivos y realizar una comparación línea a línea entre ellos, indicándonos en
qué líneas existen diferencias entre un archivo y otro.
-
El código se nos muestra con un conjunto de colores que permite ver con claridad las etiquetas
de apertura y cierre y otros elementos especiales de la codificación.
© aprenderaprogramar.com, 2006-2029
Configuración básica de Notepad++ para crear páginas HTML.
-
Tiene muchísimas más posibilidades, pero no podemos citarlas todas. En conjunto, es un buen
editor útil para programadores a nivel profesional y para principiantes.
-
Es software libre que podemos descargar gratuitamente desde internet.
Como verás Notepad++ nos parece un buen editor de textos. Esto no quiere decir que no haya otras
editores igual de buenos y potentes. De hecho, si ya eres usuario de algún otro editor puedes seguir
este curso usándolo.
Próxima entrega: CU00710B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
LAS VENTAJAS DE GOOGLE CHROME. ¿POR QUÉ USAR CHROME?
En este curso vamos a usar Google Chrome, pero si lo prefieres por algún motivo como tenerlo ya
instalado, Mozilla Firefox también nos parece una opción muy recomendable, y puedes seguir este
curso también con este navegador.
Otros navegadores como Internet Explorer también se pueden usar, pero en principio no es lo más
recomendable por diversos motivos. Uno de ellos es que no dispone de las mismas herramientas que
Chrome o Firefox, que son los navegadores más usados por programadores y desarrolladores web.
Vamos a citar algunas ventajas de Google Chrome:
-
El navegador se abre muy rápidamente en comparación con otros navegadores. Google Chrome
es muy ligero, por eso tarda poco en abrirse.
-
El navegador tiene una buena velocidad de carga de las páginas web por las que vamos
navegando. Esto se debe a su estructura interna, que también es ligera.
-
Por el mero hecho de instalarlo, ya disponimos de una potente herramienta de análisis y
depuración de páginas web o “Inspeccionador de elementos”. Esta herramienta es similar a la
extensión “Firebug” de Mozilla Firefox. Sin embargo, en Mozilla esta extensión no viene
instalada por defecto, sino que hemos de instalarla a posteriori.
-
Si tenemos abiertas varias pestañas y una de ellas se tiene que cerrar debido a algún error o
bloqueo, no se nos quedará colgado el programa al completo, sino únicamente la pestaña o
pestañas afectadas.
DESCARGAR E INSTALAR EL NAVEGADOR GOOGLE CHROME. VISUALIZAR PÁGINAS HTML.
Para poder visualizar nuestras páginas web, vamos a instalar el navegador Google Chrome. Lo primero
que tenemos que hacer para instalar dicho navegador, es descargarlo de la web oficial de Google en la
dirección: http://www.google.com/chrome?hl=es
También puedes acceder simplemente escribiendo “descargar google chrome” en un buscador (Google,
Yahoo, Bing, etc.) Una vez estemos en la dirección o URL de descarga se nos abrira una pantalla similar
a la siguiente:
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
Hacemos click en ‘Descargar Google Chrome’. Nos aparecerá una página donde se nos pide que
aceptemos las condiciones. Aceptamos para instalar el navegador.
El proceso normalmente comienza mostrando una pantalla que indica “Gracias por probar Google
Chrome” y de forma automática, comienza a su vez el proceso de instalación en nuestro ordenador (si
te pide permiso para la instalación acepta para permitir el proceso).
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
Una vez descargardo e instalado, ya podremos ver páginas web con éste navegador. Para acceder a
Google Chrome, nos iremos a Inicio --> Todos los programas --> Google Chrome. También podremos
acceder desde el escritorio a través de un enlace directo.
LAS CUESTIONES MÁS BÁSICAS EN GOOGLE CHROME (Y EN GENERAL PARA CUALQUIER NAVEGADOR)
Al abrir el navegador Google Chrome se nos mostrará una ventana similar a la siguiente. Ten en cuenta
que el aspecto puede variar según la versión de Chrome que estemos usando, por tanto tendremos que
buscar las opciones según aparezcan en nuestro computador, que puede diferir en algunos detalles de
lo que indicamos aquí.
Una vez abierto Chrome podremos abrir tantas pestañas como queramos, introducir una dirección URL
en la barra de direcciones, recargar la página actual (también podremos pulsar F5 como atajo de
teclado para conseguir recargar una página) y acceder al menú de opciones de Google Chrome entre
otras operaciones.
Para cambiar la página web de inicio que viene por defecto en nuestro navegador Google Chrome (la
que aparece cada vez que abrimos el navegador), procederemos de la siguiente forma:
a) En algunas versiones de Chrome, tendremos que hacer click en ‘Llave inglesa’ y dentro del menú
desplegable que nos aparece en la opción ‘opciones’. Se nos abrirá una nueva pestaña donde en la
opción ‘Pagina de inicio’ pondremos por ejemplo http://aprenderaprogramar.com ( o la página que
queramos). Otras versiones no traen llave inglesa.
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
b) En otras versiones de Chrome, haremos click en el icono a la derecha de la barra de direcciones para
desplegar el menú y elegimos “Configuración”. En la opción “Iniciar sesión”, elegimos la opción “Abrir
una página específica o un conjunto de páginas -- > Establecer páginas”, introducimos la URL de la
queramos sea nuestra página de inicio, por ejemplo http://aprenderaprogramar.com ( o la página que
queramos) y pulsamos aceptar.
c) Otra opción para acceder a la configuración es escribir en la barra de direcciones lo siguiente (como si
fuera una dirección web): chrome://settings/
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
LIMPIAR LA CACHÉ Y OTRAS OPERACIONES ÚTILES QUE USAREMOS CON FRECUENCIA
Llamamos “caché” o “cache” a contenidos que se almacenan en nuestro navegador y que no se
descargan desde internet, sino que los tenemos localmente en nuestro equipo. Estos contenidos
pueden ser texto o imágenes y permite que cuando navegamos por una web las páginas se muestren
más rápido ya que parte de la información no se descarga de internet (o no se actualiza desde los
archivos fuente) sino que se mantiene en nuestro navegador. Sin embargo, cuando estamos creando
páginas web esto puede dar lugar a resultados engañosos, ya que tras hacer una modificación puede
que el navegador no la muestre por estar utilizando contenidos de la caché. Por tanto una operación
que va a ser de gran utilidad, es limpiar la caché cuando deseemos que todo el contenido venga
directamente de internet. Si no eliminamos la cache puede que lo que estemos visualizando en nuestra
pantalla de ordenador sea información cacheada y, por lo tanto, no actualizada.
Para limpiar la caché del navegador tenemos que hacer lo siguiente: Llave inglesa o icono para
desplegar el menú --> Herramientas --> Eliminar (borrar) datos de navegación. También podemos
acceder escribiendo directamente en la barra de direcciones chrome://settings/clearBrowserData como
si se tratara de una dirección web.
En la pantalla que se nos muestra a continuación seleccionamos todas las opciones, y para definir desde
cuándo en la opción “Eliminar elementos almacenados desde:” elegimos ‘el origen de los tiempos’ (es
decir, borrarlo todo sin dejar nada).
© aprenderaprogramar.com, 2006-2029
Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
Para guardar una página web en local debemos simplemente ir a llave inglesa o icono de despliegue de
menú y seleccionar ‘Guardar página como…’ y seleccionar el nombre y ubicación donde queremos
guardar la página HTML.
Para añadir una página a favoritos debemos clickar sobre marcadores (normalmente un icono con
forma de estrella a la derecha de la barra de direcciones) y elegir el nombre y carpeta donde
guardaremos el nuevo marcador favorito. Esto sirve para ir manteniendo una colección de enlaces a
páginas web que visitamos con frecuencia, de forma que pulsando sobre el enlace accedemos
directamente a la web sin necesidad de escribir la url en la barra de direcciones. Para visualizar esa
colección de enlaces tenemos que desplegar el menú y elegir la opción Marcadores -- > Mostrar barra
de marcadores.
Si queremos ver las propiedades de una imagen clickamos sobre la imagen con el botón derecho del
ratón y pulsamos en ‘Inspeccionar elemento’ en el menú desplegable que se nos abre. Así veremos el
tamaño de la imagen.
Para hacer zoom basta con utilizar los siguientes atajos de teclado: ‘Ctrl’ + ‘+’ (más zoom, es decir,
pulsando la tecla CTRL y al mismo tiempo la tecla +, logramos acercar la vista), ‘Ctrl’ + ‘-‘ (menos zoom,
es decir, alejar la vista). O si lo preferimos usar ‘Ctrl’ + ‘ruleta o rueda del ratón’ hacia arriba o hacia
abajo, para acercar o alejar la vista.
En cualquier caso, para volver a ver la página con su tamaño original sólo tenemos que pulsar ‘Ctrl’ + ‘0’.
CÓMO ACTUALIZAR GOOGLE CHROME
Google Chrome se actualiza automáticamente cuando detecta que hay una nueva versión del
navegador. El proceso de actualización se produce en segundo plano y no es necesario que realices
ninguna acción.
No obstante, puedes comprobar si el navegador está actualizado pulsando sobre llave inglesa o icono
para desplegar el menú --> Información de Google Chrome. Ahí te aparecerá un mensaje con la versión
que estás usando actualmente, y te indicará si el navegador está actualizado o no. También puedes
acceder a esta información escribiendo chrome://chrome/ en la barra de direcciones como si fuera una
dirección web.
Que el navegador se mantenga actualizado sirve para tratar de evitar posibles fallos de seguridad y
ataques de virus o programas maliciosos.
Próxima entrega: CU00711B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Conceptos básicos. Estructura básica de una página HTML. Head, body.
CONCEPTOS BÁSICOS. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. ETIQUETAS HEAD, BODY.
Vamos a explicar conceptos básicos de HTML. En primer lugar veremos cuál es la estructura básica que
toda página HTML debe cumplir. Para ello introduciremos las etiquetas HTML, HEAD y BODY, y sus
respectivas etiquetas de cierre.
Toda página web viene definida con la siguiente estructura básica (recuerda que la primera línea es una
etiqueta relativa a la versión/variante de HTML que declaramos usar y que esta primera etiqueta no es
estrictamente necesaria. Sirve únicamente para indicar qué estándar de HTML es el que declaramos
usar).
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Título de la página web</title>
...
</head>
<body>
Cuerpo de la página web
</body>
</html>
Transitional//EN"
Vamos a analizar más detenidamente las distintas secciones que componen la página.
La etiqueta <html> define que se trata de código HTML.
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.
© aprenderaprogramar.com, 2006-2029
Conceptos básicos. Estructura básica de una página HTML. Head, body.
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 cabecera
Función
¿Es 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 clave
No
<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 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.).
© aprenderaprogramar.com, 2006-2029
Conceptos básicos. Estructura básica de una página HTML. Head, body.
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.
Próxima entrega: CU00712B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Significado de deprecated. Etiqueta body. Cuerpo HTML.
SIGNIFICADO DE DEPRECATED
Cuando se trabaja en programación y desarrollos web veremos que con frecuencia aparece el término
inglés “deprecated”. Algunas veces se trata de traducir al español por “deprecado”, pero en realidad
este término no existe en español. En su lugar podemos usar “desaprobado” o “no recomendado”.
Al igual que hoy día disponemos de computadoras más potentes y efectivas que hace 20 años por
evolución de la tecnología, también podemos decir que los lenguajes evolucionan y cambian.
Así, algunas formas sintácticas o expresiones HTML que se consideraban válidas hace unos años han
pasado a considerarse no recomendados para los desarrollos web actuales. Sin embargo, dado la gran
cantidad de páginas web que se construyeron usando estas formas del lenguaje anticuadas y a que los
programadores no podían adaptarse de un día para otro a los cambios en los lenguajes, en lugar de no
permitir estas expresiones, las nuevas versiones de los lenguajes las clasifican como deprecated o no
recomendadas.
Un ejemplo de uso no recomendado (deprecated) es la inclusión de un atributo bgcolor en la etiqueta
body de un documento HTML.
Por ejemplo <body bgcolor=”yellow”> hace que la página web tenga un fondo amarillo mediante el uso
de un atributo, bgcolor, que está clasificado como deprecated. Esto significa que no debemos usar el
atributo bgcolor porque se ha definido otra forma de dar color de fondo al elemento body de un
documento HTML (en concreto mediante el uso de estilos CSS).
Las sintaxis, atributos, expresiones, etc. que están catalogadas como deprecated siguen siendo
aceptadas por los navegadores, aunque con el paso del tiempo pasarán de deprecated a “not
supported”, es decir, no serán reconocidas por los navegadores. Por tanto en ningún caso debemos
usarlas.
Dejando claro que no debemos usarlas, sin embargo conocer las formas deprecated puede tener cierto
interés. ¿Por qué?
1. Nos permiten conocer la evolución del lenguaje
2. En caso de que tengamos que revisar, corregir o modificar código desarrollado por otra persona
donde se usan formas deprecated, sabremos identificar y subsanar los problemas existentes.
La existencia de formas deprecated en los desarrollos web de hoy en día se debe a múltiples motivos:
miles de páginas web no se han actualizado a los nuevos estándares y se mantienen como fueron
construidas hace años. Muchos programadores siguieron usando formas deprecated (y en algunos
casos siguen usando algunas de estas formas). Muchos programas para creación semiautomatizada de
páginas web usaban o usan formas deprecated.
© aprenderaprogramar.com, 2006-2029
Significado de deprecated. Etiqueta body. Cuerpo HTML.
A lo largo del curso estudiaremos formas deprecated, que fueron muy utilizadas en su día pero cuyo
uso no es recomendado hoy en día. La inclusión de estas formas en este curso obedece a ser capaces de
reconocer y corregir problemas en desarrollos web con los que nos podamos encontrar. Cuando un
elemento esté considerado como deprecated lo indicaremos explícitamente.
BODY BGCOLOR (DEPRECATED)
Atributo que fue muy usado en el pasado para especificar el color de fondo de la página. El color se
define en base hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green,
Blue). Es decir, cada color se define con el carácter # seguido de 6 letras ó números. Cada combinación
de letras o números da lugar a distintos colores. También se puede usar el nombre en inglés de los
colores predefinidos en los navegadores (red, blue, green, etc.).
Sintaxis (deprecated): <body bgcolor=”#0000FF”> o <body bgcolor=”blue”>
En este ejemplo el color azul vemos que lo podemos poner tanto con su código como simplemente
escribiendo blue, porque es un color básico. Los colores no básicos sólo podremos indicarlos como
código hexadecimal. Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar
escribiendo en un buscador como Google, Yahoo o Bing el texto “colores hexadecimales” y entrando a
cualquiera de las páginas que te permiten seleccionar un color y te dicen cuál es su código.
Recordar: bgcolor es un atributo de body que no debe usarse por estar deprecated o not supported.
BODY TEXT (DEPRECATED)
Atributo que fue muy en el pasado para definir el color del texto. Su formato es el mismo que el de
bgcolor. Si no se pone nada es negro.
Sintaxis (deprecated): <body text=”#0000FF”> o <body text=”blue”>
Recordar: text es un atributo de body que no debe usarse por estar deprecated o not supported.
BODY BACKGROUND
Atributo que fue muy usado en el pasado para especificar la ruta y nombre de archivo (URL) de la
imagen (formato GIF, JPG o PNG habitualmente) que será usada como fondo del documento. Esta se
verá como mosaico para cubrir toda la zona de visualización del navegador si es pequeña (lo habitual
era poner como fondo una imagen pequeña y dejar que se repitiera, porque así la página carga más
rápido).
Sintaxis tipo (deprecated): <body background="ruta/archivo.gif">
© aprenderaprogramar.com, 2006-2029
Significado de deprecated. Etiqueta body. Cuerpo HTML.
Por ejemplo: <body background="http://www.aprenderaprogramar.com/images/BgTexture.jpg">
Cuando se trabaja en desarrollos web es conveniente especificar la ruta de modo relativo, esto quiere
decir que si cambiamos el directorio completo donde están nuestras páginas (nuestros archivos html),
desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida. En el primer ejemplo
que pusimos, la ruta utilizada es absoluta. Dentro de un servidor también se pueden usar rutas
relativas, el formato sería similar a éste:
<body background="images/BgTexture.jpg">
Como ves en este ejemplo no aparece el nombre del dominio. De esta forma si cambiamos el dominio,
las rutas de las imágenes seguirán siendo correctas.
Veamos otro ejemplo. Supongamos la siguiente estructura de directorios y archivos:
•
•
•
APR2HTML/pagina1.html: el archivo denominado pagina1.html está dentro de la carpeta
APR2HTML.
APR2HTML/gifs/fondo.gif
APR2HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html está dentro de una
subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta APR2HTML.
Si desde la página pagina1.html queríamos poner como fondo la imagen fondo.gif, que se encuentra en
el directorio gifs, se debía poner:
<body background="gifs/fondo.gif">
Si desde la página pagina2.html queríamos poner como fondo la imagen fondo.gif, que se encuentra en
el directorio gifs, se debía poner:
<body background="../gifs/fondo.gif">
Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior. Si quisiéramos
subir dos niveles, por ejemplo si tenemos la página en APR2HTML/ejemplos/miweb/pagina3.html
escribiríamos “../../gifs/fondo.gif”. Aunque el atributo background está deprecated, lo dicho para las
rutas es útil cuando trabajes con desarrollos web actuales.
MÁRGENES: LEFTMARGIN, TOPMARGIN, RIGHTMARGIN Y BOTTOMMARGIN (DEPRECATED)
Además de bgcolor, text y background, también se usaban atributos para definir márgenes, todos ellos
clasificados como deprecated hoy día.
Para especificar los márgenes se utilizaba el atributo margin, con su correspondiente indicación
indicadora de lateral afectado. Así se utilizaba "leftmargin" para el margen izquierdo, "topmargin" para
el margen uperior, "rightmargin" para el margen de la derecha y "bottommargin" para el margen
inferior.
© aprenderaprogramar.com, 2006-2029
Significado de deprecated. Etiqueta body. Cuerpo HTML.
Los márgenes se suelen medir en pixeles, término inglés que alude a cada uno de los pequeños puntos
que conforman la imagen en una pantalla (ten en cuenta que una pantalla tiene unas dimensiones en
pixeles de ancho y pixeles de alto). Para establecer márgenes de 10 pixeles en todos los sentidos se
escribían expresiones de este tipo (deprecated):
<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>
RESUMEN
En el pasado se usaban una serie de atributos para la etiqueta body que permitían dotar el cuerpo de la
página de un aspecto o presentación determinada. Prueba en tu navegador estas formas y comprueba
si tu navegador las reconoce. Hoy día el uso de estas formas está considerado una mala práctica, por lo
que no deben usarse, aunque sí conocerse por si hubiera que corregir webs donde existan.
En lugar de estos atributos hoy día se usan técnicas CSS. Cuando termines este curso, te recomendamos
consultes el curso aprenderaprogramar.com CSS desde cero para conocer estas técnicas, dado que los
desarrollos web de hoy en día no pueden entenderse sin el uso de CSS.
Próxima entrega: CU00713B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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.
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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
<strong>también</strong>
a
poner
en
<b>negrita</b>
y
esta
otra
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.
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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
Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta, pero es una etiqueta que
debemos conocer.
SUBRAYADO U (DEPRECATED)
Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y
cerrarlo con su correspondiente etiqueta </u>. Así se 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:
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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.
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/loose.dtd">
HTML
4.01
Transitional//EN"
<html>
<head>
<title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo básico: uso de etiquetas de formato y atributos básicos para la etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Tachado</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.
© aprenderaprogramar.com, 2006-2029
Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00714B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.
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
src
Este atributo es obligatorio e indica el nombre del
archivo de imagen (entre comillas) o la URL desde la
que se va a obtener la imagen.
Obligatorio. Si no se
incluye no se mostrará
imagen alguna.
align
Permite controlar la alineación de una imagen con
respecto a una línea de texto adyacente o a otras
imágenes en esa línea. Los valores posibles son los ya
conocidos left, right, middle, top, bottom.
Atributo obsoleto
(deprecated). Sustituir por
CSS.
alt
Entre comillas podremos escribir un texto que se
mostrará si la imagen no llega a cargar, mientras se
carga o, cuando visualizando ya la imagen, pasamos el
ratón por encima.
Atributo requerido, se
recomienda incluirlo
aunque si no se hace la
imagen se mostrará.
width
Este atributo es opcional pero podemos ponerlo para
especificar al navegador que muestre la imagen con
un tamaño específico. Significa “ancho de la imagen”
que vamos a representar. Si no se escribe, se carga la
imagen con el tamaño original.
Opcional. Indicar valor en
pixeles. También se puede
indicar con CSS.
height
Al igual que el atributo width, es opcional. Este
atributo indica el alto de la imagen.
Opcional. Indicar valor en
pixeles. También se puede
indicar con CSS.
border
Con border especificamos el ancho del borde que
rodea la imagen. Si se indica 0 equivale a “sin borde”.
Atributo obsoleto
(deprecated). Sustituir por
CSS.
© aprenderaprogramar.com, 2006-2029
Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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”>
© aprenderaprogramar.com, 2006-2029
Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.
Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya
no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se
conozca su significado, ya que se pueden encontrar en muchas 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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00715B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
ENCABEZADOS <h1>…<h6>, PÁRRAFOS <p> Y ETIQUETA <pre> EN HTML.
Continuamos viendo 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
explicaremos las que han venido siendo más utilizadas.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title>
</head>
<body>
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
</body>
</html>
Podemos ver el resultado obtenido en la siguiente imagen.
© aprenderaprogramar.com, 2006-2029
Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del
siguiente por un salto de línea sin que nosotros en el código hayamos escrito nada ya que los
encabezados generan por sí solos un salto de línea.
Ten en cuenta que en una página podrías poner un texto de tamaño grande indicándolo de otra
manera, por ejemplo modificando el tamaño de fuente sin usar encabezado. ¿Por qué usar entonces
encabezados? Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como
google, yahoo o bing cuando encuentran una etiqueta <h1> le dan más relevancia que a un texto del
mismo tamaño que no sea un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc.
para obtener un mejor posicionamiento de nuestras páginas web en los buscadores. Es decir, usar h1
no sólo supone agrandar el tamaño de la letra, también supone indicar que el texto incluido entre esas
etiquetas tiene una importancia superior al resto de texto y esto es valorado por los buscadores. Por
supuesto, de nada servirá que intentes incluir todo el texto de tu página web dentro de etiquetas h
porque los buscadores no son tontos: detectarán ese “truco” e incluso te penalizarán haciendo que no
aparezca tu página web en las búsquedas. Por tanto los encabezados deben usarse con moderación y
equilibrio.
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
Especifica la alineación del texto dentro del párrafo.
align
left: alineación del texto a la izquierda
right: alineación del texto a la derecha
center: alineación del texto centrada
justify: alineación del texto justificada
OBSERVACIONES
Atributo obsoleto (deprecated) en su uso
en la forma <p align=”center”>Texto<p>.
En lugar de esta sintaxis, usar CSS.
Ejemplo de uso correcto empleando
técnica CSS:
<p style=”text-align: center;”>Texto
centrado</p>
Como comprobarás, hemos introducido el uso de estilos. Aunque en este curso no vamos a hablar de
CSS más que superficialmente, conviene que te vayas familiarizando con esta técnica. Un estilo sirve
para “moldear” la presentación de algo (un párrafo, un contenedor). En nuestro caso, estamos diciendo
que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center). Un
estilo se puede aplicar de distintas maneras. Una forma de hacerlo es escribiendo en línea (a
continuación de la etiqueta) con la sintaxis style = “característica a aplicar nº1 ; característica a aplicar
nº2; característica a aplicar nº…;”.
© aprenderaprogramar.com, 2006-2029
Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
Por ejemplo: <p style = “text-align: center; font-size: 12px; color:blue;”> Este texto estará centrado,
tendrá un tamaño de fuente de 12 pixeles y color azul cuando se vea en el navegador</p>
Como vemos para definir un estilo escribimos style = “un nombre de atributo, dos puntos, el valor del
atributo y terminación en punto y coma. Otros atributos se pueden especificar de la misma manera
(tantos como queramos) hasta terminar con un punto y coma y las comillas de cierre”.
Iremos introduciendo cuestiones básicas relacionadas con estilos poco a poco y a medida que las
vayamos necesitando. Cuando termines este curso te recomendamos seguir el curso CSS desde cero de
aprenderaprogramar.com, pues CSS es una técnica imprescindible hoy día para desarrollos web.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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.
© aprenderaprogramar.com, 2006-2029
Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
Escribe este código, guárdalo como archivo HTML y comprueba sus resultados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
Escribo esta línea así
Dejo dos líneas de separación
y escribo tres más.
</body>
</html>
Sin poner ninguna etiqueta, el navegador respondería así:
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
<pre>
Escribo esta línea así
Dejo dos líneas de separación
y escribo tres más.
</pre>
</body>
</html>
El texto dentro de una etiqueta pre normalmente se muestra con un tipo de fuente especial (Courier o
similar) de ancho fijo, lo que le da un aspecto de “texto escrito con máquina de escribir”.
© aprenderaprogramar.com, 2006-2029
Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
Como podremos observar al comprobar los resultados, con esta etiqueta se muestra el texto tal y como
lo hayamos escrito respetando saltos de línea, espacios, tabuladores, etc.
La etiqueta <pre> interesa usarla en determinadas ocasiones, pero es poco frecuente hacer uso de ella.
¿Por qué? Porque normalmente se puede dar el formato adecuado a los textos usando técnicas CSS,
que resultan más fáciles y cómodas de usar. No obstante, es una etiqueta que debemos conocer.
EJERCICIO
Crea una página web que conste de lo siguiente: un encabezado h1 que ponga “Las fotos de mi viaje”. A
continuación un párrafo explicando un viaje. A continuación un encabezado h2 que indique “Fotos de la
primera parte del viaje” y a continuación 2 fotos. Seguidamente un encabezado h2 que indique “Fotos
de la segunda parte del viaje” y a continuación 2 fotos. Finalmente usando las etiquetas pre haz que
aparezca este texto en la parte inferior usando espacios y tabuladores:
Los viajes
…son libertad
… son amistad
… son crecimiento personal
¡No desaproveches una oportunidad!
Guarda el documento con un nombre como ejemploCU00715B.html y comprueba que se visualiza
correctamente. Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
Próxima entrega: CU00716B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
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; backgroundcolor: black;" aplicada a la etiqueta hr, modificar el siguiente código para eliminar las etiquetas
deprecated y sustituirlas por expresiones CSS.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de separadores - aprenderaprogramar.com</title>
</head>
<body>
<p>A 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.
© aprenderaprogramar.com, 2006-2029
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
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.
© aprenderaprogramar.com, 2006-2029
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
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 OBSOLETA
(DEPRECATED)
SINTAXIS CSS ALTERNATIVA
(BASADA EN ESTILOS)
<hr size=”8px”>
<hr style=”height: 8px;”>
<hr width=”75%”>
<hr style=”width: 75%;”>
<hr color=”red”>
<hr style=”background-color: red; color:red;”>
<hr align=”right”>
<hr style=”text-align: right; margin-right: 0px;”>
<hr style=”border-style: 1px solid #000”>
<hr noshade=”noshade”>
La sintaxis para la etiqueta noshade puede dar lugar a distintos
resultados según el navegador que usemos.
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”/>
© aprenderaprogramar.com, 2006-2029
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
foros
COMENTARIOS EN HTML.
Se llama comentario en el ámbito de HTML a las notas que el autor o autores ponen en el 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.
© aprenderaprogramar.com, 2006-2029
Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.
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.
Próxima entrega: CU00717B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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>
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a name="arriba"></a>
En esta 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>
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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í.
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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 en el que se ha pulsado el link.
Ejemplo:
<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una
nueva ventana</a>
EL ATRIBUTO TITLE PARA 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 ‘tooltip’ 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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de title - aprenderaprogramar.com</title>
</head>
<body>
<a
href=”http://www.aprenderaprogramar.com”
tool.tip”>Ir a aprenderaprogramar.com</a>.
title=”Esto
es
un
</body>
</html>
Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y
comprueba los resultados que se obtienen.
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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:
<a href="http://aprenderaprogramar.com"> <img src="http://i.imgur.com/SpZyc.png" alt="Curso de
HTML desde cero"></a>
EJERCICIO
Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos
“Animales de Africa” como texto a mostrar.
Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos
varios 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
© aprenderaprogramar.com, 2006-2029
Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.
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).
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00718B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Creación de listas en HTML. Listas no ordenadas, ordenadas.
CREACIÓN DE LISTAS EN HTML
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML
incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o
números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de
cada párrafo.
A continuación veremos los principales tipos de listas de los que HTML dispone.
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica
unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo
tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento de
una lista se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del
punto o marca a emplear, debemos indicarlo específicamente. En el pasado se usaba el atributo “type”,
hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera
definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por
cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
La apariencia final que realmente consigamos dependerá del navegador, es decir, el resultado puede
ser distinto según usemos un navegador u otro. No todos los navegadores se comportan de la misma
forma a la hora de mostrar un símbolo gráfico como una viñeta o marca.
Una lista no ordenada se usa cuando se enumeran elementos sin que el orden tenga relevancia: por
ejemplo si decimos “Las personas presentes en la habitación eran: Juan, Manuel, Pedro, Gonzalo” se
trata de una lista no ordenada (Juan, Manuel, Pedro, Gonzalo). En cambio si la enumeración implica un
orden se tratará de una lista ordenada. Ejemplo: “Los mejores clasificados de la carrera fueron: Juan,
Manuel, Pedro, Gonzalo” (se entiende que Juan fue el primero, Manuel el segundo, Pedro el tercero,
etc.). Para cada caso, tendremos que decidir si usamos una lista HTML como ordenada o no.
© aprenderaprogramar.com, 2006-2029
Creación de listas en HTML. Listas no ordenadas, ordenadas.
EJERCICIO
El siguiente código define una lista no ordenada y hace uso de atributos deprecated para la etiqueta li.
Guarda el código como archivo html con un nombre como ejemplo1dep.html. Sustituye estos atributos
por CSS y guarda el archivo como ejemplo1css.html. Compara la visualización de ambos documentos
HTML en tu navegador.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas
</head>
<body>
<ul>
<li type="circle">Esto es
<li type="square">Este es
<li type="disc">Y este es
</ul>
</body>
</html>
HTML
4.01
Transitional//EN"
- aprenderaprogramar.com</title>
un tipo de punto.</li>
otro.</li>
otro diferente.</li>
El resultado a obtener será similar a este:
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
foros
LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol>
</ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma etiqueta que
para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y
éstos se irán generando automáticamente por orden, conforme escribamos nuevos elementos de la
lista.
© aprenderaprogramar.com, 2006-2029
Creación de listas en HTML. Listas no ordenadas, ordenadas.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros
queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se
generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, podemos indicarlo en el código.
Escribe este código en tu editor de texto y comprueba el resultado.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ol>
<li value="20">Este será el número 20.</li>
<li>Este será el 21.</li>
<li>Este será el 22. Y así sucesivamente.</li>
</ol>
</body>
</html>
Al igual que con las listas no ordenadas, en el pasado se usaba el atributo “type”, hoy en día no
recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por
números (li type="1"), letras minúsculas (li type="a"), letras mayúsculas (li type="A"), número romanos
en minúscula (li type="i") ó mayúscula (li type="I").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación:
<ul style="list-style-type:decimal"> para números, <ul style="list-style-type:lower-alpha"> para letras
minúsculas, <ul style="list-style-type:upper-alpha"> para letras mayúsculas, <ul style="list-styletype:lower-roman"> para números romanos en minúsculas, <ul style="list-style-type:upper-roman">
para números romanos en mayúsculas.
Prueba a crear listas usando los distintos valores para este atributo y visualízalas en tu navegador.
© aprenderaprogramar.com, 2006-2029
Creación de listas en HTML. Listas no ordenadas, ordenadas.
LISTAS DE DEFICIONES O DE DESCRIPCIONES
Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este tipo
de código en alguna página web poder interpretar su significado. Las listas de definiciones se usan
cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y su
definición o descripción. Por ejemplo, esto serían varios términos y sus definiciones:
Término
Definición o descripción
FTP
Protocolo para transmisión de ficheros entre ordenadores
HTML
Lenguaje de etiquetas empleado para generar páginas web
PHP
Lenguaje interpretado en servidor que permite generar páginas web dinámicas
Estos términos y sus definiciones o descripciones podríamos ponerlos de varias maneras dentro de una
página web (como texto sin más, como lista ordenada, no ordenada…) y una de estas maneras es
ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas
por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definición o descripción asociada a un
término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener como
descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
Los listados de definición se separarán automáticamente si escribimos varios de ellos.
EJEMPLO
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Segunda definición, separada automáticamente de la anterior.</dd>
</dl>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Creación de listas en HTML. Listas no ordenadas, ordenadas.
Escribe el código en tu editor de texto, guárdalo como archivo html y comprueba el resultado.
Habitualmente, los navegadores generan de forma automática el efecto de que la definición o
descripción queda desplazada hacia la derecha (tabulada) respecto a el término, así como el espacio de
separación entre distintas listas de definiciones.
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas
dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el siguiente código en
un editor de texto como bloc de notas o Notepad++ y guárdalo con un nombre de archivo como
ejemploCU00718B.html.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de combinación de listas - aprenderaprogramar.com</title>
</head>
<body>
<ul>
<li>Lenguajes de programación estructurada </li>
<ol>
<li> Lenguaje C </li>
<li> Lenguaje Pascal </li>
<li> Lenguaje Fortran </li>
</ol>
<hr style="height:8px; color: black; background-color: black;" />
<li>Lenguajes de programación orientada a objetos </li>
<ol>
<li>Lenguaje Java </li>
<li>Lenguaje PHP </li>
</ol>
</ul>
</body>
</html>
El resultado de este código cuando lo visualizamos en un navegador sería algo similar a lo que
mostramos en la siguiente imagen.
© aprenderaprogramar.com, 2006-2029
Creación de listas en HTML. Listas no ordenadas, ordenadas.
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores
define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno.
Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo.
Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y
Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que
ocupe el 50% del ancho disponible.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00719B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Creación de tablas en HTML. Atributos colspan y rowspan.
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  ) como su contenido. Esto hará que tu página se visualice correctamente, ya que
algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>
Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
</body>
</html>
Ten en cuenta que el atributo border está deprecated o not supported por las versiones más recientes
de HTML. Más adelante veremos cómo reemplazarlo usando técnicas CSS.
© aprenderaprogramar.com, 2006-2029
Creación de tablas en HTML. Atributos colspan y rowspan.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>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>
© aprenderaprogramar.com, 2006-2029
Creación de tablas en HTML. Atributos colspan y rowspan.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td 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:
© aprenderaprogramar.com, 2006-2029
Creación de tablas en HTML. Atributos colspan y rowspan.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<th>Alumno</th>
<th>Asignatura</td>
<th>Calificación</td>
</tr>
<tr>
<td>Juan Pérez</td>
<td>Matemáticas</td>
<td>8</td>
</tr>
<tr>
<td>Rodolfo Cárdenas</td>
<td>Francés</td>
<td>5</td>
</tr>
</table>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Creación de tablas en HTML. Atributos colspan y rowspan.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<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.
© aprenderaprogramar.com, 2006-2029
Creación de tablas en HTML. Atributos colspan y rowspan.
Jefe departamento
Jefe sección
Empleado
Edad empleado
Martín López
Maite Suárez
55
Luis Morales
Mateo Carralde
33
Carlos Hernández
Alberto Fernández
62
Diego Gutiérrez
44
Juan Alberto Chan
Diana Rodríguez
Luis Pérez
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00720B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form action="http://www.aprenderaprogramar.com" method="get">
<p>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<br/> <br/>
<label for="apellido">Apellido: </label>
<input type="text" name="apellido" id="apellido">
<br/> <br/>
<label for="email">Email: </label>
<input type="text" name="email" id="email">
<br/> <br/>
<input type="radio" name="sexo" id="varon" value="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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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:
•
name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario
para poder rescatar la información.
•
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
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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.
•
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 [email protected] y nuestro sexo Varón, la información que se envía a la dirección
web donde se reciben los datos es:
•
•
•
•
nombre=Juan
apellido=Suárez Guerra
[email protected]
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%40gm
ail.com&sexo=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 id será nombre. Por otro lado, el texto que
mostrará este label será “Introduzca su nombre:”.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Form, Checkbox, Option Button, ComboBox.
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.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00721B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Formas de envío de los datos de un formulario. Métodos GET y POST.
FORMAS DE ENVÍO DE LOS DATOS DE UN FORMULARIO HTML. 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.
© aprenderaprogramar.com, 2006-2029
Formas de envío de los datos de un formulario. Métodos GET y POST.
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=h52tura
m%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 [email protected]. 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).
© aprenderaprogramar.com, 2006-2029
Formas de envío de los datos de un formulario. Métodos GET y POST.
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
GET lleva los datos de forma "visible" al cliente
(navegador web). El medio de envío es la URL.
Los datos los puede ver cualquiera.
Los datos son visibles por la URL, por ejemplo:
www.aprenderaprogramar.com/
action.php?nombre=pedro&apellidos1=
gomez
POST consiste en datos "ocultos" (porque el
cliente no los ve) enviados por un formulario
cuyo método de envío es post. Es adecuado
para formularios. Los datos no son visibles.
La ventaja de usar POST es que estos datos no
son visibles al usuario de la web. En el caso de
usar get, el propio usuario podría modificar la
URL escribiendo diferentes parámetros a los
reales en su navegador, dando lugar a que la
información tratada no sea la prevista.
POST
Próxima entrega: CU00722B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.
INGRESO DE DATOS EN FORMULARIOS
Los controles de entrada de datos en formularios suelen ser controles visuales y permiten la
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:
HTML input, HTML textarea, HTML select y 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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" />
</form>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.
•
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
Ingresa
tu
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.
© aprenderaprogramar.com, 2006-2029
Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="action.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2"
cols="30">...Tus comentarios aquí...</textarea>
</form>
</body>
</html>
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00723B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Formularios en HTML. Controles. Opciones. Casillas de verificación.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
Selecciona tus intereses:
<br />
<input name="cbipeliculas" type="checkbox" />Películas
<br />
<input name="cbilibros" type="checkbox" />Libros
<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Controles. Opciones. Casillas de verificación.
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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Controles. Opciones. Casillas de verificación.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
Selecciona tu actividad favorita:
<br />
<input name="intereses" type="radio" value="rbipeliculas" />Películas
<br />
<input name="intereses" type="radio" value="rbilibros" />Libros
<br />
<input
name="intereses"
type="radio"
value="rbiinternet"
checked="checked" />Internet
</form>
</body>
</html>
A modo de ejercicio, 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
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Controles. Opciones. Casillas de verificación.
Listas de opciones
Estas listas pueden ser construidas utilizando tres elementos:
• El elemento HTML select (contenedor principal)
• El elemento HTML option (opción simple)
• El elemento HTML optgroup (grupo de opciones). Este elemento es el único prescindible
(opcional) para construir este tipo de listas.
Veamos primero el aspecto 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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Controles. Opciones. Casillas de verificación.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/action.php">
Elije solo una 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 /><br /><br />
Elije tantas opciones como quieras, como con casillas de verificación
(manteniendo presionada la tecla "Ctrl"):<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&entradalist
a2[]=Casillas+de+verificaci%C3%B3n&entradalista2[]=Botones+radio&entradalista2[]=Listas
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Controles. Opciones. Casillas de verificación.
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 con tres nombres de grupos o cantantes.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00724B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Formularios en HTML. Botones: envío, restablecimiento, imagen.
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).
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="submit" value="Enviar este formulario" />
</form>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Botones: envío, restablecimiento, imagen.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="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.
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Botones: envío, restablecimiento, imagen.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<input name="boton1" type="image"
src="http://i.imgur.com/SpZyc.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
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Botones: envío, restablecimiento, imagen.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="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
© aprenderaprogramar.com, 2006-2029
Formularios en HTML. Botones: envío, restablecimiento, imagen.
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>>.
Para comprobar si tus
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00725B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
enctype multipart/form-data. Seleccionar archivo con HTML.
SUBIR ARCHIVOS AL SERVIDOR USANDO UN FORMULARIO HTML
Los formularios HTML permiten que el usuario seleccione archivos para subirlos (enviarlos) al servidor.
El control “entrada de archivos” muestra una caja de texto donde el usuario debe especificar la ruta del
archivo que se encuentra en el ordenador del usuario y que será enviado al servidor.
De esta manera podemos enviar archivos desde un computador cliente al servidor a 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 que para la etiqueta form 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.
© aprenderaprogramar.com, 2006-2029
enctype multipart/form-data. Seleccionar archivo con HTML.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de 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.
© aprenderaprogramar.com, 2006-2029
enctype multipart/form-data. Seleccionar archivo con HTML.
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
© aprenderaprogramar.com, 2006-2029
enctype multipart/form-data. Seleccionar archivo con HTML.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00726B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.
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
PUBLIC
"-//W3C//DTD
HTML
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="border: 1px solid red;">
Cabecera de la 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>
© aprenderaprogramar.com, 2006-2029
4.01
Transitional//EN"
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.
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):
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: center; font-size: 60px; border: 1px solid red;">
Cabecera de la 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>
Escribe el código anterior, guárdalo en un archivo html y visualízalo en tu navegador.
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.
© aprenderaprogramar.com, 2006-2029
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.
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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: center; font-size: 60px; border: 1px solid red;">
Cabecera
<span style="color: green;">de</span> la <span style="color: orange;">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).
© aprenderaprogramar.com, 2006-2029
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.
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:
© aprenderaprogramar.com, 2006-2029
Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00727B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
ATRIBUTO ID HTML
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
PUBLIC
"-//W3C//DTD
HTML
4.01
"http://www.w3.org/TR/html4/loose.dtd">
<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>
Transitional//EN"
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
<div id="header">
Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com
</div>
© aprenderaprogramar.com, 2006-2029
id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
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.ç
PIE
<div id="footer">
Copyright 2006-2072 aprenderaprogramar.com
</div>
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.
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 -->
© aprenderaprogramar.com, 2006-2029
id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
La expresión <a 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
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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 -->
© aprenderaprogramar.com, 2006-2029
id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
</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 a
describir cómo.
© aprenderaprogramar.com, 2006-2029
id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00728B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Ejemplo formulario HTML. Crear un portal web básico.
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 interpretará el código 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.
© aprenderaprogramar.com, 2006-2029
Ejemplo formulario HTML. Crear un portal web básico.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Portal 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">
<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-2072 aprenderaprogramar.com
</div>
</div>
</body>
</html>
© aprenderaprogramar.com, 2006-2029
Ejemplo formulario HTML. Crear un portal web básico.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00729B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Crear una cuenta de hosting gratuita en un servidor web.
CREAR UNA CUENTA DE HOSTING GRATUITA EN UN SERVIDOR HTML Y ACCEDER VÍA CPANEL
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):
© aprenderaprogramar.com, 2006-2029
Crear una cuenta de hosting gratuita en un servidor web.
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.
© aprenderaprogramar.com, 2006-2029
Crear una cuenta de hosting gratuita en un servidor web.
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 protected]&hash=8ggfg8sfdfd17c9
8efdghj99638c764&token=-576345454
While you wait for your account to activate, please 'like' us at http://www.facebook.com/free.byethost
best regards byethost7.com
Acto seguido se nos indicará que la 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.
© aprenderaprogramar.com, 2006-2029
Crear una cuenta de hosting gratuita en un servidor web.
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.
Próxima entrega: CU00730B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Subir nuestra web al servidor HTML mediante el explorador de archivos.
SUBIR NUESTRA WEB AL SERVIDOR HTML
Ahora que ya tenemos creada nuestra cuenta gratuita, vamos a subir nuestra web (conjunto de 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
© aprenderaprogramar.com, 2006-2029
Subir nuestra web al servidor HTML mediante el explorador de archivos.
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
© aprenderaprogramar.com, 2006-2029
Subir nuestra web al servidor HTML mediante el explorador de archivos.
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.
© aprenderaprogramar.com, 2006-2029
Subir nuestra web al servidor HTML mediante el explorador de archivos.
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.
© aprenderaprogramar.com, 2006-2029
Subir nuestra web al servidor HTML mediante el explorador de archivos.
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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU00731B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
foros
Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.
¿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>
© aprenderaprogramar.com, 2006-2029
Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.
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.
© aprenderaprogramar.com, 2006-2029
Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.
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
© aprenderaprogramar.com, 2006-2029
Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.
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.
Próxima entrega: CU00732B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.
¿QUÉ ES Y PARA QUÉ SIRVE CSS?
CSS son las siglas de “Cascading Style Sheets”, que se traduce como “Hojas de Estilo en cascada”. CSS es
un lenguaje que permite que en un documento separado de tus páginas web definas todo el estilo de tu
web. Por estilo entendemos aspecto de los enlaces, colores, tipos de letra, fondos, etc. Es decir, haces
tu web con un contenido, pero el 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.
© aprenderaprogramar.com, 2006-2029
Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.
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>
© aprenderaprogramar.com, 2006-2029
Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.
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>
© aprenderaprogramar.com, 2006-2029
Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.
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
Próxima entrega: CU00733B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Generar documentos HTML usando lenguaje PHP.
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:
© aprenderaprogramar.com, 2006-2029
Generar documentos HTML usando lenguaje PHP.
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.
© aprenderaprogramar.com, 2006-2029
Generar documentos HTML usando lenguaje 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.
</html>
";
?>
© aprenderaprogramar.com, 2006-2029
</body>
Generar documentos HTML usando lenguaje PHP.
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
© aprenderaprogramar.com, 2006-2029
Generar documentos HTML usando lenguaje PHP.
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-queestudiar-para-ser-programador-web-itinerario-de-formacion-plan-de-estudios-o-decarrera&catid=39:orientacion-academica&Itemid=189
Próxima entrega: CU00734B
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
© aprenderaprogramar.com, 2006-2029
Final curso tutorial programación web HTML desde cero.
FINAL DEL CURSO TUTORIAL
Con esta entrega llegamos al final del curso “Tutorial básico del programador web: HTML desde cero”.
Esperamos que haya sido un curso útil y ameno para todas las personas que lo hayan seguido. Y como
en todo final, cabe hacer algunas consideraciones especiales.
- Gracias al equipo humano de aprenderaprogramar.com que ha hecho posible su publicación, y en
especial a Javier Roa, Jorge Maestro, Manuel Tello, Walter Sagástegui, Manuel Sierra y Mario
Rodríguez.
- Gracias a todas las personas que de una u otra forma han participado enviando propuestas de
mejora, comentarios, avisos de erratas, etc. y a los alumnos que han seguido el curso colaborando a
través de los foros.
-
A todos los que no han participado pero han seguido el curso de forma gratuita a través de la web,
desde aprenderaprogramar.com les agradeceríamos nos hicieran llegar una opinión o propuesta de
mejora sobre el mismo, bien a través de correo electrónico a [email protected] ,
bien a través de los foros. Todas las opiniones son bienvenidas y nos sirven para mejorar.
- A quienes hayan seguido el curso de forma gratuita y piensen que los contenidos son de calidad y
que merece dar un pequeño apoyo económico para que se puedan seguir ofreciendo más y mejores
contenidos en este sitio web, les estaremos muy agradecidos si realizan una pequeña aportación
económica en forma de donación pulsando sobre el enlace que aparece en la página principal de
aprenderaprogramar.com.
Quienes tengan interés en proseguir formándose en el área de programación y programación web de
forma autodidacta les animamos a que visiten la sección “Cursos de aprenderaprogramar.com” en la
URL http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86
Quienes estén interesados en cursos tutorizados on-line con seguimiento, plan de trabajo y supervisión
a cargo de un tutor asignado pueden visitar la siguiente dirección donde encontrarán información:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87
Agradecemos que cualquier sugerencia, crítica, comentario o errata detectada que nos pueda permitir
mejorar los contenidos para el futuro se nos haga llegar a la siguiente dirección de correo electrónico:
[email protected] , o alternativamente a través de los foros o del formulario de
contacto que está a disposición de todos los usuarios en el portal web. A todos los que nos han leído y
nos siguen, gracias. ¡Nos vemos en el próximo!
El equipo de aprenderaprogramar.com
© aprenderaprogramar.com, 2006-2029