Entradas
About Me
COMO CREAR TU PAGINA WEB DE UNA MANERA SENCILLA Y PRACTICA, INCLUYENDO UTILES TRUCOS.
ALGUNAS BASES EN LO QUE CONSISTE UNA PAGINA WEB.
Una página web, también conocida como página de Internet, es un documento adaptado para la Web y que normalmente forma parte de un sitio web. Su principal característica son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
Una página web está compuesta principalmente por información (sólo texto o multimedia) e hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe visualizarse, o aplicaciones embebidas para hacerla interactiva.
Las páginas web son escritas en un lenguaje de marcado que provea la capacidad de insertar hiperenlaces, generalmente HTML.
El contenido de la página puede ser predeterminado ("página web estática") o generado al momento de visualizarla o solicitarla a un servidor web ("página web dinámica"). Las páginas dinámicas que se generan al momento de la visualización se hacen a través de lenguajes interpretados, generalmente JavaScript, y la aplicación encargada de visualizar el contenido es la que debe generarlo. La páginas dinámicas que se generan al ser solicitadas son creadas por una aplicación en el servidor web que alberga las mismas.
Respecto a la estructura de las páginas web algunos organismos, en especial el W3C, suelen establecer directivas con la intención de normalizar el diseño para facilitar y simplificar la visualización e interpretación del contenido.
CREACION DE LA PAGINA WEB EN HTML.
Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje.
A continuación les mostraremos las etiquetas mas comunes que deben aprenderse para hacer una pagina Web.
Estructura de los documentos de HTML
Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta , que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos cabeza y cuerpo.
La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento
Primera pagina
Esta es mi primera pagina, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas interesantes.
Aquí va un segundo párrafo.
Para escribir títulos se usa la etiqueta
Ejemplo:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto
Quedaría mas o menos así:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto
5. Etiquetas de párrafo
Para esto se utiliza la etiqueta
y
. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.Para alinear un párrafo se utiliza el comando y , utilizado dentro de la etiqueta
. Se puede alinear de tres formas diferentes:
Párrafo...
Alinea a la izquierda.Párrafo...
Realiza un centrado.Párrafo...
Alinea a la derecha.Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando
.
Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es
Etiquetas para darle formato al texto:
Para el tamaño y tipo de letra se usa la etiqueta y , que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color
Formato:
y Sirve para colocar un texto en Negrita.
y < /U> Sirve para subrayar un texto
y Cumple la misma función que
y Para colocar un texto en cursiva.
texto con énfasis texto con énfasis
citación citación
definición definición
teclado teclado
ejemplo ejemplo
SIZE: Regula el tamaño de los caracteres.
Ejemplo: texto... .
FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.
Ejemplo:
texto…
Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:
1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
2. Mediante la especificación del nombre del color en ingles
Ejemplos:
Blanco
Blanco
#FFFFFF
Negro
Negro
#000000
Rojo
Rojo
#FF0000
Verde
Verde
#00FF00
Azul
Azul
#0000FF
Amarillo
Amarillo
#FFFF00
Cyan
Cyan
#00FFFF
Magenta
Magenta
#FF00FF
Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web.
Si especificamos el nombre del color, podemos evitar la definición del color en forma hexadecimal que es un poco más difícil. Actualmente están estandarizados tan sólo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web.
Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras para la definición del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 últimas el valor azul.
Las cifras hexadecimales son:
0 (corresponde al decimal 0)
1 (corresponde al decimal 1)
2 (corresponde al decimal 2)
3 (corresponde al decimal 3)
4 (corresponde al decimal 4)
5 (corresponde al decimal 5)
6 (corresponde al decimal 6)
7 (corresponde al decimal 7)
8 (corresponde al decimal 8)
9 (corresponde al decimal 9)
A (corresponde al decimal 10)
B (corresponde al decimal 11)
C (corresponde al decimal 12)
D (corresponde al decimal 13)
E (corresponde al decimal 14)
F (corresponde al decimal 15)
(mirar el cuadro de la página anterior)
Para ponerle color de fondo a la página escribir:
con el cual obtendremos un color de fondo gris oscuro.
Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo.
Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:
text="#número" Para el color del texto.
link="#número" Para el color de los enlaces.
vlink="#número" El color con que aparecerán los enlaces ya visitados.
alink="#número" Color del enlace cuando lo pulsamos.
Por lo tanto la etiqueta puede quedar del siguiente modo:
Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:
background="localización de la imagen" Esta etiqueta va dentro de la etiqueta .
Ejemplo:
Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.
Etiquetas META
Son usadas para poner meta-información del documento. Esta "directiva" indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos.
Ejemplo:
Indica al visor el nombre de la página y sus contenidos principales.
Indica el nombre de la persona que elabora la pagina WEB
Indica al visor las palabras clave para los buscadores de Internet.
Para hacer 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).
Las listas pueden ser: Lista desordenada,
- (Unordered List).
Lista ordenada,
- (Ordered List).
Ejemplos de diferentes tipos de listas:
Lista con números romanos:
Manzana
Zanahoria
Lechuga
Tomate
Lista numerada:
Manzana
Zanahoria
Lechuga
Tomate
Lista con puntos:
Manzana
Zanahoria
Lechuga
Tomate
Lista con círculos:
Manzana
Zanahoria
Lechuga
Tomate
Lista con cuadrados:
Manzana
Zanahoria
Lechuga
Tomate
ahora con estas base en códigos estamos listos para trabajar en nuestra pagina;
estos códigos pueden ser pegados desde otra pagina buscándolos en algún motor
con el nombre de CÓDIGOS EN HTML, los cuales tienen muchas funciones de diferentes tipos que resultan muy atractivos a la hora de insertarlos en nuestra pagina web; estos se pueden trabajar en el blog de notas en el SO windows o en gdit
en la distribución de linux.
OBTENER UN HOSTING PARA SUBRILA A LA WEB MUNDIAL.
solo debemos efectuar la busqueda de un hosting gratis o pagado, como se desee,
luego registranos y obtener los requisitos para continuar con el tercer paso.
UBICARLA MEDIANTE EL HOSTING EN LA WEB.
en este caso utilizaremos el mas reconcido que es filezilla.
a continuacion se presenta la sintesis basica de como hacerlo paso a paso:
Instalación de FileZilla
Una vez descargado el archivo ejecutable, procederemos a su instalación. Seleccione el idioma y pulse OK. Al finalizar la instalación podrá cambiar el idioma a español. Debe aceptar los términos de la GNU General Public License pulsando sobre I Agree. Después seleccione los componentes que desea instalar. La opción Standard es la más aconsejable. Seleccione el directorio de instalación. Seleccione el nombre del menú Inicio. En la siguiente pantalla podrá configurar el modo de seguridad y la localización del registro. Si está instalando Filezilla en un ordenador al que sólo usted tiene acceso puede dejar las opciones que aparecen marcadas por defecto Do not use secure mode. Si ha seguido los pasos correctamente la instalación habrá finalizado. Pulse Close.
Iniciar Filezilla
Haga doble clic sobre el icono FileZilla que aparece en su escritorio. Antes de continuar, cambie el idioma del interfaz al Castellano. En el menú superior seleccione Edit / Settings... para mostrar la ventana Filezilla Options. En el árbol de opciones de configuración situado a la izquierda, seleccione la opción Language del apartado Interface settings y en el cuadro de la derecha elija el idiomaEspañol. Para guardar los cambios pulse Ok. La ventana principal de Filezilla se muestra ahora en el idioma seleccionado.
Configurar la conexión Ftp en el Administrador de Sitios
El siguiente paso es configurar los parámetros de conexión a través del Administrador de Sitios. Para acceder al administrador, seleccione en menú Archivo / Administrador de Sitios o haga clic sobre el icono situado justo en la parte inferior del menú Archivo.
Sobre la nueva ventana que muestra el Administrador de Sitios, haga clic en el botón inferior Nuevo Sitio. Inmediatamente después, nombre esta nueva conexión para identificarla (en la imagen aemilius.net). Ahora, introduzca los datos de su conexión ftp.
Host: ftp.sudominio.com)
Servertype: FTP
Tipo de Logon: Normal
Usuario: usuario
Contraseña: xxxxxxxxxxxx
A continuación vamos a configurar las rutas por defecto de los directorios local y remoto para facilitar la administración de los archivos cada vez que conectemos. Haga clic sobre la opción Avanced... y se mostrará la ventana Avanced Site settings.
En el campo Directorio remoto por defecto introduzca /public_html/ y en el directorio local por defecto haga clic sobre el botón de Examinar y seleccione en el disco local el directorio donde se encuentra ubicado su sitio web. Para guardar los cambios pulse OK.
Conexión SFTP (FTP seguro) a través de SSH2
Si su plan de alojamiento o servidor web le permite utilizar SFTP a través de SSH2 para conectarse a su dominio, seleccione SFTP using SSH2 en lugar de FTP para que toda la información que se transmita (incluyendo las contraseñas) se realice de forma segura y encriptada. Si activa el acceso SFTP con SSH2 deberá cambiar la ruta del Directorio remoto por defecto e indicar el path absoluto hasta el directorio remoto de publicación, por ejemplo /home/usuario/public_html/ donde usuario es el nombre de usuario de su acceso FTP.
Desde el menú principal Edición / Configuración categoría SFTP settings puede configurar como desea que FileZilla conecte al servidor SFTP (compresión y protocolo). Por defecto, Filezilla usa el protocolo SSH2 para conexiones SFTP. Si no es usted cliente de Aemilius.net o su servidor no soporta SSH2, puede intentar utilizar el protocolo SSH1.
Conectar y subir archivos al servidor por FTP / SFTP
Nos encontramos de nuevo en la ventana del Administrador de Sitios y hacemos clic en Conectar. Cuando se ha establecido la conexión entre su PC local y el servidor remoto, la ventana principal de Filezilla muestra los archivos y directorios de su PC en el lado izquierdo (Explorador local de archivos) y los archivos y directorios de su servidor en el lado derecho (Explorador remoto de archivos). Debajo de ambos, se muestra la ventana de Registro de mensajes. Cada acción efectuada con el servidor de Ftp es mostrada aquí, lo que permite realizar un seguimiento de los archivos que han sido programados para subir o bajar (upload/download) y su estado.
Transferir archivos o carpetas al servidor remoto (o descargarlos a su PC local) es una tarea extremadamente sencilla. Para subir sus archivos el servidor, seleccionelos en su Explorador local de archivos y haga clic sobre el botón derecho del ratón. En el menú contextual seleccione Subir (upload) para subirlos inmediatamente o Agregar a la Cola para subirlos después. También puede arrastrar los archivos desde la ventana local hasta la ventana remota mediante el sistema drag and drop, cuando los haya soltado, se iniciará la transferencia de los mismos.
Si desea ejecutar la Cola de proceso programada, seleccione en el menú superior Cola / Procesar Cola y se iniciará la transferencia simultanea de todos ellos.
FINALIZACION DEL PROYECTO.
ahora solo si queremos hacerla exitosa, podriamos empezar por indexarla en algunos buscadores que esten bien posicionados, como lo esta google.
INDEXACION EN GOOGLE.
1. Compruebe que su Site es potencialmente indexable por Google.
Cómo puedo comprobarlo:
Para comprobar si su página puede ser indexada, debe utilizar aplicaciones que visualizan su página tal y como lo haría Google. Una de estas aplicaciones es el navegador textual Lynx, también dispone de una versión on-line. Tenga en cuenta que Google sólo podrá acceder al contenido que Lynx le muestre al analizar su web.
Por qué no podría indexar Google mi página web:
Los principales motivos por los que una página web no puede ser indexada son:
La página está desarrollada exclusivamente en flash: Aunque Google es capaz de leer e indexar páginas flash a partir de la versión 8, lo cierto es que la incapcidad de flash a la hora de jerarquizar y marcar semánticamente el contenido sigue siendo un lastre a la hora de alcanzar un posicionamiento eficiente.
La página contiene frames: Al utilizar frames en el diseño de una web se pierde el concepto de página como unidad de presentación y Google no será capaz de acceder al contenido de nuestra página.
Existen redireccionamientos en javascript: Google sólo recorre los enlaces HTML de una página. Puede verse en la necesidad de hacer una redirección inicial para dirigir al visitante a una u otra página en función de ciertos parámetros como procedencia, idioma,etc. Una simple redirección en javascript en la home puede estar impidiendo a Google acceder. Una solución alternativa válida es realizar la redirección en el servidor.
Utiliza funcionalidades en DHTML: el HTML dinámico (menús desplegables, efectos visuales, etc) no es siempre accesible por los buscadores, por tanto debe asegurarse de que el contenido principal de sus páginas sea siempre accesible.
Trabaja con un gestor de contenido (cms): Si su empresa utiliza un gestor de contenido para gestionar la información de su web, debe asegurarse de que su sistema puede exportar el contenido de manera que los motores de búsqueda puedan indexarlo.
2. Compruebe que Google es capaz de recorrer todas las páginas que conforman el Site.
Cómo puedo comprobarlo:
Podemos recurrir a herramientas especializadas para comprobar la estructura de enlaces de nuestra web. Yo le recomiendo la aplicación gratuita Xenu's Link Sleuth que nos permite realizar un exhaustivo estudio de la estructura interna del Site.
Por qué no podría Google recorrer mi página web:
Cuando Google visita nuestro site, comienza a recorrer todos los enlaces que encuentra, aquellas secciones a las que no pueda acceder no serán indexadas. Existen diversos motivos por los que Google no puede recorrer nuestro Site:
No se puede acceder a todas las secciones desde la home. Tenga en cuenta que la home es el punto de partida hacia el resto de páginas.
Existen links rotos.
Se utiliza javascript para enlazar a alguna sección o página.
Cómo puedo solucionarlo:
Una manera sencilla de asegurarnos de que todas las secciones son accesibles es crear un mapa web. El mapa web de un sitio es una lista jerarquizada de vínculos a todas las páginas del Site.
3. Compruebe que su Site no incumple el código para Webmasters de Google.
Si su Site ha sido desarrollado u optimizado por una empresa SEO debería tener especial atención en comprobar que no han utilizado técnicas de posicionamiento fraudulentas.
Evite los textos y enlaces ocultos.
No cree páginas con contenido irrelevante.
No cree páginas ni subdominios con contenidos duplicados.
No intente hacer cloaking: ofrecer a los buscadores diferente contenido que a sus visitantes con la intención de mejorar su ranking.
Cuide la calidad de sus enlaces, evite aquellos que provengan de webs especializadas en la venta de links y de spamers.
No utilice programas para realizar altas masivas en buscadores.
Evite realizar Sneaky Redirection: conjunto de entre 10 y 20 páginas sin contenido relevante que enlazan entre si. Al acceder a alguna de ellas redirecciona al usuario a otra página distinta.
Evite crear doorways: páginas creadas exclusivamente para los motores de búsqueda
En resumen, evite los trucos mágicos para mejorar el posicionamiento web de su página en Google.
Tenga presente que si nuestra web es penalizada por Google, recuperar la indexación será una tarea muy complicada y en acasiones imposible.
4. Consiga varios enlaces externos de calidad.
Conseguir enlaces de calidad hacia nuestra página web es sin duda la manera más rápida para ser indexados en Google:
Dé de alta su site en los principales directorios:
Algunos directorios permiten el alta manual y gratuita por lo que son un buen lugar donde conseguir un enlace de calidad. Es muy importante que dé de alta su Site en los siguientes directorios:
Open Directory Project (Google directory)
Yahoo!
vlib
Aunque se tiende a pensar lo contrario, los directorios y los buscadores son completamente distintos. Sus enfoques son completamente diferentes ya que registran y presentan la información de forma distinta. Una de las diferencias principales es que los directorios están estructurados temáticamente y requieren que demos de alta nuesta web en la categoría relacionada con nuestros servicios y productos.
Consiga enlaces en sites que ya estén indexados.
Si es el webmaster de una página ya indexada, puede incluir en la home un enlace hacia su nueva web. Hágalo de manera clara, aprovechando la sección de enlaces o incluyendo un banner. Nunca recurra a los pop-ups pues no son accesiblespor Google.
Realice campañas de marketing y PR para informar a todos los Sites que podrían estar interesados en que su página está on-line: centros de prensa, portales especializados, páginas del sector, etc.
Tenga en cuenta que un sólo enlace de calidad puede ser suficiente para conseguir la indexación.
5. Crear y dar de alta un Site Map para Google.
Qué es un Google Site Map:
Es un sistema gratuito que nos ofrece Google para que le indiquemos cuáles son las páginas que conforman mi sitio web. De esta manera nos aseguraremos de que Google puede encontrar todos nuestros contenidos de manera sencilla. Además, también nos proporciona estadísticas y resúmenes de posibles errores de indexación.
Cómo se crea un Google Site Map:
Un Google Site map es un fichero que funciona como índice de todas nuestras páginas. Puede tener diversos formatos pero el más habitual es el basado en el estándar XML. Existen muchas herramientas para generar un site map de manera automática. La aplicación xml sitemaps es un generador online y gratuito para webs con menos de 500 páginas.
El proceso para dar de alta el Site Map es sencillo y dispone de mucha documentación en Internet.
Si ha seguido correctamente estos 5 pasos, ahora sólo le queda esperar a que Google encuentre su web e indexe sus páginas. Tenga en cuenta que Google funciona como una araña (si tiene fobia a estos arácnidos piense en otra cosa) que recorre la inmensa tela de webs que conforman Internet.
El tiempo de indexación depende de muchos factores, pero no debería dilatarse más de 15 días. Usted sabrá que la indexación se ha realizado con éxito si al escribir en el campo de búsqueda de Google: site:www.nombre_su_domino_com, el buscador le devuelve todas las páginas que conforman su site.
Espero que este artículo le haya resultado de interés y a partir de ahora consiga posicionar sus páginas de manera segura y rápida. ¿El siguiente paso?, ahora tal vez le interese posicionar su web para una serie de términos de búsquedaconcretos; en este caso le animo a que siga con nosotros y que profundice en el mundo SEO con el siguiente artículo de posicionamiento web en Google.
Publicado por JUANKMILO en 15:21
Etiquetas: web COMO CREAR TU WEB
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario