Lo Básico de Hacer una Página Web

• – Cómo crear páginas HTML usando un editor de texto
• – La raíz de la estructura de páginas en HTML
• – Cómo salvar páginas
• – Cómo vincular páginas juntas
• – Cómo subir sus páginas a un servidor web en vivo

Las páginas están hechas de HTML

Las páginas web son descritas con un lenguaje llamado HTML. El mismo proporciona el contenido y la estructura de las páginas. Indica también donde van las imágenes y otros materiales.

La buena noticia es que el HTML es fácil de aprender. He aquí mi introducción al HTML y las etiquetas básicas >>

Usted comienza un sitio web en su computadora local creando una o más páginas HTML, y vinculándolas juntas.

¿Qué software necesita para hacer páginas HTML?

Para tener pleno control sobre sus páginas web (y ser capaz de crear interactividad usando lenguajes de scripting) es mejor codificar manualmente.

Puede hacer esto con cualquier editor (como el Bloc de Notas), pero hay algunos editores de texto gratuitos mucho mejores (como TextPad).

No necesita incluso saber HTML para hacer una página web. Hay muchos editores visuales (a veces llamados editores WYSIWYG). NVu es un editor WYSIWYG gratuito que es adecuado para los principiantes.

Su primera página web

Las páginas HTML deben incluir siempre lo siguiente. Puede querer copiar & pegar esto en un nuevo archivo de texto…

index.html v1

Su contenido visible va aquí…

Note que todo es contenido entre etiquetas y .
Este es un ejemplo de un par de etiquetas, que necesitan una etiqueta inicial y una final (indicada por la barra). Los pares de etiquetas describen el contenido entre ellas. En el caso de la etiqueta , le está diciendo al web browser que todo lo que va entre las 2 etiquetas es HTML.

Dentro del HTML, hay 2 puntos principales que son parte de toda página HTML: el encabezado y el cuerpo, marcados con los pares de etiquetas y .

La sección de encabezado

La sección de encabezado de una página HTML contiene información sobre la página, como cual es su título, si usa hojas de estilo, etc. Sus contenidos no son vistos en la ventana del browser (el título aparece en la barra de título..).

La sección del cuerpo

El cuerpo es donde va el contenido visible. Cualquier cosa que ponga en el cuerpo de su HTML será desplegado en el browser (a menos que esté oculto).

Puede querer chequear las etiquetas HTML básicas, y jugar a poner algunas de ellas dentro de su HTML.

Guardando sus páginas HTML

Para hacer una página HTML, nada más guarde su archivo de texto con la extensión .html. Así, un web browser sabrá exactamente que hacer con él.

Nombrando sus archivos HTML

Recomiendo guardar todos los archivos con nombres en minúscula.

Si está desarrollando en una máquina con Windows, no es estricto que los nombres de archivos deban estar en el tamaño correcto (AboutUs.html es tratado igual que aboutus.html).

Pero si sube su sitio a un servidor web Linux (que son la mayoría), importará. Si pregunta por Blah.html, y el archivo se llama blah.html, recibirá un error "page not found".

Además, recomiendo no dejar espacios en blanco en los nombres de archivos. Yo generalmente uso guiones (-) en lugar de espacios.

Páginas Índice

Siempre que abra un sitio web, o un directorio particular en un sitio web, sin preguntar por una página particular, el servidor web le pondrá la página por defecto o índice.

Todo lo que necesita saber por ahora es que todo directorio en su sitio debe tener un archivo llamado algo así como index.html. De otro modo, si alguien entra a su sitio/directorio, se les presentará una lista de páginas web para elegir (lo que no se ve muy profesional), o que posiblemente les den un mensaje de error.

Viendo su página

Digamos que ha salvado su archivo en C:websitesfirstindex.html

Todo lo que necesita es tipear eso en el campo de direcciones de su web browser, o usar Archivo > Abrir y buscar el archivo.

Debe ver algo como ésto…

Note como en la barra de título del browser se lee: "Page title" – las palabras que ponemos entre las etiquetas .

Y las palabras que ponemos dentro de las etiquetas son visibles en la página.

Vinculando páginas juntas

Digamos que hemos creado otra página, para "Detalles de contacto".

Aquí está el HTML simple…

contact-us.html

Puede contactar a Scratchmedia abriendo la ventana y gritando fuerte.

Para vincular a esta página, necesitamos primero que algo actúe como el "ancla" cliqueable, así que cambiaremos nuestra página original a

index.html v2

Lo que cambié

Le dí al título algo más de significado ("Página inicial de Scratchmedia")
Cambié el texto, y lo puse en 2 párrafos separados, usando las etiquetas

Agregando el link

Todo lo que necesito hacer ahora es hacer al texto "contacta" un hipervínculo a la página Contact Us.

En HTML, lo hago con una etiqueta ancla ().

La etiqueta ancla tiene un par de usos, pero el principal es crear hipervínculos a otros lugares. Para hacerlo, necesitamos poner algo entre la etiqueta inicial y la etiqueta final. Esto se convertirá en el objetivo cliqueable.

Lo otro que necesito decirle al ancla es a dónde vincular. Ésto lo hago agregando el atributo href a la etiqueta inicial (href significa "hypertext reference").

Mi primer párrafo, describiendo lo que hacemos.

¿Porqué no nos contacta?

Si actualiza la página en su web browser luego de hacer esos cambios, se verá más como esto…

Agregar las etiquetas de párrafo ha espaciado el texto, asegurando que sea fácil de leer.

El texto dentro de las etiquetas ancla es ahora un link activo, que puede ver por la fuente azul subrayada.

Y si hace click en "contacta", se vinculará a la página de contacto (asumiendo que ha creado una).

Si puede ver esto, es que ha creado su primer sitio web. ¡Felicitaciones!

Subiendo sus páginas a la web

Esto es grandioso, tenemos dos páginas web funcionando, vinculadas entre sí, que forman las bases de un sitio web.

Pero, para otra gente que ve nuestro sitio, necesita ser huesped de un servidor que esté conectado a la World Wide Web. Si no tiene un proveedor de OK hosting, el `proveedor mexicano de servicios de hosting y venta de dominios .com y .mx mas confiable y economico,

La manera más común de subir páginas web a un servidor web, es usando software FTP.

Puede obtener el software FTP también gratis. Si usa Mozilla Firefox, recomiendo Fire FTP, que es una extensión de Firefox

Pantalla de muestra de Fire FTP (Escala del 50%. Haga click en la imagen para agrandar.)

La mayoría de los software FTP trabajan de manera similar.

Primero, tiene que ingresar usando detalles proporcionados por su web host:

Ubicación FTP (p.ej. "ftp.yoursite.com")
Un nombre de usuario
Y una contraseña

En el lado de la izquierda de la pantalla, puede revisar su computadora local.

En el lado de la derecha, revisa el servidor web remoto.

Puede comparar los archivos locales con los archivos en el servidor, y subir o bajar.

El software usualmente manejará todos los temas necesarios como ingresar y salir, manejar las conexiones, e intentar de nuevo cuando falla al transferir archivos. En el ejemplo de arriba, le está diciendo qué está ocurriendo en la ventana inferior.

Algunos ofrecen servicios de ayuda como comparar las ubicaciones para ver qué archivos son diferentes.

Así, si su espacio web es http://www.yourspace.com/yourusername/ y sube los archivos que ha creado, debe ser capaz de ingresar la dirección web y ver la página índice y hacer click hacia la página de contacto. ¡Y eso significa que todos los demás también podrán!

fuente:
webdesignfromscratch.com 
 
traduccion profesional :
Ismael Rodríguez
okhosting / Translation Team