sábado, 28 de enero de 2012

ATRIBUTOS: Se escriben a continuacion del nombre del elemento. Formula general: nombre_atributo=valor_atributo. El valor del atributo puede ser, una cadena de caracteres, o un nombre. No pueden superar los 1024 caracteres.
COMENTARIOS: la marca es <!...> Comienza con "--" incluye todo el texto hasta que aparesca "--". Se pueden poner espacios en blanco después de cada uno de ellos.
IDENTIFICACIÓN DEL NIVEL HTML DE UN DOCUMENTO. el lenguaje HTML se compone por bloques, cada uno identificado por marcas, mediante una instrucción de inicio y otra de final. Dentro de cada bloque se pueden anidar más, cada uno con un nivel.
ORGANIZACION DE UN DOCUMENTO: Los documentos HTML son un conjunto de elementos anidados, en el nivel más alto el elemento HTML, con cabecera (informacion sobre el documento) y cuerpo (Todo tipo de elementos y marcas) Todos los editores específicos permiten el uso de plantillas.
CABECERA: Puede tener los siguentes datos.
Título: (TITLE), nombre del documento.
Dirección de base: (BASE): para interpretar los enlaces relativos.
El documento es un indice: (ISINDEX) permite introducir palabras clave para buscarlas.
Enlaces relacionados: (LINK)
Metainformación(META), información adicional.
CUERPO: es la parte más importante, aqui esta todo el texto y los objetos.
INSTRUCCIONES BASICAS DE HTML:
COMANDO HTML:Delimita el documento, mediante este comando podemos mostrar la versión de HTML que hayamos usado.
EL COMANDO PARRAFO: inserta un salto de línea al final del párrafo <P> </P>
COMANDO SALTO DE LINEA: <BR> El texto puede flotar al rededor de las imágenes. Para ello usamos el atributo CLEAR, con los valores: left, right, all.
COMANDOS DE ENCABEZAMIENTO: tiene seis niveles de encabezados, el primeron para crear las divisiones mayodres del texto. El sexto para el más pequeño.
APARIENCIA DEL TEXTO: al usar ciertos comandos delimitamos el texto afectado por los cambios. Ej: NEGRITA <B> </B>
CURSIVA <EM> </EM>
SUBRAYADO <U> </U>.
LISTAS: hay dos tipos, sea del tipo que sea, puede tener varios niveles, una puede englobar a otras.
LISTAS NO NUMERADAS: o no ordenadas, <UL> ... </UL> , para los elementos se usa <LI> ... </LI>
LISTAS NUMERADAS, el comando es <OL> ... </OL>, para los elementos se usa <LI> ... </LI>
LISTAS DESCRIPTIVAS: comando <DL> ... </DL>, para los elementos se usa <DT> ... </DT>, y un texto con el comando <DD> ... </DD>
CENTRANDO TEXTO: comando <CENTER> ... </CENTER>
LINEAS HORIZONTALES: comando <HR> ...</HR>
ENLACES: hay cuatro grupos:
-los que hacen referencia a otra parte en el 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 : son conocidos como referencias locales, se componen de dos partes:
REFERENCIA: es la zona en la que se hace clic, aparece subrayada.
NOMBRE REFERENCIADO: esta es la zona del documento a la que accede el usuario al hacer clic.
REFENCIAS A OTROS DOCUMENTOS: es necesario conocer la ubicación del documento, existen dos tipos:
REFERENCIA RELATIVA: debemos especificar la posición del documento en la estructura de subdirectorios
REFERENCIA ABSOLUTA: tendremos que especificar el URL, de la página en cuestion.
REFERENCIAS, A UN LUGAR DE OTRO DOCUMENTO: es una combinación de los dos modos vistos anteriormente.
REFERENCIA A UNA DIRRECCION DE EMAIL: es un enlace a una direccion de correo electrónico en la que se puedan recibir sugerencias realizadas por los usuarios.
OTRAS INSTRUCCIONES IMPORTANTES:
FORMULARIOS: plantilla para que el usuario se comunique con nuestro servidor web. se emplea para acceder a un servicio de información. El conjunto de datos es una secuencia de campos con pares nombre/valor, en los atributos NAME. Al configurar el formulario para uso con un programa CGI, es necesario que el servidor tenga este programa. Elementos:
DECLARACION DE FORMULARIOS, marcas FORM, en su interior estan los elementos input. Atributos:
Action, especifica el URL.
Method, indica el metodo de acceso.
Enctype: especifica el tipo de codificación para el transporte de los pares nombre/valor.
CAMPOS DE ENTRADA (INPUT) representa un campo de entrada de datos, los tipos son
Texto: INPUT TYPE=TEXT. deben incluir el atributo NAME, y como opcionales, MAXLENGHT, SIZE, VALUE.
Password INPUT TYPE= PASSWORD.
Casilla de verificación INPUT TYPE=CHECKBOX
Boton de opcion INPUT TYPE=RADIO.
Boton de envio INPUT TYPE=SUBMIT.
NAME cuyo valor es el atributo VALUE
VALUE indica la etiqueta para el boton.
Pixel de una imagen INPUT TYPE=IMAGE
Boton de reinicio INPUT TYPE=RESET.
CAMPOS DE SELECCION (SELECT)se emplea para reducir el campo a una lista de valores, elementos de tipo <OPTION>, los atributos son: MULTIPLE, NAME, SIZE. SELECTED, VALUE.
AREA DE TEXTO (TEXTAREA), representa un campo de texto de multiples líneas. Los atributos son: COLS, NAME, ROWS.
ENVIO DE FORMULARIOS: el usuario completa el formulario, lo envía. y recibira una respuesta.
TIPO DE CODIFICACIÓN DE FORMULARIOS: al enviar un fórmulario, este se codifica, el tipo de codificación es MIME, los datod obtenidos del formulario se representan asi:
1.-los nombres de campos y valores son preprocesados.
2.-los campos se enlistan en el orden en el que aparecen en el documento.
METODO GET: METHOD=GET. es un metodo de consulta, por ejemplo, las consultas a bases de datos, que no tienen efectos visibles en otros programas.
METODO POST, METHOD POST. se utiliza cuando los datos del formulario realiza una modificación.
MARCOS: nos dan la posibilidad de dividir nuestras paginas Web en varias regiones. Cada marco se puede ver como una página diferente: se le puede asignar un URL, un nombre, permiten redimensionarse dinámicamente. Con los marcos podemos conseguir los siguientes efectos: barras de control, títulos gráficos, etc. Mientras el usuario navega por marcos dinámicos los contenidos del marco estática permanecerán fijos. podemos crear marcos con indices de contenido.
COMANDOS PARA CREAR MARCOS: son:
FRAMESET: define un conjunto de marcos.  incluye los atributos:ROWS, y COLS, para estos atributos será una lista de valores.
FRAME: describe las características concretas de un marco. crea un marco dentro de un conjunto de marcos.
NOFRAMES para los navegadores que no soportan los comandos que hacen referencia a los marcos, pues si no soportan marcos no mostraran su contenido. 
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.
Forma de las celdas individuales.
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.
EDITORES Y CONVERSORES
En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso de herramientas automatizadas para la generación de páginas Web: editores y conversores.
Editores
Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ?

La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética o ocupar una calculadora: ambas cosas no se contraponen entre sí.

Un editor HTML es una gran ayuda al diseñador Web: brinda la posibilidad de disponer y ver la página mientras se crea, y de observar inmediatamente cómo aparecerán distribuidos los colores y los elementos dentro del documento, es una ayuda para recordar las marcas y sus atributos, sin embargo; puede resultar inadecuado por lo siguiente:

•    Poca flexibilidad, y en algunas ocasiones el código que generan en general es difícil de editar o mantener.
•    El conjunto de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga visualizadores, o puede estar obsoleto.
•    El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento.

Es recomendable comenzar por lo básico, procurando aprender HTML bien, creando documentos con editores de texto plano. Después si se desea se puede ocupar una combinación editor de texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades de ambos sistemas.

Los editores HTML se clasifican en dos tipos:

•    Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.
•    No Wysiwyg: ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final.

Por ejemplo, uno de los editores HTML Wysiwyg más completos es el FrontPage 98 de Microsoft (http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, también permite trabajar en modo comando.
Conversores
Las herramientas de conversión permiten transformar un documento escrito en otro formato a un documento HTML.

El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con algún grado de truculencia.

¿Cuándo usarlos? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo previo en otro sistema.

¿Cómo usarlos? la idea básica es simplificar al máximo el documento (eliminar las sangrías, uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento HTML.

Finalmente conviene revisar la salida usando un editor de texto, revisando que el código obtenido sea sintácticamente correcto, y dejando el documento lo suficientemente ordenado y legible como para que sea fácil de modificar al momento de realizar futuras actualizaciones.

Por ejemplo, el paquete ofimático Oficce 97 (Word, Excel, PowerPoint, ...) de Microsoft incorpora un conversor de documentos en formato Word a HTML. También el editor FrontPage 98, anteriormente mencionado, incorpora un conversor de distinto tipos de formato de documentos a HTML.
PUBLICAR LAS PÁGINAS EN INTERNET.
Hasta ahora sólo hemos realizado páginas qué no son visibles desde Internet, sino que solamente se pueden visualizar en modo local en nuestro.

Para publicar nuestras páginas en Internet para que sean accesibles por cualquier otro usuario de Internet debemos transferirlas a un servidor Web, para ello hay que realizar los siguientes pasos:

1.    Probar de forma local el correcto funcionamiento de las páginas creadas.
2.    Solicitar la apertura de una cuenta en dicho servidor Web.
3.    Transferirlas mediante FTP a la cuenta asignada en dicho servidor Web. Teniendo en cuenta que las páginas de deben transferir en modo ASCII, y los gráficos incluidos en las páginas en modo binario.
4. Probar desde Internet el acceso a dichas páginas.

Concretamente en la Universidad de Murcia. el Servicio de Informática ofrece a los Centros, Departamentos, Servicios, Grupos de trabajo e investigación universitarios la posibilidad de incorporar sus propias páginas de Web al servidor central de la Universidad de Murcia. Puede encontrar más información sobre este Servicio de Almacenamiento de páginas en Web en http://www.um.es/si/servicio/www/ind-www.html#et2
ESTRUCTURA DE UN DOCUMENTO
AYUDA PARA EL DEBER

Color del texto
El color del texto puede cambiarse mediante la utilización del atributo color de la etiqueta <font>. El color puede especificarse mediante un nombre de color o mediante una descripción RBG. Veamos un ejemplo:
<html>
        <head>
                <title>ejemplo de color</title>
        </head>
        <body>
                <font color=red>Color rojo</font>
                <font color=green>Color verde</font>
                <font color=#0000ff>Color azul</font>
        </body>
</html>
   




Tipo de fuente
El tipo de fuente se modifica mediante el atributo face de la etiqueta <font>. Si se especifica más de una el navegador utilizará la primera que esté disponible. Las fuentes por lo general varian entre navegadores y entre sistemas operativos, por lo que es conveniente utilizar varias para asegurarnos de que se utilizará alguna de las que deseemos. He aqui un ejemplo:
<html>
        <head>
                <title>ejemplo de tipos de fuentes</title>
        </head>
        <body>
                Fuente por defecto
                <font face="arial">Fuente Arial</font>
                <font face="times">Fuente Times</font>
                <font face="helvetica">Fuente Helvetica</font>
        </body>
</html>
Cabeceras (<h1>..<h6>)
Suelen utilizarse para identificar los titulos de las diferentes secciones de un documento. Suelen aparecer en negrita y con tamaños de letra variando desde muy grande para <h1> hasta muy pequeño para <h6>. El siguiente ejemplo los muestra todos para asi poder distinguir fácilmente los cambios entre ellos:
<html> <head> <title>ejemplo de cabeceras</title> </head> <body> <h1>Cabecera h1</h1> <h2>Cabecera h2</h2> <h3>Cabecera h3</h3> <h4>Cabecera h4</h4> <h5>Cabecera h5</h5> <h6>Cabecera h6</h6> </body> </html>