Técnicas de visualización

Transcripción

1 Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez

2 Introducción al lenguaje HTML» HTML (HyperText Markup Language) Lenguaje hipertexto de marcas. Actualmente la versión que está en vigor es la HTML5. El consorcio W3C es quien marca los estándares. Es un lenguaje sencillo, que no necesita compilarse ni genera ningún archivo ejecutable, pero que no permite ver a priori los resultados si no usas un programa específico para páginas web (navegador).» XHTML (extensible HyperText Markup Language) Versión XML de HTML. Tiene las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es lograr una clara separación entre la información y la forma de presentarla; el contenido y el diseño. Así, el XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para las hojas de estilo CSS, el JavaScript, etc. su aspecto y diseño en computadoras, PDA s, teléfonos móviles, etc.» HTML5: Nueva versión de HTML que, sin ser tan estricto como el XHTML, recoge su filosofía.

3 Principios básicos: etiquetas» Etiquetas o marcas Breves instrucciones de principio (enmarcadas entre los signos < y >) y, en general, de final (enmarcadas entre los signos </ y >).» Ejemplos: HTML <strong>página de inicio</strong> Primer capítulo<br>título 1 <hr> <h1><em>título</em></h1> Resultado visual Página de inicio Primer capítulo Título 1 Título

4 Principios básicos: códigos HTML» Códigos HTML Códigos para símbolos y caracteres especiales en HTML. Ejemplos: HTML Resultado visual Título 1 " ½ è é Título 1 ½ è é

5 Principios básicos: atributos» Atributos de las etiquetas Elementos que modifican el efecto de las etiquetas o aportan propiedades. Se incluyen dentro de la etiqueta de inicio.» Ejemplos: HTML Resultado visual <p class= cnegro >Página de inicio</p> Página de inicio <div id= Nav ></div> <img src= logo_ligit.jpg height="42" width= 50" >

6 Principios básicos: estructura» Elementos mínimos: <html> <head> Inicio del documento Inicio de la cabecera del documento <title>ejemplo de título</title> Título de la página </head> <body> <p>ejemplo</p> </body> </html> Fin de la cabecera Inicio del cuerpo del documento Contenido del document Fin del cuerpo del documento Fin del documento

7 » Elementos mínimos: Principios básicos: estructura Sólo el contenido del <body> (la parte en blanco) se visualiza en el navegador

8 Principios básicos: estructura» Elementos mínimos en html5: <!DOCTYPE html> <html lang="es"> <head> </head> <body> <meta charset="utf-8"> <title>ejemplo de título </title> <meta name="description" content="descripción"> <p>ejemplo de párrafo</p> </body> </html> Instrucción de tipo de documento Inicio del documento Inicio de la cabecera del documento Especificación de codificación Título de la página Descripción de pàgina Fin de la cabecera Inicio del cuerpo del documento Contenido del document Fin del cuerpo del documento Fin del documento

9 Flujo de elementos en HTML En el flujo normal de un documento web, los elementos tienden a colocarse en línea, unos al lado de otros hasta completar el ancho de una línea y continuar en la siguiente. Elementos en línia (inline) Se colocan en línea hasta que la suma de sus anchos completa una línea y saltan a la siguiente. Ej: <em> (cursiva), <a> (enlace), <img> (imagen) Elementos en bloque (block) Ocupan un mínimo de una línea. Aun cuando el ancho de su contenido sea muy pequeño, no podrán situarse unos al lado de otros para completar una línea, si no que cada línea se completa con un único elemento. Ej: <table> (tabla), <p> (párrafo), <ul> (lista)

10 Etiquetas básicas <H1>... </H1> o <H2>... </H2> o <H3>... </H3> (hasta 6) Encabezamientos (con distintos niveles). Funcionan como un bloque <h1></h1> <p>... </p> Párrafos normales. Funcionan como un bloque. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla.</p> <h3>subsección</h3> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Subsección

11 Etiquetas básicas <BR> Salto de línia. Permite partir un párrafo empezando una línea nueva pero sin dejar espacio. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <HR> Pone una línea horizontal de separación. Funciona en bloque <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <hr> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación. En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación.

12 Etiquetas básicas <a href= ></a> Enlaces. Sirven para acceder desde una página a otra página o a otro recurso disponible. Deben englobar aquel elemento que queramos que sirva de enlace. Funcionan en línea. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <hr> <p>si queréis acceder al enlace haced clic <a href= urldelweb >aquí</a></p>. <p>si queréis que el enlace se abra en una nueva ventana haced clic <a href= urldelweb target= _blank >aquí</a></p>. En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación. Si queréis acceder al enlace haced clic aquí. Si queréis que el enlace se abra en una nueva ventana haced clic aquí.

13 Etiquetas básicas <a href= #nombre ></a> Enlace dentro de una misma página. Sirve para acceder a una sección concreta de la página web. Necesita de un elemento con un atributo ID el valor del cual sea igual al HREF (Por ejemplo: id= nombre ). <h1 id= inicio_s >Título de la sección</h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <hr> <p>si queréis acceder al enlace haced clic <a href= urldelweb >aquí</a></p>. <p>si queréis volver al inicio de la sección haced clic <a href= #inicio_s >aquí</a></p>. En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación. Si queréis acceder al enlace haced clic aquí. Si queréis volver al inicio de la sección haced clic aquí.

14 Etiquetas básicas <img src= > Muestra una imagen. No necesita cierre. Funcionan en línea. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <hr> <p>si queréis acceder al enlace haced clic <a href= urldelweb >aquí</a>.</p> <img src= logo_ligit.jpg alt= logo ligit > <hr> <img src= logo_ligit.jpg alt= logo ligit > En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación. Si queréis acceder al enlace haced clic aquí.

15 Etiquetas básicas <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. <br>aquí continua la explicación.</p> <hr> <p>si queréis acceder al enlace haced clic <a href= urldelweb >aquí</a>.</p> <hr> <a href= > <img src= logo_ligit.jpg alt= logo ligit ></a> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Aquí continua la explicación. Si queréis acceder al enlace haced clic aquí.

16 Etiquetas básicas <UL>... </UL> Lista no ordenada. <OL>... </OL> Lista ordenada. <LI>... </LI> Elementos de una lista. Funcionan en bloque. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla.</p> <ul> <li>frase 1</li> <li>frase 2</li> <li>frase 3</li> </ul> <ol> <li>frase 1</li> <li>frase 2</li> <li>frase 3</li> </ol> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Frase 1 Frase 2 Frase 3 1. Frase 1 2. Frase 2 3. Frase 3

17 Etiquetas básicas <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla.</p> <ol> <li>frase 1 <ul> <li>frase 1</li> <li>frase 2</li> <li>frase 3</li> </ul> </li> <li>frase 2</li> <li>frase 3</li> </ol> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. 1. Frase 1. Frase 1. Frase 2. Frase 3 2. Frase 2 3. Frase 3

18 Etiquetas básicas <TABLE>... </TABLE> Tabla. <TR>... </TR> Fila. <TD>... </TD> Columna. Aunque se quiera una sola celda son necesarias las etiquetas <table> y <tr>. <h1></h1> <p>en este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla.</p> <table> <tr> <th>etiqueta</th> <th>atributo</th> </tr> <tr> <td>p</td><td>-</td> </tr> <tr> <td>img</td><td>src</td> </tr> <tr> <td>a</td><td>href</td> </tr> </table> En este párrafo va la explicación de la sección. Bla, bla, bla, bla, bla, bla. Etiqueta p - img a Atributo src href

19 Etiquetas básicas <td colspan= x > </td> Une x número de celdas de una misma fila. <td rowspan= x > </td> Une x número de celdas de una misma columna. <h1></h1> <p>en este párrafo va la explicación.</p> <table> <tr> <th colspan= 2 >Etiquetas y atributos</th> </tr> <tr> <td>p</td> <td rowspan= 2 >class</td> </tr> <tr> <td>img</td> </tr> <tr> <td>a</td><td>href</td> </tr> </table> En este párrafo va la explicación. Etiquetas y atributos p class div a href

20 Etiquetas básicas <DIV>... </DIV> Elemento contenedor genérico. Funcionan en bloque. <div id= header > <h1>título del encabezado</h1> <p>en este párrafo va la explicación de la cabecera. Bla, bla, bla, bla, bla, bla.</p> <div class= detalle > <p>aquí una explicación en detalle en otro div.</p> <img src= logo_ligit.jpg alt= logo > <p>párrafo de una línea</p> <p>párrafo con salto de línea y con un <a href= index.html >enlace</a>.<br> Salto de línea en el mismo párrafo.</p> </div>  </div> Título del encabezado En este párrafo va la explicación de la cabecera. Bla, bla, bla, bla, bla, bla. Aquí una explicación en detalle en otro div. Párrafo de una línea Párrafo con salto de línea y con un enlace. Salto de línea en el mismo párrafo.

21 HTML5: html semántico En html4 y xhtml: estructura a partir de elementos contenedores (tablas complejas o elementos DIV) que contienen otros elementos. <div id= Header">  </div> <div id= Nav">  </div> <div id= Main">  </div> <div id= Footer">  </div>

22 HTML5: html semántico Html semántico: marcar cada elemento según su función dentro del documento.» Ejemplo: <i>émfasis</i> <em>émfasis</em> Nuevas etiquetas semánticas para la estructura web: <header>  </header> <nav>  </nav> <article>  </article> etc.

23 Estructura de directorios de un sitio web Es importante organizar la estructura de directorios de nuestro sitio antes de empezar. En general, cargaremos las imágenes, vídeos, estilos, scripts, etc. mediante su ruta relativa. <link rel="stylesheet" href="css/estilo.css"> <script src= scripts/javascript.js"></script> <img src= img/imagen1.gif > Los nombres de carpetas y archivos incluidos en nuestro sitio web no contendrán espacios ni caracteres especiales tales como acentos.