HTML Básico

AMPLIAR

Convenios

Lenguaje basado en etiquetas con atributos:




<TABLE BORDER=1 CELLPADDING=5>



</table>

Algunas etiquetas pueden no cerrarse. Ejemplo <TR>.
Mayúsculas y minúsculas son iguales.

Comentarios:




<!-- Esto es un comentario HTML -->

Estructura de una Página




<HTML>



<HEAD>

  <TITLE>El titulo</TITLE>

</HEAD>



<BODY>

   El contenido de la página:

   Texto, imágenes, enlaces, etc.

</BODY>



</HTML>

HEAD: Contiene información sobre el documento que no se ve en la pantalla.
BODY: Contenido de la página a visualizar.
Según la norma debería ponerse en primer lugar una etiqueta:

<!DOCTYPE HTML información>
Indica el tipo de documento.
Se suele omitir.

Formatear párrafos

El formato en el que se escribe HTML es libre.
Para separar párrafos usar <P> el párrafo </P>.
El terminador es opcional.
Atributo ALIGN. Valores: left, center o right.
Nueva línea dentro del mismo párrafo: <BR>.
Atributo CLEAR. Valores: left, right o all. Se usa para saltar detrás de imágenes flotantes.
Incluir texto preformateado con un font de espaciado fijo: <PRE> </PRE>.
Atributo WIDTH: ancho a reservar medido en espacios en blanco.
Cita textual (indentado a ambos lados): <BLOCKQUOTE> </BLOCKQUOTE>.

Este es el primer párrafo que usaré en este ejemplo sobre como se deben formatear los párrafos en un documento HTML.

Un nuevo párrafo.
Segunda línea.


  for (i=1 ; i<10 ; i++) {

     print $i

  }

Un blockquote:

En un lugar de la Mancha de cuyo nombre no quiero acordarme, vivía un ilustre caballero




<P>

Este es el primer párrafo 

que usaré en este 

ejemplo sobre como 



se deben formatear los párrafos

en un documento HTML.

</P>

<P> 

Un nuevo párrafo.<BR>Segunda línea.

</P>

<PRE>

  for (i=1 ; i<10 ; i++) {

     print $i

  }

</PRE>

Un blockquote:

<BLOCKQUOTE>

  En un lugar de la Mancha 

  de cuyo nombre 

  no quiero acordarme, vivía

  un ilustre caballero

</BLOCKQUOTE>

Estructurar el documento HTML en divisiones:

<DIV [ALIGN=left|center|right]> texto <DIV>

Es similar a <P>.

Cabeceras

Tipos de cabeceras:

Cabecera 1	`<H1>Cabecera 1</H1>`
Cabecera 2	`<H2>Cabecera 2</H2>`
Cabecera 3	`<H3>Cabecera 3</H3>`
Cabecera 4	`<H4>Cabecera 4</H4>`
Cabecera 5	`<H5>Cabecera 5</H5>`
Cabecera 6	`<H6>Cabecera 6</H6>`

El atributo ALIGN=left|center|right controla la alineación.

Listas numeradas

Lista numerada secuencialmente.

Primera entrada
Segunda entrada
Tercera entrada


  <OL>

    <LI> Primera entrada

    <LI> Segunda entrada

    <LI> Tercera entrada

  </OL>

Atributos de OL:

START=numero número inicial
TYPE=1|A|a|I|i tipo de numeración
Atributos de LI:

VALUE=numero número de ese punto
TYPE=1|A|a|I|i tipo de numeración

Listas no numeradas

Lista sin numerar cada punto:

Primera entrada
Segunda entrada
Tercera entrada


  <UL>

    <LI> Primera entrada

    <LI> Segunda entrada

    <LI> Tercera entrada

  </UL>

Atributos de UL y LI:

TYPE=circle|square|disc tipo de punto

Listas menú

Primera entrada

Segunda entrada

Tercera entrada


  <MENU>

    <LI> Primera entrada

    <LI> Segunda entrada

    <LI> Tercera entrada

  </MENU>

Listas directorio

Primera entrada

Segunda entrada

Tercera entrada


  <DIR>

    <LI> Primera entrada

    <LI> Segunda entrada

    <LI> Tercera entrada

  </DIR>

Listas de definiciones

Uno:: Primera entrada del glosario del ejemplo
Dos:: Segunda entrada
Tres:: Tercera entrada


  <DL>

    <DT> Uno:  <DD> Primera entrada 

                   del glosario del 

                   ejemplo

    <DT> Dos:  <DD> Segunda entrada

    <DT> Tres: <DD> Tercera entrada

  </DL>

Enfatizadores lógicos

texto normal	`texto normal`
texto resaltado	`<EM>texto resaltado</EM>`
texto muy resaltado	`<STRONG>texto muy resaltado</STRONG>`
`código fuente`	`<CODE>código fuente</CODE>`
`texto como ejemplo`	`<SAMP>texto como ejemplo</SAMP>`
`texto a teclear`	`<KBD>texto a teclear</KBD>`
`nombre de variable`	`<VAR>nombre de variable</VAR>`
definición	`<DFN>definición</DFN>`
una cita	`<CITE>una cita</CITE>`
inline quote	`<Q>inline quote</Q>`

Enfatizadores físicos

texto normal	`texto normal`
texto más grande	`<BIG>texto más grande</BIG>`
texto más pequeño	`<SMALL>texto más pequeño</SMALL>`
texto en negrita	`<B>texto en negrita</B>`
texto en itálica	`<I>texto en itálica</I>`
`typewriter font`	`<TT>typewriter font</TT>`
texto subrayado	`<U>texto subrayado</U>`
~~texto tachado~~	`<STRIKE>texto tachado</STRIKE>`
texto parpadenate	`<BLINK>texto parpadeantelt;/BLINK>` Sólo Netscape
texto_subindice	`texto<SUB>subindice</SUB>`
texto^superindice	`texto<SUP>superindice</SUP>`

Caracteres especiales

Necesarios para los que no son ASCII de 7 bits.

"	`"`	`"`
&	`&`	`&`
á	`á`	`á`
é	`é`	`é`
ü	`ü`	`ü`
ñ	`ñ`	`ñ`
non-breaking space	` `

Fuentes

El tipo de fuente se controla con FONT

Control del tamaño:

Tamaño normal
Tamaño 2	`<FONT SIZE=2>Tamaño 2</FONT>` Valores entre 1 y 7.
Subir 3	`<FONT SIZE=+3>Subir 3</FONT>`
Bajar 3	`<FONT SIZE=-3>Bajar 3</FONT>`

Se puede sugerir el tamaño del font para resto del documento usando la etiqueta BASEFONT:

<BASEFONT SIZE=5>

Tipo de fuente:

Helvetica	`<FONT FACE=helvetica>Helvetica</FONT>`
Courier	`<FONT FACE=Courier>Courier</FONT>`
Times	`<FONT FACE=Times>Times</FONT>`
Arial	`<FONT FACE=Arial>Arial</FONT>`
Lista de fonts	`<FONT FACE="Arial, Times">Lista de fonts</FONT>`

Si no encuentra ninguno de los fonts especificados usa el por defecto.

Colores:

Rojo <FONT COLOR=red>Rojo</FONT>
Verde <FONT COLOR=#00ff00>Verde</FONT>

Líneas horizontales

	`<HR>`
	`<HR WIDTH=200>`
	`<HR WIDTH=50%>`
	`<HR WIDTH=200 ALIGN=left>`
	`<HR WIDTH=200 ALIGN=right>`
	`<HR SIZE=10>`
	`<HR NOSHADE SIZE=10>`

Centrado

Usar <CENTER> </CENTER> para centrar en la pantalla.

Ejemplo: texto centrado


Ejemplo:

<CENTER>

texto centrado

</CENTER>

Dirección

Se usa para firmar una página o insertar información de contacto.
Suele colocarse al final trás un línea <HR>

El documento

Enrique A. de la Cal Marín
Universidad de Oviedo




  El documento



  <HR>



  <ADDRESS>

    Enrique A. de la Cal Marín<BR>

    Universidad de Oviedo

  </ADDRESS>

Enlaces

Enlace a un URL. Usar la etiqueta <A> </A> con la dirección destino como valor del atributo HREF.

Saltar al DI Saltar al <A HREF="http://www.di.uniovi.es">DI</A>
Punto de anclaje: Lugar al que se puede saltar dentro de un documento.

<A NAME="ancla1">Primera línea a visualizar</A>
Saltar a un punto de anclaje:

Ir a sitio en mi página Ir a <A HREF="#ancla1">sitio</A> en mi página

URL

Formato de un URL:


protocolo:/usuario:password@maquina:puerto/path?query

Todo es opcional.

Ejemplos:

http://di076.edv.uniovi.es

http://di076.edv.uniovi.es/~delacal/pp.html

file:/home/delacal/index.html

ftp://hermes.epsig.uniovi.es/pub/ftp/siscomp/ejemplo.zip

mailto:delacal@ccia.uniovi.es

Atributos de `BODY`

Color uniforme de fondo	`<BODY BGCOLOR=yellow>`
Imagen como fondo	`<BODY BACKGROUND=nubes.gif>`
Color del texto	`<BODY TEXT=blue>`
Color de los enlaces	`<BODY LINK=white>`
Color de los enlaces visitados	`<BODY VLINK=black>`
Color de los enlaces activos	`<BODY ALINK=#44dd44>`

`START=numero`	número inicial
`TYPE=1\|A\|a\|I\|i`	tipo de numeración

`VALUE=numero`	número de ese punto
`TYPE=1\|A\|a\|I\|i`	tipo de numeración

Rojo	`<FONT COLOR=red>Rojo</FONT>`
Verde	`<FONT COLOR=#00ff00>Verde</FONT>`