informatica: resumenes de las clases de html

Generalidades

El lenguaje HTML es un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. Este lenguajees una aplicacion del GSML(standard generalized mackup languaje).
Fundamentos:
Caracteres:Dependiendo del editor de textos el documento HTML puede tener distintos juegos de caracteres.

Toda cadena de caracteres se visualizara en el navegador.

Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto, se definen dos mecanismos de referencia:

-Referencia por nombre: el caracter se representa con un & seguido del nombre del caracter y un punto y coma. Por ejemplo:

&

-Referencia numerica: en lugar de dar la referencia por nombre, se escribe # seguido del numero de caracter. Por ejemplo:

&
Marcas:

Las marcas delimitan los elementos de un documento HTML, como cabeceras, parrafos, etc.

Las marcas siempre constan de dos partes, una marca de inicio y otra de final.

Las marcas iniciales se escriben entre los simbolos "<"y">" y las finales entre "</"y">".Por ejemplo:

<H1>Contenido</H1> es una cabecera de nivel uno.

Al utilizar algunos elementos, no siempre es obligatorio la marca de final de cierre.
Nombres:

Los nombres se componen se una letra seguida de letras.
Atributos:

Cuando una marca inicial admite atributos, estos se escriben a continuacion del nombre del elemento:

nombre_atributo=valor_atributo

Aunque en algunos casos, basta con el nombre del atributo.

El valor de un atributo puede ser:

-Una cadena de caracteres entre comillas que contenga el simbolo de fin de marca (>).

-Un nombre.
Comentarios:

La manera de incluir se realiza mediante la marca de comentarios:

<! ... >

Cada comentario comienza con "..." e incluye todo el texto.

Identificacion del nivel HTML de un documento.

El lenguaje HTML se compone por bloques, cada uno identifican mediante una instruccion de inicio y otra de final.

ORGANIZACION DE UN DOCUMENTO

Los documentos en formato HTML son un documento de elementos anidados. En el nivel mas alto, nos encontramos HTML que consta de dos partes:: cabecera y cuerpo.

En la cabecera se proporciona informacion acerca del documento, mientras que el cuerpo contiene el texto de la pagina.
Cabecera:

La cabecera es una informacion acerca de las caracteristicas generales del documento. Las marcas de principio y fin del bloque son:

<HEAD>

...

</HEAD>

Puede contener los siguientes datos:

-Titulo(TITLE). Indica el nombre del documento.

-Direccion de base(BASE). Proporciona una direccion de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto.

-El documento es un indice(ISINDEX). Si se pone la palabra clave ISINDEX, el cliente interpretara que la pagina es un indice y permitira al usuario introducir palabras claves para buscarlas.

-Enlaces relacionados(LINK).En la cabecera podemos ncluir varios enlaces relacionados con el documento, como versiones anteriores, direccion del autor, etc.

-Metainformacion(META).Sirve para proporcionar informacion sobre el documento que no pueda ser expresada en los campos anteriores. La informacion se escribe usando nombre/valor que pueden ser empleados para dos propositos:

1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera.

2. Para que un usuario incluya informacion adicional sobre el documento.
Cuerpo:

El cuerpo contiene la parte mas importante del documento HTML. Es donde vamos a insertar todo el texto y los objetos van a ser presentados al usuario.

<BODY>

</BODY>

Generalidades

El lenguaje de HTML (Hypertext Markup Language), es un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documnetos. Este lenguaje es una aplicación del SGML (Standar Generalizer Makup Languaje)

Dividiremos la descripción del lenguaje en varias partes:

Descripcion de los componentes básicos de HTML: se indica el formato de los caracteres, marcas, nombres, atributos y comentarios.

Estructura de los documentos: hablaremos de las marcas empleadas para definir las partes de un documento

Caracteres, palabras y párrafos: juegos de caracteres aceptados en HTML

Caracteres hipermedia: además de las marcas de formato, necesitamos marcas para definir relaciones

Formularios. permiten la interaccion del usuario y el servidor mediante la definición de plantillas de formulario

Tablas: en los documentos HTML se pueden introducir tablas

Mapas: con los mapas creamos imagenes interactivas con el usuario

Capas: con las capas estructuramos los documentos HTML

FUNDAMENTOS

CARACTERES

toda cadena de caracteres imprimibles que no represente una maraca, se visualizará en el navegadro literalmente. Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcas el texto, se definen dos mecanismos de referencia:

Referencia por nombre: el carácter se representa con un & seguido del nombre del carñácter y un punto y coma. Por ejemplo:

& sera el carácter &, y: < el carácter <.

Referencia numérica: en lugar de dar la referencia por nombre, se escribe # seguido del número de carácter en el código de caracteres seleccionado. Por ejemplo:

& será el carácter &, y: < el carácter <.

MARCAS

Las marcas delimitan los elementos de un documento HTML, como cabeceras, parrafos, etc. Constan de dos partes, una marca de inicio del elemento y otra marca de finalizacion del elemento.

Las marcas iniciales de escriben entre los símbolos "<" y ">" y las finales entre "</" y "/>"

NOMBRES

Los nombres se componen de una letra seguida de letras, dígitos o guiones.

La longitud del nombre está limitada a 72 caracters. Los nombre no se distinguen entre mayúsculas o minúsculas, pero los nombre de entidades, sí

ATRIBUTOS

Cuando una marca inicial admite atributos, éstos se ecbriben a continuación del nombre del elemento:

nombre_atributo=valor_atributo

COMENTARIOS

Se realiza mediante la marca de comentarios:

<!.......>

Todo comentario comineza con "--" e incluye todo el texto hasta la siguiente aparicion de "--"

IDENTIFICACIÓN DEL NIVEL HTML

El lenguaje HTML se compone por bloques, cada uno identificado por marcas. Dentro de cada bloque se pueden anidar más bloques, uno dentro de otro. Cada bloque correspondería con un nivel del documento HTML

ORGANIZACION DEL DOCUMENTO

Los documentos en formato HTML son un conjunto de elementos anidados. En el nivel más alto, nos encontramos el elemneto HTMl (marca inicial<HTMl> y al final </HTML> que consta de dos partes: cabecera y cuerpo

CABECERA

La cabecera es una informacion acerca de las caracteristicas generales de documento. Las marcas de principio y fin del bloque son :

<HEAD>........</HEAD>

Puede contener los siguientes datos:

TITULO: (TITLE)

DIRECCION DE BASE: (BASE)

EL DOCUMENTO ES UN INDICE: (ISINDEX)

ENLACES RELACIONADOS: (LINK)

METAINFORMACION: (META)

CUERPO
El cuerpo contiene la parte más importante del documento. Sus marcas son:

<BODY>.......</BODY>

A continuacion dos videos muy claro sobre el tema:

INTRODUCCIONES BASICAS DE HMTL.

EL COMANDO HTML

EL COMANDO DE PARRAFO

EL COMANDO DE SALTO DE LINEA

<BR>

LOS COMANDO DE ENCABEZAMIENTO

APARIENCIA DE TEXTO

NEGRITA: <B>.......</B>

CURSIVA: <EM>.....</EM>

PARPADEO: <BLINK>.......</BLINK>

ASIGNAR UN TAMAÑO FIJO: <TT>.......</TT>

SUBRAYADO: <U>.......</U>

LISTAS

LISTAS NO NUMERADAS: <UL>......</UL> los elementos con: <LI>.....</LI>

LISTAS NUMERADAS: <OL>.......</OL> los elementos con: <LI>.......</LI>

LISTAS DESCRIPTIVAS: <DL>......</DL> los elementos con: <DT>....</DT> y cada título con <DD>.......</DD>

CENTRANDO TEXTO

LINEAS HORIZONTALES

<HR>

ENLACES

Para hacer una referencia que nos lleve a una parte del mismo documento: <A href= "#nombre"> Texto del enlace </A>

El nombre referenciado: <A NAME= "nombre">........</A>

Referencias a otros documentos

Referencia relativa: <A href= "ubicacion"> Texto del enlace </A>

Referencia Absoluta: <A "href= http//ordenador7directorio/archivo">

Referencia a una direccion e-mail: <A href= "mailto:dirección de e-mail"> Texto del enlace </A>

LOS FORMULARIOS

Un formulario es una plantilla creada para que el usuario se comunique con nuestro servidor Web de una forma fácil. Igualment, nos puede enviar informacion de una forma ordenada, dependiendo de las etiquetas que suministremos en el formulario.

Dentro de un formulario podemos encontrar los siguientes elementos:

• Declaración del fomulario (FORM)

• Campos de entrada (INPUT)

• Areas de texto (TEXTAREA)

Declaración del Formulario

La declaración del formulario se pone entre las marcas:

<FORM>.........</FORM>

En la definición del formulario se pueden incluir los siguientes atributos:

• ACTION. Especifica el URI (Universal Resource Identifier) de la acción asociada al formulario.

• METHOD. Indica el método de acceso al URI de la acción. Se puede emplear los métodos GET y POST.

• ENCTYPE. Especifica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno.

Campus de entrada (IMPUT)
El elemento <IMPUT> representa un campo de entrada de datos.
Los tipos de entrada son:

• TEXTO: IMPUT TIPE=TEXT

• MAXLENGTH. Limita el máximo de caracteres

• SIZE. Especifica la cantidad de espacio reservado para este campo

• PASSWORD. IMPUT TYPE = PASSWORD.

• CASILLA DE VERIFICACION: INPUT TYPE=CHECKBOX

• BOTON DE OPCIÓN: INPUT TYPE=RADIO

• BOTÓN DE ENVIO: INPUT TYPE=SUBMIT

• NAME:Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE

• VALUE: Indica la etiqueta para el botón

• PIXEL DE LA IMAGEN: INPUT TYPE=IMAGE

• BOTÓN DE REINICIO: INPUT TYPE=RESET

Campos de selección (SELECT)

El elemento <SELECT> se emplea para reducir el campo a una lista de valores.

Estos valores se presentan empleando elementos de tipo <OPTION>. Los atributos de elemento son:

• MULTIPLE. Indica que el valor puede incluir mas de uan opción.

• NAME. Especifica el nombre del campo.

• SIZE. Determina el numero de ítems visibles.

• SELECTED. Indica que esta opción está seleccionada inicialmente.

• VALUE. Indica el valor a retornar si se selecciona la opción

Área de texto (TEXTAREA)
El elemento <TEXTAREA> representa un campo de texto de multiples líneas. Los atributos son:

• COLS. El numero de columnas visibles.

• NAME. nombre del campo

• ROWS. El numero de ñíneas visibles

Envío de Formularios
Al presentarse el formulario al usuario por primera vez, el contenido de los campos es el de sus valores por defecto, ya sean en blanco o con texto.

Tipo de Codificación de Formularios
Al enviar un formulario este se codifica. El tipo de codificacion por defecto es, segun el esquema MIME. De esta forma, los datos obtenidos del formulario se presentan asi:

1. Los nombre de campos y los valores son reemplazados por le símbolo "+", y los caracteres son sustituidos con los del URL

2. Los campos se enlistan en el orden en el que aparecen en el documento.

Método Get: METHOD=GET
El método de envió GET es un método de consulta. El servidor recibe los datos en una variable de entorno llamada QUERYSTRING
Un ejemplo de formularios que se utilizan el método GET son las consultas a bases de datos, que no tienen efectos visibles en otros programas
Al procesarse un formulario cuyo URL de acción es un URL de tipo HTML, el navegador genera un URI que comienza con el de acción, al que se le añade un interrogante y el conjunto de datos codificado.

Método Post: METHOD=POST
El método de envio POST, se tiliza cuando los datos del formlario realiza una modificación, por ejemplo, en la base de datos

MARCOS
Los marcos o frames nos brindan la posibilidad de dividir nuestras páginas Web en varias regiones.
Cada marco puede verse como una página independiente:

• Se lo puede asignar un URL de modo que pueda cargar informacion de modo independiente.

• Es posible asignarle nombre, permitiendo que sea referenciado por otros URLs

• Permiten redimensionarse denamicamente.

Con los marcos podemos conseguir los siguiente efectos.

• Los elementos como barras de control, titulos graficos. Es decir, mientras el usuario navega por los marcos dinámicos los contenidos seguiran estáticos.

• Podemos crear marcos con índices de contenido, de tal manera, que la información se presente en otro marco contiguo.

• Dle mismo modo, el diseño de una página con marcos paralelos. nos permitira enviar consultas en un marco y que estas sean divisadas en el otro.

COMANDOS PARA CREAR MARCOS:

• FRAMESET define un conjunto de marcos.

• FRAME describe las caracteristicas de un marco

<FRAME>

• NOFRAMES que utilizan los navegadores que no soportan los comandos que hacen referencia a los marcos.

A continuacion unos videos sobre el tema: