03-17-2004, 12:45 AM
Bueno, este es un tutorial que escribà hace rato, para aprender html, pero en el bloc de notas, es muy sencillo y fácil de aplicar...
(Este documento está enfocado a webmasters amateruchos o a gente ke kiera
aprender HTML. Una vez ke alguien se perratee lo ke hay expuesto akÃ, estará
en capacidad de asimilar mi documento "El antiguo arte de robar HTML"
Lo ke enseño en este documento es con fines puramente educativos, no me
responsabilizo de nada en absoluto ke pueda hacer alguien kon esta
información. Distribúyase libremente. [Kon mi nick, claro! Be fair]) v1.1
===================================
CURSO BÃSICO DE HTML PA´ PELAOS
===================================
Por ^CoMboY^
INTRODUCCIÓN:
...sabes ké fué lo ke me impulsó a aprender HTML? El ver ke pelaÃtos de
15 años tenÃan sus propias páginas...hechas kon FrontPage, pero las tenÃan!
Fue entonces kuando komencé a buskar fuentes de información, hasta dar kon
un libro...no rekuerdo su nombre, pero el 1er capÃtulo sirvió para ke esa
misma noche mi primera página kedara montada en Geocities...kon esto kiero
expresar ke aprender HTML no es algo ke deba escandalizaros, es fácil y a
medida ke se adkiere experiencia es + fácil ke entren nuevos conocimientos.
Crear HTML divierte y da satisfacción. Comencemos entonces! ^_^
--------------------------------------------------------------
Novedades en versión 1.1:
-Implementada la etiqueta <FRAMESET>
-Breves datos sobre encriptación
---------------------------------------------------------------
CONTENIDOS
----------
CAPÃTULO 1 "Cómo funciona esta jugada?"
* Las Etiquetas
- Etiquetas básicas o inmondables
- Etiquetas avanzadas
- Etiquetas pa´l perreo
- Las variables, hablemos de las variables...
* Maneras de ahorrar tiempo
- Modelos prediseñados (Por tÃ)
- El popular Cut&Paste
CAPÃTULO 2 "Publicación de la página"
* Cómo y donde?
* Por qué?
* Para qué?
* Ké hora es?
CAPÃTULO 3 "Manteniendo viva la página"
* Parámetros legales
- Leerse todo el Agreement
- Buscar la manera de no cagarla
* Contadores, Guestbooks y algunos trukitos
- Hacer algo para asegurarse de ke la gente regrese
CAPÃTULO 4 "Cómo ampliar conocimientos de HTML"
* Se acabó este kule curso fantasma!
- Unos últimos konsejitos
- Palabras de nuestro servidor(T3) ^VM^
-----------------
ANTES DE EMPEZAR:
-----------------
Siempre ke kieras hacer un HTML abre tu Microsoft Notepad y...sÃ, ombe, sÃ,
el Bloc de Notas! ...lo abres, haces tu página y lo guardas kon extensión
.htm, luego puedes editarlos (Yo le agregué a la shell de los HTML la lÃnea
"Perrear" en Opciones de Carpeta, se abre con Notepad) y guardarlos, si te
acostumbras a usar tu Notepad serás un webmaster pulido & poderoso.
Requisitos: Saber un poco de Inglés y bacilar Notepad...
-----------------------------------------
CAPÃTULO 1: "Cómo funciona esta jugada?"
-----------------------------------------
Bueno, esta gaver es a punta de ETIQUETAS, ké son? (requesón), las etiketas
son al HTML lo ke las palabras son a un idioma, y siempre van entre < y >
y para cerrarlas el formato es </>, EJEMPLO:
La etiqueta <ElGüevo> termina con la etiqueta </ElGüevo> si pillas?
Cabe mencionar ke la mayorÃa de estas etiketas usan variables, más abajo
trataremos algunas.
- Etiketas básicas o inmondables:
<HTML> </HTML> Akà va todo...asà de simple.
<HEAD> </HEAD> Van los JavaScripts y la etiketa <TITLE>
<TITLE> </TITLE>Va el tÃtulo de la page (El de la eskina superior izkierda)
<BODY> </BODY> Todo lo ke pongas akà dentro es lo ke aparece en el browser,
como su nombre lo dice, es el Cuerpo del HTML.
<FONT> </FONT> Sus variables son las responsables del tipo de letra.
<BR> (no se cierra) Siempre ke la pongas habrá un salto de lÃnea.
<A> </A> Sirve para hacer links. Ya sean internos o externos.
<IMG> (no se cierra) Para insertar una imagen. (GIF ó JPG)
<P> </P> ...un párrafo... NUNCA LA USO!
<CENTER></CENTER> Todo lo ke metas aquà irá centrado...asà de simple...
(hay una etiketa toda fantasma por ahÃ, es la "H" de "Header" y se usa
desde la +pekeña <H1></H1> hasta <H7></H7>, creo! Tampoco la uso...)
- Etiketas Avanzadas y/o pa´l perreo:
<BGSOUND> (no se cierra) Pone un sonido de fondo. (WAV ó MIDI)
<EMBED> (no se cierra) Incrusta multimedia (AVI, WAV, MIDI, RA, etc)
<HR> (no se cierra) Una cochina lÃnea... ya!
<TABLE> </TABLE> Esta es importante, una tabla te organiza la page bien ^_^!
<FRAMESET> </FRAMESET> los pupulares FRAMES.
<FORM> </FORM> Incrusta formularios en la página.
<MARQUEE> </MARQUEE> Las populares marquesinas.
<SCRIPT> </SCRIPT> Los inmortales JavaScripts.
<APPLET> </APPLET> Adivinas? JAVA!
Estas son todas las etiketas ke rekuerdo, ahora veamos el uso de éstas:
Todo documento HTML tiene el siguiente esqueleto:
<HTML>
<HEAD>
<TITLE> El tÃtulo </TITLE>
</HEAD>
<BODY>
El contenido
</BODY>
</HTML>
Te sugiero hacer un documentico ke siempre kontenga este eskeleto pa´ke
ahorres tiempo. Bien, comenzemos lo de las variables:
(Ojo! Estoy explicando las variables ke konozko, existen muchas +)
LAS VARIABLES:
==============
***Variables para <BODY>:
BGCOLOR="" --> Entre los " " pones el color de fondo ke llevará la página,
puedes llamar al color por su ´valor RGB, su código
hexagecimal, pero kienes no se complican ponen el nombre del
color en inglés y ya! Si en vez de color kieres usar una
imagen, usa la variable BACKGROUND.
BACKGROUND="" -->Entre los " " pones la ruta completa (o sólo el nombre, en
caso de ke esté en el mismo directorio) de la imagen ke
usarás como fondo para tu página. Rekuerda ke mientras se
descarga la imagen, el browser mostrará el color de fondo.
BGPROPERTIES="" -> Esta a su vez, tiene sus variables, yo sólo le conozco la
de "fixed", ke sirve para ke la imagen de background no
se mueva al desplazarte por la página.
LINK, VLINK & ALINK -> Estas 3 variables determinan: el color de los linkz,
color de un link visitado, y color de un link
clickeado, respectivamente. Ponles el ="color" a c/u.
EJEMPLO:
<BODY BGCOLOR="black" BACKGROUND="careverga.jpg" BGPROPERTIES="FIXED"
LINK="yellow" VLINK="orange" ALINK="darkgoldenrod">
***Variables para <FONT>:
FACE="" --> Le pones el nombre de la True Type Font ke usarás, debes
tener en cuenta ke si alguien ke no tenga esa fuente instalada
ve tu página, le aparecerá en fuente predeterminada.
COLOR="" -> ...no creo ke tenga ke explikar esta variable, o sÃ?
SIZE="" --> El tamaño de la fuente, de 1 a 7, donde 7 es el mayor.
EJEMPLO:
<FONT FACE="Comic Sans MS" Color="white" SIZE="5"> Blah, blah, blah!</FONT>
***Variables para <IMG>:
SOURCE="" --> La ruta completa de la imagen (gif ó jpg) ke usarás.
ALT="" --> Lo que escribas entre los " " será un Tooltip para la imagen.
WIDTH & HEIGHT -> Especifica el ancho y alto en pÃxeles de la imagen.
(úsala solo en casos necesarios)
BORDER="" -> El borde de la imagen se notará kon un ridÃculo marco cuando la
uses como link, usa siempre como valor CERO!
ALIGN="" --> Alineará la imagen con un texto, sus subvariables son
TOP, BOTTOM, LEFT, CENTER y RIGHT.
EJEMPLO:
<IMG SRC="comboy.gif" alt="Jejeje..." WIDTH="377" HEIGHT="78" BORDER="0">
***Variables para <A>:
HREF="" --> La ruta completa del destino, ya sea otro htm, imagen, etc.
TARGET="" -> Se usa generalmente dentro de los frames, sirve para indicar
donde se desplegará el link, si en otra ventana o en el otro
lado del frame. Si no lo usas, se despliega en esa misma ventana
NAME="" --> Le da un nombre al link. Muy útil para los JavaScripts y para
hacer links internos.
EJEMPLOS:
<A HREF="http://www.comboy.com" TARGET="NEW" NAME="DTCOM">
Haz Click akà para darle #$%@ a ^comboy^! </A>
<A HREF=mailto:webmaster@comboy.com>EscrÃbanme!</A> --> Mandar correo! ^_^
<A HREF="links.htm"><IMG SRC="lk.gif" alt="Página de Linkz!"></A>
***Variables para <BGSOUND>:
(Esta etiqueta la puedes ubicar en cualquier parte del código, acostumbro
ponerla debajo de <BODY>)
LOOP="" -> Puedes poner el # de vueltas deseadas, o sencillamente "infinite"
SRC="" --> La ruta completa del MIDI o WAV ke usarás de música de fondo. Si
vas a usar un WAV procura ke sea pequeño en peso.
EJEMPLO:
<BGSOUND SRC="elguevo.mid" LOOP="INFINITE">
***Variables para <EMBED>:
SRC="" --> La ruta completa del MIDI, WAV, AVI, MPG, VIV, RM, RA, ASF, etc
ke vayas a incrustar...sobra decir ke debes cuidarte de usar
archivos de tamaño exagerado.
AUTOPLAY="" -> Puede ser TRUE ó FALSE, si lo dejas en TRUE, el objeto
incrustado iniciará por sà solo al descargar completamente.
LOOP="" -> Puedes poner el # de vueltas deseadas, o sencillamente "infinite"
EJEMPLO:
<EMBED SRC="perrera.wav" AUTOPLAY="true" LOOP="0">
***Variables para <HR>:
WIDTH & HEIGHT -> Especifica el ancho y alto en pÃxeles de la lÃnea...o si
no quieres komplicarte, usa valores en % de acuerdo a la
resolución de pantalla.
NOSHADE --> Ni idea, pero las hace ver un poco diferentes...
ALIGN="" --> Ya te imaginarás
EJEMPLO:
<HR WIDTH="75%" ALIGN="CENTER" NOSHADE>
***Variables y SubEtiquetas para table para <TABLE>:
Esta etiqueta contiene a las etiquetas <TR> y <TD>, serán explicadas luego.
BORDER="" -> El borde del marco de la tabla. Si usas 0 (Le chupas la mondá
al mesero) la tabla no presentará marco alguno.
CELLPADDING Y -> Controlan el relleno de las celdas y el espacio entre ellas.
CELLSPACING Si vas a armar una imagen kon varios gifs usa 0.
*** Las etiketas <TR> & <TD> kon sus variables:
Donde va <TR> comenzará una fila, y terminará en </TR>. Si dentro de <TR>
pones <TD> agregarás Columnas, y a las etiquetas <TD> les puedes aplicar
las variables BGCOLOR, WIDTH, HEIGHT, etc. Ké tal?
EJEMPLO:
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0">
<TR><TD><IMG SRC="01.gif"></TD><IMG SRC="02.gif"></TD></TR>
<TR><TD><IMG SRC="03.gif"></TD><IMG SRC="04.gif"></TD></TR>
</TABLE>
***Variables para <MARQUEE>:
BEHAVIOR="" --> Define el conportamiento de la marquesina. Al no usar esta
variable, la marquesina irá de derecha a izquierda.
SCROLLDELAY="" -> Controla la velocidad de la marquesina (al desplazarse duh)
BGCOLOR="" --> Sizas, le puedes asignar un color de fondo. ^_^
WIDTH="" --> Le asignas un ancho de pantalla en pÃxeles a la marquesina.
EJEMPLO:
<MARQUEE BEHAVIOR="ALTERNATE" SCROLLDELAY="50" BGCOLOR="black" WIDTH="300">
La propia marquee pulida</MARQUEE>
***Variables para <SCRIPT>:
Hay ke ser bárbaro en exceso para explikar esta etiketa, por eso sólo diré
unas palabritas y ya!
-Los JavaScripts son infinitos, y nadie se los bacila tanto como alguien ke
sabe C++ ...akà te tiro un ejemplito del JavaScript ese ke abre una ventana
de exclamación antes de desplegar la página (bien perratiao ke está!)
<script language="JavaScript">
<!--
alert("A todos me los culeo!");
//-->
</script>
***Variables para <APPLET>:
Como dije kon anterioridad, se usa para bacilar Java, lo kual sugiere usar
archivos .class, ke abundan por ahà listos para ser tumbados y editados,
debes ser extremadamente cuidadoso para no cagarla en una editada al código
fuente de un Java. Si kieres bacilarla como los ke saben y hacer tus propios
.class, tendrás ke aprender Visual J++ o algo asÃ... kule flojera...
***Variables para <FORM>:
Usar formularios a veces es engorroso, por eso es ke hay tanto guestbook
gratuito por ahÃ, por esto es ke yo sólo uso la etiketa <FORM> para hacer
aparecer un botón (y es justo eso lo ke explikaré!) y ke este a su vez, llame
a un JavaScript con el evento OnClick, pilla:
Si primero definimos un JavaScript asÃ:
<script language="JavaScript">
<!--
function mmh() {
alert("Dar placer, partir chicorios y profanar hÃmenes.");
}
//-->
</script>
...y + adelante ponemos un botón asÃ:
<form>
<input type="button"
value="Misión de ^comboy^ en el mundo"
onClick="mmh()">
</form>
...obtendremos entonces un botón ke diga "Misión de ^comboy^ en el mundo"
y al hacerle click una ventana de exclamación dirá "Dar placer, partir
chicorios y profanar hÃmenes." ...fácil, no?
Cabe mencionar ke la etiketa <FORM> es muy extensa y jodona de recordar, si
kieres aprender a usarla, edita algún GuestBook por ahÃ...
***Variables para <FRAMESET>:
Pongamos esto claro: Si kieres usar frames tendrán ke intervenir mÃnimo tres
documentos HTML! El ke lleva la etiketa <FRAMESET> llamará a los otros dos.
Tenemos 3 documentos: frames.htm, 1.htm y 2,htm. frames.htm llamará a los
otros 2, usaremos 1.htm para el frame izquierdo y 2.htm pa´l otro lado.
El código fuente de frames.htm será asÃ:
<html>
<head>
<title></title>
</head>
<frameset cols="23%,77%">
<frame src="1.htm" name="columna1" noresize frameborder="no">
<frame src="2.htm" name="columna2" noresize frameborder="no">
<noframes>
<body>
|----> lo ke pongas akà saldrá en browsers ke no soportan frames!!!
</body>
</noframes>
</frameset>
</html>
NOTAS:
- A cada columna se le da un nombre para aprovechar bien la etiketa <A>
- "Frameborder" se usa para poner, quitar o automatizar los bordes plateados
de los frames, sus valores son "yes" "no" y "auto" respectivamente.
- En este caso, el frame izkierdo okupará el 23% de los pÃxeles verticales
de la pantalla, puedes manejar estas cifras a tu antojo.
- Si en vez de columnas kieres usar franjas, pon "rows" en lugar de "cols"
- No olvides ke puedes meter frames dentro de otros frames.
- Tampoco olvides ke no puedes llamar sólo a dos .htm, sino a VARIOS kon
una sola etiketa <FRAMESET>, sólo tienes ke distribuir el 100% de los
pÃxeles entre los frames ke desees.
- FÃjate en la palabra "noresize" ke agregué en las etiketas. Kuando usas
esta palabra, los frames no podrán ser ajustados al tamaño ke se le
antoje al usuario. Suena algo rosquero, pero la mayorÃa de las veces es
conveniente usarla, pues no afearán tu página al resizarla.
NOTAS GENERALES DEL CAPÃTULO:
***Maneras de ahorrar tiempo
- Modelos prediseñados (Por tÃ)
Recuerda hacer siempre esqueletos de tus diseños y mantenerlos aislados,
de modo ke si tienes ke hacer un HTML de rapidez, sólo tendrás ke editar
uno ke ya esté hecho... trata de ke este modelo no sea ajeno, a fin de
evitar hacer el ridÃculo.
- El popular Cut&Paste (Cortar&Pegar, para kienes usan Güindouz en español)
No hay mucho ke decir... aprender a bacilar el cortar & pegar es
fundamental para el webmaster, sobretodo a la hora de hacer una Tabla...
Incluso, abre un notepad aparte y mantén las etiketas y frases klaves ahÃ.
---------------------------------------
CAPÃTULO 2: "Publicación de la Página"
---------------------------------------
* Dónde?
Bien, ya ke tienes todo listo, piensas mostrarle al mundo tu trabajo, cierto?
Pues bien, tienes dos opciones:
#1- Tirar finura y sacarte todo un dominio para tà solito.
#2- Hacer como el común de la gente y recurrir a una página gratis.
Si eliges la opción #1 te encontrarás con otras 3 opciones:
A- Pagar(puaj!) por el dominio... ya sea en tu ciudad o por ahÃ.
B- Buscar la manera de ke alguien o alguna empresa te lo facilite o permute.
C- Conseguirlo por métodos hackerosos sin ke nadie salga dañado.
(Existe una cuarta opción derivada de la tercera... y esa es hackear el
dominio dañando a alguien... lo cual es muy poco ético... no recomendada)
Si la opción #1 te es inalcanzable, lo + conveniente para tà será una página
gratis de esas ke abundan por ahÃ, tales como:
NOTA: Si tu página tiene material adulto usa
para evitar
dificultades y sinsabores. (xxxhome.com & sexhound.net son otras)
starmedia.com también acepta porno, pero bajo ciertos parámetros.
* Cómo?
Usando el administrador HTML de ese servidor gratis, o en la mayorÃa de los
casos, se te permite usar FTP. No tengo idea de ké programa FTP uses... si no
tienes uno, ya vendrÃa siendo hora de levantarte uno. Si ya tienes tu FTP y
tienes preguntas acerca de él, escrÃbele un emilio a los autores, porke ya
estoy harto y aburrido de ke me vean cara de Technical Support ...
* Por qué?
...porqué qué?
* Para qué?
...eso lo sabes tú...
* Ké hora es?
Si estás trabajando en Notepad, presiona F5 y lo sabrás. ^_^
-----------------------------------------
CAPÃTULO 3 "Manteniendo viva la página"
-----------------------------------------
Ya esto es cuestión de maña, si tu página es una de esas fantasmas en
servidores gratis como los ke mencioné allá arribita, entonces es de esperar
ke hayas leÃdo el Agreement, ya ke si pillan ke lo estás violando dile adiós
a tu página gratis... y si se hizo famosa te sentirás ardido con cojón...asÃ
me pasó kon una página de Hentai ke puse en Tripod hace + de un año... duró
poco más de un mes, pero se llenó en pila y la gente escribÃa con frecuencia
hasta keeee.... "We´re terrible sorry, but your website contains material
that we rather not to host..." o algo asà decÃa el emilio... total, kedé
mamando y la gente se dispersó...
Trata de no pasarte de vivo con el espacio gratis ke te dan, ya ke los Roots
son gente ardida y siempre tienen a alguien encima viéndolos.... si tu page
tendrá material de adultos recuerda usar un server de adultos, yo uso
, las linkeo desde mi dominio y todos contentos... lo mismo
hago kon los MP3z, los tengo todos en Xoom... aunke, kabe mencionar:
En el caso de Xoom, ellos no permiten MP3z en sus servidores, asà ke les
escribà explikando ke NO son música, sino chistes...y de ñapa les dejé un
mensajito a los Roots en ese folder... todo esto te lo comento para ke te
hagas una idea de lo frágil ke es tener espacio gratis..
Otras maneras de mantener la página con vida es poniéndole un Guestbook y un
buen counter... si te sientes muy aguerrido puedes hacértelos tu mismo o
bien, solicitarlos de servidores gratis, tales como
y
Las páginas ke innovan siempre gozan de aceptación.
También son bacanas las páginas ke te ponen en suspenso con concursos y
vainas asÃ... la imaginación es infinita.
-------------------------------------------------
CAPÃTULO 4 "Cómo ampliar conocimientos de HTML"
-------------------------------------------------
No hay mucho que decir acerca de cómo ganar + conocimientos... siempre ke te
enkuentres kon un sitio bien pulido y pretendas mansalviarte su código fuente,
HAZLO! y estúdialo a fondo, asà mantendrás tus conocimientos activos, y ten
presente esto: Entre más bases tengas, más fácil entran nuevos conocimientos.
^CoMbOy^
El C@rtel.
(Este documento está enfocado a webmasters amateruchos o a gente ke kiera
aprender HTML. Una vez ke alguien se perratee lo ke hay expuesto akÃ, estará
en capacidad de asimilar mi documento "El antiguo arte de robar HTML"
Lo ke enseño en este documento es con fines puramente educativos, no me
responsabilizo de nada en absoluto ke pueda hacer alguien kon esta
información. Distribúyase libremente. [Kon mi nick, claro! Be fair]) v1.1
===================================
CURSO BÃSICO DE HTML PA´ PELAOS
===================================
Por ^CoMboY^
INTRODUCCIÓN:
...sabes ké fué lo ke me impulsó a aprender HTML? El ver ke pelaÃtos de
15 años tenÃan sus propias páginas...hechas kon FrontPage, pero las tenÃan!
Fue entonces kuando komencé a buskar fuentes de información, hasta dar kon
un libro...no rekuerdo su nombre, pero el 1er capÃtulo sirvió para ke esa
misma noche mi primera página kedara montada en Geocities...kon esto kiero
expresar ke aprender HTML no es algo ke deba escandalizaros, es fácil y a
medida ke se adkiere experiencia es + fácil ke entren nuevos conocimientos.
Crear HTML divierte y da satisfacción. Comencemos entonces! ^_^
--------------------------------------------------------------
Novedades en versión 1.1:
-Implementada la etiqueta <FRAMESET>
-Breves datos sobre encriptación
---------------------------------------------------------------
CONTENIDOS
----------
CAPÃTULO 1 "Cómo funciona esta jugada?"
* Las Etiquetas
- Etiquetas básicas o inmondables
- Etiquetas avanzadas
- Etiquetas pa´l perreo
- Las variables, hablemos de las variables...
* Maneras de ahorrar tiempo
- Modelos prediseñados (Por tÃ)
- El popular Cut&Paste
CAPÃTULO 2 "Publicación de la página"
* Cómo y donde?
* Por qué?
* Para qué?
* Ké hora es?
CAPÃTULO 3 "Manteniendo viva la página"
* Parámetros legales
- Leerse todo el Agreement
- Buscar la manera de no cagarla
* Contadores, Guestbooks y algunos trukitos
- Hacer algo para asegurarse de ke la gente regrese
CAPÃTULO 4 "Cómo ampliar conocimientos de HTML"
* Se acabó este kule curso fantasma!
- Unos últimos konsejitos
- Palabras de nuestro servidor(T3) ^VM^
-----------------
ANTES DE EMPEZAR:
-----------------
Siempre ke kieras hacer un HTML abre tu Microsoft Notepad y...sÃ, ombe, sÃ,
el Bloc de Notas! ...lo abres, haces tu página y lo guardas kon extensión
.htm, luego puedes editarlos (Yo le agregué a la shell de los HTML la lÃnea
"Perrear" en Opciones de Carpeta, se abre con Notepad) y guardarlos, si te
acostumbras a usar tu Notepad serás un webmaster pulido & poderoso.
Requisitos: Saber un poco de Inglés y bacilar Notepad...
-----------------------------------------
CAPÃTULO 1: "Cómo funciona esta jugada?"
-----------------------------------------
Bueno, esta gaver es a punta de ETIQUETAS, ké son? (requesón), las etiketas
son al HTML lo ke las palabras son a un idioma, y siempre van entre < y >
y para cerrarlas el formato es </>, EJEMPLO:
La etiqueta <ElGüevo> termina con la etiqueta </ElGüevo> si pillas?
Cabe mencionar ke la mayorÃa de estas etiketas usan variables, más abajo
trataremos algunas.
- Etiketas básicas o inmondables:
<HTML> </HTML> Akà va todo...asà de simple.
<HEAD> </HEAD> Van los JavaScripts y la etiketa <TITLE>
<TITLE> </TITLE>Va el tÃtulo de la page (El de la eskina superior izkierda)
<BODY> </BODY> Todo lo ke pongas akà dentro es lo ke aparece en el browser,
como su nombre lo dice, es el Cuerpo del HTML.
<FONT> </FONT> Sus variables son las responsables del tipo de letra.
<BR> (no se cierra) Siempre ke la pongas habrá un salto de lÃnea.
<A> </A> Sirve para hacer links. Ya sean internos o externos.
<IMG> (no se cierra) Para insertar una imagen. (GIF ó JPG)
<P> </P> ...un párrafo... NUNCA LA USO!
<CENTER></CENTER> Todo lo ke metas aquà irá centrado...asà de simple...
(hay una etiketa toda fantasma por ahÃ, es la "H" de "Header" y se usa
desde la +pekeña <H1></H1> hasta <H7></H7>, creo! Tampoco la uso...)
- Etiketas Avanzadas y/o pa´l perreo:
<BGSOUND> (no se cierra) Pone un sonido de fondo. (WAV ó MIDI)
<EMBED> (no se cierra) Incrusta multimedia (AVI, WAV, MIDI, RA, etc)
<HR> (no se cierra) Una cochina lÃnea... ya!
<TABLE> </TABLE> Esta es importante, una tabla te organiza la page bien ^_^!
<FRAMESET> </FRAMESET> los pupulares FRAMES.
<FORM> </FORM> Incrusta formularios en la página.
<MARQUEE> </MARQUEE> Las populares marquesinas.
<SCRIPT> </SCRIPT> Los inmortales JavaScripts.
<APPLET> </APPLET> Adivinas? JAVA!
Estas son todas las etiketas ke rekuerdo, ahora veamos el uso de éstas:
Todo documento HTML tiene el siguiente esqueleto:
<HTML>
<HEAD>
<TITLE> El tÃtulo </TITLE>
</HEAD>
<BODY>
El contenido
</BODY>
</HTML>
Te sugiero hacer un documentico ke siempre kontenga este eskeleto pa´ke
ahorres tiempo. Bien, comenzemos lo de las variables:
(Ojo! Estoy explicando las variables ke konozko, existen muchas +)
LAS VARIABLES:
==============
***Variables para <BODY>:
BGCOLOR="" --> Entre los " " pones el color de fondo ke llevará la página,
puedes llamar al color por su ´valor RGB, su código
hexagecimal, pero kienes no se complican ponen el nombre del
color en inglés y ya! Si en vez de color kieres usar una
imagen, usa la variable BACKGROUND.
BACKGROUND="" -->Entre los " " pones la ruta completa (o sólo el nombre, en
caso de ke esté en el mismo directorio) de la imagen ke
usarás como fondo para tu página. Rekuerda ke mientras se
descarga la imagen, el browser mostrará el color de fondo.
BGPROPERTIES="" -> Esta a su vez, tiene sus variables, yo sólo le conozco la
de "fixed", ke sirve para ke la imagen de background no
se mueva al desplazarte por la página.
LINK, VLINK & ALINK -> Estas 3 variables determinan: el color de los linkz,
color de un link visitado, y color de un link
clickeado, respectivamente. Ponles el ="color" a c/u.
EJEMPLO:
<BODY BGCOLOR="black" BACKGROUND="careverga.jpg" BGPROPERTIES="FIXED"
LINK="yellow" VLINK="orange" ALINK="darkgoldenrod">
***Variables para <FONT>:
FACE="" --> Le pones el nombre de la True Type Font ke usarás, debes
tener en cuenta ke si alguien ke no tenga esa fuente instalada
ve tu página, le aparecerá en fuente predeterminada.
COLOR="" -> ...no creo ke tenga ke explikar esta variable, o sÃ?
SIZE="" --> El tamaño de la fuente, de 1 a 7, donde 7 es el mayor.
EJEMPLO:
<FONT FACE="Comic Sans MS" Color="white" SIZE="5"> Blah, blah, blah!</FONT>
***Variables para <IMG>:
SOURCE="" --> La ruta completa de la imagen (gif ó jpg) ke usarás.
ALT="" --> Lo que escribas entre los " " será un Tooltip para la imagen.
WIDTH & HEIGHT -> Especifica el ancho y alto en pÃxeles de la imagen.
(úsala solo en casos necesarios)
BORDER="" -> El borde de la imagen se notará kon un ridÃculo marco cuando la
uses como link, usa siempre como valor CERO!
ALIGN="" --> Alineará la imagen con un texto, sus subvariables son
TOP, BOTTOM, LEFT, CENTER y RIGHT.
EJEMPLO:
<IMG SRC="comboy.gif" alt="Jejeje..." WIDTH="377" HEIGHT="78" BORDER="0">
***Variables para <A>:
HREF="" --> La ruta completa del destino, ya sea otro htm, imagen, etc.
TARGET="" -> Se usa generalmente dentro de los frames, sirve para indicar
donde se desplegará el link, si en otra ventana o en el otro
lado del frame. Si no lo usas, se despliega en esa misma ventana
NAME="" --> Le da un nombre al link. Muy útil para los JavaScripts y para
hacer links internos.
EJEMPLOS:
<A HREF="http://www.comboy.com" TARGET="NEW" NAME="DTCOM">
Haz Click akà para darle #$%@ a ^comboy^! </A>
<A HREF=mailto:webmaster@comboy.com>EscrÃbanme!</A> --> Mandar correo! ^_^
<A HREF="links.htm"><IMG SRC="lk.gif" alt="Página de Linkz!"></A>
***Variables para <BGSOUND>:
(Esta etiqueta la puedes ubicar en cualquier parte del código, acostumbro
ponerla debajo de <BODY>)
LOOP="" -> Puedes poner el # de vueltas deseadas, o sencillamente "infinite"
SRC="" --> La ruta completa del MIDI o WAV ke usarás de música de fondo. Si
vas a usar un WAV procura ke sea pequeño en peso.
EJEMPLO:
<BGSOUND SRC="elguevo.mid" LOOP="INFINITE">
***Variables para <EMBED>:
SRC="" --> La ruta completa del MIDI, WAV, AVI, MPG, VIV, RM, RA, ASF, etc
ke vayas a incrustar...sobra decir ke debes cuidarte de usar
archivos de tamaño exagerado.
AUTOPLAY="" -> Puede ser TRUE ó FALSE, si lo dejas en TRUE, el objeto
incrustado iniciará por sà solo al descargar completamente.
LOOP="" -> Puedes poner el # de vueltas deseadas, o sencillamente "infinite"
EJEMPLO:
<EMBED SRC="perrera.wav" AUTOPLAY="true" LOOP="0">
***Variables para <HR>:
WIDTH & HEIGHT -> Especifica el ancho y alto en pÃxeles de la lÃnea...o si
no quieres komplicarte, usa valores en % de acuerdo a la
resolución de pantalla.
NOSHADE --> Ni idea, pero las hace ver un poco diferentes...
ALIGN="" --> Ya te imaginarás
EJEMPLO:
<HR WIDTH="75%" ALIGN="CENTER" NOSHADE>
***Variables y SubEtiquetas para table para <TABLE>:
Esta etiqueta contiene a las etiquetas <TR> y <TD>, serán explicadas luego.
BORDER="" -> El borde del marco de la tabla. Si usas 0 (Le chupas la mondá
al mesero) la tabla no presentará marco alguno.
CELLPADDING Y -> Controlan el relleno de las celdas y el espacio entre ellas.
CELLSPACING Si vas a armar una imagen kon varios gifs usa 0.
*** Las etiketas <TR> & <TD> kon sus variables:
Donde va <TR> comenzará una fila, y terminará en </TR>. Si dentro de <TR>
pones <TD> agregarás Columnas, y a las etiquetas <TD> les puedes aplicar
las variables BGCOLOR, WIDTH, HEIGHT, etc. Ké tal?
EJEMPLO:
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0">
<TR><TD><IMG SRC="01.gif"></TD><IMG SRC="02.gif"></TD></TR>
<TR><TD><IMG SRC="03.gif"></TD><IMG SRC="04.gif"></TD></TR>
</TABLE>
***Variables para <MARQUEE>:
BEHAVIOR="" --> Define el conportamiento de la marquesina. Al no usar esta
variable, la marquesina irá de derecha a izquierda.
SCROLLDELAY="" -> Controla la velocidad de la marquesina (al desplazarse duh)
BGCOLOR="" --> Sizas, le puedes asignar un color de fondo. ^_^
WIDTH="" --> Le asignas un ancho de pantalla en pÃxeles a la marquesina.
EJEMPLO:
<MARQUEE BEHAVIOR="ALTERNATE" SCROLLDELAY="50" BGCOLOR="black" WIDTH="300">
La propia marquee pulida</MARQUEE>
***Variables para <SCRIPT>:
Hay ke ser bárbaro en exceso para explikar esta etiketa, por eso sólo diré
unas palabritas y ya!
-Los JavaScripts son infinitos, y nadie se los bacila tanto como alguien ke
sabe C++ ...akà te tiro un ejemplito del JavaScript ese ke abre una ventana
de exclamación antes de desplegar la página (bien perratiao ke está!)
<script language="JavaScript">
<!--
alert("A todos me los culeo!");
//-->
</script>
***Variables para <APPLET>:
Como dije kon anterioridad, se usa para bacilar Java, lo kual sugiere usar
archivos .class, ke abundan por ahà listos para ser tumbados y editados,
debes ser extremadamente cuidadoso para no cagarla en una editada al código
fuente de un Java. Si kieres bacilarla como los ke saben y hacer tus propios
.class, tendrás ke aprender Visual J++ o algo asÃ... kule flojera...
***Variables para <FORM>:
Usar formularios a veces es engorroso, por eso es ke hay tanto guestbook
gratuito por ahÃ, por esto es ke yo sólo uso la etiketa <FORM> para hacer
aparecer un botón (y es justo eso lo ke explikaré!) y ke este a su vez, llame
a un JavaScript con el evento OnClick, pilla:
Si primero definimos un JavaScript asÃ:
<script language="JavaScript">
<!--
function mmh() {
alert("Dar placer, partir chicorios y profanar hÃmenes.");
}
//-->
</script>
...y + adelante ponemos un botón asÃ:
<form>
<input type="button"
value="Misión de ^comboy^ en el mundo"
onClick="mmh()">
</form>
...obtendremos entonces un botón ke diga "Misión de ^comboy^ en el mundo"
y al hacerle click una ventana de exclamación dirá "Dar placer, partir
chicorios y profanar hÃmenes." ...fácil, no?
Cabe mencionar ke la etiketa <FORM> es muy extensa y jodona de recordar, si
kieres aprender a usarla, edita algún GuestBook por ahÃ...
***Variables para <FRAMESET>:
Pongamos esto claro: Si kieres usar frames tendrán ke intervenir mÃnimo tres
documentos HTML! El ke lleva la etiketa <FRAMESET> llamará a los otros dos.
Tenemos 3 documentos: frames.htm, 1.htm y 2,htm. frames.htm llamará a los
otros 2, usaremos 1.htm para el frame izquierdo y 2.htm pa´l otro lado.
El código fuente de frames.htm será asÃ:
<html>
<head>
<title></title>
</head>
<frameset cols="23%,77%">
<frame src="1.htm" name="columna1" noresize frameborder="no">
<frame src="2.htm" name="columna2" noresize frameborder="no">
<noframes>
<body>
|----> lo ke pongas akà saldrá en browsers ke no soportan frames!!!
</body>
</noframes>
</frameset>
</html>
NOTAS:
- A cada columna se le da un nombre para aprovechar bien la etiketa <A>
- "Frameborder" se usa para poner, quitar o automatizar los bordes plateados
de los frames, sus valores son "yes" "no" y "auto" respectivamente.
- En este caso, el frame izkierdo okupará el 23% de los pÃxeles verticales
de la pantalla, puedes manejar estas cifras a tu antojo.
- Si en vez de columnas kieres usar franjas, pon "rows" en lugar de "cols"
- No olvides ke puedes meter frames dentro de otros frames.
- Tampoco olvides ke no puedes llamar sólo a dos .htm, sino a VARIOS kon
una sola etiketa <FRAMESET>, sólo tienes ke distribuir el 100% de los
pÃxeles entre los frames ke desees.
- FÃjate en la palabra "noresize" ke agregué en las etiketas. Kuando usas
esta palabra, los frames no podrán ser ajustados al tamaño ke se le
antoje al usuario. Suena algo rosquero, pero la mayorÃa de las veces es
conveniente usarla, pues no afearán tu página al resizarla.
NOTAS GENERALES DEL CAPÃTULO:
***Maneras de ahorrar tiempo
- Modelos prediseñados (Por tÃ)
Recuerda hacer siempre esqueletos de tus diseños y mantenerlos aislados,
de modo ke si tienes ke hacer un HTML de rapidez, sólo tendrás ke editar
uno ke ya esté hecho... trata de ke este modelo no sea ajeno, a fin de
evitar hacer el ridÃculo.
- El popular Cut&Paste (Cortar&Pegar, para kienes usan Güindouz en español)
No hay mucho ke decir... aprender a bacilar el cortar & pegar es
fundamental para el webmaster, sobretodo a la hora de hacer una Tabla...
Incluso, abre un notepad aparte y mantén las etiketas y frases klaves ahÃ.
---------------------------------------
CAPÃTULO 2: "Publicación de la Página"
---------------------------------------
* Dónde?
Bien, ya ke tienes todo listo, piensas mostrarle al mundo tu trabajo, cierto?
Pues bien, tienes dos opciones:
#1- Tirar finura y sacarte todo un dominio para tà solito.
#2- Hacer como el común de la gente y recurrir a una página gratis.
Si eliges la opción #1 te encontrarás con otras 3 opciones:
A- Pagar(puaj!) por el dominio... ya sea en tu ciudad o por ahÃ.
B- Buscar la manera de ke alguien o alguna empresa te lo facilite o permute.
C- Conseguirlo por métodos hackerosos sin ke nadie salga dañado.
(Existe una cuarta opción derivada de la tercera... y esa es hackear el
dominio dañando a alguien... lo cual es muy poco ético... no recomendada)
Si la opción #1 te es inalcanzable, lo + conveniente para tà será una página
gratis de esas ke abundan por ahÃ, tales como:
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
NOTA: Si tu página tiene material adulto usa
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
dificultades y sinsabores. (xxxhome.com & sexhound.net son otras)
starmedia.com también acepta porno, pero bajo ciertos parámetros.
* Cómo?
Usando el administrador HTML de ese servidor gratis, o en la mayorÃa de los
casos, se te permite usar FTP. No tengo idea de ké programa FTP uses... si no
tienes uno, ya vendrÃa siendo hora de levantarte uno. Si ya tienes tu FTP y
tienes preguntas acerca de él, escrÃbele un emilio a los autores, porke ya
estoy harto y aburrido de ke me vean cara de Technical Support ...
* Por qué?
...porqué qué?
* Para qué?
...eso lo sabes tú...
* Ké hora es?
Si estás trabajando en Notepad, presiona F5 y lo sabrás. ^_^
-----------------------------------------
CAPÃTULO 3 "Manteniendo viva la página"
-----------------------------------------
Ya esto es cuestión de maña, si tu página es una de esas fantasmas en
servidores gratis como los ke mencioné allá arribita, entonces es de esperar
ke hayas leÃdo el Agreement, ya ke si pillan ke lo estás violando dile adiós
a tu página gratis... y si se hizo famosa te sentirás ardido con cojón...asÃ
me pasó kon una página de Hentai ke puse en Tripod hace + de un año... duró
poco más de un mes, pero se llenó en pila y la gente escribÃa con frecuencia
hasta keeee.... "We´re terrible sorry, but your website contains material
that we rather not to host..." o algo asà decÃa el emilio... total, kedé
mamando y la gente se dispersó...
Trata de no pasarte de vivo con el espacio gratis ke te dan, ya ke los Roots
son gente ardida y siempre tienen a alguien encima viéndolos.... si tu page
tendrá material de adultos recuerda usar un server de adultos, yo uso
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
hago kon los MP3z, los tengo todos en Xoom... aunke, kabe mencionar:
En el caso de Xoom, ellos no permiten MP3z en sus servidores, asà ke les
escribà explikando ke NO son música, sino chistes...y de ñapa les dejé un
mensajito a los Roots en ese folder... todo esto te lo comento para ke te
hagas una idea de lo frágil ke es tener espacio gratis..
Otras maneras de mantener la página con vida es poniéndole un Guestbook y un
buen counter... si te sientes muy aguerrido puedes hacértelos tu mismo o
bien, solicitarlos de servidores gratis, tales como
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
| Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo. |
Las páginas ke innovan siempre gozan de aceptación.
También son bacanas las páginas ke te ponen en suspenso con concursos y
vainas asÃ... la imaginación es infinita.
-------------------------------------------------
CAPÃTULO 4 "Cómo ampliar conocimientos de HTML"
-------------------------------------------------
No hay mucho que decir acerca de cómo ganar + conocimientos... siempre ke te
enkuentres kon un sitio bien pulido y pretendas mansalviarte su código fuente,
HAZLO! y estúdialo a fondo, asà mantendrás tus conocimientos activos, y ten
presente esto: Entre más bases tengas, más fácil entran nuevos conocimientos.
^CoMbOy^
El C@rtel.