Tutoriales de html

Evitar el cache del navegador

Si somos de actualizar el contenido de un sitio muchas veces al día, quizas no sea recomendable que al usuario se le carguen partes de la página en el caché, ya que si ingresa nuevamente no podrá apreciar las actualizaciones. Para evitar el cache, se utilizan los siguientes métodos de html:

<meta http-equiv="Expires" content="0">

<meta http-equiv="Last-Modified" content="0">

<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">

<meta http-equiv="Pragma" content="no-cache">

Cualquiera de ellos funciona correctamente, hay que ubicarlos entre las etiquetas <HEAD> y </HEAD>.

Autor: Fabian Muller
Estructura de un documento HTML
Introducción

Los documentos escritos en HTML estan estructurados en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo).

Ejemplo de documento 

<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<!-- Esto es un comentario-->

<BODY>

<H1> Esto es una "demo" de documento HTML </H1>

Esto es el más sencillo de los documentos HTML.

</BODY>
</HTML>


El elemento <HTML> </HTML> no es obligatorio. Solo sirve como identificación del tipo de contenido del fichero para ciertos programas que hacen cambios masivos en muchas páginas a la vez.

Autor: Gamaliel M.
Redirección a otra web en html
Introducción

Existen otras formas de hacer esto pero una manera sencilla y rápida de realizar la redirección es utilizando la etiqueta <meta>.

Pega este código entre <head> y </head>.

Este script redireccionará automáticamente a otro site (al estar puesto a 0). Si deseas darle más tiempo, cambia el 0 por otro número (en segundos).



<meta http-equiv="refresh" content="0; url=tu pag web.html">


Autor: Gamaliel M.
Tablas en html
Introducción

Para crear tablas se utilizan 3 etiquetas:



	<table></table> -- para definir la tabla
	<tr></tr>       -- indica las lineas de la tabla
	<td></td>       -- indica las column


Ejemplo:



<center>
<table border="1">
	<tr>
		<td>Nombre</td><td>Apellido</td>
	</tr>
	<tr>
		<td>Jorge</td><td>Rodrigues</td>
	</tr>
	<tr>
		<td>Jesus</td><td>Sepeda</td>
	</tr>
</table>
</center>


Se veria:

NombreApellido
JorgeRodrigues
JesusSepeda
Autor: Gamaliel M.
Parrafos y Div en html
Introducción

Para definir los saltos de párrafo se utiliza el elemento lleno <P> </P> (por Paragraph). No suele utilizarse el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro salto <P>

Se escribirá así: 



Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <p> 
</p>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto


y este sería el resultado:

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 Texto 2 Texto 2 Texto

Como puede verse, hay un línea en blanco entre los dos bloques. El efecto del elemento <BR> (por BReak) es el mismo, pero sin esa línea vacía.

Se escribirá así: 



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 Texto 2 Texto 2 Texto 2


y este sería el resultado:

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 Texto 2 Texto 2 Texto 2

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER

Se escribe de la siguiente manera:



<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>


Este sería el resultado:

texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
Autor: Gamaliel M.
Imágenes en html
Introducción

Se pueden mostrar imagenes en una paguna html mediante la etiqueta <img src="url/nombre_img" >, ademas se le pueden dar varias propiedades.

Ejemplo:



<img src="../../../img/iconos/alerta.gif" />


Se veria mas omenos asi:

Tambien se pueden poner imagenes de fondo en la pagina o en tablas, para ponerla en una pagina se utiliza un atributo del elemento <body>.



<body background="url/nombre_img">


Autor: Gamaliel M.
Listas en html
Introducción

A continuación veamos las distintas tipos de listas que hay en html, su estructura, características y estilos.

Listas ordenadas 

la estructura es
   <ol> 
      <li> ... <li> 
   </ol>


  1. Línea 1
  2. Línea 2


Listas sin orden 

la estructura es
   <ul>
      <li> ... <li>
   </ul>


  • Línea 1
  • Línea 2


Listas de definición 

la estructura es
   <dl> 
      <dt> ... <dt>
      <dd> ... <dd>
   </dl>


Termino 1
Definición del 1º término.
Termino 2
Definición del 2º término.


Listas de directorio 

la estructura es
   <dir> 
       <li> ... <li>
   </dir>


  • Elemento 1
  • Elemento 2


    • Listas de menú 

    la estructura es
   <menu> 
        <li> ... <li>
   </menu>


  • Elemento 1
  • Elemento 2


    • Pueden tener varios estilos

    1. Primer Capítulo
      • Tema 1
        • Apartado 1
        • Apartado 2
      • Tema 2
    2. Segundo Capítulo
    Autor: Gamaliel M.
    Texto en color en html
    Introducción

    Se puede controlar el color del texto utilizando el elemento con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.

    Si escribes: 



    <B><FONT COLOR="red">Texto ROJO </FONT>
	<br>
	<FONT COLOR="blue">Texto AZUL </FONT>
	<br>
	<FONT COLOR="navy">Texto AZUL MARINO </FONT>
	<br>
	<FONT COLOR="green">Texto VERDE </FONT>
	<br>
	<FONT COLOR="olive">Texto OLIVA </FONT>
	<br>
	<FONT COLOR="yellow">Texto AMARILLO </FONT>
	<br>
	<FONT COLOR="lime">Texto LIMA </FONT>
	<br>
	<FONT COLOR="magenta">Texto MAGENTA </FONT>
	<br>
	<FONT COLOR="purple">Texto PURPURA </FONT>
	<br>
	<FONT COLOR="cyan">Texto CYAN </FONT>
	<br>
	<FONT COLOR="brown">Texto MARRON </FONT>
	<br>
	<FONT COLOR="black">Texto NEGRO </FONT>
	<br>
	<FONT COLOR="gray">Texto GRIS </FONT>
	<br>
	<FONT COLOR="teal">Texto TEAL </FONT>
	<br>
	<FONT COLOR="white">Texto BLANCO </FONT>
	<br>
	</B>


    Se mostraria mas omenos asi:

    Texto ROJO
    Texto AZUL
    Texto AZUL MARINO
    Texto VERDE
    Texto OLIVA
    Texto AMARILLO
    Texto LIMA
    Texto MAGENTA
    Texto PURPURA
    Texto CYAN
    Texto MARRON
    Texto NEGRO
    Texto GRIS
    Texto TEAL

    He aquí una combinación de colores y tamaños:
    Si escribes: 



    <FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> 
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>


    El resultado:

    Esto es una Prueba
    Autor: Gamaliel M.
    Cabeceras en html
    Introducción

    Veamos los distintos tipos de cabeceras que hay en html. Las cabeceras son utilizadas para generalizar el contenido de un apartado de tu Web, es algo así como un titulo.
    Como se muestra en la parte de abajo la etiqueta <h1></h1> es la mas significativa se supone que seria el titulo general y las demás etiquetas <h2></h2>, <h3></h3>... serian los subtítulos, la importancia que se le quiere dar al texto depende del numero de la etiqueta <h.?.>.



    Cabecera 1

    		 <h1>

    Cabecera 2

    		 <h2>

    Cabecera 3

    		 <h3>

    Cabecera 4

    		 <h4>
    Cabecera 5
    		 <h5>
    Cabecera 6
    		 <h6>


    Todas las etiquetas anteriores se cierran o terminan con la diagonal </>, ejemplo: <h1>Cabecera 1</h1>, <h2>Cabecera 2 </h2>, etc.
    Autor: Gamaliel M.
    Estilos de Caracteres en html
    Introducción

    En la parte de abajo se muestran los distintas etiquetas de estilos para los caracteres.



    Negrita <b>
    Cursiva <i>
    Subrayado <u>
    Resaltado <em>
    Destacado <strong>
    Código <code>
    Citas <cite>
    Máquina de escribir <kbd>
    Ejemplos <samp>
    Teletipo <tt>
    Variables <var>
    Negrita y cursiva <b><i>


    Todas las etiquetas anteriores se cierran o terminan con la diagonal </>, ejemplo: <b>Negrita</b>, <strong>Destacado</strong>, etc.

    Autor: Gamaliel M.