Tutorial HTML para Aprender a Hacer Páginas Web

Tutorial HTML. Con esta introduccion al HTML aprenderas las bases del lenguaje. Crear paginas web en HTML es laborioso, pero es muy gratificante cuando las ves publicadas.

1. Creár 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 página
7. Publicar la página
8. Alojamiento para tus páginas
9. Una Opción de Web Host

En primer lugar crea tu página web con un texto que contenga las palabras que deseas publicar en tu página. Para esto te recomendamos un editor de texto sencillo, tal como el "bloc de notas" de Windows. Si deséas un editor de texto más avanzado, puedes considerar el editor NoteTab Light. 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 .Tecléa 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 página y la motive a leér 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 página será mucho mas legible si utilizas separadores de párrafo frecuentes y lineas horizontales (Luego abundaremos acerca de estas).
• Planéa los lugares donde vas a insertar las imágenes o fotografías, las cuales deberán tener el formato correcto (Principalmente .gif y .jpeg). Muchas páginas comienzan con una imagen atractiva a la vista en la parte superior, junto al título.

Regresar al índice

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 Página< /title >
< /head >
< body >
Texto de la Página...
< /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 formatéo 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 página o de una nueva sección. El texto se introduce en vez de los puntos ...

Ejemplo h1

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

Ejemplo h2

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

< i >...< /i >

Ejemplo Texto en itálicas

< center >...< /center >

< p >...< /p >
Inicio y fin de párrafo. El marcador de párrafo

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

Ejemplo de lista ordenada

1. Inciso uno
2. Inciso dos
3. Inciso trés

< ul >...< /ul >
Lista no ordenada o con viñetas. Cada elemento de la lista comienza con la etiqueta < li > y termina con < /li > y se encuentra entre las etiquetas < ul > y < /ul >.

Ejemplo de lista NO ordenada o NO numerada

• Inciso uno
• Inciso dos
• Inciso trés

< 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 página.

Regresar al índice

Es muy útil analizar un documento HTML reál y ver como se transforma en una página web.

Puedes consultar el código HTML de cualquier página en el menú Ver-->Codigo Fuente de esta Página en tu navegador. Cuando haces esto, verás el documento con etiquetas HTML que créan la página en la ventana de tu navegador.

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

Ejemplo de Página 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 al índice

Suponemos que ya tienes las imágenes y fotografías que vas a utilizar en tu página web. Estas deben estar en formato .gif o .jpeg 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 web.

Regresar al índice

Ahora ya estás listo para insertar las etiquetas de formatéo 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 véa la página. Este título puede ser (No necesariamente) el mismo que el encabezado que usarás para tu página

Regresar al índice

Es tiempo de ver que tal funcionó tu formatéo. Graba tu documento de texto 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 reál 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 html para hacer los ajustes necesarios. Después graba el documento con los cambios, regresa al navegador y haz clic en la flecha circular ("recargar esta página") a la derecha de la URL o direcció web.. Probablemente tendrás que ir hacia atrás y hacia adelante muchas veces antes de que tu página web te parezca perfecta.

Por otro lado, si deseas producir un sitio web de manera rápida y sin conocer los detalles de HTML, te recomendamos evaluár el mejor Editor Web en español para esta taréa. Incluye además el nombre de dominio y el hospedaje web.

Ahora bien, si no dispones de tiempo o no te quieres involucrar con el lenguaje HTML o programas de diseño, puedes contratar alguno de nuestros Paquetes Web que incluyen tu página web con Tienda en Linea.

Regresar al índice

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

Existen algunos proveedores que proporcionan Web Hosting o Alojamiento Web gratis o económico para tus páginas, por ejemplo...

• Jimdo
• Yahoo!.
• Etc.

En esta categoría y si cuentas con productos para vender, en nuestra página de Tiendas Online encontrarás algunas opciónes gratuítas para mojarte los piés en el campo del comercio electrónico. No es necesario saber HTML, pero si lo conoces, podrás utilizarlo para mejorar el aspecto de tu tienda.

Los sitios web gratis satisfacen la necesidad básica de colocar tus páginas en internet, pero tendrás poco tráfico 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 hospedaje web 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 al índice

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 ideál 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.

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 páginas web...

Regresar al índice del Tutorial HTML

Ejemplo del Tutorial HTML

Como hacer una Página Web o una Tienda Online sin saber HTML

Paquetes Web con Tienda en Linea

Regresar a Home Crear Negocios En Linea

Servicios Web | Foro | Contacto |