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 .
- 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 )
- <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>
- Grabe este archivo con el nombre: ejemplo1.html
- Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computador. Puede trabajar Off-line
- Elija "Archivo/Abrir página" en la barra de menú del navegador.
- 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.
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.
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.
No hay comentarios:
Publicar un comentario