¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
7.- Listas
Introducción
Listas sin orden <UL> <LI>
Listas ordenadas <OL> <LI>
Listas de directorio <DIR> <LI>
Listas de menu <MENU> <LI>
Listas de definición <DL> <DT> <DD>
Anidamiento de listas (ejemplos)
Ejemplo de listas de definición
8.- Tablas
Definición de la tabla <TABLE>
Marca de comienzo de una nueva fila <TR>
Marca de comienzo de una nueva celda <TD>
Celdas con texto de cabecera <TH>
Tablas con título <CAPTION>
Pequeño tutorial de tablas
9.- Frames
Introducción a los frames
Definición de un bloque de frames <FRAMESET>
Definición de cada frame <FRAME>
Mensaje para browsers sin frames <NOFRAMES>
Enlaces entre frames El atributo TARGET
10.- Formularios
Introducción
Atributos comunes
Marca de comienzo y fin <FORM>
Campos de entrada de texto y botones <INPUT>
Listas de selección <SELECT>
Ventanas de texto con barras de desplazamiento <TEXTAREA>
11.- Imágenes
Introducción
Inserción de imágenes <IMG>
Alineación de imágenes El atributo ALIGN
Extensiones del Netscape para la alineación de imágenes
Imágenes como fondo de página <BODY>
Imágenes como marcas de una lista <IMG> <DL>
Animaciones
Imagenes y Enlaces
12.- Simbolos
¿Por qué hay que usar códigos?
1.- Elementos del lenguaje HTML
A las instrucciones que forman el lenguaje HTML las denominaremos elementos. Se distinguen dos tipos de elementos:
Elementos llenos:
Estos elementos se forman mediante una marca de inicio y otra de final. En HTML las marcas se demilitan con los signos < (inferior a) y > (superior a). La marca de fin es idéntica a la inicial pero con el añadido de la barra inclinada, /, justo antes del nombre de la misma. Un texto marcado tendrá por tanto este aspecto:
...texto normal <marca> texto afectado por la marca </marca> resto del texto...
Por ejemplo, para resaltar un texto en negrita, se emplea la marca <B> de la siguiente forma:
...texto normal <B> texto en negrita </B> resto del texto...
Si en este ejemplo nos hubiesemos olvidado de la marca de final, el resto de la página estaría también en negrita.
Elementos vacíos:
Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en sí, sino que definen separadores.
Por ejemplo el elemento <HR> que sirve para mostrar una línea horizontal en la pantalla, se escribirá:
<HR>
Elementos con argumentos:
Algunos elementos tienen argumentos, los cuales son denominados atributos. Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es alfanumérico:
<marca atributo1 atributo2=numerico atributo3="alfanumetrico">
Ejemplos:
<HR NOSHADE>
<TABLE WIDTH=300> ... </TABLE>
<A HREF="/home/default.html"> ... </A>
Si se quieren utilizar caracteres como < o > en el texto normal, habrá que acudir a un artificio para que el browser no intente interpretarlos como marca. Estos caracteres así como otros símbolos utilizados en el código HTML se reemplazarán por los siguientes grupos de caracteres:
* el caracter < será reemplazado por <
* el caracter > será reemplazado por >
2.- Estructura de un documento HTML
Opcionalmente los documentos escritos en HTML empezarán por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez.
Los documentos escritos en HTML están estructurados en dos partes diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).
Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos:
<TITLE> para dar nombre al documento;
<META> para forzar a la página activa a ser cargada cada cierto tiempo.
<BASE> para prefijar la dirección base de los documentos referenciados mediante un URL relativo.
El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser.
HEAD, TITLE, META, BASE
La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Normalmente esta información no se ve cuando se navega por el documento.
Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y </TITLE>. El uso de TITLE es obligatorio ya que además de un carácter informativo tiene otras razones para existir:
* Es el texto que el browser almacenará en el fichero hotlist o bookmark.
* Es lo que se indica en la lista que aparece en la orden Go de la barra de menu.
* Es lo que aparece en la esquina superior izquierda cuando se imprime el documento.
* En un contexto Xwindow, cuando se minimiza la ventana, el título será tomado como nombre por el icono.
A continuación se muestra un ejemplo del formato mínimo de la cabecera.
Código:
<HTML>
<HEAD>
<TITLE> Aqui va el nombre del documento </TITLE>
</HEAD>
Cuerpo del documento
...
</HTML>
El título del documento que está usted leyendo ahora mismo se encuentra en la parte superior de esta ventana y es "Estructura de un documento HTML", como usted mismo podrá comprobar.
En la cabecera puede utilizarse también el elemento <META> que puede forzar a que la página activa se cargue cada cierto tiempo (indicado en segundos mediante el atributo CONTENT).
Código:
<HEAD>
<TITLE> Título de la página </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>
Este ejemplo hace que el browser vuelva a cargar la página cada 10 segundos. También puede hacerse a un servidor, así:
Código:
<HEAD>
<TITLE> Título de la página </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>
Esto ha de ser utilizado con mucha precaución ya que podrá sobrecargar el servidor. Si el contenido de la página no va a cambiar es inútil hacerlo, de hecho, solo tendrá utilidad en casos muy especiales.
El elemento <BASE HREF="URL"> define la información a prefijar a todo URL incompleto en el documento. Por ejemplo, el URL relativo "/html/test.html" corresponderá de hecho a "URL/html/test.html".
BODY
El resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML:
Código:
<HTML>
<HEAD>
<TITLE>Estructura mínima de un documento HTML</TITLE>
</HEAD>
<BODY>
Documento
...
</BODY>
</HTML>
Comentarios
En el código fuente de una página HTM, los comentarios se introducirán entre las marcas: <!-- y -->. Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible.
Ejemplo:
<!-- Esto es una línea de comentarios -->
3.- Separadores de bloques de texto
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Marcas de bloques:
* Párrafos. <P>
* Saltos de línea. <BR>
* Bloques tabulados. <BLOCKQUOTE>
* Línea horizontal. <HR>
* Divisiones. <DIV>
* Texto preformateado. <PRE>
* Direcciones. <ADDRESS>
* Centrado de bloques. <CENTER>
<P>
<P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>.
Ejemplos:
Código:
<P>
Este texto está contenido dentro del primer párrafo,
así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1,
párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.
</P>
<P>
Este otro texto está contenido dentro del párrafo 2,
párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2,
párrafo 2, párrafo 2.
</P>
Esto dará como resultado:
Citar
Este texto está contenido dentro del primer párrafo, así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.
Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.
Normalmente no suele utilizarse la marca de fin de párrafo, </P> ya que el texto continuará hasta que encuentre otro comienzo de párrafo <P>.
Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:
* LEFT: Justifica el texto a la izquierda. (por defecto)
* RIGHT: Justifica el texto a la derecha.
* CENTER: El texto aparece centrado.
Ejemplo:
Código:
<P ALIGN=LEFT>
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda.
</P>
<P ALIGN=RIGHT>
Texto justificado a la derecha, texto justificado
a la derecha, texto justificado a la derecha,
texto justificado a la derecha.
</P>
<P ALIGN=CENTER>
Texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado, texto centrado.
</P>
Esto dará como resultado:
Citar
Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.
Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.
Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado
<BR>
El elemento <BR> es vacío por lo que sólo tiene marca inicial. Indica un salto de línea.
Ejemplo:
Código:
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1. <BR>
Texto 2, texto 2, texto 2, texto 2, texto 2.
Con esto tendremos como resultado:
Citar
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1.
Texto 2, texto 2, texto 2, texto 2, texto 2.
<BLOCKQUOTE>
El elemento <BLOCKQUOTE> sirve para representar párrafos tabulados, por la izquierda y la derecha.
Ejemplo:
Código:
Texto 1, texto 1, texto 1, texto 1, texto 1.
<BLOCKQUOTE>
Te
xto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.
</BLOCKQUOTE>
El resultado será:
Citar:
Texto 1, texto 1, texto 1, texto 1, texto 1.
<HR>
<HR> es un elemento vacío por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal.
Se puede cambiar la apariencia de dicha línea mediante los siguientes atributos:
* NOSHADE: Elimina el efecto de sombra de la línea.
* WIDTH: Permite definir la longitud de la línea.
* SIZE: Permite definir el grosor de la línea.
Ejemplos:
Código:
<HR NOSHADE>
Código:
<HR WIDTH=250 SIZE=3
Código:
<HR WIDTH=250 SIZE=3>
Código:
<HR NOSHADE WIDTH=400 SIZE=4>
<DIV>
Este elemento se comporta de forma muy parecida al salto de línea, <BR>, y a su vez admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque con los atributos de <P>, pero dejando tan solo un salto de línea entre un bloque y otro.
Ejemplos:
Código:
<DIV ALIGN=LEFT>
Texto justificado a la izquierda.
</DIV>
<DIV ALIGN=RIGHT>
Texto justificado a la derecha.
</DIV>
<DIV ALIGN=CENTER>
Texto centrado.
</DIV>
Esto dará como resultado:
Citar
Texto justificado a la izquierda.
Texto justificado a la derecha.
Texto centrado.
<PRE>
El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el browser, respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea, respetando los espacios y los saltos de carro.
Ejemplo:
Código:
<PRE>
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de
carro,
como podrán observar.
</PRE>
Resultado serà:
Citar
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de
carro,
como podrán observar.
<ADDRESS>
El elemento <ADDRESS> se emplea para indicar que un texto representa una dirección o una firma mostrándolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la información respecto al autor del documento (dirección, teléfono, e-mail,...). Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir esta zona de dirección al final del documento.
Ejemplo:
Código:
<ADDRESS>
Tekin Tontu <BR>
77A Wellington Rd <BR>
Auburn 2144, NSW <BR>
Australia <BR>
e-mail tekin@cis.com <BR>
</ADDRESS>
Esto Dara de Resultado:
Citar
<CENTER>
El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios, ...
Ejemplo:
Código:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
<TR> <TD> Celda 1 <TD> Celda 2 </TR>
<TR> <TD> Celda 3 <TD> Celda 4 </TR>
</TABLE>
</CENTER>
El Resultado es Una Tabla centrada.
Código:
<CENTER>
<IMG SRC="images/bgfun02.gif">
</CENTER>
El Resultado es Una Imagen Centrada.
Código:
<CENTER>
<P>Este último ejemplo es un párrafo de texto centrado
mediante el elemento CENTER. Como pueden observar
cada una de las líneas del párrafo aparecerá centrada.<P>
</CENTER>
Da como resultado:
Citar
Este último ejemplo es un párrafo de texto centrado mediante el elemento CENTER. Como pueden observar cada una de las líneas del párrafo aparecerá centrada.
Fuente: http://foro.portalhacker.net/index.php/topic,46271.0
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻
Bueno Mañana sigo Escribiendo esque es mucho :-\
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻
Te lo edito con la fuente y recuerda ponerla siempre que hagas un copy paste además de exponer un poquito tu opinión.
Muyy buenoo y esta muy completo hasta ahora
si dices que falta mas me imagino que vendra aun mas completo xd
te recomendaria que mientras ves un tuto lo apliques osea que lo agas
asi puedes memorizar mas y aprenderlo mas rapido xd (asi e echo yo en otros tutoriales xd)
si dices que falta mas me imagino que vendra aun mas completo xd
Entendi hasta la parte de las tablas, despues me perdi :S
te recomendaria que mientras ves un tuto lo apliques osea que lo agas
asi puedes memorizar mas y aprenderlo mas rapido xd (asi e echo yo en otros tutoriales xd)
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻
Sineto comentar que este manual esta desfasado. Supongo que será HTML 4.1. Actualmente se utiliza XHTML, y en el futuro empezará a usarse HTML 5.
Sineto comentar que este manual esta desfasado. Supongo que será HTML 4.1. Actualmente se utiliza XHTML, y en el futuro empezará a usarse HTML 5.
+1... Estás en lo correcto.
Además, una de los estandares del XHTML se refleja en el uso de minúscula para las etiquetas...
Sineto comentar que este manual esta desfasado. Supongo que será HTML 4.1. Actualmente se utiliza XHTML, y en el futuro empezará a usarse HTML 5.
Tal cual como él dijo, aunque muy buena guía para quienes no sepan nada de HTML, por cierto.. Escribiste Sineto y creo que quisiste decir Siento. :juju:
20 Años, Argentina. Ex Marinero Militar de la Armada Argentina.