Manual html

limo · 01-dic-2006, 09:24

Este lenguage es muy facil de aprender, lo primero que hay que remarcar seria:

HTML: Lenguaje para marcado de hipertexto [ya traducido]
Donde lo vamos a ejecutar???: pues para empesar este lenguage no nesesita de compilador, lo unico que hay que hacer es abrir el bloc de notas [notepad.exe] y ahi es donde vamos a ingresar todo el codigo.
Como lo vamos a guardar???: es muy sencillo lo unico que vamos a hacer es dirigirnos a la pestaña de Archivo se despliega el menu y ahi le damos en guardar como... y lo guardamos con el nombre que quieras pero con una extencion .html.

Estructura de una etiqueta
Cada etiqueta comiensa por un signo de menor que [<] y termina con un signo de mayor que [>], con esto estamos declarando que empiesa la funcion de Una etiqueta y para terminar la funcion de la etiqueta basta con poner una diagonal despues del signo de menor que [<] osea que masomenos quedaria algo asi:

<abreetiqueta>aplicacion de la etiqueta</cierraetiqueta>
Nota: no todas las etiquetas tendran que cerrarse.
Enseguida explicare la funcion de la mayoria de las etiquetas en HTML.

Etiquetas
<html>Todo el documento</html>: Esta etiqueta sirve para explicar que se trata de un documento de html o tiene contenido html comunmente esta etiqueta va al principio y se cierra al final de el documento.
<head>...&/head>: Aqui pondras todos los encabezados del documento, alguno de ellos son:

<title>titulo del documento</title>: le asignas un nombre al la ventana por ejemplo fijate en la berra de hasta arriva de tu navegador ahi es donde va la funcion del title le vas a poner un nombre.
<meta http-Equiv="description" Content="aqui la descripcion de tu web"> : Esta etiqueta sirve para que tu web aparesca el los buscadores en esta web tengo un creador de estas etiquetas por que me faltan mas por descrivir. Esta es una de esas etiquetas que no se cierran. Entra por aqui para crear tus meta tags

Nota: hasta aqui cerrariamos el head.
<body atributo1="..." y mas atributos>todo el documento<body>: esta etiqueta al igual que la de html se cerrara antes de cerrar la de html osea igualñ ira enserrando todo el documento, esta etiqueta contiene el cuerpo del documento es por eso mismo que se cierra hasta el final.
[Te preguntaras que es eso de atributo1="..." pues son algunas funciones a esa etiqueta que tu le daras a tu gusto]
alguno de esos atributos son:

bgcolor="...": este atributo sirve para darle de color de fondo al documento, algunnos colores son: Amarillo: FFFF00
Negro: 000000
Rojo: FF0000
Verde: 00FF00
Azul: 0000FF
Blanco: FFFFFF
Gris: 888888 ...y muchos mas

background="src=ubicacion/imagen.gif": Con este atributo pondremos una imagen de fondo en la pagina, especificando la direccion de la imagen por ejemplo:

background="carpeta/imagen/fondo.jpg"
Nota: la extencion puede cambiar puede ser .gif o .jpg
bgproperties="fixed": fija la imagen de fondo para que no se desplace
link: especifica el color de todas las direcciones en el documento
alink: Especifica el color de las direcciones al darle el clic.
vlink: especifica el color de las direcciones ya visitadas
text: especifica el color del texto en la pagina

Textos
<basefont atributo1="..." ...>: fija la forma de escritura de la pagina, esta tampoco se sierra pues especifica como va a ser la fuente el tamaño y el color de la pagina.
Los atributos de la etiqueta son:

color="...": espesifica el color del texto en el documento
size="...": especifica el tamaño del texto de la web los valores son desde el 1 hasta el 7 donde el 3 es el que biene por defecto, tambien permite tamaños relatibos por ejemplo size="+2".
name="...": especifica el tipo de fuente [tipo de letra] de todo el texto en la web<h...>texto</h...>: el texto encerrado en esta etiqueta se convierte en un encabezado, los valores que pueden ir alado de la h es desde el 1 hasta el 6 donde 1 es la opcion de letra mas grande y el 6 la mas chica
<b>texto</b>: el texto enserrado aparecera en negrillas
<big>texto</big>: el texto encerrado es aumentado de tamaño
<blink>textos</blink>: el textos encerrado es parpadeante
<blockquote>...</blockquote>: encierra un enfacis [osease que se crea un espacio de lado derecho y de lado izquierdo de la pagina je =P]
<br>crea un fin del renglon y se pasa al siguiente
<center>texto tabla lo que sea</center>: centra todo lo que este encerrado en el center[tablas, imagenes, etc etc...]
<code>texto</code>: encierra un codigo de ejemplo, el texto sera mostrado con letras mas pequeñas
<dfn>textos</dfn>:Encierra una definicion

<font atributo1=".." ...>texto</font>: El texto enserrado entre esta etiqueta sera cambiado dependiendo de los atrinutos que le pongas, los atributos son:

size="2": fija el tamaño del texto del 1 al 7 donde el 1 es el valor mas grande
color="...": especifica el color del texto
face="...": especifica el tipo de letra se puede crear una lista separando las fuentes por comas [arial, verdana, etc...]<hr atributo1="..." ...>: coloca una linea orizontal, los atributos son:

size="...": especifica el grosor de la linea
color="...": da color a la linea
width="...": fija el ancho de la linea, puedes utilizar % por ejemplo width="80%"<em>texto</em>: el texto enserrado se muestra en cursivas
<div align="...">texto</div>: espesifica el alineamiento de todo objeto en ella los valores del align son:
center: centra el contenido del div
left: el objeto es alineado a la izquierda
right: el contenido se muestra a la derecha<p align="...">texto</p>: el texto en el se convierte en parrafo, el cierre es opcional, los valores del atributo son center left o right
<s>texto</s>: el texto enserrado es mostrado con una linea en el centro [tachado]
<small>texto</small>: el texto es mostrado pequeño
<strong>texto</strong>: muestra el texto en negrillas, resaltado.
<tt>texto</tt>: el texto se muestra en formato teletipe.
<u>texto</u>: el texto se mutra subrrallado.

limo · 01-dic-2006, 09:26

Manual de HTML parte 2

En esta ocacion explicare como colocar imagenes, audio y las animaciones en flash.
Imagenes
Empesemos con las imagenes, ya que es de los mas cencillo para indicar que bamos a poner una imagen tendriamos que colcar esta etiqueta <img> la cual no hay la nesesidad de cerrarla, expliquemos los atriburos:

src="ubicacion.extencion": Aqui colocaremos la ubicacion de la imagen colocando la extencion de la imagen al finar [.gif .jpg .png etc..]
alt="texto": Con este podremos colocar un texto que mostrara el navegador despues de tener el cursor un momento sobre la imagen lo pueden notar en la imagen que esta al principio del texto, les recomiendo mejor que sustituyan ese atributo por el title="texto" pues la funcion de alt tan solo funciona sobre el internet explorer y el title funciona con internet explorer y firefox [por lo menos].
width="ancho" height="altura": Especifica el ancho y el alto de la imagen si no son colocados estos atributos la imagen tomara su tamaño natural si a la imagen se le colocan otras medidas que no le corresponden la imagen sera deformada, el numero que le coloque seran medidas a pixeles no centimetros al igual le puedes colocar %
border="borde": Asigna un borde a la imagen la medida del vorde es colocada en pixeles.
lowsrc="ubicacion.gif": Especifica la Direecion de la imagen que se cargara primero antes de que la imagen sea cargada. lowsrc usualmente se refiere a una imagen pequeña.

Audio video y flash
Los videos y animaciones el flash los colocaremos con la etiqueta <embed> al igual no cerraremos la etiqueta pero les recomiendo muchisisimo que si son videos que los agan en flash por que si son asi de simpes se tardan una vida en abrirse ja xD asi que mejor en flash, pero bueno basta de recomedaciones explicare los atributos de emdeb:

src="ubicacion.extencion": Aqui expecificaremos la ubicacion del video
width="ancho" height="alto": pues expecificaremos el ancho y el alto del video es mejor no colocarlas ya que la animacion tomara su tamaño original
autostart="true/false": Permite la ejecucion del video despues de averse cargado la pagina
loop="true/false": permite la ejecucion unica o true para que se repita infinitamente
controls="smallconsole": Visualiza una serie de controles que nos permiten iniciar la reproduccion del fichero, asi como realizar una pausa o detenerlo.

Sonido de fondo [nada recomendable]
Pues no recomiendo que pongan esta funcion por que guacala como me da miedo meterme a una pagina con aidio de fondo jaja xD, pero esta bien para hacer eso usaremos la etiqueta <bgsound> y los atributos son los siguientes:

src="ubicacion.extencion": aqui colocaremos la direccion de el archivo de sonido
autostart="true": solo lo colocaremos si deseamos que se inicie despues de cargar la pagina
loop="true/false": permite la ejecucion unica o true para que se repita infinitamente
volume="numero": aqui colocaremos con que fuerza se escuchara el audio

Enlaces

Aver veamos a mis malditos compañeros de la escuela les cuesta mucho trabajo un maldito enlace cosa tan sencilla pero aqui les voy a explicar bien lo que es un enlace
Un enlace es esto lo cual es muy sencillo de hacer lo unoco que tenemos que hacer es a donde queremos que lleve ese enlace y en donde quieres que se abra lo que vamos a enlasar
Esto es lo que aremos un enlace se hace con la etiqueta <a> y la etiqueta es masomenos de la siguiente estructura:
<a href="voyaqui.html" target="_dondeseabre">Texto</a>
De igualmandera si quieres que enlasar un documento de otra pagina coloca todo el enlace desde el http:// hasta el ultimo detalle y ahora explicare como abrir el enlace en una nueva ventana y todo eso:
Bomo ya explique que con <a> hacemos el enlace ahora explicare el href.
href="documento.html": el cual indica el documento que llamamos por ejemplo ahi estamos diciendo que abra documento.html el cual esta indicado en la misma carpeta que el documento que lo llama, osea, que si no esta ubicado en la misma carpeta el documento no se abrira si por ejemplo esta en otra carpeta pues tendriamos que hacer lo siguiente: href="carpeta/documento.html" y de esa forma seria correcto.
target="abretedonseyoquiera": Aqui es donde indicamos donde se abrira el documento por ejemplo comunmente cuando en una pagina se publica un texto de otra pues se coloca el enlace que seria masomenos asi:
<a href="http://www.paginadeltexto.com/carpeta/documento.html" tagret="_blank">web</a>
la cual dice que se abrira en una ventana nueva. Los valores que se pueden colocar en el target son los siguientes:
_blank: Este como ya vimos abre el enlace en una ventana en blanco
_self: esta opcion es la que biene por omicion osea que si quieres que se lleve acabo esta funcion no es nesesario colocarlo, esta lo que hace es cargar el enlace en el lugar que lo llamo respetando marcos a su alrededor.
_top: Carga la pagina en la misma ventana que en la que fue llamado el documento pero elimina todo marco alrededor
En el target puedes tambien hacer lo siguiente por ejemplo tenemos un iframe (eso lo encontraras en marcos/frames) en el cual queremos que se muestren los documentos el codigo es masomenos asi
<iframe src="index2.html" width="300" height="400" frameborder="0"></iframe>
Si quieremos lograr el objetivo tendriamos que colocarle este atributo name="nombredelframe" en name tendriamos que colocar el nombre que quieramos el cual luego utilisaremos, ahora expliquemos un poco sobre el enlace
El enlace para que funcione de la forma que queremos tendra que llevar lo siguiente

<a href="lugar.html" target="nombreframe">texto</a>
donde en el target tendras que poner el nombre que le allas puesto al frame por ejemplo si yo le puse marco (name="marco") pues mi enlace tendra que llevar target="marco"
Ahora este es otro tipo de enlace, este lo que hace es llevarte a una seccion del mismo documento como este
Suben!!!
Este es muy sencillo lo unico que hay que hacer es colocar un enlace que lleve lo siguiente
<a name="loquequieras">
Ahora colocamos un enlace que es el que nos va a llevar al enlace que le pusimos el name="nombre" y el enlace llevara lo siguiente:

<a href="#loquequieras"
Y con eso es suficiente

Silver Sword · 01-dic-2006, 09:26

aaaaa....que bien, menuda currada te has pegado. Aunque a mi me suena a copiar y pegar pero bueno, te felicito.

limo · 01-dic-2006, 09:26

Tablas

Las tablas son indispensables y en muchas ocaciones muy usadas por ejemplo mi pagina esta hecha de una tabla
Para empesar expliquemos como empesamos a crear una tabla la etiqueta es <table> y no es muy complicado ahora explicaremos sus atributos:
align="alineamiento": Especifica el alineamiento de la tabla los valores posibles son center, right y left
border="3": Fija el grosor del borde de la tabla si se fija en 0 no se muestra borde
background="imagen.jpg": Coloca una imagen de fondo en la tabla
bgcolor="ff0000": Fija un color de fondo de en la tabla
bordercolor="000000": Fija un color al borde de la tabla
width="800": Especifica el ancho de la tabla (las medidas son en pixeles), tambien se puede colocar un tanto porciento como por ejemplo 80%
height="900":Especifica la altura de la tabla al igual que en width se puede colocar un tanto porciento
cellspacing="12": Especifica una separacion entre las celdas de la tabla por ejemplo en mi pagina le puse 0
cellpadding="12": Fija una separacion entre las celdas y el text al igual este valor en mi pagina en 0
<TR atributo1="..." atributo2="...">
Se encarga de las filas de la tabla, comunmente nunca le pongo atributos jaja xD pero esta bien expliquemos sus atributos
align="right":Especifica el alineamiento de la tabla los valores posibles son center, right y left
bgcolor="ff0000": Fija un color de fondo
bordercolor="000000": Fija un color al borde
valign="top": alinea el contenido, los valores son: bottom, top, middle y baseline.
width="200": Especifica el ancho de la celda (las medidas son en pixeles), tambien se puede colocar un tanto porciento como por ejemplo 80%
height="300": Especifica la altura de la celda al igual que en width se puede colocar un tanto porciento
Pues no voy a explicar la etiqueta <th> por que enverdad no creo que se utilize en mucho esa tan solo sirve para poner como un titulo a la columna asi que no le encouentro mucha utilidad
<TD atributo="1" atributo="2">...</td>
Esta etiqueta va entre <tr> y </tr> osea que seria algo asi:
<table y los atributos que quieramos>
<tr>
<td atributos> lo que quieras</td>
</tr>
</table>
Pero bueno espero que alla quedado un poco claro, ahora explicare los atributos del <td>
width="200": Especifica el ancho de la celda (las medidas son en pixeles), tambien se puede colocar un tanto porciento como por ejemplo 80%
height="300": Especifica la altura de la celda al igual que en width se puede colocar un tanto porciento
bgcolor="ff0000": Fija un color de fondo
background="imagen.gif": Usa una imagen de fondo
bordercolor="ff0000": Fija un color al borde de la celda
nowrap prebiene el truncamiento del texto en la celda
rowspan="numero": especifica el numero de filas a unir, esto es medio complicado pero mas avajo lo explicare
colspan="numero": especifica el numero de columnas a unir tambien avajo lo explicare
valign="top": especifica el alineamiento de los datos que van en la celda los posibles valores son, top, middle, bottom y baseline
okas aqui pondre un pequeño ejemplo de como empesar con las tablas
<table border="4" bordercolor="0" align="center" width="700" height="500">
<tr>
<td colspan="3" valign="bottom" bgcolor="0000ff" height="150">
Este texto se va a mostrar en la parte de avajo de la celda y uniremos 3 columnas</td>
</tr>
<tr>
<td bgcolor="ff0000" valign="top" height="350" width="250">
este texto se mostrara en la celda arriva y es una de las columnas que unimos en el principio</td>
<td width="200" height="350">
Aun que no es nesesario colocar el height se le coloco y esta seria la columna mas delgada</td>
<td width="250" bgcolor="green" valign="bottom" height="350">
Este texto se muestra en la celda por devajo</td>
</tr>
</table>
Este codigo copialo y pegalo en el bloc de notas y guardalo con un .html y ve como queda y que es masomenos lo que hace cada atributo de los tds y todo lo que tenga que ver con tablas, es sencillo pero laborioso.

Por limo. Espero ayudarles.

limo · 01-dic-2006, 09:27

Silver no a sido copiar y pegar y tengo mas codigos preparados me los he currado yo solito buscando informacion.

spawn ssj3 · 01-dic-2006, 09:39

Hombre sreo que silver sword dice que ha sido copiar y pegar en el post poque los mensajes estan separados por pocos minutos pero no creo que diga en el word o donde lo hayas hecho.

Silver Sword · 01-dic-2006, 09:46

Bueno lo seinto limo, puede que sea lo que ha dicho spawn. Bueno te felicito te lo has currao. Y una pregunta-¿como se dá reputación?- es que hace tiempo que no doi cuando lo cambiaron...

Tidus7 · 01-dic-2006, 09:48

Silver en el mensaje que quieras puntuar mira debajo del avatar,veras unas balanzas clicas ahi i listo.

Saludos!"

kViN_Ss2 · 01-dic-2006, 11:06

Gracias, estoy haciendo unas mejoras en un foro, si tengo alguna duda ya te lo dire ^^

limo · 01-dic-2006, 11:30

ok me alegro de que a alguien le sirva a mi me ayudo mi hermano a hacerlos y puff nos llevo tiempo y trabajo.

goku ssj6 · 02-dic-2006, 12:45

Ya has echo más de tres temas, todos son largos y tu has dicho en uno que ha llevado tiempo, no puede ser que esten todos hoy, has copiado y pegado de algún sitio.

limo · 02-dic-2006, 12:55

llevaba tiempo preparandolos no los he empezado hoy.