SlideShare ist ein Scribd-Unternehmen logo
1 von 10
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.
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.
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.
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.
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.
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>
<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>
<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>
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>
<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
prueba </TD>
<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
prueba </TD>
</TABLE>

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Yinller22014
Yinller22014Yinller22014
Yinller22014
 
Html
HtmlHtml
Html
 
Html wendy martinez
Html wendy martinezHtml wendy martinez
Html wendy martinez
 
Html
HtmlHtml
Html
 
historia de html
historia de htmlhistoria de html
historia de html
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
Html1
Html1Html1
Html1
 
Avila lara 2
Avila lara  2Avila lara  2
Avila lara 2
 
Avila lara 2
Avila lara  2Avila lara  2
Avila lara 2
 
Consultas profe
Consultas profe Consultas profe
Consultas profe
 
Valleyy mishi
Valleyy mishiValleyy mishi
Valleyy mishi
 
Historia Del HTML
Historia Del HTMLHistoria Del HTML
Historia Del HTML
 
Html icredes
Html icredesHtml icredes
Html icredes
 
Html tarea
Html tareaHtml tarea
Html tarea
 
Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0
 
MANUAL DE PROCESOS INFORMÁTICOS
MANUAL DE PROCESOS INFORMÁTICOSMANUAL DE PROCESOS INFORMÁTICOS
MANUAL DE PROCESOS INFORMÁTICOS
 
David cuellar
David cuellarDavid cuellar
David cuellar
 
Rosiicontabilidadsegundo semestre
Rosiicontabilidadsegundo semestreRosiicontabilidadsegundo semestre
Rosiicontabilidadsegundo semestre
 

Ähnlich wie Perito en industria alimentaria susan y evelyn (20)

Html nathaly fajardo, melissa gomez
Html nathaly fajardo, melissa gomezHtml nathaly fajardo, melissa gomez
Html nathaly fajardo, melissa gomez
 
Colegio debora arango perez
Colegio debora arango perezColegio debora arango perez
Colegio debora arango perez
 
HTML :D TRABAJO DE HTML :D
HTML :D TRABAJO DE HTML :DHTML :D TRABAJO DE HTML :D
HTML :D TRABAJO DE HTML :D
 
Trabajo de informatica que es HTML
Trabajo de informatica que es HTMLTrabajo de informatica que es HTML
Trabajo de informatica que es HTML
 
Eduardo cordón
Eduardo cordónEduardo cordón
Eduardo cordón
 
Que es html
Que es htmlQue es html
Que es html
 
Rosi karina
Rosi karinaRosi karina
Rosi karina
 
Rosi karina
Rosi karinaRosi karina
Rosi karina
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html5
Html5Html5
Html5
 
Access
AccessAccess
Access
 
Access
AccessAccess
Access
 
Html
HtmlHtml
Html
 
Historia del HTML
Historia del HTMLHistoria del HTML
Historia del HTML
 
Html
HtmlHtml
Html
 
Html thony
Html thonyHtml thony
Html thony
 
Alexandra gonzález
Alexandra gonzálezAlexandra gonzález
Alexandra gonzález
 
Htm lxmlcarlosguerra2 a3
Htm lxmlcarlosguerra2 a3Htm lxmlcarlosguerra2 a3
Htm lxmlcarlosguerra2 a3
 
Que son etiquetas de html daniela veliz
Que son etiquetas de html daniela velizQue son etiquetas de html daniela veliz
Que son etiquetas de html daniela veliz
 

Mehr von yisellruano

Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.yisellruano
 
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.yisellruano
 
La web lópez ruano.
La web lópez ruano.La web lópez ruano.
La web lópez ruano.yisellruano
 
La web lópez ruano.
La web lópez ruano.La web lópez ruano.
La web lópez ruano.yisellruano
 
Susan yisell lópez ruano 5to b
Susan yisell lópez ruano 5to bSusan yisell lópez ruano 5to b
Susan yisell lópez ruano 5to byisellruano
 

Mehr von yisellruano (7)

Software
SoftwareSoftware
Software
 
Informe
InformeInforme
Informe
 
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
 
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
Instituto tecnologico de nor oriente que es duolingo susan yisell lópezx ruano.
 
La web lópez ruano.
La web lópez ruano.La web lópez ruano.
La web lópez ruano.
 
La web lópez ruano.
La web lópez ruano.La web lópez ruano.
La web lópez ruano.
 
Susan yisell lópez ruano 5to b
Susan yisell lópez ruano 5to bSusan yisell lópez ruano 5to b
Susan yisell lópez ruano 5to b
 

Kürzlich hochgeladen

RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONamelia poma
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptNancyMoreiraMora1
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesMarisolMartinez707897
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primariaWilian24
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
prostitución en España: una mirada integral!
prostitución en España: una mirada integral!prostitución en España: una mirada integral!
prostitución en España: una mirada integral!CatalinaAlfaroChryso
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresJonathanCovena1
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCCarlosEduardoSosa2
 

Kürzlich hochgeladen (20)

RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
PP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomasPP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomas
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
prostitución en España: una mirada integral!
prostitución en España: una mirada integral!prostitución en España: una mirada integral!
prostitución en España: una mirada integral!
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por Valores
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 

Perito en industria alimentaria susan y evelyn

  • 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>
  • 10. <TD WIDTH=100 BACKGROUND="sfondo26.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo61.jpg"> prueba </TD> </TABLE>