HTML Basico - Versión para impresión

HTML Basico - Versión para impresión

+- :: Foros de ALIPSO.COM :: (https://www.alipso.com/foros)
+-- Foro: Informatica (https://www.alipso.com/foros/forum-2.html)
+--- Foro: Diseño de paginas web (https://www.alipso.com/foros/forum-16.html)
+--- Tema: HTML Basico (/thread-4422.html)

HTML Basico - ^C0MB0Y^ - 03-17-2004

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

</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">

</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.

NOTA: Si tu página tiene material adulto usa

Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo.

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

Imagen o Link ocultado. Tenés que registrarte o loguearte para verlo.

, 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

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.

creo... - black - 07-23-2004

pero es chimbo estar clonando paginas tal ves una que otra cosita que te guste quitarla pero toda una web ...naaaa eso no creo que valla con un buen diseñador asi sean sus primeros pasos ...de hay quedaran varias enseñanzas buenas de html y java script...de esa manera pueden practicar mas no copiarc y subirla a la web ...........