1. Perito en Industria Alimentaria.
Dubley Omar Sandoval Hernández.
Informática ll.
Que es HTML?, SU EVOLUCIÒN Y TABLA DE ETIQUETAS.
López Ruano Susan Yisell.
Evelyn Yulissa Linares Orellana.
2. QUE ES HTML?
HTML, siglas de HyperText Markup Language («lenguaje de marcas de
hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas
web. Es un estándar que sirve de referencia para la elaboración de páginas web en
sus diferentes versiones, define una estructura básica y un código (denominado
código HTML) para la definición de contenido de una página web, como texto,
imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a
la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo
referente a su escritura e interpretación.
El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir
un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se
incrusta directamente en el código de la página, sino que se hace una referencia a
la ubicación de dicho elemento mediante texto. De este modo, la página web
contiene sólo texto mientras que recae en el navegador web (interpretador del
código) la tarea de unir todos los elementos y visualizar la página final. Al ser un
estándar, HTML busca ser un lenguaje que permita que cualquier página web
escrita en una determinada versión, pueda ser interpretada de la misma forma
(estándar) por cualquier navegador web actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido
diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo
de páginas web compatibles con distintos navegadores y plataformas (PC de
escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para
interpretar correctamente una nueva versión de HTML, los desarrolladores de
navegadores web deben incorporar estos cambios y el usuario debe ser capaz de
usar la nueva versión del navegador con los cambios incorporados. Normalmente
los cambios son aplicados mediante parches de actualización automática (Firefox,
Chrome) u ofreciendo una nueva versión del navegador con todos los cambios
incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador
no actualizado no será capaz de interpretar correctamente una página web escrita
en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas
veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir
problemas de visualización e incluso de interpretación de código HTML. Así mismo,
las páginas escritas en una versión anterior de HTML deberían ser actualizadas o
reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores aún
mantienen la capacidad de interpretar páginas web de versiones HTML anteriores.
3. Por estas razones, aún existen diferencias entre distintos navegadores y versiones
al interpretar una misma página web.
EVOLUCIÒN DE HTML.
La idea de Berners-Lee surgió hacia el 1989 y en los dos años siguientes definía el
HTML como un subconjunto del SGML al que más tarde llamaría nivel 0.
Esta primera versión solamente marcaba encabezados, listas y anclas pero fue
suficiente para que se creara la World Wide Web. Surgieron varias versiones de
este primer HTML pero ninguna de ellas llegaría a convertirse en el estándar oficial.
Lo más cercano fue el HTML 2.0, al cual se le puso el nombre para distinguirlo de
la colección de estándares no oficiales que iban surgiendo.
Tim Berners fundaría el W3C (World Wide Web Consotium) en 1995 y poco después
surgió el borrador de la tercera versión, HTML 3.0. Éste daba mucha más libertad
de creación al diseñador web.
Facilitaba la creación de tablas, el texto podía fluir alrededor de las figuras y se
mostraban elementos matemáticos complejos. Sus creadores pretendían que fuera
compatible con la versión anterior pero era demasiado complejo como para que lo
soportaran los navegadores de la época.
En septiembre de ese mismo año se abandonó el proyecto debidoa la falta de apoyo
de los fabricantes de navegadores web. La siguiente versión tampoco llegó a ser
propuesta oficialmente.
Una nueva versión, el HTML 3.2 abandonaba muchos de los elementos que se
habían introducido en el HTML 3.0 a cambio de acoger los elementos que habían
desarrollado los fabricantes de navegadores web como Netscape y Mosaic.
4. Por ejemplo, se abandonó la posibilidad de introducir fórmulas matemáticas
complejas para delegarlo en un estándar distinto, el MathML. La última versión es
el HTML 4.0, que también incluye muchos elementos específicos que habían sido
desarrollados para un navegador web determinado pero que, a su vez, calificó a
muchos de ellos como “desaprobados”.
El camino evolutivo del HTML ha sido complejo, se ha tenido que lidiar con muchas
partes y finalmente ha cesado. Pero las tecnologías continúan avanzando y su
heredero ahora es el XHTML.
La base y el objetivo son los mismos pero esta vez entra un elemento nuevo en
escena, el XML. Otro estándar que se asemeja en funcionalidad al SGML pero que
es más sencillo y más joven. Así pues de la “fusión” de estos dos estándares, XML
y HTML, surge el XHTML.
El XHTML
EXtensible Hypertext Markup Language (lenguaje extensible de marcado de
hipertexto). El XHTML es el lenguaje de marcado que debe sustituir el HTML. Sigue
las especificaciones del XTML que son más estrictas de lo que hemos visto hasta
ahora.
Con este nuevo lenguaje estándar la información que ofrece la página web y la
presentación de la misma quedan claramente separadas. Así pues el XHTML tiene
la responsabilidad de reproducir la información mientras que el diseño queda en
manos de las hojas de estilo y el JavaScript.
Siendo el sucesor del HTML, algunos lo consideran la versión actual de éste pero
lo cierto es que la W3C sigue recomendando el HTML 4.0 y las distintas versiones
de XHTML para publicar en la web.
Este nuevo estándar se hizo necesario en el momento que empezaban a proliferar
otros dispositivos, además de los ordenadores, capaces de reproducir la
información de la web. Un ejemplo claro son los móviles, que no están preparados
para afrontar la complejidad sintáctica del HTML.
5. En la mayoría de los casos no hay problemas de compatibilidad con el nuevo
lenguaje, las viejas versiones de navegadores leen el XHTML como si se tratase de
HTML, las nuevas lo interpretan correctamente y casi todas ellas son perfectamente
compatibles con el viejo estándar.
Lo que en principio supone una ventaja, es criticado por algunos expertos que esta
compatibilidad ralentiza el proceso de cambio, la evolución. El problema se plantea
así: algunos autores se ven obligados a elegir entre la escritura de documentos
válidos o un contenido factible de ser visualizado en la mayoría de ordenadores.
El dilema está abierto y no es de respuesta fácil. El rasgo definitorio de Internet, la
globalidad, a la vez que la ensalza la limita.
Son muchos los intereses en juego, las personas que trabajan en su desarrollo y
aún más los que sufren-benefician de sus cambios. Poner en común todos estos
factores es ardua tarea, la historia del HTML es tan solo un pequeño ejemplo.
TABLA DE ETIQUETAS DE HTML.
La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que
señala la apertura y cierre de una tabla. Las dimensiones se definen mediante
WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento
respecto a la página:
<TABLE WIDTH=500>
</TABLE>
En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si
se elige esta opción, sea cual sea la resolución con la que venga vista la página, la
medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de
500 píxel.
6. No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un
porcentaje:
<TABLE WIDTH=50%>
</TABLE>
En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo
del usuario.
Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de
unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de
la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de
400 píxel.
En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión
de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.
Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para
ello utilizaremos algunas imágenes:
Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que
<TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla
propiamente dicha:
<TABLE BORDER=1 WIDTH=300>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
7. <TD WIDTH=100>
</TD>
</TABLE>
Prueba prueba prueba
En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este
tipo:
Como podemos observar, hemos introducido una nueva marca <TR>, que es una
especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser
transformado en código y, por tanto, en una tabla propiamente dicha:
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TR>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
8. <TD WIDTH=100>
</TD>
</TR>
</TABLE>
Prueba prueba prueba
Prueba prueba prueba
El espacio entre los diversos campos de una tabla se define dentro de la marca
</TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en
píxel):
<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>
La colocación del texto y de las imágenes dentro de los distintos campos <TD> de
la tabla puede ser modificada de varias maneras:
<TABLE WIDTH=300 HEIGHT=200>
<TD WIDTH=100 VALIGN=TOP>
PRUEBA </TD>
<TD WIDTH=100 VALIGN=BOTTOM>
PRUEBA </TD>
<TD WIDTH=100 VALIGN=MIDDLE>
PRUEBA </TD>
</TABLE>
PRUEBA PRUEBA PRUEBA
<TABLE WIDTH=300 HEIGHT=200>
<TD WIDTH=100 ALIGN=RIGHT>
9. PRUEBA </TD>
<TD WIDTH=100 ALIGN=CENTER>
PRUEBA </TD>
<TD WIDTH=100 ALIGN=LEFT>
PRUEBA </TD>
</TABLE>
PRUEBA PRUEBA PRUEBA
Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo
como los de las páginas web normales (los fondos pueden ser sustituidos con GIF
animadas):
<TABLE WIDTH=300 HEIGHT=200>
<TD WIDTH=100 BGCOLOR="RED">
PRUEBA </TD>
<TD WIDTH=100 BGCOLOR="YELLOW">
PRUEBA </TD>
<TD WIDTH=100 BGCOLOR="GRAY">
PRUEBA </TD>
</TABLE>
PRUEBA PRUEBA PRUEBA
<TABLE WIDTH=300 HEIGHT=230>
<TD width=100 BACKGROUND="sfondo15.jpg">
prueba </TD>