Nickname
A Chatear seguro hay alguien conectado
En este curso se brinda una introducción a los principales
lenguajes que debe anejar un desarrollador web, asi como una guia de recursos.
Parte 1 General:
1.1-Herramientas indispensables
1.2-Herramientas no indispensables pero utiles
1.3-Como obtener un espacio en la red
Parte 2 HTML basico:
2.1-Primeros pasos con el HTML
2.2-Definiendo nuestro objetivo
2.3-Nuevas etiquetas que necesitaremos
2.4-Creando el archivo principal
PARTE 1 GENERAL:
1.1-Herramientas indispensables:
Navegador:
Un navegador es un programa que interpreta el codigo HTML(lenguaje en el que
estan escritas los .htm) es necesario para conocer efectivamente que hemos
realizado, ejemplos de estos son Internet Explorer o Netscape(son los mas
utilizados), podemos conseguirlos en la red ya que son gratuitos(si estas
leyendo esto seguro ya tienes uno), por otro lado todas la ediciones de windows
vienen con uno de regalo.
Editor de texto:
Un editor de texto es un programa que nos permite escribir en el y guardar
los archivos con distintas extenciones(.htm para paginas web), ejemplos de
estos son Bloc de notas y Wordpad(vienen con Windows), pero yo les aconcejo
que utilicen uno muy bueno el Editpad(puedes conseguirlo en http://www.jgsoft.com/
o puedes buscarlo en Google).
Importante: programas como Word son validos para
escribir codigo HTML solo si se especifica que se guardara como solo texto(en
este caso mejor utilizar el Bloc de notas ya que toda la potencia de Word
sera inutil).
1.2-Herramientas No indispensable pero utiles:
Aqui me refiero a programas que no son indispensables para un diseñador
web pero que a la hora de mejorar la productividad y calidad del sitio son
muy utiles:
Editor visual:
Es un creador de páginas desde el que se pueden ingresar formatos de
fuente, imagenes, tablas, colores y practicamente todo, sin conocer ni medio
de HTML. Todo se realiza con el puntero del raton y desde una vista de diseño.
Ejemplos de estos programas son:
Macromedia Dreamweaver: es el mejor editor del mercado(a mi gusto), desde
el se puede manejar un sitio de forma completa sin conocer mucho sobre el
tema, tiene gran capacidad para interactura con las principales herramientas
del desarrollador actual(Java, Javascript, C#, Flash, etc), de el se pueden
conseguir versiones de evaluación por 30 dias.
Adobe Golive: En su version 6 es un coloso del diseño, tanto el Golive
como el Dreamweaver traen completos tutoriales y referencias.
Microsoft Frontpage: No es muy encantador pero es especial para quienes recien
empiezan, su esquema de desarrollo permite paginas accesibles en poco tiempo,
se encuentra en los paquetes Office(2000 en adelante).
Servidor Local(simulador):
En cuanto a servidores lo mejor será usar un sencillo, el servidor
que viene ioncluido en la segunda edición de Windows 98 bastara, para
instalarlo solo hay que conseguir el CD de instalación de Windows 98
y ejecutar lo siguiente D:\add-ons\pws\instalar.exe(atención la letra
D puede variar segun donde este tu lectora), luego el programa de instalación
realizara su trabajo.
Durante el curso detallare para los que tengan su servidor local como guardar
archivos y otros datos utiles.
Las ventajas de tener un servidor local es que siempre podremos probar el
comportamiento del sitio antes de subierlo a la red, ademas si tienes una
proveedor de hosting que te brinda un lenguaje para crear paginas dinamicas(ASP,
PHP, JSP) y acceso a bases de datos(Acces , MySQL), el pws de win 98 soporta
ASP y Conexión a bases de datos Acces.
Un proveedor de Hosting es una empresa que nos alquila un espacio en internet(en
un servidor) para que los navegantes puedan acceder a nuestro sitio en todo
momento y con una dirección fija.
Diseñadores de imagenes:
Ejemplos de estos programas son Macromedia Fireworks o Adobe Ilustrator, tambien
se pueden crear dibujos en Paint de Windows pero es mas dificil su realización.
Yo les aconcejo que se busquen una versión Fireworks viejita(para empezar).
Para finalizar existen en internet infinidad de aplicaciones diseñadas
para facilitar la creación de páginas web, incluso hay sitios
que ofrecen un editor de HTML dentro de una página web.
1.3-Como obtener un espacio en la red:
Hay diversas maneras de obtener un espacio en la red:
La forma mas sencilla de hacerlo es a partir de un servidor gratuito(que no
permite lenguajes como ASP, PHP, JSP) y nuestras direcciones seran del tipo
http://www.servidorgratuito.com/tudireción, lo interesante de este
sistema es que solo hace falta una PC conectada a Internet y un tema para
el sitio.
La otra forma es registrar un dominio (por ejemplo para argentina es http://www.nic.ar/)
contrar a un proveedor de hosting y pagarle sus 15 pesos(alrededor de 5 dolares)
mensaules.
Para hacerlo de la primera forma pueden abrir una cuenta en Geocities(http://www.geocities.com/)o
en Gratisweb(http://www.gratisweb.com/).
Aqui les indicare el camino mas sencillo para hacerlo en Geocities(Gratisweb
es en español y no necesita tanta explicación). Para obtener
una cuanta en Geocities lo que deben hacer es lo siguiente:
A: Abrir una cuenta de correo Yahoo o tener uno.
B: Dirijirse a la web de Geocities.
C: Subir los archivos.
D: Visualizar el sitio.
A:
Si tienes una cuenta de correo Yahoo y quieres usar ese usuario como nombre
del sitio sirijete a Geocities, si por el contrario tu nombre de usuario no
te gusta o no tienes cuenta realiza el tramite de nuevo usuario.
B:
Coloca en el navegador la dirección http://www.geocities.com/
PARTE 2 HTML BASICO:
2.1-Primeros pasos con el HTML:
El lenguaje HTML no es un lenguaje de programación como lo son Java
o C++, HTML significa Hiper Text Markup Language lo que traducido
al castellano seria algo como un protocolo para definir formatos(alineaciones,
fuentes, tipos, tamaños, colores, etc) todo esto aplicado sobre texto,
imagenes, tablas, etc..
El HTML sigue un standart internacional para que los desarrolladores de sitios
y los desarrolladores de navegadores tengan pautas en comun para definir comportamientos(los
cuales seran comprendidos por todos de la misma forma), aun asi existen diferencias
entre los navegadores(entre Internet Explorer y Netscape sobre todo en lo
que se refiere a Javascript y JScript). Estas diferencias son motivadas principalmente
por la competencia comercial, por ejemplo el primero de los navegadores en
soportar la JVM(Java Virtual Machine) fue Netscape lo que lo convertia en
una potente herramienta en la red, esto motivo que los desarrolladores que
utilizaron Java recomendaran a sus usuarios utilizar Netscape, de la misma
forma Internet Explorer soporto desde su versión 4 la inclusción
de la etiqueta iframe la cual era difundida por Fornt Page el desarrollador
de Microsoft, luego estas paginas solo eran visibles en Internet Explorer
ya que el equivalente pára Netscape era ilayer y no iframe.
De todos modos a la hora de empezar a estudiar HTML no es necesario conocer
todas las opciones que nos dan y nos quitan los navegadores.
Un archivo HTML, es un archivo de texto con la extención .htm
esta extención indica que el texto incluido dentro del archivo es ni
mas ni menos que codigo HTML.
Formato de las etiquetas:
Las etiquetas HTML van encerradas entre los signos <etiqueta>,
cuando uno desea abrir una etiqueta y entre los signos </etiqueta>
cuando uno desea cerrarla, hay un etiquetas que no necesitan un cierre un
ejemplo de estas seria la etiqueta <br>(del ingles break lo
que significa nuevo renglon o el equivalente en un cadena a la expresion "\n"
nueva linea).
Formato de una página web:
Como ya dijimos una pagina web contiene codigo HTML:
Primeras Etiquetas:
<HTML>Documento</HTML>
Esta etiqueta encierra a todo el documento, cualquier contenido de una pagina
web se escribe dentro de esas dos etiquetas.
<HEAD>Cabecera<HEAD>
Esta etiqueta contiene la cabecera del documento, aqui se especifican estilos(por
los que serira el codigo del cuerpo) palabras claves, descripción y
otors datos que nos sirven para dar una idea detallada de cual es el tema
de la página(esto sirve principalmente para los motores de busqueda).
<BODY></BODY>
Dentro de esta etiqueta va el contenido visual de la pagina, y sera en un
principio la sección que mas estudiaremos.
<!--Comentario-->
Este es un ejemplo de una etiqueta que no necesita cierre, se trata de un
comentario(por lo tanto no es percibida por el navegador) y nos sirve para
dejar datos para futuras modificaciones o para cualquier cosa.
<B>Palabras</B>
Esta es una verdadera etiqueta de formato, esta etiqueta(B del ingles bold
es el equivalente a negrita) nos dice que todo lo que este dentro de ella
aparecera en el navegador en Negrita.
Primera Página Web:
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Mi primera pagina web</B><!--este texto va en negrita-->
</BODY>
</HTML>
Como ustedes ya habran adivinado el resultado de esto es una página
con el texto "Mi primer pagina web" en Negrita.
Les sugiero que copien el texto marcado en azul, luego habran el editor de
texto que tengan peguen el texto adentro, luego vayan a archivo guardar como....
Una vez ahi busquen el escritorio coloquen en el nombre del archivo pagina.htm
y en el menu de que tipo de archivo seleccionen todos lo archivos y despues
a guardar.
Ahora minimicen todas las ventanas y habran el archivo pagina.htm que se ha
creadoen el escritorio y esa es su primera pagina web.
2.2-Definiendo nuestro objetivo:
Para facilitar el aprendisaje con algo de practica.
En este punto definiremos un objetivo a cumplir y en el detallaremos todos
nuestros pasos, el objetivo sera un sitio personal que contendra una página
principal(el index) con cuatro paginas secundarias en el mismo directorio,
luego esto lo subiremos a nuestra dirección en geocities(y si podemos
lo probaremos en en pws de windows 98).
El index contendra una descripcion general del sitio y vinculos hacia los
demas archivos o secciones.(index.htm)
La primera seccion será "Porque construi este sitio", donde
le contaremos al visitante por que construimos el sitio.(porque.htm)
La segunda sección contendra imagenes(yo, mi mascota, mis vaciones,
mis parientes, mis dibukitos animados preferidos, etc).(imagenes.htm)
La tercera sección será alguna especie de autobiografia o lo
que tu quieras colocar en la red.(auto.htm)
La cuarta y ultima sección sera "Contactarme" donde le informaremos
al visitante como contactarse contigo, contendra una tipica etiqueta mailto,
direcciones, etc.(contacto.htm)
2.3-Nuevas etiquetas que necesitaremos:
<FONT COLOR="#0000ff" FACE="verdana"
SIZE="2">parrafo</FONT>
Esta etiqueta sirve para darle formato a una parte del texto, aqui se ve una
cosa nueva de las etiquetas, estas tienen variables que pueden ser modificadas.
Por ejemplo la variable 'face' nos indica que tipo de letra queremos si yo
escribo el siguiente codigo:<FONT FACE='verdana'>hola</FONT>
el resultado sera la palabra hola con el tipo de letra verdana.
De la misma forma se pueden setear el color y el tamaño.
Definir colores:
El color esta construido con valores RGB(Red, Green y Blue) ademas no son
numeros decimales son hexadecimales(es decir que en vez de llegar a 9 llegan
a 15 el cual se simboliza con un unico signo la F), los dos primeros valores
equivlaen a la cantidad de rojo que tendra el color, los dos del medio equivalen
a la cantidad de verde y finalmente los dos de la derecha a la cantidad de
azul, aqui van algunos colores:
verde=00ff00
azul=0000ff
rojo=ff0000
blanco=ffffff
negro=000000
prueben combinando distintos valores para hacerce una idea mas detallada y
recuerden que siempre los valores deben estar entre comillas y detras de un
simbolo #.
Otra forma de colocar colores:
Ademas cabe la posibilidad de colocar colores por el nombre(esto es en ingles)
se permiten los suiguiente colores:
aqua, black, blue,
fuchsia, gray, green,
lime, maroon, navy,
olive, purple, red,
silver, teal,
white y yellow
asi que con esto se coloca <FONT COLOR='blue'>hola</FONT> y obtenemos
la palabra hola en azul.
Atributos de la etiqueta font que podemos modificar:
class especifica que el parrafo encerradoen la
etiqueta es de una clase o estilo definido(lo veremos mas adelante).
color especifica el color del parrafo.
face nos permite especificar la fuente del parrafo,
se pueden colocar varias fuentes de manera que si una no esta en el sistema
del usuario se cambien por otra parecida, eje: FACE='verdana, arial' si no
encuentra la fuente verdana utilizara la arial.
size elegimos el tamaño de la fuente,
los valores van desde el 1 al 7, desde el +1 al +7 y desde el -1 al -7.
id nos permite darle un nombre al parrafo, lo
que nos da la posibilidad de acceder a sus propiedades por medio de javascript.
style nos deja escribir el estilo como css(para
mas adelante)
existen otros atributos que no son tan importantes.
<A HREF="vinculo.htm">este es un viculo</A>
La etiqueta A es la mas importante de todasd las soportados por el HTML, a
traves de ella nos movemos entre dos paginas, disparamos eventos javascript,
etc.
La etiqueta a A tiene la capacidad de reconocer gran cantidad de eventos(clickear
con el raton, pasar el puntero sobre ella, etc) lo que permite ejecutar funciones
escritas en Javascript apartir de estos eventos, sim embargo es la etiqueta
mas importante es por medio de ella que se realiza la navegación en
la red(imaginense si cada vez que una persona quiere cambiar de página
tuviera que escribir la nueva URL en la barra de direcciones).
Atributos de la etiqueta A:
href esto indica al navegador hacia donde se
producira el salto, se coloca la ruta partiendo desde el archivo actual, la
dirección completa si se trata de otro dominio, el simbolo # en cuyo
caso el link no realiza nada, el simbolo # seguido de algun indicador de marca
para dirijirse a otra sección de la misma pagina o mailto... que genera
una petición hacia el programa de correo electronico predeterminado.
1 salto hacia archivo en el mismo dominio: supongamos
que estamo en el archivo index.htm y queremos hace un salto hacia un archivo
'misimagenes.htm' que se encuentra en una carpeta llamada 'imagenes', osea
que los archivos estan asi:
index.htm
imagenes/misimagenes.htm
entonce el resultado es:
<A HREF='imagenes/misimagenes.htm'>ir a mis imagenes</A>
2 salto hacia pagina de otro domino, supongamos
que desde una pagina nuestra queremos poner un link hacia la pagina principal
de Yahoo argentina, se debe colocar la ruta completa del archivo:
<A HREF='http://www.yahoo.com.ar/'>ir a Yahoo</A>
3 Esto se usa por lo general para disparar un
evento:
<A HREF='#' OnClick='Gestiona_Evento_Click()'>disparar evento</A>
La función Gestiona_Evento_Click() debe estar delarada dentro de una
etiqueta de scripts, mas adelante lo veremos.
4 Saltar hacia otra sección de la pagina
actual, para poder realizar este link tenemos que colocar otra variante de
la etiqueta, supongamos que tenemos un archivo muy extenso y queremos que
cuando el usuario llegue el final haga click en un link y vuelva al principio.
Lo que haremos sera colocar esto al inicio del documento:
<A NAME="arriba"></A><!--esto es una marca-->
y esto al final
<A HREF='#arriba'>ir arriba</A>
con esto la pagina vuelve hasta donde esta la marca.
5 Abrir programa predeterminado de correo electronico:
<A HREF='[email protected]?subject:te escribo desde el index de tu
pagina web'>escribeme un e-mail</A>
lo que dara como resultado que cuando el usuario clicke ase habra el correo
predeterminado con un mail hacia '[email protected]' y con el asunto 'te escribo
desde el index de tu pagina web'.
target este atributo nos indica donde se abrira
el nuevo archivo, si no se coloca se abre en la misma ventana:
_blank: el archivo se abre en una ventana nueva
_self: el archivo se abre en la misma ventana
Existen ademas otros valores y si trabajamos con marcos(frames) podemos colocar
el nombre del marco que deseemos.
Eventos
Desde la etiqueta A se pueden disparar eventos, mas tarde se explicara como.
<BR>
Esta etiqueta crea una nueva linea en el texto, es el equivalente a la expresion
"\n" o a presionar desde el teclado la tecla SHIFT al mismo tiempo
que la tecla ENTER, ejemplo:
'hola<BR>buenos dias' nos da como resultado:
hola
buenos dias
<IMG SRC="central.gif" WIDTH="270"
HEIGHT="76">
Esta etiqueta es para colocar imagenes dentro de una pagina, los formatos
soportados son gif jpg y png.
atributos de IMG
src define el recurso, la direccion se coloca
igual que en el caso del link(etiqueta A)
width ancho de la imagen expresado en pixeles
height alto de la imagen expresado en pixeles
tanto en el alto como en el ancho si se especifican valores que nos sonreales(que
no coinciden con la imagen) esta se achica o agranda hasta entrar en el espacio.
si no se especifican estos valores la imagen parace con su tamaño real.
Nota:
Si queremos transformar una imagen en un link debemos colocar la etiqueta
de imagen dentro de un link:
<A HREF='archivo.htm'><IMG SRC='central.gif'></A>
lo que dara como resultado una imagen-link.
<TITLE>titulo de la pagina</TITLE>
Esta etiqueta inidica al navegador el titulo del la pagina, el texto que aparece
en la parte azul de la ventana, se debe declarar entre <HEAD> y </HEAD>.
Ademas es de utilidad para transmitir el contenido de la pagina, los buscadores
utilizan esa etiqueta para darle un nombre dentro de los resultados de busqueda.
<CENTER>este texto esta centrado</CENTER>
Todo lo que este dentro de esta etiqueta estara centrado en la pagina.
<HR COLOR='#000000'>
Esta etiqueta crea una linea horizontal en la pantalla, se puede setear
el color.
2.4-Creando el archivo principal:
El nombre:
el nombre del archivo sera index.htm, ya que es el archivo que la mayoria
de los servidores devuelven cuando se pide la dirección donde este
esta guardado. Supongamos que registramos el dominio 'http://www.midominio.com/'
y que tecleamos en la barra de direciones del navegador la URL anterior, es
obvio que no le estamos diciendo que archivo queremos pero el servidor nos
dara el archivo llamado index.htm que esta en ese directorio. Desde otro punto
de vista lo que sucede es esto: cuando registramos el dominio estamos en condiciones
de contratar un servidor, este servidor nos habilita una carpeta en su disco
duro(esta carpeta es igual a cualquiera que tengas tu por eje 'C:\misdoc'
solo que ademas esta accesible desde la red), supongamos que la carpeta en
cuestion es 'C:\inetpub\wwwroot\midominio.com\' cuando un usuario píde
la dirección 'www.midominio.com' en realidad esta pidiendo ver la carpeta
de sistema, entonces el servidor le devuelve el archivo llamado index.htm
que es el predeterminado dentro del servidor. Ademas Geocities usa ese archivo
como predeterminado en sus servicios.
El codigo:
Este sera el codigo de nuestro index htm, entre comentarios van las secciones
desde donde personalizaras el sitio:
<HTML>
<HEAD>
<TITLE>El sitio web personal de </TITLE><!-- escribe tu nombre
y apellido -->
</HEAD>
<BODY>
<CENTER>
<FONT COLOR='blue' SIZE='3' FACE='Verdana,Arial'>Bienvenido a mi Sitio
Web Personal</FONT>
<HR COLOR='black'><BR>
<FONT COLOR='black' SIZE='2' FACE='Verdana,Arial'>
<!--Desde aqui describe porque diseñaste el sitio, por que esta
leyendo el curso blablabla -->
Diseñe este sitio por que me gustaria que todos sepan quien soy, <BR>en
que consiste mi trabajo, y por cualquier cosa
<!-- Hasta aqui-->
</FONT>
<BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
<FONT COLOR='black' SIZE='1' FACE='Verdana,Arial'>
Este es el index creado por centralfwd para el curso de introducción
al desarrollo web
</FONT>
</CENTER>
</BODY>
</HTML>
