"Crea Tu Pagina Web con HTML"

1. Crear un documento de texto
2. Aprender las etiquetas básicas de HTML
3. Ver un ejemplo de pagina web
4. Obtener algunas imágenes
5. Insertar las etiquetas HTML
6. Ver y editar tu pagina
7. Publicar la pagina
8. Alojamiento para tus paginas
9. Una Opción de Web Host

En primer lugar crea tu pagina web con un texto que contenga las palabras que deseas publicar en tu pagina. Para esto te recomendamos un editor de texto sencillo, tal como el "bloc de notas" normal. Si deseas un editor de texto más avanzado, puedes considerar el editor NoteTab Light para Windows. Es gratuito e incluye entre otras cosas la capacidad de insertar las etiquetas HTML en tu texto con un doble clic.

Con cualquier editor, al nombrar tu documento deberás utilizar la terminación .html o .htm y grabarlo como "solo texto". Teclea tu historia...

A continuación te damos algunos consejos para organizar tu texto:

• Comienza con un título y un saludo o introducción que llame la atención, para que la gente se de cuenta inmediatamente de que trata tu pagina y la motive a leer el contenido.
• Planea la inserción lógica de separadores de párrafo en el texto. A nadie le gusta leer un bloque largo de texto continuo. Tu pagina será mucho mas legible si utilizas separadores de párrafo frecuentes y lineas horizontales (Luego abundaremos acerca de estas).
• Planea los lugares donde vas a insertar las imágenes o fotografías, las cuales deberán tener el formato correcto. Muchas paginas comienzan con una imagen atractiva a la vista en la parte superior, junto al título.

Regresar a la parte superior

Ahora necesitas insertar algunas etiquetas HTML para formatear tu documento, las cuales le indicarán al navegador de internet (Firefox, Internet Explorer, etc.) como distribuir y representar tus palabras e imágenes en la pantalla. Estas etiquetas son parte de un lenguaje conocido como "Hyper Text Markup Language" o HTML.

La estructura básica de un documento HTML es como sigue:

< html >
< head >
< title >Título de la Pagina< /title >
< /head >
< body >
Texto de la Pagina...
< /body >
< /html >

Nota: Por razones técnicas, intencionalmente hemos dejado un espacio al principio y al final de las etiquetas dentro de los corchetes <>. Por favor elimina dichos espacios al momento de estar programando HTML. La razón técnica es que si no introdujeramos estos espacios, tu navegador interpretaría la función de la etiqueta y no te dejaría ver la etiqueta en si...

Por otro lado, es interesante Observar que algunas etiquetas de formateo aparecerán en pares, con la segunda etiqueta precedida por la diagonal (/). Esto se interpreta como abrir la etiqueta y cerrar la etiqueta.

A continuación tenemos algunas de las etiquetas básicas utilizadas en HTML:

< h1 >...< /h1 >
Encabezado nivel 1. Es el tamaño mayor de encabezado, utilizado por lo general al principio de una pagina o de una nueva sección. El texto se introduce en vez de los ...

Los encabezados de menor tamaño tienen las etiquetas siguientes: < h2 >...< /h2 >, < h3 >...< /h3 >, etc.

< b >...< /b >
Texto en negritas

< i >...< /i >
Texto en itálicas

< center >...< /center >

< p >...< /p >
Marcador de párrafo

(Inserta un renglón vacío entre párrafos)

< br >
Separador de renglón
(Sin renglón vacío extra)

< blockquote >...< /blockquote >
Para hacer una cita o referencia larga, se introduce el contenido de la cita entre estas dos etiquetas. Blockquote inserta espacio a la izquierda y a la derecha de la cita.

< hr >
Linea horizontal. La linea corre de izquierda a derecha en la página y se puede usar para separar una sección de otra.

< ol >...< /ol >
Lista ordenada o numerada. Cada elemento de la lista comienza con la etiqueta < li > y termina con < /li > y se encuentra entre las etiquetas < ol > y < /ol >.

< ul >...< /ul >
Lista no ordenada o con bullets. Cada elemento de la lista comienza con la etiqueta < li > y termina con < /li >.

< a href="nombre-de-archivo.html" >...< /a >
Liga o enlace a otro archivo en la misma carpeta.

< a href="http://URL" >...< /a >
Liga o enlace a otro sitio web. Deberás conocer la URL (Uniform Resource Locator) o domicilio web de cualquier sitio al cual quieres enlazar tu pagina.

< img src="imagen.gif" >
Esta etiqueta inserta una imagen con el nombre "imagen.gif" a la izquierda de tu pagina.

Regresar a la parte superior

Es muy útil analizar un documento HTML real y ver como se traduce en una pagina web.

Hemos creado un Ejemplo de Pagina Web para que lo analices y lo estudies. Haz clic en el enlace al final de este párrafo para "visitar" la pagina de ejemplo y observar como aparecen el texto y la imagen en tu pantalla. Luego dirígete al menu Ver-->Codigo Fuente para revisar el documento que utilizamos para crear la pagina ejemplo.

Ejemplo de Pagina Web

Puedes imprimir este documento, identificar las etiquetas HTML que aprendiste y el texto que ves en pantalla. Ignora algunas de las etiquetas que aparecen al principio del documento; son las que formatean el encabezado y la barra lateral. Luego compáralo con la pagina de tu navegador.

¿Entiendes como funcionan las etiquetas básicas de HTML utilizadas en el ejemplo?

¡Felicidades! y practica mucho...

Regresar a la parte superior

Suponemos que ya tienes las imágenes y fotografías que vas a utilizar en tu pagina web. Estas deben estar en formato .gif o .jpg que son los más comunes. Las imágenes deben ser previamente almacenadas en tu disco duro para pruebas locales o en el subdirectorio "/images/" del sitio web en el servidor.

Regresar a la parte superior

Ahora ya estás listo para insertar las etiquetas de formateo HTML en tu propio documento. No se te olvide comenzar tu documento con < html > y terminarlo con < /html >. El título que pongas entre las etiquetas < title >...< /title > aparecerá en la parte superior de la ventana del navegador cuando se vea la página. Este título puede ser (No tiene que serlo) el mismo que el encabezado de tu página

Regresar a la parte superior

Es tiempo de ver que tal funcionó tu formateo. Graba tu documento de texto como "solo texto" y con un nombre que termine en .html o htm. Regresa al navegador y bajo el menú Archivo selecciona "Abrir Archivo". Desde allí podrás encontrar el nombre de tu documento y hacer clic en "abrir". El documento aparecerá en una ventana y se verá como una pagina web real en vivo.

No te desanimes si tienes algunos problemas al principio. El lenguaje HTML requiere mucha atención a los detalles. Si algo no se ve como esperabas, toma nota y regresa a tu documento de texto para hacer los ajustes necesarios. Después graba el documento con los cambios, regresa al navegador y haz clic en"recargar la pagina actual" de la barra de menús. Probablemente tendrás que ir hacia atrás y hacia adelante muchas veces antes de que tu pagina web te parezca perfecta.

Por otro lado, si deseas producir paginas web de manera rápida y sin conocer los detalles de HTML, te recomendamos adquirir el mejor software para la creacion de sitios web que incluye además las herramientas de optimizacion para los motores de busqueda.

Regresar a la parte superior

El siguiente paso es colocar tu pagina en un servidor web para que otras personas puedan leerla. Si no tienes acceso a un servidor, puedes continuar practicando con documentos en el disco duro y verlos localmente con tu navegador de Internet.

Existen algunos sitios que proporcionan Web Hosting o Alojamiento Web gratis o barato para tus paginas, por ejemplo:

• GeoCities
• Yahoo!.
• Etc.

En esta categoría y si cuentas con productos para vender, una buena opción para mojarte los pies en el campo del comercio electrónico, la encontrarás en nuestra pagina de Tiendas Online Gratis. No es necesario saber HTML, pero si lo conoces, podrás utilizarlo para mejorar el aspecto de tu tienda.

Los proveedores de hospedaje gratuito satisfacen la necesidad básica de colocar tus paginas en internet, pero tendrás poco trafico de visitantes, ya que tu nombre de dominio estará escondido detrás del nombre de tu proveedor.

Las opciones de hospedaje web con costo son muchas, pero debes tener cuidado en su elección ya que te puedes perder entre tanta diversidad de precios y características. Aquí puedes consultar nuestros tips para encontrar el mejor alojamiento web.

Afortunadamente existen en el mercado soluciones económicas y efectivas, como verás más adelante.

Al contratar un web host pagado, tendrás tu propio nombre de dominio. Este hecho, junto con la producción de buenos contenidos web mejorará tus probabilidades de ser listado por los buscadores.

Regresar a la parte superior

Aquí tienes a un proveedor de web hosting confiable para tu sitio web o para tu estación de radio Audio Streaming ShoutCast. Esta opción es ideal para sitios web pequeños o con poco tráfico.
Además del servicio de web hosting, contarás con acceso a un constructor de sitios web que no requiere conocimientos de HTML para crear un sitio web funcional. Si no deseas involucrarte en los detalles de la creación de sitios web, allí mismo te pueden cotizar el diseño de tu sitio sobre medida.

Por supuesto que no estás obligado contratar estos servicios. De cualquier forma, lo que aprendiste aquí te servirá en cualquier entorno donde decidas ubicar tus paginas web...

Regresar a la parte superior de Crea tu Pagina Web

Ejemplo de Crea tu Pagina Web con HTML

Razones para Crear una Pagina Web

Crear Pagina

Diseno Pagina Web

Reflexiones importantes antes de la Creacion de tu Pagina Web

Creacion Paginas Web

Errores comunes al Crear Paginas Web

Como Hacer Paginas Web productoras de dinero

¿Quién Puede hacer Paginas Web Profesionales?

Diferentes Formas de Promover tus Paginas Web

Desarrollo Paginas Web

Diseno Paginas Web

Traduccion de Paginas Web

Regresar a Home Crear Negocios En Linea

Ideas De Negocio | Site Build It! | Tu Tienda Online | Libreria Digital | Hospedaje Web | XSitePro | Contacto | Foro |