Nickname
A Chatear seguro hay alguien conectado
GUERRILLA
NET
Hoy
en día todo mundo puede tener su propia página web para presentarse,
presumirles a los demás, subir información o juegos para compartirlos
con los demás, para vender, etc.
Hacer
una página es en realidad muy sencillo. Existen diferentes maneras
y programas para construirlas. Por ejemplo, con el Word dale en “Archivo-Guardar
como página Web...” y automáticamente tendrás una
página sencilla. O Front Page con el que podrás crear páginas
de más calidad y muchos otros que te permiten hacer páginas
profesionales pero son difíciles de usar y cuestan $$$. Pero el método
más usado es abrir un nuevo documento en el Bloc de notas de Windows
y utilizar código HTML.
HTML
significa Hyper Text Marckup Language o Lenguaje de Marcado de HiperTexto.
Es el lenguaje de programación de páginas web más usado.
No es el único pero si es el más fácil de dominar.
Para
crear un documento HTML basta con que guardes el documento del Bloc de notas
con las terminaciones .htm o .html por ejemplo: “Guardar como... pagina.html”.
Las
páginas o documentos HTML son simples archivos de texto ASCII, estructurados
mediante la inserción de marcas especiales que los navegadores identifican
e interpretan desplegando las páginas con todos sus atractivos.
Es
importante tener un navegador. Un navegador es un programa mediante el cual
puedes tener acceso a Internet y a sus servicios. Casi todas las computadoras
ya tienen incluido el Internet Explorer pero hay otros muy buenos y que te
recomendamos conseguir como el Netscape, el Opera o el de MSN.
Los
programas HTML están formados por etiquetas (tags) que le indican el
formato del documento al navegador y siempre van entre corchetes angulares
< >.
Ahora
pondremos algunas etiquetas de las más conocidas. Cópialas y
pégalas en tu documento de texto que vayas a guardar como página
web.
<HTML>
y </HTML> Esta etiqueta es obligatoria ya que le indica al navegador
que se trata de un archivo HTML. La etiqueta <HTML> siempre va al principio
y la etiqueta de cierre </HTML> siempre va al final del documento.
<HEAD>
y </HEAD> Indica el encabezado del documento.
<TITLE>Titulo
de la pagina</TITLE> Va entre las etiquetas <HEAD> y </HEAD>
e indican el titulo de tu página. Por ejemplo, el titulo de esta página
es “GUIA PARA CONSTRUIR TU PROPIO SITIO”.
<BODY>
y </BODY> Son obligatorias. <BODY> va después de </HEAD>
y su cierre va antes de </HTML>. Contienen el texto y otros elementos
que publicaras en la página.
<BODY
TEXT=color LINK=color ALINK=color VLINK=color BGCOLOR=color> Dentro de
<BODY> pueden ir los siguientes atributos: TEXT indica el color del
texto; LINK el color de las ligas (links) antes de entrar a ellas; ALINK el
color de las ligas mientras le estes haciendo clic; VLINK el color de una
liga a la que ya hayas entrado y BGCOLOR indica el color del fondo. Originalmente
se indicaban con 6 números como 999999 pero los navegadores modernos
permiten incluir el nombre del color en ingles como BGCOLOR=GREEN.
El
código hasta ahorita quedaría así:
<HTML>
<HEAD><TITLE>Titulo</TITLE>
</HEAD>
<BODY>
Textos
</BODY>
</HTML>
Con
eso ya tienes una página sencilla. Pero puedes agregar más etiquetas
como:
<H#>Texto</H#>
Indican el tamaño de las letras. El signo # lo sustituimos por un número
del 1 al 6. El 1 nos indicaría texto grande y el 6 texto más
pequeño.
<CENTER>Texto</CENTER>
El texto encerrado por la etiqueta queda centrado.
<BR>
Es como si fuera un ENTER, salta de línea en el lugar en que se ubique,
ya que el navegador no respeta los ENTERS y tienes que poner esta etiqueta
donde quieras que haiga uno. No tiene cierre.
<P>Texto</P>
Marca la división en párrafos en el cuerpo de texto.
<HR>
Despliega una línea horizontal en el lugar donde se ubique.
<FONT
COLOR= COLOR> Texto </FONT> Para ponerle color a un texto.
<B>Texto</B>
El texto dentro de las etiquetas queda en negrita.
<I>Texto</I>
Le da al texto atributo de cursiva.
<TT>Texto</TT>
El texto se ve como letra de máquina de escribir.
<EM>
Texto </EM> Para que el texto se vea así.
<VAR>
Texto </VAR> Así sale el texto entre estos tags.</VAR
<ADDRESS>
Texto <ADDRESS> Para marcar direcciones postales o de correo electrónico.
<OL>
Elementos </OL> Para indicar el inicio y el fin de los elementos de
una lista.
<LI>
No tiene cierre e indica los elementos de una lista.
<UL>
Elementos </UL> Indica elementos de una lista con bullets.
Eso
es lo básico para crear una página de solo texto. A continuación
veremos como poner tablas sencillas, ligas, imágenes y otras cosas
más.
<TABLE>
y </TABLE> Indican el inicio y fin de una tabla.
<TR>
y </TR> Indican los renglones.
<TD>
y </TD> Indican las columnas.
<TH>
y </TH> Indican las columnas con letras en negritas.
Dentro
de TH y TD puede ir el comando ALIGN que indica la alineación del texto.
El
código de una tabla sencilla quedaría así:
<TABLE
BORDER=5 CALLPADING=5 CELLSPACING=5 WIDTH=100%>
<TR>
<TH
WIDTH=50% BGOLOR=BLACK>Nombre</TH>
<TH
WIDTH=50% ALIGN=CENTER>Acciones</TH>
</TR>
<TR>
<TD
WIDTH=50% ALIGN=LEFT>Chuntaro</TD>
<TD
WIDTH=50% ALIGN=CENTER>Programa virus</TD>
</TR>
</TABLE>
Y
se vería así en tu browser:
Nombre
Acciones
Chuntaro
Programa virus
Toda
página decente tiene imágenes. Poner imágenes es muy
sencillo. Solo debes de poner la siguiente etiqueta en donde quieras que aparezca
una imagen:
<IMG
SRC= “imagen.jpg”>
Donde
“imagen.jpg” lo sustituyes por el nombre de la imagen que quieras
poner. Puede aceptar los formatos .jpg o .gif. La imagen debe de estar en
el mismo directorio en donde esta tu página. Si no esta ahí
le debes de indicar al navegador la ruta para encontrarla, por ejemplo:
“imágenes/imagen.gif”
Indica quela imagen está en un directorio llamado imágenes y
que ese directorio esta donde tienes tu documento.
“.../imagen.gif”
La imagen esta un directorio atrás de donde esta tu documento.
Por
ejemplo:
<IMG
SRC=”star.gif”>
Y
aparece la siguiente imagen:
Puedes
utilizar ALIGN para seleccionar si quieres que la imagen aparezca centrada,
a la izquierda o a la derecha.
WIDTH
y HEIGHT indican el tamaño.
Por
ejemplo:
<IMG
SRC=”star.gif” WIDTH=10 HEIGHT=10>
Y
aparece así:
Para
poner una imagen de fondo en la etiqueta BODY debes de incluir el comando
BACKGROUND y el nombre de la imagen.
<BODY
BACKGROUND=”bg.jpg”>
Visita
nuestra sección de imágenes para que encuentres algunas.
Una
liga te lleva a otra página sin necesidad de escribir su dirección
en el navegador. Para poner una incluye esta etiqueta:
<A
HREF= “web.html”>Pincha aquí y te llevará a web.html</A>
Sustituyes
web.html por otro documento que tengas u otro sitio web.
<A
HREF= “http://communities.msn.com.mx/guerrillanetmx”> Comunidad
de la Guerrilla en MSN </A>
Comunidad
de la Guerrilla en MSN
Para
que una imagen indique un vinculo se hace así:
<A
HREF= “index.html”>
<IMG
SRC= “star.gif” BORDER=2>
</A>
Para
que se vea así:
Así
ya puedes tener una página decente para que tengas presencia en Internet
y todo mundo te conozca.
Las
siguientes etiquetas son para que la página tenga más presentación:
<A
HREF=""ONMOUSEOVER="alert('alerta')">TEXTO</A>
Pones esto y si alguien pasa el mouse por encima del texto le aparece un mensaje.
PASA
EL MOUSE POR AQUI
<EMBED
SRC="musica.mid" autostart=true hidden=true> Para que los que
entren a tu página escuchen música (en formato mid).
<BGSOUND
SRC=”musica.mid" LOOP="0"> Igual que el anterior y
con esta la puedes estar repitiendo. Solo funciona si los que entran a tu
página usan Internet Explorer.
<STYLE
type="text/css">
<!--
BODY
{
scrollbar-face-color:
green;
scrollbar-highlight-color:
black;
scrollbar-3dlight-color:
black;
scrollbar-darkshadow-color:
grey;
scrollbar-shadow-color:
black;
scrollbar-arrow-color:
black;
scrollbar-track-color:
black;
}
-->
</STYLE>
Cambia
los colores de la barra de desplazamiento, para dar mejor presentación.
<body
onLoad="if(document.all)
window.external.AddFavorite(window.document.location,window.document.title)"
bgcolor="#000000" text="#00FF00">
Ponla
en lugar de BODY y los que entren a tu página la podrán agregar
a sus favoritos.
Y
coloca esta código para colaborar con nosotros promocionando nuestra
comunidad en MSN:
<!--
Begin MSN Communities Join Code -->
<FORM
method=POST action="http://communities.msn.com/guerrillanetmx/_joinpromote.msnw">
<TABLE
border=0 cellpadding=1 cellspacing=0 bgcolor=black><TR>
<TD><TABLE
border=0 cellpadding=0 cellspacing=0 rules=none background="http://sc.communities.msn.com/img/pby/mail/promotebg.gif">
<TR><TD
rowspan=3> </TD><TD colspan=2><B>Unete a guerrilla_net_mx</B></TD>
<TD
rowspan=3> </TD></TR>
<TR><TD><INPUT
type=hidden name="commurl" value="guerrillanetmx">
<INPUT
type=text size=22 name="emailids" value="Escribe aqui tu email">
<INPUT
type=submit value="Go"></TD></TR>
<TR><TD
align=right colspan=2><IMG border=0 src="http://sc.communities.msn.com/img/en-us/promotelogo.gif"
width="115" height="15"></TD></TR>
</TABLE></TD>
</TR></TABLE>
</FORM>
<!--
End MSN Communities Join Code -->
Unete a guerrilla_net_mx
Ya
que tengas lista tu página web y la quieres publicar para que todo
mundo la vea tienes que buscar un buen lugar donde hospedarla. Te recomendamos
Geocities que ofrece 3 modalidades: 1 gratis y 2 que tienes que pagar. Las
de paga solo son recomendables para empresas y negocios, si tu página
va a ser personal o para compartir información usa la gratuita donde
encontraras más ayuda.
El
HTML no solo te sirve para programar páginas, también lo puedes
incluir en emails para que te queden matones y para crear trabajos.
NOTA:
La página principal la debes de nombrar como “index” porque
si no tienes un index nadie podrá ver lo demás
Ya
que la tengas publicada mandanos un email y la promocionaremos en nuestra
sección de links.
