¿PASO A PASO PARA CREAR TU BLOGGER?

Si quieres empezar en esto de los blogs, lo mejor es crear uno en Blogger, donde muchas personas empiezan a escribir sus bitácoras, y donde está alojado este blog. Sólo tienes que escribir http://www.blogger.com en la barra de direcciones de tu navegador o hacer clic en este enlace. Entonces aparecerá la página principal de Blogger, en la que vas a realizar tres sencillos pasos para crear tu blog. Lo único que necesitas es una cuenta de correo electrónico, y no hace falta que sea la de Google, la empresa que posee este servicio gratuito de blogs o bitácoras. ¿Te animas a tener tu blog? Entonces, continúa leyendo y empezarás una nueva aventura en la Red.

Blogger tiene una página de ayuda para quienes quieran empezar a usar sus blogs, pero no está creada con intención pedagógica. Su ayuda es muy general, pero puede resultar útil para asuntos concretos. 

 Cuando entramos en Blogger, nos invitan a crearnos un blog con el lema: "Crea un blog. Es gratuito", pero antes convendría realizar una visita rápida, como nos indican con un enlace, para conocer de qué va esto. A continuación, hacemos clic en el botón de color naranja Comenzar para empezar esta aventura.


La primera fase sólo será necesaria si no tenemos cuenta en Google. Si la tenemos, hay que hacer clic en el enlace "primero accede a ella", desde donde accederemos al segundo paso. No hace falta tener una cuenta en Google, pero conviene tenerla si queremos acceder a todas sus herramientas, que son las más utilizadas en la Web, y para ello hay que rellenar un formulario.


En todo caso, podemos crear un blog sin cuenta en Google, para lo cual tendremos que completar el primer formulario que nos aparece con el siguiente encabezamiento: 

 

 En este formulario hay que incluir lo siguiente:

1. Una cuenta de correo electrónico existente, que tendremos que repetir en el siguiente campo de texto. Aquí se escribe la dirección completa de la cuenta.
2. Una contraseña escrita dos veces para evitar errores. Tiene que incluir ocho caracteres como mínimo, y puede verificarse su fortaleza, es decir, su calidad como contraseña, haciendo clic en el enlace correspondiente.
3. El nombre que aparecerá como autor del blog y de los artículos. Se puede optar por un apodo o nickname, o por nuestro nombre real.
4. Una verificación, que consiste en escribir las letras que aparecen en una pequeña imagen, lo cual se hace para evitar que se creen cuentas automáticamente.
5. Activar la casilla de aceptación de las condiciones. Conviene leer estas "Condiciones del servicio de Blogger", que muchos encuentran abusivas.

Hacemos clic en la flecha Continuar, y continuamos con el siguiente paso.

2. Segundo paso: asignar un nombre al blog.

En esta fase simplemente escribiremos un nombre para nuestro blog, que podremos cambiar más tarde, y le asignaremos una dirección de internet, que no conviene cambiar más adelante so pena de perder lectores. Es importante que la dirección (también llamada URL) sea corta y siempre con letras minúsculas, sin caracteres especiales como tildes, guiones o eñes, y sin huecos. La dirección suele ser el nombre del blog o el nombre del autor, pero se puede poner lo que se quiera. Para mi blog de prueba, que se llama "Mi blog en Blogger", le he puesto esta dirección: miblogenblogger. Después Blogger añade la parte final hasta quedar así:

http://miblogenblogger.blogspot.com.

Pero antes de continuar hay que hacer clic en el enlace que dice Comprobar la disponibilidad para ver si ese nombre ya está elegido por otro usuario; y suele ocurrir con frecuencia que ya esté utilizado, así que hay que aguzar el ingenio. Si ocurre esto, nos avisan con la frase: Lo sentimos, esta dirección del blog no está disponible.


Pero antes de continuar hay que hacer clic en el enlace que dice Comprobar la disponibilidad para ver si ese nombre ya está elegido por otro miembro; y suele ocurrir con frecuencia que ya esté utilizado, así que hay que aguzar el ingenio. Si ocurre esto, nos avisan con la frase: "Lo sentimos, esta dirección del blog no está disponible".


La limitación de caracteres impuesta en las URL de los blogs a veces hace que los autores busquen un remedio en el uso de guiones; un ejemplo podría ser el siguiente:

http://blog-mates.blogspot.com.

Yo siempre aconsejo no incluir guiones en las direcciones URL, como se ve en el ejemplo con color rojo, porque puede impedir la inclusión de ese blog en agregadores de blogs y porque es un carácter que se suele olvidar cuando se intenta escribir la URL de un blog. Yo no conozco ninguna web importante cuya URL tenga guiones, lo que ya resulta indicativo: por algo será.


Si ya hemos creado un blog y su URL incluye guiones, podemos cambiar la URL de nuestro blog si vamos a Configuración -> Publicación dentro de la administración del blog, y allí hay un campo de texto con la URL actual. Simplemente, se modifica y ya está. Si el blog es antiguo y ya tiene su público creado, esto puede causar la pérdida de esos lectores, así que es mejor cambiarlo lo antes posible.


Y ahora vamos al último paso.

3. Tercer paso: elegir una plantilla

 

Por último, tendremos que elegir una plantilla, que es el diseño general del blog. Elegiremos la que más nos guste, pero más adelante podremos cambiarla siempre que queramos. La elección de la plantilla es importante, y por eso he escrito un artículo en este blog, "Diseño y elección de la plantilla en Blogger", donde escribo unos consejos para elegir la plantilla adecuada.

Y cuando pulsamos en la última flecha Continuar, ya tenemos nuestro blog en Blogger:

Ahora habrá que configurarlo antes de empezar a escribir. Pero eso es otra historia.

Un problema muy común entre los principiantes es que no saben acceder a su nuevo blog. Se puede acceder de dos formas:

1. La forma más sencilla es ir a la página principal de Blogger, y allí nos presentan un pequeño formulario con un campo de texto y otro de contraseña. En el primero escribimos nuestro nombre de usuario, en este caso nuestra cuenta de Google o la dirección completa de la cuenta de correo con que registramos nuestro blog. Cuando hagamos clic en el enlace Acceder, llegaremos a nuestro Escritorio del blog.
2. Escribiendo la dirección completa del nuevo blog como, por ejemplo: http://miblogenblogger.blogspot.com. En este caso, aparecerán unos enlaces en la parte superior del blog. Hay que hacer clic en Acceder, que está en la parte derecha, y entonces llegaremos a la página principal de Blogger para incluir nuestros datos. Si estamos conectados a Blogger en el navegador (por medio de las cookies), hay que hacer clic en el enlace Escritorio, y entraremos directamente a nuestro blog. 

Y encima de ella veremos la barra de Blogger, con la que podremos entrar a la parte de la Adminsitración a escribir una Nueva Entrada en el blog o a personalizar el Diseño, además de otras funciones.

Los visitantes verán el nuevo blog escribiendo su dirección o URL en la barra de direcciones de su navegador. Pasados unos días, después de que los buscadores hayan tenido tiempo para rastrear el nuevo blog, también se podrá acceder a él simplemente escribiendo el nombre del blog en el buscador.

Para terminar esta sección, diremos que un usuario puede crearse más de un blog en Blogger, y cuando se acceda al Escritorio o panel de control, aparecerán allí todos nuestros blogs.

5. El panel de control o Escritorio

 

Recientemente, Blogger ha cambiado radicalmente el diseño de la administración de los blogs para asemejarlo al de las demás herramientas que componen Google. Aunque todavía se puede usar el diseño antiguo, siempre es mejor adaptarse al nuevo, y por eso he actualizado este artículo a la nueva versión de Blogger. Blogger actualiza sus diseños constantemente, así que hay que estar siempre informados de las novedades en el blog oficial Blogger Buzz y en su versión en español Blogger Buzz-Español.  

Cuando accedemos a Blogger con nuestra cuenta, nos encontramos con el Escritorio, un panel que nos da acceso a la parte privada del blog o administración. En la imagen anterior muestro el mío, que incluye dos de mis blogs de Blogger. Desde aquí controlamos todos nuestros blogs y también, en la parte superior derecha, nuestro perfil de Blogger y la configuración de la cuenta cuando hacemos clic en nuestro email.

El perfil de Blogger es importante para formar parte de la comunidad de Blogger, que es muy extensa en todo el mundo. Estos datos personales los podrán ver los visitantes de nuestro blog, pero también aparecerán cuando escribamos un comentario en otro blog. Siempre es conveniente que escribamos algunos datos nuestros para que los demás nos conozcan, aunque sea un poco, pues no hay que olvidar que el carácter personal es importante en los blogs, y nuestros lectores tienen derecho a saber quiénes somos y a qué nos dedicamos.

Junto al nombre de cada blog hay información sobre las páginas vistas (pageviews) y el número de entradas publicadas. Pero son los tres iconos grandes los que nos permiten crear una nueva entrada, ir a la lista de entradas, acceder a las secciones de la administración o ver el blog.

En en la parte inferior del Escritorio se ve la Lista de lectura, es decir, las últimas entradas de los blogs a los que nos hemos suscrito como seguidores, que aparecen automáticamente cada vez que se publican en sus blogs de origen.

6. Configuración rápida de las opciones

 

7. Configuración de las entradas del blog

Una vez configurado el blog a nuestro gusto, podemos cambiar su diseño si las opciones predeterminadas no nos convencen en algún aspecto. Para ello pulsamos en la sección Diseño del menú lateral de la administración, y nos aparecerá una especie de esquema de nuestro blog: 

En la parte superior derecha se encuentran los botones que utilizaremos cuando modifiquemos alguna parte del diseño, sobre todo el botón naranja Guardar disposición. Más abajo, está el enlace al Diseñador de plantillas, pieza clave que analizaremos más adelante. A continuación tenemos varias secciones, encerradas en cuadros blancos, que podremos modificar:

1. Favicon: Es el pequeño icono representativo de nuestro blog que se ve en las barras de los navegadores y en sus pestañas cuando alguien está visitando nuestro blog. En los blogs de Blogger siempre se ve su icono característico, pero lo podemos cambiar en esta sección para personalizar nuestro blog si pulsamos en Editar. En Wikipedia encontramos información sobre este icono y sobre cómo crearlo.
2. Barra de navegación: Es la barra más superior que se ve en nuestro blog y en todos los de Blogger. Aquí podemos cambiar su aspecto tras pulsar en Editar.
3. Cabecera: Es parte superior de nuestro blog donde aparece el título y la descripción, que se pueden cambiar en cualquier momento. También se puede incluir una imagen propia, pero habrá que tener cuidado de que no sea demasiado grande, y para su ubicación tenemos cuatro opciones.
4. Entradas del blog: Se trata del diseño de todo lo que hay alrededor de las entradas de nuestro blog, y lo analizaremos a continuación.
5. Añadir un gadget: Los gadgets son pequeños módulos generalmente de carácter informativo que añadimos al lateral o al pie del blog, y los veremos más adelante.
6. Attribution: En la parte inferior del esquema del diseño se encuentra esta sección que hace referencia a la licencia con la que publicamos todo el contenido de nuestro blog. A ella nos referiremos más adelante.

Ahora vamos a dedicar nuestra atención a la configuración y diseño de nuestras entradas del blog. Si pulsamos en Editar dentro de esa sección, aparecerá una ventana como la siguiente, que muestra la configuración de las entradas de mi blog:

En esta ventana destacamos las siguientes opciones:

• Número de entradas en la página principal: Conviene que no haya muchas entradas en la página principal del blog,y el número dependerá de la longitud de las entradas y de su contenido. Siempre hay que procurar que la página principal del blog tarde poco en ser leída por el navegador para que el lector no tenga que esperar para ver todos los contenidos.
• Texto de enlace de la página de entrada: Es una opción que tiene que ver con a la división del texto de las entradas, dejando una introducción en la portada y el enlace Leer más para continuar leyendo la entrada en su página o enlace permanente, a lo que nos referiremos más adelante.
• Opciones de la página de entrada: Son las opciones visuales o textos que se podrán ver en las partes superior e inferior de la entrada, según la plantilla elegida. En la mayoría se puede incluso cambiar las palabras de los textos. Dos de ellas requieren de una explicación:
  • Mostrar edición rápida: El icono del lápiz aparece en la parte inferior de la entrada del blog, junto al nombre del autor y la fecha, sólo cuando estamos conectados a Blogger. Sirve para entrar directamente al editor del blog y editar dicha entrada.
  • Reacciones: Es una opción para que los lectores del blog califiquen cada entrada. Puede editarse para cambiar los adjetivos de la calificación.

Y en la parte inferior de la ventana, podemos Ordenar elementos arrastrándolos con el cursor del ratón:

CONCEPTOS BASICOS DE PROGRAMACION

¿Que es un lenguaje de programación?

¿Cuantos lenguajes de programación existen?

¿Programas existentes?

¿Fases para la creacion de un programa?

¿Como se escribe un programa?

Que es un lenguaje de programación?
El lenguaje humano lo define el diccionario como “el conjunto de sonidos articulados con el que el hombre manifiesta lo que piensa o siente”; a este tipo de lenguaje lo clasificaríamos como natural o propio del ser humano.
 

Se pueden utilizar muchos lenguajes para programar una computadora. El más básico es el lenguaje de maquina, una colección de instrucciones muy detallada que controla la circuiteria interna de la maquina. Este es el dialecto natural de la maquina. Muy pocos programas se escriben actualmente en lenguaje de maquina por dos razones importantes: primero, porque el lenguaje de maquina es muy incomodo para trabajar y segundo por que la mayoría de las maquinas se pide programar en diversos tipos de lenguajes, que son lenguajes de alto nivel, cuyas instrucciones son más compatibles con los lenguajes y la forma de pensar humanos como lo es el lenguaje c que además es de propósito general.

Debido a que los programas diseñados en este lenguaje se pueden ejecutar en cualquier maquina , casi sin modificaciones. Por tanto el uso del lenguaje de alto nivel ofrece tres ventajas importantes, sencillez, uniformidad y portabilidad.

Cuantos lenguajes de programacion existen?

                                                   
Dentro de los lenguajes artificiales existen muchos tipos, cada uno de ellos destinado a un propósito concreto; los lenguajes de programación referidos a los ordenadores se pueden clasificar en tres categorías:

* Lenguajes de bajo nivel.
* Lenguajes de alto nivel.
* Lenguajes de muy alto nivel.

Los primeros son lenguajes que se encuentran muy cerca de la forma interna de comunicación del ordenador, mientras que los terceros son más parecidos al lenguaje humano.

Lenguaje de programacion: Sistema de simbolos y reglas que permite la construccion de programas con los que la computadora puede operar así como resolver problemas de manera eficaz.

Estos contienen un conjunto de instrucciones que nos permiten realizar operaciones de entrada / salida, calculo, manipulación de textos, lógica / comparación y almacenamiento / recuperación.

Los lenguajes de programación se clasifican en:

• 
  
• Lenguaje Máquina: Son aquellos cuyas instrucciones son directamente entendibles por la computadora y no necesitan traducción posterior para que la CPU pueda comprender y ejecutar el programa. Las instrucciones en lenguaje maquina se expresan en términos de la unidad de memoria más pequeña el bit (dígito binario 0 ó 1).
• 
  
• Lenguaje de Bajo Nivel (Ensamblador): En este lenguaje las instrucciones se escriben en códigos alfabéticos conocidos como mnemotécnicos para las operaciones y direcciones simbólicas.
• 
  
• Lenguaje de Alto Nivel: Los lenguajes de programación de alto nivel (BASIC, pascal, cobol, fortran, etc.) son aquellos en los que las instrucciones o sentencias a la computadora son escritas con palabras similares a los lenguajes humanos (en general en ingles), lo que facilita la escritura y comprensión del programa.

 ¿ALGUNOS PROGRAMAS EXISTENTES?

Existen numerosos lenguajes de programación y en la última década se han creado para diversos propósitos específicos, teniendo el mayor auge los destinados a Internet.

Emsanblador 1950

java 1995: Sun Microsystemspara internet y proposito general.
 

prolog 1981:Robert A. Kowalski, de la Universidad de Edimburgo, y Alain Colmerauer, de la Universidad de Aix-Marseille


Ada 1982: Ministerio de Defensa de los EE.UU

Html 1986:Publicación de la ISO 8879 que presenta el Standard
Html 1986  General Markup Language, origen del HTML


ENTRE OTROS. 

Algoritmo. La palabra algoritmo se deriva de la traducción al latín de la palabra árabe alkhowarizmi, nombre de un matemático y astrónomo árabe que escribió un tratado sobre manipulación de números y ecuaciones en el siglo IX.

La solución a cualquier problema de cómputo involucra la ejecución de una serie de acciones en orden especifico. Un procedimiento para resolver un problema en términos de: a) Las acciones a ejecutarse y b) el orden en el cual estas acciones deben ejecutarse se llama algoritmo.

Un ejemplo de un algoritmo para llegar a la escuela

1. Salir de la cama
2. Quitarse la pijamas
3. Darse un baño
4. Vestirse
5. Desayunar
   1.3 Programa.
   • 
     
   • Secuencia de instrucciones mediante las cuales se ejecutan diferentes acciones de acuerdo con los datos que se estén procesando.
   • 
     
   • Es un algoritmo desarrollado para ser utilizado por la computadora
   • 
     
   • Expresión de un algoritmo en un lenguaje preciso que puede llegar a entender una máquina de cómputo.
6. Utilizar el transporte ( autobús, carro , bicicleta, etc)

2. Fases para la creación de un programa.

2.1 Definición del Problema

Esta fase está dada por el enunciado del problema, el cual requiere una definición clara y precisa. Es importante que se conozca lo que se desea que realice la computadora; mientras esto no se conozca del todo no tiene mucho caso continuar con la siguiente etapa.

2.2 Análisis del Problema

Una vez que se ha comprendido lo que se desea de la computadora, es necesario definir:

Los datos de entrada.

Cual es la información que se desea producir (salida)

Los métodos y fórmulas que se necesitan para procesar los datos.

Una recomendación muy practica es el que nos pongamos en el lugar de la computadora y analicemos que es lo que necesitamos que nos ordenen y en que secuencia para producir los resultados esperados.

2.3 Diseño del Algoritmo

Las características de un buen algoritmo son:

Debe tener un punto particular de inicio.

Debe ser definido, no debe permitir dobles interpretaciones.

Debe ser general, es decir, soportar la mayoría de las variantes que se puedan presentar en la definición del problema.

Debe ser finito en tamaño y tiempo de ejecución.

2.4 Codificación

La codificación es la operación de escribir la solución del problema (de acuerdo a la lógica del diagrama de flujo o pseudocódigo), en una serie de instrucciones detalladas, en un código reconocible por la computadora, la serie de instrucciones detalladas se le conoce como código fuente, el cual se escribe en un lenguaje de programación o lenguaje de alto nivel.

2.5 Prueba y Depuración

Los errores humanos dentro de la programación de computadoras son muchos y aumentan considerablemente con la complejidad del problema. El proceso de identificar y eliminar errores, para dar paso a una solución sin errores se le llama depuración.

La prueba consiste en la captura de datos hasta que el programa no presente errores (los más comunes son los sintácticos y lógicos).

2.6 Documentación

Es la guía o comunicación escrita es sus variadas formas, ya sea en enunciados, procedimientos, dibujos o diagramas.

A menudo un programa escrito por una persona, es usado por otra. Por ello la documentación sirve para ayudar a comprender o usar un programa o para facilitar futuras modificaciones (mantenimiento).

La documentación se divide en tres partes:

Documentación Interna

Documentación Externa

Manual del Usuario

• 
  
• Documentación Interna: Son los comentarios o mensaje que se añaden al código fuente para hacer mas claro el entendimiento de un proceso.
• 
  
• Documentación Externa: Se define en un documento escrito los siguientes puntos:

Descripción del Problema

Nombre del Autor

Algoritmo (diagrama de flujo o pseudocódigo)

Diccionario de Datos

Código Fuente (programa)

• 
  
• Manual del Usuario: Describe paso a paso la manera como funciona el programa, con el fin de que el usuario obtenga el resultado deseado.

2.7 Mantenimiento

Se lleva acabo después de terminado el programa, cuando se detecta que es necesario hacer algún cambio, ajuste o complementación al programa para que siga trabajando de manera correcta. Para poder realizar este trabajo se requiere que el programa este correctamente documentado.

                                                 

ALGORITMO

Definiciones y ejemplos.

 

QUE ES UN ALGORITMO EN PROGRAMACIÓN:En matemáticas, ciencias de la computación y disciplinas relacionadas, un algoritmo (del griego y latín, dixit algorithmus y este a su vez del matemático persa Al-Juarismi1 ) es un conjunto preescrito de instrucciones o reglas bien definidas, ordenadas y finitas que permite realizar una actividad mediante pasos sucesivos que no generen dudas a quien deba realizar dicha actividad. Dados un estado inicial y una entrada, siguiendo los pasos sucesivos se llega a un estado final y se obtiene una solución. Los algoritmos son el objeto de estudio de la algoritmia. En la vida cotidiana, se emplean algoritmos frecuentemente para resolver problemas. Algunos ejemplos son los manuales de usuario, que muestran algoritmos para usar un aparato, o las instrucciones que recibe un trabajador por parte de su patrón. Algunos ejemplos en matemática son el algoritmo de la división para calcular el cociente de dos números.

Algoritmo:Conjunto de procedimientos mediante los que se consigue un efecto. Suelen expresarse a través de letras, cifras y símbolos, que forman un algoritmo determinado.Dícese del procedimiento para resolver problemas en términos de las acciones a ejecutar o el orden en que se ejecutarán dichas acciones en un problema dado. Conjunto de Instrucciones que especifican la secuencia de operaciones a realizar, en orden, para resolver un sistema especifico o clase de problema. 

Diagrama de flujo:Representación gráfica, mediante la utilización de signos convencionales, del proceso que sigue la información en un programa determinado. Se utilizan habitualmente en la fase de desarrollo de aplicaciones por los programadores. 

El diagrama de flujo o Flowchart:es una de las técnicas de representación de algoritmos más antigua, y consiste en representar mediante símbolos las operaciones a realizar. Por ejemplo: el inicio y el fin del algoritmo se representan con un símbolo elíptico, las entradas y salidas con un paralelogramo, las decisiones con un rombo, los procesos con un rectángulo, etc. 

Un algoritmo está compuesto por tres elementos esenciales:

 Cabecera: Donde se da el nombre del algoritmo y se declaran las variables.

Cuerpo: Donde se realizan todas las acciones del programa.

Final: Donde se da finalización, porque debe ser finito.

Características y formas de algoritmos

Todo algoritmo debe contar forzosamente con tres características básicas: 

Preciso: Debe ser concreto, no tener pasos de más y la solución tiene que ser clara y concreta. 

Congruente:Al probar varias veces, los resultados deben ser siempre los mimos.

Finito:Al seguir los pasos debe llegar a la solución , es decir, debe tener término.

Los algoritmos pueden ser creados de dos formas: 

  

1)Seudocódigo:Es un conjunto pequeño y claro de instrucciones; en secuencia, que permite llevar a cabo una tarea.

2)Diagrama de flujo:Es la representación de la secuencia, a través de símbolos, de la tarea que se va a realizar. 

Un algoritmo debe tener 3 partes: INICIO, PROCESO y FIN O SALIDA.

 

Un ejemplo de algoritmo es el que realizamos para cambiar una llanta a un automóvil:

 Inicio Aflojar tornillos de las llantas

 levantar el coche con el gato 

 Sacar los tornillos de las llantas 

 Quitar la llanta

 Poner la llanta de repuesto

 Poner los tornillos 

 Bajar el gato

 Apretar los tornillos

 fin 

Para realizar los diagramas de flujo utilizamos distintas figuras geométricas

Sirven para distinguir el tipo de tareas que se ejecutan, las flechas indican el flujo del proceso y se valen de determinada simbología específica para facilitar su comprensión.

Por otra parte, un algoritmo consta de tres partes, secciones ó módulos principales, en la siguiente figura podemos observar:

 

 las secciones que constituyen un algoritmo.

El módulo 1.representa la operación o acción que permite el ingreso de los datos del programa 

 2.El módulo.representa la operación o conjunto de operaciones secuenciales, cuyo objetivo es obtener la solución al problema. 

El módulo 3.representa una operación o conjunto de operaciones que permiten comunicar al exterior el o los resultados alcanzados.

¿ PASO A PASO PARA CREAR UNA PAGINA WEB HTML?

INTRODUCCIÓN PARA TU PAGINA WEB HTML

Este manual pretende ser una introducción básica al lenguaje HTML, que permite escribir páginas de WWW. Su orientación es más bien práctica, por lo que no se han tenido en cuenta cuestiones como las diferentes versiones de HTML a las que pertenece cada directiva (lo cual resulta a veces más importante de lo que parece, porque implica que algunas directivas sólo funcionen con los programas de WWW más modernos: por ejemplo <center>).

Según creo, esta es una de las pocas (o la única) referencias sobre HTML escritas en castellano (que alguien me corrija si me equivoco). Para referencias más amplias (aunque en inglés) ver el final de esta página.

Mi agradecimiento a todas las personas que me han hecho llegar sus opiniones y consejos acerca de este manual. En sucesivas versiones iré mejorándolo para sea todo lo útil y completo que espero que sea.

---

CONTENIDOS

• Qué es HTML
• Cómo especificar efectos del texto
• Estructura básica de un documento HTML
• Estilos y efectos básicos
  • Títulos
  • Atributos del texto
  • Listas
  • Varios
• Enlaces y gráficos
  • Introducción
  • Qué es un URL
  • Enlaces
  • Gráficos
• Caracteres especiales
• Referencias

---

QUÉ ES HTML

HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape).

---

CÓMO ESPECIFICAR EFECTOS DEL TEXTO

La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí> (más adelante ya veremos la directiva concreta que se utiliza).

A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: <efecto parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes: </efecto>.

Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce.

---

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento.

La única utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado:

<title>Manual práctico de HTML</title>

en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento.

El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:

Estas
      palabras
forman          una
    frase.

producimos exactamente lo mismo que con:

Estas palabras forman una frase.

A la hora de la verdad lo que se ve es: Estas palabras forman una frase.

En resumen, la estructura básica de un documento HTML queda de la forma siguiente:

<html>
<head>
<title>Título</title>
</head>
<body>
Texto del documento, menciones a gráficos, enlaces, etc.
</body>
</html>

---

ESTILOS Y EFECTOS BÁSICOS

Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado.

---

TÍTULOS

Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica.

<h1>Mucha importancia</h1>

Mucha importancia

<h2>Menos importancia</h2>

Menos importancia

<h3>Mucha menos importancia</h3>

Mucha menos importancia

---

ATRIBUTOS DEL TEXTO

Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.

El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo:

Este será un texto normal (párrafo 1, línea 1).<br>
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p>
Este ya es el segundo párrafo (párrafo 2, línea 1).<p>

Este será un texto normal (párrafo 1, línea 1).

El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). Este ya es el segundo párrafo (párrafo 2, línea 1).

Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.

El texto preformateado (etiqueta <pre>) se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:

<pre>
Texto preformateado
---------------------
|  1 |  2 |  3 |  4 |
|  5 |  6 |  7 |  8 |
|  9 | 10 | 11 | 12 |
---------------------
</pre>

Texto preformateado
---------------------
|  1 |  2 |  3 |  4 |
|  5 |  6 |  7 |  8 |
|  9 | 10 | 11 | 12 |
---------------------

Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>:

<blockquote>Muchos años después, frente al pelotón de fusilamiento,
el coronel Aureliano Buendía había de recordar aquella tarde remota
en que su padre lo llevó a conocer el hielo.<br>
(Gabriel García Márquez, Cien años de soledad)</blockquote>

Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.
(Gabriel García Márquez, Cien años de soledad)

Las direcciones de correo electrónico se suelen marcar con esta directiva:

<address>Dirección: webmaster@etsit.upm.es</address>

Dirección: webmaster@etsit.upm.es

Se pueden dar también los atributos más tradicionales: negrita y cursiva:

<b>Esto en negrita</b> y <i>esto en cursiva</i>

Esto en negrita y esto en cursiva Se puede utilizar un tipo de letra similar al de una máquina de escribir:

<tt>Máquina de escribir</tt>

Máquina de escribir Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>:

<center>Verde que te quiero verde</center>

Verde que te quiero verde

---

LISTAS

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios).

Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.

Esto es una lista no numerada:

<ul>
<li>Tomates
<li>Zanahorias
<li>Puerros
</ul>

• Tomates
• Zanahorias
• Puerros

Esto una lista numerada:

<ol>
<li>Miguel Induráin
<li>Tony Rominger
<li>Eugeni Berzin
</ol>

1. Miguel Induráin
2. Tony Rominger
3. Eugeni Berzin

Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>). Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera:

<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>

Perro (n. masc.)

Animal de cuatro patas que ladra.

Gato (n. masc.)

Animal de cuatro patas que maúlla y se lleva muy mal con el perro.

Pescadilla (n. fem.)

Animal que vive en el mar y está recubierto de escamas.

---

VARIOS

La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones:

<hr>

---

Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser:

<!-- Modificado por Álvaro el viernes 2 de junio -->

---

ENLACES Y GRÁFICOS

INTRODUCCIÓN

Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento. Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica.

QUÉ ES UN URL

Para especificar de manera uniforme el objeto al que apunta nuestro enlace, se utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta (en realidad, como se verá dentro de un momento, la barra / puede considerarse parte de la ruta). El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del enlace. La razón de esta aparente complicación es que el WWW pretende unificar el acceso a servicios de información que previamente eran incompatibles entre sí, como ftp, gopher o telnet. El esquema más utilizado es http, correspondiente al propio WWW (es decir, que cualquier referencia a un documento HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet, gopher o wais.

La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000).

La ruta es el nombre del fichero que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra. Los diferentes nombres que constituyan la ruta completa al archivo se deben separar con la barra / (inclinada hacia la derecha), tal y como se hace en el sistema operativo UNIX (y al revés que en MS-DOS). La razón de este convenio es precisamente que la mayor parte de los servidores de WWW que hay en Internet son ordenadores basados en UNIX, debido a la gran superioridad tecnológica de este sistema sobre MS-DOS. Esto se nota también en que por lo general los nombres de los ficheros no tienen muchas limitaciones: pueden ser casi tan largos como queramos, contener varios puntos, etc. Por ejemplo, el nombre de cierto fichero situado en un servidor podría ser /info/documentos/ciencia/fisica/relatividad.html. Debemos tener en cuenta que en UNIX las mayúsculas y las minúsculas son distintas en los nombres de los ficheros: no es igual FICHERO que fichero.

Conviene que nos detengamos momentáneamente en la estructuración habitual de los ficheros en un servidor de WWW. Para empezar, siempre hay una página de bienvenida (home page) que podría compararse con la portada de un periódico o revista: si no sabemos exactamente qué es lo que buscamos, o no sabemos dónde encontrarlo, la portada es lo primero que vemos. Para acceder a la home page de cualquier servidor de WWW, basta con escribir una barra en el lugar de la ruta (es decir, reclamamos al servidor el directorio raíz). Por ejemplo, para acceder a la página de bienvenida de la ETSIT, hay que dirigirse a http://www.etsit.upm.es/, y para ir a la de la NASA habría que contactar con http://www.nasa.gov/.

El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese directorio raíz en distintos subdirectorios y archivos. Un convenio muy habitual relativo al nombre de los ficheros es hacer que los archivos que contengan documentos HTML terminen en .html.

ENLACES

Con lo que ya hemos dicho, podemos abordar sin problemas el asunto que originalmente nos ocupaba: cómo se introducen enlaces en un documento HTML. Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML:

<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>

Lo cual producirá el resultado: Pulse aquí para visitar la NASA

Por lo general no nos preocupa irnos tan lejos, sino sencillamente enlazar con otro documento que se encuentra en el mismo servidor, puede que incluso que en el mismo subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace, sino que basta con dar la mínima información imprescindible. El programa que se use para leer el documento final suele ser lo bastante listo como para deducir el resto. Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre: <a href="el_otro_fichero">pulse aquí</a>. O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a href="/la/ruta/que/sea/fichero.html">pulse aquí</a>. También pueden utilizarse rutas relativas: <a href="ruta/relativa/cosa.html">cosa</a>.

GRÁFICOS

Para incluir un gráfico en un documento HTML se utiliza la directiva <img>. En dicha directiva debe incluirse un parámetro src="URL", con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia. Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. El formato fundamental es el GIF, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto (Mosaic y Netscape pueden hacerlo). Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente.

Hay un parámetro optativo de la directiva <img> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos.

Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos:

<img src="monigote.gif" alt="MONIGOTE"><p>

Lo que se traduce en:

Como se ve, hemos especificado el texto alternativo "MONIGOTE", con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo.

Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo:

<img src="http://naic.nasa.gov/images/nasa-logo.gif"><p>

Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <a>. En este caso no debemos olvidar utilizar la opción alt="texto" para que todos los usuarios puedan seguir el enlace:

<a href="http://www.nasa.gov/"><img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA"></a><p>

---

CARACTERES ESPECIALES

Durante todo este manual hemos hecho una pequeña trampa a la hora de explicar las directivas y poner ejemplos, para facilitar la comprensión de las ideas fundamentales sobre HTML. Dicha trampa ha consistido en ocultar ciertas exigencias de HTML respecto al uso de caracteres especiales, denominación que, para nuestra desgracia como hispanohablantes, incluye a las vocales acentuadas y a la letra eñe. Existen también ciertas limitaciones relativas al uso de ciertos símbolos que significan algo en HTML, como el de menor que (<) o el signo inglés de and (llamado ampersand: &). Trataremos primero el caso más sencillo. Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso &lt;. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación:

• < (Menor que): &lt;
• > (Mayor que): &gt;
• & (símbolo de and, o ampersand): &amp;
• " (comillas dobles): &quot;

Es decir, que para escribir <"> en nuestro texto HTML original debemos poner &lt;&quot;&gt;.

El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en nuestro idioma son:

• á: &aacute;
• é: &eacute;
• í: &iacute;
• ó: &oacute;
• ú: &uacute;
• Á: &Aacute;
• É: &Eacute;
• Í: &Iacute;
• Ó: &Oacute;
• Ú: &Uacute;
• ü: &uuml;
• Ü: &Uuml;
• ñ: &ntilde;
• Ñ: &Ntilde;
• ¿: &#191;
• ¡: &#161;

Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin acentuar (puesto que se trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene, respectivamente. La equivalencia de los signos de abrir interrogación y exclamación es algo más oscura: a falta de una denominación más evidente, tenemos que usar el valor numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede hacer con cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo &#numero;.

La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es absolutamente recomendable respetar la norma especificada en HTML.

En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos sin preocuparse por estos problemas, y luego traducir a HTML correcto. Al final de este manual encontrará un enlace a un programita en C que hace precisamente eso.

Volviendo al reconocimiento de culpa que antes de hizo por haber ocultado estos detallitos, debemos decir que muchos de los ejemplos que antes se pusieron no eran totalmente correctos. Por ejemplo, cuando se escribió:

<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.

En realidad debería haberse puesto:

<dd>Animal de cuatro patas que ma&uacute;lla y se lleva muy mal con el perro.

Y en lugar de:

<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>

Debería haberse escrito:

<a href="http://www.nasa.gov/">Pulse aqu&iacute; para visitar a la NASA</a>

EJEMPLO DE UNA PAGINA WEB

ALGORITMO:

¿PASO A PASO PARA CREAR TU CUENTA EN GMAIL?

GUIA PASO A PASO PARA CREAR TU CUENTA DE GMAIL

El tener un correo electrónico hoy en día se ha vuelto una necesidad ya que es la puerta de nuestra casa para recibir las noticias del mundo.

En ésta entrada te  enseñaré, paso a paso, cómo crear tu cuenta  de e-mail en Gmail.  Tu cuenta de Gmail, aparte de darte acceso a tu cuenta de correo, te permite utilizar otros servicios que ofrece Google de forma gratuita, como por ejemplo:

• Google Talk
• YouTube
• Blogger
• Documentos
• Calendario
• Reader (lector de noticias), etc…

Algunas de las características más destacadas de Gmail son:

• Más de 7 GB de Almacenamiento
• Es totalmente gratuito
• Menos Spam: cuenta con excelentes filtros anti-spam
• Puedes acceder desde dispositivos móviles
• Chat y vídeo

Para empezar a crear tu cuenta de e-mail en Gmail, tienes que ir a ésta dirección: http://mail.google.com/mail?hl=es También podrías ir directamente a www.gmail.com, pero dependiendo como tengas configurado tu navegador, puedes terminar en la página en inglés. El primer enlace te lleva directamente a la página en español.

Esta es la primera pantalla que te encuentras.

Pincha en Crear una cuenta A continuación te divido en dos la pantalla que te aparecerá y en donde tendrás que empezar a llenar los datos que Gmail te pide para crear tu cuenta.

En Nombre y Apellido, pues eso, tu nombre y apellido 

Nombre de registro: aquí es donde pones el nombre que tendrá tu cuenta de e-mail. Por ejemplo, si te llamas Pedro Lopez, tu nombre de registro podría ser: PedroLopez o Pedro.Lopez o P.Lopez

Ten en cuenta que a lo mejor (lo más seguro) es que el nombre de registro que quieres ya esté ocupado por otro usuario y no lo puedas usar. Para saber si el nombre que quieres está libre, pincha en  Comprobar disponibilidad. Si Gmail te da el visto bueno, tu e-mail quedaría como:  PedroLopez@gmail.com  y puedes continuar con la contraseña.

Si Gmail te dice que el nombre no está disponible puedes escoger entre las opciones que te da Gmail o te puedes poner “creativo” y añadir tu fecha de nacimiento, Pedro.Lopez.1981, por ejemplo.

Trata de que tu nombre de registro no sea demasiado largo, que sea fácil de recordar y que te identifiques con él, ya que éste será la dirección de e-mail que le darás a los demás para que se puedan comunicar contigo.

Elija una contraseña. La contraseña tiene que tener como mínimo 8 caracteres (números y/o letras , también  símbolos de puntuación).  A medida que vayas escribiendo verás como la barra de fortaleza de contraseña te va indicando que tan fuerte o débil es tu contraseña.

Aqui tienes algunas sugerencias para la creación de una contraseña segura:

• Puedes incluir signos de puntuación y números.
• Utiliza una combinación de letras mayúsculas y minúsculas.
• Incluye sustituciones de aspecto similar, como el número cero en lugar de la letra ‘O’ o el símbolo ‘$’ en lugar de la letra ‘S’.
• Crea un acrónimo exclusivo
• Incluye sustituciones fonéticas, como ‘es3ado’ por ‘estresado’.

Pasos que deben evitarse:

• No utilices una contraseña que se ofrezca como ejemplo de buena contraseña.
• No utilices información personal en la contraseña (como tu nombre, fecha de nacimiento, etc.)
• No utilices palabras o acrónimos que figuren en el diccionario.
• No utilices patrones de teclado (asdf) ni números en secuencia (1234).
• No utilices únicamente números, mayúsculas o minúsculas en tu contraseña.
• No repitas caracteres (aa11).

Consejos para proteger tu contraseña:

• No comuniques la contraseña a nadie (ni siquiera a los más íntimos, compañeros de habitación, loros y demás).
• No escribas nunca tu contraseña.
• No envíes nunca tu contraseña en un mensaje de correo electrónico.
• Comprueba la contraseña actual y cámbiala de forma periódica.

No cerrar sesión. Si quieres que Gmail recuerde tus datos de acceso, entonces marca esta casilla. Mediante una cookie Gmail recordará tus datos durante dos semanas (obviamente siempre y cuando accedas a tu correo desde el mismo ordenador).
Para inhabilitar esta cookie, sólo tienes que hacer clic en Salir, situado en la parte superior de cualquier página de Gmail o Configuración. En ese caso, deberás volver a escribir tu nombre de usuario y contraseña cuando regreses a Gmail. Si no haces clic en Salir, la sesión de Gmail seguirá activa hasta que cierres tu navegador o salgas de la sesión.

Si compartes tu ordenador con otra(s) personas(s) no es buena idea que marques ésta casilla

Habilitar Historial web. Si marcas esta casilla el historial web te ofrece recomendaciones y resultados de búsqueda más relevantes basados en tu actividad web, proporcionándote una experiencia personalizada en Google.
Esta opción te permite tener un historial muy completo de que sitios visitas, en que fecha y hora, estadística de uso, etc.

CONTINUAMOS.... 

Pregunta de seguridad / Respuesta.  Aquí debes escoger una pregunta de seguridad, o crearte la tuya propia. Si se te olvida la contraseña (suele pasar!), Gmail te preguntará la respuesta a tu pregunta de seguridad.

Sugerencias para ayudarte a elegir una buena pregunta y respuesta de seguridad:

• Elige una pregunta de la cual sólo tu sepas la respuesta y que no esté relacionada con tu contraseña.
• Elige una pregunta a la que no pueda responderse tras una pequeña averiguación como, por ejemplo, el nombre de soltera de tu madre, tu fecha de nacimiento, tu nombre o apellido, tu número del seguro social, tu número de teléfono o el nombre de tu mascota.
• Elige una respuesta que puedas recordar, pero que no sea fácil de adivinar. Debe ser una oración completa.
• Si escribes tu propia pregunta, evita que la respuesta a ésta sea evidente, corta o común.

Sugerencias para proteger su pregunta y respuesta de seguridad:

• Nunca divulgues ni anotes esta información.
• Nunca envíes esta información por correo electrónico.
• Cambia periódicamente tu pregunta y respuesta.

Correo electrónico de recuperación. Aunque este punto es opcional, es muy recomendable que coloques una cuenta de correo electrónico secundaria. Mediante esta cuenta secundaria Google/Gmail se pondrá en contacto contigo si  por ejemplo no puedes acceder a tu cuenta de Gmail o si olvidas tu contraseña, te enviaran a esta cuenta la pregunta de seguridad.
Ubicación.  El país en donde resides.
Verificación de la palabra. Para mi, y no creo ser la única que lo piense,  ésta es  una de las prácticas más molestas que existen hoy en día en Internet para evitar el Spam. Para comprobar que sea una persona de carne y hueso y no  bot (una maquina, un programa) el que esté creando la cuenta de correo, debes introducir los caracteres que veras en la imagen (al ser una imagen, un programa no puede reconocer los caracteres).
Si tienes suerte, los caracteres serán reconocibles, si no, te dará error y te mostrará otra imagen. Ten en cuenta que no distingue entre mayúsculas y minúsculas, es decir, que si quieres lo puedes poner todo en mayúsculas aunque veas que en la imagen están en minúsculas.
Condiciones del servicio.  Para poder acceder tu cuenta de Gmail y los demás servicios que te ofrece Google tienes que aceptar las condiciones. Aunque la mayoría de la gente no lo hace, te recomiendo que por lo menos le eches un vistazo rápido, nunca está de más.
Para crear, por fin, tu cuenta haz click sobre el botón que dice: Acepto. Crear mi cuenta
Si acaso te equivocaste  o sin querer, dejaste algún campo en blanco, no te preocupes… Gmail te volverá a mostrar el formulario indicándote en rojo qué te faltó.
Si todo está correcto, felicidades!! Acabas de crear tu cuenta en Gmail.