Apuntes del curso

Tablas

tabla en xhtml

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los
que se utilizan en cualquier otro entorno de publicación de documentos.
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas,
cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular.

Tablas Básicas
Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr>
para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 – 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 – 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 – 20:00</td>
</tr>
</table>
</body>
</html>

Anuncios

Contacta

Contacta

    Ana Lucía Candelo Escobar

Contacta

paisaje

Uso de photoshop por pasos
    Primer paso
  • Voy al navegador y busco una foto grande aprox.1024px
  • La guardo en fotos_internet
    1. Segundo paso
  • Abro photoshop
  • Archivo/abrir/busco la foto grande
  • Archivo guardar para la web
    1. tipo de archivo: jpg/gif/png
    2. medidas foto: ancho x:.a400px
    3. guardar en: la carpeta de imágenes de mi web
      Tercer paso
  • Hago un documento HTMLcon el ejercicio y en el queañado las fotos tanto grande, como la que he guardado para

    web

  • Foto original internet a 1024
  • Foto grande 1024
  • Foto pequeña
  • la fuente

    IMAGENES

    Las imágenes son uno de los elementos más importantes de las páginas web. De hecho,
    prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de
    imágenes. Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir
    dos tipos: las imágenes de contenido y las imágenes de adorno.
    Las imágenes de contenido son las que proporcionan información y complementan la
    información textual. Las imágenes de adorno son las que se utilizan para hacer bordes
    redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de
    página, etc. Las imágenes de contenido se incluyen directamente en el código HTML mediante la
    etiqueta y las imágenes de adorno no se deberían incluir en el código HTML, sino que
    deberían emplearse hojas de estilos CSS para mostrarlas.

    src = “url” – Indica la URL de la imagen que se muestra
    ▪ alt = “texto” – Descripción corta de la imagen
    ▪ longdesc = “url” – Indica una URL en la que puede encontrarse una descripción
    más detallada de la imagen
    ▪ name = “texto” – Nombre del elemento imagen
    ▪ height = “unidad_de_medida” – Indica la altura con la que se debe mostrar la
    imagen (no es obligatorio que coincida con la altura original de la imagen)
    ▪ width = “unidad_de_medida” – Indica la anchura con la que se debe mostrar la
    imagen (no es obligatorio que coincida con la anchura original de la imagen)

    Ejemplo sencillo para incluir una imagen:

    Logotipo de Mi Sitio

    Receta de Arroz

    Arroz con pollo

      Ingredientes

      Para 3 personas
      • Una libra de arroz
      • Dos pechugas
      • 4 vasos de caldo de pollo
      • Un Pimiento verde y pimiento rojo
      • 1/2 cebolla
      • 2 ajos
      • Guisantes
      • Dos tomates
      • Un limón
      • 1 sobre de colorante alimenticio
      • Aceite de oliva
      • Sal al gusto

      Preparación

      1. Cortar los pimientos en julianas,picar finamente la

        cebolla y pelar los ajos.

      2. Las julianas no muy largas.
      3. En una cazuela poner el aceite de oliva y a calentar.

        Cuando este caliente añadir los pimientos y los

        ajos.Saltear unos 3 minutos y añadir la cebolla.

      4. Ve haciendo las verduras
      5. Deja la verdura unos minutos más y añade el pollo y

        sal

      6. Deja el pollo de hasta que coja color y se dore.
      7. Mientras se va haciendo el pollo, pela los tomates y

        pícalos finamente. Cuando el este el pollo añadir el

        tomate y dejar en el fuego por unos 5 minutos más.

      8. Cuando el caldo este hirviendo añadir el arroz y

        remover con una cuchara, por unos 3 minutos, dejar a fuego

        medio. Agregar los guisantes. Y antes de último minuto

        para bajar el arroz agregarle el pollo.

      9. Dejar reposar y servir

      A disfrutar de un delicioso arroz con pollo,

      que puedes acompañar de unas rodajas de limón, y por

      cierto unas gotitas de limón sobre el mismo deja un sabor

      exquisito.

    La sintaxis que se usa con este tipo de enlaces, es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la acción a la que apunta. Cuando el usuario apunta a uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.

    También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo”Volver al inicio de la página” en varias secciones:

    <a name="inicio"

    Loren ipsum dolor sit amet, esto es un ejercicio para aprender a utilizar el enlace que lleva nuevamente al inicio de la página

    <a href="# inicio"Volver al inicio de la página

    LISTAS

    El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).

    Listas No Ordenadas

    Las listas ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta ul encierra todos los elementos de la lista y la etiqueta li cada uno de sus elementos.

    Listas Ordenadas

    Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante
    el orden de cada elemento del índice.

    En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta ol. Los elementos de la lista se definen mediante la etiqueta li la misma que se utiliza en las listas no ordenadas.

    Ejemplo:

      Profesor 

    • Marina
      1. Blog del Curso Web y multimedia>

    Listas de Definición

    Las Listas de Definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta dl crea la lista de definición y las etiquetas dt y dd definen respectivamente el término y la descripción de cada elemento de la lista.

    Nube de etiquetas