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

Transcripción

1 Esquema 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

2 Conceptos 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.

3 Conceptos 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: ftp://ftp.red.es/pub/index.txt

4 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.

5 Al crear un documento HTML utilizaremos: Elementos Atributos Referencias a caracteres Comentarios 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.

6 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>

7 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: á > á > á é > é > é í > í > í 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 >

8 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.

9 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.

10 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>

11 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 >

12 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 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 < < > > & & "