Crear paginas web

INDUCCIÓN A LA WEB Y HERRAMIENTAS DE
DESARROLLO
Una página web es el nombre de un documento o información electrónica
adaptada para la World Wide Web y que puede ser accedida mediante
un navegador para mostrarse en un monitor de
computadora o dispositivo móvil. Esta información se encuentra
generalmente en formato HTML o XHTML, y puede proporcionar
navegación a otras páginas web mediante enlaces de hipertexto.

Las páginas web pueden estar almacenadas en un equipo local o
un servidor web remoto. El servidor web puede restringir el acceso
únicamente para redes privadas, p. ej., en una intranet corporativa, o
puede publicar las páginas en la World Wide Web. El acceso a las
páginas web es realizado mediante su transferencia
desde servidores utilizando el protocolo de transferencia de
hipertexto (HTTP).

Servidores y direcciones URL
Cuando visitamos páginas web en realidad estamos accediendo a archivos en un
servidor web. La dirección o URL tiene este formato:
http://www.nombredominio.com/directorio/paginaweb.htmDonde http:// es el
protocolo y www. indica el sistema de páginas web. Habrás observado que no
hace falta escribir esto en el navegador. Pero es porque el navegador se encarga
de añadirlo, no porque no sea necesario. nombredominio.com es el nombre del
sitio. Al ir directamente ahí, vamos a su página de inicio. La última parte indica el
archivo del sitio que estamos viendo. En este caso, una página
llamada paginaweb.htm que está en una carpeta llamada directorio.
Podemos visitar una dirección desde un buscador o desde un enlace en otra página.
Podemos teclear la dirección en la barra de direcciones del navegador o acceder
desde nuestros favoritos.
Internet esta formada por un conjunto de servidores conectados. Un servidor es un
ordenador conectado a la red de acceso a Internet que dispone de un programa
que es capaz de recibir una URL y devolver una página web al que hizo la
petición.
Podríamos decir que Internet está formado por una gran cantidad de ordenadores
que pueden intercambiar información entre ellos. Es una gran red mundial de
ordenadores.
Los ordenadores se pueden comunicar porque están unidos a través de
conexiones y gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

PRIMERA PRACTICA Y PRIMEROS PASOS A LA
CREACIÓN DE UN PAGINA WEB.
Una página web es un documento de texto con marcas, llamadas etiquetas
(tags en inglés). Cuando este documento se ve a través de un navegador
web, las etiquetas se interpretan y se visualiza el documento como una
página web. Las etiquetas no se muestran pero determinan el aspecto de la
página, y otras características, por ejemplo, si el texto es un enlace, en la
etiqueta se indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos
capaces de escribir una página web. Sólo necesitamos conocer el lenguaje
de las etiquetas o HTML.

Vamos a comenzar por escribir una página web muy sencilla. Para ello
utilizaremos un editor de texto sin formato, como puede ser el Bloc de
notas (Notepad) incluído en Windows. Puedes encontrarlo en Todos los
programas → Accesorios. El aspecto del Bloc de notas es muy simple, una
hoja en blanco con una barra de menús.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:
<html>
<head> <title>Mi primera página</title> </head>
<body>
<p>Hola mundo</p>
</body>
</html>

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar
que lo es la extensión de un archivo. La extensión indica de qué tipo es un
archivo. La extensión son las tres letras que van después del punto al final del
nombre de un archivo (por ejemplo, imagen.gif o documento.doc).

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y
elegimos Guardar. Introducimos el nombre, por ejemplo Primera. Si ahora
pulsásemos Guardar, se guardaría con la extensión txt, que indica que es un
documento de texto sin formato. Para guardarlo como una página web, debemos
de emplear la extensión .htm (o .html). Por lo que completamos el nombre para
que quede Primera.htm y pulsamos Guardar.

Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos
guardado el archivo y hacemos doble clic sobre el. Como el archivo tiene
extensión .htm, se abrirá la página con el navegador que tengamos como
predeterminado. Por ejemplo, en Internet Explorer 7, el resultado se ve así:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del
Bloc de notas, verás que todo lo que aparece entre los signos < y > no se
muestra. Esos signos delimitan una etiqueta de HTML, y todas las que hemos
utilizado siguen el formato <etiqueta>contenido</etiqueta>. Por ejemplo, la
etiqueta <title> contiene el texto que se mostrará como título de la página, y la
etiqueta <p> indica un párrafo con texto normal.

ACTIVIDAD # 1

1. Investiga Cual es la estructura básica de toda pagina web en html.

2. Desarrolla un ejemplo con un pequeño enunciado.

3. Consulta, cuales son las etiquetas utilizadas para darle color a los textos y a

los fondos de cada pagina.

4. Averigua que otras herramientas puedes utilizar para darle mejor estilo a la

pagina web

IMÁGENES
Uno de los elementos más utilizados en una página web son las imágenes,
tanto para mostrar información como parte del propio diseño de la
página. Pueden ser fotografías o gráficos creados por programas como
Photoshop, Illustrator. etc.
Básicamente, en páginas web nos encontramos tres tipos de imágenes:
GIF, PNG y JPG. Puedes ver con más detalle cada formato en este
básico .
Cuando queremos introducir una imagen, lo hacemos con la
etiqueta <img />. Los atributos que como mínimo ha de tener esta
etiqueta son los siguientes:
<img src="ubicacion/imagen.gif" alt="texto alternativo" />
Lo primero que debemos de saber es dónde está la imagen, su ubicación,
que es lo que debe contener el atributo src:
Si la imagen está en una página Web, basta con saber su ruta, por
ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama
una dirección absoluta.

Si la imagen está en el mismo sito que la página web, podemos utilizar una
dirección relativa, como imagen.gif o imagenes/imagen.gif.

ENLACES
Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra
página del mismo sitio, o a una página de un sitio distinto. Esto es un enlace
o hiperenlace (en inglés link ohyperlink) también llamado hipertexto o
hipervínculo.

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este
cambia de forma y pasa de una flecha a una mano. También es muy
frecuente que los enlaces aparezcan subrayados, ya que es la opción por
defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica
de un enlace es la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es
un archivo html, por ejemplo http://www.aulaclic.es/index.html . El
contenido del enlace es lo que el usuario ve en la página y que al pulsar
sobre él nos lleva al enlace. Normalmente es texto o una imagen

DISEÑO, CONTENIDO Y FUNCIONALIDAD
La forma en que se ven todos los elementos de nuestra página web
depende del estilo.
El estilo se compone de distintas propiedades y sus valores
correspondientes. Las propiedades pueden ser el color de la
fuente, el tamaño, la alineación, los márgenes, etc... Los valores
dependen de cada propiedad, por ejemplo, a la
propiedad color le podemos asignar valores
como red (rojo), blue (azul), ... y a la propiedad tamaño
fuente le podemos asignar un valor en porcentaje 100%, 120%,
... o en pixels 12px, 15px, ....
El formato a seguir para definir una propiedad
es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede
tener varios valores.
Por ejemplo, si queremos que el texto sea de color rojo y un tamaño
de fuente de 120%, escribiriamos el siguiente estilo:
color:red; font-size:120%
y obtendríamos el siguiente resultado:
Texto rojo a 120%

¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a
lo largo del curso, pero lo más recomendable es agrupar todas las declaraciones
de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que
contega la definición de estilos. Para ello, tenemos que incluir en la
etiqueta <style type="text/css"> ... </style> y definir dentro los estilos
correspondientes a cada elemento de nuestra página, como puedes ver al
principio de esta página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir
un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo
y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo
hemos definido el estilo del body así:

body {font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a;}

EDITOR WEB (I)

Quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema
vamos a explicar cómo ahorrarte ese trabajo. Un editor web también ayuda
en otros muchos aspectos de la creación de páginas web.

4.1. ¿Qué es un editor Web?

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar
una página Web. Como ya hemos visto, una página no es más que un
archivo de texto, por lo que cualquier programa que nos permita editar texto,
puede funcionar como un editor Web.

Podemos considerar tres categorías de editores Web:

Editores de texto.Nos permiten editar el código fuente puro y duro, como puede
ser el bloc de notas.Editores de HTML.Funcionan como los editores de texto,
pero pueden tener algunas opciones más avanzadas. Como mostrar las
etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG.Por un lado, nos permiten editar el código fuente como los
editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es
decir, ver la página como se vería en un navegador mientras la editamos. La
mayoría de estos editores suelen tener opciones para realizar tareas
adicionales de forma más fácil, como por ejemplo, crear elementos de un
formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más
adelante veremos de qué se trata). Editores de este tipo pueden ser Amaya o
Dreamweaver.Escribir directamente el código fuente nos da un mayor control
sobre la página, obteniendo un código más preciso y sin etiquetas
innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho
más lento y que debamos conocer mejor el HTML.

Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de
preocuparnos por la mayoría de las etiquetas, y escribimos el texto como lo
haríamos en un procesador de texto.

Crear paginas web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (13)

Similar a Crear paginas web

Similar a Crear paginas web (20)

Último

Último (20)

Crear paginas web