miércoles, 16 de mayo de 2012

ESTRUCTURA BASICA HTML

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).
<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>
Vamos a analizar más detenidamente las distintas secciones que componen la página
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).
El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE>
no valdría en cambio

<TITLE>Página de Inicio</TITLE>
ya que esto no dice nada por si solo
Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas
<script language="JavaScript">
<!--

Aquí iría el código
// -->
</SCRIPT>

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:
BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">

Si la página estuviese en
ejemplos se pondría:
<BODY BACKGROUND="../gifs/fondo.gif">
Títulos
Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son:
Etiqueta Se ve
<h1> Título </h1>

Título

<h2> Título </h2>

Título

<h3> Título </h3>

Título

<h4> Título </h4>

Título

<h5> Título </h5>
Título
<h6> Título </h6>
Título
Estilos de fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.
Etiqueta Se ve
  • <B>Texto en Negrita</b>
  • <I>Itálica</i>
  • <B><I>Negrita e Itálica</i></b>
  • <U>Subrayado</u>
  • <EM>Enfatizado</em>
  • <STRONG>Fuerte</strong>
  • <CODE>Code Texto</code>
  • <CITE> Citation Text</cite>
  • <KBD>Keyboard Text</kbd>
  • <SAMP>Sample Text</samp>
  • <TT>Teletype Text</tt>
  • <VAR>Variable Element Text</var>
  • <BIG>Texto grande</big>
  • <SMALL>Texto pequeño</small>
  • <SUB>Subindice</SUB>
  • <SUP>Superíndice</SUP>
  • <BLINK> Texto intermitente</blink>
  • <STRIKE>Texto tachado</STRIKE>
  • Texto en Negrita
  • Itálica
  • Negrita e Itálica
  • Subrayado Solo Explorer
  • Enfatizado
  • Fuerte
  • Code Texto
  • Citation Text
  • Keyboard Text
  • Sample Text
  • Teletype Text
  • Variable Element Text
  • Texto grande
  • Texto pequeño
  • Subíndice Solo Explorer
  • Superíndice Solo Explorer
  • Texto intermitente Solo Netscape
  • Texto tachado

etiquetas basicas de HTML

Etiquetas de formato de texto

Salida Etiquetas requeridas
El texto en negritas.
El <B>texto</B> en negritas.
El texto en itálicas.
El <I>texto</I> en
 it&aacute;licas.
El texto en formato teletipo.
El <TT>texto</TT> en
 formato teletipo.
El texto en 2 tamaños más grandes y en rojo. El tamaño puede ser un valor absoluto en el rango 1..7.
El <FONT SIZE = +2 COLOR = "RED">
 texto </FONT> en 2 
 tama&ntilde;os m&aacute;s
 grandes y en rojo. El tama&ntilde;o
 puede ser ... 
Utilizar la dirección de e-mail
claudio@acm.org
para contactarme.
Utilizar la direcci&oacute;n
 de e-mail <ADDRESS> 
 claudio@acm.org </ADDRESS>
 para contactarme.

Etiquetas de encabezamientos


Salida Etiquetas requeridas

Encabezado H1

<H1>Encabezado H1<\H1>

Encabezado H3

<H3>Encabezado H3<\H3>
Encabezado H6
<H6>Encabezado H6<\H6>
Las etiquetas de encabezado generan automáticamente un fin de línea.

Salida Etiquetas requeridas
Justo antes del encabezado.

Un encabezado H2

Justo después del encabezado.
Justo antes del encabezado.
 <H2>Un encabezado H2<\H2>
 Justo despu&eacute;s del
 encabezado.


Párrafos, fin de línea y comentarios



Salida Etiquetas requeridas
Última oración del párrafo. Primera oración del nuevo párrafo.
&Uacute;ltima oraci&oacute;n ...
<P>
Primera oraci&oacute; del ... 
Una oración
sobre otra.
 Una oraci&oacute;n
<BR>
sobre otra.