Para montar un negocio en internet, es necesario aprender a utilizar enlaces.  El número de enlaces que tiene tu página web apuntando hacia otros sitios web relevantes, son lo que muchos expertos consideran el elemento de mayor importancia para conseguir un buen posicionamiento en los servidores.

Hay tres tipos de enlaces: enlaces internos, enlaces entrantes y enlaces salientes.

Enlaces Internos

La popularidad de enlaces internos se refiere a los enlaces que apuntan hacia diferentes páginas dentro de un mismo sitio de internet. Es importante que enlaces entre sí las páginas de mayor importancia dentro de tu sitio web. Esto te ayudará a aumentar la presencia de tu tema en el internet, y le mandará el mensaje a las arañas de los servidores de cuales son las páginas más importantes de tu sitio web. Haciendo correlación entre las páginas de mayor importancia también ayuda a que las arañas encuentren e indexen las páginas con mayor rapidez, esto es de especial ayuda cuando las páginas se hayan enterradas dentro de tu sitio web.

Enlaces Entrantes

La popularidad de enlaces entrantes se refiere al número de enlaces que apuntan a un sitio web desde otros sitios webs relacionados. Existen dos tipos de enlaces entrantes:

1 Los enlaces desde sitios web bajo tu control. Puedes controlar tu tema construyendo varios sitios webs pequeños y entrelazándolos entre sí, e incluyendo enlaces hacia el sitio web principal. Escoge palabras clave que describan tu sitio web principal, y utilizalas para enlazar tus sitios web pequeños hacia tu sitio web principal. Es importante hacer esto pues buscadores como Google ponen gran importancia en el texto utilizado en los enlaces.

2 Enlaces desde sitios web que no están bajo tu control. Hay dos maneras de hacer que sitios web enlacen con el tuyo. La mejor forma de conseguir esto es preguntando cortésmente. La manera de encontrar éstos sitios web es viendo quien está enlazando con la competencia. Y la forma de encontrar esos sitios, que están enlazados con la competencia, es a través de los buscadores. En la casilla de búsqueda, mete “enlace: y el nombre de la competencia”. Haz esto dos veces, con y sin www. No hace falta que uses comillas. Para ver la popularidad de tus propios enlaces, puedes hacer lo mismo con tu dominio. Otra manera de encontrar sitios para enlazar con el tuyo es a través de directorios de internet.

Una vez que hayas hecho una lista de sitios web relacionados con el tuyo, mete un enlace de ellos en tu sitio web. Después manda un correo electrónico a cada dueño de los sitios web informándoles que has enlazado con su sitio y pidiéndoles que hagan lo mismo con el tuyo. Recálcales los beneficios de establecer enlaces.

Otra manera de encontrar sitios que aceptan enlaces es, nuevamente, a través de los buscadores. Busca “agregar URL” y “tus palabras claves”. En las palabras claves, mete esas palabras que mejor describan tu sitio web. En este caso es importante utilizar las comillas por que así el buscador sólo te mostrará esas palabras exactas. No te limites a “agregar URL”, utiliza cuantas definiciones diferentes se te ocurran, por ejemplo, “agregar enlace”, “enlazar con otros sitios”, “añadir enlace”, “añadir sitio web”, “añadir página web”, etc. Lo mismo cabe para la frase “agregar URL”, puedes utilizar “incluye”, “añade”, etc.

Enlaces Salientes

Enlaces salientes son los enlaces que apuntan de tu sitio web a otros sitios web. Las arañas de los buscadores buscan entre los enlaces y determinan si el contenido de tu sitio correlaciona con el contenido de los otros sitios enlazados. Esto mejorará la clasificación de tu sitio y de tu tema.

Es muy importante nombrar los enlaces internos y salientes correctamente, y puesto que las palabras claves son de gran importancia para establecer la relevancia de la página web, es imperativo que sean utilizadas a través del contenido de la página. El título de la página web y los encabezamientos deberán siempre contener las palabras claves.

También nombrar las páginas con las mismas palabras clave puede ser de gran ayuda. Los enlaces visibles que van a entrelazar las páginas deberan de tener la misma palabra o frase clave que el nombre de la página hacia donde apuntan. Por ejemplo, si el título de la página es llama “entrenamiento perros”, el nombre de la página debería ser “entrenamiento-perros.html” o “entrenamiento_perros.html”. Asegúrate de incluir un guión o linea de subrayado entre cada palabra, esto asegura que los buscadores reconocen cada palabra individualmente, no escribas “entrenamientoperros”. De la misma manera, asegúrate de que todos los enlaces hacia esa página utilizan el texto de enlace: “Entrenamiento Perros”, así todo encajará perfectamente.

No dejes de enlazar tu sitio web cuanto puedas, de esta manera obtendrás un mejor posicionamiento en los buscadores de la web.

Las plantillas son el método más fácil para hacer tus páginas, lo cual no siempre quiere decir que vaya a ser el mejor. Todo depende de la plantilla que utilices. Tienes que decidir el balance entre facilidad y buenos resultados. Si eres un novato en esto del internet, las plantillas son de gran ayuda y te ahorrarán mucho tiempo y dolores de cabeza. Yo misma utilizo plantillas de vez en cuando y encuentro que me hacen un gran servicio.

Es bien sabido que todos utilizamos plantillas para multitud de cosas, como escribir cartas, o reportes, etc. También podemos utilizar una página web que ya tengamos hecha, copiarla a un nueva carpeta en nuestro ordenador, y adaptarla para que pueda ser utilizada como otro sitio web. ¡Esto te ahorrará horas y hasta días!

Pero lo que tienes que recordar es que las plantillas, son plantillas al fin y al cabo, y vas a tener que dedicar un poco de tiempo para adaptarlas, mejorarlas y hacerlas tuyas. Por esta razón hemos visto como utilizar html y editores de html. Para que puedas adaptar las plantillas a tu gusto y necesidades. Las puedes abrir en notepad o Kompozer y modificarlas hasta conseguir la página web deseada.

Para ver plantillas diferentes que puedes utilizar de inmediato, vete a Plantillas Web.

Una compañía de jovenes diseñadores donde encontrarás multitud de plantillas para diferentes usos, extras para tu web, diferentes tipos de letras, emoticons y varios videotutoriales, incluyendo uno para utilizar kompozer.

Utiliza una plantilla porque te ahorrarán tiempo, pero estate preparado a dedicarle algún tiempo para adaptarla a tus necesidades.

Ahora vamos a ver como utilizar un constructor de sitios web. En la lección anterior aprendimos a utilizar un constructor de páginas web (también llamados editores WYSIWYG, como kompozer). El constructor de páginas web y el constructor de sitios web se diferencian en que el primero hará lo que le pides, le tienes que dar las instrucciones para construir el sitio, es una herramienta que te ayuda a construir un sitio, pero no lo construye por tí.

Mientras que el segundo hará casi todo el trabajo por tí, casi todos utilizan plantillas. Vamos a ver en detalle en qué consiste un constructor de sitios web. Las ventajas de utilizar este sistema son las siguientes: es fácil de utilizar, son rápidos y algunos te construirán un buen sitio web. Las desventajas son: el código html puede ser un poco desordenado, lo cual te dificultará a la hora de manipularlo y también puede que por ello los servidores no vean tu sitio web con bueno ojos. Otra desventaja pueden crear huellas de código que tampoco gustan a los servidores, esto quiere decir que la misma sección de código va a ser utilizada por cientos o miles de sitios web y si tu servidor (eg google) reconoce estas secciones de código como utilizadas por sitos basura (spam), programará su algoritmo para evitar dichos sitios web. Esto no debería de ocurrir si utilizar un constructor fiable. La tercera desventaja de estos constructores es que suelen venir atados a un plan de alojamiento, y si terminas tu contrato con tu plan de alojamiento, tu sitio web tambié se cesará. Estas desventajas no ocurren con todos los constructores de sitios web, pero es una ventaja tener conocimiento de estos problemas a la hora de escoger un programa.

Hay algunos programas que son híbridos de los dos, pueden hacer las dos funciones.

El mejor programa de este tipo se llama Xsite Pro, no tiene ninguna de las desventajas mencionadas y te ayuda a construir sitios web rápida y fácilmente. Si te interesa lo puedes comprar desde el siguiente enlace:

http://www.xsitepro.com/index_r.html?p=aprygana&w=buy

En la siguiente lección veremos con más detalle como utilizar el constructor de sitios web que viene en el servidor de alojamiento que uso yo: Hostgator.

Hay constructores de web que puedes comprar como Microsoft Frontpage o Adobe Dreamweaver, ambos tienen versiones en Español. Sin embargo también hay editores gratis que te pueden servir igual de bien. En el blog de hoy vamos a ver como utilizar Kompozer. Vete a la página http://kompozer.softonic.com/descargar si tu sistema operativo es Windows, o a la página http://kompozer.uptodown.com/mac si usas Mac.

En ambos casos pincharás el boton Descargar.

Windows:

Mac:

Una vez que lo hayas descargado, verás el icono de Kompozer:

Haz doble clic y el programa se abrirá sin más.

Y esto es lo que veremos:

WYSIWYG es el nombre que se le da a este tipo de editor, y las siglas quieren decir: What You See Is What You Get, es decir, lo que ves es lo que hay. Con esto quieren decir que lo que veas en la página de arriba va a ser lo que se vea en el sitio web.

Si utilizamos el ejemplo de página web que construimos en el blog sobre html, se vería así:

Para ver el código fuente de la página, haz clic en el icono “Código fuente” , en la esquina izquierda inferior de la página.

Como puedes ver, esto es el código que escribimos utilizando html en el blog 19:

También puedes buscar un archivo dentro de tu ordenador, y abrirlo haciendo clic en el

icono donde pone Abrir:

Vamos a ver un par de cosas que podemos hacer utilizando kompozer.

Si quieres cambiar el color del texto, resalta el texto que quieres cambiar:

Haz clic en el recuadro de colores:

Escoge el color que prefieras y pincha Aceptar:

Y tu texto cambiará de color:

Para cambiar el tamaño del texto, tendrás que una vez más resaltar el texto que quieres cambiar.

El la casilla “Titulo1” podrás escoger el tamaño que te vaya mejor:

Para cambiar el tipo de letra, una vez más resalta el texto a cambiar y escoge tu preferida de la casilla “Anchura Variable”:

Si quieres incluir un enlace en tu página, escoge y resalta el texto donde quieras poner el enlace, por ejemplo:

ve a la casilla “Enlace”:

Introduce el enlace al que quieras mandar a tus clientes, y haz clic en Aceptar:

Para insertar una tabla, ve al icono “Tabla” en la parte superior de la página:

Donde podrás escoger el tamaño de tu tabla:

Y se verá así:

Si quieres borrar algo en tu página, haz clic en el icono “Deshacer”:

Y si cambias de parecer y quieres volver a ponerlo, haz clic en “Rehacer”:

Para incluir una imagen, resalta la imagen (ctrl+c), dentro de tu ordenador, que quieras incluir. La imagen puede provenir de tus archivos, de tu sitio web o del internet, siempre y cuando tengas permiso para utilizarla. Escoge en la página que estamos construyendo, donde quieres la imagen y pegala (ctrl+v).

Una vez que hayas terminado la página, la puedes publicar utilizando el icono “Publicar”:

Rellena toda la información y haz clic en Publicar:

Si este sistema te parece demasiado complicado, siempre puedes subir la página utilizando FileZilla, como vimos en el blog último.

Bueno y esto es todo por hoy! No tengas miedo, metete en Kompozer y empieza a diseñar tus páginas web, ya verás que simple te parece una vez que te hayas familiarizado con el programa.

En las anteriores lecciones vimos como escoger, comprar y alojar un dominio. También estudiamos como hacer nuestra primera página web y echamos un largo vistazo a los elementos html más comunes. En la lección de hoy vamos a ver como hacer para que esa página web que construiste aparezca bajo tu dominio.

La forma más fácil de subir archivos (o páginas web) a tu servidor, para ser vistas en tu sitio web, es utilizando un cliente de Protocolo de Transferencia de Archivos (en inglés se conoce como FTP client). Hay multitud de FTPs que puedes utilizar. Hay FTP básicos que vienen incluidos en los sistemas operativos de los ordenadores, por ejemplo, en Windows, DOS, Linux, etc. Pero estos FTP integrados no son la mejor manera de transferir archivos. También existen otros FTP que te puedes bajar de la red, como por ejemplo, FileZilla, CuteFTP, WordWide FTP, SmartFTP, etc. Estos suelen ser más completos y más fáciles de usar. Y afortunadamente hay muchos buenos y gratis que te puedes bajar.

Yo, personalmente utilizo FileZilla, es gratis, te lo puedes bajar facilmente y funciona muy bien. Para bajartelo, busca Filezilla en google y verás varios sitios web donde te lo puedes descargar. Te llevarán a una página parecida a la de abajo, donde podrás pinchar en el enlace ‘Descargar’.

Sigue las instrucciones para instalar el programa, es muy sencillo. Una vez que te hayas instalado el programa, te aparecerá la siguiente ventana:

Vamos a verla más detalladamente:

En el recuadro rojo, a la izquierda, donde pone ‘Local site’ es un navegador donde sale la información de tu propio ordenador.

En el recuadro azul, a la derecha, donde pone ‘Remote site’, es donde va a salir los archivos de tu sitio web.

Para entrar en Filezilla, tienes que rellenar la información en las casillas que hemos resaltado con el recuadro verde, en la parte superior de la página. Normalmente, con casi todas las compañías de alojamiento, en la casilla que pone ‘Host’ vas a meter el nombre de tu sitio web: ejemplo.com.

En la casilla ‘Username’ vas a introducir el nombre de usuario que utilizas para tu cuenta en la compañía de alojamiento, y en la casilla ‘Password’, también pondrás la contraseña que utilizas para tu cuenta en la compañía de alojamiento. (Esto es el caso en las compañías de alojamiento que utilizan el sistema C-Panel, que vimos en el blog dedicado a como escoger tu compañía de alojamiento. Hostgator, la compañía que uso yo utiliza este sistema. Si quieres hacerte cliente de Hostgato, en la página de recursos de aprendeygana.org tengo un enlace donde encontrarás un cupón de descuento.)

Después de rellenar estas tres casillas, sólo hace falta hacer clic en ‘Quickconnect’, y en el lado derecho de la página verás los archivos de tu sitio web.

De los archivos que vas a ver, vas a escoger el archivo que se llama public_html ó a veces se llama www, en algunas compañías de alojamiento tendrás los dos, que apuntan básicamente al mismo sitio. En la foto los hemos resaltado con un recuadro rojo. Vas a hacer doble clic en public_html para abrirlo. Y verás los archivos de tu sitio web, como en la imagen de abajo. Como tu sitio web aún esta vacio, solamente verás un par de archivos.

¿Te acuerdas de la página web que hicimos en la lección 17? Pues ahora es cuando la vamos a necesitar pues vamos a subirla a tu sitio web utilizando FileZilla. Selecciona el archivo index.html y arrastralo al recuadro Filename, abajo derecha:

Si ahoras vas a tu sitio web, verás la página index.html en tu página de inicio.

Puedes utilizar FTP para subir toda clase de archivos, fotos, videos, etc. a tu sitio web, y ya ves lo simple que es.

Otro ejemplo, para escribir una frase entre comillas, se utilizaría el siguiente código: "
“Htlm no es complicado”, se escribiría: "Html no es complicado"

Veamos una lista de esos códigos especiales de mayor utilización en Español.

Á : A mayúscula, acento agudo: Á
É: E mayúscula, acento agudo: É
Í: I mayúscula, acento agudo: Í
Ñ: Eñe mayúscula: Ñ
Ó: O mayúscula, acento agudo: Ó
Ú: U mayúscula, acento agudo: Ú
Ü: U U mayúscula, diéresis: Ü
á: a minúscula, acento agudo: á
é: e minúscula, acento agudo: é
í: i minúscula, acento agudo: í
ó: o minúscula, acento agudo: ó
ú: u minúscula, acento agudo: ú
ü: u minúscula, diéresis: ü

¿ : Abrir interrogación: ¿
?: Cerrar interrogación: ?
¡: Abrir exclamación: ¡
!: Cerrar exclamación: !
#: Signo de número: #
$: Dólar: $
%: Tanto por ciento: %
&: Ampersand: &
‘ : Apóstrofe: '
( : Cerrar paréntesis: (
) : Abrir paréntesis: )
* : Asterisco: *
+ : Signo más: +
, : Coma: ,
- : Guión: -
. : Punto : .
/ : Barra de división: /
0 – 9: Dígitos del al 0-9: 0 – 9
: : Dos puntos: :
; : Punto y coma: &#59;
< : Menor: &#60;     Igual= : &#61;    > : Mayor: &#62;
@ : Arroba: &#64;
A – Z: Letras A-Z: &#65; – &#90;
: Barra inversa: &#92;
_ : Subrayado: &#95;
a – z : Letras a-z: &#97; – &#122;
Espacio sin separación: &#160;
¢ : Centavo: &#162;
£ : Libra Esterlina: &#163;
¥ : Yen: &#165;
© : Copyright: &#169;
ª : Doña: &#170;
® : Registrado: &#174;
° : Más-menos: &#177;
² : Dos superíndice: &#178;
³ : Tres superíndice: &#179;
¹ : Uno superíndice: &#185;
¼ : Un cuarto: &#188;
½ : Un medio: &#189;
¾ : Tres cuartos: &#190;
⅛ : Un octavo: &#8539;
⅜ : Tres octavos:&#8540;
⅝ : Cinco octavos: &#8541;
⅞ : Siete octavos :&#8542;

Estabamos describiendo las etiquetas que separan texto.

Otro separador de bloques de texto es <HR> , éste es un elemento vacío, por lo tanto no necesita </HR>. HR quiere decir Horizontal Rule, o linea horizontal. Y se ve de la siguiente manera:

A este elemento se le pueden añadir los parámetros de longitud (WIDTH) y anchura (SIZE).  Por ejemplo:

<HR WIDTH= 600 SIZE= 6>

También se pueden utilizar los parámetros ALIGN=CENTER (por defecto) o ALIGN=LEFT (se alinea a la izquierda) y ALIGN=RIGHT (se alinea a la derecha).
Si se quiere utilizar un recuadro para enmarcar texto, el elemento que hay que utilizar es:<FIELDSET></FIELDSET>

Dentro de <FIELDSET> se puede utilizar el elemento <LEGEND> .  Este elemento sirve para insertar un titulo en la linea superior del recuadro.
Y se escribe de la siguiente manera:

<FIELDSET>
<LEGEND> Aqui va el titulo que se quiera poner<LEGEND>
Aqui va el texto que se quiera poner dentro del recuadro
<FIEDSET>

El siguiente elemento es el que nos deja hacer tablas: <TABLE></TABLE>

Dentro del elemento <TABLE> hay varios otros elementos:

Las tablas se pueden empezar con un titulo <CAPTION>
Las filas (row) se definen por: <TR></TR>
Las cabeceras (header) se definen por : <TH></TH>
Las celdas de datos (data) se definen por: <TD></TD>
El ancho de los bordes de la tabla se define por : <BORDER> (por defecto 0)
El número de píxels que separan las celdas, una de la otra se define por: <CELLSPACING> (por defecto es 2)
El número de píxels que separan el borde de la celda del contenido: <CELLPADDING> ( valor defecto es 1)
La alineación horizontal de los datos dentro de la celda, éstos pueden ser: LEFT (izquierda), RIGHT (derecha) o CENTER (centro): <ALIGN>
La alineación vertical de los datos, éstos pueden ser: TOP (arriba), BOTTOM (abajo) o MIDDLE (centro):                                                                                                            <V ALIGN>                                                                                                                                                                                                                                                                    <ROWSPAN> define la altura o anchura de una celda <TD> o cabecera <TH>, altura o anchura se miden por el número de filas.                                                                                                                                                                                                                                                                                 <COLSPAN> define la altura o anchura de  una celda <TD> o cabecera <TH>, en este cas la altura o anchura se miden por el número de columnas.

Un ejemplo de una tabla:

<TABLE BORDER>
<TR>
<TH>LINEA1</TH> <TH>LINEA2</TH> <TH>LINEA3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

En el siguiente blog veremos las etiquetas que debemos utilizar para incluir acentos y otros elementos.

Elementos de la Cabecera del documento:

<HEAD></HEAD>

Esta es la primera etiqueta que se utilizará en un documento html. Entre <HEAD> y </HEAD> reside la información sobre el documento. Generalmente esta información no es visible cuando se navega por el documento.

<TITLE></TITLE>

Cada documento debe de tener un elemento <TITLE> que proporciona el título del documento que usualmente se verá en la parte superior de la ventana del buscador. Esto es lo que el navegador guarda en Bookmarks, lo que se ve cuando se imprime el documento, y también lo que el ordenador guarda en su caché (disco dentro del ordenador donde el navegador guarda las páginas visitadas) y mostrará cuando la página sea llamada de nuevo.

<META></META>

Esta etiqueta es para incluir información sobre el sitio web que no se verá en el sitio web. Por ejemplo:

<META NAME=”author” CONTENT=”Name”> indicaría el nombre del autor.

<META NAME=”keywords CONTENT=”keyword keyword keyword”> indicaría las palabras clave que queramos incluir para que los buscadores puedan identificar nuestro sitio más fácilmente.

<META NAME=”description” CONTENT=”This is a site”> esto indicaría un breve resumen de tu sitio que sería utilizada por los navegadores para contestar una búsqueda.

<META HTTP_EQUIV=”Refresh” CONTENT=”10”> esto indica al visualizador que vuelva a cargar la página activa a los 10 segundos.

También puedes impedir que la página sea guardada por el caché del ordenador:

<META HTTP_EQUIV=”Expires” CONTENT=”no-cache”>

O que la página sea eliminada nada más recibida:

<META HTTP_EQUIV=”Expires” CONTENT=”0”>

O que la página expire inmediatamente al entrar en el caché, esto se hace poniendo una fecha ya pasada:

<META HTTP_EQUIV=”Expires” CONTENT=”thur, 7 April 2011 17:55:43 GMT”>

Puedes poner todos elementos <META> que te interesen, pero sin repetirlos.

El segundo componente de un documento HTML es le cuerpo o <BODY>, y es donde va el contenido del documento:

<BODY>

Entre estas dos etiquetas va el texto del documento.

</BODY>

Dentro del elemento <BODY> podemos utilizar varios elementos diferentes para describir como el documento va a ser reproducido. Estos son los elementos bloque:

<H1> </H1> Tamaños de Titulares, estos son diferentes tamaños de letras y van de 1 (mayor) a 6 (menor), estos elementos no se pueden utilizar en el mismo párrafo, cada elemento H necesitará su propia linea.

Esto es H1

Esto es H2

Esto es H3

Esto es H4

Esto es H5

Esto es H6

Otra forma de cambiar los tamaños de las letras es utilizando el elemento <FONT></FONT>

Se pondrá el valor que se le quiera dar, del 1 al 7, el valor por defecto suele ser el 3. Se pueden utilizar diferentes atributos del elemento <FONT> en la misma linea, en el mismo párrafo. Se escribirá de la siguiente manera:

<FONT SIZE=1></FONT>

<FONT SIZE=2></FONT>, etc.

Si se quiere cambiar el valor por defecto (3) de todo el documento se puede utilizar el elemento <BASEFONT SIZE=valor>: en donde dice valor, se pondrá el número del tamaño requerido. Este valor se mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> con otro tamaño.

También se puede utilizar el elemento <FONT> para cambiar la tipografía o fuente de la letra, por ejemplo:

<FONT FACE=”arial”> texto </FONT>

<FONT FACE=”Applegothic”> texto </Font>

Se pueden utilizar los atributos de tamaño, de fuente y de color al mismo tiempo:

<FONT FACE=”Apple Chancery” SIZE= 7 COLOR=”red”> texto </Font>

Lista de colores:

<FONT COLOR=”red”></FONT> : rojo

<FONT COLOR=”blue”></FONT> : azul

<FONT COLOR=”navy”></FONT> : azul marino

<FONT COLOR=”green”></FONT> : verde

<FONT COLOR=”yellow”></FONT> : amarillo

<FONT COLOR=”lime”></FONT> : lima

<FONT COLOR=”magenta”></FONT> : rosa

<FONT COLOR=”purple”></FONT> : morado

<FONT COLOR=”cyan”></FONT> : azul turquesa claro

<FONT COLOR=”brown”></FONT> : marrón

<FONT COLOR=”black”></FONT> : negro

<FONT COLOR=”gray”></FONT> : gris

<FONT COLOR=”white”></FONT> : blanco

Hay muchos mas colores que se reconocen por un valor numérico y de letras individual para cada uno:

Estos se escribirían de la siguiente manera:

<FONT COLOR=”660000”></FONT>

<P></P> Denota un párrafo. Se puede utilizar con los atributos:

<P ALIGN= left> Alineación izquierda

<P ALIGN= center> Alineación centro

<P ALIGN= right> Alineación derecha

<BR></BR> Se usa cuando se quiere dejar una línea vacía entre dos párrafos.

BR quiere decir Break en inglés, que significa romper o hacer una pausa.

Se utilizaría de la siguiente forma:

<P> texto a texto a texto a texto a texto a texto a texto a texto a texto a texto a texto a texto a texto a <BR>

texto b texto b texto b texto b texto b texto b texto b texto b texto b texto b texto b texto b texto b texto b </P.

<DIV></DIV> es parecido a <BR> pues se utiliza para demarcar divisiones en un documento. La diferencia es que <DIV> tiene los atributos: left/right/center, que dictaminan donde se va a poner el texto, y que el elemento <DIV> necesita ser cerrado </DIV>.

<DIV ALIGN=left></DIV> texto comienza a la izquierda

<DIV ALIGN=center></DIV> texto comienza centro

<DIV ALIGN=right></DIV> texto comienza a la derecha

Si vas a citar un párrafo extenso, deberías utilizar el elemento <BLOCKQUOTE></BLOCKQUOTE> esto sirve para presentar párrafos como si estuviesen tabulados.

En nuestro siguiente blog seguiremos explicando las etiquetas de html más comunes.

HTML utiliza etiquetas de acción (también llamados elementos) para dar instrucciones. El símbolo ‘<’ denota el principio de la etiqueta de acción y el símbolo ‘>’ denota el final de la etiqueta de acción. Todo el código html va escrito dentro de estos símbolos. Éstas etiquetas de acción son lo que diferencian el código del texto en un documento html. Estas etiquetas pueden estar llenas o vacías. Las etiquetas llenas se hacen escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una / antes de la misma. Por ejemplo si se empieza un documento con el elemento <html> para mostrar que va a ser un documento html, se pondría al final del documento </html> para mostrar que es el final del documento. Para los elementos vacíos, no es necesario poner la instrucción con la barra al final porque estos elementos no producen un efecto sobre el texto. Son elementos que normalmente se utilizan para separar bloques de texto.

Para escribir tu página en html, vete a Notepad en windows, un programa que viene instalado ya en los ordenadores, o si quieres un programa más completo, puedes bajarte Notepad++ gratis del internet haciendo una búsqueda en google de ‘Notepad++ descarga gratis’. Si tienes un ordenador apple, te puedes bajar ‘Textwrangler’.

Para abrir un documento en Windows, haz clic con el botón derecho del ratón, y escoge ‘Nuevo’ y del menú escoge ‘documento’. Verás un pequeño ícono en la pantalla, el siguiente paso es cambiarle la terminación al documento para que termine en html. Haz doble clic en el recuadro del nombre y cambialo de .txt a .html, por ejemplo: index.html. El ordenador te va a preguntar si estás seguro, haz clic en Si, y ya está, ya tienes tu primera página html.  (La vamos a llamar index por que asi se llaman las paginas de inicio de los sitios web.)

(Para llevar este paso a cabo es necesario que las extensiones o terminaciones de tus documentos sean visibles en tu ordenador. Para Windows XP tienes que ir a Herramientas (Tools) > Opciones de Carpeta (Folder Options) > Ver (View) y asegurarse que la opción de esconder extensiones no está marcada.)

Abre la página que acabamos de crear en Notepad haciendo clic con el botón derecho del ratón y escogiendo abrir con notepad.

Lo primero que hay que hacer es poner la etiqueta <HTML> para mostrar que es un documento html, y seguidamente cerrar la etiqueta escribiendo </HTML> para no olvidarnos más tarde. Las siguientes instrucciones las escribiremos entre estos dos elementos. Lo siguiente que vamos a escribir es <HEAD>, </HEAD> este elemento no es necesario, pero sirve para escribir información sobre tu página (como una descripción o palabras clave) para utilización de los buscadores y <TITLE>, </TITLE> para el titulo que será utilizado por los buscadores, seguido por <BODY>, </BODY> donde escribiremos el texto, después del elemento del texto podemos incluir otros elementos que describen como queremos que se vea el texto, por ejemplo, si ponemos la etiqueta <DIV ALIGN=CENTER> </DIV>, esto posicionaría el texto en el centro de la página. Para incluir una frase titula, utilizaríamos el elemento <H1>, </H1>. Para denotar un párrafo pondríamos <P>, esta etiqueta es vaciá, no hace falta cerrarla. En los elementos de párrafo, también puedes añadir descripciones como: <P ALIGN=CENTER> que centraría este párrafo. Otro elemento que vamos a añadir va a ser el elemento <B> </B> que pondría el texto en negrita, o <I></I> que lo pondría en cursiva.

<HTML>

<HEAD>

<TITLE> Nuestra Primera Página en HTML </TITLE>

</HEAD>

<BODY>

<DIV ALIGN=CENTER>

<H1>Aprende fácilmente a escribir utilizando html</H1>

<P>

Párrafo 1: Aquí escribirías tu texto. xxx xxxx xxxx xxxx xxx xxxxx xxxxx xxxxx xxxx xx xxxx xxxx xxx xxx xxx xxxxx xxxxx xxxx xxxxx xxxxxx xxxxx xxxxxx xxxx xxxxx xx xxxx x xxxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxx x

<P>

Párrafo 2: Y más texto xxxxx xxxxxxxx xxxxxxx xxxxxxxx x xxxxxxxxxx xxxxxxx xxx x xxxxxxxx xxxxxxxxx xxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx xxxxxx xxxx x xx xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx

<P ALIGN=CENTER>

<B><I> Empieza ya a utilizar html.</B></I>

</DIV.>

</BODY>

</HTML>

Esta página se vería de la siguiente manera:

Aprende fácilmente a escribir utilizando html

Párrafo1: Aquí escribirías tu texto xxxx xxxx xxxx xxxx xxx xxxxx xxxxx xxxxx xxxx xx xxxx xxxx xxx xxx xxx xxxxx xxxxx xxxx xxxxx xxxxxx xxxxx xxxxxx xxxx xxxxx xx xxxx x xxxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxx x

Párrafo2: Y más texto xxxxx xxxxxxxx xxxxxxx xxxxxxxx x xxxxxxxxxx xxxxxxx xxx x xxxxxxxx xxxxxxxxx xxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx xxxxxx xxxx x xx xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx

Empieza ya a utilizar html.

Guarda la pagina index.html en el escritorio de tu ordenador pues la vamos a utilizar para mostrar como subir archivos a tu sitio web en una proxima leccion.  En nuestro siguiente blog, os daré una lista más completa de las etiquetas o elementos html. Prueba a hacer tu primera página en html, verás que no es tan complicado y puede llegar a ser, incluso, divertido. Y sobretodo, no te olvides de cerrar los elementos, que es lo más importante.

Si quieres tener un negocio en internet, la herramienta más importante, aunque no indispensable, es tu sitio web. Esta será tu presencia en la web, desde donde podrás mostrar tus productos y venderlos al público. Ahora te preguntarás, ¿y por que construir nuestro sitio web ahora, antes aún de haber desarrollado nuestro primer producto?

La respuesta es sencilla: para poder empezar a hacer el marketing de nuestro sitio web. En las lecciones anteriores decidimos que producto nos gustaría vender y también escogimos el nombre de dominio de nuestro sitio web. Con esta información ya podemos desarrollar nuestro sitio web y empezar a darlo a conocer. ¡Lo más importante para tener éxito con un sitio web es lograr que éste atraiga tráfico y para atraer ese tráfico es indispensable hacer un buen marketing! Así que cuanto antes puedas empezar, mejor.

Así que veamos, ¿que es un sitio web? Es una colección de información virtual a la cual se accede a través del internet. Un sitio web puede estar compuesto de una, o varias páginas web. El trabajo de los navegadores en los ordenadores es el de traducir los sitios web para que podamos verlos en la pantalla. Los navegadores tienen que traducir porque los sitios webs están escritos en lenguajes de programación. Hay varios lenguajes de programación diferentes, pero el que nos interesa a nosotros, porque es el predominante para la elaboración de páginas web, es el llamado HTML (Lenguaje de Marcado de Hipertexto). No es necesario saber como programar para construir nuestro propio sitio web, aunque siempre viene bien saber lo básico de HTML.

Ahora veamos las diferentes maneras de construir tu sitio web:

1- Lo puedes construir desde cero, pero para ello vas a tener que saber como escribir en un lenguaje de programación, como HTML. Esta opción, aunque parece muy complicada, no lo es tanto. HTML no es tan difícil como aparenta, y aunque no es necesario aprender HTML, siempre viene bien saber lo básico. En la próxima lección veremos como construir una página básica en HTML.

2- Utilizando un editor de HTML. Este es un programa que permite escribir la página como si se estuviese utilizando un simple procesador de textos, mientras que va generando el código fuente en HTML. Es decir, estos editores de texto con formato permiten escribir una página web viendo directamente el resultado final, como saldría en el ordenador. Esta función del editor de HTML se llama WYSIWYG (What You See Is What You Get = Lo que ves es lo que obtienes).

Hay multitud de editores WYSISWYG en el mercado, como por ejemplo, Dreamweaver, Amaya, Fontpage, Microsoft Word. Si no quieres gastar dinero en comprar un editor, hay uno gratis muy conocido que lo puedes bajar desde la página www.NVU.com, o en español te puedes descargar WebFácil.

3- Utilizando una plantilla o un constructor de sitios web. Una plantilla es básicamente un atajo, se trata de una página web que ya ha sido diseñada, y lo único que tienes que hacer es rellenarla con tu información. La ventaja de utilizar una plantilla, es que tu página web parecerá profesional y te ahorrará mucho tiempo.

Un constructor de páginas web es un programa de software o una aplicación que te bajas del internet. Se parece a un editor de HTML pero más sencillo en su utilización pues se basa mayormente en apuntar y hacer clic. Los constructores de páginas web utilizan plantillas. Hay muchos constructores de sitios web en el internet, para encontrarlos, haz una búsqueda en google. Yo suelo utilizar el que ofrece, gratis, mi servicio de hosting.

4- Utilizando un script (archivo de órdenes) o CMS (sistema de gestión de contenidos). El script es un programa usualmente simple, a veces un script se especializa en un tipo de sitio web en particular. Por ejemplo Butterfly Marketing. Este es un script para vender productos digitales, que hace a los clientes miembros y afiliados al mismo tiempo. Hay muchos scripts diferentes que se especializan en usos diferentes.

El CMS, es un programa que te permite crear y administrar el contenido de tu página web. El que a mi más me gusta es WordPress. Si tu hosting utiliza el c-panel (herramienta de administración de fácil uso) para su panel de control, podrás bajarte WordPress en un par de clics. Si quieres un hosting que te ofrece un panel de control c-panel, visita Hostgator.

WordPress es la forma más fácil y sencilla de hacer un sitio web, ¡y además es gratis! Este blog esta construido con WordPress. Lo mejor de WordPress es que te estructura y organiza tu sitio web, tiene sinfinidad de diferentes plantillas (themes), y gran cantidad de plugins (aplicación o complemento que aporta una función nueva). WordPress es conocido en todo el mundo por su facilidad de uso, hasta para principiantes. ¡Y ahora WordPress se puede bajar en español! Este es el enlace: http://es.wordpress.org En una próxima lección nos meteremos más de lleno en como construir un sitio web utilizando WordPress.

5- Y si no quieres utilizar ninguno de los métodos aquí descritos, siempre puedes contratar los servicios de una compañía de diseño de sitios web profesional.

Así que no esperes más, ¡estudia estos diferentes métodos y escoje el que mejor te vaya para empezar a construir tu sitio web!

El servidor de nombre de dominios es de gran importancai. Cada vez que buscas un dominio en el internet, el servidor de nombre de dominios (DNS) traducirá el dominio a la dirección IP y te mostrará la página web correspondiente. Por ejemplo el dominio www.porejemplo.com puede tener un IP:165.978.654.2 que gracias al DNS podrás abrir a través de un sitio web.

Los nombres de dominio son indispensables para reconocer y recordar. Imagínate si sólo tuviesemos la dirección IP para describir los dominios en el internet, sería muy dificil, sino imposible, buscar, reconocer y recordar sitos web.

El proceso funciona de la siguiente manera:

1- Escribimos el dominio que queremos encontrar en la barra del explorador.

2- El servidor DNS le comunica al explorador la IP del servidor web del dominio en cuestión.

3- El explorador pide la página web a ese servidor web indicandole el nombre del dominio que busca.

4- El servidor web da la página al explorador y éste la muestra.

Es importante entender lo que es el DNS porque una vez que hayas comprado tu dominio, el siguiente paso es hacer que el dominio apunte a tu alojamiento web. Si compras tu dominio en el mismo sitio donde vas a alojar tu sitio web, esto no es un problema pues se hace automaticamente.

Ahora, si compras tu dominio en un sitio, y lo quieres alojar en otro, tendrás que cambiar la configuración del DNS. Yo suelo recomendar comprar el dominio en una compañía y alojarlo en otra, asi no habrá posibilidad de problemas si algún día decides cambiar de alojamiento. Y así tendrás más control sobre tus dominios.

Para cambiar la configuración del DNS sólo hace falta encontrar el area de configuración del DNS en el sitio donde compraste el dominio, y cambiar el DNS por el que te den en la compañía de alojamiento cuando te registras con ellos. Estos se suelen recibir en el mail de bienvenida después de registrar tu alojamiento. Cada compañía tiene sus propios DNS pero un ejemplo de DNS es así: ns123.hostgator.com.

Una vez que hayas apuntado el DNS a tu alojamiento, estás listo para empezar a construir tu primera página web. ¡Lo cual explicaremos en las clases siguientes!