Ayuda en la Web

La sencillez de Google Sites nos permite incluir un vídeo de YouTube en nuestra web de una forma muy rápida.

Lo primero será situarnos en la página de Google Sites que vaya a contener el vídeo. Después vamos al menú…

Insertar » Vídeo » YouTube

… el cual nos mostrará la siguiente ventana.

(Pulsa sobre la imagen para verla más grande)

Simplemente tendremos que añadir la URL del vídeo de YouTube que queramos añadir… del estilo…

http://www.youtube.com/watch?v=vsXkn0GW3bM

… ponerle un título y darle a Guardar. Y ya tenemos nuestro vídeo de YouTube en Google Sites.

Google Sites es un producto de Google que nos permite crear páginas web de una forma muy sencilla y sobre todo, de manera visual. Además podremos albergar nuestras páginas web de una forma gratuita. El único requisito para poder utilizar Google Sites es tener una cuenta de Google.

Para empezar a acrear una página en Google Sites, deberemos de ir a http://sites.google.com

Crear una página con Google Sites es muy sencillo, simplemente tenemos que pulsar sobre Create New Site y una guía de paso a paso nos llevará por las diferentes opciones.

Entre las cosas que podemos hacer con Google Sites tenemos:

• Utilización de plantillas web (familiar, tipo wiki, de deportes,…)
• Disponibilidad de más de 50 gamas de colores (lo que serían las hojas de estilo o CSS)
• Edición visual muy rica. Es WYSIWYG.
• Capacidad de editar el código HTML
• Posibilidad de incluir vídeos de YouTube.
• Posibilidad de integrar documentos de Google Docs
• Integración sencilla con Google Maps
• Se puede poner publicidad de Google Adsense
• ….

Puedes ver mi página de Google Sites en http://sites.google.com/site/vcuervo/home. Ya has creado tu página en Google Sites ¿Cuál es?

El código fuente de una página es el código HTML que la conforma y que permite que se vean las imágenes, textos, parrafos, separadores,… Viendo el código fuente de la página podemos descubrir como el diseñador de la misma ha estructurado el contenido.

Para poder ver el código fuente de la página tenemos varias formas. La principal y que ya empieza a estar soportada por algunos navegadores, es poner en la barra de direcciones:

view-source:URL_de_la_pagina

Por ejemplo, si queremos ver el código fuente de Ayuda en la Web, tendríamos que poner lo siguiente

view-source:http://www.ayudaenlaweb.com

Luego, dependiendo del navegado, tenemos diferentes formas de ver el código fuente de una página. Veamoslo por navegador:

Internet Explorer

• Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente”
• Opción 2. En los menús Ver »; Código fuente

Firefox

• Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de la página”
• Opción 2. En los menús Ver » Código fuente de la página
• Opción 3. Pulsar Ctrl+U

Google Chrome

• Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de la página”

Safari

• Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente”
• Opción 2. En los menús Visualización » Ver Código fuente.

Una vez que nos creemos nuestra cuenta en Yahoo! Geocities podremos empezar a crearnos nuestra primera página web.

Lo primero que debemos de hacer es ir a la dirección de Yahoo! Geocities:

http://es.geocities.yahoo.com/

Si no estamos identificados, Yahoo! Geocities nos pedirá que nos identifiquemos con nuestro usuario de Yahoo!. Una vez cargada la página de Yahoo! Geocities nos apareceran dos cosas:

1. La URL de nuestra página web. Asociada a nuestro usuario de Yahoo!. En nuestro caso es http://www.geocities.com/ayudaparatuweb
2. Un enlace que dice “Inciar la creación ahora“. Pinchamos sobre dicho enlace.

Yahoo! Geocities nos solicitará la temática sobre la que versará nuestra web: arte, motor, amigos, tv, deportes,…

(Pulse sobre la imagen para verlo más grande)

Una vez completado este apartado iremos al panel principal.

(Pulse sobre la imagen para verlo más grande)

En este punto tenemos varias alternativas. En nuestro caso vamos a escribir una página en lenguaje HTML. Si bien, podríamos elegir alguna de las plantillas que nos ofrece Yahoo! Geocities para obtener el resultado final. En las plantillas tenemos para fotografías, páginas personales,…

Pinchamos en la opción “Editor HTML Avanzado”. Tendremos quedarle un nombre a la página: index.html (este es casi siempre el nombre de la página principal) y poner el código de nuestra página, tal y como sigue a continuación:

<html>
<head>
<title>Ayuda en la web</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">

<h1>Mi primera página web</h1>

</body>
</html>

Pulsamos sobre “Guardar” y ya tenemos nuestra primera página web en Yahoo! Geocities . Podéis ver la nuestra en:

http://es.geocities.com/ayudaparatuweb/index.html

Has creado ya una, ¿Cuál es tu primera página en Yahoo! Geocities?

Yahoo! Geocities es una web que nos permite alojar nuestras páginas web de una forma muy sencilla y sobre todo, y muy importante, de forma gratuita.

Además nos ofrece un conjunto de herramientas para la edición on-line de nuestras páginas web, lo cual nos permitirá tener nuestra primera página web en cuestión de segundos.

Lo primero que tenemos que hacer para darnos de alta en Yahoo! Geocities es ir a su URL:

http://geocities.yahoo.com/

Para poder tener nuestra página en Yahoo! Geocities tenemos que tener una cuenta en Yahoo!. Ya que la página será una referencia de nuestra cuenta de correo de Yahoo!. Es por ello que para empezar a crear nuestra página deberemos de autentificarnos con nuestra cuenta de Yahoo! o darnos de alta una cuenta nueva en Yahoo!

(Pulsa sobre la imagen para verlo más grande)

El proceso de alta es muy sencillo. Solamente tendrás que proporcionar tu nombre y apellidos, fecha de nacimiento, código postal,…

Una de las cosas que tienes que hacer es escoger el ID que quieres utilizar en Yahoo!. Es muy importante que pongas un ID significativo ya que este será el que se utilice, a futuro, el la URL de tu página

(Pulsa sobre la imagen para verlo más grande)

Al final de la página de alta encontraras un código ofuscado. Este se utiliza para que programas automáticos no creen usuarios de forma descontrolada.

Una vez terminado de rellenar el alta pulsa en siguiente. Te aparecerá una última pantalla de preferencias dónde deberás decir cual es el propósito de tu página: personal, de educación, un negocio,… y cómo has conocido Yahoo! Geocities.

(Pulsa sobre la imagen para verlo más grande)

Este es el último paso. Así tendrás creado el espacio para tu web en Yahoo! Geocities.

(Pulsa sobre la imagen para verlo más grande)

Como podéis ver, la URL dónde hemos creado nuestra página es:

http://www.geocities.com/ayudaparatuweb

Cuando hacemos nuestra página web una de las cosas que podemos hacer es la de cambiar el color de fondo de la página.

Para ello lo que tenemos que hacer es insertar el siguiente código en nuestra página:

<style type=”text/css”>
body{
background:red;
}
</style>

En este caso el color es rojo (red), pero podemos indicar cualquier color: red, black, green, pink, blue,… siempre en inglés.

Lo tenemos que insertar entre las etiquetas <HEAD> y </HEAD>. La página web quedaría de la siguiente forma:

<html>
<head>
<title&gt;Color de Fondo de la página&lt;/title>
<style type=”text/css”>
body{
background:red;
}
</style>
</head>
<body>

<h1>Color de Fondo de la página</h1>
Hemos definido un color rojo al fondo de la página.

</body></html>

Vía: Línea de Código

Normalmente encontraremos algún icono, dentro de las herramientas que utilicemos, para centrar el texto de nuestras páginas web.

Será un icono como este 

Pero si el editor web que estás manejando no te ofrece esta ayuda, puedes utilizar el lenguaje de marcas HTML para hacerlo.

Para ello tienes que buscar el editor HTML de tu herramienta e insertar el siguiente código:

<center>Texto centrado en mi página</center>

Se utiliza la etiqueta <center>.

Si bien, este es un código que se está quedando un poco obsoleto. Ahora la idea es utilizar hojas de estilo (CSS) para poder centrar el texto.

En este caso el código que tenemos que insertar en nuestra herramienta será el siguiente:

<p style=text-align:center;">Texto centrado en mi página</p>

El resultado será el siguiente:

Texto centrado en mi página