Pagina web

CURSO SOBRE COMO CREAR
UNA PAGINA WEB
NOMBRE: ERWIN SANTOS VASQUEZ VEIZAGA
TECNOLOGÍA COMUNICACIONAL
DOCENTE: DAVID ENRIQUE MENDOZA GUTIERREZ
SEDE : SANTA CRUZ -BOLIVIA

Introducción
Ing. David Enrique Mendoza Gutiérrez
Erwin Santos Vasquez Veizaga
El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando herramientas
gratuitas.
Para seguir el curso sólo necesitas un ordenador y ganas de aprender, al final del curso podrás crear
página.
El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage
(Lenguaje de Marcas de Hypertexto) Hay muchos cursos de HTML pero creemos que este es diferente
porque pretende ser un curso integral de creación de páginas web.

Contenidos
Para que sea más fácil de entender se ha desarrollado el temario de forma progresiva mediante la creación
de un sitio web sobre flores, introduciendo cada concepto según se va necesitando.
Así, primero veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces, estilos,
etc.Luego veremos como estructurar una página web y un sitio web y finalizando teorizaremos un poco sobre
cómo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

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.htm
Donde 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 nos 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.

¿Qué es una página 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.
Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello deberás de tener dos
ventanas abiertas, una con el curso y otra con el programa correspondiente.

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.

Estructura básica de la página
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas
<head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto básico de
cualquier página web, es el siguiente:
<html>
<head>
</head>
<body>
</body>
</html>

Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.
Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.
Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body>
(apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta, que puede ser texto
u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí
mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que
equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que
pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código
javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros archivos.
Normalmente, lo que contiene esta etiqueta no se muestra en el navegador.
Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento sólo
comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el
título de la página, que es lo que se ve en la barra de título del navegador.
En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto,
imágenes, enlaces, tablas, etc...

Escribiremos el siguiente código
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>

Colocar colores a la pagina y a las letras
La forma de colocar color a la pagina es colocando la etiqueta bgcolor=“black” y para colocar color a
las letras es text=“White” esto tendremos que colocarlo dentro de la etiqueta body.

Escribiremos los siguientes códigos para podes colocar los títulos en la pagina con las etiquetas
<h1> finalizando con <h/1>

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de
línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo,
utilizamos la etiqueta <p> y terminaremos con <br />.
Puedes ver todo esto en el siguiente ejemplo:

Para añadir una imagen primero fijaremos en donde queremos que vaya luego escribiremos <img
src=“flores.jpg”>

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

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

Pero ¿qué es un buen diseño web? Bueno, este punto puede dar para
mucho, pero vamos a intentar transmitir unas pocas ideas básicas:
Comodidad para el visitante. Le debe de resultar cómodo navegar
por el sitio.
Comodidad para el autor. Cuanto más fácil nos resulte realizar
modificaciones, mejor
Accesibilidad. En el aspecto técnico, el sitio debería de seguir los
estándares, para facilitar la compatibilidad con navegadores
antiguos, u otros dispositivos, como teléfonos móviles.
Transmitir. El diseño debe de transmitir lo que el usuario puede
esperar de él. Por ejemplo, de un banco esperamos seriedad, por lo
que un diseño informal puede ser contraproducente.
Bonito y original. El diseño debe de ser agradable, combinar bien
colores, organización de los elementos, etc. Y cuanto más original
sea, más lo será nuestro sitio.
Un buen diseño

Colores
La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio.
Lo habitual es utilizar una gama de colores armónicos, con variaciones de tonos de un mismo color. Con ellos
formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos
utilizando variaciones del color, y al final tendremos un sitio con muchos colores distintos.
Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseño de páginas web,
o herramientas que nos facilitan paletas de colores. Existen muchas herramientas gratuitas de este tipo.
Nosotros hemos utilizados: color-hex

La maquetación es la distribución de los elementos
en nuestra página. Piensa en una página web
cualquiera. Seguro que distingues algunos
elementos, como encabezados, columnas, menús
laterales, etc.
Actualmente, la maquetación con tablas ha caído en
desuso, y se realiza utilizando capas (<div>),
también llamadas divisiones o contenedores. La
colocación de las capas en la página se realiza a
través de CSS. Esto permite, por ejemplo, que
podamos pasar de un diseño con un menú lateral a
otro con el menú en la parte superior.
Maquetar una página web

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.
Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es
encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde
el HTML.
La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por
ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si
desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene esta
opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el
lugar del menú aparece una lista.
Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente
un enlace (<a href=""></a>) a una página del sitio.
El HTML del menú

Posición de los elementos
Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño,
podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por
ejemplo poniendo los elementos como flotantes.

La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas
img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con
15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el
peso de las imágenes, y sería muy larga.
La forma más simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo:
<a href="imagen_grande.jpg"><img src="miniatura.jpg" alt="Descripción" /></a>.
Galería con miniaturas

JavaScript
Es un lenguaje de programación que el
navegador es capaz de interpretar y
ejecutar sobre la página web.
Utilizando este lenguaje podemos crear
comportamientos que no están
disponibles en el html, por ejemplo
mostrar un mensaje pulsando aquí,
abrir una ventana, cerrarla...
O también podemos utilizarlo para
cambiar la página. Por ejemplo,
pulsando en los colores, la división toma
ese color como color de fondo.

En el ejemplo tenemos una página de Contacto que recoge datos mediante un formulario y los envía a una
dirección de correo electrónico. Para enviar dicho correo electrónico vamos a utilizar PHP.
Hay varias formas de recoger datos y enviar un correo, vamos a emplear la más didáctica utilizando dos
páginas. Luego en un ejercicio la mejoraremos (con una sola página).
Formularios

Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para hacerla
accesible a los millones de internautas de todo el mundo.
Servidores
Para que tu página se vea desde Internet simplemente tiene que estar almacenada en un servidor de
Internet. Es decir, debes disponer de espacio en un servidor para poder subir tus archivos, donde
cualquiera pueda verlos.
a) Servidores gratuitos.
Podemos diferenciar dos alternativas gratuitas:
• Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como
Tripod, Galeon, etc. La mayoría colocarán publicidad en las páginas alojadas. Los servidores gratuitos
pueden imponer restricciones en el uso de ciertas instrucciones de programación web y no te permiten
cambiar la configuración del servidor. Cada vez es más difícil encontrar servidores gratuitos con un
mínimo de calidad. Google Sites es un caso aparte.
PUBLICARLO

Servidores gratuitos.
Podemos diferenciar dos alternativas gratuitas:
Sitios especializados. Existen algunos sitios web especializado
en ofrecer espacio gratuito como Tripod, Galeon, etc. La
mayoría colocarán publicidad en las páginas alojadas.
Proveedores de acceso. Cuando contratas un servicio de
conexión a Internet a través de un proveedor, suelen ofrecer
de forma gratuita un espacio web en sus servidores. Si ya
tienes contratada una conexión a Internet, revisa las
condiciones porque probablemente tienes derecho a un espacio
gratuito en el servidor.
Servidores de pago.
Si quieres tener un lugar más profesional donde colocar tus
páginas o las de tu empresa puedes utilizar los servicios de
empresas especializadas que por menos dinero de lo que
piensas te ofrecen muchos servicios, prueba a visitar Arsys ,
Bluehost o Alojalia y ver sus condiciones y tarifas.

Dominios de Internet
Un servidor web necesita disponer de un dominio de Internet para que se pueda acceder a él en la forma
http://www.nombre_dominio.com. Por ejemplo, si quieres disponer del sitio web
http://www.dibujosdemotos.com deberás contratar el registro del dominio "dibujosdemotos.com" (siempre
que alguien no lo haya registrado antes).

Subir archivos al servidor
Hay varias opciones a la hora de subir los archivos al servidor:
a) Utilizar un programa específico para ello como el Filezilla.
Se trata de un cliente FTP. Para transferir ficheros por FTP se
necesita tener instalado un programa cliente de FTP en nuestro
ordenador y conocer la dirección del servidor FTP con el que
queremos conectar. Nuestra dirección nos la proporcionará la
empresa con la que tengamos el alojamiento.
b) Utilizar un editor de páginas web que incorpore esta
funcionalidad. Por ejemplo, el Dreamweaver
c) Utilizar las facilidades proporcionadas por la empresa de
hosting.
Realmente no necesitamos ninguno de los programas anteriores,
aunque casi siempre sean de mejor calidad. Toda empresa de
hosting nos proporciona un interfaz a través del que subir archivos
al servidor. Este interfaz depende de la empresa.

OBTENER VISUALIZACIONES
Para conseguir visitas provenientes de los
buscadores hay que utilizar técnicas de
posicionamiento y para conseguir visitas desde
otras páginas hay que conseguir enlaces. Aunque
ambas están relacionadas, ya que cuantos más
enlaces tengamos, mejor apareceremos en los
buscadores, y viceversa.
Posicionamiento.
Fundamentalmente nos vamos a referir al
posicionamiento en el buscador Google, porque es
el más utilizado y porque los demás buscadores se
basan en cosas similares para ordenar sus
resultados.

Contenido de calidad. Como ya hemos dicho éste es el factor primordial para obtener un buen
posicionamiento. Sin contenido de calidad no hay nada que hacer, con contenido de calidad lo demás viene
rodado. Contenido de calidad quiere decir contenido interesante, bien redactado y con diseño agradable. Una
página con un buen contenido y mal posicionamiento tardará más en alcanzar una buena posición, pero lo
conseguirá.
Sitio bien estructurado y sencillo. Para los robots de Google cuanto más fácil sea extraer la información de la
página tanto mejor. Hay que colocar suficientes enlaces de texto y con las palabras clave adecuadas y huir de
las excesivas florituras y virguerías técnicas.
Lograr enlaces desde otros sitios web. El factor de más peso en el PageRank de Google es el número y la
calidad de los enlaces que apuntan a nuestro sitio. Informa de la existencia de tu página a todo el mundo,
principalmente a los sitios de temática similar. En el punto siguiente daremos más información sobre este
tema.
Alta en Google. El primer paso para conseguir una buena posición en Google es aparecer en el buscador.

Publicidad
Una vez tenemos publicada nuestra página en Internet y conseguidos muchos visitantes puede ser
interesante incluir publicidad en ella. De forma mucho más sencilla de lo que pudiera parecer se pueden
poner anuncios comerciales y conseguir dinero. La cantidad de dinero es proporcional al número de
visitantes de la página.

GRACIAS

<html>
<head>
<title>Mi primera pagina web</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos un índice alfabético con todas las fotografías, o
puedes verlas organizadas en diferentes categorías.</p>
<img src="flores.jpg"width="150" height="150"
alt="No se encuentra esta imagen" />
<p>Interesante enlace sobre flores: <a
href="http://www.mundoflores.net">Mundoflores</a>
</p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros visita nuestra
página de contacto.Te esperamos.</p>
</body>
</html>

Pagina web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Pagina web

Similar a Pagina web (20)

Más de Erwin Vasquez

Más de Erwin Vasquez (9)

Último

Último (20)

Pagina web