sintesis

html
Códigos disponibles en git

¿Por qué?

¿Qué?

contexto

¿Para?

¿Cómo?

Visión General

<!DOCTYPE html>(1)
<!-- comentario -->
<html>(2)
  <elemento atributo="valor">contenido</elemento>(3)
  <elemento atributo>contenido</elemento>(4)
  <elemento>(5)
</html>
1 Definición de tipo de documento, especificación y validador
2 Etiquetas en minúscula
3 Respeta XML …​ pero permite
4 Atributos sin valor
5 Elementos sin cerrar, opcional para algunos particulares
JerarquiaHTML
etiquetas

Metainformación

  • Elemento head, obligatorio en la especificaciión, en los navegadores!?!, con los elementos:

    • title, con contenido del título de la página en la pestaña del navegador, …​

    • meta, para diversa metainformación, con atributos:

      • charset, para conjunto de caracteres Unicode: UTF-8, UTF-16, …​

      • name, para otra metainformación con valor abierto: description, keywords, author, …​

      • content, para la otra información con valor abierto

    • base, para dirección base por defecto de todos los hiperenlaces, con atributos:

      • href, para la URL

      • target, para destino por defecto: blank_ en la misma pestaña, self_ en el mismo marco, parent_ en el marco padre, top_ en el cuerpo

    • Estilos con CSS

    • Dinamismo con JavaScript

 
<!DOCTYPE html>
<html>
  <head>
    <title>Título</title>
    <meta charset="UTF-8">
    <meta name="description" content="bla bla bla">
    <meta name="keywords" content="key, key, ...">
    <meta name="author" content="Yo">
    <base href="https://www.upm.es/" target="_blank">
    <!--- estilos con CSS -->
    <!--- dinámica con JavaScript -->
  </head>
  <body>
    ...
  </body>
</html>

Información

Texto

  • Caracteres del conjunto especificado en UTF-8

    • Caracteres no disponibles en teclado con entidades y el código decimal del caractes correspondiente: &#número;

    • Entidades predefinidas con un nombre más legible: HTML

      • Vocales acentuadas hacen falta en title: & aacute ;, & eacute ;, …​, & Aacute ;, & Eacute ;, …​

  • Todas las secuencias de espacios, tabuladores y/o saltos de carro en cualquier orden se sustituyen por un único espacio, no sirve de nada "formatear"

 
<!DOCTYPE html>
<html>
  <head>
      <title>Texto</title>
  </head>
  <body>
                     TEXTO
                     =====

         Me juego 1000&euro; o 1000&#36; o mejor mi honra
                a que no obtendr&aacute; s el mismo formato en la edici&oacute;n
                que en la visualizaci&oacute;n.

         La &uacute;nica o ¡única! posibilidad ser&iacute;a evitar
                la compresi&oacute;n de algunos&nbsp;&nbsp;&nbsp;&nbsp;
                espacios en blanco

                                                Saludos
                                                &#9587;
  </body>
 </html>

texto

Imágen

  • Elemento img, sin necesidad de cerrar, con atributos:

    • src para la URL de la imagen

    • alt para texto alternativo sin falla la imagen

    • width para el ancho en pixels

    • height para el alto en pixels

 
<!DOCTYPE html>
<html>
  <head>
    <title>Im&aacute;gen</title>
  </head>
  <body>
    <img
      src="https://maldita.es/app/uploads/2020/02/luna-fases-efectos.jpg"
      alt="La luna"
      width="50%"
    />Cosa ma&#769;s bonita!!!
  </body>
</html>

imagen

Audio

  • Elemento audio con atributos:

    • src para la URL del sonido

    • autoplay, sin valor, para reproducir al cargar la página

    • controls, sin valor, para visualizar los controles

    • loop, sin valor, para reproducir en bucle

  • y con contenido:

    • elemento source, para distintos formatos, con atributos:

    • texto para visualizar en el caso de que el navegador no pueda reproducir el formato de sonido

 
<!DOCTYPE html>
<html>
  <head>
    <title>Audio</title>
  </head>
  <body>
    <audio controls loop autoplay>
      <source src="se_esta_perdiendo.mp3" type="audio/mpeg" />
      Tu navegador no soporta el formato de audio
    </audio>
  </body>
</html>

audio

Video

  • Elemento video con atributos:

    • src para la URL del video

    • autoplay, sin valor, para reproducir al cargar la página

    • controls, sin valor, para visualizar los controles

    • loop, sin valor, para reproducir en bucle

    • width, para el ancho en pixels

    • height, para el alto en pixels

  • y con contenido:

    • elemento source, para distintos formatos, con atributos:

    • texto para visualizar en el caso de que el navegador no pueda reproducir el formato de sonido

 
<!DOCTYPE html>
<html>
  <head>
    <title>Video</title>
  </head>
  <body>
    <video controls loop autoplay width="100%">
      <source src="Erich.mp4" type="audio/mp4"/>
      Tu navegador no soporta el formato de video
    </video>
  </body>
  </html>

video

Información hiperenlazada

No visible

  • Elemento a, de anchor, ancla, con atributos:

    • href para la URL del destino

    • target como en el elemento base

  • y con contenido de un recurso visualizable por el navegador, texto, imágen, …​ hiperenlazada

 
<!DOCTYPE html>
<html>
  <head>
    <title>Hiperenlaces</title>
  </head>
  <body>
    <a href="https://www.w3schools.com/" title="W3Schools" >Texto para W3Schools</a>
    <a href="https://www.w3schools.com/" title="W3Schools" >
          <image width="2%" src="https://qph.fs.quoracdn.net/main-qimg-611ed3c77d17db7551e3a6c568cfe481.webp"></a>
    <a href="https://www.w3schools.com/" target="_blank">_blank</a>
    <a href="https://www.w3schools.com/" target="_self">_self</a>
    <a href="https://www.w3schools.com/" target="_parent">_parent</a>
    <a href="https://www.w3schools.com/" target="_top">_top</a>
  </body>
</html>

noVisible

Visible

  • Elemento iframes con atributos:

    • src para la URL del destino

    • width para el ancho de visualización

    • height para el alto de visualización

    • target como en el elemento base

    • name para ser referenciado desde el valor de un atributo target de otro enlace

Visible

 
<!DOCTYPE html>
<html>
  <head>
    <title>Marcos</title>
  </head>
  <body>
    <iframe height="700px" width="80%" src="https://www.upm.es" name="nombreFrame"></iframe>
    <a href="https://www.urjc.es" target="nombreFrame">URJC</a>
    <a href="https://www.upm.es" target="nombreFrame">UPM</a>
  </body>
</html>

Estructura en línea

  • Elemento br para el salto de línea

  • Elemento b para la negrita

  • Elemento strong para el resaltado

  • Elemento i para la itálica

  • Elemento em para el énfasis

  • Elemento sup para el superíndice

  • Elemento sub para el subíndice

  • Elemento del para el tachado

  • Elemento ins para el insertado

  • Elemento q para las citas

  • Elemento abbr para las abreviaturas

  • Elemento bdo para la escritura bidireccional con atributo:

    • dir con valores rtl o ltr

  • Elemento samp para los ejemplos

  • Elemento kbd para el teclado

  • Elemento code para el código

  • Elemento var para las variables

  • Elemento span para agrupar varias palabras y dar un estilo particular

estructuraLinea

<!DOCTYPE html>
<html>
  <head>
    <title>En línea</title>
    <meta charset="UTF-8">
  </head>
  <body>
    Para saltar de línea.<br>
    Para <b>negrita</b> y para
      <strong>resaltado</strong>.<br>
    Para <i>itálica</i> y para
      <em>énfasis</em>.<br>
    Para <sup>superíndices</sup> y para
      <sub>subíndices</sub>.<br>
    Para <small>pequeños</small> y para
      grandes.<br>
    Para <del>borrar</del> y para
      <ins>insertar</ins>.<br>
    Para <q>citas</q> y para
      <abbr>abreviaturas</abbr>.<br>
    Para el derecho y  para el
      <bdo dir="rtl">revés</bdo>.<br>
    Para <samp>ejemplos</samp> y para
      <kbd>teclado</kbd>.<br>
    Para <code>código</code> y
      para <var>variables</var>.<br>
    Para <span>agrupar varios</span> estilos.
  </body>
</html>

Estructura en bloque

Párrafos

  • Elemento h1-h6 para títulos de mayor a menor relevancia

 
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>T&iacute;tulos</title>
  </head>
  <body>
    <h1>Documento</h1>
    <h2>Módulo</h2>
    <h3>Unidad</h3>
    <h4>Lección</h4>
    <h5>Sección</h5>
    <h6>Apartado</h6>
  </body>
</html>

titulos

  • Elemento p, de paragraph, para párrafos con contenido de texto

 
<!DOCTYPE html>
<html>
  <head>
    <title>Párrafo</title>
  </head>
  <body>
    <h1>El quijote de la Mancha</h1>
    <p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que
      vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor ...</p>
    <p>En fin, llegó el último de don Quijote, después de recibidos todos los sacramentos, y después de
      haber abominado con muchas y eficaces razones de los libros de caballerías. ...</p>
  </body>
</html>

parrafos

  • Elemento blockquote para citas largas con atributo:

    • cite, opcional, con la referencia o URL del texto citado

  • y con contenido de texto de la cita

 
<!DOCTYPE html>
<html>
  <head>
    <title>Citas</title>
  </head>
  <body>
    <h1>El quijote de la Mancha</h1>
    <p>La obra comienza así:</p>
    <blockquote cite="https://es.wikipedia.org/wiki/Don_Quijote_de_la_Mancha">
    En un lugar de la Mancha, de cuyo nombre
    no quiero acordarme, no ha mucho tiempo que
    vivía un hidalgo de los de lanza en astillero,
    adarga antigua, rocín flaco y galgo corredor
    ...</blockquote>
  </body>
</html>

citas

  • Elemento address para direcciones con contenido del texto de la dirección

 
<!DOCTYPE html>
<html>
  <head>
    <title>Adress</title>
  </head>
  <body>
    <h1>Instituto Tecnológico de Massachusetts</h1>
    <address>
      77 Massachusetts Ave, Cambridge.
      MA 02139, Estados Unidos
    </address>
  </body>
</html>

direcciones

Listas

  • Elemento ul para listas desordenadas, unordered list, con contenido:

    • elemento li, para cada elemento de la lista, list item, con contenido de su información y otros elementos

 
<!DOCTYPE html>
<html>
  <head>
    <title>Listas desordenadas</title>
  </head>
  <body>
    <h1>Lenguajes de Programación</h1>
    <ul>
      <li>Fortran</li>
      <li>Cobol</li>
      <li>Lenguajes orientados a objetos
        <ul>
          <li>Smalltalk</li>
          <li>C/C++</li>
          <li>Eiffel</li>
          <li>Java</li>
          <li>Scala</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

listasDesordenadas

  • Elemento ol para listas ordenadas, ordered list con atributos:

    • type, opcional, con el valor 1 para números, A y a para letras mayúsculas y minúsculas, I e i para números romanos en letras mayúsculas y minúsculas

  • y contenido:

    • elemento li, para cada elemento de la lista, list item, con contenido de su información y otros elementos

 
<!DOCTYPE html>
<html>
  <head>
    <title>Listas ordenadas</title>
  </head>
  <body>
    <h1>Ingeniería del Software</h1>
    <ol type="I">
      <li>Requisitos
        <ol>
          <li>Casos de Uso</li>
          <li>Historias de Usuario</li>
        </ol>
      </li>
      <li>Analisis</li>
      <li>Diseño</li>
      <li>Programación</li>
      <li>Pruebas</li>
      <li>Despliegue</li>
      <li>Gestión</li>
    </ol>
  </body>
</html>

listasOrdenadas

  • Elemento dl para listas de definiciones, definition list con contenido:

    • elemento dt, de definition term, para el término

    • elemento dd, de definition description, para la definición

 
<!DOCTYPE html>
<html>
  <head>
    <title>Listas de definiciones</title>
  </head>
  <body>
    <h1>Ingeniería del Software</h1>
    <dl>
      <dt>Requisitos</dt>
      <dd>Disciplina que se dirige al correcto
      desarrollo del proyecto software</dd>
      <dt>Analisis</dt>
      <dd>Disciplina que se dirige al diseño
      de los requisitos funcionales del proyecto
      software</dd>
      <dt>Diseño</dt>
      <dd>Disciplina que se dirige al diseño
      de los requisitos no funcionales del proyecto
      software</dd>
    </dl>
  </body>
</html>

listasDefinicion

Tablas

  • Elemento table para tablas con contenido:

    • elemento caption, opcional como primer elemento, con contenido para el subtítulo de la tabla

    • elemento colgroup, opcional tras caption, para la definición de grupos de columnas para su formato:

      • elemento col con atributo span para especificar la cardinalidad del grupo

    • elemento tr, de table row, con contenido:

      • elemento td, de table standard, para cada celda estandard de la fila con contenido de información u otra estructura

      • elemento th, de table head, para cada celda destacada de la fila con contenido de información u otra estructura

      • ambos dos con atributos:

        • colspan con el valor numérico de la cantidad de celdas de la misma fila agrupadas en una única a partir del elemento

        • rowspan con el valor numérico de la cantidad de celdas de la misma columna agrupada en una única a partir del elemento

    • elemento thead, opcional, con contenido de

      • elemento tr para la cabecera de la tabla, títulos a repetir en cada página impresa

    • elemento tbody, opcional, con contenido

      • elementos tr para el cuerpo de la tabla, detalles de la información

    • elemento tfoot, opcional, con contenido

      • elemento tr para el del pie de la tabla, resúmenes a repetir en cada página impresa

tablas

<!DOCTYPE html>
<html>
  <head>
    <title>Tablas</title>
  </head>
  <body>
    <table>
      <caption>
        Lenguajes de Programación
      </caption>
      <colgroup>
        <col />
        <col span="3" />
      </colgroup>
      <thead>
        <tr>
          <th>Paradigma</th>
          <th>Lenguaje</th>
          <th colspan="2">Autor</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Imperativo</td>
          <td>C</td>
          <td colspan="2">Dennis Ritchie</td>
        </tr>
        <tr>
          <td rowspan="2">Orientado a Objetos</td>
          <td>Objective C</td>
          <td>Brad Cox</td>
          <td>Tom Love</td>
        </tr>
        <tr>
          <td>C++</td>
          <td colspan="2">Barjne Stroustrup</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>2 paradigmas</td>
          <td>3 lenguajes</td>
          <td colspan="2">4 autores</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Aplicaciones:

Elementos semáticos

  • Todos los elementos con la mera intención de organizar la página, sin más connotaciones:

    • Elemento header para la cabecera de la página con contenido abierto a cualquier estructura de información

    • Elemento nav para la barra de navegación con contenido abierto a cualquier estructura de información

    • Elemento main para el bloque primario con contenido abierto a cualquier estructura de información

    • Elemento section para el bloque secundario con contenido abierto a cualquier estructura de información

    • Elemento article para el bloque teciario con contenido abierto a cualquier estructura de información

    • Elemento div para el bloque cuaternario con contenido abierto a cualquier estructura de información

    • Elemento details para el bloque de detalles con contenido abierto a cualquier estructura de información

      • Elemento summary para el resumen como primer elemento de details

semanticas

  • conitnua…​

    • Elemento aside para el lateral con contenido abierto a cualquier estructura de información

    • Elemento footer para el pie de página con contenido abierto a cualquier estructura de información

    • Elemento figure para figuras con contenido abierto a cualquier estructura de información y

      • Elemento figcaption para el título de la figura con contenido abierto a cualquier estructura de información

    • Elemento time para una fecha con contenido abierto a cualquier estructura de información

    • Elemento mark para una marca con contenido abierto a cualquier estructura de información

 
<!DOCTYPE html>
<html>
  <head>
    <title>Semánticas</title>
  </head>
  <body>
    <header>
      <h1>Título</h1>
    </header>
    <nav>
      <ul>
        <li><a href="www...">Opcion 1</a></li>
        <li><a href="www...">Opcion 2</a></li>
        <li><a href="www...">Opcion 3</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <article>
          <div>
            <h2>Articulo de la <mark>1ª</mark>
              sección</h2>
            <p>A las <time>7:00</time> más información
          </div>
          <div>
            <p>Otro estilo</p>
          </div>
          <details>
            <ul>
              <li>Rumores</li>
              <li>Mentiras</li>
            </ul>
          </details>
        </article>
      </section>
      <section>
        <article>
          <h2>1º Articulo de la <mark>2ª</mark> sección</h2>
          <figure>
            <img src="semantica.gif" / width="300">
            <figcaption>Imágen del momento</figcaption>
          </figure>
        </article>
        <article>
        </article>
      </section>
    </main>
    <summary>
      <p>Resumen</p>
    </summary>
    <aside>
      <p>Lateral</p>
      <ul>
        <li><a href="www...">Mira aquí</a></li>
        <li><a href="www...">Mira alli</a></li>
      </ul>
    </aside>
    <footer>
      <ul>
        <li><a href="www...">Nosotros</a></li>
        <li><a href="www...">Legal</a></li>
      </ul>
    </footer>
  </body>
</html>

elementosSemanticos
Aplicaciones:

Formularios

formularios

  • Elemento form con atributos:

    • action con el valor de la url del script del servidor Web al que se desea ejecutar con los valores del formulario: (campo, valor)

    • target como del elemento a

    • method con valores:

      • get, envia los pares (campo, valor) de las entradas separadas por & tras la url del atributo action separdo por ?

      • post, envia los pares (campo, valor) de las entradas oculto en la trama HTTP correspondiente

  • y contenido:

    • elemento label con atributos:

      • for con una referencia al identificador de una entrada que se activa con el foco en la etiqueta

    • elemento input con atributos:

      • id con el identificador de la entrada

      • name, con el nombre de la entrada para la petición al servidor Web

      • value, con el valor por defecto de la entrada para la petición al servidor Web

      • type con valores:

        • text, para entrada libre

        • pasword, para contraseñas, que ocultan los caracteres tecleados

        • number, para valores numéricos

        • date, para fechas

        • time, para horas

        • datetime-local, para fecha y hora

        • month, para el mes de un año

        • week, para la semana de un año

        • tel, para teléfonos

        • email, para direcciones de correo electrónico

        • url, para dirección Web

        • search, para campos de búsqueda

        • radio, para campos alternativos que compartan el mismo valor del campo name

        • checkbox, para campos de activado/desactivado individual

        • button, para alguna acción sobre los datos de formulario

        • submit, para realizar la petición al servidor Web

        • reset, para limpiar todos los valores del formulario

      • min, para el valor mínimo de entradas de tipo number, date, …​

      • max, para el valor máximo de entradas de tipo number, date, …​

      • checked, sin valor, para indicar la entrada de tipo radio activa por defecto en la presentación del formulario

      • list, para el valor del identificador del elemento datalist asociado a la entrada

    • elemento datalist con atributos:

      • id, para el identificador del elemento

    • y con contenido:

      • elemento option, para cada opción disponible en la entrada con atributos:

        • value, para el texto de la opción

    • elemento select, para entradas cerradas entre un conjunto de opciones, con atributos:

      • size, para el número de opciones visibles en la presentación

      • multiple, sin valor, para permitir la selección de varias opciones

    • y con contenido:

      • elemento option, para cada opción disponible en la entrada con atributos:

        • value, para el texto de la opción

        • selected, para la opción por defecto en la visualización del formulario

    • elemento textarea, para entradas de texto de varias líneas con atributos:

      • rows, para el número de filas en la presentación del formulario

      • columns, para el número de columnas en la presentación del formulario

    • y con contenido del texto por defecto en la presentación del formulario

formulariosControles

<!DOCTYPE html>
<html>
  <head>
    <title>Formularios</title>
  </head>
  <body>
    <!--- revisar porque falta type="range" y quizás más -->
    <form action="http://www.blablabla.com/script.php">
      <label for="campo1">Campo 1:</label>
      <input id="campo1" type="text" name="campo1" value="texto por defecto" />
      <br />
      <label for="campo2">Campo 2:</label>
      <input id="campo2" list="valores" name="campo2" />
      <datalist id="valores">
        <option value="Valor A"></option>
        <option value="Valor B"></option>
      </datalist>
      <br />
      <label for="campo3">Campo 3:</label>
      <textarea id="campo3" rows="5" cols="50" name="campo3">
texto por defecto</textarea
      >
      <br />
      <label for="campo4">Campo 4:</label>
      <input id="campo4" type="password" name="campo4" />
      <br />
      <label for="campo5">Campo 5:</label>
      <input
        id="campo5"
        type="number"
        value="0"
        min="-10"
        max="10"
        name="campo5"
      />
      <br />
      <label for="campo6">Campo 6:</label>
      <input
        id="campo6"
        type="date"
        min="1900-1-1"
        max="2020-1-1"
        name="campo6"
      />
      <br />
      <label for="campo7">Campo 7:</label>
      <input id="campo7" type="time" name="campo7" />
      <br />
      <label for="campo8">Campo 8:</label>
      <input id="campo8" type="datetime-local" name="campo8" />
      <br />
      <label for="campo9">Campo 9:</label>
      <input id="campo9" type="month" name="campo9" />
      <br />
      <label for="campo10">Campo 10:</label>
      <input id="campo10" type="week" name="campo10" />
      <br />
      <label for="campo11">Campo 11:</label>
      <input id="campo11" type="tel" name="campo11" />
      <br />
      <label for="campo12">Campo 12:</label>
      <input id="campo12" type="email" name="campo12" />
      <br />
      <label for="campo13">Campo 13:</label>
      <input id="campo13" type="url" name="campo13" />
      <br />
      <label for="campo14">Campo 14:</label>
      <input id="campo14" type="search" name="campo14" />
      <br />
      <label>Campo 15:</label>
      <input type="radio" value="Opcion1" checked name="campo15" />Opción 1
      <input type="radio" value="Opcion2" name="campo15" />Opción 2
      <br />
      <label for="campo16">Campo 16:</label>
      <select size="3" multiple name="campo16">
        <option value="Opcion1" selected>Opción 1</option>
        <option value="Opcion2">Opcion 2</option>
        <option value="Opcion3">Opcion 3</option>
      </select>
      <br />
      <label for="campo17">Campo 17:</label>
      <input id="campo17" type="checkbox" value="Opción" name="campo17" />Opción
      <br />
      <input type="button" name="accion" value="gestionar valores" />
      <input type="submit" name="enviar" value="enviar valores" />
      <input type="reset" name="borrar" value="borrar valores" />
    </form>
  </body>
</html>

  • elemento fieldset para agrupar un conjunto de entradas, con contenido:

    • elemento legend con contenido del título de la agrupación de entradas

formulariosGrupos

 
<!DOCTYPE html>
<html>
  <head>
    <title>Formularios con agrupaciones</title>
  </head>
  <body>
    <form action="http://www.blablabla.com/script.php">
      <fieldset>
        <legend>Titulo</legend>
        <label for="campo1">Campo 1:</label>
        <input
          id="campo1"
          type="text"
          name="campo1"
          value="texto por defecto"
        />
        <br />
        <label for="campo2">Campo 2:</label>
        <input
          id="campo2"
          type="text"
          name="campo2"
          value="texto por defecto"
        />
        <br />
      </fieldset>
      <input type="submit" name="enviar" value="enviar valores" />
      <input type="reset" name="borrar" value="borrar valores" />
    </form>
  </body>
</html>

Sintesis

sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM