guia html desde 0

sorcerer · 28 Octubre 2004, 01:02 AM

se las mostre a varios amigos y me dijieron que estaba buena aca se las dejo presten atencion a lo k es un comentario y lo k es un codigo.

Giua html

By Sorcerer

Indice

0 - Que Es Html
1 - Un poco de esta guia
|_ 1.2 Cosas vasicas que hay que tener para leer esta guia
3 - Lo + basico
4 - Como empiezo un documento(doc) html
|_ 4.1 Configurar el <body>
5 - Crear tablas
|_ 5.1 Configurar el <table>
|_ 5.2 configurar el <td>
6 - otras etiquetas

0 Que es html?
el html es el lenguaje mas simple y mas usado para hacer paginas web.

1 Un poco sobre esta guia
esta guia la hice porque no me banco ninguna guia que encontre en internet
empiesan a dar vueltas sobre boludeses cuando lo unico que queres hacer es
poder usar html en 20 mins bue yo te digo esta guia dura 20 mins pero que te
entre en la cabeza eso no es mi problema esta guia no te viene a explicar el
porque de cada cosa sino el como para hacer una page notable con todo pero
no te vas a hacer un profesional. bue no me gusta el bla bla asi que a empezar.

1.2 Cosas basicas que hay que tener para leer esta guia
-un rato tranki sin que te jodan
-ganas de aprender
-CABEZA no ser un robot y pensar las cosas no hacerlas y listo
-ENTENDER lo k estas haciendo sino vas a vivir mirando esta guia
para fijarse como se hace una tabla

3 Lo + basico
html esta hecho con etiquetas que le dicen al explorador lo que queres.
esas etiquetas van adentro de estos signos <>, por ejemplo si le queremos decir
al explorador que empezamos el doc html escribimos <html> entonces el explorador
sabe que tiene que empezar el doc html. las palabras adentro de estos signos no se
muestran en el explorador ya que son las etiquitas. la mayoria de las etiquetas tienen
un comienzo y un final por ejemplo si le queremos decir al explorador que terminamos
el doc html le escribimos </html> ese / es el signo que terminamos de usar la etiqueta.
los documentos html se pueden hacer en el notepad de windows o en algun editor
de html como el dreamwaver, frontpage, namo, ...
tambien la primer pagina de tu page a donde entran los visitantes primero se tiene que
llamar index.htm o index.html como kieras

nota: ahora no lo vas a entender pero mas adelante te va a servir: digamos que tenes la pagina un una carpeta llamada:
"page" y queres poner una foto o audio que se llama pepe.jpg que esta en una carpeta llamada "fotos" que esta adentro
de la carpeta "page" entonces la direccion es "fotos/pepe.jpg"

4 como empiezo un doc html
eso es facil solamente le tenemos que decir al explorador lo que queremos
claro que todo tiene un horden y aca se los voy a mostrar mas claro
abramos el notepad el windows. y escriban esto (lo que esta en rojo son explicasiones)

<html>(empesamos el doc html)
<head>(empesamos el encabesado del doc)
<title>(empesamos el titulo que va en la barra asul de arriva)el titulo</title>(terminamos el titulo)
</head>(terminamos el encabesado)
<body>(empesamos el cuerpo del doc)
algun texto(entre el <body> y el </body> va el cuerpo o contenido del documento html)
</body>(terminamos el cuerpo del doc)
</html>( terminamos el doc)

*nota: si escribis algo adentro de los <> no va a salir y site equivocas en alguna etiqueta tampoco

guarda el doc en donde quieras con el nombre prueba.htm no te olvides el htm

4.1 Configurar el <body>
como ya abran visto si hicieron bien todo asta ahora les y si abren el doc prueba.html
les va a salir una pantalla blanca que dice "algun texto" (salvo que lo allan cambiado).
pero... no todas las paginas son iguales con fondo blanco y letras negras y links asules.
entonces para cambiar esas cosas tenemos que escribir esto:
<body el atributo='el tipo'>
Atibutos:
bground: fondo
text: color del texto
link: color del link
y hay mas pero esto es lo basico.
colores:
se imaginaran que no pones text='rojo' y tenes el texto

#000000 negro
#ffffff blanco
#ff0000 rojo
#00ff00 verde
#0000ff azul

osea si ponemos <body text='#0000ff'> tendriamos un doc con letras azules.

5 Crear Tablas
para que hacer una tabla? bueno porque todos los sitios casi estan echos con tablas
simple.
la etiqueta para hacer una tabla es <table></table> las etiquetas para hacer lineas "rows" son <tr></tr>
y para hacer columnas son <td></td>
y van en ese orden parece complicado pero miremos el ejemplo:
Habramos el notepad y hagamos una tabla

<table>
<tr>
<td>1</td>
</tr>
</table>

les salio el 1 solo sin nada y logico porque hay que con figurar la etiqueta de <table> para que tenga borde
entonces adentro de <table> escriban border='1' ej:<table border='1'> (tambien se puede 2,3 depende del
borde que quieras)
les salio un uno adentro de un cuadrado blanco no? si no les salio vuelvan a fijarse en que se equivocaron.
bueno ahora que ya tenemos un cuadrado vamos a hacer 2 uno abajo del otro

<table border='1'>(empesamos la tabla con el borde)
<tr>(empesamos una linea nueva)
<td>(empesamos una nueva columna)1</td>(terminamos la columna)
<tr/>(terminamos la linea)
<tr>(empesamos otra linea)
<td>(empesamos otra columna)2</td>(terminamos la columna)
</tr>(terminamos la linea)
</table>(terminamos la tabla)

ahora aganlo en el notepad y guardenlo como tabla.htm si no les salio haganlo de nuevo asta que se den cuenta que estaba mal

ahora una tabla con un numero alado del otro:

<table border='1'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

bueno espero que lo hayan captado porque me pudri.

5.1 Configurar el <table>

atributos:
border: el ancho del borde (1,2,3)
bgcolor: el color de fondo de la tabla( arriva estan escritos los colores)
bordercolor: el color del borde (los colores estan escritos arriva)

Ejemplo: <table border='2' bgcolor='00ff00'> te va a salir una tabla de
fodo verde con un borde bastante ancho.

Estos son los basicos

5.2 Configurar el <td>

si, a cada linea le podes poner su color de fondo y el color de su borde

bgcolor: el color de fondo de la tabla( arriva estan escritos los colores)
bordercolor: el color del borde (los colores estan escritos arriva)

Ejemplo: <td bgcolor='000000'> el fondo de esa linea te va a salir negro.

6 otras etiqutas

estas etuquetas que les voy a dar ahora sirven para adentro del body
y adentro de tablas.

<font>(esta etiketa sirve para cambiar el tipo/color/tamaño de la fuente)</font>
atributos del font:
color: cambia el color de la fuente adentro de las etiquetas
size: " el tamaño de la fuente " de las "
style: " el tipo de la " " de las "

Ej: <font color='00ff00'>hola</font> como estas va a salir algo asi: hola como estas.

<embed src="aca va la direccion del archivo de internet o de tu compu" quality="aca va a que calidad lo kerer ve low o high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>(esta etiquita es para pones animaciones/botones/cosas hechas en flash que terminen con .swf

<img src='la direccion de la imagen'>para poner imagenes que terminen en: .gif .jpg .jpeg .png

<OBJECT CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
   CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
   standby="Loading Microsoft Windows Media Player components..."
   type="application/x-oleobject">
   <PARAM NAME="FileName" VALUE="aca pones la direccion del video/audio">
   <PARAM NAME="AutoStart" VALUE="True">
   <PARAM NAME="ShowStatusBar" VALUE="True">
   <PARAM NAME="ShowGotoBar" VALUE="False">
   <PARAM NAME="TransparentAtStart" VALUE="True">
<PARAM NAME="AutoSize" VALUE="True">
   <EMBED type="application/x-mplayer2"
      pluginspage = "http://www.microsoft.com/windows/windowsmedia/en/Download/default.asp?tcode=9#location2"
      src="la direccion del video audio"
AutoStart=True
      ShowStatusBar=True
      ShowGotoBar=False
      TransparentAtStart=true>
     </EMBED>
</OBJECT>
no te asustes esto es para poner un video wmv o sonido wma tambien para reproducir radios y canales de tele que esten on line lo que no te digo no lo tokes!!

bueno espero que les sirva esto es todo el que copie esta guia deje mi nick y mi page si no sos un lammer hijo de tu reputa madre
y te juro por mi vieja que si veo esta guia en tu pagina sin mi nick te hago pelota la pagina! y no es una amenasa y no me gusta hablar de mas.

Test Foro de elhacker.net SMF 2.1

guia html desde 0

sorcerer