(X)HTMLEsquema

­ Conceptos previos­ ¿Qué es HTML?­ Gramática de HTML­ Estructura básica de un documento HTML­ Cuerpo del documento­ Hipertexto y marcadores­ Listas­ Imágenes­ Formularios­ Tablas­ Hojas de estilo

(X)HTMLConceptos previos

­  World Wide Web es uno de los servicios que se pueden encontrar en Internet, pero no el único (correo electrónico, FTP, news ...)

­ Internet es una red de ordenadores que intercambian información basándose en TCP/IP.

­ Protocolo HTTP (HyperText Transfer Protocol)*Es un protocolo de nivel aplicación.*No tiene estados para la transferencia de información.*Su principal ventaja sería la versatibilidad, al ser un protocolo genérico y orientado a objetos puede servir como base para la transferencia de información de muy diversos tipos.

(X)HTMLConceptos previos

­ URL (Uniform Resource Locator)Es una cadena de caracteres utilizada para representar un recurso físico o abstracto.

El esquema utilizado por URL para denominar un recurso:

<protocolo>://<ident_máquina><ident_vía>?<consulta>donde:­ protocolo: es el protocolo utilizado para la localización.

­ ident_maquina: es el identificador de la máquina (remota o local) que incluye el identificador de máquina, el dominio así como el puerto por el que se realiza la conexión.­ ident_vía: es el path dentro de la máquina.

­ ? consulta: cuando se necesita realizar algún tipo de consulta. No siempre es necesario.Ejemplos: 

http://www.red.es/pub/index.html ftp://ftp.red.es/pub/index.txt

(X)HTML¿Qué es HTML?

­ Hypertext Markup Language

Lenguaje: Con HTML no se crean aplicaciones, sino documentos.

Markup:  Un  documento  HTML  es  un  archivo  de  texto  enriquecido  con instrucciones  que  un  programa  navegador  es  capaz  de  interpretar.  Estas instrucciones se denominan “etiquetas” o “tag”.

Hipertexto: Con HTML podemos definir zonas que, al activarlas desde un programa navegador, permite acceder a otros documentos HTML de otros recursos en Internet, intranet o en el propio ordenador del usuario.

(X)HTMLGramática de HTML

Al crear un documento HTML utilizaremos:

ElementosAtributosReferencias a caracteresComentarios

Elementos:  Representan  las  estructuras  mediante  las  que  se  organiza  el contenido  del  documento  o  acciones  que  desencadenan  cuando  el  programa navegador interpreta el documento.La etiqueta de inicio tiene la forma:

<NOMBRE DE ELEMENTO>La etiqueta de fin:

</NOMBRE DE ELEMENTO>

Entre las etiquetas de principio y fin se incluye el contenido que puede consistir en otros elementos, textos o referfencias a caracteres.

Existen  elementos  que  no  tienen  contenido,  ni  etiqueta  de  fin.  Por  ejemplo: <BR> que provoca un salto de línea dentro de un mismo párrafo.

(X)HTMLGramática de HTML

Atributos: Los elementos pueden llevar asociados propiedades llamadas atributos. Los atributos pueden tener valores.

Los pares atributo/valor siempre se colocan en la etiqueta de inicio del elemento, nunca en la de fin.

El nombre del atributo va seguido por el signo = y el valor entre comillas.

Ejemplo:

<a href=”Bram Stoker.html”>Bram Stocker </a>

(X)HTMLGramática de HTML

Referencias a caracteres: Son nombres numéricos o simbólicos de caracteres que pueden incluirse en un documento HTML. 

Comienzan con el carácter “&” y terminan con “;”.

Ver explicación de UNICODE y ASCII.

Algunos caracteres especiales:

á ­­­> &aacute; ­­> &#225;é ­­­> &eacute; ­­> &#233;í ­­>  &iacute; ­­> &#237; 

Comentarios: Los comentarios son ignorados por el navegador y no se visualizan. Sirven para dar claridad al documento. Tienen la siguiente sintaxis:

<!­­ comentario en una línea ­­><!­­ comentario en

dos líneas ­­>

(X)HTMLGramática de HTML

Anidar  comentarios:  Casi  todos  los  elementos  pueden  anidarse  o  estar contenidos dentro de otros elementos.

Ejemplo:

<p>De  un  elemento  que  se  encuentra  dentro  de  otro  se  dice  que  está  <i> contenido</i> en él.</p>

Elementos de bloque: Son aquellos que crean automáticamente saltos de línea: encabezados, tablas, párrafos y líneas horizontales.

Elementos de línea: Son los que no crean saltos de línea. Se encuentran siempre contenidos dentro  de elementos de bloque, nunca de forma independiente.

(X)HTMLGramática de HTML

Los applets, los sonidos, imágenes, etc. que se pueden encontrar en los documentos HTML son recursos a los que se puede hacer referencia desde el documento, NO SE ENCUENTRAN EN ÉL.

Lo que sí se encuentra son las referencias e instrucciones para que el navegador los recupere y ubique en el documento.

Las tres DTD's de HTML4:

DTD: Definición de tipo de documento. Define la sintaxis de las estructuras de marcas.

Existen, en HTML 4 tres DTD's:estricta: incluye todos los elementos y atributos que no han sido declarados “desaprobados”.

Flexible: incluye todo lo anterior más los elementos “desaprobados”

con marcos: Agrega todo lo incluido en la flexible más lo relativo a la creación de marcos.

(X)HTMLGramática de HTML

Comenzamos con algunos elementos:

Elementos de encabezado: Incluyen 6 tamaños distintos:h1 (el mayor)­­h6(el menor).

Normalmente  no  se  utilizan  tamaños  inferiores  a  h4  por  ser  demasiados pequeños.

Necesitan, en DTD estrictas, el elemento de finalización:

Ejemplo:

<h1>Drácula</h1>

(X)HTMLGramática de HTML

Salto de línea:.<br>No tiene etiqueta de finalización.

Líneas horizontales:<hr>No tiene etiqueta de finalización.Dispone de cuatro atributos: align, noshade, size, width.

Align: valores “left”, “right” y “center”size: grosor de la línea en píxeles.Width: el ancho, en porcentaje. Por defecto es el 100%.noshade: no crea sombra en la línea.

<hr align=”center” width=”50” size=”6”> 

(X)HTMLGramática de HTML

Los espacios en blanco:HTML define que una secuencia de espacios en blanco se contrae en uno solo.

Con  el  elemento  <pre>...</pre>  se  respetan  el  testo  tal  y  como  se  haya introducido.

Si  lo  que  queremos  es  añadir  un  único  espacio  podemos  utilizar  la  entidad &nbsp;

Otros elementos:<p>...</p> párrafo<i>...</i> cursiva<b>...</b> negrita<a href=”...”>...</a> hiperenlace (se estudiará con más detalle)

Caracteres de control:   Se utilizan para poder introducir caracteres especiales dentro del texto y que sean visualizados por el navegador

&lt;  <&gt; >&amp; &&quot; “