HTML y CSS

1- HTML

2- CSS

2.1 Introducción

2.2 Selectores

2.3 Herencia

2.4 Caracterización de los estilos

2.5 Unidades de medida

2.6 Colores

2.7 Modelo de cajas

2.8 Modelo de posicionamiento

2.9 Propiedades de visualización

2.10 Estructura de la página

Proyecto #2: Imágenes

Proyecto #3: Búsqueda

Proyecto #4: Card

Proyecto #5: Page

HTML

¿Qué es HTML?

Es un lenguaje de marcas utilizado para el desarrollo de páginas web
Define la estructura y contenido que debe tener una web
No define el estilo visual que tendrá para eso se usará CSS
Ha sido establecido como estándar de diseño web por el W3C
Los navegadores deben saber interpretar este lenguaje de manera correcta

¿Evolución?

En 1997 nace HTML4 publicado por el W3C como estándar de diseño web
En 1999 nace XHTML 1.0 que extiende HTML4
En 2001 se publica la nueva versión de XHTML, la 1.1
En 2002 se prepara un borrador para una nueva versión de XHTML
En 2008 nace HTML5 como el sucesor de HTML4 y XHTML 1.1

Estructura de una página Web

Definir un documento HTML

El primer paso es crear un fichero html o xhtml.
Una vez creado deberemos especificar el tipo de documento, para ello la primera línea debe ser:

<!-- HTML 5 -->
<!DOCTYPE html> si es HTML
<!-- XHTML 5 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">

Una vez realizado esto podremos comenzar con el contenido de nuestro fichero HTML

Documentos HTML

Todo documento HTML comienza por la etiqueta <HTML> y acaba con </HTML>
Todo documento HTML tiene dos partes:

Elementos HTML

Comentarios

Texto que ignora el navegador

<!‐‐ texto del comentario (una o más líneas) ‐‐>

Normalmente se usan para:

Marcar el comienzo y el final de las secciones de las páginas

<!‐‐ Inicio de las noticias ‐‐>
<div id="noticias"> ... </div>
<!‐‐ Fin de las noticias ‐‐>

Incluir notas para otros diseñadores

Incluir explicaciones sobre el código de la página

<!‐‐ Esto se puede mejorar ‐‐>

<!‐‐ Script para identificar las preferencias del usuario ‐‐>

Codificación de caracteres

Todos los caracteres se pueden especificar con su código precedido del símbolo &

<	<
>	>
&	&
"	"
	(espacio en blanco)
'	'
–	-

Lista de 256 caracteres especiales en HTML: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Ejemplo

Si se considera el siguiente texto:

Los caracteres <, >, " y & pueden dar problemas con los textos en HTML

Solución
<p>Los caracteres &lt;, &gt;, &quot; y &amp; pueden dar problemas con los textos en HTML</p>

Text

Codificación de caracteres

Acento y letras especiales

Lo mejor es declarar el uso de caracteres UTF-8 para que se vean bien los acentos y letras como la ñ.
En ocasiones, sin embargo, algunas herramientas no lo interpreten bien, y convierten el texto a ISO-8859 y habría problemas

Codificación de caracteres en los hiperenlaces

Ejemplo

<!-- URL problemática -->
http://www.ejemplo.com/estaciones/otoño.html
 
<!-- URL correcta -->
http://www.ejemplo.com/estaciones/oto%F1o.html
 
<!-- URL problemática -->
http://www.ejemplo.com/ruta/nombre página.html
 
<!-- URL correcta -->
http://www.ejemplo.com/ruta/nombre%20p%E1gina.html

Etiquetas de cabecera

Delimita la cabecera del documento
En la cabecera se describe información del documento (título, meta- información, scripts, estilos)

<head>

Etiquetas de cabecera

Indica el título del documento
Es obligatoria y tiene que aparecer una y solo una vez en el documento
El navegador lo visualiza en la barra de título de su ventana

<title>

Etiquetas de cabecera

Enlace a otros archivos (generalmente hojas de estilo)
<link rel="stylesheet" type="text/css" href="/css/formato.css" />

<link />

Etiquetas de cabecera

Metainformación sobre el documento (información procesable automáticamente por programas que analicen la página). Normalmente se usan los atributos name (para definir un tipo de metadato) y content (para definir el valor)

<meta />

<meta name="author" content="Juan Pavón" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="sistemas web, html" />
<meta name="description" content="Curso sobre diseño web" />

Etiquetas de cabecera

Permite incluir código de script
Aunque por defecto se toma JavaScript, conviene especificarlo
Puede referirse a un fichero externo de la siguiente forma

<script>

<script type="text/javascript" src="js/aviso.js"></script>

Etiquetas de cabecera

Permite definir propiedades que se aplicarán a lo largo del documento
Generalmente se indica la hoja de estilo que se va a aplicar

<style>

<style type="text/css">
    p { font-family: Arial; font-size: 10pt; color: rgb(0,0,128);
    text-indent: 15px; text-align: justify; margin-left: 10px } 
</style>

Texto

El texto de un documento debe estar contenido por alguna de las etiquetas de una de las tres categorías siguientes:

1. Etiquetas de bloque

No necesitan estar contenidas dentro de ninguna etiqueta (salvo <body> y <html>)

<title>
<p>
<pre>
<h1> <h2> <h3> <h4> <h5> <h6>
<address>

2. Etiquetas en-línea

Se aplican a una parte de texto dentro de un bloque

Salto de línea <br />
Tipo de información <abbr> <cite> <code> <em> <kbd> <strong>
Elemento carácter <b> <i> <small> <sub> <sup>

3. Etiquetas de contenedores de texto

Sirven para estructurar el texto y pueden contener en su interior etiquetas de bloque:

Bloque de cita: <blockquote>
División <div>, <main>, <article>, <header>, <section>, <aside>, <nav>, <footer>

Etiquetas de bloque (Párrafos)

<p>

Contiene el texto de un párrafo
El texto del párrafo se muestra con el formato por defecto del navegador
El navegador no muestra los espacios en blanco ni los saltos de línea del código fuente

> Entre párrafos se pone una línea en blanco (y solo una)
> Si un párrafo <p> no contiene nada, no se muestra (salvo que la hoja de estilo incluya bordes o márgenes)

<p>Esto es un párrafo</p>

Etiquetas de bloque (Párrafos)

<pre>

Texto preformateado: igual que <p> pero se tienen en cuenta espacios en blanco y líneas en blanco

<pre>Esto es un párrafo
donde se respetan
los espacios en blanco y 
líneas en 
blanco</pre>

Etiquetas de bloque (Secciones)

<h1> <h2> <h3> <h4> <h5> <h6>

   <h1>Sección 1</h1>
   <h2>Sección 1.1</h2>
   <p>Texto normal.</p>
   <h3>Sección 1.1.1</h3>
   <p>Texto normal.</p>

Encabezado (de nivel 1 a 6)

<address>

Información de contacto del autor de la página

 <address>Autor: Juan Pavón (UCM) <br />
   Última modificación: 10 de enero de 2013
 </address>

Etiquetas en línea

<br />

Salto de línea (sin dejar una en blanco entre medias)

 

Espacio en blanco
Cuando se usa la etiqueta <pre> se mantienen los espacios en blanco

<hr />

Línea horizontal (horizontal rule)
Se usa cada vez menos ya que con CSS se pueden crear mejor los bordes

Etiquetas en línea

Tipo de información

<abbr>

Abreviatura

<cite>

Para incluir una referencia o cita (aparecerá en cursiva)

<p>Como dice el refrán,
<cite>A la tercera va la vencida</cite>.</p>

<dfn>

Definición de un término (aparecerá en cursiva) <p><dfn>HTML</dfn> es una lenguaje de marcas...</p>

Etiquetas en línea

Tipo de información

<code>

Parecido a <pre> (pero <code> es un elemento de línea y <pre> un elemento de bloque)
Fragmento de código de programa (aparecerá en letra monospace)

<code>main() { printf ("Hola, mundo"); }</code>

<samp>

<samp>salida producida por un programa</samp>

<kbd>texto a introducir por el usuario</kbd>

<kbd>

Etiquetas en línea

Para indicar edición del texto

<del>

Para mostrar que se elimina un texto (aparecerá tachado)

<ins>

Para mostrar que se ha insertado un texto (aparecerá subrayado)

<p>La nota final es <del>suspenso</del>

<ins datetime="20130625">aprobado</ins>.</p>

La nota final es suspenso aprobado.

Estructura de la página

<div>

División: mecanismo más importante para agrupar diversos elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc.)
El formato hay que definirlo en una hoja de estilo
Una división no puede insertarse dentro de una etiqueta en-línea (<strong>,<em>, etc.) o de un bloque de texto (párrafo <p>, encabezado <h1> ... <h6>, dirección <address>, pre-formateado <pre>, lista, etc). Pero sí puede insertarse dentro de una tabla, de un bloque de cita <blockquote> o de otra división <div>

Con CSS se puede luego definir la posición de los distintos elementos

Agrupación de texto

<main>: Define el contenido principal del documento. Solo debe haber un <main> por documento y debe contener el contenido central relevante.
<article>: Representa un contenido independiente y autónomo, como una entrada de blog o una noticia, que puede ser distribuido de forma independiente.
<header>: Define el encabezado de un documento o sección, incluyendo elementos como el título, logotipo y navegación.

Agrupación de texto

<section>: Define una sección temática dentro del documento. Se utiliza para agrupar contenido relacionado bajo un título.
<aside>: Contenido secundario o tangencial, como una barra lateral o una nota, relacionado con el contenido principal pero no parte de él.
<nav>: Define una sección de navegación con enlaces a otras partes del mismo documento o a otras páginas.
<footer>: Define el pie de página del documento o sección, que suele contener información de contacto, derechos de autor y otros detalles importantes.

Hiperenlaces

<a>

Hiperenlace o hipervínculo (hyperlink)

<a href="URL">texto asociado al enlace</a> El texto asociado al enlace aparece destacado

El URL puede constar de

Protocolo (http://)

Servidor (www.miweb.es)

Ruta (/info/cursos)

Consulta (?curso=web)

Sección (#segunda)

http://www.miweb.es/ info/cursos?curso=web#segunda

Nota: recordemos que en las URL pueden usarse caracteres especiales codificados

Hiperenlaces

La referencia puede ser:

- A una página de otro sitio web: http://www.miweb.es

- A otra página del mismo sitio web

> Recomendable que sea una ruta relativa al documento actual:

> Mejor que una ruta absoluta:
<a href="c:/web/img/foto.jpg">Mi foto</a>

Hiperenlaces

La referencia puede ser:

A un marcador definido en la misma página
• En algún sitio se tiene que haber definido un marcador:

• Con el atributo name en una etiqueta a (anchor): <a name="marcador">Nota</a>

• O con el atributo id:
<h2 id="marcador">Nota</h2>

• Que luego se puede enlazar:
<a href="#marcador">Ir al lugar marcado</a>
<a href="../documento.html#marcador">...</a>
<a href="http://www.abc.es/documento.html#marcador">...</a>

>>Para que el enlace se abra en otra ventana: target="_blank"

Imágenes

<img>

Inserta una imagen de mapa de bits (de algún archivo aparte)

JPEG (Joint Photographic Experts Group): muy buena compresión
PNG (Portable Network Graphics): comprensión sin pérdida de calidad
GIF (Graphics Interchange Format): imágenes animadas, pero menos calidad

Imágenes

<img> - Atributos

src: camino absoluto o relativo a la imagen desde la página web
alt: texto que debe mostrarse si la imagen no está disponible
title: (opcional) texto que se muestra en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón encima de la imagen)
width y height: (opcionales) anchura y altura de la imagen
Es conveniente usar estos atributos porque permite al navegador reservar espacio para la imagen mientras se carga

Imágenes

Ejemplo

<p>
  El logo de mi universidad:
  <img
    src="https://unp.edu.ni/wp-content/uploads/2024/02/logo-FHD@4x-8.png"
    alt="Universidad Nacional Politécnica"
    title="Universidad Nacional Politécnica"
  />
</p>

Listas

Tres tipos de listas:

1. Listas ordenadas (<ol> ... </ol>)

2. Listas no ordenadas (<ul> ... </ul>)

<li> ... </li>

delimitan cada elemento de la listas

3. Listas de definición (<dl> ... </dl>)

<dt> ... </dt> delimitan los términos
<dd> ... </dd> delimitan las definiciones

>>Las listas se pueden anidar

Listas

Ejemplo

<ol>
    <li>Primer elemento </li>
    <li>Segundo elemento </li> 
    <ul>
        <li>Elemento de lista desordenada anidada</li> 
    </ul>
    <li>Definiciones: </li> 
    <dl>
        <dt>Término</dt>
        <dd>Definición del término 1</dd>
    </dl> 
</ol>

Tablas

Permiten presentar información tabular, en filas y columnas, con cabeceras
Cada elemento de la tabla puede ser simple o a su vez ser otra agrupación de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos
Esto ha dado lugar a que a veces se usan para estructurar la página, lo cual no es en absoluto recomendable

Tablas - Componentes

Tablas

<table>

Define una tabla Atributos

border – en píxeles
width – anchura de la tabla en píxeles o en porcentaje del espacio horizontal del elemento padre
cellspacing – espacio entre el borde de la celda y su contenido
cellpadding – espacio entre celdas o entre celda y borde de tabla
summary – aporta información sobre el contenido de la tabla (para dispositivos que no la pueden visualizar, por ejemplo)

Tablas

<caption>

Leyenda de la tabla: texto opcional que se muestra fuera de la tabla(por defecto, arriba)
Se suele poner a continuación de <table>
No puede incluir párrafos ni otros elementos de bloque, aunque sí etiquetas en línea (<strong>, <em>, etc.)

Tablas sencillas

Una tabla sencilla se define con:

La etiqueta <table>
A continuación se definen las filas, con <tr> (table row) Y para cada fila, los elementos con <td> (table data cell)
Algunas celdas se usan como cabeceras de fila o columna: <th> (table header)
Aunque se pueden utilizar en cualquier celda
Se muestran resaltadas (normalmente, en negrita y centradas en horizontal)

Se pueden agrupar celdas

En una fila con el atributo colspan
En una columna con el atributo rowspan

Tablas sencillas

<table border="1" width="30%">
<caption>Fusión de filas y columnas</caption>
<tr>
   <th colspan=3>Números</th>
</tr>
<tr>
   <th>Nombre</th>
   <th>Valor</th>
   <th>Idioma</th>
</tr> <tr>
   <td>Uno</td>
   <td>1</td>
   <td rowspan="2">Español</td>
</tr> <tr>
   <td>Dos</td>
   <td>2</td>
</tr>
</table>

Tablas complejas

Pueden comenzar con una cabecera (opcional y como mucho una) <thead>
Pueden acabar con un pie (opcional y como mucho uno) <tfoot>, Se declara antes de los <tbody>

Tienen al menos un cuerpo <tbody>

<table summary="Análisis de ventas anuales">
  <caption>Análisis de ventas anuales</caption>
 
  <thead>
    <tr>
      <th scope="col">AÑO</th>
      <th scope="col">Producto A</th>
      <th scope="col">Producto B</th>
      <th scope="col">Producto C</th>
      <th scope="col">Producto D</th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
    </tr>
    <tr>
      <th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
    </tr>
    <tr>
      <th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
    </tr>
    <tr>
      <th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
    </tr>
  </tbody>
</table>

Formularios

<form>

Conjunto de controles que permiten al usuario interactuar
Generalmente para introducir datos y enviarlos al servidor web
El navegador envía únicamente los datos de los controles contenidos en el formulario
En una misma página puede haber varios formularios que envíen datos al mismo o a diferentes agentes

<form action="http://www.miweb.com/procesaform.php" method="post"> 
Escribe tu nombre:
<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" /> </form>

Formularios

Dentro de un formulario puede haber:

Cualquier elemento típico de una página web

Párrafos, imágenes, divisiones, listas, tablas, etc.

Controles de formularios

Estructura de formularios

Información para accesibilidad

<label> permite mejorar la accesibilidad de los controles

Controles avanzados (sólo HTML5)

Formularios

Atributos de <form>
action="URL": aplicación del servidor que procesará los datos

remitidos (por ejemplo, un script de PHP)
method: método HTTP para enviar los datos al servidor

• GET: como añadido a la dirección indicada en el atributo action

Limitado a 500 bytes
Los datos enviados se añaden al final de la URL de la página y por tanto se ven en la barra del navegador
Se suele usar cuando se envía información que no modifica el servidor (por ejemplo, términos para una búsqueda)
Si no se especifica, los navegadores suelen hacer GET

Formularios

<input />

type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button" - Indica el tipo de control que se incluye en el formulario
name = "texto" - Nombre del control (para que el servidor pueda procesar el formulario)
value = "texto" - Valor inicial del control
size - Tamaño inicial del control (en píxeles, salvo para campos de texto y de password que se refiere al número de caracteres)
maxlength = "numero" - Máximo tamaño de texto y de password
checked = "checked" – Opción preseleccionada para los controles checkbox y radiobutton
disabled = "disabled" - El control aparece deshabilitado y su valor no se envía al servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se puede modificar
src = "url" - Para el control que permite crear botones con imágenes,

indica la URL de la imagen que se emplea como botón de formulario
alt = "texto" - Descripción del control

Formularios

Cuadro de texto

Se enviará al servidor cuando se pulse un botón de enviar
El nombre asignado en name tiene que concordar con el que se use en la aplicación en el servidor
No se deben utilizar caracteres problemáticos en programación (espacios en blanco, acentos y caracteres como ñ o ç)
value permite establecer un valor inicial en el cuadro de texto

Nombre <br/>
<input type="text" name="nombre" value="" />

Contraseña <br/>
<input type="password" name="contrasena" value="" />

Contraseña

Formularios

Cuadro de texto de varias líneas

filas: número de filas visibles (sale una barra de desplazamiento si se hay más)
columnas: anchura en caracteres

Nombre <br/>
<textarea name="nombre" rows="4" cols="50"> 
   Contenido inicial del cuadro de texto 
</textarea>

Formularios

Botón de envío de formulario

El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha el botón

<input type="submit" name="enviar" value="Enviar" />

Botón de reseteo de formulario

El navegador borra toda la información introducida y muestra el formulario en su estado original

<input type="reset" name="borrar" value="Borrar formulario" />

Formularios

Formulario Email

 <h3>Envíanos tus sugerencias por e‐mail</h3>
<form action="MAILTO:sugerencias@tehacemoscaso.com" method="post" 
enctype="text/plain">
Nombre:<br>
<input type="text" name="name" value="tu nombre"><br>
E‐mail:<br>
<input type="text" name="mail" value="tu email"><br>
Sugerencia:<br>
<input type="text" name="comment" value="Tus sugerencias" size="50"><br>
<br> <input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>

Formularios

Botones en general:

El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha el botón

<button type="submit">Enviar</button>
<button type="reset">Borrar formulario</button> 
<button type="button">Botón</button>

Formularios

Casillas de verificación (checkbox)

value indica el tipo de casilla: on/off, yes/no, true/false

Lenguajes de programación: <br/>
<input name="java" type="checkbox" value="on"/> Java 
<input name="cplusplus" type="checkbox" value="on"/> C++ 
<input name="csharp" type="checkbox" value="on"/> C# 
<input name="otros" type="checkbox" value="on"/> Otros

Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer

Radiobutton

Formularios

Listas de selección

Atributos de option:

value determina el valor que se envía al servidor
selected permite definir la opción por defecto

<form action="">
<select name="lenguajes">
  <option value="c">C</option>
  <option value="cplusplus">C++</option>
  <option value="java" selected>Java</option>
  <option value="php">PHP</option>
  <option value="python">Python</option>
</select>
</form>

Formularios

Incluir un fichero

El atributo enctype en la etiqueta <form> del formulario tiene que ser multipart/form-data

<form name="fichero" action="procesa_fichero.php" method="post"
enctype="multipart/form-data">
Fichero: <input type="file" name="archivo" /> 
<input type="submit" value="Enviar">
</form>

Formularios

Agrupación de elementos

Permite ver mejor las partes de un formulario agrupando elementosrelacionados
<legend> es el título que se visualiza con el grupo

<form action="">
    <fieldset>
        <legend>Información personal:</legend> 
        Nombre: <input type="text" size="50"><br> 
        E‐mail: <input type="text" size="50"><br> 
        Ciudad: <input type="text" size="20">
    </fieldset>
</form>

Formularios

Ejercicios

Crear un formulario para registrar un nuevo cliente en un sitio web, solicitando datos personales necesarios así como la creación de una clave de acceso (password). Incluir un captcha para verificar que se trata de una persona real (Esto requiere usar algún script para generar el captcha)
Crear un formulario para entrega de prácticas en una asignatura. Investiga cómo se puede comprobar el tipo de fichero

Objetos

Es una forma genérica de incluir elementos que son interpretados por algún plugin

<object> Atributos:

data="URL" - Los datos que utiliza el objeto
type="tipo-mime" - Tipo de contenido de los datos
El navegador decidirá el plugin o acción que corresponda en función del tipo

height="alto" y width="ancho"
classid, codebase, codetype - Información específica que depende del tipo de objeto

Objetos

Recursos que podemos añadir mediante <object>

Imágenes -aunque es preferible usar <img>
Vídeos
Archivos de sonido
Applets de Java - en HTML se usaba la etiqueta <applet>, que desaparece en HTML5
Archivos PDF
Controles ActiveX
...

Si el navegador no sabe abrir el contenido, solicitará al usuario que descargue un plugin para ejecutar.

Objetos

Se pueden proporcionar alternativas para un objeto
Cualquier texto que no sea una etiqueta se mostrará si el navegador no es capaz de reproducir el contenido

 <object title="Película interesante" classid="http://www.miweb.com/peli.py">
    <!‐‐ Formato alternativo en forma de vídeo ‐‐> 
    <object data="pelicula.mpeg" type="application/mpeg">
    <!‐‐ Otro formato alternativo mediante una imagen GIF ‐‐> 
        <object data="pelicula.gif" type="image/gif">
        <!‐‐ Si el navegador no soporta ningún formato, mostrar un texto ‐‐>
        Aquí debería haberse visto una película interesante. 
        </object>
    </object>
</object>

Objetos

Para incluir vídeos en formato Flash

<object data="video.swf" type="application/x‐shockwave‐flash">
</object>

Incluir un video de YouTube

<p>Aaron Swartz keynote ‐ "How we stopped SOPA" </p> 
<object width="640" height="360"
    type="application/x‐shockwave‐flash" 
    data="http://www.youtube.com/v/Fgh2dFngFsg">
    <param name="movie" value="http://www.youtube.com/v/Fgh2dFngFsg" /> 
    <param name="wmode" value="transparent" />
</object>

Videos o sonidos en HTML5

Para incluir vídeos en HTML5

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    Tu navegador no puede mostrar el vídeo.
</video>

Para incluir sonidos en HTML5

<audio controls>
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    Tu navegador no puede reproducir el sonido.
</audio>

Videos o sonidos en HTML5

Cuestiones importantes:

El navegador reproducirá el primer vídeo/sonido compatible Si no puede reproducir ninguno, mostrará el texto
No todos los navegadores soportan los mismos

Chrome

Sonido: MP3, WAV, OGG
Video: H.264+AAC, VP8+Vorbis, OGG

Firefox

Sonido: WAV, OGG (MP3 sólo en Windows)
Video: VP8+Vorbis, OGG (H.264 sólo en Windows)

Videos o sonidos en HTML5

Internet Explorer

Sonido: MP3
Video: H.264+AAC

Safari

Sonido: MP3
Video: H.264+AAC

Videos o sonidos en HTML5

<track>

Para incluir archivos de texto en vídeos o sonidos
Subtítulos, metadatos, descripciones, anotaciones, etc.
Sólo es compatible con Internet Explorer, Chrome y Opera.

<video width="320" height="240" controls>
    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
    label="English">
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
       label="Norwegian">
</video>

CSS

CSS - Introducción

Hojas de estilo en cascada (Cascading Style Sheets)

Ficheros de texto con la extensión .css
Definen la apariencia de las páginas Web
Facilitan la gestión de sitios web grandes y sofisticados
Las hojas CSS se crean una vez y se pueden compartir entre varios desarrolladores WEB
Para realizar un cambio de estilo en todo el sitio solo hay que hacerlo en un lugar: la hoja CSS correspondiente

CSS - Introducción

Versiones

CSS nivel 1 (1996, revisado en 2008) – http://www.w3.org/TR/CSS1
CSS nivel 2 (1998), actual: 2.1 (2011) – http://www.w3.org/TR/CSS21
CSS 2.1 Soportado por todos los navegadores habituales
CSS nivel 3 (en desarrollo) – http://www.w3.org/Style/CSS/current-work
Varias características ya definidas (selectores, pseudoclases y muchas propiedades) las van soportando todos los navegadores habituales (MS Internet Explorer es el más retrasado, solo desde la versión 10.0)

CSS - Introducción

Más información:

https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/

DOM

Definido por W3C
Modelo de Objetos del Documento (Document Object Model)
DOM define objetos y propiedades de los elementos HTML y XML, y los métodos para acceder a ellos
Representación de documentos HTML y XML
Los objetos de un documento se organizan en una jerarquía (árbol): jerarquía DOM

INTEGRACIÓN DE CSS CON HTML

La definición de los estilos para un elemento se puede realizar:

Dentro del propio elemento (internas al elemento) - NO aconsejable

Con una hoja de estilo interna (en el mismo documento)

Con la etiqueta <style> dentro de la sección <head>

<head>
    ...
    <style type="text/css">
    p { color: black; font‐family: Verdana; } </style>
</head>

INTEGRACIÓN DE CSS CON HTML

La definición de los estilos para un elemento se puede realizar:

Con una hoja de estilo externa - la mejor opción
Comportamiento por defecto del navegador

Todas las definiciones se combinan en cascada para producir una única hoja de estilo

Las definiciones mas locales tienen prioridad
Navegador << Externo << Interno << Elemento

INTEGRACIÓN DE CSS CON HTML

Ficheros CSS externos

El fichero externo es un fichero de texto donde se definen los estilos

Ejemplo: Dado el fichero estilos.css:

p { color: black; font‐family: Verdana; }

Se puede incluir de dos maneras, dentro de la sección <head>:

1. Con la etiqueta <link>

REGLAS @media

Tipo especial de reglas CSS (incluidas en CSS3) para indicar el medio o medios en los que se aplicarán los estilos incluidos en la regla
El medio en el que se aplican los estilos, se indica tras @media
Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas

Sintaxis de las hojas de estilo

Una hoja de estilo define un conjunto de reglas
Cada regla de estilo consta de

 Selector: elemento al que se aplica el estilo • Pueden ser varios, separados por ,

 Lista de declaraciones
• Cada declaración es un par propiedad:valor

• Separadas por ;

Comentarios entre /* y */

Selectores

Clase

A una etiqueta se le puede asociar una clase (o varias)

Esto permite aplicar estilos de la(s) clase(s) a la etiqueta
El nombre de la etiqueta se separa del nombre de la clase con . (importante: sin espacios entre los nombres y el punto)

h2.cabecera2 { text‐align: center; }

Se puede definir una clase sin especificar tipo de etiqueta

Esto equivale a *.clase

.cabeceracentrada { text‐align: center; }
<h1 class="cabeceracentrada">Título centrado</h2>
<h2 class="cabeceracentrada">Subtítulo centrado</h2>

Selectores

Selectores descendentes

Separados por espacio: permite seleccionar los elementos especificados por un selector dentro del ámbito de otro

p .destacado { ... }

Se aplica a todos los elementos con atributo class="destacado" que estén dentro de un párrafo <p>

ATENCIÓN: Los espacios y la puntuación son importantes:

p.destacado { ... }

Todos los párrafos <p> que estén declarados con atributo class="destacado"

p, .destacado { ... }
Todos los párrafos <p> y todos los elementos con atributo class="destacado"

Selectores

Ejemplos de selectores descendentes:

div.principal span.especial { ... }

Todos los elementos span con atributo class="especial" que estén dentro de un elemento div con atributo class="principal"

p span em{...}

Todos los elementos <em> dentro de un <span> dentro de un <p>

Selectores

Ejemplos de selectores descendentes:

p * a{...}

Todos los elementos <a> dentro de algún elemento dentro de un <p>

• Se aplica a
<p><span><a href="#">Enlace</a></span></p>

• No se aplica a
<p><a href="#">Enlace</a></p>

p a{...}

Se aplicaría a los dos casos anteriores

Selectores

Permite aplicar un estilo a un único elemento de una página
El elemento se identifica con un atributo id, que es único

<p id="destacado">Segundo párrafo</p>

El estilo para el ID se especifica precedido con el carácter # #destacado { color: red; }

Como recomendación

Usar selector de clase, que se aplica a varios elementos, para dar una apariencia homogénea al documento
Usar selector de ID con mesura

Selectores

Pseudo clases

Clases "virtuales" que no se insertan de manera explícita en las páginas (están predefinidas)
Se pueden definir sus propiedades como si fueran clases (utilizando : en vez de .)

a:link { color: blue }

CSS3 añade nuevas pseudo clases (por ejemplo :first-child)

Selectores

Pseudo clases de enlaces

a:link – Enlace no visitado o activado por el usuario
a:hover – Cuando se coloca el ratón sobre el enlace
a:active – Cuando se pincha sobre el enlace
a:visited – Enlace ya visitado por el usuario

a { background‐color: white; color: blue;
    border: white 3px solid; outline: white 3px solid;
}
a:visited { background‐color: yellow; color: red; }
a:hover { background‐color: black; color: white; }

Selectores

Otras pseudo clases

:first-child – Primer elemento de un tipo contenido dentro de otro div p:first‐child { color: red; }

:lang() – Aspecto de los elementos de un idioma determinado.

q:lang(es) { quotes: "«" "»"; }
q:lang(en) { quotes: '"' '"'; }
<p>El profesor dijo que <q lang="es">Muy bien</q>.</p> 
<p>The teacher said <q lang="en">Very well</q>.</p>

Selectores

Pseudo elementos

Similar a las pseudo clases. Pseudo elementos típicos:

:first-letter – Primera letra en un elemento de bloque

h1:first‐letter { font‐size: 400%; }

:first-line – Primera línea en un elemento de bloque p:first‐line { text‐transform: uppercase; }

:before y :after – Para añadir contenido antes o después de un elemento

p.cuidado:before { content: "Aviso: "; font‐weight: bold;
    text‐decoration: underline;
}
<p class="cuidado">Esto es un mensaje de atención.</p>

Selectores

Selector de hijos

Para seleccionar un elemento que es hijo directo de otro elemento Se indica mediante el signo >

p > span { color: blue; }

• Se aplica el selector <p><span>Texto1</span></p>
• No se aplica <p><a href="#"><span>Texto2</span></a></p>
• El selector descendente (p span{...})se aplicaría en los dos casos

Selectores

Selector adyacente

Para seleccionar elementos que se encuentran seguidos
Se indica mediante el signo +

p + p { text‐indent: 1.5em; }

Seleccion a todos los párrafos de una página que estén precedidos por otro, esto es, todos menos el primero

h1 + p { text‐indent: 1.5em; }

Selecciona todos los párrafos que estén precedidos por un h1

Selectores

Selector de atributos

[nombre_atributo~=valor] – elementos que tienen un atributo llamado nombre_atributo y al menos uno de los valores del atributo es el valor especificado

[title~="web"] { color: red; }

todos los elementos que tengan "web" dentro del valor de title

[nombre_atributo|=valor] – elementos que tienen un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor

*[lang=en] { ... } todos los elementos en inglés
*[lang|="es"] { ... } todos los elementos en español: "es", "es-ES", "es-AR",...

Herencia

Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad
Hay propiedades que no se heredan: size, float, margin
Un ejemplo, si se establece la regla body { color: red; }
Todo lo que está dentro de body tendrá el color red mientras no se declare otra regla más específica, que será la que prevalezca

      p { color: blue; }

Por ejemplo, para el código HTML

<h1>Sección 1</h1>
<p>Un texto con una parte<em>enfatizada</em></p>

"Sección 1" aparecerá en rojo, el párrafo en azul, y el texto "enfatizada" en azul a menos que haya alguna declaración de estilo específica para que aparezca en verde: em { color: green;

Caracterización de los estilos

Unidades de medida y colores
Posicionamiento y visualización

Modelo de cajas

Modelo de posicionamiento
Propiedades de visualización

Estilos de los elementos Texto

Enlaces con las pseudoclases a:link, a:hover, a:active, a:visited Imágenes
Listas
Tablas

Formularios

Unidades de medida

Para definir la altura, anchura, márgenes, tamaño de letra, ...
Los valores se expresan como números enteros o con decimales
Unidades absolutas

cm, centímetros
mm, milímetros
in, pulgadas (inches). 1in==2.54cm
pt, puntos. 1pt==0.35mm la más utilizada pc, picas. 1pc==12 pt

Unidades de medida

Unidades relativas
em, relativa respecto al tamaño de letra del elemento

• Si el font-size es de 12pt, 1em==12pt
- ex, relativa respecto a la altura de la letra x minúscula
- px, (píxel) relativa respecto a la resolución de la pantalla del dispositivo (respecto al tamaño del canvas)
Porcentajes
Valor numérico seguido del símbolo %

p { font‐size: 150% /* 150% del valor del padre */
padding: 50% } /* 50% del width del padre */

Colores

Los colores se pueden especificar de varias maneras:
Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon,

navy, olive, orange, purple, red, silver, teal, white, yellow.
RGB hexadecimal: #ff0000 la manera más habitual
RGB decimal: rgb(255,0,0)
RGB porcentual: rgb(100%, 0%, 0%)

Imagen del estándar:

http://www.w3.org/TR/CSS21/syndata.html#value-def-color

Modelo de cajas

Para cada etiqueta HTML se crea una caja rectangular que encierra los contenidos de ese elemento
El tamaño de cada área (margin, border, padding) se define con propiedades relativas a las cuatro direcciones:
top, bottom, left, right

margin: 10px /* Propiedad resumida */ 
margin‐top: 20px;
margin‐right: 20px;

Modelo de cajas

El tamaño del contenido se define con:

width

height

• <medida>
• <porcentaje>
• auto: lo ajusta el navegador
• inherit: valor del elemento padre

Modelo de cajas

Propiedades del borde

Estilo del borde: border-style

groove | ridge | inset | outset | inherit

Anchura: border-width
Color: border-color
Lados individuales: border-top-style, border-right-style, border-bottom-style, border-left-style

Resumen: border

( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit

CSS3 añade bordes redondeados y sombras

Modelo de cajas

Ejercicio

¿Cuál será la anchura del siguiente bloque? div {

  width: 400px;
  padding‐left:  60px;
  padding‐right: 60px;
  margin‐left:   40px;
  margin‐right:  40px;
  border: 10px solid black;

}

Modelo de cajas - Fondo

Un color: background-color

<color> | transparent | inherit

Una imagen: background-image

<url> | none | inherit

La imagen se puede repetir con background-repeat

repeat | repeat-x | repeat-y | no-repeat | inherit

Qué ocurre con la imagen de fondo cuando se hace scrolling en la página: background-attachment

scroll | fixed | inherit
Todas las propiedades: background

( <background-color> || <background-image> || <background- repeat> || <background-attachment> || <background-position> ) | inherit

Modelo de posicionamiento

Tipos de elementos

De bloque

Siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea
address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, p, pre, table, ul

En línea

Solo ocupan el espacio necesario para mostrar sus contenidos
Se pueden insertar en elementos de bloque y de línea
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Modelo de posicionamiento

Para cada elemento se genera una caja

La caja de un elemento contiene las cajas de los elementos que contiene
El elemento raíz del documento (<body>) genera una caja que sirve como bloque contenedor inicial para el resto de elementos

Tipos de posicionamiento

Una caja se puede colocar segun uno de los siguientes modos:

position: static

• Normal o estatico: es el modo de posicionamiento habitual position: relative

• Como el posicionamiento normal pero la caja se desplaza segun los atributos left, right, top, bottom

position: absolute

La caja se coloca de manera absoluta con respecto a la primera caja contenedora no estatica segun los valores left, right, top, bottom. Si no estuviera contenido en ninguna caja no estatica tomaría <body>
El atributo z-index permite controlar como se apilan las cajas

• Las cajas que queden debajo se ocultarán

Tipos de posicionamiento

position: fixed

Tipo de posicionamiento absoluto, pero la caja mantiene su posición y no se mueve cuando se usan las barras de desplazamiento

float

Posicionamiento flotante: Desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

Posicionamiento normal (estático)

Las cajas se colocan seguidas verticalmente de arriba abajo, en el orden en el que aparecen los elementos correspondientes en el documento
Sólo se tiene en cuenta si el elemento es de bloque o en línea, sus propiedades width y height y su contenido

Posicionamiento relativo

La caja se desplaza respecto de su posicion normal segun se indica en las propiedades top, right, bottom y left
Por defecto top, right, botton y left tienen el valor auto
El valor positivo de alguno de estos valores implica un desplazamiento
top hacia abajo desde el borde superior, bottom hacia arriba
left hacia la derecha desde el borde izquierdo, right hacia la izquierda
Las cajas desplazadas de forma relativa no modifican su tamano

Posicionamiento absoluto

La posicion de la caja se determina con las propiedades top, right, bottom y left respecto al primer elemento contenedor no estatico
Si no hubiera un contenedor posicionado, entonces se usa la ventana del navegador como referencia
Para que el contenedor se considere posicionado basta con declararle position: relative
El resto de las cajas sí pueden verse afectadas
Pasan a ocupar la posicion que ha dejado la anterior
Se pueden producir solapamientos

Posicionamiento fijo

Igual que el anterior pero las cajas correspondientes no se mueven en la pantalla del navegador aun cuando se usen las barras de desplazamiento
Puede servir por ejemplo en el medio print para imprimir páginas con encabezado y pie de página

Posicionamiento flotante

Una caja flotante se declara con float:right o float:left
Una caja flotante se desplaza horizontalmente
Hasta la zona más a la izquierda o más a la derecha posible
Si hay otras cajas flotantes, se van colocando seguidas
Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que encuentra el sitio necesario para mostrarse lo mas a la izquierda o lo mas a la derecha posible en esa nueva línea

Posicionamiento flotante

La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar que ha dejado
Para que un elemento no se vea afectado por lo que hagan las cajas flotantes a su alrededor puede definir la propiedad clear que fuerza a que el elemento se muestre debajo de cualquier caja flotante
Atributos de clear: none | left | right | both | inherit
- Si clear: left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo
- Si clear: both, el elemento se colocara debajo de cualquier caja flotante

Posicionamiento flotante

Figuras de: http://librosweb.es/css/capitulo_5/posicionamiento_absoluto.html

Posicionamiento flotante

La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar que ha dejado
Para que un elemento no se vea afectado por lo que hagan las cajas flotantes a su alrededor puede definir la propiedad clear que fuerza a que el elemento se muestre debajo de cualquier caja flotante
Atributos de clear: none | left | right | both | inherit
- Si clear: left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo
- Si clear: both, el elemento se colocara debajo de cualquier caja flotante

Posicionamiento flotante

Crear el HTML y los Estilos para la siguiente página

Propiedades de visualización

display

Cambia el tratamiento de un elemento Atributos

• block: hace que se trate el elemento como un bloque

• inline: hace que se trate el elemento como en línea

• none: el elemento desaparece de la página y los demas elementos pueden ocupar su lugar

visibility

Permite ocultar completamente un elemento que sigue ocupando su sitio

Atributos: visible | hidden | collapse | inherit

• collapse es similar a hidden pero para filas y columnas de tablas

Propiedades de visualización

overflow

Controla la forma en la que se visualizan los contenidos que sobresalen de sus elementos:
visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para visualizar el elemento. Comportamiento por defecto
hidden: el contenido sobrante se oculta y solo se visualiza la parte que cabe dentro de la zona reservada para el elemento
scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada para el elemento, pero tambien se muestran barras de scroll que permiten visualizar el resto del contenido
auto: el comportamiento depende del navegador. Normalmente es el mismo que la propiedad scroll

Propiedades de visualización

z-index

Indica las cajas que se muestran delante o detras de otras cuando se producen solapamientos
Se especifica con un numero: el mayor mas arriba

Extructura de la página

Las etiquetas <div> y <span> en principio no tienen ningun significado para la presentacion
Solo agrupan elementos

• <div> a nivel de bloque

• <span> a nivel de línea
Combinados con selectores de clase permiten estructurar la

aplicacion de estilos en una página

Extructura de la página

Para estructurar una página

Definir bloques con <div> y su composición

• A cada bloque asignarle una clase o un id
• Cada bloque <div> puede constar de otros bloques <div>

• A nivel de línea se pueden definir cajas con <span>

Asociar propiedades de posicionamiento y visualizacion a cada una de las cajas definidas con clase o id

Trucos de posicionamiento

Centrar una pagina horizontalmente con ancho determinado
Agrupar todos los contenidos de la página en un elemento <div>
Asignarle a ese <div> unos margenes laterales automaticos con la propiedad margin de CSS

#contenedor {
  width: 400px;
  margin: 0 auto;
}

<body>
  <main id="contenedor">
    <h1>Sección 1</h1>
    <p> bla bla bla </p>
    ...
  </main>
</body>

Adaptación de la página al tamaño de la pantalla

Propiedades para limitar la anchura y altura mínima y máxima de cualquier elemento de la página

min-width: anchura mínima de un elemento

Por defecto: 0
max-width: anchura máxima de un elemento

Por defecto: none
min-height: altura mínima de un elemento

max-height: altura máxima de un elemento

• Se pueden dar como un valor numérico o un porcentaje

#contenedor {
  min‐width: 300px;
  max‐width: 800px;
}

Texto

Propiedades tipográficas

color: <color> | inherit

font-family

(( <nombre_familia> | <familia_generica> ) (,<nombre_familia> | <familia_generica>)* ) | inherit
Familias genericas: serif (Times New Roman), sans-serif (Arial), cursive (Comic Sans), fantasy (Impact) y monospace (Courier New)

font-size

<tamano_absoluto> | <tamano_relativo> | <medida> | <porcentaje> | inherit

font-weight

normal|bold|bolder|lighter|100|200|300|400|500|600|700|

800 | 900 | inherit

Texto

font-style

• normal | italic | oblique | inherit

font-variant

• normal | small-caps | inherit

font

• ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line- height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit

Texto

Apariencia del texto

text-align

• left | right | center | justify | inherit

line-height

• normal | <numero> | <medida> | <porcentaje> | inherit text-decoration

• none | ( underline || overline || line-through || blink ) | inherit text-transform

• capitalize | uppercase | lowercase | none | inherit

Texto

Apariencia del texto

vertical-align

text-indent

• <medida> | <porcentaje> | inherit

letter-spacingyword-spacing

• normal | <medida> | inherit

white-space–tratamiento de los espacios en blanco

Imágenes

Propiedades:

Anchura y altura: width y height Borde

   img {
     width: 120px;
     height: 250px;
     border: none;

}

En general no es habitual dar las mismas dimensiones a todas las imágenes y se suele definir su tamaño directamente en el código HTML

Listas

Propiedades:
list-style-type

list-style-position
• inside | outside | inherit

list-style-image
• <url> | none | inherit

list-style
• ( <list-style-type> || <list-style-position> || <list-style-image> ) |

inherit

Formularios

Mejoras en los campos de texto
Adición de un relleno en los elementos <input> para que no aparezcan pegados

form.elegante input { padding: .2em; }

JavaScript

Introducción

Lenguaje de script (guión: secuencia de instrucciones) para la

creación de páginas web dinámicas
- Crear visualizaciones mas atractivas y mayor interactividad
- Permite gestionar diferencias de implementación entre los distintos navegadores
Lenguaje interpretado (no se compila)
El navegador se encarga de interpretar y ejecutar el código JavaScript
JavaScript NO es Java  Basa su sintaxis en C
Multiples librerías y frameworks: Jquery, Angular, etc.
JavaScript en el servidor (tendencia en auge):  Node.js, Jaxer, EJScript, RingoJS, AppengineJS

Seguridad de JavaScript

Por seguridad, los scripts sólo se pueden ejecutar dentro del

navegador y con ciertas limitaciones:
- No pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descargó el script
- No pueden cerrar ventanas que no hayan abierto esos mismos scripts
- No pueden acceder al sistema de ficheros, ni para leer ni para escribir
- No pueden acceder a las preferencias del navegador
- Si la ejecución de un script dura demasiado tiempo el navegador informa al usuario de que el script está consumiendo demasiados recursos y le da la posibilidad de detener su ejecucion

Historia

LiveScript (Brendan Eich, 1995): lenguaje de script para Netscape Navigator 2.0
JavaScript: acuerdo entre Netscape y Sun
Estandarizacion

ECMA-262 – ECMAScript Language Specification (1997)

Actualmente, version 6

Diseño Web

By Wilfredo Meneses

Diseño Web

1,106

Wilfredo Meneses

Profesor universitario

meneboni.com

HTML y CSS

Proyecto #2: Imágenes

Proyecto #3: Búsqueda

Proyecto #4: Card

Proyecto #5: Page

HTML

¿Qué es HTML?

¿Evolución?

Estructura de una página Web

Definir un documento HTML

Documentos HTML

Elementos HTML

Comentarios

Codificación de caracteres

Ejemplo

Codificación de caracteres

Codificación de caracteres en los hiperenlaces

Codificación de caracteres en los hiperenlaces

Ejemplo

Etiquetas de cabecera

Etiquetas de cabecera

Etiquetas de cabecera

Etiquetas de cabecera

Etiquetas de cabecera

Etiquetas de cabecera

Texto

1. Etiquetas de bloque

2. Etiquetas en-línea

3. Etiquetas de contenedores de texto

Etiquetas de bloque (Párrafos)

<p>

Etiquetas de bloque (Párrafos)

<pre>

Etiquetas de bloque (Secciones)

<h1> <h2> <h3> <h4> <h5> <h6>

<address>

Etiquetas en línea

<br />

<hr />

Etiquetas en línea

<abbr>

<cite>

<dfn>

Etiquetas en línea

<code>

<samp>

<kbd>

Etiquetas en línea

<del>

<ins>

Estructura de la página

<div>

Agrupación de texto

Agrupación de texto

Hiperenlaces

<a>

Hiperenlaces

Hiperenlaces

Imágenes

<img>

Imágenes

<img> - Atributos

Imágenes

Ejemplo

Listas

Tres tipos de listas:

1. Listas ordenadas (<ol> ... </ol>)

2. Listas no ordenadas ​(<ul> ... </ul>)

<li> ... </li>

delimitan cada elemento de la listas

3. Listas de definición (<dl> ... </dl>)

Listas

Ejemplo

Tablas

Tablas - Componentes

Tablas

<table>

Tablas

Tablas sencillas

Una tabla sencilla se define con:

2. Listas no ordenadas (<ul> ... </ul>)