sábado, 14 de enero de 2012

LENGUAJE HTML

El LENGUAJE HTML.

¿Qué es HTML?
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Conclusion:
HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador.

HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas.




MI PRIMER DOCUMENTO HTML.
Siga las siguientes instrucciones atentamente; ellas le permitirán crear un documento HTML en su ordenador; este archivo no será visible para otros usuarios de Internet.

Le recomiendo que cree un directorio en su ordenador para almacenar las páginas web que vaya haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet.
las tres practicas realizadas en el laboratorio tienen que también pasar a su blogger además de las consultas realizadas por usted .

  1. Abra el editor de textos: en Windows abra el Block de Notasy si esta en otro sistema operativo como linux abra editor de textos gedit .
     ( para centrar un documento  ) 
  2. <CENTER><H1>Mi primera pagina Web</H1></CENTER>
    <HR>
               
    Teclee lo siguiente:
<HTML>

<HEAD>
<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE>
</HEAD>

<BODY>
<CENTER><H1>Mi primera pagina Web</H1></CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. <BR>Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes.
<P> Aquí va un segundo parrafo.</P>
</BODY>

</HTML>


  

  1. Grabe este archivo con el nombre: ejemplo1.html
  2. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computador. Puede trabajar Off-line
  3. Elija "Archivo/Abrir página" en la barra de menú del navegador.
  4. Seleccione el archivo ejemplo1.html que acaba de crear.

Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.


¡Usted ha creado su primer documento HTML!.


TABLAS
Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.

Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de ejemplos.

Ejemplo de tabla

Aquí se muestra una tabla muy simple:

<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>

Título de la tabla.

Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:

<TABLE>
<CAPTION> Nombre de la tabla </CAPTION>
……….
</TABLE>

Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro de la anchura de la tabla.

Bordes de la tabla.

Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE BORDER="anchura">
……….
</TABLE>

donde anchura indica la anchura en pixels del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=”1”.

Cabeceras de filas y de columnas.

La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas.

Tamaño de la tabla.

Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE WIDTH="anchura"> ……… </TABLE>

Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse íntegramente.

Justificación de la tabla.

Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>.

Espacio dentro de las celdas.

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores:

CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
CELLSPACING: establece la anchura en pixels de los bordes de cada celda.

F Justificación del texto de las celdas.

HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es:

<TABLE>
<TR>
<TD ALIGN=”horizontal” VALIGN=”vertical”>
…..
</TD>
</TR>
……….
</TABLE>

donde:
horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER.

Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.

Celdas de diferentes tamaños.
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin embargo, es posible establecer el tamaños de una determinada celda mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:

WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla.
HEIGHT: establece la altura de una celda individual.

No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La única forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT.

Celdas irregulares.
Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:

COLSPAN= especifica la altura de una celda en concreta en función de la altura de las celdas adyacentes. Se especifica en número de celdas adyacentes.
ROWSPAN: especifica la anchura de una concreta en función del celdas que están debajo. Se especifica en número de celdas de debajo.

Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.

Texto en una solo línea.
Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella, y queremos que el texto no ocupe más líneas, sino que se amplíe la anchura de la celda, debemos añadir el modificador NOWRAP dentro de la etiqueta <TD>.

Ejemplo práctico nº7

<HTML>
<HEAD>
<TITLE>Ejemplo 7 - Tablas</TITLE>
</HEAD>

<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostracion de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo7.html y lo cargamos en el navegador.

Marcas y atributos.

El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora utilizaremos indistintamente uno de 3 términos para denominar a los elementos que se estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre dos signos de menor y mayor como a continuación se muestra:

<marca [atributos]> ......................................[</marca>]




El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el visualizador encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la marca - el símbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa propiedad al texto que viene a continuación.

Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que son insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del texto. En ese caso, el final de la aplicación se especifica con la misma marca precedida de la barra inclinada hacia atrás (/).

Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente forma:

<marca atrib1=“valor1” atrib2=“valor2”..............>

El valor de los atributos se expresan encerrados entre comillas.

En la mayor parte de los visualizadores es posible omitir las comillas y colocar directamente el valor del atributo. Esta práctica. a pesar de estar extendida, no es muy aconsejable ya que no está normalizada, y no esta soportada por la totalidad de los visualizadores.

Algunos atributos sólo viene definidos por su nombre (no tienen valor); son los atributos llamados compactos.



Otras Etiquetas Utiles
Etiqueta de comentarios <!--    -->


Se trata de una etiqueta que es utilizada para realizar comentarios o acotaciones.


Etiqueta de comentarios <comment> </comment>


De igual manera es utilizada  para realizar comentarios.


Etiqueta <adress> </adress>


Ofrece una manera de dar formato a un pequeño cuerpo de texto que se asemeje a la rotulación de una carta convencional.


Etiqueta <cite> </cite>


El texto dentro de la etiqueta aparece en cursiva para representar una cita.


Eiqueta <code> </code>


El texto dentro esta etiqueta aparece en una fuente con caracteres mono espaciados cuando se visualiza a través de un navegador.


Etiqueta <credit> </credit>


Se emplea para indicar créditos por el material incluido en un documento.


Etiqueta <em> </em>


 Indica que se debe dar énfasis al texto que se contiene. El navegador resaltará este texto con negrillas e inclinación itálica.


Etiqueta <kbd></kbd>


Indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo.


Etiqueta <nobr> </nobr>


Impide que el navegador inserte un salto de línea, incluso cuando es adecuado.


Etiqueta <p> </p>


Indica el inicio y final de oraciones a exhibir en un solo párrafo.


Etiqueta <pre> </pre>


Significa texto pre formateado y se usa para conservar espacios y saltos  de línea en lo cuerpos de texto.


Etiqueta <s></s> o <strike></strike>


Instruye al navegador que tache el texto incluido entre las etiquetas.


Etiqueta <strong> </strong>


Hace que el navegador exhiba el texto en negritas.


Etiqueta <sub> </sub>


Instruye al navegador que exhiba el texto especificado como subíndice.


Etiqueta <sup></sup>


Indica al navegado que exhiba el texto especificado como super índice.


Etiqueta <tt> </tt>


Instruye al navegador que exhiba el texto especificado en una fuente de ancho fijo.


Etiqueta <var> </var>


Indica la navegador que exhiba el texto especificado en una fuente mas pequeña, de ancho fijo.


Atributo ="fixed" del BODY


Indica a su navegador Internet explorer que mantenga el fondo constante y no móvil de forma vertical.




Publicado por en No hay comentarios:

CAPITULO 3 "OTRAS INSTRUCCIONES IMPORTANTES"


  • FORMULARIOS
    Un formulario es una plantilla creada para que el usuario se comunique con nuestro servidor de una forma facil.
    El conjunto de datos resultante, despues de la edicion de los campos por el usuario, se emplea para acceder a un servicio de informacion en funcion del metodo de envio y la accion asociada.
    Los nombres se especifican en los atributos NAME de los elementos de entrada del formulario, y los valores toman un valor inicial, que luego pueden ser editados por el usuario.
    Dentro de un formulario podemos encontrar los siguientes elementos:
    -Declaracion del formulario (FORM)
    -Campos de entrada (INPUT)
    -Campos de seleccion (SELECT)
    -Areas de texto (TEXTAREA)
  • DECLARACION DEL FORMULARIO
    La declaracion del formulario se pone entre las marcas:
    <FORM>
        ...
    </FORM>
    En el formulario se pueden incluir:
    -ACTION: Especifica el URL de la accion asociada al formulario.
    -METHOD: Indica el metodo de acceso al URL de la accion.
    -ENCTYPE: Especifica al tipo de codificacion para el transporte de los pares nombre/valor.
  • CAMPOS DE ENTRADA (IMPUT)
    El elemento  <INPUT> representa un campo de entrada de datos.
    Los tipos de entrada son:
    -Texto: INPUT TYPE=TEXT
    Valor por defecto del atributo TYPE.
    Como atributos opcionales puede tomar:
    -MAXLENGTH: Limita el maximo numero de caracteres que pueden ser introducidos en el campo.
    -SIZE: Especifica la cantidad de espacio reservado para este campo.
    -VALUE: indica el valor inicial del campo.
    -PASSWORD: Es un campo de texto como el anterior, pero el valor no se ve al escribirlo.
    -CASILLA DE VERIFICACION: Representa una opcion booleana (si o no).
    -BOTON DE OPCION: Representa una opcion booleana (si o no). Un cojuntode varios elementos de ese tipo con el mismo nombre representan un campo de seleccion multiple.|
    -BOTON DE ENVIO: Representa una opcion, normalmente mediante un boton, que le indica al cliente que enviar al formulario.
    Como atributos:
    -Name: Indica que este elemento constituye un campo cuyo valor es del atributo VALUE.
    -Value: Indica la etiqueta para el boton.
    El elemento <OPCION> solo puede aparecer dentro de un elemento <SELECT>, representa una posible eleccion.
    -Selected: Indica que esta opcion esta seleccionada  inicialmente.
    -Value: Indica el valor a retornar si se selecciona la opcion.
  • AREA DE TEXTO (TEXTAREA)El elemento <TEXTAREA> representa un campo de texto de multiples lineas. Los atributos son:
    -COLS: El numero de columnas visibles.
    -NAME: Nombre del campo.
    -ROWS: El numero de lineas visibles.
  • ENVIO DE FORMULARIOS
    El contenido de los campos es el de sus valores por defecto, ya sea en blanco o con texto.
  • TIPO DE CODIFICACION DE FORMULARIOS
    Al enviar un formulario este se codifica. El tipo de codificacion es: MIME.
    -METODO GET: METHOD=GET
    El metodo de envio GET es un metodo de consulta. El servidor recibe los datos en una variable de entorno llamada QUERYSTRING.
    -METODO POST: METHOD =POST
    Se utiliza cuando los dats del formulario realiza una modificacion, en la base de datos.
    Al procesarse un formulario cuyo URL de accion es de tipo HTTP.
  • MARCOS
    Los marcos, nos brindan la posibilidad de dividir nuestras pagina web en varias regiones, lo que nos permitira presentar el contenido mas estructurado.
    Con los marcos podemos conseguir los siguientes efectos:
    -Los elementos como de control, que nos interesa que aparezcan fijos.
    -Podemos crear marcos con indices de contenido.
    -Del diseño de una pagina con marcos paralelos.
  • COMANDOS PARA CREAR MARCOS
    Los comandos utilizados son:
    <FRAMESET>
          ...
    </FRAMESET>
    -FRAME: describe las caracteristicas concretas de un  marco.
  • El comando FRAMESET
    El elemento <FRAMESET> nos permite definir el contenedor principal para otros marcos.
    Veamos los tipos de valores:
    -Valor: Un valor numerico simple es tama;o fijo en pixeles.
    -Valor %. Con este valor indicaremos un porcentaje del tama;o de la ventana.
    -Valor*.El valor de este campo es relativo.
  • El comando FRAME
    El comando o marca <FRAME> crea un marco dentro de un conjunto de marcos.
  • El comando NOFRAMES
    Es incluir una alternativa para estos navegadores. De esta forma, nos aseguramos de que el usuario recibe la informacion deseada de una forma u otra.
Publicado por en No hay comentarios:

martes, 10 de enero de 2012

CAPITULO 2 " INSTRUCCIONES BASICAS DE HTML"


  • El comando HTML
    Este comando se utiliza para delimitar el documento. Las marcas de principio y fin son:
    <HTML>
         ...
    </HTML>
    Mediante este comando, podremos indicar al lector la version de HTML que hayamos usado.
  • El comando Parrafo
    Este comando inserta automaticamente un salto de linea al final del parrafo, y crea el espaciado adecuado entre los diferentes parrafos del documento.
    <P>...</P>
  • El comando salto de linea
    Para insertarun salto de linea utilizaremos el comando <BR>
    Puesto que en HTML, el texto puede flotar alrededor de las imagenes, utilizaremos el atributo CLEAR que podra tomar los valores: left, right y all.
  • Los comandos de encabezamiento
    El texto en HTML, cuenta con 6 niveles de encabezados. Utilizaremos el primer  nivel de encabezado para crear las divisiones mayores del texto.
    El sexto nos mostrarael texto mas pequeño.
    Hay que tener en cuenta que estos comandos insertan un salto de linea tras el texto que comprenden.
  • APARIENCIA DEL TEXTO
    La apariencia del texto, es una de las caracteristicas que haran mas atractivas nuestras paginas web.
    No debemos olvidar que estos comandos pueden ser utilizados conjuntamente.
    Apariencia que podemos dar al texto:
    -Negrita:
    <B>...</B>
    -Cursiva:
    <EM>...</EM>
    -Parpadeo:
    <BLINK>...</BLINK>
    -Asignar un tamaño fijo y apariencia de caracteres de maquina de escribir:
    <TT></TT>
    -Subrayado:
    <U>...</U>
  • LISTAS
    En un documento HTML se pueden incluir dos tipos de listas.
  • Listas no numeradas
    Este tipo de listas son conocdas tambien como listas no ordenadas.
    Utilizaremos el comando:
    <UL>...</UL>
    Los elementos de la lista se indicaran con:
    <LI>...</LI>
  • Listas numeradas
    Se crean por medio del comando:
    <OL>...</OL>
    Al igual que en las listas no numeradas, cada elemento de la lista se indicara mediante:
    <LI>...</LI>
  • Listas descriptivas
    Usaremos el comando:
    <DL>...</DL>
    Cada uno de los elementos de la lista tendra un titulo, marcado como:
    <DT>...</DT>
    Y un texto para cada titulo, que sera indicado por el comando:
    <DD>...</DD>
    Este tipo de lista esta especialmente indicada para crear indices.
  • CENTRADO TEXTO
    Podemos centrar cualquier parte del documento por medio del comando:
    <center>...</center>
    Simplemente, tendremos que delimitar la parte o partes del texto que deseamos que aparezcan centradas.
  • LINEAS HORIZONTALES
    En muchas ocasiones, necesitaremos separar el texto de los elementos, o el texto de la pagina.
    La linea horizontal, se inserta con el comando <HR>, que acepta varios modificaciones.
  • ENLACES
    Los enlaces, pueden ser clasificados en 4 grupos:
    -Los que hacen referencia a otra parte del mismo documento.
    -Los que hacen referencia a otro documento.
    -Los que hacen referencia a otra parte de otro documento.
    -Los que hacen referencia a una direccion de correo electronico.
  • Referencias en el mismo documento
    De crear enlaces que llever al usuario a un lugar del documento a otro, dentro del mmismo documento, por medio de un clic. Este tipo de enlaces, son conocidos como referencias locales.
  • La referencia
    Es la zona en la que el usuario hace clic, para desplazarse a otra parte del documento.
    Para crear una referencia local, delimitaremos la zona con el comando:
    <A href="#nombre">Texto del enlace</A>
  • El nombre referenciado
    Esta es la zona del documento a la que accede el usuario al hacer clic en la referencia correspondiente.
    El comando es:
    <A NAME="nombre">...</A>
  • Referencias a otros documentos
    Para crear un enlace a otro documento, es inprescindible conocer la ubicacion del documento al que queremos hacer referencia.
    Existen dos tipos de referencia a una ubicacion: relativa y absoluta.
    -Referencia relativa: Tendremos que especificar la posicion del documento en la estructura de subdirectorios.
    Con el comando:
    <A href="ubicacion">Texto del enlace</A>
    -Referencia absoluta: Para crear una referencia absoluta, tendremos que especificar la direccion o URL>
    Para enlazar un Hypertexto, usaremos el comando:
    <A "href=http=//ordenador/directorio/archivo">
    En "ordenador", indicaremos el nombre de la maquina en la que se encuentre el documento.
    En "directorio" y "archivo", indicaremos la ubicaciondel documento dentro del ordenador.
  • Referencias a un lugar de otro documento
    Para crear este tipo de enlaces, indicaremos el URL del documento al que hacemos referencia, escribiremos un signo # y finalmente introduciremos el nombre de la zona a enlazar.
  • Referencia a una direccion e-mail.
    Un enlace a una direccion de correo electronico en la que se puedan recibir sugerencias realizadas por los usuarios. Para ello, escribiremos:
    <A href="mailto:direccion de email">Texto del enlace</A>
    De todos modos, es conveniente escribir la direccion de correo electronico en el texto del enlace.
Publicado por en No hay comentarios:

sábado, 7 de enero de 2012

CAPITULO 1 "EL LENGUAJE 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:
    &amp;

    -Referencia numerica: en lugar de dar la referencia por nombre, se escribe # seguido del numero de caracter. Por ejemplo:
    &#38; 
  • 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>



Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)