Está en la página 1de 174
TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO. Objetivos HTML es el lenguaje más básico
TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO. Objetivos HTML es el lenguaje más básico

TUTORIAL BÁSICO DEL PROGRAMADOR WEB:

HTML DESDE CERO.

Objetivos

BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO. Objetivos HTML es el lenguaje más básico para la

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.

fundamentos para la creación de páginas web usando HTML. INTRODUCCIÓN A HTML. QUÉ ES Y PARA
INTRODUCCIÓN A HTML. QUÉ ES Y PARA QUÉ SIRVE HTML. HIPERVÍNCULOS EN HTML. LISTAS EN
INTRODUCCIÓN A HTML. QUÉ ES Y PARA QUÉ SIRVE HTML.
HIPERVÍNCULOS EN HTML.
LISTAS EN HTML.
TABLAS EN HTML.
CREACIÓN DE UN PORTAL BÁSICO UTILIZANDO 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

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.

FORMULARIOS EN HTML. MÉTODOS DE ENVÍO: GET Y POST. CAMPOS DE TEXTO Y BOTONES.

Duración

90 horas de dedicación efectiva, incluyendo lecturas, estudio y ejercicios.

Dirección, modalidades y certificados

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

Indice del curso “Tutorial básico programador web: HTML desde cero”.
“Tutorial básico programador web: HTML desde cero”. APRENDERAPROGRAMAR.COM INDICE DEL CURSO “TUTORIAL
APRENDERAPROGRAMAR.COM INDICE DEL CURSO “TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO”(CU00701B)
APRENDERAPROGRAMAR.COM
INDICE DEL CURSO
“TUTORIAL BÁSICO DEL
PROGRAMADOR WEB:
HTML DESDE
CERO”(CU00701B)

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.

Para más información: contacto@aprenderaprogramar.com

Autor: Enrique González Gutiérrez

C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

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

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

INDICE DEL CURSO

programador web: HTML desde cero”. INDICE DEL CURSO 1. INTRODUCCIÓN A HTML 1.1. Introducción:

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.

Para más información: contacto@aprenderaprogramar.com

C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

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

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

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.

6.3 ¿Qué es y para qué sirve PHP? Ejemplos básicos. Próxima entrega: CU00702B Acceso al curso

Próxima entrega: CU00702B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

Para más información: contacto@aprenderaprogramar.com

C/Los Guanches, 41 38205 La Laguna Tenerife España CIF 54042040K

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

Orientación curso “Tutorial básico programador web: HTML desde cero”
“Tutorial básico programador web: HTML desde cero” APRENDERAPROGRAMAR.COM ORIENTACIÓN SOBRE EL CURSO
APRENDERAPROGRAMAR.COM ORIENTACIÓN SOBRE EL CURSO “TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO”
APRENDERAPROGRAMAR.COM
ORIENTACIÓN SOBRE EL
CURSO “TUTORIAL BÁSICO
DEL PROGRAMADOR
WEB: HTML DESDE CERO”
(CU00702B)

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, 2006-2029

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

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

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

“TUTORIAL BÁSICO DEL PROGRAMADOR WEB: HTML DESDE CERO” HTML es el primer lenguaje que una persona

HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web.

HTML no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. Es un lenguaje descriptivo, formado por una serie de etiquetas que el navegador interpretará de una u otra forma para mostrar distintos contenidos por pantalla. Este curso, que estamos comenzando, va dirigido a aquellas personas que quieran adquirir unos fundamentos básicos para crear páginas web con vistas a poder desarrollar en el futuro páginas web atractivas y de cierta complejidad. No vamos a desarrollar un manual de referencia de HTML, sino un curso básico paso

a paso. No vamos a contemplar todos los aspectos del lenguaje HTML, sino aquellos que consideramos

básicos desde el punto de vista didáctico, con vistas a que posteriormente la persona que lo desee amplíe sus conocimientos. Nuestro objetivo es ser claros, sencillos y breves, y para eso tenemos que centrarnos en determinadas cuestiones de HTML y dejar de lado otras.

Como conocimientos previos para iniciar este curso recomendamos (seguir la recomendación o no queda a criterio del alumno y/o profesor que vayan a seguir el curso) los siguientes: Ofimática básica (saber copiar, pegar, mover y abrir archivos).

Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.

Aprender HTML requiere tiempo y esfuerzo. Para hacer ese recorrido más llevadero, te recomendamos que utilices los foros de aprenderaprogramar.com, herramienta a disposición de todos los usuarios de la web (http://www.aprenderaprogramar.com/foros/), y que te servirá para consultar dudas y recabar orientación sobre cómo enfrentarte a los contenidos. Entre los miembros del portal web y otros usuarios, trataremos de ayudarte para que el estudio te sea más llevadero y seas capaz de adquirir los conocimientos necesarios y avanzar como programador.

El tiempo necesario (orientativamente) para completar el curso incluyendo prácticas con ordenador, suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 90 horas de

dedicación efectiva o aproximadamente un mes y medio con una dedicación de 3 horas diarias de lunes

a viernes. Aprender a crear páginas web requiere dedicación y esfuerzo.

El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene algunas indicaciones específicas para usuarios de Windows, pero también puede ser utilizado en otros entornos (Linux, Macintosh, etc.).

Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultará de gran utilidad.

Próxima entrega: CU00703B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Introducción: internet y cómo se transmite la información.
Introducción: internet y cómo se transmite la información. INTRODUCCIÓN A HTML: APRENDERAPROGRAMAR.COM INTERNET Y
INTRODUCCIÓN A HTML: APRENDERAPROGRAMAR.COM INTERNET Y LOS FLUJOS DE INFORMACIÓN. ESTRUCTURA CLIENTE-
INTRODUCCIÓN A HTML:
APRENDERAPROGRAMAR.COM
INTERNET Y LOS FLUJOS
DE INFORMACIÓN.
ESTRUCTURA CLIENTE-
SERVIDOR-NAVEGADOR
(CU00703B)

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, 2006-2029

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

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

INTRODUCCIÓN: INTERNET Y CÓMO SE TRANSMITE LA INFORMACIÓN.

Vamos a explicar qué ocurre cuando escribimos una dirección web en nuestro navegador (el programa que usamos para ver páginas web), desde que tecleamos la dirección hasta que vemos la página solicitada en nuestro monitor. Por ejemplo, cuando escribimos la dirección http://www.aprenderaprogramar.com

escribimos la dirección http://www.aprenderaprogramar.com Primero escribimos la dirección o URL del sitio we b en

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.

mostrando el resultado en la pantalla de nuestro ordenador. En el gráfico anterior podemos ver cómo

En el gráfico anterior podemos ver cómo desde el cliente (nuestro ordenador en casa) se envía una petición al servidor y cómo éste devuelve una respuesta con los datos. Cuando decimos http nos referimos a un protocolo de transmisión de datos: esto simplemente son una serie de reglas que usan los ordenadores para comunicarse entre sí a través de internet. Sobre este protocolo no nos hace falta comentar nada más, no vamos a estudiarlo porque no nos resulta necesario para el objetivo del curso.

A partir de aquí, el navegador que estemos utilizando interpretará esos datos y los mostrará en la pantalla. Es por ello, que podemos obtener visualizaciones distintas para cada navegador, porque son éstos los que interpretan los datos obtenidos que son siempre los mismos para una misma petición de página web. Por ejemplo, podemos usar como navegador Internet Explorer ó Firefox, y según usemos uno u otro obtener resultados distintos porque cada navegador interpreta la información de una manera distinta.

© aprenderaprogramar.com, 2006-2029

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

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

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

NAVEGADORES MÁS USADOS

 

Mozilla Firefox 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.

MOZILLA

MOZILLA

FIREFOX

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

INTERNET Conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo

Conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995.

EXPLORER

Este navegador es uno de los más usados por los usuarios ya que viene por defecto en el sistema operativo Windows.

SAFARI

SAFARI Safari es un navegador web de código cerrado desarrollado por Apple (fabricante de los famosos

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.

EXPLORER

GOOGLE

CHROME

ordenador de Apple. EXPLORER GOOGLE CHROME Google Chrome es un navegador web desarrollado por Google.

Google Chrome es un navegador web desarrollado por Google. Nació en el año 2008, lo que lo convierte en uno de los navegadores más jóvenes del mercado. Es uno de los navegadores más rápidos y ligeros que existe. También es muy usado por los programadores ya que cumple los estándares web e incluye herramientas interesantes.

Próxima entrega: CU00704B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

¿Qué es y para qué sirve HTML?

¿Qué es y para qué sirve HTML?
¿Qué es y para qué sirve HTML? APRENDERAPROGRAMAR.COM ¿QUÉ ES Y PARA QUÉ SIRVE HTML? EL
APRENDERAPROGRAMAR.COM ¿QUÉ ES Y PARA QUÉ SIRVE HTML? EL LENGUAJE MÁS IMPORTANTE PARA CREAR PÁGINAS
APRENDERAPROGRAMAR.COM
¿QUÉ ES Y PARA QUÉ SIRVE
HTML? EL LENGUAJE MÁS
IMPORTANTE PARA CREAR
PÁGINAS WEB. HTML TAGS
(CU00704B)

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, 2006-2029

¿Qué es y para qué sirve HTML?

¿Qué es y para qué sirve HTML?

¿QUÉ ES Y PARA QUÉ SIRVE HTML?

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

a otras páginas, saltos de línea, listas, tablas, etc. Podríamos decir que HTML sirve para crear

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.

sin ambigüedad. Este sencillo ejemplo mostraría por pantalla lo siguiente. © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

¿Qué es y para qué sirve HTML?

¿Qué es y para qué sirve HTML?

¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.

ALGO DE HISTORIA SOBRE EL LENGUAJE MÁS IMPORTANTE DE INTERNET

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.

que tienen lugar en el ámbito de los desarrollos web. Tim Berners-Lee Próxima entrega: CU00705B Acceso

Tim Berners-Lee

Próxima entrega: CU00705B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

¿Es HTML un lenguaje de programación? Lenguajes de etiquetas.
HTML un lenguaje de programación? Lenguajes de etiquetas. APRENDERAPROGRAMAR.COM ¿ES HTML UN LENGUAJE DE
APRENDERAPROGRAMAR.COM ¿ES HTML UN LENGUAJE DE PROGRAMACIÓN? EJEMPLO CONCEPTO DE LENGUAJE DE ETIQUETAS. (CU00705B)
APRENDERAPROGRAMAR.COM
¿ES HTML UN LENGUAJE
DE PROGRAMACIÓN?
EJEMPLO CONCEPTO DE
LENGUAJE DE ETIQUETAS.
(CU00705B)

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, 2006-2029

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

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

¿ES HTML UN LENGUAJE DE PROGRAMACIÓN?

En principio diremos que no, aunque de forma coloquial muchas veces se oigan referencias a HTML como si fuera un lenguaje de programación. HTML es un lenguaje de etiquetas. Estas etiquetas (tag) HTML comunican al navegador cual es la información a mostrar por pantalla, además del formato de dicha información. Es por ello que no puede definirse como un lenguaje de programación, sino como un sistema de etiquetas. Veámoslo con un ejemplo.

como un sistema de etiquetas. Veámoslo con un ejemplo. EJEMPLO PARA ENTENDER EL CONCEPTO DE LENGUAJE

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

   

1

2

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

3

4

Java

5

}

6

 

}

7

}

8

9

10

 

<html>

 

<body>

1

<p>1</p>

2

<p>2</p>

3

<p>3</p>

<p>4</p>

4

HTML

<p>5</p>

5

<p>6</p>

6

<p>7</p>

7

<p>8</p>

8

<p>9</p>

<p>10</p>

9

</body>

10

</html>

© aprenderaprogramar.com, 2006-2029

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

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

Como podemos observar, en el ejemplo anterior, HTML no tiene la capacidad de contar y debemos escribir nosotros todo lo que queremos que salga por pantalla. Sin embargo, vemos como en Java podemos indicar que cuente del 1 al 10 y que lo muestre por pantalla sin escribir completamente lo que queremos visualizar.

Clásicamente se dice que los lenguajes de programación incluyen tres capacidades básicas de generar flujos de procesos: la secuencial (secuencias de instrucciones), la condicional (capacidad para tomar decisiones o ejecutar un proceso u otro en función del valor de uno o varios parámetros) y la de repetición (capacidad para repetir un proceso un cierto número de veces). Los lenguajes clásicos como C, C++, Java, C#, Visual Basic, Fortran, etc. cuentan con estas capacidades. HTML no cuenta con ellas, no porque sea mejor ni peor sino porque es una cosa distinta.

En resumen, podríamos decir que HTML no es un lenguaje de programación, es un lenguaje de maquetación web o lenguaje de etiquetas destinado a crear estructuras de documentos HTML.

Próxima entrega: CU00706B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

¿Cuáles son las versiones de HTML ? Strict, Transitional, Frameset.
son las versiones de HTML ? Strict, Transitional, Frameset. APRENDERAPROGRAMAR.COM ¿CUÁLES SON LAS VERSIONES DE
APRENDERAPROGRAMAR.COM ¿CUÁLES SON LAS VERSIONES DE HTML? DIFERENCIAS ENTRE STRICT, TRANSITIONAL Y FRAMESET. HTML 4
APRENDERAPROGRAMAR.COM
¿CUÁLES SON LAS
VERSIONES DE HTML?
DIFERENCIAS ENTRE
STRICT, TRANSITIONAL Y
FRAMESET. HTML 4 Y
HTML 5. (CU00706B)

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, 2006-2029

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

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

¿CUÁLES SON LAS VERSIONES DE HTML?

El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rápido crecimiento de la web, surgió la necesidad de crear un estándar para que tanto los programadores como los navegadores pudieran basarse en unas mismas normas para escribir HTML. Cada versión de HTML establece unas normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir.

son las etique tas válidas y cómo se deben escribir. Los estándares oficiales HTML son el

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.

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 2.0

HTML 3.2

La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.01

La última especificación oficial de HTML se publicó en diciembre de 1999 y se denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group) que comenzó el desarrollo del HTML 5, cuyo primer borrador oficial se publicó en enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML, y actualmente W3C está trabajando para el lanzamiento del estándar HTML 5.0, dentro del cual ha decidido integrar el XHTML.

HTML 5.0, 5.1 y 5.2

El consorcio internacional W3C marcó las siguientes fechas para liberación de los estándares de especificación: 2014/2015 para HTML 5.0, 2016 para HTML 5.1 y 2019 para HTML 5.2

© aprenderaprogramar.com, 2006-2029

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

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

Hasta el momento la versión de HTML más utilizada ha venido siendo la 4.01. Esta versión fue definida por la W3C (Comité Internacional que define los estándares web) hace varios años. Actualmente ya está disponible la nueva versión de HTML, denominada HTML 5. Esta versión ya se está usando de modo experimental y se espera que se imponga como estándar en los próximos años.

Además de cada versión, cada una tiene variantes (digamos que “distintas formas”). Cuando escribimos un documento HTML debemos indicar en una línea inicial qué versión y variante es la que estamos usando de forma que cualquier persona que lea ese documento HTML sepa qué versión y variante se ha empleado. Las variantes del HTML 4.01 son:

HTML 4.01

Strict

En este tipo de documentos podemos usar etiquetas HTML 4.01, pero no se aceptan etiquetas obsoletas, es decir, etiquetas propias de versiones más antiguas. Es la versión que si usamos en teoría nos debería dar un resultado óptimo en los navegadores más modernos. Esto no siempre es así, como explicaremos un poco más adelante.

HTML 4.01

Transitional

En este tipo de documentos se pueden usar todas las etiquetas de todas las versiones de HTML. Usar esta variante de HTML plantea el interrogante de si es correcto permitir el uso de etiquetas obsoletas que podrían dejar de funcionar en las proximas versiones de los navegadores. Sin embargo, este es el estándar más usado, porque combina la posibilidad de usar etiquetas más antiguas y etiquetas más modernas, de forma que podamos aspirar a una mejor visualización en la mayor parte de los navegadores.

HTML 4.01

Frameset

Este tipo de documentos tiene soporte para frames. Los frames son unos marcos a modo de pequeñas subventanas dentro de una misma página web que se usaban mucho hace unos años pero que hoy en día se usan cada vez menos. Este tipo de HTML podemos considerarlo anticuado, porque hay otras formas de diseñar páginas web sin frames más modernas y útiles que nos permiten obtener el mismo resultado de forma más eficiente.

permiten obtener el mismo resultado de forma más eficiente. En la figura podemos ver cómo el

En la figura podemos ver cómo el ser más estrictos supone que tengamos que usar un menor número de etiquetas.

© aprenderaprogramar.com, 2006-2029

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

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

¿CUÁL ELIJO, Y CÓMO?

No te preocupes demasiado por utilizar una versión “correcta y concreta” sino por crear páginas web

que se vean bien. Para ello debes aprender cómo se construye y cuál es la lógica del HTML, más que una versión concreta de éste. Ten en cuenta que hay diversidad de versiones y que no todos los navegadores se ciñen a los estándares, con lo cual no tiene demasiado sentido preocuparse por ceñirse

a una versión. Te puede resultar un poco extraño, pero cuando adquieras experiencia en desarrollos web comprobarás que las normas para los desarrollos web no están 100 % claras.

Si ya sabías HTML pero nunca has separado contenido y diseño, o todos estos estándares te suenan a

chino, usa el HTML normal, en concreto la versión 4.01, que es la última. Elige la rama Strict si necesitas

cumplir el estándar Strict por algún motivo (por ejemplo porque te lo pida un cliente así específicamente). Usar la variante Strict puede resultar un poco más complicado porque tenemos más limitaciones. Por ello nosotros en este curso usaremos el 4.01 Transitional que es la variante más utilizada y podemos decir que intermedia: ni demasiadas restricciones ni demasiada libertad. El XHTML es un lenguaje que va a quedar integrado dentro de HTML 5 y que no estudiaremos en este curso.

En un archivo HTML debemos indicar qué versión y variante estamos usando. Para indicar ésto hay que poner una línea al principio de la página web (del archivo donde está el contenido). No es una etiqueta, por tanto es algo rara y no hay que cerrarla ni ponerla en minúsculas. Eso sí, debemos ponerla en todos nuestros documentos.

Para HTML 4.01 Strict escribiríamos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Para HTML 4.01 Transitional (recomendado) escribiríamos:

<!DOCTYPE

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

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

En este curso usaremos HTML 4.01 Transitional para conseguir documentos HTML 4.01.

EJEMPLO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>Esto es una prueba de página HTML 4.01 Transitional</p>
</body>
</html>

© aprenderaprogramar.com, 2006-2029

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

¿Cuáles son las versiones de HTML ? Strict, Transitional, Frameset.
son las versiones de HTML ? Strict, Transitional, Frameset. Vista en el navegador Google Chrome que

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:

Todos los programas -> Accesorios -> Bloc de notas: Escribimos en el bloc de notas el

Escribimos en el bloc de notas el código del ejemplo anterior como un simple texto.

Escribimos en el bloc de notas el código del ejemplo anterior como un simple texto. ©

© aprenderaprogramar.com, 2006-2029

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

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

A continuación en el menú Archivo elegimos la opción Guardar como… e indicamos que queremos guardar el archivo en el directorio raíz de la unidad C con el nombre ejemplo.html

directorio raíz de la unidad C con el nombre ejemplo.html Una vez realizado todos estos pasos,

Una vez realizado todos estos pasos, abrimos el archivo creado haciendo doble click sobre él desde el explorador de archivos de Windows. Si tenemos un navegador web instalado se nos abrirá automáticamente la página web que hemos creado en el ejemplo.

No te preocupes por no estudiar HTML 5 ahora, todo lo que aprendas sobre HTML te servirá cuando estudies HTML 5.

También es normal que no comprendas bien el significado de todos los términos en el archivo HTML, pues los iremos explicando poco a poco. De momento, nuestro objetivo es irnos familiarizando con los distintos aspectos que iremos estudiando.

Próxima entrega: CU00707B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

¿Qué necesito para escribir códi go HTML y crear páginas web?
necesito para escribir códi go HTML y crear páginas web? APRENDERAPROGRAMAR.COM ¿QUÉ NECESITO PARA ESCRIBIR
APRENDERAPROGRAMAR.COM ¿QUÉ NECESITO PARA ESCRIBIR CÓDIGO HTML Y CREAR PÁGINAS WEB? IDEAS PARA CREAR BUENAS
APRENDERAPROGRAMAR.COM
¿QUÉ NECESITO PARA
ESCRIBIR CÓDIGO HTML Y
CREAR PÁGINAS WEB?
IDEAS PARA CREAR
BUENAS WEB (CU00707B)

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, 2006-2029

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

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

¿QUÉ NECESITO PARA ESCRIBIR CÓDIGO HTML Y CREAR PÁGINAS WEB?

Los requisitos principales y fundamentales, para escribir código HTML y crear páginas web, son básicamente dos: saber HTML (esto lo conseguirás siguiendo este curso) y un editor de texto (nosotros utilizaremos el Notepad++, aunque se pueden usar otros editores o programas). Hay muchos profesionales que crean sus páginas en Dreamweaver, usando Flash u otros programas o tecnologías.

Dreamweaver, usando Flash u otros programas o tecnologías. Esta forma de crear páginas web tiene a

Esta forma de crear páginas web tiene a favor la fácil creación de éstas pero, si quieres hacer páginas web de calidad y tener un control total sobre el código generado, lo primero es saber HTML sin más.

Para crear páginas web obviamente necesitas un ordenador y un navegador (Explorer, Firefox, Chrome o similar) instalado. ¿Necesitamos conexión a internet para crear páginas web? La respuesta es que no:

podemos crear nuestras páginas en nuestro propio ordenador y a posteriori subirlas a un servidor remoto para que estén accesibles en internet desde cualquier parte del mundo. En este curso vamos a trabajar inicialmente en local (es decir, en nuestro propio ordenador sin necesidad de conexión a internet), y más adelante veremos cómo subir una web a un servidor. También podríamos generar una página web directamente sobre un servidor, pero por motivos de didáctica y sencillez consideramos preferible empezar trabajando en local. Una vez tengas conocimientos más avanzados, podrás hacerlo como te resulte más cómodo.

Ahora indicaremos unos sencillos consejos que deberías tener en cuenta antes de crear tus páginas web.

Tomar ideas.

Ojo, tomar ideas no es copiar contenidos con derechos de propiedad intelectual, no debes reproducir el trabajo de otros sin valorar si estás vulnerando el derecho de propiedad intelectual. Sin embargo, es importante inspirarte en otros sitios, buscar contenidos que te puedan servir, combinaciones de colores que se vean bien, y diseños organizados que te puedan ser útiles.

No uses toda la gama de colores en tu página web.

No crees una página web que parezca un arcoiris: inicialmente te puede parecer curiosa, pero un usuario que visite tu página web, se sentirá molesto con demasiados colores.

Por ejemplo, es preferible utilizar el clásico fondo blanco y texto negro o azul, que el fondo rosa con puntos morados y el texto verde fosforescente. Cuida que los colores de tu página tengan una buena combinación, y que hagan fácil la lectura.

© aprenderaprogramar.com, 2006-2029

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

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

Ejemplo mal diseño, colores e imágenes:

páginas web? Ejemplo mal diseño, colores e imágenes: • Se ve mejor si cabe en la

Se ve mejor si cabe en la pantalla.

Procura que tu diseño esté basado en el tamaño de la pantalla, no busques escribir una novela completa en la página inicial de tu web. Es preferible que las páginas no tengan scroll, o que si lo tienen éste no sea demasiado largo.

Administra tus imágenes.

Tu página se verá más atractiva si usas imágenes. No obstante, debes usarlas de una forma moderada porque un excesivo número de imágenes puede ser también perjudicial si no permite una buena lectura del contenido.

Haz que tu sitio sea fácil de navegar.

Por muy obvia que parezca esta recomendación, debes dividir la información en diferentes secciones y ubicar los enlaces a las mismas donde la gente espere encontrarlos.

Hay algunos sitios donde sólo es posible desplazarse hacia delante o hacia atrás. En realidad, eso no es "navegar". Es necesario que el visitante pueda elegir en todo momento qué sección quiere visitar y en qué orden: por ejemplo tener un menú es algo generalmente aconsejable. No te olvides de incluir en todas las páginas un enlace a la página de inicio (la primera página) para facilitar la navegación.

© aprenderaprogramar.com, 2006-2029

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

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

Ejemplo de menú:

códi go HTML y crear páginas web? Ejemplo de menú: También es interesante incluir el logotipo

También es interesante incluir el logotipo de tu sitio en todas las páginas, porque no siempre el visitante ingresa al sitio por la página de inicio; si proviene del enlace de un buscador, es probable que ingrese por cualquier sección, en ese caso, el logotipo en todas las páginas ayuda a ubicar al posible visitante donde está.

Mantén tu sitio actualizado.

Nada es más desagradable que volver a un sitio tiempo después de una visita y no encontrar ningún cambio. Realizar cambios frecuentes crea en los visitantes la idea de que el contenido es valioso y vale la pena darse una vueltecita a menudo.

Prográmate un esquema de actualización y cúmplelo.

Renueva tus promociones, agrega más información sobre nuevos productos, servicios o artículos, incluye testimonios de clientes o usuarios satisfechos, usa tu imaginación.

También puedes incluir la fecha de la última actualización en un lugar visible de tu página de inicio, o bien mantener un apartado donde se vea que los contenidos están actualizados.

Promociona tu web: on-line y off-line.

Envía tu sitio a los principales motores de búsqueda y directorios (google, yahoo, etc.). Dedica tiempo a realizar un trabajo a conciencia, el mismo se justificará plenamente con un mejor posicionamiento en los buscadores.

Después de todo ¿de qué te sirve tener un sitio en Internet si nadie lo encuentra?

En este curso aprenderemos a utilizar palabras claves (keywords) que describan tu negocio lo mejor posible. Aquí conviene situarse del lado de quien busca, ¿qué keywords utilizará tu posible cliente para buscar un sitio de tus características? Haz una lista, pregunta a amigos/as y conocidos.

© aprenderaprogramar.com, 2006-2029

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

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

No te olvides de incluir tu dirección (http://www.tusitio.com) en toda papelería y comunicación que emitas: tarjeta comercial, papelería, facturas, remitos, recibos, folletos, faxes, bolsas, publicidad, etc.

Información para tus clientes.

Incluye un enlace al pié de cada página para que puedan comunicarse contigo. En este curso aprenderemos cómo hacerlo. El agregar información con la dirección física, teléfono completo (con el código del país), fax, etc, ayuda a crear confianza. Después de todo tú y tu web existen en el "mundo real" no son un ente imaginario perdidos en el ciberespacio.

Cuando te sea posible, incluye un campo donde tus usuarios puedan ingresar el email para recibir un boletín o newsletter con novedades sobre tus productos, esto ayuda a crear confianza y lealtad a tu página. Otra opción es la suscripción mediante RSS ó Atom, que son servicios para poder recibir las novedades que se van publicando en tu página.

Recuerda que ahora puedes utilizar las redes sociales para promocionar tu web o empresa online: Facebook, YouTube, Slideshare, Linkedin, etc.

Todas estas ideas pueden ayudarte a tener un sitio web de calidad y bien posicionado en los buscadores. No tienes por qué cumplirlos todos, ni son todos los puntos a tener en cuenta para que tu sitio esté el primero en los buscadores, pero pueden resultar útiles. No te preocupes si ahora algunos conceptos no te quedan claros porque a medida que trabajes en desarrollos web irás adquiriendo una visión más completa.

Próxima entrega: CU00708B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Preparando el entorno de desarrollo. Descargar e instalar Notepad++.
el entorno de desarrollo. Descargar e instalar Notepad++. APRENDERAPROGRAMAR.COM PREPARANDO EL ENTORNO DE
APRENDERAPROGRAMAR.COM PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++ COMO EDITOR DE CÓDIGO
APRENDERAPROGRAMAR.COM
PREPARANDO EL ENTORNO
DE DESARROLLO.
DESCARGAR E INSTALAR
NOTEPAD++ COMO EDITOR
DE CÓDIGO (CU00708B)

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, 2006-2029

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

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

PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++.

Vamos a comenzar a preparar el entorno de desarrollo para poder crear páginas web. Lo primero que debemos hacer es descargar el editor de texto Notepad++ e instalarlo. Para ello nos vamos a ir a la dirección siguiente: http://notepad-plus-plus.org

a ir a la dirección siguiente: http://notepad-plus-plus.org Cuando la página haya terminado de cargar, hacemos click

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.

el aspecto de la página puede cambiar cada pocos meses. En la página web que nos

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.

v6.9.6.2 Installer. El archivo tendrá un nombre similar a npp.6.6.9.Installer.exe. © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

Una vez descargado el archivo, lo ejecutamos (click sobre el archivo, botón derecho del ratón, ejecutar como administrador) para instalarlo en nuestro ordenador. Si no sabes cómo instalar haz simplemente doble click sobre el archivo. El proceso de instalación es muy simple y no entraremos a explicarlo con más detalle.

Cuando tengamos instalado el programa, ya dispondremos del editor de texto Notepad++, con el que podremos abrir y editar cualquier fichero HTML. Podremos acceder al programa desde Inicio Programas Notepad++ ó desde el icono de acceso directo en el escritorio si se ha creado.

EJEMPLO: COMENZAR A USAR NOTEPAD++

Desde el explorador de archivos de Windows, creamos una carpeta llamada curso_html_apr2 en la unidad C.

Una vez creada la carpeta, entramos en ella. Abrimos Notepad++ y pulsamos en Archivo -- > Guardar. Como nombre de archivo escibimos CU00708B.html (este nombre de archivo es solo un ejemplo, puedes ponerle el que tú quieras). Paso seguido, cierra el archivo. Para editar este archivo con el programa Notepad++, podemos hacer dos cosas. Bien abrir Notepad++ y elegir Archivo -- > Abrir y seleccionar el archivo, o bien hacemos lo siguiente:

Clickamos sobre el archivo con el botón derecho del ratón y se mostrará un menu similar a éste (Nota:

en algunos casos aparecen conflictos entre la versión de Notepad++ y la versión de Windows y este menú contextual no se muestra. En este caso, tendremos que abrir primero Notepad++ y luego la opción Abrir del menú Archivo.)

tendremos que abrir primero Notepad++ y luego la opción Abrir del menú Archivo.) © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

En el menú desplegado seleccionamos “Edit with Notepad++”. De una forma u otra, habremos abierto el archivo html con nuestro editor Notepad++.

abierto el archivo html con nuestro editor Notepad++. • Ahora escribimos el siguiente código HTML y

Ahora escribimos el siguiente código HTML y guardamos el archivo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<!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.

podemos ver el resultado obtenido en nuestro navegador. Vista en el navegador Google Chrome ©

Vista en el navegador Google Chrome

© aprenderaprogramar.com, 2006-2029

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

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

Si has seguido paso a paso todo lo que hemos expuesto y has llegado a visualizar en pantalla el texto, es que has completado correctamente la instalación de Notepad++, que es el editor que vamos a usar durante el curso. Si no has podido instalarlo o tienes problemas para usarlo, revisa las instrucciones y comprueba que las hayas seguido correctamente, consulta la ayuda de Notepad++ ó consulta en los foros de aprenderaprogramar.com para obtener ayuda.

Próxima entrega: CU00709B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Configuración básica de Notepad++ para crear páginas HTML.
Configuración básica de Notepad++ para crear páginas HTML. APRENDERAPROGRAMAR.COM CONFIGURACIÓN BÁSICA DE
APRENDERAPROGRAMAR.COM CONFIGURACIÓN BÁSICA DE NOTEPAD++. AUTOCOMPLETAR Y OTRAS VENTAJAS DE NOTEPAD++. (CU00709B)
APRENDERAPROGRAMAR.COM
CONFIGURACIÓN BÁSICA
DE NOTEPAD++.
AUTOCOMPLETAR Y OTRAS
VENTAJAS DE NOTEPAD++.
(CU00709B)

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, 2006-2029

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

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

CONFIGURACIÓN BÁSICA DE NOTEPAD++ PARA CREAR PÁGINAS HTML.

Antes de poder comenzar a crear páginas HTML, necesitaremos realizar una configuración básica de nuestro entorno de desarrollo. En nuestro caso, la configuración será bastante simple y consistirá en elegir la codificación con la que guardaremos nuestros ficheros HTML y seleccionar el lenguaje con el que vamos a trabajar.

HTML y seleccionar el lenguaje con el que vamos a trabajar. Lo primero que vamos a

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.

el programa, mostrando una pantalla similar a la siguiente. Para seleccionar la codificación con la que

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.

siempre que estás trabajando con esta codificación. Ahora tendremos que indicar que vamos a utilizar el

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.

algo similar a lo que se muestra en la imagen siguiente. Ya tenemos todo listo para

Ya tenemos todo listo para poder empezar a crear nuestras páginas HTML.

© aprenderaprogramar.com, 2006-2029

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

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

AUTOCOMPLETAR. UNA VENTAJA DE NOTEPAD++

Para facilitar la escritura de código Notepad++ cuenta con una opción de autocompletar, la cual se activa en la pestaña Configurar -- > Preferencias. En la ventana que nos aparecerá, tenemos que buscar la opción Autocompletar (autocompletion). Esta opción puede estar dentro de la pestaña u opción “Copia de seguridad/Autocompletar”, o en la opción “Autocompletar”, según la versión de Notepad++ que estemos usando. Debemos activar la casilla “Habilitar autocompletar en cada entrada” (Enable autocompletion on each input) para funciones y palabras (function and word completion). También activaremos “Pistas para los parámetros de la función” (Function parameters hint on input).

Ten en cuenta que la situación de los menús y opciones puede variar de una versión a otra de Notepad++, por lo que no siempre encontrarás estas opciones en el mismo sitio que las estamos describiendo.

opciones en el mismo sitio que las estamos describiendo. AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE
opciones en el mismo sitio que las estamos describiendo. AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE

AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE NOTEPAD++

Para activar el autocerrado inteligente de etiquetas HTML, en menú superior seleccionamos TextFX TextFX Settigns Autoclose XHTML/XML tag.

En algunas versiones de Notepad++ no aparece TextFX en el menú superior. En este caso, debemos;

© aprenderaprogramar.com, 2006-2029

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

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

a) En el menú Configurar -- > Preferencias. En la ventana que nos aparecerá, tenemos que buscar la

opción Autocompletar (autocompletion) como hicimos anteriormente y marcar la opción “html/xml

close tag”

b) O bien instalar el plugin TextFX Characters accediendo a Plugins, elegir TextFX Characters y pulsar

Install. Una vez instalado el plugin, activar Autoclose XHTML/XML tag.

vez instalado el plugin , activar Autoclose XHTML/XML tag. OTRAS VENTAJAS DE NOTEPAD++ Quizás te preguntes

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:

La respuesta es que tiene diversas ventajas, por ejemplo: - Consume pocos recursos del sistema. No

- Consume pocos recursos del sistema. No sobrecargarás tu ordenador porque el programa es al mismo tiempo que potente, ligero.

- Dispone de la función autocompletar que ya hemos citado, que nos facilita ayuda mientras estamos escribiendo el código.

- Permite abrir múltiples archivos simultáneamente, y reemplazar un texto en todos los archivos abiertos a la vez si así lo deseamos.

- Permite abrir dos archivos y realizar una comparación línea a línea entre ellos, indicándonos en qué líneas existen diferencias entre un archivo y otro.

- El código se nos muestra con un conjunto de colores que permite ver con claridad las etiquetas de apertura y cierre y otros elementos especiales de la codificación.

© aprenderaprogramar.com, 2006-2029

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

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

- Tiene muchísimas más posibilidades, pero no podemos citarlas todas. En conjunto, es un buen editor útil para programadores a nivel profesional y para principiantes.

- Es software libre que podemos descargar gratuitamente desde internet.

Como verás Notepad++ nos parece un buen editor de textos. Esto no quiere decir que no haya otras editores igual de buenos y potentes. De hecho, si ya eres usuario de algún otro editor puedes seguir este curso usándolo.

Próxima entrega: CU00710B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
instalar navegador Google Chrome. Visualizar páginas HTML. APRENDERAPROGRAMAR.COM DESCARGAR E INSTALAR EL NAVEGADOR.
APRENDERAPROGRAMAR.COM DESCARGAR E INSTALAR EL NAVEGADOR. VENTAJAS DE GOOGLE CHROME. FIREFOX, TAMBIÉN ENTRE LOS
APRENDERAPROGRAMAR.COM
DESCARGAR E INSTALAR EL
NAVEGADOR. VENTAJAS
DE GOOGLE CHROME.
FIREFOX, TAMBIÉN ENTRE
LOS MEJORES (CU00710B)

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, 2006-2029

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

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

LAS VENTAJAS DE GOOGLE CHROME. ¿POR QUÉ USAR CHROME?

En este curso vamos a usar Google Chrome, pero si lo prefieres por algún motivo como tenerlo ya instalado, Mozilla Firefox también nos parece una opción muy recomendable, y puedes seguir este curso también con este navegador.

y puedes seguir este curso también con este navegador. Otros navegadores como Internet Explorer también se

Otros navegadores como Internet Explorer también se pueden usar, pero en principio no es lo más recomendable por diversos motivos. Uno de ellos es que no dispone de las mismas herramientas que Chrome o Firefox, que son los navegadores más usados por programadores y desarrolladores web.

Vamos a citar algunas ventajas de Google Chrome:

- El navegador se abre muy rápidamente en comparación con otros navegadores. Google Chrome es muy ligero, por eso tarda poco en abrirse.

- El navegador tiene una buena velocidad de carga de las páginas web por las que vamos navegando. Esto se debe a su estructura interna, que también es ligera.

- Por el mero hecho de instalarlo, ya disponimos de una potente herramienta de análisis y depuración de páginas web o “Inspeccionador de elementos”. Esta herramienta es similar a la extensión “Firebug” de Mozilla Firefox. Sin embargo, en Mozilla esta extensión no viene instalada por defecto, sino que hemos de instalarla a posteriori.

- Si tenemos abiertas varias pestañas y una de ellas se tiene que cerrar debido a algún error o bloqueo, no se nos quedará colgado el programa al completo, sino únicamente la pestaña o pestañas afectadas.

DESCARGAR E INSTALAR EL NAVEGADOR GOOGLE CHROME. VISUALIZAR PÁGINAS HTML.

Para poder visualizar nuestras páginas web, vamos a instalar el navegador Google Chrome. Lo primero que tenemos que hacer para instalar dicho navegador, es descargarlo de la web oficial de Google en la dirección: http://www.google.com/chrome?hl=es

También puedes acceder simplemente escribiendo “descargar google chrome” en un buscador (Google, Yahoo, Bing, etc.) Una vez estemos en la dirección o URL de descarga se nos abrira una pantalla similar a la siguiente:

© aprenderaprogramar.com, 2006-2029

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

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
instalar navegador Google Chrome. Visualizar páginas HTML. Hacemos click en ‘Descargar Google Chrome’. Nos

Hacemos click en ‘Descargar Google Chrome’. Nos aparecerá una página donde se nos pide que aceptemos las condiciones. Aceptamos para instalar el navegador.

las condiciones. Aceptamos para instalar el navegador. El proceso normalmente comienza mostrando una pantalla que

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

ordenador (si te pide permiso para la instalación acepta para permitir el proceso). © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

Una vez descargardo e instalado, ya podremos ver páginas web con éste navegador. Para acceder a Google Chrome, nos iremos a Inicio --> Todos los programas --> Google Chrome. También podremos acceder desde el escritorio a través de un enlace directo.

LAS CUESTIONES MÁS BÁSICAS EN GOOGLE CHROME (Y EN GENERAL PARA CUALQUIER NAVEGADOR)

Al abrir el navegador Google Chrome se nos mostrará una ventana similar a la siguiente. Ten en cuenta que el aspecto puede variar según la versión de Chrome que estemos usando, por tanto tendremos que buscar las opciones según aparezcan en nuestro computador, que puede diferir en algunos detalles de lo que indicamos aquí.

diferir en algunos detalles de lo que indicamos aquí. Una vez abierto Chrome podremos abrir tantas

Una vez abierto Chrome podremos abrir tantas pestañas como queramos, introducir una dirección URL en la barra de direcciones, recargar la página actual (también podremos pulsar F5 como atajo de teclado para conseguir recargar una página) y acceder al menú de opciones de Google Chrome entre otras operaciones.

Para cambiar la página web de inicio que viene por defecto en nuestro navegador Google Chrome (la que aparece cada vez que abrimos el navegador), procederemos de la siguiente forma:

a) En algunas versiones de Chrome, tendremos que hacer click en ‘Llave inglesa’ y dentro del menú desplegable que nos aparece en la opción ‘opciones’. Se nos abrirá una nueva pestaña donde en la opción ‘Pagina de inicio’ pondremos por ejemplo http://aprenderaprogramar.com ( o la página que queramos). Otras versiones no traen llave inglesa.

© aprenderaprogramar.com, 2006-2029

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

Descargar e instalar navegador Google Chrome. Visualizar páginas HTML.
instalar navegador Google Chrome. Visualizar páginas HTML. b) En otras versiones de Chrome, haremos click en

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/

de direcciones lo siguiente (como si fuera una dirección web): chrome://settings/ © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

LIMPIAR LA CACHÉ Y OTRAS OPERACIONES ÚTILES QUE USAREMOS CON FRECUENCIA

Llamamos “caché” o “cache” a contenidos que se almacenan en nuestro navegador y que no se descargan desde internet, sino que los tenemos localmente en nuestro equipo. Estos contenidos pueden ser texto o imágenes y permite que cuando navegamos por una web las páginas se muestren más rápido ya que parte de la información no se descarga de internet (o no se actualiza desde los archivos fuente) sino que se mantiene en nuestro navegador. Sin embargo, cuando estamos creando páginas web esto puede dar lugar a resultados engañosos, ya que tras hacer una modificación puede que el navegador no la muestre por estar utilizando contenidos de la caché. Por tanto una operación que va a ser de gran utilidad, es limpiar la caché cuando deseemos que todo el contenido venga directamente de internet. Si no eliminamos la cache puede que lo que estemos visualizando en nuestra pantalla de ordenador sea información cacheada y, por lo tanto, no actualizada.

Para limpiar la caché del navegador tenemos que hacer lo siguiente: Llave inglesa o icono para desplegar el menú --> Herramientas --> Eliminar (borrar) datos de navegación. También podemos acceder escribiendo directamente en la barra de direcciones chrome://settings/clearBrowserData como si se tratara de una dirección web.

como si se tratara de una dirección web. En la pantalla que se nos muestra a

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

elegimos ‘el origen de los tiempos’ (es decir, borrarlo todo sin dejar nada). © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

Para guardar una página web en local debemos simplemente ir a llave inglesa o icono de despliegue de menú y seleccionar ‘Guardar página como…’ y seleccionar el nombre y ubicación donde queremos guardar la página HTML.

Para añadir una página a favoritos debemos clickar sobre marcadores (normalmente un icono con forma de estrella a la derecha de la barra de direcciones) y elegir el nombre y carpeta donde guardaremos el nuevo marcador favorito. Esto sirve para ir manteniendo una colección de enlaces a páginas web que visitamos con frecuencia, de forma que pulsando sobre el enlace accedemos directamente a la web sin necesidad de escribir la url en la barra de direcciones. Para visualizar esa colección de enlaces tenemos que desplegar el menú y elegir la opción Marcadores -- > Mostrar barra de marcadores.

Si queremos ver las propiedades de una imagen clickamos sobre la imagen con el botón derecho del ratón y pulsamos en ‘Inspeccionar elemento’ en el menú desplegable que se nos abre. Así veremos el tamaño de la imagen.

Para hacer zoom basta con utilizar los siguientes atajos de teclado: ‘Ctrl’ + ‘+’ (más zoom, es decir, pulsando la tecla CTRL y al mismo tiempo la tecla +, logramos acercar la vista), ‘Ctrl’ + ‘-‘ (menos zoom, es decir, alejar la vista). O si lo preferimos usar ‘Ctrl’ + ‘ruleta o rueda del ratón’ hacia arriba o hacia abajo, para acercar o alejar la vista.

En cualquier caso, para volver a ver la página con su tamaño original sólo tenemos que pulsar ‘Ctrl’ + ‘0’.

CÓMO ACTUALIZAR GOOGLE CHROME

Google Chrome se actualiza automáticamente cuando detecta que hay una nueva versión del navegador. El proceso de actualización se produce en segundo plano y no es necesario que realices ninguna acción.

No obstante, puedes comprobar si el navegador está actualizado pulsando sobre llave inglesa o icono para desplegar el menú --> Información de Google Chrome. Ahí te aparecerá un mensaje con la versión que estás usando actualmente, y te indicará si el navegador está actualizado o no. También puedes acceder a esta información escribiendo chrome://chrome/ en la barra de direcciones como si fuera una dirección web.

Que el navegador se mantenga actualizado sirve para tratar de evitar posibles fallos de seguridad y ataques de virus o programas maliciosos.

Próxima entrega: CU00711B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Conceptos básicos. Estructura básica de una página HTML. Head, body.
Estructura básica de una página HTML. Head, body. APRENDERAPROGRAMAR.COM CONCEPTOS BÁSICOS. ESTRUCTURA
APRENDERAPROGRAMAR.COM CONCEPTOS BÁSICOS. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. ETIQUETAS HEAD, BODY. TITLE. META
APRENDERAPROGRAMAR.COM
CONCEPTOS BÁSICOS.
ESTRUCTURA BÁSICA DE
UNA PÁGINA HTML.
ETIQUETAS HEAD, BODY.
TITLE. META DESCRIPTION
Y KEYWORDS. (CU00711B)

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, 2006-2029

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

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

CONCEPTOS BÁSICOS. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. ETIQUETAS HEAD, BODY.

Vamos a explicar conceptos básicos de HTML. En primer lugar veremos cuál es la estructura básica que toda página HTML debe cumplir. Para ello introduciremos las etiquetas HTML, HEAD y BODY, y sus respectivas etiquetas de cierre.

HTML, HEAD y BODY, y sus respectivas etiquetas de cierre. Toda página web viene definida con

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

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

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

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

© aprenderaprogramar.com, 2006-2029

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

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

Además de la etiqueta title dentro de la sección de cabecera se suelen incluir otras etiquetas. La siguiente tabla muestra un resumen de elementos que pueden ir dentro de la etiqueta head.

Etiqueta en cabecera

Función

¿Es obligatoria?

<title>

Da un título al documento HTML

<base>

Define ruta de acceso

No

<link>

Define archivos vinculados

No

<meta>

Define metadatos como descripción y palabras clave

No

<script>

Delimita scripts incluídos

No

<style>

Delimita definición de estilos

No

Comentaremos brevemente estas etiquetas a continuación.

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

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

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

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

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

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

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

© aprenderaprogramar.com, 2006-2029

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

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

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

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

<script type="text/javascript">

<!--

Aquí iría el código

// -->

</script>

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

CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos

colocar el contenido de nuestra página: texto, fotos, etc.

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

A lo largo del curso iremos estudiando qué elementos pueden existir dentro de la etiqueta body, así

como cuál es su sintaxis y organización.

Próxima entrega: CU00712B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Significado de deprecated. Etiqueta body. Cuerpo HTML.
Significado de deprecated. Etiqueta body. Cuerpo HTML. APRENDERAPROGRAMAR.COM SIGNIFICADO DE DEPRECATED. ETIQUETA BODY:
APRENDERAPROGRAMAR.COM SIGNIFICADO DE DEPRECATED. ETIQUETA BODY: CUERPO DE LA PÁGINA HTML. BGCOLOR, TEXT,
APRENDERAPROGRAMAR.COM
SIGNIFICADO DE
DEPRECATED. ETIQUETA
BODY: CUERPO DE LA
PÁGINA HTML. BGCOLOR,
TEXT, BACKGROUND.
(CU00712B)

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, 2006-2029

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Significado de deprecated. Etiqueta body. Cuerpo HTML.

SIGNIFICADO DE DEPRECATED

Cuando se trabaja en programación y desarrollos web veremos que con frecuencia aparece el término inglés “deprecated”. Algunas veces se trata de traducir al español por “deprecado”, pero en realidad este término no existe en español. En su lugar podemos usar “desaprobado” o “no recomendado”.

r podemos usar “desaprobado” o “no recomendado”. Al igual que hoy día disponemos de computadoras más

Al igual que hoy día disponemos de computadoras más potentes y efectivas que hace 20 años por evolución de la tecnología, también podemos decir que los lenguajes evolucionan y cambian.

Así, algunas formas sintácticas o expresiones HTML que se consideraban válidas hace unos años han pasado a considerarse no recomendados para los desarrollos web actuales. Sin embargo, dado la gran cantidad de páginas web que se construyeron usando estas formas del lenguaje anticuadas y a que los programadores no podían adaptarse de un día para otro a los cambios en los lenguajes, en lugar de no permitir estas expresiones, las nuevas versiones de los lenguajes las clasifican como deprecated o no recomendadas.

Un ejemplo de uso no recomendado (deprecated) es la inclusión de un atributo bgcolor en la etiqueta body de un documento HTML.

Por ejemplo <body bgcolor=”yellow”> hace que la página web tenga un fondo amarillo mediante el uso de un atributo, bgcolor, que está clasificado como deprecated. Esto significa que no debemos usar el atributo bgcolor porque se ha definido otra forma de dar color de fondo al elemento body de un documento HTML (en concreto mediante el uso de estilos CSS).

Las sintaxis, atributos, expresiones, etc. que están catalogadas como deprecated siguen siendo aceptadas por los navegadores, aunque con el paso del tiempo pasarán de deprecated a “not supported”, es decir, no serán reconocidas por los navegadores. Por tanto en ningún caso debemos usarlas.

Dejando claro que no debemos usarlas, sin embargo conocer las formas deprecated puede tener cierto interés. ¿Por qué?

1. Nos permiten conocer la evolución del lenguaje

2. En caso de que tengamos que revisar, corregir o modificar código desarrollado por otra persona

donde se usan formas deprecated, sabremos identificar y subsanar los problemas existentes.

La existencia de formas deprecated en los desarrollos web de hoy en día se debe a múltiples motivos:

miles de páginas web no se han actualizado a los nuevos estándares y se mantienen como fueron construidas hace años. Muchos programadores siguieron usando formas deprecated (y en algunos casos siguen usando algunas de estas formas). Muchos programas para creación semiautomatizada de páginas web usaban o usan formas deprecated.

© aprenderaprogramar.com, 2006-2029

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Significado de deprecated. Etiqueta body. Cuerpo HTML.

A lo largo del curso estudiaremos formas deprecated, que fueron muy utilizadas en su día pero cuyo uso no es recomendado hoy en día. La inclusión de estas formas en este curso obedece a ser capaces de reconocer y corregir problemas en desarrollos web con los que nos podamos encontrar. Cuando un elemento esté considerado como deprecated lo indicaremos explícitamente.

BODY BGCOLOR (DEPRECATED)

Atributo que fue muy usado en el pasado para especificar el color de fondo de la página. El color se define en base hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green, Blue). Es decir, cada color se define con el carácter # seguido de 6 letras ó números. Cada combinación de letras o números da lugar a distintos colores. También se puede usar el nombre en inglés de los colores predefinidos en los navegadores (red, blue, green, etc.).

Sintaxis (deprecated): <body bgcolor=”#0000FF”> o <body bgcolor=”blue”>

En este ejemplo el color azul vemos que lo podemos poner tanto con su código como simplemente escribiendo blue, porque es un color básico. Los colores no básicos sólo podremos indicarlos como código hexadecimal. Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar escribiendo en un buscador como Google, Yahoo o Bing el texto “colores hexadecimales” y entrando a cualquiera de las páginas que te permiten seleccionar un color y te dicen cuál es su código.

Recordar: bgcolor es un atributo de body que no debe usarse por estar deprecated o not supported.

BODY TEXT (DEPRECATED)

Atributo que fue muy en el pasado para definir el color del texto. Su formato es el mismo que el de bgcolor. Si no se pone nada es negro.

Sintaxis (deprecated): <body text=”#0000FF”> o <body text=”blue”>

Recordar: text es un atributo de body que no debe usarse por estar deprecated o not supported.

BODY BACKGROUND

Atributo que fue muy usado en el pasado para especificar la ruta y nombre de archivo (URL) de la imagen (formato GIF, JPG o PNG habitualmente) que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la zona de visualización del navegador si es pequeña (lo habitual era poner como fondo una imagen pequeña y dejar que se repitiera, porque así la página carga más rápido).

Sintaxis tipo (deprecated): <body background="ruta/archivo.gif">

© aprenderaprogramar.com, 2006-2029

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Por ejemplo: <body background="http://www.aprenderaprogramar.com/images/BgTexture.jpg"> Cuando se trabaja en desarrollos web es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas (nuestros archivos html), desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida. En el primer ejemplo que pusimos, la ruta utilizada es absoluta. Dentro de un servidor también se pueden usar rutas relativas, el formato sería similar a éste:

<body background="images/BgTexture.jpg">

Como ves en este ejemplo no aparece el nombre del dominio. De esta forma si cambiamos el dominio, las rutas de las imágenes seguirán siendo correctas.

Veamos otro ejemplo. Supongamos la siguiente estructura de directorios y archivos:

APR2HTML/pagina1.html: el archivo denominado pagina1.html está dentro de la carpeta

APR2HTML.

APR2HTML/gifs/fondo.gif

APR2HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html está dentro de una subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta APR2HTML.

Si desde la página pagina1.html queríamos poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs, se debía poner:

<body background="gifs/fondo.gif">

Si desde la página pagina2.html queríamos poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs, se debía poner:

<body background=" /gifs/fondo.gif">

Fíjate en

subir dos niveles, por ejemplo si tenemos la página en APR2HTML/ejemplos/miweb/pagina3.html

escribiríamos “

rutas es útil cuando trabajes con desarrollos web actuales.

/ pues es lo que indica al navegador que debe acudir al directorio superior. Si quisiéramos

/

/gifs/fondo.gif”.

Aunque el atributo background está deprecated, lo dicho para las

MÁRGENES: LEFTMARGIN, TOPMARGIN, RIGHTMARGIN Y BOTTOMMARGIN (DEPRECATED)

Además de bgcolor, text y background, también se usaban atributos para definir márgenes, todos ellos clasificados como deprecated hoy día.

Para especificar los márgenes se utilizaba el atributo margin, con su correspondiente indicación indicadora de lateral afectado. Así se utilizaba "leftmargin" para el margen izquierdo, "topmargin" para el margen uperior, "rightmargin" para el margen de la derecha y "bottommargin" para el margen inferior.

© aprenderaprogramar.com, 2006-2029

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Significado de deprecated. Etiqueta body. Cuerpo HTML.

Los márgenes se suelen medir en pixeles, término inglés que alude a cada uno de los pequeños puntos que conforman la imagen en una pantalla (ten en cuenta que una pantalla tiene unas dimensiones en pixeles de ancho y pixeles de alto). Para establecer márgenes de 10 pixeles en todos los sentidos se escribían expresiones de este tipo (deprecated):

<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>

RESUMEN

En el pasado se usaban una serie de atributos para la etiqueta body que permitían dotar el cuerpo de la página de un aspecto o presentación determinada. Prueba en tu navegador estas formas y comprueba si tu navegador las reconoce. Hoy día el uso de estas formas está considerado una mala práctica, por lo que no deben usarse, aunque sí conocerse por si hubiera que corregir webs donde existan.

En lugar de estos atributos hoy día se usan técnicas CSS. Cuando termines este curso, te recomendamos consultes el curso aprenderaprogramar.com CSS desde cero para conocer estas técnicas, dado que los desarrollos web de hoy en día no pueden entenderse sin el uso de CSS.

Próxima entrega: CU00713B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.
de texto en HTML: negrit a, cursiva, tachado, subrayado. APRENDERAPROGRAMAR.COM FORMATOS DE TEXTO EN HTML: NEGRITA,
APRENDERAPROGRAMAR.COM FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE.
APRENDERAPROGRAMAR.COM
FORMATOS DE TEXTO EN
HTML: NEGRITA, CURSIVA,
TACHADO, SUBRAYADO,
SUPERÍNDICE, SUBÍNDICE.
(CU00713B)

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, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

FORMATOS

DE

TEXTO

EN

HTML:

NEGRITA,

CURSIVA,

TACHADO,

SUBRAYADO,

SUPERÍNDICE,

SUBÍNDICE.

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

aunque algunas se consideren deprecated (no recomendadas). Las primeras etiquetas que veremos son las que se

Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas están no recomendadas (deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido un nuevo significado en las últimas versiones de HTML, pero no vamos a entrar a definir este nuevo significado. Debido a su amplia difusión en el pasado conviene conocer los que fueron usos tradicionales de estas etiquetas, a medida que avances en el conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran hoy día nuevos significados.

ETIQUETA

USO

OBSERVACIONES

<b>…</b>

Poner texto en negrita

Puede ser sustituido por CSS.

<strong>…</strong>

Poner texto en negrita

Puede ser sustituido por CSS.

<i>…</i>

Poner texto en cursiva

Puede ser sustituido por CSS.

<em>…</em>

Poner texto en cursiva

Puede ser sustituido por CSS.

<u>…</u>

Poner texto subrayado

Deprecated. Sustituir por CSS.

<small>…</small>

Poner texto más pequeño

Puede ser sustituido por CSS.

<big>…</big>

Poner texto más grande

Puede ser sustituido por CSS.

<sub>…</sub>

Poner texto subíndice

Puede ser sustituido por CSS.

<sup>…</sup>

Poner texto superíndice

Puede ser sustituido por CSS.

<strike>…</strike>

Poner texto como tachado

Deprecated. Sustituir por CSS.

<s>…</s>

Poner texto como tachado

Deprecated. Sustituir por CSS.

<del>…</del>

Poner texto como tachado

Puede ser sustituido por CSS.

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

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

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

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

- Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo CSS.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo:

<b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.

Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior.

Veamos las etiquetas que hemos citado en la tabla anterior.

NEGRITA

Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código y lo que veríamos en pantalla:

Esta palabra la vamos a poner en <b>negrita</b> y esta otra
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.

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

CURSIVA

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

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

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

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

SUBRAYADO U (DEPRECATED)

Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>. Así se subrayaría una frase:

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

Así subrayaríamos una frase importante

Está etiqueta está obsoleta (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el resultado deseado se deben usar hojas de estilo CSS como veremos más adelante.

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

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

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

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

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

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

SUPERÍNDICES Y SUBÍNDICES

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

Gracias

a

estas

etiquetas

podemos

escribir

cualquier

expresión

con

símbolos

matemáticos

como

esta:

H<sub>2</sub>O

o

números

elevados

a

potencias

7<sup>3</sup>.

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta:

H 2 O o números elevados a potencias 7 3 .

Los subíndices y superíndices con estas etiquetas pueden ser sustituidos por técnicas de CSS, pero muchas personas prefieren usar estas etiquetas.

TEXTO TACHADO

Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Aquí presentamos una muestra:

Puedo proceder a tachar una palabra <strike>así</strike>, <s>así</s> o <del>así</del>

Puedo proceder a tachar una palabra así, así o así

La etiqueta strike está deprecated, lo que significa que ya no se recomienda su uso. La etiqueta s también fue deprecated, aunque a partir de HTML 5 se ha redefinido su significado. Para lograr el tachado de un texto se recomienda usar técnicas CSS (hojas de estilo) como veremos más adelante.

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

EJERCICIO

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

Responde a las siguientes preguntas:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<!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.

atributos deprecated la respuesta de diferentes navegadores puede no ser la misma. © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

Formatos de texto en HTML: negrit a, cursiva, tachado, subrayado.

Nota 1: Hemos utilizado la etiqueta <pre> que comentaremos más adelante.

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

Para

aprenderaprogramar.com.

comprobar

si

tus

respuestas

son

correctas

puedes

consultar

en

los

foros

Próxima entrega: CU00714B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Etiquetas HTML básicas: imágenes, alt, border, img, align, width, height.
imágenes, alt, border, img, align, width, height. ETIQUETAS HTML BÁSICAS: APRENDERAPROGRAMAR.COM IMÁGENES.
ETIQUETAS HTML BÁSICAS: APRENDERAPROGRAMAR.COM IMÁGENES. TAG IMG. SRC, ALT. WIDTH, HEIGHT. DEPRECATED BORDER,
ETIQUETAS HTML BÁSICAS:
APRENDERAPROGRAMAR.COM
IMÁGENES. TAG IMG. SRC,
ALT. WIDTH, HEIGHT.
DEPRECATED BORDER,
ALIGN. RUTAS ABSOLUTAS
O RELATIVAS (CU00714B)

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, 2006-2029

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

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

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

aunque conviene co nocerlas por la difusión que tuvieron. Incluir imágenes en una página web es

Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:

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

La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):

ATRIBUTO

USO

OBSERVACIONES

src

Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen.

Obligatorio. Si no se incluye no se mostrará imagen alguna.

align

Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom.

Atributo obsoleto (deprecated). Sustituir por CSS.

alt

Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.

Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará.

width

Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original.

Opcional. Indicar valor en pixeles. También se puede indicar con CSS.

height

Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen.

Opcional. Indicar valor en pixeles. También se puede indicar con CSS.

border

Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.

Atributo obsoleto (deprecated). Sustituir por CSS.

© aprenderaprogramar.com, 2006-2029

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

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

EJEMPLO

Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, es porque la ruta no está disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que tengas en el mismo directorio que el archivo html.

<!DOCTYPE

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

<html>

HTML

PUBLIC

"-//W3C//DTD

<head>

HTML

4.01

Transitional//EN"

<title>Ejemplo del uso de imágenes - aprenderaprogramar.com</title>

</head>

<body>

<img

src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png"

APR2">

alt="Logotipo

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

border = "5"> </body> </html> Como podemos observar (ver imagen anterior), el atributo

Como podemos observar (ver imagen anterior), el atributo width se ha definido tanto en pixeles como en porcentaje (al igual pasa con el atributo height), aunque las últimas versiones de HTML no admiten el uso de porcentajes. Por ello recomendamos indicarlo en píxeles.

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

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

APR2">

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

También podrás usar como origen de la imagen otro servidor, lo que significa que el navegador irá a buscar la imagen en la ruta que le indiques. Pero en este caso, deberás especificar la ruta completa, no será válido una ruta relativa. Ejemplo:

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

© aprenderaprogramar.com, 2006-2029

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

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

Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se conozca su significado, ya que se pueden encontrar en muchas páginas web. Incluso hay desarrolladores web que siguen usando estas etiquetas. Más adelante veremos cómo conseguir los efectos deseados de la forma recomendada hoy día: mediante el uso de estilos (hojas de estilo CSS).

La etiqueta img cuenta con otros atributos menos usados que no vamos a citar aquí.

EJERCICIO

Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento con un nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo:

Imagen que refleja una boda:

(… aquí la imagen) Imagen que muestra un mercado:

(… aquí la imagen) Imagen que muestra un atleta:

(… aquí la imagen) Imagen que refleja un atardecer:

(… aquí la imagen)

Nota: la ruta de una imagen de una página web se puede capturar normalmente haciendo click con el botón derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador que estemos utilizando.

Para

aprenderaprogramar.com.

comprobar

si

tus

respuestas

son

correctas

puedes

consultar

en

los

foros

Próxima entrega: CU00715B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

© aprenderaprogramar.com, 2006-2029

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

Encabezados <h1>…<h6>, párrafos <p> y etiqueta <pre> en HTML.
párrafos <p> y etiqueta <pre> en HTML. APRENDERAPROGRAMAR.COM ENCABEZADOS HTML <h1> A
APRENDERAPROGRAMAR.COM ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA
APRENDERAPROGRAMAR.COM
ENCABEZADOS HTML <h1>
A <h6>, PÁRRAFOS <p>,
APLICAR ESTILOS Y
ETIQUETA <pre> DE TEXTO
PREFORMATEADO.
EJEMPLOS (CU00715B)

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, 2006-2029

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

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

ENCABEZADOS <h1>…<h6>, PÁRRAFOS <p> Y ETIQUETA <pre> EN HTML.

Continuamos viendo una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicaremos las que han venido siendo más utilizadas.

ENCABEZADOS

las que han venido siendo más utilizadas. ENCABEZADOS Puede que queramos empezar nuestra web o nuestro

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

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

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

<!DOCTYPE

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

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

<html>

 

<head>

 

<title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title>

 

</head>

<body>

 

<h1>Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6>

 

</body>

</html>

Podemos ver el resultado obtenido en la siguiente imagen.

</html> Podemos ver el resultado obtenido en la siguiente imagen. © aprenderaprogramar.com, 2006-2029

© aprenderaprogramar.com, 2006-2029

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

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

Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del siguiente por un salto de línea sin que nosotros en el código hayamos escrito nada ya que los encabezados generan por sí solos un salto de línea.

Ten en cuenta que en una página podrías poner un texto de tamaño grande indicándolo de otra manera, por ejemplo modificando el tamaño de fuente sin usar encabezado. ¿Por qué usar entonces encabezados? Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como google, yahoo o bing cuando encuentran una etiqueta <h1> le dan más relevancia que a un texto del mismo tamaño que no sea un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc. para obtener un mejor posicionamiento de nuestras páginas web en los buscadores. Es decir, usar h1 no sólo supone agrandar el tamaño de la letra, también supone indicar que el texto incluido entre esas etiquetas tiene una importancia superior al resto de texto y esto es valorado por los buscadores. Por supuesto, de nada servirá que intentes incluir todo el texto de tu página web dentro de etiquetas h porque los buscadores no son tontos: detectarán ese “truco” e incluso te penalizarán haciendo que no aparezca tu página web en las búsquedas. Por tanto los encabezados deben usarse con moderación y equilibrio.

PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS

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

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

ATRIBUTO

USO

OBSERVACIONES

 

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

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:

align

left: alineación del texto a la izquierda right: alineación del texto a la derecha

center: alineación del texto centrada

justify: alineación del texto justificada

<p style=”text-align: center;”>Texto centrado</p>

Como comprobarás, hemos introducido el uso de estilos. Aunque en este curso no vamos a hablar de CSS más que superficialmente, conviene que te vayas familiarizando con esta técnica. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un contenedor). En nuestro caso, estamos diciendo que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center). Un estilo se puede aplicar de distintas maneras. Una forma de hacerlo es escribiendo en línea (a continuación de la etiqueta) con la sintaxis style = “característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº…;”.

© aprenderaprogramar.com, 2006-2029

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

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

Por ejemplo: <p style = “text-align: center; font-size: 12px; color:blue;> Este texto estará centrado, tendrá un tamaño de fuente de 12 pixeles y color azul cuando se vea en el navegador</p>

Como vemos para definir un estilo escribimos style = “un nombre de atributo, dos puntos, el valor del atributo y terminación en punto y coma. Otros atributos se pueden especificar de la misma manera (tantos como queramos) hasta terminar con un punto y coma y las comillas de cierre”.

Iremos introduciendo cuestiones básicas relacionadas con estilos poco a poco y a medida que las vayamos necesitando. Cuando termines este curso te recomendamos seguir el curso CSS desde cero de aprenderaprogramar.com, pues CSS es una técnica imprescindible hoy día para desarrollos web.

EJEMPLO

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

<!DOCTYPE

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

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

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

</p>   </body> </html> LA ETIQUETA <PRE> La etiqueta <pre> se

LA ETIQUETA <PRE>

La etiqueta <pre> se denomina de “texto preformateado” y sirve para que el navegador interprete el texto escrito tal y como está, respetando los saltos de línea, espacios, etc. indicados.

© aprenderaprogramar.com, 2006-2029

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

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

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

<!DOCTYPE

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

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

<html>