- GeneralidadesEl 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_atributoAunque 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 DOCUMENTOLos 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 formularioTablas: en los documentos HTML se pueden introducir tablasMapas: con los mapas creamos imagenes interactivas con el usuarioCapas: con las capas estructuramos los documentos HTMLFUNDAMENTOSCARACTEREStoda 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 <.MARCASLas 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 "/>"NOMBRESLos 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íATRIBUTOSCuando una marca inicial admite atributos, éstos se ecbriben a continuación del nombre del elemento:nombre_atributo=valor_atributoCOMENTARIOSSe realiza mediante la marca de comentarios:<!.......>Todo comentario comineza con "--" e incluye todo el texto hasta la siguiente aparicion de "--"IDENTIFICACIÓN DEL NIVEL HTMLEl 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 HTMLORGANIZACION DEL DOCUMENTOLos 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 cuerpoCABECERALa 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
<HTML>.........</HTML>
EL COMANDO DE PARRAFO
<P>.........</P>
EL COMANDO DE SALTO DE LINEA
<BR>
LOS COMANDO DE ENCABEZAMIENTO
<H1>.........</H1>
<H2>..........</H2>
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
<CENTER>..........</CENTER>
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:
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:
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:
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:
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.
<FRAMSET>..........</FRAMSET>
•
FRAME describe las caracteristicas
de un marco
<FRAME>
•
NOFRAMES que utilizan los navegadores que
no soportan los comandos que hacen referencia a los marcos.
<NOFRAMES>.........................</NOFRAMES>
.jpg)
.jpg)
