Manuales de bolsillo [HTML Y XHTML]

Sección para"expertos", que quieren cambiar el código HTML de su página o insertar Java Scripts, Iframes, etc.. Si eres principiante, esta sección no te hace falta.

ModeradorCOLON Moderadores

Avatar de Usuario
Plusocio
Newbie
Newbie
MensajesCOLON 115
RegistradoCOLON 26 Abr 2008 09:56
UbicaciónCOLON Sevilla (España)
CONTACTCOLON

Manuales de bolsillo [HTML Y XHTML]

Notapor Plusocio » 06 Jul 2008 10:59

PRIMERA ENTREGA: CÓDIGO HTML [BÁSICO]

---------------------------------------------------------------------------------
Estructura de un documento HTML

En un documento HTML podemos incluir texto, imágen, sonido y referencias a otros documentos. Para diferenciar las directivas de HTML (instrucciones) del texto normal, dichas directivas se encuentran encerradas entre los signos < y >. Determinadas directivas tienen un inicio y un final. La directiva final se acompaña del símbolo /. La estructura básica de un documento HTML tendría las siguientes directivas :


<HTML> inicio del documento
<HEAD> inicio de la cabecera
<TITLE> inicio del título
Titulo de la pagina
</TITLE> final del título
</HEAD> final de la cabecera
<BODY> inicio del cuerpo de la página
Texto, graficos y demás componentes de la página
</BODY> final del cuerpo de la página
</HTML> final del documento


El título de la página será el texto que identificará a la página, la hoja en sí la escribiremos entre las directivas <BODY> y </BODY>.
Muchas de las directivas de HTML pueden incluir parámetros. Estos parámetros añaden opciones especiales a la directiva. Veremos ahora las principales directivas que se usan en los documentos HTML con algunos de sus parámetros.



--------------------------------------------------------------------------------

Fondo del documento.

La directiva <BODY> además de indicar el inicio y el final del cuerpo de nuestra hoja permite indicar el fondo de dicho documento. Si no incluimos ningún parámetro, el fondo de nuestro documento será de color blanco. Podemos cambiar el color de fondo con el parámetro bgcolor de la siguiente forma :

<BODY bgcolor=" código de color ">

El código de color empieza con el símbolo # y continua con seis cifras hexadecimales. Cada par de estas cifras indican el dominio de cada color principal en la mezcla final. Las dos primeras cifras indican el dominio del color rojo, las dos siguientes del color verde, y las dos últimas del color azul. El usar un numero hexadecimal de dos cifras para cada color nos permite indicar dominios desde el 0 (00) al 256 (FF).Por ejemplo, para que el fondo fuese de color verde puro la orden seria :

<BODY bgcolor="#00FF00">

Si la orden fuese :

<BODY bgcolor="#10A0FF">

conseguiriamos un color azul cielo, ya que estamos dando una mezcla de 10 partes de rojo (10), cien partes de verde (A0) y doscientas cincuenta y seis partes de azul (FF).

El número de mezclas de color es muy grande, de cualquier forma los programas editores de HTML nos calculan el codigo del color escogiendo nosotros el color de una paleta, lo cual resulta bastante mas sencillo que calcular la mezcla.

Ademas de definir el color del fondo, esta directiva nos permite definir los colores por defecto para el texto normal y los textos que acceden a un enlace en la página, por medio de los parámetros text y link. Por ejemplo:

<BODY bgcolor="#10A0FF" text="#00FF00" link="#FF0000">

Con lo que el fondo de la pagina seria de color azul cielo, el texto por defecto de color verde y los textos que dieran acceso a otras paginas de color rojo.


Aparte del color, podemos indicar un fondo gráfico para el documento. Para ello utilizaremos el parámetro background. El fondo vendrá indicado por un archivo de imagen (gif o jpg) que se reflejará en la página en mosaico. Por ejemplo :


<BODY background="fondo.gif">


Pondrá como fondo de nuestro documento la imagen fondo.gif repitiéndola tantas veces como sea necesario para que cubra toda la página.
Lógicamente, cuanto mayor sea la imagen, mas tiempo tardara el navegador en visualizar el fodo de nuestra página.




--------------------------------------------------------------------------------

Texto y efectos.

El texto a escribir en la hoja se escribe tal cual, es decir, no hay ninguna directiva para indicar que lo que escribimos es texto. Todo aquello que no esté encerrado entre los símbolos < y > se entenderá que es texto. Las tabulaciones, espacios y retornos de carro del texto seran ignorados, de tal forma que si escribimos lo siguiente :



Texto de prueba
de mi página
Web.

En la página veremos :

Texto de prueba de mi página Web.

Para indicar un retorno de carro se utiliza la directiva <BR> y para indicar un cambio de párrafo se utiliza la directiva <P>. Por ejemplo :

Texto de prueba<BR>de mi página<P>Web.

Se verá como :

Texto de prueba
de mi página Web

La única forma para que se respete el formato original del texto (con espacios y retornos de carro) es utilizar la directiva <PRE></PRE>. Ejemplo :

<PRE>
Esto es un
Texto con formato.
</PRE>

Para incluir efectos especiales en el texto "encerraremos" el texto a destacar utilizando estas directivas :

<B> </B> Negrilla.
<I> </I> Cursiva.
<U> </U> Subrayado.


De la misma forma, el texto se alinea por defecto a la izquierda. Si deseamos centrar un texto en la página utilizaremos la directiva <CENTER></CENTER>. Por ejemplo :

<CENTER>Este texto está centrado</CENTER>

Para indicar el tamaño de la letra se utiliza la directiva <FONT></FONT>. Esta directiva tiene varios parámetros. Veremos los dos mas usados size y bgcolor.

size indica el tamaño "relativo". Para aumentar el tamaño de la letra indicaremos un número positivo, y para disminuirlo indicaremos un número negativo.

bgcolor indica el código de color del texto en el mismo formato que hemos visto anteriormente para el fondo del documento. Ejemplos :

<FONT size=+3 bgcolor="#FF0000"> Texto </FONT>

Escribirá el Texto en un tamaño tres veces superior al normal y en color rojo puro.

<FONT size=-2 bgcolor="#0000FF"> Texto </FONT>

Escribirá el Texto en un tamaño dos veces inferior al normal y en color azul puro.

La directiva <HR> inserta una línea horizontal en el documento. Se suele utilzar para diferenciar diferentes partes de la página. En esta página se ha usado esta directiva para separar cada sección de este manual. La longitud de esta linea se puede definir en porcentaje usando el parámetro width. La altura de la linea se indica con el paráametro size. Por ejemplo:

<HR size=10 width=50%>

Por defecto se entiende una altura=1 y una anchura=100%
Para incluir un comentario en nuestra página Web se utiliza la directiva <!-- -->, Dicho comentario no aparecerá en la página. Por ejemplo:
<!-- Esto es un comentario -->


--------------------------------------------------------------------------------

Listas de elementos y Entidades.

Para definir una lista de elementos se utilizan las directivas <UL></UL> para listas sin numerar y <OL></OL> para listas numeradas. Los elementos de la lista iran precedidos en ambos casos por la directiva <LI>. Por ejemplo,

<UL>
<LI>Links interesantes
<LI>Galeria de fotos
<LI>Entrevistas
</UL>

Produciría el efecto :


Links interesantes
Galeria de fotos
Entrevistas
<OL>
<LI>Links interesantes
<LI>Galeria de fotos
<LI>Entrevistas
</OL>

Produciría el efecto :


Links interesantes
Galeria de fotos
Entrevistas
Existen tambien las listas de definiciones. Estas listas presentan el texto de forma similar al de los diccionarios. La directiva para estas listas es <DL></DL>.Con la directiva <DT> se especifica el término y con <DD> la definició. Ejemplo:

<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol.
</DL>

Produciría el efecto :


WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol
La directiva <DL></DL> puede llevar el atributo compact, que presentaria la lista de la siguiente forma :

<DL compact>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol.
</DL>

Produciría el efecto :


www
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol
Las listas se pueden anidar, incluyendo una lista dentro de otra, produciendo el siguiente efecto:



<UL>
<LI>Links interesantes
<UL>
<LI>Buscador Ole
<LI>Pagina de Luis_FD
<LI>Museo del Prado
</UL>
<LI>Galeria de fotos
<UL>
<LI>Fotos de mascotas
<LI>Fotos de paisajes
</UL>
<LI>Entrevistas
<UL>
<LI>Sharon Stone
<LI>Bill Gates
<LI>Paul McCartney
</UL>
</UL>

Actualmente los navegadores mas utilizados (Netscape y Ms Explorer) no tienen problemas en reconocer las letras acentuadas y las eñes, sin embargo los navegadores antíguos no las reconocen. Es por ello que para asegurarnos de que estas letras se veran bien en todos los navegadores, debemos sustituirlas por su entidad. Una entidad es un código que representa un carácter extraño para el navegador. Dichas entidades empiezan con el símbolo & y terminan con el símbolo ;. Asimismo los caracteres especiales que se usan para las directivas de HTML han de ser representados por entidades cuando queramos que se "vean" en nuestra página. Las entidades más importantes son las siguientes :

á &aacute; Á &Aacute;
é &eacute; É &Eacute;
í &iacute; Í &Iacute;
ó &oacute; Ó &Oacute;
ú &uacute; Ú &Uacute;
ñ &ntilde; Ñ &Ntilde;
< &lt; > &gt;
& &amp; " &quot;



De la misma forma podremos indicar al navegador que represente un carácter por su código ascii de la forma &#codigo;. Por ejemplo:

© Representara el símbolo ©.




--------------------------------------------------------------------------------

Gráficos y Enlaces.

Para incluir un gráfico en nuestra página utilizaremos la directiva <IMG>. Esta directiva tiene varios parámetros. El parámetro src indica el nombre del fichero gráfico a mostrar, border indica el borde que rodeará al gráfico, alt indica el texto que se mostrara en lugar del gráfico en aquellos navegadores que no puedan mostrar el gráfico. Ejemplo:


<IMG src="esp.gif" border=none alt="España">

Mostrará el gráfico esp.gif sin ningún borde rodeándolo, y aquellos navegadores que no puedan mostrar el gráfico visualizaran la palabra España.

Otro parámetro importante de esta directiva es align. Este parámetro permite indicar como se alineará el texto que se escriba a cotinuación del gráfico. Sus valores posibles son :

bottom alinea el texto en la zona inferior del gráfico.
top alinea el texto en la zona superior del gráfico.
center alinea el texto en la zona central del gráfico.



Ejemplos :
<IMG src="hlp.gif" align=bottom>Texto de Ayuda
Texto de Ayuda

<IMG src="hlp.gif" align=top>Texto de Ayuda
Texto de Ayuda

<IMG src="hlp.gif" align=center>Texto de Ayuda
Texto de Ayuda

Los parámetros height y width permiten redimensionar el gráfico dándole un tamaño diferente al real.

height=num Marca la atura relativa del gráfico.
width=num Marca la anchura relativa del gráfico.



Ejemplos :
<IMG src="hlp.gif" height=150 width=60>

<IMG src="hlp.gif" height=25 width=25>

Un enlace es un texto o gráfico que, pulsándolo, nos envía a una página distinta. Para incluir un enlace en nuestra página se utiliza la directiva <A></A>. Dicha directiva lleva el parámetro href que es el que indica la dirección de la página a la que queremos que se acceda. Por ejemplo :


<A href="http://www.ole.es">Pulsa aqui para buscar en la red.</A>

Mostraría el texto en distinto color, y al pulsar sobre el se nos enviaría a la direccion http://www.ole.es. Entre la directiva <A></A> podemos poner un texto o un gráfico o ambas cosas. P.ej.:

<A href="http://www.ole.es"><IMG src="ole_pet.gif">Buscador Olé.</A>

Permitirá dirigirse a la direccion indicada pulsando en el gráfico o en el texto.

Para hacer un enlace a nuestra dirección de correo se indicaría la directiva con el siguiente formato :

<A href="mailto:direccion de correo">Pulsa aqui para enviarme un e-mail.</A>

Espero que les halla servido de ayuda.

Niveles de dificultad de los manuales:

• Básico
• Medio
• Avanzado
• Experto
Última edición por 5 el Plusocio, editado 7 veces en total

Avatar de Usuario
-_-Merino-_-
Pro User
Pro User
MensajesCOLON 946
RegistradoCOLON 16 Mar 2007 23:10
UbicaciónCOLON Bien ubicao

Notapor -_-Merino-_- » 06 Jul 2008 11:32

Perfecto fran no puedo decir mas :o :o :o

Avatar de Usuario
carlitos
ExModerador
ExModerador
MensajesCOLON 1635
RegistradoCOLON 29 Nov 2006 17:02
UbicaciónCOLON Gavà M'encanta Gavà!
CONTACTCOLON

Notapor carlitos » 06 Jul 2008 14:11

-_-Merino-_- escribióColonPerfecto fran no puedo decir mas :o :o :o


No lo ha hecho el xD

Está muy bien, les iría bien leerse esto a los nuevos en HTML o los no tan nuevos.. :wink:
Imagen
De lo que no se puede hablar.. mejor es callarse

Avatar de Usuario
el_diabolo
Advanced User
Advanced User
MensajesCOLON 509
RegistradoCOLON 02 Jun 2008 01:32
UbicaciónCOLON Coquimbo, Chile
CONTACTCOLON

Notapor el_diabolo » 06 Jul 2008 15:38

Esta muy bueno es como el Libro que encontre en mi casa de HTML de el aprendi lo de head o como escribir o body.
http://www.eldiabolo.ya.st la mejor web de este ancestral malabar.
http://subdominios.miarroba.com/votar.php?id=217717 Vota 5* porfavor
Imagen

Avatar de Usuario
Pablo
Administrador
Administrador
MensajesCOLON 2411
RegistradoCOLON 25 Nov 2006 23:26
UbicaciónCOLON Granada
CONTACTCOLON

Notapor Pablo » 06 Jul 2008 18:05

Movido a HTMl.
:arrow: Gracias por el aporte

Avatar de Usuario
Plusocio
Newbie
Newbie
MensajesCOLON 115
RegistradoCOLON 26 Abr 2008 09:56
UbicaciónCOLON Sevilla (España)
CONTACTCOLON

Notapor Plusocio » 07 Jul 2008 08:46

SEGUNDA ENTREGA: CÓDIGO XHTML [MEDIO]
----------------------------------------------------------------------------

¿Qué es exactamente XHTML?
Es un reemplazo del HTML tradicional
Es una versión más estricta y limpia del HTML
Se define como una aplicación XML
Es una recomendación del W3C

Reglas básicas del XHTML
Al ser una recomendación y un estándar, es necesario observar que nuestros documentos XHTML deben respetar ciertas reglas básicas :

1. Todos los elementos deben estar debidamente jerarquizados
Cuando estamos escribiendo nuestros documentos es muy común que erroneamente encerremos elementos de forma inadecuada, por ejemplo:

<p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</p></i>

En este ejemplo, hemos cerrado la etiqueta de párrafo antes de lo debido, en algunos navegadores esto pasará desapercibido, sin embargo la forma correcta es la siguiente:

<p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</i></p>

2. Todo documento debe estar bien formado
Lo cual quiere decir que todos nuestros documentos deben tener al menos la siguiente estructura:

<html>
<head> ... </head>
<body> ... </body>
</html>

3. Los nombres de las etiquetas deber estar en mínusculas
Al ser XHTML una aplicación XML, está hace diferencia entre mayúsculas y minúsculas, por lo que <BODY> y <body> son dos cosas muy diferentes

4. Todas las etiquetas deben cerrarse
En versiones anteriores del HTML era posible dejar etiquetas sin cerrar, incluso yo alcancé a leer algunos libros donde el mismo autor te decía que no era necesario cerrar tal o cual etiqueta, en XHTML es obligatorio que todas las etiquetas sean cerradas, por lo que:

<p>Esto es un párrafo

Es incorrecto, en su lugar debe ser:

<p>Esto es un párrafo</p>

El cual tiene su etiqueta de cierre correspondiente. en los casos donde las etiquetas son unarias como <br>, <hr>, <img> y otras, el cierre se da dentro de ella misma, terminando la etiqueta con />, por ejemplo:

Este texto hace un <br><b>Salto de Línea</b> y después pone una línea abajo <br><hr>

5. Los nombres de los atributos deben ir en minúsculas
Por lo antes mencionado en el punto 3, todos los nombres de atributos para una etiqueta deben ir en minúsculas, por ejemplo:

<img> es inválido, en su lugar <img> sería lo correcto

6. Los valores de los atributos deben ir entre comillas
Esto para evitar confusiones, por ejemplo:

<div> es incorrecto, en su lugar use <div>

7. El atributo id reemplaza al atributo name
En XHTML el atributo name está descontinuado, en su lugar use el atributo id:

<input>

Sólo en casos de compatibilidad con navegadores antiguos debe usarse el atributo name, si estamos usando XHTML transicional, el atributo name es permitido.

El DOCTYPE
Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE, el cual no es parte del documento en sí, sino que define el tipo de DTD (Document Type Definition o Definición de tipo de documento) a emplear en nuestros documentos, es obligatorio y puede ser uno de estos tres:

XHTML 1.0 Strict: Se usa cuando se desea utilizar al 100% XHTML, su nombre lo dice bien claro, es XHTML estricto, la declaración del mismo es como sigue: <DOCTYPE>

HTML 1.0 Transitional: Es el más usado ya que permite manejar elementos de XHTML y HTML 4.01, además de que se debe usar cuando nuestro navegador no soporta correctamente CSS(¿No les recuerda a una E azul?), su declaración es la que sigue:<DOCTYPE>

XHTML 1.0 Frameset: Se debe usar cuando se manejan frames, su declaración es la siguiente: <DOCTYPE>

Conclusión
Como desarrolladores y diseñadores web debemos siempre apegarnos a las normas y estándares internacionales ya que con esto no sólo logramos que nuestras aplicaciones sean 100% compatibles, sino que nos hacemos más profesionales, espero que este breve minitutorial les haya servido de ayuda

Avatar de Usuario
-FaReS-
Newbie
Newbie
MensajesCOLON 195
RegistradoCOLON 04 Ene 2007 03:51
UbicaciónCOLON Venezuela, Caracas
CONTACTCOLON

Notapor -FaReS- » 09 Jul 2008 04:09

Está Completo 100%
Muchas Gracias, de seguro muchas personas lo necesitaran!
:wink:
Imagen

Klk3
ExAdministrador
ExAdministrador
MensajesCOLON 2803
RegistradoCOLON 18 Nov 2005 16:09
UbicaciónCOLON Barcelona,España
CONTACTCOLON

Notapor Klk3 » 11 Jul 2008 00:22

dos palabras copiar y pegar xd
Imagen
Hasta siempre ha sido un placer muy grande :D

Avatar de Usuario
altavoz
Grand User
Grand User
MensajesCOLON 349
RegistradoCOLON 12 Oct 2007 09:56

Notapor altavoz » 11 Jul 2008 10:14

Estan bien todos los codigos...
www.palimpalem.com/3/palimpalemfans
Apuntate a los premios Fans ¡¡Inscribe tu web!!

Avatar de Usuario
Books
Advanced User
Advanced User
MensajesCOLON 861
RegistradoCOLON 12 Ago 2006 16:03
UbicaciónCOLON Guadalajara, Castilla-La Mancha, España.
CONTACTCOLON

Notapor Books » 11 Jul 2008 14:49

Esta muy bieenn!!! Pero apenas entiendo nada... :lol:
Entra en mi web: www.books.ya.st.
Vota en los Premios Books 2008.
Busco Afiliados y más visitantes.


Volver a

¿Quién está conectado?

Usuarios navegando por este Foro: 8 y 0 invitados