html facil

174
Para más información: [email protected] C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K 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).

Upload: mauricio

Post on 02-Dec-2015

324 views

Category:

Documents


19 download

TRANSCRIPT

Page 1: HTML Facil

Para más información: [email protected] C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

 

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

Page 2: HTML Facil

Indice del curso “Tutorial básico programador web: HTML desde cero”.

Para más información: [email protected] C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº1 del Tutorial básico HTML desde cero. Indice.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

INDICE DEL CURSO “TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO”(CU00701B)

Page 3: HTML Facil

Indice del curso “Tutorial básico programador web: HTML desde cero”.

Para más información: [email protected] C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

INDICE DEL CURSO

1. INTRODUCCIÓN A HTML

1.1. Introducción: internet y cómo se transmite la información. 1.2. ¿Qué es y para qué sirve HTML? 1.3. ¿Es HTML un lenguaje de programación? 1.4. ¿Cuáles son las versiones de HTML? 1.5. ¿Qué necesito para escribir código HTML y crear páginas web?

2. PREPARANDO EL ENTORNO DE DESARROLLO

2.1. Descargar e instalar Notepad++. 2.2. Configuración básica de Notepad++ para crear páginas HTML. 2.3. Descargar e instalar el navegador Google Chrome.

3. CONCEPTOS BÁSICOS DE HTML

3.1. Estructura básica de una página HTML. HEAD, BODY. 3.2. Etiquetas HTML básicas: formato texto, imágenes, encabezados, párrafo, saltos de línea,

separadores y comentarios. 3.3. Hipervínculos en HTML. 3.4. Listas en HTML. 3.5. Tablas en HTML. 3.6. Formularios en HTML. Métodos de envío: get y post. 3.7. Capas en HTML. Etiquetas DIV y SPAN. Maquetación de estructura de páginas web.

Page 4: HTML Facil

Indice del curso “Tutorial básico programador web: HTML desde cero”.

Para más información: [email protected] C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

4. CREACIÓN DE UN PORTAL BÁSICO

4.1. Página principal. Cabecera, menú, cuerpo y pié. 4.2. Formulario de datos personales. 4.3. 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. Creación de una cuenta en hosting gratuito y acceso vía cPanel. 5.2. Subir nuestra página a un servidor web y hacerla accesible en internet.

6. CONEXIÓN DE HTML CON OTROS LENGUAJES

6.1. ¿Qué es y para qué sirve JavaScript? Ejemplos básicos. 6.2. ¿Qué es y para qué sirve CSS? Ejemplos básicos. 6.3 ¿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

Page 5: HTML Facil

Orientación curso “Tutorial básico programador web: HTML desde cero”

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº2 del Tutorial HTML desde cero. Orientación sobre duración del curso y conocimientos previos recomendados.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

ORIENTACIÓN SOBRE EL CURSO “TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO” (CU00702B)

Page 6: HTML Facil

Orientación curso “Tutorial básico programador web: HTML desde cero”

© aprenderaprogramar.com, 2006-2029

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

Page 7: HTML Facil

Introducción: internet y cómo se transmite la información.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº3 del Tutorial básico HTML desde cero.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

INTRODUCCIÓN A HTML: INTERNET Y LOS FLUJOS DE INFORMACIÓN. ESTRUCTURA CLIENTE-SERVIDOR-NAVEGADOR (CU00703B)

Page 8: HTML Facil

Introducción: internet y cómo se transmite la información.

© aprenderaprogramar.com, 2006-2029

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.

Page 9: HTML Facil

Introducción: internet y cómo se transmite la información.

© aprenderaprogramar.com, 2006-2029

Podemos decir, por explicarlo de forma sencilla, que el navegador es aquello que transforma los datos obtenidos para que una persona pueda visualizarlos en su monitor.

NAVEGADORES MÁS USADOS

MOZILLA FIREFOX

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.

INTERNET EXPLORER

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

Page 10: HTML Facil

¿Qué es y para qué sirve HTML?

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº4 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

¿QUÉ ES Y PARA QUÉ SIRVE HTML? EL LENGUAJE MÁS IMPORTANTE PARA CREAR PÁGINAS WEB. HTML TAGS (CU00704B)

Page 11: HTML Facil

¿Qué es y para qué sirve HTML?

© aprenderaprogramar.com, 2006-2029

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

Page 12: HTML Facil

¿Qué es y para qué sirve HTML?

© aprenderaprogramar.com, 2006-2029

¿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

Page 13: HTML Facil

¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº5 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

¿ES HTML UN LENGUAJE DE PROGRAMACIÓN? EJEMPLO CONCEPTO DE LENGUAJE DE ETIQUETAS. (CU00705B)

Page 14: HTML Facil

¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.

© aprenderaprogramar.com, 2006-2029

¿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 Código Salida por pantalla

Java

public class MuestraDelUnoAlDiez { public static void main(String[] args) {

for(int i=1;i<=10;i++) { System.out.println(i);

} }

}

1 2 3 4 5 6 7 8 9

10

HTML

<html> <body>

<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p>

</body> </html>

1 2 3 4 5 6 7 8 9

10

Page 15: HTML Facil

¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.

© aprenderaprogramar.com, 2006-2029

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

Page 16: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº6 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

¿CUÁLES SON LAS VERSIONES DE HTML? DIFERENCIAS ENTRE STRICT, TRANSITIONAL Y FRAMESET. HTML 4 Y HTML 5. (CU00706B)

Page 17: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

¿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

Page 18: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

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.

Page 19: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

¿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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 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>

Page 20: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

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.

Page 21: HTML Facil

¿Cuáles son las versiones de HTML? Strict, Transitional, Frameset.

© aprenderaprogramar.com, 2006-2029

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

Page 22: HTML Facil

¿Qué necesito para escribir código HTML y crear páginas web?

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº7 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

¿QUÉ NECESITO PARA ESCRIBIR CÓDIGO HTML Y CREAR PÁGINAS WEB? IDEAS PARA CREAR BUENAS WEB (CU00707B)

Page 23: HTML Facil

¿Qué necesito para escribir código HTML y crear páginas web?

© aprenderaprogramar.com, 2006-2029

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

Page 24: HTML Facil

¿Qué necesito para escribir código HTML y crear páginas web?

© aprenderaprogramar.com, 2006-2029

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.

Page 25: HTML Facil

¿Qué necesito para escribir código HTML y crear páginas web?

© aprenderaprogramar.com, 2006-2029

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.

Page 26: HTML Facil

¿Qué necesito para escribir código HTML y crear páginas web?

© aprenderaprogramar.com, 2006-2029

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

Page 27: HTML Facil

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº8 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++ COMO EDITOR DE CÓDIGO (CU00708B)

Page 28: HTML Facil

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.

© aprenderaprogramar.com, 2006-2029

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.

Page 29: HTML Facil

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.

© aprenderaprogramar.com, 2006-2029

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

Page 30: HTML Facil

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.

© aprenderaprogramar.com, 2006-2029

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

Page 31: HTML Facil

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.

© aprenderaprogramar.com, 2006-2029

Si has seguido paso a paso todo lo que hemos expuesto y has llegado a visualizar en pantalla el texto, es que has completado correctamente la 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

Page 32: HTML Facil

Configuración básica de Notepad++ para crear páginas HTML.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº9 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CONFIGURACIÓN BÁSICA DE NOTEPAD++. AUTOCOMPLETAR Y OTRAS VENTAJAS DE NOTEPAD++. (CU00709B)

Page 33: HTML Facil

Configuración básica de Notepad++ para crear páginas HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 34: HTML Facil

Configuración básica de Notepad++ para crear páginas HTML.

© aprenderaprogramar.com, 2006-2029

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;

Page 35: HTML Facil

Configuración básica de Notepad++ para crear páginas HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 36: HTML Facil

Configuración básica de Notepad++ para crear páginas HTML.

© aprenderaprogramar.com, 2006-2029

- 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

Page 37: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº10 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

DESCARGAR E INSTALAR EL NAVEGADOR. VENTAJAS DE GOOGLE CHROME. FIREFOX, TAMBIÉN ENTRE LOS MEJORES (CU00710B)

Page 38: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

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:

Page 39: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 40: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 41: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

b) En otras versiones de Chrome, haremos click en el icono a la derecha de la barra de direcciones para desplegar el menú y elegimos “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/

Page 42: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 43: HTML Facil

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 44: HTML Facil

Conceptos básicos. Estructura básica de una página HTML. Head, body.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº11 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CONCEPTOS BÁSICOS. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. ETIQUETAS HEAD, BODY. TITLE. META DESCRIPTION Y KEYWORDS. (CU00711B)

Page 45: HTML Facil

Conceptos básicos. Estructura básica de una página HTML. Head, body.

© aprenderaprogramar.com, 2006-2029

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 Transitional//EN" "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>

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.

Page 46: HTML Facil

Conceptos básicos. Estructura básica de una página HTML. Head, body.

© aprenderaprogramar.com, 2006-2029

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

Page 47: HTML Facil

Conceptos básicos. Estructura básica de una página HTML. Head, body.

© aprenderaprogramar.com, 2006-2029

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

Page 48: HTML Facil

Significado de deprecated. Etiqueta body. Cuerpo HTML.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº12 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

SIGNIFICADO DE DEPRECATED. ETIQUETA BODY: CUERPO DE LA PÁGINA HTML. BGCOLOR, TEXT, BACKGROUND. (CU00712B)

Page 49: HTML Facil

Significado de deprecated. Etiqueta body. Cuerpo HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 50: HTML Facil

Significado de deprecated. Etiqueta body. Cuerpo HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 51: HTML Facil

Significado de deprecated. Etiqueta body. Cuerpo HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 52: HTML Facil

Significado de deprecated. Etiqueta body. Cuerpo HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 53: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº13 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE. (CU00713B)

Page 54: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

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.

Page 55: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque dejarán de existir en las nuevas versiones a partir de HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son:

- Son etiquetas que han sido muy populares en el pasado y te puedes encontrar muchas páginas webs que hacen uso de ellas.

- Son etiquetas reconocidas por prácticamente todos los navegadores actuales. - Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el

punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo CSS.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>. Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior. Veamos las etiquetas que hemos citado en la tabla anterior. NEGRITA Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código y lo que veríamos en pantalla:

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

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

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

Page 56: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

CURSIVA Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto debes cerrarla con la etiqueta </i>). 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:

Page 57: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

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.

Page 58: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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.

Page 59: HTML Facil

Formatos de texto en HTML: negrita, cursiva, tachado, subrayado.

© aprenderaprogramar.com, 2006-2029

Nota 1: Hemos utilizado la etiqueta <pre> que comentaremos más adelante. Nota 2: si estás utilizando Notepad++ y obtienes una visualización extraña de las tildes, por ejemplo “Ejemplo básico” en lugar de “Ejemplo básico” recuerda elegir como codificación UTF-8 sin BOM. También añade la etiqueta <meta charset="utf-8"> dentro de la cabecera del código para indicar el juego de caracteres que se debe emplear. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 60: HTML Facil

Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº14 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

ETIQUETAS HTML BÁSICAS: IMÁGENES. TAG IMG. SRC, ALT. WIDTH, HEIGHT. DEPRECATED BORDER, ALIGN. RUTAS ABSOLUTAS O RELATIVAS (CU00714B)

Page 61: HTML Facil

Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.

© aprenderaprogramar.com, 2006-2029

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.

Page 62: HTML Facil

Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.

© aprenderaprogramar.com, 2006-2029

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.

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

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

Page 63: HTML Facil

Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.

© aprenderaprogramar.com, 2006-2029

Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se conozca su significado, ya que se pueden encontrar en muchas páginas web. Incluso hay desarrolladores web que siguen usando estas etiquetas. Más adelante veremos cómo conseguir los efectos deseados de la forma recomendada hoy día: mediante el uso de estilos (hojas de estilo CSS). La etiqueta img cuenta con otros atributos menos usados que no vamos a citar aquí. EJERCICIO Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento con un nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo: Imagen que refleja una boda: (… aquí la imagen) Imagen que muestra un mercado: (… aquí la imagen) Imagen que muestra un atleta: (… aquí la imagen) Imagen que refleja un atardecer: (… aquí la imagen) Nota: la ruta de una imagen de una página web se puede capturar normalmente haciendo click con el botón derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador que estemos utilizando. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 64: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº15 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B)

Page 65: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

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:

Podemos ver el resultado obtenido en la siguiente imagen.

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

Page 66: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del siguiente por un salto de 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 OBSERVACIONES

align

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

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

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º…;”.

Page 67: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

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.

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.

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

Page 68: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

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

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.

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

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

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

Page 69: HTML Facil

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.

© aprenderaprogramar.com, 2006-2029

Como podremos observar al comprobar los resultados, con esta etiqueta se muestra el texto tal y como lo hayamos escrito respetando saltos de 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

Page 70: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº16 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

Page 71: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

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

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de atributos que podemos predefinir. No obstante estos atributos están clasificados como deprecated (no recomendados) o not supported (no admitido) en las versiones más recientes de HTML, por lo que no se debe hacer uso de ellos. En lugar de emplear estos atributos para definir el aspecto del separador hr se deben usar técnicas CSS. Por ejemplo, el atributo size de hr se usaba para definir el grosor de línea y el atributo color se usaba para definir el color de línea. En lugar de estos atributos, se deberá hacer uso de técnicas CSS. hr no tiene su correspondiente etiqueta de cierre, aunque puede indicarse el cierre terminando con una barra de esta manera: <hr /> (de esta forma se cumple el estándar XHTML, aunque en este curso no vamos a detenernos a hablar de estas cuestiones). EJERCICIO Para definir el atributo size en la etiqueta hr se empleaba size=”npx”, siendo “n” el valor del grosor de la franja en pixels (también se podía indicar en porcentajes). Sabiendo que para definir mediante CSS un grosor de 8 pixeles y color negro se puede usar la sintaxis: style="height:8px; color: black; background-color: black;" aplicada a la etiqueta hr, modificar el siguiente código para eliminar las etiquetas deprecated y sustituirlas por expresiones CSS.

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

Page 72: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

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.

Page 73: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

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.

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

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 noshade=”noshade”>

<hr style=”border-style: 1px solid #000”>

La sintaxis para la etiqueta noshade puede dar lugar a distintos resultados según el navegador que usemos.

Page 74: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

Ejemplo 2 Franja de grosor 2 píxeles, de ancho 80%, sin sombra y alineada a la derecha. <hr size=”2px” width=”80%” noshade=“noshade” align=“right” />

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. COMENTARIOS EN HTML. Se llama comentario en el ámbito de HTML a las notas que el autor o autores ponen en el código para facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y, por tanto, sólo serán visibles al leer el código HTML de la página web por una persona. En general es recomendable ir insertando comentarios al crear una página para marcar determinadas partes y así encontrarlas más fácilmente. Algunos usos que suelen darse a los comentarios son:

• Notas para recordar detalles del código la próxima vez que vayamos a cambiarlo, como por ejemplo para indicar por qué hemos usado una etiqueta y no otra. Este tipo de comentarios son muy usados cuando las páginas son complejas.

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

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

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

Page 75: HTML Facil

Separadores y comentarios en HTML. Etiqueta <hr>. Atributos size, width.

© aprenderaprogramar.com, 2006-2029

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

Page 76: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº17 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)

Page 77: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

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>

Page 78: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML. Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a> Por otro lado, el 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>

Page 79: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

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

Page 80: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

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 ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos puesto en el atributo ‘title’. EJEMPLO

<!DOCTYPE HTML 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” title=”Esto es un tool.tip”>Ir a aprenderaprogramar.com</a>.

</body> </html>

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

Page 81: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

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

Page 82: HTML Facil

Hipervínculos o enlaces en HTML. Etiqueta <A>. Atributos HREF Y TITLE.

© aprenderaprogramar.com, 2006-2029

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 respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 83: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº18 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CREACIÓN DE LISTAS EN HTML. LISTAS NO ORDENADAS, ORDENADAS. LISTAS DE DEFINICIONES. ETIQUETAS <OL>, <UL>, <DL>, <DT>, <DD>. (CU00718B)

Page 84: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

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.

Page 85: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

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

<li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li>

</ul> </body>

</html>

El resultado a obtener será similar a este:

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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.

Page 86: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

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-style-type: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.

Page 87: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

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>

Page 88: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

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.

Page 89: HTML Facil

Creación de listas en HTML. Listas no ordenadas, ordenadas.

© aprenderaprogramar.com, 2006-2029

EJERCICIO Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana 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 respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 90: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº19 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CREAR TABLAS EN HTML. ATRIBUTOS COLSPAN Y ROWSPAN. UNIFICAR CELDAS EN HORIZONTAL Y VERTICAL. CAPTION O TÍTULO (CU00719B)

Page 91: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

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

El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.). Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda). Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como &nbsp;) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td>&nbsp;</td> Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:

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

Page 92: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

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>

Page 93: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

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:

Page 94: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

CELDAS DE ENCABEZADO Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH ó table header, cabecera de tabla) que contiene 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>

Page 95: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

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.

Page 96: HTML Facil

Creación de tablas en HTML. Atributos colspan y rowspan.

© aprenderaprogramar.com, 2006-2029

Jefe departamento Jefe sección Empleado Edad empleado

Juan Alberto Chan Martín López Maite Suárez 55

Luis Morales Mateo Carralde 33

Diana Rodríguez Carlos Hernández Alberto Fernández 62

Luis Pérez Diego Gutiérrez 44

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 97: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº20 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FORMULARIOS EN HTML. ETIQUETAS FORM Y LABEL. NAME, VALUE, ID. CONTROLES: CHECKBOX, OPTION BUTTON (RADIO) Y COMBOBOX. (CU00720B)

Page 98: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

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.

Page 99: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

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.

Page 100: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

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

Page 101: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

se carga el formulario, el valor actual de cada control se restablece a su valor inicial. Si el control no tiene un valor inicial, el efecto de una 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%40gmail.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:”.

Page 102: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

En realidad un label puede considerarse una parte “poco importante” en un formulario, puesto que se limita a mostrar un texto y esto 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.

Page 103: HTML Facil

Formularios en HTML. Form, Checkbox, Option Button, ComboBox.

© aprenderaprogramar.com, 2006-2029

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 respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 104: HTML Facil

Formas de envío de los datos de un formulario. Métodos GET y POST.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº21 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FORMAS DE ENVÍO DE LOS DATOS DE UN FORMULARIO HTML. MÉTODOS GET Y POST Y SUS DIFERENCIAS. EJEMPLOS. (CU00721B)

Page 105: HTML Facil

Formas de envío de los datos de un formulario. Métodos GET y POST.

© aprenderaprogramar.com, 2006-2029

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.

Page 106: HTML Facil

Formas de envío de los datos de un formulario. Métodos GET y POST.

© aprenderaprogramar.com, 2006-2029

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=h52turam%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).

Page 107: HTML Facil

Formas de envío de los datos de un formulario. Métodos GET y POST.

© aprenderaprogramar.com, 2006-2029

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

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.

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

Page 108: HTML Facil

Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº22 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

INPUT HTML, TYPE Y VALUE. PEDIR DATOS EN FORMULARIOS. MULTILÍNEA TEXTAREA. PASSWORD. EJEMPLOS. (CU00722B)

Page 109: HTML Facil

Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.

© aprenderaprogramar.com, 2006-2029

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>

Page 110: HTML Facil

Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.

© aprenderaprogramar.com, 2006-2029

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

Page 111: HTML Facil

Elementos de entrada en HTML. Etiquetas INPUT, TEXTAREA, SELECT.

© aprenderaprogramar.com, 2006-2029

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="post" action="action.php">

Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>

</form> </body> </html>

En la próxima entrega seguiremos viendo más controles para formularios. EJERCICIO Crea una página web que contenga un formulario de registro de usuarios que cumpla estas condiciones: Como título principal de la página debe figurar con etiquetas h1 el texto “Solicitud de alta como usuario”. Debe contener un campo entrada de línea para solicitar el nombre. Debe contener un campo entrada de línea para solicitar los apellidos. Debe contener un campo entrada de línea para solicitar el correo electrónico. Debe contener un campo entrada de línea y tipo password para solicitar la contraseña. Debe contener un campo multilínea para solicitar observaciones. El formulario se debe enviar por el método get a la dirección de destino http://aprenderaprogramar.com Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 112: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº23 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FORMULARIOS EN HTML. OPCIONES. CASILLAS DE VERIFICACIÓN CHECKBOX. BOTONES DE RADIO. LISTAS DE OPCIONES SELECT, OPTGROUP, OPTION. (CU00723B)

Page 113: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

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>

Page 114: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

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.

Page 115: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

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

Page 116: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

Listas de opciones Estas listas pueden ser construidas utilizando tres elementos:

• El elemento HTML select (contenedor principal)

• El elemento HTML option (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.

Page 117: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<form method="get" action="http://aprenderaprogramar.com/action.php">

Elije solo una 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&entradalista2[]=Casillas+de+verificaci%C3%B3n&entradalista2[]=Botones+radio&entradalista2[]=Listas

Page 118: HTML Facil

Formularios en HTML. Controles. Opciones. Casillas de verificación.

© aprenderaprogramar.com, 2006-2029

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 respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 119: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº24 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FORMULARIOS HTML. BOTONES: ENVÍO SUBMIT, RESTABLECIMIENTO RESET, IMAGEN Y CONTENIDO (BUTTON). (CU00724B)

Page 120: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

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>

Page 121: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

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.

Page 122: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

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

Page 123: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

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

Page 124: HTML Facil

Formularios en HTML. Botones: envío, restablecimiento, imagen.

© aprenderaprogramar.com, 2006-2029

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 respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 125: HTML Facil

enctype multipart/form-data. Seleccionar archivo con HTML.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº25 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

ENCTYPE MULTIPART/FORM-DATA. SELECCIONAR ARCHIVO CON HTML PARA ENVÍO AL SERVIDOR. TYPE FILE. EJEMPLO (CU00725B)

Page 126: HTML Facil

enctype multipart/form-data. Seleccionar archivo con HTML.

© aprenderaprogramar.com, 2006-2029

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.

Page 127: HTML Facil

enctype multipart/form-data. Seleccionar archivo con HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 128: HTML Facil

enctype multipart/form-data. Seleccionar archivo con HTML.

© aprenderaprogramar.com, 2006-2029

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

Page 129: HTML Facil

enctype multipart/form-data. Seleccionar archivo con HTML.

© aprenderaprogramar.com, 2006-2029

manipular posteriormente ese archivo necesitaremos de otros lenguajes de programación a los que se denomina lenguajes del lado del servidor como PHP, JSP, ASP, etc. Nosotros no entraremos a describir cómo sería el proceso de recepción y manipulación del archivo en el servidor después del envío, porque esto implicaría el uso de otros lenguajes de programación que no son objeto de este curso, que se centra exclusivamente en HTML. Si tienes interés en estudiar un lenguaje del lado del servidor, te recomendamos que una vez completes el curso de HTML y el de CSS, continues con el curso “Tutorial básico del programador web: PHP desde cero” de aprenderaprogramar.com, donde se explican los fundamentos del lenguaje PHP. EJERCICIO Crea una página web que contenga un formulario que cumpla estas condiciones. Como título antes del formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Jara y Sedal>>. Debe contener:

a) Nombre

b) Apellidos

c) Dirección

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

e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>. Ten en cuenta que para el envío de archivos tienes que establecer correctamente los atributos del formulario: method y enctype. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 130: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº26 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)

Page 131: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

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

Page 132: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

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.

Page 133: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

ETIQUETA SPAN La etiqueta span al igual que casi todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su respectiva etiqueta de cierre </span>. ¿Qué utilidad tiene? La etiqueta span sirve normalmente para crear subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada 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).

Page 134: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

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:

Page 135: HTML Facil

Capas en HTML. Etiquetas DIV y SPAN. Estructurando las páginas.

© aprenderaprogramar.com, 2006-2029

Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links, párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie. La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright). Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 136: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº27 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

ID HTML. CREACIÓN DE UN PORTAL WEB BÁSICO. PÁGINA PRINCIPAL. CABECERA, MENÚ, CUERPO Y PIE. (CU00727B)

Page 137: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

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 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"> <div id="header"><!-- Aquí vendría el código de la cabecera --></div> <div id="wrapper"> <div id="menu"><!-- Aquí vendría el código del menú --></div> <div id="body"><!-- Aquí vendría el código del cuerpo --></div> </div> <div id="footer"><!-- Aquí vendría el código del pié --></div> </div> </body> </html>

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

<div id="header">

Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com

</div>

Page 138: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

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

Page 139: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

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

Page 140: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

</div>

<!-- fin contenedor -->

<br /> <br /> <br />

<div id="footer">

Copyright 2006-2072 aprenderaprogramar.com

</div>

</div>

</body>

</html>

Si abrimos la 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.

Page 141: HTML Facil

id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.

© aprenderaprogramar.com, 2006-2029

EJERCICIO Define la estructura de un portal web que conste de: a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link. b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos. c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 142: HTML Facil

Ejemplo formulario HTML. Crear un portal web básico.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº28 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

EJEMPLO FORMULARIO HTML (METHOD, ACTION). CREAR PORTAL WEB BÁSICO. EJEMPLO DE CÓDIGO EN CAPAS DIV. (CU00728B)

Page 143: HTML Facil

Ejemplo formulario HTML. Crear un portal web básico.

© aprenderaprogramar.com, 2006-2029

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.

Page 144: HTML Facil

Ejemplo formulario HTML. Crear un portal web básico.

© aprenderaprogramar.com, 2006-2029

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="utf-8"> <title>Portal 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>

Page 145: HTML Facil

Ejemplo formulario HTML. Crear un portal web básico.

© aprenderaprogramar.com, 2006-2029

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

Fíjate que el código de la cabecera, menú y pie es exactamente el mismo que el de la entrega anterior. Sólo hemos modificado el cuerpo de la página. Cuando navegas por Internet, se suelen mantener las mismas cabeceras, menú y pie en las páginas HTML que visitamos. Es decir, es como si existiera una plantilla de forma que el aspecto es siempre el mismo (cabecera, pie, color de fondo…) excepto una parte de contenido central. Cuando tengas más conocimientos, en vez de repetir el código en todos los archivos, podrás utilizar instrucciones específicas para hacer que esos contenidos de plantilla se carguen en todas las páginas de un portal sin necesidad de ir repitiéndolos en todas las páginas que creamos. Además, así podríamos cambiar el elemento cabecera en un único lugar y obtener su cambio en todas las páginas, sin tener que editar todas las páginas una por una para cambiar su cabecera. Sin embargo, preferimos no explicar esto ahora para tratar de ir paso por paso. EJERCICIO Modifica el formulario HTML con el que hemos trabajado para incluir un campo fotografía que permita el envío de un archivo de imagen como parte del formulario. Responde a estas preguntas: ¿Qué atributo ha de especificarse para el form para poder enviar archivos? ¿Qué valor ha de darse a dicho atributo? ¿Qué método de envío hay que especificar para el form si se envían archivos? Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 146: HTML Facil

Crear una cuenta de hosting gratuita en un servidor web.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº29 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

CREAR UNA CUENTA DE HOSTING GRATUITA EN UN SERVIDOR WEB HTML Y ACCEDER VÍA PANEL DE ADMINISTRACIÓN CPANEL. (CU00729B)

Page 147: HTML Facil

Crear una cuenta de hosting gratuita en un servidor web.

© aprenderaprogramar.com, 2006-2029

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

Page 148: HTML Facil

Crear una cuenta de hosting gratuita en un servidor web.

© aprenderaprogramar.com, 2006-2029

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.

Page 149: HTML Facil

Crear una cuenta de hosting gratuita en un servidor web.

© aprenderaprogramar.com, 2006-2029

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=8ggfg8sfdfd17c98efdghj99638c764&token=-576345454 While you wait for your account to activate, please 'like' us at http://www.facebook.com/free.byethost best regards byethost7.com

Acto seguido se nos indicará que la activación fue realizada con éxito y se nos enviará un nuevo correo electrónico con la información detallada de nuestros datos de acceso. El correo que nos envía el proveedor del servicio de hosting (en nuestro caso Byethost) con la información de acceso detallada tiene más o menos el siguiente contenido:

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

Además nos envían los datos de acceso: Cpanel Username: b7_datos Cpanel Password: elpassword Your url: http://apr2.byethost7.com or http://www.apr2.byethost7.com FTP Server: ftp.byethost7.com FTP Loging: b7_datos FTP Password: elpassword MySQL Database Name: must create in Cpanel MySQL Username: b7_datos MySQL Password: elpassword MySQL Server: see CPanel Cpanel URL: http://cpanel.byethost7.com

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

Page 150: HTML Facil

Crear una cuenta de hosting gratuita en un servidor web.

© aprenderaprogramar.com, 2006-2029

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

Page 151: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº30 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

SUBIR NUESTRA WEB AL SERVIDOR HTML (INTERNET) MEDIANTE EL EXPLORADOR DE ARCHIVOS DEL CPANEL. (CU00730B)

Page 152: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

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

Page 153: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

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

Page 154: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

Nosotros lo que vamos a hacer en primer lugar es borrar todos los ficheros index.* donde * puede ser php, htm o HTML de la carpeta ‘htdocs’. Para ello, seleccionaremos todos los archivos index, y 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.

Page 155: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

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.

Page 156: HTML Facil

Subir nuestra web al servidor HTML mediante el explorador de archivos.

© aprenderaprogramar.com, 2006-2029

EJERCICIO Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuación sube los tres documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre una página y otra. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com. 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

Page 157: HTML Facil

Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº31 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

¿QUÉ ES Y PARA QUÉ SIRVE JAVASCRIPT? EMBEBER JAVASCRIPT EN HTML. ALTERNATIVAS. EJEMPLO SENCILLO. (CU00730B)

Page 158: HTML Facil

Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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

Page 159: HTML Facil

Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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.

Page 160: HTML Facil

Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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

Page 161: HTML Facil

Embeber JavaScript en HTML. Alternativas. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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

Page 162: HTML Facil

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº32 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B)

Page 163: HTML Facil

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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

Page 164: HTML Facil

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

Ahora podemos preguntarnos: ¿para crear documentos HTML necesitamos CSS? La respuesta es que HTML y CSS son dos cosas distintas, pero que sin embargo suelen ir muy ligadas y no se entienden la una sin la otra. 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>

Page 165: HTML Facil

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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>

Page 166: HTML Facil

Aplicar CSS en documentos HTML. Utilidades. Ejemplo sencillo.

© aprenderaprogramar.com, 2006-2029

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

Page 167: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº33 del Tutorial básico “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP. EJERCICIO RESUELTO EJEMPLO SENCILLO. (CU00733B)

Page 168: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

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:

Page 169: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

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.

Page 170: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

<html>

<head> <title>HTML con PHP – aprenderaprogramar.com</title> </head>

<body>

Esto es una página HTML con código PHP incrustado.

<br />

<?php

echo "Esto es código PHP incrustado."

?>

</body>

</html>

Si solicitáramos a un servidor que nos muestre esta página, la visualizáramos en nuestro navegador y le pidiéramos a éste que muestre el código fuente, el código generado es código HTML. Es decir, aunque en el archivo ejemplo1.php exista código PHP, después de que el intérprete PHP haya procesado el código PHP de la página todo lo que devuelve el servidor es código HTML. Si visualizáramos la página en sí, comprobaríamos que no podemos distinguir qué texto ha sido creado como HTML y qué texto proviene de una instrucción echo (instrucción para imprimir por pantalla) de PHP. ¿Por qué? Porque el intérprete PHP se encarga de transformar el código PHP en HTML y eso es lo que podemos ver en nuestro navegador. En nuestro navegador no podemos ver el código fuente PHP porque ese código no nos llega. Nos llega el código ya transformado en HTML. Para el segundo de los casos vamos a suponer que el código se encuentra en un archivo llamado 'ejemplo2.php'. En esta ocasión todo el contenido va a aparecer dentro de etiquetas de PHP como si fuera PHP y usaremos una instrucción echo para indicarle al intérprete que devuelva como HTML todo el contenido dentro de esa instrucción.

<?php echo "

<html>

<head> <title>HTML con PHP – aprenderaprogramar.com</title> </head>

<body> Esto es una página HTML generada con código PHP incrustado. </body>

</html>

";

?>

Page 171: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

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

Page 172: HTML Facil

Generar documentos HTML usando lenguaje PHP.

© aprenderaprogramar.com, 2006-2029

desarrolladores o programadores web. Para ello necesitaremos aprender un lenguaje de programación que nos permita realizar cosas que HTML no permite, como la interacción con bases de datos o realizar cálculos o procesos que requieren de programación. HTML es un lenguaje muy limitado y no es suficiente con saber HTML para poder crear páginas web atractivas hoy día. Las páginas web se suelen basar en HTML combinado con otros lenguajes como Javascript, CSS y un lenguaje de programación que interacciona con bases de datos, que puede ser PHP u otro. Existen distintos lenguajes de programación web que nos permitirían progresar como programadores, como PHP, JSP, ó ASP.NET entre otros. PHP es uno de los lenguajes más populares, es gratuito, muy potente y usado por millones de servidores en todo el mundo. En este curso no vamos a profundizar en PHP ni en ninguno de los otros lenguajes, pero dada la estrecha relación de PHP con HTML y su interés para personas que quieran seguir progresando como desarrolladores web, hemos creído de interés realizar una introducción a este lenguaje. La realidad es que la programación web requiere el conocimiento de diferentes lenguajes. En las grandes empresas, suelen existir especialistas para cada una de las ramas de la programación web (por ejemplo especialistas en HTML, en JavaScript, en CSS, en lenguajes como PHP u otros, etc.). Si tienes interés en saber cuáles son los lenguajes y conocimientos que se utilizan hoy en día en los desarrollos web, dónde encontrar cursos relacionados con esos conocimientos y cuál podría ser un plan formativo para un programador web, te recomendamos que leas este interesante artículo: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=702:ique-es-y-que-estudiar-para-ser-programador-web-itinerario-de-formacion-plan-de-estudios-o-de-carrera&catid=39:orientacion-academica&Itemid=189 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

Page 173: HTML Facil

Final curso tutorial programación web HTML desde cero.

© aprenderaprogramar.com, 2006-2029

Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha revisión: 2029 Resumen: Entrega nº34 del Tutorial básico: “HTML desde cero”.

Autor: Enrique González Gutiérrez

APRENDERAPROGRAMAR.COM

FINAL DEL CURSO

TUTORIAL

PROGRAMACIÓN WEB

HTML DESDE CERO DE

APRENDER A PROGRAMAR

(CU00734B)

Page 174: HTML Facil

Final curso tutorial programación web HTML desde cero.

© aprenderaprogramar.com, 2006-2029

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