SlideShare une entreprise Scribd logo
1  sur  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>

Contenu connexe

Tendances (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
 

Similaire à 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
 

Plus de 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
 

Plus de 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
 

Dernier

Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfpatriciaines1993
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
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
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 
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
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 

Dernier (20)

Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
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
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
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
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 

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>