Expo html

20

description

expo #emicesi

Transcript of Expo html

Page 1: Expo html
Page 2: Expo html

El hipertexto es una tecnología que organiza una base de información en bloques distintos de contenidos, conectados a través de una serie de enlaces cuya activación o selección provoca la recuperación de información [Díaz et al, 1996].

Page 3: Expo html

HTML, siglas de HyperText Markup Language

(Lenguaje de Marcado de Hipertexto), es el

lenguaje de marcado predominante para la

elaboración de páginas web. Es usado para

describir la estructura y el contenido en forma de

texto, así como para complementar el texto con

objetos tales como imágenes. HTML se escribe en

forma de "etiquetas", rodeadas por

corchetes angulares (<,>). HTML también puede

describir, hasta un cierto punto, la apariencia de un

documento.

Page 4: Expo html

El hipertexto tiene relación directa con la interfaz de usuario, para la producción de documentos principalmente, y se enfoca en redactar, diseñar y escribir un texto.

El texto producido es de una escritura no secuencial, que bifurca la información permitiendo que el lector elija cuál es el camino que le resulte más cómodo para leerlo, esto se debe a la presencia de nodos, hipervínculos o hiperenlaces, haciendo la actividad multisecuencial, lo que exige de un lector activo, que esté interesado en “perderse” en la gran gama de posibilidades del conocimientos que el hipertexto puede ofrecer.

Page 5: Expo html
Page 6: Expo html

No es lineal.Es eminentemente interactivo.Permite al autor ofrecer un contexto rico en información relacionada en torno a sus ideas principales. Permite al usuario leer, coescribir y comprender información más efectivamente.Si no está bien estructurado o si el usuario no ha desarrollado las competencias adecuadas, se puede desorientar fácilmente.Permite seleccionar los temas de interés

Page 7: Expo html

Los hipervínculos son los enlaces de hipertexto que se construyen a partir de una palabra, frase o imagen, para ir a otra unidad de información, a otra página o a otro sitio Web.

Los diferentes tipos de hipervínculos son:Enlace para ir a otra página del mismo sitio Enlace para ir a otro sitio o a la página de otro sitioEnlace a parte del mismo documentoEnlace de correo electrónico

Page 8: Expo html

Elementos

Los 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 considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Page 9: Expo html

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML).De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img).

Page 10: Expo html

<head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:

<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana <link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css"> <style>: para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link> <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.

Page 11: Expo html

<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo: <h1> a <h6>: encabezados o títulos del documento con diferente relevancia. <table>: define una tabla <tr>: fila de una tabla <td>: celda de de una tabla (Debe estar dentro de una fila)

Page 12: Expo html

<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">Wikipedia</a> se representa como Wikipedia) <div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo". <li><ol><ul>: Etiquetas para listas. <b>: texto en negrita (Etiqueta desaprobada. Se recomienda usar la etiqueta <strong>) <i>: texto en cursiva (Etiqueta desaprobada. Se recomienda usar la etiqueta <em>) <s>: texto tachado (Etiqueta desaprobada. Se recomienda usar la etiqueta <del>) <u>: texto subrayado

Page 13: Expo html

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de Notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Existen además, otros editores para la realización de sitios Web con características WYSIWYG (What You See Is What You Get, o en español: “lo que ves es lo que obtienes”). Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a medida que se va trabajando. Algunos ejemplos de editores WYSIWYG son KompoZer, Microsoft FrontPage, o Macromedia Dreamweaver.

Page 14: Expo html

Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo; si se edita todo en HTML y de pronto se olvida algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí la edición, o viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el código de alguna característica que queramos adherirle al sitio, que buscar la opción en el programa mismo.

Existe otro tipo de editores HTML llamados WYSIWYM (Lo que ves es lo que quieres decir) que dan más importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la separación del contenido y la presentación, fundamental en el diseño Web.HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.

Page 15: Expo html

Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:Se abren y se cierran, como por ejemplo: <b>negrita</b> que se vería en su navegador web como negrita.

No pueden abrirse y cerrarse, como <hr /> que se vería en su navegador web como una línea horizontal. Otras que pueden abrirse y cerrarse, como por ejemplo <p>. Las etiquetas básicas o mínimas son: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="es"> <head> <title>Ejemplo</title> </head> <body> <p>ejemplo</p> </body> </html>

Page 16: Expo html

El diseño en HTML aparte de cumplir con las especificaciones propias del lenguaje debe respetar unos criterios de accesibilidad web, siguiendo unas pautas, o las normativas y leyes vigentes en los países donde se regule dicho concepto. Se encuentra disponible y desarrollado por el W3C a través de las Pautas de Accesibilidad al Contenido Web 1.0 WCAG (actualizadas recientemente con la especificación 2.0), aunque muchos países tienen especificaciones propias, como es el caso de España con la Norma UNE 139803.

Page 17: Expo html

El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un DOM.

Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.

Page 18: Expo html

En contraste, el término más general "página web dinámica" lo usamos para referirnos a alguna página específica que es generada de manera diferente para cada usuario, en cada recarga de la página o por valores específicos de variables de entorno. Este término no debe ser confundido con DHTML. Estas páginas dinámicas son el resultado bien de la ejecución de un programa en algún tipo de lenguaje de programación en el servidor de la página web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la página antes de enviarla al cliente, o bien de la ejecución en la parte cliente de un código que crea la página completa antes de que el programa cliente (usualmente, un navegador) la visualice.

Page 19: Expo html

Entre los usos más habituales del DHTML están el hacer menús desplegables, imágenes que cambian al pasar el cursor sobre ellas, objetos en movimiento, botones que permiten desplazar el texto que se está mostrando, textos explicativos que aparecen al situar el cursor sobre ciertas palabras clave, cronómetros, etc.

Otro uso interesante de esta tecnología es la creación de juegos de acción que utilizan el navegador web para funcionar, aunque tradicionalmente este tipo de desarrollos han sido complicados debido a las diferencias en el lenguaje y las características soportadas por los distintos navegadores existentes. Recientemente los navegadores más populares han empezado a soportar estándares comunes, como el DOM, lo cual ha facilitado mucho la creación de este tipo de aplicaciones.

Page 20: Expo html

http://www.eduteka.org/Hipertexto1.php http://iteso.mx/~carlosc/curso2003/FrontPage_toturial/hipervinculos.htm http://www.monografias.com/trabajos7/mult/mult.shtml http://es.wikipedia.org/wiki/Multimedia http://www.ucm.es/info/multidoc/multidoc/revista/cuad6-7/saorin.htm http://www.hipertexto.info/documentos/hipermedia.htm http://www.masadelante.com/faq-www.htm