CONCEPTOHTML, siglas de HyperText Markup Language («lenguaje de marcado dehipertexto»), hace referencia al lenguaje de mar...
Historia de HTMLPrimeras especificacionesLa primera descripción de HTML disponible públicamente fue undocumento llamado HT...
ElementosLos elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas:atributos y contenid...
Códigos HTML                                                                          relevancia.                         ...
Nociones básicas de                                    sitio que buscar la opción en el programa mismo.                   ...
Extensible Markup LanguageExtensible Markup Language (XML) Desarrollador World Wide Web Consortium Informacióngeneral Exte...
HistoriaXML proviene de un lenguaje inventado por IBM en los años setenta, llamado GML (GeneralizedMarkup Language), que s...
Ventajas del XMLEs extensible: Después de diseñado y puesto en producción, es posibleextender XML con la adición de nuevas...
Taller 1 mariana barreto
Taller 1 mariana barreto
Próxima SlideShare
Cargando en…5
×

Taller 1 mariana barreto

587 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
587
En SlideShare
0
De insertados
0
Número de insertados
62
Acciones
Compartido
0
Descargas
4
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Taller 1 mariana barreto

  1. 1. CONCEPTOHTML, siglas de HyperText Markup Language («lenguaje de marcado dehipertexto»), hace referencia al lenguaje de marcado predominante para laelaboración de páginas web que se utiliza para describir la estructura y elcontenido en forma de texto, así como para complementar el texto conobjetos tales como imágenes. El HTML se escribe en forma de «etiquetas»,rodeadas por corchetes angulares (<,>). HTML también puede describir, hastaun cierto punto, la apariencia de un documento, y puede incluir un script (porejemplo JavaScript), el cual puede afectar el comportamiento denavegadores web y otros procesadores de HTML.1HTML también sirve para referirse al contenido del tipo de MIME text/htmlo todavía más ampliamente como un término genérico para el HTML, ya sea enforma descendida del XML (como XHTML 1.0 y posteriores) o en formadescendida directamente de SGML (como HTML 4.01 y anteriores).
  2. 2. Historia de HTMLPrimeras especificacionesLa primera descripción de HTML disponible públicamente fue undocumento llamado HTML Tags (Etiquetas HTML), publicado porprimera vez en Internet por Tim Berners-Lee en 1991.Describe 22elementos que incluyen el diseño inicial y relativamente simple deHTML. Trece de estos elementos todavía existen en HTML 4.Berners-Lee consideraba a HTML una ampliación de SGML, pero nofue formalmente reconocida como tal hasta la publicación demediados de 1993, por la IETF, de una primera proposición para unaespecificación de HTML: el boceto Hypertext Markup Language deBerners-Lee y Dan Connolly, el cual incluía una Definición de Tipo deDocumento SGML para definir la gramática.El boceto expiró luego deseis meses, pero fue notable por su reconocimiento de la etiquetapropia del navegador Mosaic usada para insertar imágenes sin cambiode línea, que reflejaba la filosofía del IETF de basar estándares enprototipos con éxito. De la misma manera, el boceto competidor deDave Raggett HTML+ (Hypertext Markup Format) (Formato deMarcaje de Hipertexto), de finales de 1993, sugería estandarizarcaracterísticas ya implementadas, como las tablas.
  3. 3. ElementosLos elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas:atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considereválido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo,<nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributosdel elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dosetiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>).Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo selistan varios tipos de elementos de marcado usados en HTML.Estructura general de una línea de código en el lenguaje de etiquetas HTML.El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf»como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar altítulo «Marcado HTML» al principio de esta sección. El marcado estructural no define cómo se verá elelemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos.Puede aplicarse un formato específico al texto por medio de hojas de estilo en cascada.
  4. 4. Códigos HTML relevancia. <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila).básicos <a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org" title="Wikipedia"<html>: define el inicio del documento HTML, le indica al navegador target="_blank" tabindex="1">Wikipedia</a> se representa comoque lo que viene a continuación debe ser interpretado como código Wikipedia).HTML. Esto es así de facto, ya que en teoría lo que define el tipo de <div>: división de la página. Se recomienda, junto con css, en vez dedocumento es el DOCTYPE, que significa la palabra justo tras <table> cuando se desea alinear contenido.DOCTYPE el tag de raíz, por ejemplo: <img>: imagen. Requiere del atributo src, que indica la ruta en la que<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" se encuentra la imagen. Por ejemplo: <img"http://www.w3.org/TR/html4/strict.dtd"> src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad,<script>: incrusta un script en una web, o llama a uno mediante poner un atributo alt="texto alternativo".src="url del script". Se recomienda incluir el tipo MIME en el <li><ol><ul>: etiquetas para listas.atributo type, en el caso de JavaScript text/javascript. <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la<head>: define la cabecera del documento HTML; esta cabecera etiqueta <strong>).suele contener información sobre el documento que no se muestra <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar ladirectamente al usuario como, por ejemplo, el título de la ventana del etiqueta <em>).navegador. Dentro de la cabecera <head> es posible encontrar: <s>: texto tachado (etiqueta desaprobada. Se recomienda usar laUn ejemplo de código HTML con coloreado de sintaxis. etiqueta <del>).<title>: define el título de la página. Por lo general, el título aparece <u>: texto subrayado.en la barra de título encima de la ventana. La mayoría de etiquetas deben cerrarse como se abren, pero con una<link>: para vincular el sitio a hojas de estilo o iconos. Por barra («/») tal como se muestra en los siguientes ejemplos:ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">. <table><tr><td>Contenido de una celda</td></tr></table>.<style>: para colocar el estilo interno de la página; ya sea usando CSS <script>Código de un [[script]] integrado en la página</script>.u otros lenguajes similares. No es necesario colocarlo si se va avincular a un archivo externo usando la etiqueta <link>.<meta>: para metadatos como la autoría o la licencia, incluso paraindicar parámetros http (mediante http-equiv="") cuando no sepueden modificar por no estar disponible la configuración o pordificultades con server-side scripting.<body>: define el contenido principal o cuerpo del documento. Esta esla parte del documento html que se muestra en el navegador; dentrode esta etiqueta pueden definirse propiedades comunes a toda lapágina, como color de fondo y márgenes. Dentro del cuerpo <body> esposible encontrar numerosas etiquetas. A continuación se indicanalgunas a modo de ejemplo:<h1> a <h6>: encabezados o títulos del documento con diferente
  5. 5. Nociones básicas de sitio que buscar la opción en el programa mismo. Existe otro tipo de editores HTML llamadosHTML WYSIWYM que dan más importancia al contenido y al significado que a la apariencia visual. Entre losEl lenguaje HTML puede ser creado y editado con objetivos que tienen estos editores es la separacióncualquier editor de textos básico, como puede ser del contenido y la presentación, fundamental en elGedit en Linux, el Bloc de notas de Windows, diseño web.TextWrangler en mac, o cualquier otro editor que HTML utiliza etiquetas o marcas, que consisten enadmita texto sin formato como GNU Emacs, breves instrucciones de comienzo y final, mediante lasMicrosoft Wordpad, TextPad, Notepad++, entre cuales se determina la forma en la que debe aparecerotros. en su navegador el texto, así como también lasExisten, además, otros editores para la realización de imágenes y los demás elementos, en la pantalla delsitios web con características WYSIWYG (What You ordenador.See Is What You Get, o en español: «lo que ves es lo Toda etiqueta se identifica porque está encerradaque obtienes»). Estos editores permiten ver el entre los signos menor que y mayor que (<>), y algunasresultado de lo que se está editando en tiempo real. tienen atributos que pueden tomar algún valor. EnAhora bien, esto no significa una manera distinta de general las etiquetas se aplicarán de dos formasrealizar sitios web, sino que una forma un tanto más especiales:simple, ya que estos programas, además de tener la Se abren y se cierran, como por ejemplo:opción de trabajar con la vista preliminar, tiene su <b>negrita</b>, que se vería en su navegador web comopropia sección HTML, la cual va generando todo el negrita.código a medida que se va trabajando. Algunos No pueden abrirse y cerrarse, como <hr />, que seejemplos de editores WYSIWYG son KompoZer, vería en su navegador web como una línea horizontal.Microsoft FrontPage o Adobe Dreamweaver. Otras que pueden abrirse y cerrarse, como porCombinar estos dos métodos resulta muy interesante, ejemplo <p>.ya que de alguna manera se ayudan entre sí. Por Las etiquetas básicas o mínimas son:ejemplo, si se edita todo en HTML y de pronto se <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTMLolvida algún código o etiqueta, simplemente me dirijo 4.01//EN"al editor visual o WYSIWYG y se continúa ahí la "http://www.w3.org/TR/html4/strict.dtd"> <htmledición o viceversa, ya que hay casos en que resulta lang="es"> <head> <title>Ejemplo</title> </head> <body>más rápido y fácil escribir directamente el código de <p>ejemplo</p> </body> </html>alguna característica que el usuario desea adherir al
  6. 6. Extensible Markup LanguageExtensible Markup Language (XML) Desarrollador World Wide Web Consortium Informacióngeneral Extensión de archivo .xml Tipo de MIME application/xml, text/xml Tipo de formatoLenguaje de marcado Estándar(es) 1.0 (Fourth Edition)1.1 (Second Edition) Formato abierto ? XML, siglas en inglés de eXtensible Markup Language(lenguaje de marcas extensible), es un lenguaje de marcas desarrollado por el World WideWeb Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajesespecíficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML)paraestructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases dedatos, siendo útil cuándo varias aplicaciones se deben comunicar entre sí o integrarinformación. (Bases de datos Silberschatz).XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándarpara el intercambio de información estructurada entre diferentes plataformas. Se puede usaren bases de datos, editores de texto, hojas de cálculo y casi cualquier cosa imaginable.XML es una tecnología sencilla que tiene a su alrededor otras que la complementan y la hacenmucho más grande y con unas posibilidades mucho mayores. Tiene un papel muy importante enla actualidad ya que permite la compatibilidad entre sistemas para compartir la información deuna manera segura, fiable y fácil.
  7. 7. HistoriaXML proviene de un lenguaje inventado por IBM en los años setenta, llamado GML (GeneralizedMarkup Language), que surgió por la necesidad que tenía la empresa de almacenar grandescantidades de información. Este lenguaje gustó a la ISO, por lo que en 1986 trabajaron paranormalizarlo, creando SGML (Standard Generalized Markup Language), capaz de adaptarse aun gran abanico de problemas. A partir de él se han creado otros sistemas para almacenarinformación.1En el año 1989 Tim Berners Lee creó la web, y junto con ella el lenguaje HTML. Este lenguajese definió en el marco de SGML y fue de lejos la aplicación más conocida de este estándar. Losnavegadores web sin embargo siempre han puesto pocas exigencias al código HTML queinterpretan y así las páginas web son caóticas y no cumplen con la sintaxis. Estas páginas webdependen fuertemente de una forma específica de lidiar con los errores y las ambigüedades, loque hace a las páginas más frágiles y a los navegadores más complejos.Otra limitación del HTML es que cada documento pertenece a un vocabulario fijo, establecidopor el DTD. No se pueden combinar elementos de diferentes vocabularios. Asimismo esimposible para un intérprete (por ejemplo un navegador) analizar el documento sin tenerconocimiento de su gramática (del DTD). Por ejemplo, el navegador sabe que antes de unaetiqueta <div> debe haberse cerrado cualquier <p> previamente abierto. Los navegadoresresolvieron esto incluyendo lógica ad hoc para el HTML, en vez de incluir un analizadorgenérico. Ambas opciones, de todos modos, son muy complejas para los navegadores.Se buscó entonces definir un subconjunto del SGML que permita:Mezclar elementos de diferentes lenguajes. Es decir que los lenguajes sean extensibles.La creación de analizadores simples, sin ninguna lógica especial para cada lenguaje.Empezar de cero y hacer hincapié en que no se acepte nunca un documento con errores desintaxis.
  8. 8. Ventajas del XMLEs extensible: Después de diseñado y puesto en producción, es posibleextender XML con la adición de nuevas etiquetas, de modo que se puedacontinuar utilizando sin complicación alguna.El analizador es un componente estándar, no es necesario crear un analizadorespecífico para cada versión de lenguaje XML. Esto posibilita el empleo decualquiera de los analizadores disponibles. De esta manera se evitan bugs y seacelera el desarrollo de aplicaciones.Si un tercero decide usar un documento creado en XML, es sencillo entendersu estructura y procesarla. Mejora la compatibilidad entre aplicaciones.Podemos comunicar aplicaciones de distintas plataformas, sin que importe elorigen de los datos, es decir, podríamos tener una aplicación en Linux con unabase de datos Postgres y comunicarla con otra aplicación en Windows y Basede Datos MS-SQL Server.Transformamos datos en información, pues se le añade un significadoconcreto y los asociamos a un contexto, con lo cual tenemos flexibilidad paraestructurar documentos.

×