Tema 2 HTML, XML y CSS Completo

Programación web
AEB-1055
1
Presentación
Docente a cargo: MSC María José Mirón Chacón
Correos electrónicos de contacto:
• mariajose@itshuatusco.edu.mx
• itsh.mjmc@gmail.com
Horario de la asignatura:
• Martes 14:00 – 17:00 horas
• Miércoles 15:00 – 17:00 horas
2
Tema 2: HTML, XML y CSS
2.1. Introducción
2.2 Estructura global de un documento Web.
2.3 Elementos básicos: texto, vínculos, listas, tablas, objetos,
imágenes y aplicaciones.
2.4 Formularios
2.5 Lenguajes de presentación en documentos Web.
2.6 Selectores.
2.7 Modelo de caja.
3
Introducción
Subtema 2.1
Estructura global de un documento Web.
Estructura de un documento WEB
Introducción HMTL Head

title
dir
FrontEnd script
style
lang
link
DOCTYPE base
manifest
Metadatos
Tecnologías FrontEnd
• Estructura del • Presentación
documento y de la
contenidos estructura y
contenidos
La W3C impone que, todo HTML5 CSS3 HMTL5, CSS3 y Javascript

navegador moderno debe son altamente
ser capaz de integrar estas dependientes y actúan
cuatro tecnologías al como una sola unidad
menos
XML Javascript
• Intercambio de • Proceso lógico

datos
Estructura global de un documento HTML5
<!DOCTYPE html> Tipo de documento

<html> Raíz del documento
<head> Cabecera del documento
</head>
<body> Cuerpo del documento
</body>
</html>
Habilitar HTML5
<!DOCTYPE html> No es un tag de HTML, es una directiva al navegador que le hace saber el tipo de
documento que está por interpretar. En este ejemplo, un documento HTML5.
Debe ser la primera línea del archivo, sin espacios ni líneas que la precedan y se
ubica justo antes del tag <html>, es el único elemento que se incluye fuera de esta
etiqueta.
Al leer esta línea, el modo estándar del navegador se activa y las incorporaciones
del HTML5 empiezan a ser interpretadas.
Es insensible a mayúsculas y minúsculas.

Raíz de un documento HTML5
<!DOCTYPE html>
<html> Raíz del documento
<head>
…
</head>
<body>
…
</body>
</html>
Principio y fin de un documento HTML
<html> … </html>
• Indica el principio y el fin de nuestra página web. Es también la raíz de la

estructura de árbol de nuestro documento.
• Toda instrucción de nuestro documento debe estar entre ambas etiquetas.
• Ambas etiquetas son insensibles a mayúsculas y minúsculas.
Parámetros del elemento <html>
• Indica la dirección en que el texto debe ser leído.
dir Esto incluye al contenido, los valores de los
atributos y las tablas.
• Permite indicar el lenguaje que se utilizará en la

lang presentación de la información e incluso la
variante del idioma por país.
• Señala el nombre de un archivo manifiesto donde

manifest se puede indicar los documentos que pueden ser
alojados en caché del lado del cliente”.
Indicar la dirección del texto
<html [dir=<LTR | RTL>]>…
</html>
• El atributo dir es opcional. Indica la dirección en que el texto debe ser leído. Esto incluye al contenido, los
valores de los atributos y las tablas.
• Sus dos posibles valores (ambos mutuamente excluyentes) son:

• LTR para indicar lectura de izquierda a derecha (left to right).
• RTL para indicar lectura de derecha a izquierda (right to left).
• Los valores de este atributo son insensibles a mayúsculas y minúsculas.

Indicar el lenguaje y el país
<html [lang=<lenguaje>[-país]]>
• El atributo lang nos permite indicar el lenguaje que debe ser utilizado para la representación de la
información, Esto puede evitarnos el tener que hacer codificación especial para acentos, eñes y
demás “caracteres especiales”.
• Cuando sea necesario, se puede indicar la variante del lenguaje por país mediante el código de
país.
• Los valores de este atributo son insensibles a mayúsculas y minúsculas y se toman de dos largar
listas predefinidas .
<html
[manifest=<“archivo.manifest”>]>
• El atributo manifest nos permite indicar el nombre de un archivo manifiesto donde se puede
Memoria
indicar los archivos que pueden ser alojados en caché del lado del cliente”.
• El archivo debe tener la extensión .manisfest. caché
• El archivo manifiesto debe sujetarse a un formato de archivo específico para que pueda ser
interpretado por el navegador.
Beneficios del uso de la caché
Navegar sin conexión
• Los usuarios pueden navegar por nuestro sitio aún sin
estar conectados.
Velocidad
• Los recursos en caché son locales y por lo tanto su
acceso es más rápido
Carga al servidor reducida

• El navegador descarga del servidor solo los archivos que
han sido modificados.
Formato de un archivo .manifest
CACHE MANIFEST Encabezado obligatorio
CACHE: Esta línea da inicio a la lista de
Archivo1 archivos que serán cacheados en el
… cliente.
ArchivoN
NETWORK: Esta línea da inicio a la lista de

ArchivoA archivos que requieren conexión.
…
ArchivoZ
FALLBACK: Esta línea da inicio a la lista de

Archivo1 Archivo2 archivos de remplazo (“última
instancia”).
archivo.manifest – ejemplo I
CACHE MANIFEST
# v1 - 2016-04-13
# Curso web http://www.Miejemplo.com/index.html
http://www.Miejemplo.com/encabezado.png
http://www.Miejemplo.com/blah/blah
Notas:
• Se puede especificar ya sea la ruta relativa de un archivo de manifest de caché o una URL
absoluta (URLs absolutas deben estar en el mismo origen que la aplicación).
• Todas las líneas del archivo manifest asumen que están en la sección CACHE de no
indicarse lo contrario.
• Las tres secciones pueden listarse en cualquier orden y pueden aparecer más de una vez.
archivo.manifest – ejemplo II
CACHE MANIFEST
# v1 2016-04-25
CACHE:
index.html
cliente.html
estilos.css
MiImagen.png
# Usar desde la red si está disponible
NETWORK:
network.html
# Contenido de fallback
FALLBACK:
/ fallback.html
Recursos en un caché de aplicación
Entradas maestras
• Son todas nuestras páginas que implícitamente quedarán cacheadas porque indican el atributo
manifest en su etiqueta <html>.
Entradas explícitas
• Son todos aquellos recursos que aparecen listados en el archivo de manifiesto.
Entradas de red
• Son los recursos listados en un apartado NETWORK de nuestro archivo de manifiesto.
Entradas de fallback
• Son todas aquellas entradas que aparecen listadas en un apartado FALLBACK del archivo de
manifiesto.
Cabecera de un documento HTML
<!DOCTYPE html>
<html>
<head> Cabecera del
documento
</head>
<body>
</body>
</html>
Descripción de un documento HTML
<head> … </head>
• Proporciona información general pero importante sobre el documento.
• La mayor parte de lo que esté incluido en la cabecera del documento no se visualiza.
• Este es el apartado en donde podemos interactuar con los motores de búsqueda.
Elementos de la etiqueta <head>
<title> • Define el título de la página web. Es el pequeño rótulo que aparecerá
en la pestaña del navegador.
<script> • Se utiliza para insertar scripts (comúnmente de javascript) en el

documento.
<style> • Se utiliza para definir estilos dentro del documento.
<link> • Establece un enlace hacia un recurso externo. Por ejemplo, un

archivo de hoja de estilo.
<base> • Nos permite establecer direcciones URL base para la localización de

los archivos en el cuerpo del documento.
<meta> • Nos permite definir propiedades de un documento (autor,

descripción, palabras clave, juego de caracteres, etc.)
Atributos de la etiqueta <meta>
name • Define el nombre de un metadato. Suele
utilizarse en conjunto con el atributo content.
content • Define el valor de un metadato nombrado. Suele

utilizarse en conjunto con el atributo name.
charset • Define el conjunto de caracteres que debe

aplicarse para la renderización de la página.
http-equiv • Usado para fijar directivas de programa.

Definir meta información del documento
Name=“Nombre”
•“Nombre” indica el metadato que se está
definiendo”
Content=“Valor”
•“Valor” es la descripción del metadato
Meta datos primarios
Tipo (nombre) Significado (valor)
author Autor de la página

classification Palabras para clasificar la página en los buscadores
description Descripción del contenido de la página

generator Programa utilizado para crear la página
keywords Palabras clave
Nota:
En realidad podría definirse cualquier nombre de metadato, sin embargo, es
preferible utilizar nombres en inglés porque la gran mayoría de los buscadores, por
defecto buscan palabras claves en inglés.
Meta datos: ejemplo
<!DOCTYPE html>
<html lang="es" >
<head>
<title>Mi ejemplo</title>
<meta name=“author” content=“ITSH”>
<meta name=“description” content=“Un simple ejemplo”>
<meta name=“keywords” content=“HTML5, ISC, web”>
</head>
<body>
</body>
</html>
Indicar el juego de caracteres del documento
HTML5
<meta charset="UTF-8">
• El atributo charset de la etiqueta <meta> indica el juego de caracteres de codificación que se debe
utilizar para renderizar el documento.
• En HTML5, el juego de caracteres que debe utilizarse es “UTF-8” debido a que nos permite representar
casi todos los caracteres del mundo.
• Para consultar una lista de todos los posibles juegos de caracteres se puede acudir a
www.iana.org/assignments/character-sets.xhtml
Atributos de la etiqueta
<meta http-equiv>
• Define un intervalo de tiempo después del cual
refresh nuestra página será refrescada o redirigida.
• Es una forma alternativa de especificar el juego

content-type de caracteres para la codificación.
• Define la hoja de estilo por defecto. Esta hoja

default_style tendrá prioridad sobre cualquier otra.
• Es una alternativa al atributo lang de la etiqueta

content-language <html>.
Definir meta información del documento
con <meta http-equiv>
http_equiv=“Nombre”
•“Nombre” indica el metadato que se está
definiendo”
Content=“Valor”
•“Valor” es la descripción del metadato
Meta información con
<head http-equiv> - Ejemplo:
<!DOCTYPE html>
<html lang="es" >
<head>
<meta http-equiv="Refresh" content="20; URL=http://www.mipagina.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8/>
<meta http-equiv="Content-Language" content="es"/>
<meta http-equiv="Default-Style" content=“misestilos.css" />
</head>
<body>
</body>
</html>
Validar código HTML5
El W3C ofrece gratuitamente el Servicio de Validación de Marcado
(http://validator.w3.org/).
Práctica 01
Escribe la estructura global de una página web con las siguientes características:
1. Establece la dirección de texto de izquierda a derecha.

2. Fija el idioma de renderización al español de México.
3. El título de la página es tu nombre.
4. El conjunto de caracteres es UTF-8. Establece los siguientes metadatos: autor,
clasificación, descripción, generador, palabras clave.
5. Intervalo de actualización de 5 minutos.
6. La hoja de estilos por defecto es: misestilos.css
Valida también la página en el validador de la W3C

Estructura global de un
documento Web
Subtema 2.2
Estructura de un body
- Atributos y eventos
- Estructura semántica
- header
- nav
- section
- aside
- Footer
- Article
Estructura de un body
<!DOCTYPE html>
<html>
<head>
</head>
<body> Cuerpo del
documento
</body>
</html>
Cuerpo de un documento HTML5
<body> … </body>
• Ambas etiquetas enmarcan la parte visible de nuestra página.
• HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el
cuerpo del mismo. Los nuevos elementos poseen ahora un valor semántico.
• En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de
los elementos <div> o <table>.
Atributos de body (obsoletos)
Atributo Descripción
bgcolor Especificar el color de fondo de la página
Text Especificar el color del texto de la página
Background Especificar la ruta de un archivo de imagen para utilizar como
fondo de la página
Leftmargin Especificar los márgenes de la página
Topmargin
Rightmargin
Botonmargin
Link, alink, vlink Especificar el color de los enlaces
Nota: Hoy en día se considera mala práctica el utilizar estos atributos y en su lugar
debe usarse hojas de estilo.
Eventos de body I
Onload Ocurre cuando el documento es cargado
Onunload Cuando el usuario elimina un documento de una ventana o marco.
Onkeydown Cuando se pulsa una tecla

Onkeypress Cuando se pulsa y se suelta una tecla
Onkeyup Cuando se suelta una tecla
Onclick Click con el mouse
Ondbclick Doble click con el mouse
Onmousedown Cuando el botón del mouse se pulsa
Onmousemove Cuando el mouse se mueve

Eventos de body II
Onmousemove Cuando el mouse se mueve
Onmouseout Cuando el mouse se aparta de un elemento

Onmouseover Cuando el mouse se posiciona encima de un elemento
Onmouseup Cuando se suelta el botón del mouse estándo sobre un elemento
Nota: Los métodos que dan atención a los eventos suelen programarse con javascript.
Diseño tradicional de una web
Cabecera de la página
Barra de navegación (menú)
Área principal Barra lateral
Pie de página (información institucional)

Diseño semántico de una web
<header></header> (Cabecera de la página)
<nav></nav> (Barra de navegación - menú)
<aside></aside>
<section></section> (Área principal)
(Barra lateral)
<footer></footer> (Pie de página)

Describir el contenido del body
<header> … </header>
• Proporciona información introductoria al contenido del cuerpo del documento.
• Difiere de <head> en cuanto a su alcance. <head> proporciona información acerca de todo el documento y
<header> es usado específicamente para describir el cuerpo del documento o partes del mismo.
• Se pueden incluir títulos, subtítulos, logos, etc.

Describir el contenido del body – ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<header>
<h1>Diplomado en Webmaster</h1>
</header>
</body>
</html>
Definir la barra de navegación
<nav> … </nav>
• El elemento <nav> fue creado para definir el apartado de

nuestra página en donde se realiza la navegación en la
misma.
• Tradicionalmente la navegación se realiza mediante

menús o listas de enlaces que en HTML5 quedan
enmarcados por la etiqueta <nav>.
<!DOCTYPE html>
…
<body>
<header>
<h1>Sitio web del ITSH</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Oferta académica</li>
<li>Comunidad estudiantil</li>
<li>Transparencia</li>
<li>Contacto</li>
</ul>
</nav>
</body>
Bloques de información primaria
<section> … </section>
• Especifican bloques de información de tipo general pero de tipo

primario.
• Una <section> es tan general como un bloque <div> pero con

valor semántico.
• Si es necesario pueden llegar a tener un título, un encabezado y

un pie de sección.
Section
…
– ejemplo:
<body>
<header>
<h1>Diplomado en Webmaster</h1>
</header>
<nav> ... </nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur minus optio
assumenda saepe, beatae blanditiis! Laboriosam, repellat?
</p>
</section>
</body>
Bloques de información secundaria
<aside> … </aside>
• Los bloques aside generalmente contienen información relacioanda
con la información primaria pero no es igual de relevante.
• El elemento <aside> podría estar ubicado del lado derecho o izquierdo

de nuestra. El elemento solo define el tipo de información que contiene
no su posición.
• Un aside podría estar incluso dentro de un bloque section si

pretendieramos ponderar la información contenida en el section.
Aside
… – ejemplo:
<body>
…
<section>
<p>Lorem ipsum dolor sit amet, consectetur minus optio
assumenda saepe, beatae blanditiis! Laboriosam, repellat?
</p>
</section>
<aside>
<p> Comentario 1</p>
<p> Comentario 2</p>
</aside>
</body>
Información de cierre
<footer> … </footer>
• Comúnmente se le utiliza para indicar información de

carácter meramente informativo, como puede ser la
información institucional, en ocasiones información de
contacto, autoría, etc.
• Generalmente, el elemento <footer> representará el final

del cuerpo de nuestro documento
Footer–
…
ejemplo:
<body>
…
<section>
…
<aside>
…
</aside>
<footer>
El nombre de mi institución; 2017
</footer>
</body>
Estructura general de un body
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<header> … </header>
<section> … </section>
<aside> … </aside>
<footer> … </footer>
</body>
</html>
Article
<article> … </article>
• El elemento <article> nos permite identificar cada una de las unidades de información importantes del
documento.
• Este elemento fue creado con la intención de contener unidades independientes de contenido. Agrupa
porciones de información que están relacionadas entre sí independientemente de su naturaleza.
• Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia
estructura. Podemos definir esta estructura mediante los elementos <header> y <footer>
Diseño semántico de una web
<header></header>
<nav></nav>
<section> <aside>
<article> … </article> <article> … </article>

</section> </aside>
<footer></footer> (Pie de página)

Definir artículos en un documento
<body> …
<section>
<article>
<header>
<h1>Titulo del artículo</h1>
</header>
Contenido del artículo
<footer>
<p>Pie de página</p>
</footer>
</article>
</section>
</body>
Revisión
- Atributos y eventos
- Estructura semántica
- header
- nav
- section
- aside
- Footer
- Article
Práctica 02
Agrega a la estructura global de la práctica anterior un body con las siguientes
características:
1. Un header que contiene el encabezado en H1: Programación WEB y un H2:

Práctica 02 Unidad 2.
2. Una nav.
3. Una section.
4. Un article contenido dentro de la section anterior
5. Un footer.
Valida también la página en el validador de la W3C y corrige si es necesario

Atributos en las etiquetas
HTML
Subtema 2.3
Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones.
Elementos básicos
- hgroup
- Figure
- Semántica de secciones
- Semántica de agrupación
- Semántica a nivel de texto
- Semántica por incrustación
- Semántica por tabulación
- Formularios y elementos interactivos
Agrupación de cabeceras
<hgroup> … </hgroup>
• HTML5 nos permite utilizar las etiquetas H tantas veces como sea necesario mediante el elemento hgroup.
• Cuando se requiere especificar título (h1) y subtítulos (h2,h3,h4,h5,h6) es necesario agrupar estos
encabezados por medio del elemento <hgroup>. Este elemento puede contener solo etiquetas H
• Las agrupaciones <hgroup> evitan que el navegador intente generar varias sections a raíz de las H1..H6 que
encuentre.
Definir encabezados agrupados
<article>
<header>
<hgroup>
<h1>Título principal</h1>
<h2>Título secundario</h2>
</hgroup>
<p>Esto es un párrafo</p>
</header>
Cualquier contenido adicional
<footer>
<p>Este es otro párrafo</p>
</footer>
</article>
Introducir elementos gráficos
<figure> y <figcaption>
• Mediante estas etiquetas, HTML5 nos permite especificar elementos gráficos cuyo contenido en
determinado momento podría ser reubicado sin afectar el flujo del documento.
• Las etiquetas <figcaption> y </figcaption> encierran el texto relacionado con <figure> y establece una
relación entre ambos.
Indicar elementos gráficos - Ejemplo
<article>
<header>
<h1>Título del artículo</h1>
</header>
<p>Esto es un párrafo</p>
<figure>
<img src= “Imagen01.png”>
<figcaption>
Texto para la imagen 01
</figcaption>
</figure>
</article>
Semántica a nivel de sección
Elemento Descripción
<body> Representa el contenido principal de una página web.
<section> Define una sección de un documento.
<nav> Define la sección que contiene los enlaces de navegación.

Define contenidos relacionados con la información principal de la página pero que
<aside>
no son de gran relevancia.
<h1…h6> Representan los seis niveles de cabecera.
<header> Define la cabecera de una página o sección.
<footer> Especifica el pie de página de una página o sección.
<address> Esta sección contiene la información de contacto con los autores del documento.
Semántica a nivel agrupación 1/2
<p> Define una parte que debe presentarse como un párrafo.
Crea una línea de separación horizontal. Representa un quiebre temático
<hr>
entre párrafos, secciones o artículos.
<pre> Utilizado para conservar el formato establecido previamente.
<blockquote> Crea una cita en modo bloque. Utilizado para citar a fuentes no propias.
<ol> Define una lista ordenada de artículos

<ul> Define una lista desordenada de artículos.
<li> Define los artículos de una lista.
<dl> Define una lista de definiciones y sus términos.
<dt> Representa un término que será definido por el siguiente <dd>.

Semántica a nivel agrupación 2/2
<dd> Es la definición de los términos citados antes de él.
<figure> Representa una figura ilustrada que forma parte del documento.
<figcaption> Es la leyenda de una figura previa.
<div> Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de texto 1/3
<a> Representa un enlace a otro recurso.

<em> Para marcar con énfasis las partes importantes de un texto.
<strong> Apropiado para resaltar las partes más importantes de un texto
<b> Carece de valor semántico y debería evitarse siempre que sea posible.
En HTML5 esta etiqueta tiene el significado de “la letra pequeña” formas legales,
<small>
descargos, etc.
<s> Representa un contenido que ya no es exacto o relevante
<cite> Encierra el título de una referencia externa, título de un libro, película, canción.
<q> Crea citas en línea, marca las citas a otros autores o documentos.
<dfn> Sirve para marcar el término que se quiere definir.
Es el elemento apropiado para marcar formas abreviadas Además, gracias al

<abbr>
atributo title podemos indicar la versión no abreviada del término.
<time> Establece una referencia de tiempo o fecha.
<code> Apropiado para indicar un ejemplo de código de computadora
<var> Marca variables de programas y similares.

<samp> Señala lo que es una salida de un programa de un programa.
<kbd> Marca el texto que debe introducir el usuario.
<sub> Crea un subíndice posicionando el texto marcado por debajo de la línea.

<sub> Crea un subíndice posicionando el texto marcado por debajo de la línea.
<sup> Crea un superíndice posicionando el texto marcado por encima de la línea.
<i> Muestra el texto marcado con un estilo en cursiva o itálica.

<u> Muestra el texto subrayado.
Para resaltar relevancia contextual. Por ejemplo indicar los resultados de una
<mark>
búsqueda.
Representa la direccionalidad de sus descendientes con el fin de anular de forma

<bdo>
explícita al algoritmo bidireccional Unicode.
Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos

<span>
en línea.
Semántica por incrustación 1/2
<img> Representa una imagen a incrustar.
<iframe> Permite insertar un documento html en nuestro documento html.
Representa un punto de integración para una aplicación o contenido interactivo

<embed>
externo que por lo general no es HTML.
Representa un recurso externo que será tratado como una imagen, un sub-
<object>
documento html o un recurso externo a ser procesado por un plug-in.
Define parámetros para el uso por los plugins invocados por los
<param>
elementos <object>.
Representa un video, y sus archivos de audio y canciones asociadas, con la
<video>
interfaz necesaria para reproducirlos.
<audio> Representa un sonido o stream de audio.
Semántica por incrustación 2/2
Permite a autores o autoras especificar recursos multimedia alternativos para los

<source>
elementos multimedia como <video> o <audio>.
Permite a autores especificar una pista de texto temporizado para elementos

<track>
multimedia como <video> o <audio>.
Representa un área de mapa de bits en el que se pueden utilizar scripts para

<canvas>
renderizar gráficos o cualquier imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.

<area> En conjunto con <map>, define un mapa de imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.
Semántica por tabulación 1/2
Inicia la construcción de una tabla. Representa datos con diferentes
<table>
dimensiones.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los datos concretos de una tabla.
Representa el bloque de filas que describen las etiquetas de columna de una

<thead>
tabla.
Representa los bloques de filas que describen los resúmenes de columna de
<tfoot>
una tabla.
<tr> Representa una fila de celdas en una tabla.
Semántica por tabulación 2/2
<td> Representa una celda de datos en una tabla.

<th> Representa una celda de encabezado en una tabla.
Semántica para formularios 1/2
Representa un formulario, consistiendo de controles que puede ser enviado a un
<form>
servidor para procesamiento.
El elemento fieldset (grupo de campos) permite organizar en grupos los campos
<fieldset>
de un formulario.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
Representa un campo de datos escrito que permite al usuario o usuaria editar
<input>
los datos.
<button> Representa un botón .
<select> Representa un control que permite la selección entre un conjunto de opciones.

•Semántica por formularios 2/2
<datalist> Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
Representa una opción en un elemento <select>, o una sugerencia de un

<option>
elemento <datalist>.
<textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de par generador de llaves.

<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.
Representa la medida escalar (o el valor fraccionario) dentro de un rango

<metter>
conocido.
Elementos interactivos
Representa un widget desde el que un usuario o usuaria puede obtener
<details>
información o controles adicionales.
<summary> Representa un resumen, título o leyenda para un elemento <details> dado.
<command> Representa un comando que un usuario o usuaria puede invocar.
<menu> Representa una lista de comandos .

Atributos
Cada etiqueta de HTML posee atributos propios, que permiten modificar la
apariencia de la etiqueta y afectar a su contenido.
• Muchos elementos tienen atributos que definen propiedades del
elemento: <MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por
ejemplo:
• <H1 ALIGN="CENTER">Titular de nivel 1 centrado</H1>
• Es recomendable encerrar los valores de los atributos entre comillas

dobles. En algunos casos es además obligatorio (por ejemplo, si contienen
espacios en blanco).
<body>
ATRIBUTO FUNCIÓN
bgcolor Color de fondo de la página
link Color de los enlaces
alink Color de enlaces activos
vlink Color de enlace visitado
text Color default del texto
background imagen de fondo
Paletas de color
• La selección de color en HTML se trabaja con paletas de código
hexadecimal, con RGB, HSL o CMYK.
• Puede utilizar la herramienta : http://htmlcolorcodes.com/es/

para facilitar su trabajo, o alguna que provea su editor de texto.
ejemplo3.html
<HTML> 
<HEAD>
<TITLE> Ejemplo 3 </TITLE>
</HEAD>
<body bgcolor="#ccc" text="#000" link="red" vlink="blue"
alink="green" >

<h1>Encabezado de ejemplo </h1>
<p> Párrafo de ejemplo con un link: <a
href="http://www.google.com.mx"> Google </a></p>
</BODY>
</HTML>
Etiquetas de formato para texto
ETIQUETA FUNCIÓN
<i> </i> / <em> </em> Texto en cursiva o itálica
<u> </u> Texto subrayado
<b> </b> / <strong> </strong> Texto en negrita
<font size=”N”> </font> Tamaño de fuente
<font face=”Arial”> </font> Tipo de fuente
<font color=”N”> </font> Color de fuente
<pre> </pre> Texto preformateado. Respeta
espacios y saltos de línea.
Nota: Fuentes
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
Poniendo “Trebuchet MS” en primer lugar, indicamos que deseamos
que la página sea vista con esta fuente.
Si el usuario tiene esta fuente, entonces él la verá en su pantalla con

esta fuente.
Si el usuario no tiene esta fuente, el navegador intentará con la
siguiente fuente (Verdana, Arial…) hasta encontrar la que tenga.Por lo
tanto lo mejor es usar fuentes genéricas y definir otros tipos de fuentes
alternativos (si es posible que sean similares a la que nos gusta).
Nota: Fuentes
Cada sistema operativo y navegador interpretan de distinta forma estas
fuentes predeterminadas.
serif: “Times New Roman” en Windows, y “Times” en Macintosh

(diferente a la de Windows).
sans serif: “Arial” en Windows, y “Helvetica” en Macintosh.
monospace: “Courrier New” en Windows, “Courrier” en Macintosh, y
por lo general “VeraSans” o “DejaVuSans” en Linux.
Ejemplo: agregar esta línea a ejemplo3.html
<p> Texto con <b>negrita</b>,

<i>cursiva</i>, <u>subrayada</u> y con
<font size="7" face="impact" color="red">
fuentes de tamaños y colores </font></p>
Etiquetas de formato para párrafos
ETIQUETA FUNCIÓN
<p> </p> Contenedor para párrafos
<blockquote> </blockquote> Texto con sangrías
<center> </center> Contenido centrado
<p align = X ></p> Alineación de párrafo, donde
X puede ser:
center = centrado
left = izquierda
right = derecha
Ejemplo: agregar esta línea a ejemplo3.html
<h1>Formato para párrafos</h1>
<h2>Etiqueta "P"</h2>
<p>Cupcake ipsum dolor sit jelly-o brownie.</p>
<h2>Etiqueta "BLOCKQUOTE"</h2>
<blockquote>Cupcake ipsum dolor sit jelly-o brownie.</blockquote>
<h2>Etiqueta "CENTER"</h2>
<center>Cupcake ipsum dolor sit jelly-o brownie.</center>
<h2>Atributo "ALIGN"</h2>
<p align=center>CENTER Cupcake ipsum dolor sit jelly-o brownie.</p>
<p align=left>LEFT Cupcake ipsum dolor sit jelly-o brownie.</p>
<p align=right>RIGHT Cupcake ipsum dolor sit jelly-o brownie.</p>
Práctica 03 elementosHTML5.html
Desarrolla una página HTML que contenga lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-
type">
<title>Página ejemplo</title>
</head>
<body> Mi primera página web<br>
<nav>Barra de navegación</nav>

<header>Información <mark>reelevante</mark><time datetime="2017-12-
25"> Navidad</time></header>
<main>
<section>Contenido destacado<br>
<br> 
<span style="font-weight: bold;">Un enunciado en negritas</span><br>
<figure><figcaption>Una imagen de muestra</figcaption> <img
src="imagenes/contenido/imagen1.jpg"
height="350px" width="650px"> </figure>

</section>
<audio controls="controls"> <source src="musica/Kalimba.mp3"
type="audio/mp3">
</audio> <video controls="controls"> <source src="musica/psy.mp4"
type="video/mp4">
</video>
<article>
<h5>Nota 1</h5>
<details> <summary> HTML </summary>
<ol type="a">

<li>Reglas</li>
<ul type="square">
<li>Haber desayunado</li>
<li>Ropa adecuada</li>
<li>Agua para hidratación</li>
</ul>
<li>Etiquetas</li>
<li>Propiedades</li>
</ol>
</details>
</article>
<article>
<h5>Nota 2</h5>
<details> <summary> Rutina de entrenamiento
</summary>
<ul type="square">
<li>Haber desayunado</li>
<li>Ropa adecuada</li>
<li>Agua para hidratación</li>
</ul>
</details>
</article>
<article>
<h5>Nota 3</h5>
<table border="2">
<caption>Tabla 1</caption>
<thead>
<tr>
<th>Título A</th>
<th colspan="2">Título B</th>

</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Contenido 1</td>

<td>Contenido 2</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</article>
<section>Contenido detallado</section>
<article>

<p>La semana pasada, los alumnos...</p>
<h1>nota1</h1>
<h2>nota2</h2>
<h3>nota3</h3>
<pre><br></pre>

</article>
<aside>
<a href="https://www.facebook.com"><img src="imagenes/logos/facebook.png"

height="100px" width="100px"></a><br>
<a href="https://www.twitter.com"><img src="imagenes/logos/twitter.png"
height="100px" width="100px"></a><br>
<a href="http://www.google.com"><img src="imagenes/logos/google.png"
alt="No encontrada" title="Google" height="100px" width="100px"></a><br>

</aside>
<footer> Autor: ISC </footer>
</main>
</body>
</html>
Etiquetas para formularios
HTML
Unidad 2 HTML, XML y CSS
Subtema 2.4
Formularios
Desarrolla una página HTML que contenga lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-
type">
<title>Contacto</title>
</head>
<body>
<header>
<section>
<h1>Contacto</h1>
</header>
<article> <span style="font-style: italic;">Envía tus comentarios</span><br>
<br>
<table style="background-color: #ffccff;">
<form name="fcontacto" id="fcontacto" method="post" action="contacto.html">
<tbody>
<tr>
<td>Nombre:</td>
<td><input name="nombre" id="nombre" size="20" maxlength="20"
type="text"></td>
</tr>
<tr>
<td>Género: </td>
<td><input name="genero" id="genero" value="M" type="radio">
Masculino<input name="genero" id="genero" value="F" type="radio"> Femenino</td>
</tr>
<tr>
<td>Estado civil:</td>
<td><input name="estadocivil" id="estatodivil" value="Soltero"
type="radio">Soltero<input name="estadocivil" id="estatodivil"
value="Casado" type="radio">Casado</td>
</tr>
<tr>
<td>Teléfono:</td>
<td><input name="nombre" id="nombre" size="20"
maxlength="20" type="tel"><br>
</td>
</tr>
<tr>
<td>Intereses:</td>
<td><input name="intereses" id="intereses" value="Negocios"
type="checkbox">Negocios<input name="intereses" id="intereses"
value="Deportes" type="checkbox">Deportes</td>
</tr>
<tr>
<td>Color:</td>
<td><input name="color" id="color" value="color" type="color">
<br>
</td>
</tr>
<tr>
<td>Usuario:</td>
<td><input name="usuario" id="usuario" value="NA"
type="text"><br>
</td>
</tr>
<tr>
<td>Color:</td>
<td><input name="password" id="password"
value="NA" type="password"><br>
</td>
</tr>
<tr>
<td>Fecha de nacimiento:</td>
<td> <input name="fechan" id="fechan" type="date"></td>
</tr>
<tr>
<td>Hijos:</td>
<td> <input name="hijos" id="hijos" maxlength="999" min="0"
step="5"
type="number"></td>

</tr>
<tr>
<td>Correo:</td>
<td> <input name="correo" id="correo" size="20" pattern="^[_a-z0-9-]+(\.[_a-
z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$" typPe="text"></td>

</tr>
<tr>
<td>País:</td>
<td>
<select name="pais" id="pais">
<option value="AF">Afganistán</option>
<option value="AL">Albania</option>
<option value="DE">Alemania</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antártida</option>
<option value="MR">Mauritania</option>
<option value="YT">Mayotte</option>
<option value="MX" selected="selected">México</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldavia</option>
<option value="MC">Mónaco</option>
<option value="MN">Mongolia</option>
<option value="MS">Montserrat</option>
<option value="MZ">Mozambique</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="YE">Yemen</option>
<option value="YU">Yugoslavia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabue</option>
</select>
</td>
</tr>
<tr>
<td><input value="Limpiar" type="reset"><button type="submit">
Aceptar</button> </td>
<td><button type="reset">Limpiar</button></td>
</tr>
<tr>
</tr>
</tbody>
</table>
<form>
</article>
</section>
</body>
</html>
Integración y selectores
básicos CSS
Subtema 2.5
Lenguajes de presentación en documentos Web.
Subtema 2.6
Selectores.
Contenido
Integración con Selectores Selectores de

Introducción
HTML5 elementales parentesco
• Sintaxis • En línea • Universal • Descendiente
• Comentarios • Embebidos • Elemento • Hijos
• Atributos • Externos • Identificadores • Hermano
globales • Clases adyacente
• Hermano
general
Introducción

Introducción
• Hermano
general
Sintaxis CSS
elemento{
atributo:valor;
}
h1{
color:black; Se establece para el encabezado principal el color de
text-weight:bold; texto negro en negritas.
}
p{
color:blue; Se establece para los párrafos el color de texto
background-color: gray; azul marino y un fondo en color gris.
}
Comentarios en CSS
/* … */ Comentarios de línea o multilínea.
/* Estas serán las propiedades de los párrafos que se aplicarán en la

Operación normal pero podrán cambiar a voluntad del usuario */
p{
/* Establezco para los párrafos el color de texto azul */
color:blue;
/* Establezco el gris como color de fondo */
background-color: gray;
}
Atributos globales HTML
Son atributos que pueden ser usados sobre cualquier elemento HTML5
accesskey Especifica una tecla de acceso para activar (hacer focus) en un
elemento. Normalmente la tecla <alt> + <otra tecla>
contenteditable Especifica si el contenido de un elemento se puede editar o no.
contextmenu Especifica un menú contextual para un elemento. El menú

contextual aparece cuando un usuario hace clic en el elemento.
dir Especifica la dirección del texto para el elemento: ltr ó rtl.

Atributos globales
draggable Especifica si un elemento es arrastrarle o no.
dropzone Especifica si los datos arrastrados son copiados, movidos o
vinculados, cuando se dejan caer sobre el elemento.
hidden Especifica la visibilidad de un elemento.

lang Especifica el idioma del contenido del elemento.
spellcheck Especifica si el elemento debe tener su ortografía y gramática
comprobada o no.
tabindex Especifica el orden de tabulación de un elemento.
Atributos globales
title Especifica la información adicional acerca de un elemento. Esta
información suele mostrarse como un tooltip.
class Especifica uno o más nombres de las clases definidas en un

documento CSS3.
style Especifica una línea de estilo CSS para el elemento.
id Especifica un único id para el elemento

Integración con HTML5

Introducción
• Hermano
general
Estilos en línea
De esta forma se asignan los estilos directamente en las
etiquetas HTML mediante el atributo style, el cual está
disponible para todas las etiquetas visibles.
Observaciones:
• Es una forma de probar estilos de manera rápida.
• No es recomendable cuando los estilos se van a aplicar repetidas veces debido al
trabajo que un cambio implicaría y el incremento exponencial del documento que
esto conlleva.
Ejemplo:
<p style=“background-color: gray; color: black”> Mi texto </p>
Estilos embebidos
De esta forma los estilos se definen en la cabecera del
documento (head), mediante las etiquetas <style></style>.
Ejemplo: Observaciones:
<head> • Es versiones anteriores de HTML era
<title>Este es un título</title> necesario especificar el tipo de estilos
<style> que serían insertados en la etiqueta
p{ <style>, en HTML5 ya no es necesario.
background-color: gray; • Es una forma de reducir códigos sin
color: black; embargo los estilos definidos serán
} exclusivos para el documento.
</style>
</head>
Estilos externos
De esta forma los estilos se definen en un archivo externo que
posteriormente es incluido con el elemento <link> en cada
documento que necesite los mismos estilos.
Ejemplo:
<head>
<title>Este es un título</title>
<link rel=“stylesheet” href=“[path/]archivo.css”>
</head>
Observaciones:
• Este método permite cambiar completamente los estilos simplemente cambiando el
archivo referenciado.
• Facilita el trabajo con diferentes dispositivos ya que únicamente hay que ligar el
documento al archivo de estilos apropiado.
Selectores elementales

Introducción
• Hermano
general
Selector universal
Se le utiliza para seleccionar a todos los elementos de la página. Se indica mediante un
asterisco (*).
*{
margin: 0px; Establece a cero el margin y el padding de todos los
padding: 0px; elementos de la página.
}
Selector de elemento
Selecciona todos los elementos de la página cuya etiqueta coincide con el valor del
selector.
p{
Establece el color del texto y el de fondo
color: red;
para todos los párrafos del documento.
background-color: white;
}
Selector de clase
Crea una clase CSS que puede ser referenciada en los documentos HTML tantas veces
como sea necesario.
<head>
<style>
.miclase{
color: red; Defino la clase.
background-color: white;
}
</style>
</head> Utilizo la clase.
<body>
<p class=“miclase”>
Esto es un párrafo
</p>
</body>
Selector de id
Crea un id CSS que puede ser referenciado en los documentos HTML una sola vez.
<head>
<style>
#mih1{
color: red; Defino el
background-color: white; identificador.
}
</style>
</head>
<body>
<h1 id=“mih1”> Utilizo por única vez el id.
Esto es un título
</h1>
</body>
Combinación de selectores
Se pueden combinar los selectores para definir las características en común. Basta con
separar los elementos mediante comas.
.clase1{
color: red;
background-color: blue;
}
.clase2{
color: red;
background-color: cyan;
}
Ambas clases
.clase1, .clase2{
aplicarán un
margin: 10px;
margen de 10
}
pixeles.
Combinación de distintos tipos de selectores
Se pueden especificar elementos HTML que tengan aplicado una clase en específico.
Elemento
HTML Clase CSS
p.miclase{ Atributos aplicados a todos los párrafos

color: red; que tienen aplicados los atributos que
background-color: blue; define la clase miclase.
}
Selectores de parentesco

Introducción
• Hermano
general
Selector descendientes
Se puede hacer referencia a los elementos que son descendientes de otro elemento a
tantos niveles como sea necesario, simplemente separando los elementos mediante
un espacio.

p span{ para todos los span que estén contenidos
color: blue; en los párrafos del documento
background-color: yellow; independientemente de si estos sean hijos,
} nietos, bisnietos, etc.
Combinación de distintos tipos de selectores
#identificador .clase elemento{

color: red;
background-color: blue;
}
Referencia al span que está dentro del

#miid header.miclase h1 span{ h1 que está dentro del header que
color: red; tiene aplicada la clase miclase, la cual a
background-color: blue; su vez está contenida en un elemento
} que tiene aplicado el id miid.
Selector de hijos (>)
Se puede hacer referencia a los hijos directos (no nietos y demás) de un elemento
HTML en específico.

p > span{
para todos span que son hijos directos de
color: blue;
los párrafos del documento. No
background-color: yellow;
seleccionará nietos ni demás
}
descendientes.
Selector de hermano adyacente (+)
Permite seleccionar a los hermanos (hermanos porque tienen la misma jerarquía).
h1 + p{ Selecciona a todos los párrafos (p) que

color: blue; sean antecedidos inmediatamente por una
background-color: yellow; cabecera de tipo h1.
}
p + p{
Selecciona a todos los párrafos (p) que
color: blue;
sean antecedidos inmediatamente por un
párrafo.
}
Selector de hermano general(~)
Permite seleccionar a todos los hermanos indicados que aparezcan después del
primer elemento de la instrucción. Los hermanos que aparezcan antes del primer
elemento no serán seleccionados.
Selecciona exactamente a todos los

h1 ~ p{
párrafos (p) hermanos de h1 que aparecen
color: blue;
después de h1. Los hermanos que
aparezcan antes no serán seleccionados
}
Revisión

Introducción
• Hermano
general
Fundamentos CSS
parte 1
Subtema 2.7
Modelo de caja.
Contenido
Tipos de Unidades Manejo de El modelo
elementos de medida colores de caja
Elementos block Keywords Content
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
La propiedad Relativas
display Canal Alfa Margin
Tipos de elementos
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
Elementos en bloque y en línea
Elementos block
• Siempre empiezan en una nueva línea, ocupan todo el espacio

disponible hasta el final de la línea y son posicionados en la pantalla
uno sobre otro. La gran mayoría de los elementos estructurales
serán tratados de esta forma.
Elementos inline
• No empiezan necesariamente en una nueva línea. Estos elementos

son posicionados uno al lado del otro en la misma línea, a menos
que no exista más espacio horizontal para ubicarlos.
Presentación por defecto de elementos en bloque
<body>…</body> Cada bloque es mostrado

por defecto tan ancho
como sea posible, tan alto
<header></header> como se necesario según
la información contenida
<nav></nav> y uno sobre otro, como se
muestra en el ejemplo.
<section></section>
<aside></aside>
<footer></footer>
Elementos por defecto en bloque 1/2
<body> <pre> <form>
<section>
<li> h1, h2, h3, h4, h5, h6
<nav> <figure> <hr>

<aside> <div> <isindex>
<h1…h6> <address> <menu>
<header> <blockquote> <noframes>
<footer> <center> <noscript>
<address> <dir> <ol>
<p> <dl> <ul>
<hr> <fieldset> <table>
Elementos por defecto en bloque 2/2
<dd> <button>
<dt> <del>
<frameset> <iframe>
<li> <ins>
<tbody> <map>
<td> <object>
<tfoot> <script>
<th>
<thead>
<tr>
Presentación por defecto de elementos en línea
<body>…</body>
<header>…</header>
<nav>…</nav>
<span>…</span> <a>…</a> <code>…</code>
<footer>…</footer>
Elementos por defecto en línea
<a> <em> <small>
<abbr> <font> <span>
<acronym> <i> <strike>
<b> <img> <strong>
<basefont> <input> <sub>
<bdo> <kbd> <sup>
<big> <label> <textarea>
<br> <q> <tt>
<cite> <s> <u>
<code> <samp> <var>
<dfn> <select>
Uso de la propiedad display
Fija el tipo de despliegue para la caja de un elemento. Cada elemento posee un valor
display por defecto dependiendo del tipo de elemento que se trate. Sus posibles valores
son:
Constante Significado
Hace que el elemento no genere ninguna caja. El resultado es que el elemento

desaparece por completo de la página y no ocupa sitio, por lo que los elementos
none adyacentes ocupan su lugar. Si se utiliza la propiedad display: none sobre un
elemento, todos sus descendientes también desaparecen por completo de la
página.
Hace que el elemento no interrumpa el flujo normal de presentación de los

inline
elementos.
Hace que el elemento sea block, este empezará en una nueva línea y ocupará todo
block el espacio de la misma aunque sus contenidos no ocupen todo el sitio.
Realiza una extraña combinación de ambos. Crea cajas que son de bloque y en
línea simultáneamente. Tendrá un comportamiento como de bloque pero con
Inline-block relación a los elementos que están a su alrededor es como un elemento en línea.
Hace que cualquier elemento de cualquier tipo se muestre como si fuera un

elemento de una lista. Los elementos con la propiedad display: list-item son
list-item exactamente iguales que los elemento <li> para efectos de visualización por lo
que es posible utilizar las propiedades de una lista sobre ellos.
flex Hace que el elemento se comporte como un flex-box (nuevo en CSS3)
Inline-flex Despliega un elemento flex-box en línea

inline-table Están relacionados con las tablas y hacen que un elemento se muestre
table-row-group como si fuera una parte de una tabla: fila, columna, celda o grupos de
filas/columnas.
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Unidades de medida
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
Unidades de medida (longitud)
Absolutas Relativas
•Representan una •No tienen un valor

medida física físico predefinido
•Se utilizan cuando •Se utilizan cuando
se sabe con no se sabe con
exactitud el medio exactitud el medio
de salida de salida
Unidades de longitud absolutas
Unidad Medida Abreviación
Centímetro 0.394 pulgadas cm
Milímetro 0.039 pulgadas mm
Pulgada 2.54 centímetros in
Pica 4.233 milímetros pc
Punto 0.353 milímetros pt
Pixel 0.265 milímetros px
Unidades de longitud relativas
Em 1 em es equivalente al tamaño de la fuente indicada

para el documento. 1em = 100% del tamaño inicial de
la fuente. Si no se especifica lo contrario, el valor por em
defecto es 16 pixeles.
Ex Es equivalente a la altura de la letra x de la fuente

ex
actual. 1ex = 0.5em.
Rem Es equivalente al tamaño de la fuente del elemento raíz
del documento HTML (la etiqueta html). rem
Porcentaje Representa el tanto por ciento del elemento según su

%
padre.
Unidades de longitud viewport
Viewport width Representa un porcentaje de la anchura del viewport del

dispositivo móvil. Un vw = 1/100 de la anchura del vw
viewport del navegador.
Viewport height Representa un porcentaje de la altura del viewport del
dispositivo móvil. Un vh = 1/100 de la altura del viewport vh
del navegador
vmin 1/100 del valor mínimo entre la altura y la anchura del
viewport. Por ejemplo, para un viewport de 1000px * vmin
700px vmin sería = 700px
vmax 1/100 del valor máximo entre la altura y la anchura del
viewport. Por ejemplo, para un viewport de 1000px * vmax
700px vmax sería = 1000px
Manejo de colores
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
Colores mediante keywords
black marron green navy silver
red lime blue gray purple
olive teal white fuchsia yellow

Nota:
aqua Existen aproximadamente 126 keywords más. Se pueden consultar en:
http://www.rapidtables.com/web/color/RGB_Color.htm
Colores formato hexadecimal
Black #000000 (#000)
White #FFFFFF (#FFF)
Red #FF0000 (#F00)
Lime #00FF00 (#0F0)
Blue #0000FF (#00F)
Yellow #FFFF00 (#FF0)
Cyan/Aqua #00FFFF (#0FF)
Magenta/Fuchia #FF00FF (#F0F)
Silver #C0C0C0
Gray #808080
Maroon #800000
Olive #808000
Green #008000
Purple #800080
Teal #008080
Navy #000080
Colores en formato RGB y HSL
Black rgb(0,0,0) hsl(170,0,0)
White rgb(255,255,255) hsl(0,240,132)
Red rgb(255,0,0) hsl(0,240,120)
Lime rgb(0,255,0) hsl(80,240,120)
Blue rgb(0,0,255) hsl(160,240,120)
Yellow rgb(255,255,0) hsl(40,240,120)
Cyan/Aqua rgb(0, 255, 255) hsl(140, 240, 120)
Magenta/Fuchia rgb(255,0, 255) hsl(200,240, 120)
Silver rgb(192,192,192) hsl(160,0,181)
Gray rgb(128,128,128) hsl(160,0,120)
Maroon rgb(128,0,0) hsl(0,240,60)
Olive rgb(128,128,0) hsl(40,240,60)
Green rgb(0,128,0) hsl(80,240,60)
Purple rgb(128, 0, 128) hsl(200, 240, 60)
Teal rgb(0, 128, 128) hsl(120, 240, 60)
Navy rgb(0,0,128) hsl(160,240,60)
Colores manejando el canal Alfa
En la especificación de CSS3 se agregó el canal alfa a los formatos RGB y HSL, el

cual nos permite especificar el nivel de transparencia (opacidad) en un valor que
va de 0 a 1. Donde 0 es transparencia total y 1 ninguna transparencia (opacidad
total).
HSLA(255, 120, 30,0.5)

RGBA(255, 120, 30,0.5)
El modelo de caja
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
El modelo de caja
Box model
• CSS establece un comportamiento para cada elemento

HTML que hace que cada uno de ellos se represente
mediante una caja rectangular.
• Las cajas creadas no son visibles a simple vista porque
inicialmente no muestran ningún color de fondo ni de
borde.
• Los navegadores crean y colocan las cajas de forma
automática para cada elemento HTML, pero CSS permite
modificar todas sus características
Modelo de caja
Contenido
• Se trata de las palabras de un párrafo, una imagen,

el texto de una lista de elementos, etc.
Padding
• Es el espacio libre (opcional) que queda entre el

borde y el contenido de la caja.
Contenido
Borde
• Es el espacio libre (opcional) que queda entre el

borde y el contenido de la caja.
padding Margen
Borde • Es la separación (opcional) que existe entre la caja y
las demás cajas.
Margen
Manejo del padding
padding-top
• Establece el relleno de la parte superior entre el borde

y el contenido de la caja.
padding-top
padding-right
• Establece el relleno del lado derecho entre el borde y
padding-right
padding-left
el contenido de la caja.
Contenido
padding-bottom
• Establece el relleno de la parte inferior entre el borde

y el contenido de la caja.
padding-bottom padding-left
Borde • Establece el relleno del lado izquierdo entre el borde y
el contenido de la caja.
Margen
shorthand padding
padding
•Establece la anchura de todas o algunas de las

zonas padding de la caja de un elemento.
•Es una propiedad no heredable.
•Su valor por defecto es auto, lo que significa que
el navegador calcula su tamaño.
•Admite la notación {1, 4}
Notación {1, 4}
Parámetros Si solo se indica un valor, los cuatro lados tienen el mismo valor
Si se indican dos valores, el primero se asigna a los lados

horizontales y el segundo a los lados verticales
Si se indican tres valores, el primero se asigna al lado superior, el

segundo a los lados izquierdo y derecho y el tercero al lado
inferior.
Si se indican los cuatro valores, el orden de asignación es en el

sentido de las manecillas del reloj.
shorthand padding - ejemplos
Si se indican un solo valor, para los cuatro lados se asigna el mismo valor:
div{
div{ padding-top: 10px;
padding: 10px; padding-right: 10px;
} padding-bottom: 10px;
padding-left: 10px;
}
Si se indican dos valores, el primero hace referencia a los valores horizontales y el segundo valor
a los rellenos verticales:
div{
padding-top: 10px;
div{ padding-right: 20px;
padding: 10px 20px; padding-bottom: 10px;
} padding-left: 20px;
}
shorthand padding
Si se indican tres valores se interpretan como: el lado superior, el segundo valor como los valores
verticales (right y left) y el tercero como el valor inferior.
div{
padding-top: 10px;
div{
padding-right: 20px;
padding: 10px 20px 30px;
padding-bottom: 30px;
}
padding-left: 20px;
}
Si se indican cuatro valores, se asignan valores en el sentido de las manecillas del reloj:
div{
padding-top: 10px;
div{
padding-right: 20px;
padding: 10px 20px 30px 40px;
padding-bottom: 30px;
}
padding-left: 40px;
}
Manejo del borde
X es igual a:
border-top-X
• Aplicando el sistema
color
de colores de CSS3
border-right-X
border-left-X
• Mediante un conjunto
Contenido style de constantes
predefinidas
Padding • Aplicando constantes o

width medidas absolutas o
border-bottom-X
relativas
Margen
Estilos de borde
none Es el valor por defecto. Sin borde visible.

Lo mismo que none. Cuando se manejan tablas, los resultados
hidden pueden variar de los de none.
Borde punteado, formado por una serie de puntos separados por
dotted
espacios
Borde discontinuo, formado por una serie de pequeños trazos
dashed
intercalados por espacios.
solid Borde continuo, formado por una línea recta continua.
Borde doble, formado por dos líneas rectas continuas separadas

double entre sí por un espacio en blanco.
Estilos de borde
Borde hundido, que visualmente parece que se encuentra por

groove debajo del nivel de la superficie de la pantalla
Borde saliente, que visualmente parece que se encuentra por

ridge encima del nivel de la superficie de la pantalla
Borde hundido, que provoca que el elemento que encierra

inset parezca que se encuentra por debajo del nivel de la superficie de
la pantalla
Borde saliente, que provoca que el elemento que encierra parezca
outset que se encuentra por encima del nivel de la superficie de la
pantalla
Constantes width del borde
medium Es el valor por defecto y representa un borde moderado.
thin Un borde delgado.

thick Un borde grueso.
Unidad de Se pueden utilizar las unidades de medida estándar del html.
medida
Shorthands para el manejo de los bordes
Propiedad Parámetros
border-top
border-right
width |color | style
border-bottom
border-left
border-width Constantes o un valor {1, 4}
Keyword | Hexadecimal | RGB | HSL | RGBA | HSLA

border-color
(mutuamente excluyentes) {1, 4}
border-style Constante de estilo {1, 4}

border width |color | style
Shorhands para el manejo de los bordes - Ejemplos
p{
p{ border-top-width: 1px;
border-top: 1px black solid; border-top-color: black;
} border-top-style: solid
}
p{
border-top: 1px black solid;
p{
border-right: 1px black solid;
border: 1px black solid;
border-bottom: 1px black solid;
}
border-left: 1px black solid;
}
Manejo del margen
margin-top margin-top
• Establece el margen de la parte superior entre el

borde y las otras cajas de la página.
margin-right
• Establece el margen del lado derecho entre el borde y
margin-right
las otras cajas de la página.
margin-left
Contenido
margin-bottom
• Establece el margen de la parte inferior entre el borde

las otras cajas de la página.
Padding margin-left
Borde • Establece el margen del lado izquierdo entre el borde
margin-bottom las otras cajas de la página.
shorthand margin
margin
•Establece la anchura de todas o algunas de las

zonas margin de la caja de un elemento.
•Es una propiedad no heredable.
•Su valor por defecto es auto, lo que significa que
el navegador calcula su tamaño.
•Admite la notación {1, 4}
shorthand margin - ejemplos
Si se indican un solo valor, para los cuatro lados se asigna el mismo valor:
div{
div{ margin-top: 10px;
margin: 10px; margin-right: 10px;
} margin-bottom: 10px;
margin-left: 10px;
}
Si se indican dos valores, el primero hace referencia a los valores horizontales y el segundo valor
a los rellenos verticales:
div{
margin-top: 10px;
div{ margin-right: 20px;
margin: 10px 20px; margin-bottom: 10px;
} margin-left: 20px;
}
shorthand margin
Si se indican tres valores se interpretan como: el lado superior, el segundo valor como los valores
verticales (right y left) y el tercero como el valor inferior.
div{
margin-top: 10px;
div{
margin-right: 20px;
margin: 10px 20px 30px;
margin-bottom: 30px;
}
margin-left: 20px;
}
Si se indican cuatro valores, se asignan valores en el sentido de las manecillas del reloj:
div{
margin-top: 10px;
div{
margin-right: 20px;
margin: 10px 20px 30px 40px;
margin-bottom: 30px;
}
margin-left: 40px;
}
outline
outline-color
• Aplicando el sistema de colores de CSS3
outline-style
Contenido • Mediante un conjunto de constantes

predefinidas
outline-width
Padding
• Aplicando constantes o medidas
border absolutas o relativas
Margen
Revisión
Absolutas
Formato
Padding
hexadecimal
Elementos inline
Formato RGB y
Border
HSL
Fundamentos CSS
parte 2
Subtema 2.7
Modelo de caja.
Contenido
Tipos de valor Manejo del
Posicionamiento
básicos background
• width y height • Algoritmos • Color
• text-align • top, right, • Imagen
• font-style bottom, left • Position
• text-decoration • float • Repeat
• clear • Attachment
• Position
• overflow
Tipos de valor básicos
Posicionamiento
básicos background
• Position
• overflow
width
Modelo de caja aumentado:

• Content
• Padding
• Borde
height
• Background image
• Background color
• Margin
• Width y height
Imagen tomada de:

http://www.hicksdesign.co.uk/boxmodel/
Anchura de la caja
• Establece la anchura de los
width elementos de bloque y las imágenes.
• Se utiliza para establecer la anchura

min-width mínima de la caja.
• Establece la anchura máxima del

max-width elemento.
Altura de la caja
• Establece la altura de los elementos
height de bloque y las imágenes.
• Se utiliza para establecer la altura

min-height mínima de la caja.
• Establece la altura máxima del

max-height elemento.
Alineación del texto
text-align
•Alineamiento center right
horizontal del texto
de un elemento.
left justify
•El valor por defecto
valores
será left si está
establecido ltr y right
si rtl está establecido
Estilo de letra
italic
Font-style
normal oblique
•Establece el
estilo del tipo valores
de letra
text-decoration
underline • Se muestran subrayadas todas líneas de texto en la
parte inferior.
overline • Se muestran subrayadas todas líneas de texto en la

parte superior.
line-through • Todas las líneas texto están tachadas por el medio.
blink • El texto parpadea
None • El texto se muestra sin decoración

Posicionamiento
Posicionamiento
básicos background
• text-decoration • position • Repeat
• float • Attachment
• clear
• overflow
Algoritmos de posicionamiento
Posicionamiento normal (normal flow)
• Los elementos en bloque, inline y relativos se posicionan mediante este algoritmo.

Bajo este algoritmo los elementos se posicionan por bloque o en línea sin importar
más cosas.
Posicionamiento flotante
• Primero se coloca la caja en su posición normal y después se saca de su posición

para colocarlo lo más a la izquierda o a la derecha según se indique.
Posicionamiento absoluto
• La caja se retira del flujo normal completamente (no tiene ningún impacto sobre
los hermanos posteriores) y se le asigna una posición con respecto a su bloque
contenedor.
top, right, bottom, left
top • Indica el desplazamiento entre el borde superior del
elemento y el borde superior del elemento contenedor.
right • Indica el desplazamiento entre el borde derecho del

elemento y el borde derecho del elemento contenedor.
bottom • Indica el desplazamiento entre el borde inferior del

elemento y el borde inferior del elemento contenedor.
left • Indica el desplazamiento entre el borde izquierdo del

elemento y el borde izquierdo del elemento contenedor.
position
• Es el que establece el algoritmo del flujo normal de los
static elementos. En este caso, top, right, bottom y left no son
tenidos en cuenta.
• A diferencia de static, el posicionamiento relative desplaza las

relative cajas respecto a su posicionamiento original mediante top,
right, bottom, left.
• La referencia respecto de la que se desplaza un elemento no

absolute es su posición original, sino los bordes
superior/inferior/derecho/izquierdo de su elemento padre.
fixed • Se posiciona de la misma manera que el absoluto pero este

elemento nunca se moverá de su posición.
float
• Posiciona una caja moviéndola todo lo posible a su izquierda o derecha. El resto de
los elementos de la página se adaptan para fluir alrededor de la caja flotante. Sus
posibles valores son:
• La caja se desplaza todo lo posible a la izquierda de la

left posición en la que se encontraba. El resto de elementos de la
página se adaptan para mostrarse a su derecha.
• La caja se desplaza todo lo posible a la derecha de la posición

right en la que se encontraba. El resto de elementos de la página se
adaptan para mostrarse a su izquierda.
• Es el valor por defecto, en este estado no hay

none desplazamiento. Permite eliminar los efectos de los otros dos
valores.
clear
• Controla el comportamiento de los elementos adyacentes a elementos
posicionados de forma flotante. Sus posibles valores son:
Hace que la caja Hace que la caja Hace que la caja Es el valor por
sobre la que se sobre la que se sobre la que se defecto que se
aplica baje hasta aplica baje hasta aplica baje hasta aplica a todos
que su borde que su borde que su borde los elementos y
left
Both
right
none
superior esté por superior esté por superior esté por no tiene efecto
debajo del borde debajo del borde debajo del borde sobre la posición
inferior de inferior de inferior de de la caja.
cualquier cualquier cualquier
elemento elemento elemento
flotado a la flotado a la flotado a la
izquierda. derecha. izquierda o a la
derecha.
overflow
Controla el comportamiento de los contenidos que no caben en su elemento contenedor
El contenido no El contenido es El contenido es Depende del

es recortado, recortado y no recortado y el agente de
podría ser se muestran navegador web usuario.
dibujado fuera barras de usa las barras Navegadores de
scroll
visible
hidden
auto
del contenedor. posición. de escritorio como
desplazamiento, Firefox proveen
sea se haya barras de
recortado desplazamiento
contenido, o no. si hay contenido
excedente.
Contenido
Posicionamiento
básicos background
• Position
• overflow
width
Modelo de caja aumentado:

• Content
• Padding
• Borde
height
• Background image
• Background color
• Margin
• Width y height
Imagen tomada de:

http://www.hicksdesign.co.uk/boxmodel/
Manejo del background
background-color
Define el color de fondo de un elemento.
• Recibe cualquier valor de color en cualquier formato.
• background-color: #CECECE;
background-image
Define la imagen de fondo de un elemento.
• Ejemplo: background-image: url(“img/archivo_imagen”)
Posición inicial de la imagen
background-posicion
•Define la posición inicial de la imagen de fondo

especificada partiendo del left y del top.
•Backgroud-position [porcentaje |medida | left
| center | right] [porcentaje |medida | left |
center | right]
Origen del fondo
background-origin
• Especifica el área de origen de un fondo o imagen en determinada caja.

Su posibles valores son:
• padding-box: El fondo se extiende al borde exterior del padding, la

posición es relativa al padding de la caja (valor por defecto).
• content-box: El fondo se extiende dentro del (recortado al) contenido

de la caja, la posición es relativa al contenido de la caja.
• border-box: El fondo se extiende al borde exterior (por debajo del

borde en el orden z), la posición es relativa al borde de la caja.
Tamaño de la imagen de fondo
background-size
• Especifica el tamaño de las imágenes de fondo:
• cover: Especifica que la imagen de fondo deberia ser escalada lo más

grande posible mientras se aseguran ambas dimensiones al mismo
tiempo
• contain: Ajusta la imagen al alto y ancho de su contenedor .
• Unidad de medida: Se especifica ancho y alto en cualquier unidad

de medida.
Repetir imagen de fondo
background-repeat
• Especifica si la imagen es repetida y de que manera:

• repeat: La imagen es repetida horizontal y
verticalmente
• repeat-x: repetición únicamente en horizontal.
• repeat-y: repetición únicamente en vertical.
• no-repeat: No hay repetición: una sola copia es
expuesta.
Fijar imagen de fondo
background-attachment
• Determina si la imagen será fija dentro de la pantalla

o se desplazará junto al bloque contenedor:
• scroll: La imagen de fondo se moverá dentro de la
pantalla junto al bloque que la contiene.
• fixed: La imagen de fondo estará fija en la pantalla
y no se moverá con el bloque contenedor.
Shorthand background
background
•Define los valores de una o de todas las

propiedades siguientes: background-
attachment, color, image, position, repeat.
•background: [ <background-color> ||
<background-image> || <background-repeat>
|| <background-attachment> || <background-
position> ] | inherit ;
Revisión
Posicionamiento
básicos background
• Position
• overflow
Fundamentos CSS
parte 3
Subtema 2.7
Modelo de caja.
Contenido
[atributo] - De enlace y ::first-letter
Pseudoclases
Selectores de atributo
Pseudoelementos
[atributo=valor] acción de usuario ::first-line
[atributo ^=valor] - Misceláneo Generados
[atributo$=valor] - Estado de ::before
elemento de IU.
[atributo*=valor] ::after
- Estructurales
[atributo~=valor]
[atributo|=valor]
Contenido
Pseudoclases
Pseudoelementos
elemento de IU.
- Estructurales
[atributo~=valor]
[atributo|=valor]
Selector de atributo
[atributo]
Selecciona el elemento HTML basado en su atributo independientemente de su valor.
[rel]{ Selecciona todos aquellos elementos HTML

color: blue; que tengan definido algún valor para el
backgroud-color: yellow; atributo rel independientemente de su valor.
}
a[rel]{ Selecciona todos aquellos enlaces que

color: blue; tengan definido algún valor para el atributo
backgroud-color: yellow; rel independientemente de su valor.
}
Selección por valor exacto de atributo
[atributo=“valor”]
Selecciona el elemento HTML basado en su atributo pero el valor del atributo debe ser
exactamente el que tiene el elemento seleccionado.
[src=“demo.mp4”]{
Selecciona todos aquellos elementos HTML
color: blue;
donde el valor del atributo src sea
backgroud-color: yellow;
exactamente: demo.mp4.
}
img[src=“logo.png”]{
Selecciona todas aquellas imágenes donde el
color: blue;
valor del atributo src sea exactamente:
logo.png.
}
Selección por sub-cadena
(comienza con)
[atributo^=“valor”]
Selecciona los elementos HTML basado en su atributo en donde su valor comienza
exactamente con el valor indicado.
[name^=“pie”]{ Seleccionará todos aquellos elementos HTML

color: blue; donde el valor del atributo name inicie
backgroud-color: yellow; exactamente con el valor pie.
}
(termina con)
[atributo$=“valor”]
Selecciona los elementos HTML basado en su atributo en donde su valor termina
[name$=“pie”]{ Seleccionará todos aquellos elementos HTML

color: blue; donde el valor del atributo name termine
backgroud-color: yellow; exactamente con el valor pie.
}
(contiene)
[atributo*=“valor”]
Selecciona los elementos HTML basado en su atributo en donde su valor contiene por lo
menos una instancia del valor indicado.
[name*=“pie”]{ Seleccionará todos aquellos elementos HTML

color: blue; donde el valor del atributo name contenga al
backgroud-color: yellow; menos una vez el valor pie.
}
Selección por sub-cadena delimitada por espacios
[atributo~=“valor”]
Selecciona los elementos HTML basado en su atributo en donde el valor del atributo es
una lista de palabras separadas por espacios y una de ellas coincide con el valor
indicado.
[title~=“Título”]{ Seleccionará todos aquellos elementos HTML

color: blue; donde el valor del atributo title contenga el
backgroud-color: yellow; valor título y después del valor haya un
} espacio.
Selector de una lista de valores separados por un
guion
[atributo|=“valor”]
Selecciona los elementos HTML basado en su atributo en donde el valor del atributo es
una lista de palabras separadas por un guion y la de más a la izquierda coincide
Seleccionará todos aquellos elementos HTML

[title|=“Título”]{
donde el valor más a la izquierda del atributo
color: blue;
title contenga el valor título y después del
valor haya un guion.
}
Contenido
Pseudoclases
Pseudoelementos
elemento de IU.
- Estructurales
[atributo~=valor]
[atributo|=valor]
Sintaxis
•selector:pseudo-class{ propiedad:valor;
•}
1
•selector.clase:pseudo-class {
propiedad:valor;
2 •}
Clasificación
De enlaces y Estado de
Misceláneo Estructurales
acción de usuario elemento
• :link • :Negación • valid • first-child
• :visited • :Idioma • invalid • nth:child(n)
• :active • :Destino • enabled • nth-last-child
• :hover • disabled • nth-of-type
• :focus • checked • nth-last-of-child
• last-child
• first-of-child
• last-of-type
• only-child
only-of-type
Pseudoclases de enlace y acción de usuario
• last-child
• first-of-child
• last-of-type
• only-child
• only-of-type
Pseudoclases de enlaces
:link
• Selecciona y aplica los estilos a los enlaces que aún

no han sido visitados por el usuario y que tienen el
atributo href.
:visited
• Establece los estilos para los enlaces cuando estos ya

han sido visitados.
Pseudoclases de enlaces
a:link{
Establece el color rojo para los enlaces que no
color: red;
han visitados sin el subrayado característico.
text-decoration: none
}
a:visited{
Establece el color verde para los enlaces que ya
color: green;
han visitados sin el subrayado característico.
}
Pseudoclases de acción
:active
• Se aplica a cualquier elemento HTML cuando está activo (p.e. se está

presionando el botón del mouse sobre el elemento)
:hover
• Aplica los estilos cuando el usuario hace hover sobre el elemento, es decir,
sitúa el puntero del mouse sobre el elemento.
:focus
• Se aplican cuando el elemento recibe el foco del navegador. Es decir, el

usuario está empezando a interactuar con él.
Pseudoclases de acción
a:active{
Establece el color amarillo para los enlaces
color: yellow;
cuando el usuario esté haciendo clic sobre él.
}
p:hover{
color: green; Cuando el usuario pase sobre un párrafo tomará
background-color: gray los estilos indicados.
}
input:focus{
color: green; Cuando el usuario haga clic sobre un input, este
background-color: gray tomará los estilos indicados.
}
Pseudoclases miscelaneo
• last-child
• first-of-child
• last-of-type
• only-child
• only-of-type
Pseudoclase de negación
El selector de negación coincide con todos los elementos que no son el elemento
indicado
:not(selector){
… Sintaxis CSS
}
figure:not(#figura2){ Todos los elementos figure excepto el que

border: 5px solid navy; tiene el id figura2 tendrán un borde.
}
Pseudoclase de idioma
Selecciona el elemento con el idioma indicado
elemento:lang(idioma){
… Sintaxis CSS
}
<p>Entonces el traductor dijo (más o menos) que <q lang="es">Esta expresión no es

simple de traducir</q>.</p>
q:lang(es){ Establece un par de caracteres para enmarcar

quotes: “<<“ “>” las citas en el idioma español.
}
Pseudoclase de target
Selecciona el elemento con el target indicado.
elemento:target{
… Sintaxis CSS
}
:target{
Los target objetivos serán enmarcados con un
border: 5px solid red;
borde.
}
Pseudoclases de estado de elemento
• last-child
• first-of-child
• last-of-type
• only-child
• only-of-type
Pseudoclases de estado de elemento
Se les utiliza principalmente para aplicar estilos a los elementos de formulario,

especialmente cuando se utilizan las nuevas características de HTML5 para la
validación.
Pseudoclase Efecto
:valid Aplica estilos al elemento cuando éste es válido
:invalid Aplica estilos al elemento cuando éste es inválido
:enabled Aplica estilos al elemento cuando éste está habilitado
:disabled Aplica estilos al elemento cuando éste está inhabilitado.

:checked Aplica estilos al elemento si está checkeado.
Clasificación
• last-child
• first-of-child
• last-of-type
• only-child
• only-of-type
Contenido
Pseudoclases
Pseudoelementos
elemento de IU.
- Estructurales
[atributo~=valor]
[atributo|=valor]
Pseudo-elementos
::first-line
•Hace referencia a la primera línea de texto
::first-letter
•Permite especificar el aspecto de la

primera letra del texto
first-line y first-letter
p::first-line{ La primera línea de los párrafos aparecerá en
color: red; color rojo.
}
P::first-letter{
font-size: 2em; La primera letra de los párrafos se verá al doble
color: red; de grande y en color rojo.
}
Pseudo-elementos de inserción
::before
• Permite agregar contenido desde la hoja de estilo antes del elemento.
::after
• Permite agregar contenido desde la hoja de estilo después del

elemento.
::selection
• Selecciona el texto que ha seleccionado el usuario con su ratón o

teclado.
Pseudo-elementos de inserción
p::before{ Agregará a todos los párrafos antes de su
content: “párrafo - ”; aparición y desde la hoja de estilos la palabra
} párrafo.
p::after{ Agregará a todos los párrafos después de

content: url(“img/dot.png”); su aparición la imagen indicada.
}
p::selection{
color: blue; Establece estilos a la selección de texto hecha
background-color: gray; por el usuario.
}
Pseudo-elementos de CSS3
:nth-child(N)
•Selecciona el hijo N de un elemento.
:nth-child(N)
•Selecciona el hijo N de un elemento, con

conteo inverso.
:empty
•Selecciona el elemento indicado con la

condición de que no tenga hijos.
:last-child
•Selecciona el último hijo de un padre.

:nth-of-type(N)
• Selecciona el elemento N con la condición de

que sea de ese tipo.
:nth-last-of-type(N)
• Igual que el anterior pero iniciando el conteo en

orden inverso.
:not(p)
•Selecciona todos los

elementos que no sean
párrafos.
Pares e impares
li:nth-child(2n+1){
El color de texto de los párrafos impares será
color: black;
negro.
}
li:nth-child(2n){
El color de texto de los elementos pares será
color: green
verde.
}
Revisión
Pseudoclases
Pseudoelementos
elemento de IU.
- Estructurales
[atributo~=valor]
[atributo|=valor]
Fundamentos CSS
parte 4 Flexbox
Subtema 2.7
Modelo de caja.
Contenido
Propiedades de Propiedades de Propiedades de

Introducción
posicionamiento flujo flexibilidad
• Concepto • flex-direction • flex-wrap • flex-grow
• Vocabulario • justify-content • flex-flow • flex-shrink
• display • align-items • flex-basis
• align-self • flex
• align-content
• order
Contenido

Introducción
• align-content
• order
Concepto
Lo que caracteriza un diseño flexible es su habilidad para alterar el
ancho y alto de sus elementos para ajustarse lo mejor posible al
espacio disponible en cualquier dispositivo. Un contenedor flexible
expande sus elementos para rellenar el espacio libre, o los comprime
para evitar que rebasen el área prevista.
El algoritmo del modelo de diseño de "cajas flexibles" no parte de ninguna dirección

predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una
disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que
asume una disposición horizontal. El modelo flexible funciona bien cuando se trata de
aplicaciones en las que hay que tener en cuenta el cambio de orientación del
dispositivo o los cambios de tamaño realizados por los gestos del usuario.
Concepto
Vocabulario
flex-container
• Es el elemento contenedor para los flex-item.
Flex-item
• Es cada hijo de un contenedor flex. Si hay texto contenido dentro del

flex-item este se convierte en un flex-item anómino
Ejes
• El eje principal (main axis) es el eje a lo largo del cual los elementos
flexibles se siguen unos a otros. El eje secundario (cross axis) es el eje
perpendicular al eje principal.
Establecer el modo flex-box
display
Uno de los valores de esta propiedad permite establecer el modo flex.
#main{
display:flex; Establece el modo flexible para el elemento
backgroud-color: yellow; con id = main.
}
#main{
Establece el modo flexible para el elemento
display:inline-flex;
con id = main (valor alternativo de flex).
}
Contenido

Introducción
• align-content
• order
Establecer el eje principal
flex-direction
Permite establecer el eje row
principal de la flex-box. Los
posibles valores son:
row-
column
reverse
column-
reverse
flex-direction: row;
(con dir=“ltr”)
cross-start
main-start main-end
cross-end
flex-direction:row-reverse;
(con dir=“ltr”)
cross-start
main-end main-start
cross-end
flex-direction: column;
main-start
cross-start cross-end
main-end
flex-direction: column-reverse;
main-end
cross-start cross-end
main-start
Justificar contenido
justify-content center
define cómo los
elementos flexibles
se disponen a lo space-
largo del eje flex-end
around
principal en la línea
en curso. Sus
posibles valores
son:
space-
flex-start
between
justify-content: flex-start;
(con dir=“ltr” y flex-direction: row)
main-start main-end
justify-content: flex-end;
main-start main-end
justify-content: center;
main-start main-end
justify-content: space-between;
main-start main-end
justify-content: space-around;
main-start main-end
alinear contenido
align-items flex-start
define cómo los

elementos flexibles inherit flex-end
se disponen a lo
largo del eje
secundario de la
línea en curso. Sus
posibles valores
son: Stretch center
baseline
Alinear contenido
align-items: flex-start;
cross-start
main-start main-end
cross-end
Alinear contenido
align-items: flex-end;
cross-start
main-start main-end
cross-end
Alinear contenido
align-items: center;
cross-start
main-start main-end
cross-end
Alinear contenido
align-items: strech;
cross-start
main-start main-end
cross-end
Alinear contenido
align-items: baseline;
cross-start
main-start
H3 H3 H3 main-end
cross-end
Auto alineación
align-self flex-start
define cómo cada
Align-items es
elemento flexible
auto flex-end la alineación
se alinéa respecto
general que
al eje secundario, y
establece el
sustituye al valor
padre y align-
por defecto
self la
establecido
alineación
por align-items.
stretch center particular.
baseline
Alineación de varias líneas
align-content center
Alinea el contenido
cuando este tiene strech flex-end
varias líneas. Esta
propiedad no tiene
efecto en un flex
que tenga una sola
línea. Sus posibles
valores son: space-
flex-start
around
space-
between
alinear contenido múltiple
align-content: flex-start;
1 2 3
4 5
align-content: flex-end;
1 2 3
4 5
align-content: center;
1 2 3
4 5
align-content: space-between;
1 2 3
4 5
align-content: space-around;
1 2 3
4 5
Ordenar flex-items
order: valor;
• Por defecto los elementos flex, como todos los
elementos HTML aparecen en el mismo orden
que en el código.
• La propiedad order es una propiedad de los .item01{
items del contenedor flex y su valor es order: 3;
generalmente un entero, positivo o negativo. content: “Art01”
• Por defecto el valor de order es 0. }
• Todos los elementos flex con el mismo valor,

aparecen en el mismo orden que en el código.
Orden en los flex-items
1 2 2 2 3
-1 1 2 3
Contenido

Introducción
• align-content
• order
Ajuste multilínea automático
flex-wrap
wrap
Especifica si los
flex-items son
obligados a
permanecer en una
línea o pueden fluir
en varias líneas. Sus
posibles valores
son: wrap- Nowrap
reverse (por defecto)
Ajuste multilinea automatico
flex-wrap: wrap;
1 2 3
4 5
Ajuste multilinea automatico
flex-wrap: wrap-reverse;
5 4 3
2 1
Shorthand para dirección y multilínea
flex-flow: row wrap;
Flujo horizontal con multilínea si es necesario
1 2 3
4 5
Contenido

Introducción
• align-content
• order
Crecimiento de los items
flex-grow: valor;
• Establece cuanto puede crecer un elemento flex en relación al resto de los
elementos de la misma caja flex. Su valor es un número.
• El valor por defecto de flex-grow es 0. Lo que quiere decir que el elemento no

puede crecer.
• Si todos los elementos tienen el mismo valor de grow, por ejemplo; flex-grow: 1;
quiere decir que todos los elementos crecerán en igual proporción, hasta ocupar
todo el espacio disponible.
Crecimiento en los flex-items
Espacio a repartir con grow
1 2 3 4
2 4
1 3
(flex-grow: 1;) (flex-grow: 2;)
Reducción de los items
flex-shrink: valor;
• Establece cuanto puede disminuir un elemento flex en relación al resto de los
elementos de la misma caja flex. Su valor es un número.
• El valor por defecto de flex-grow es 1. Lo que quiere decir que los elementos de un
flex-container disminuirán en igual proporción por tal de acomodarse dentro de la
caja.
.item01{ .item02{
flex-shrink: 1; flex-shrink: 2;
} }
Reducción en los flex-items
1 2 3 4
1 2 3 4
flex-shrink:
flex-shrink: 1; flex-shrink: 1; 2;
flex-shrink:1;
Tamaño inicial de los items
flex-basis: valor;
• Especifica el valor inicial del tamaño principal de un elementos flex, antes de que
esté redimensionado con flex-grow ó con flex-shrink.
• El valor por defecto de flex-basis es auto. En este caso, la anchura base del item es
igual a la anchura declarada (width) del elemento, o en su defecto , la anchura
calculada por el navegador en base a su contenido.
.item01{ .item02{
flex-basis: 10em; flex-basis: 15em;
} }
Reducción en los flex-items
1 2 3 4
1 2 3
4
Width:10 Width: Width:
(flex-basis:60%)
% 10% 10%
Shorhand para flexibilidad
flex: flex-grow [flex-shrink] [flex-basis];
• Nos permite abreviar las tres propiedades: flex-grow, flex-shrink y flex-basis.
• El valor por defecto es 0 1 auto.
div{
.item{ flex-grow: 0;
flex: 0 1 auto; flex-shrink: 1;
} flex-basis: auto;
}
Se traduce en que el item no puede crecer y que se disminuirá en igual proporción a los demás y el
ancho queda determinado por la propiedad width
Revisión

Introducción
• align-content
• order
Fuentes de información
1.Wiederhold. Diseño de Base de Datos.McGrawHill Segunda edición SBN: 9789684516519
2.David M. Kroenke (2005). Procesamiento de Bases de Datos Fundamentos, Diseño e Instrumentación, Octava
edición. Prentice Hall SBN: 978-9702603252
3.Tommi Mikkonen. "Diseño y Desarrollo Móvil: Conceptos y técnicas prácticas para la creación de sitios
móviles y aplicaciones Web". O'Reilly.
4.Kevin Languedoc, Build iOS Database Apps with Swift and SQLite, Editorial Apress, ISBN 9781484222324.
5.Jesse Feiler, Introducing SQLite for Mobile Developers, Editorial: Apress, ISBN 9781484217665
6.Sunny Kumar Aditya, Vikash Kumar Karn, 2014, Android SQLite Essentials, Editorial: Packt Publishing, ISBN
9781783282968
7.Mason, S. & Korolev, E. "Nativos y Java ME Desarrollo sobre Symbian OS" 2008.
8.William Lehr, LW McKnight. (2003). Acceso aI Internet Wireless: 3G vs WiFi". Política de Telecomunicaciones.
2018, de Telecommunications Policy Sitio web: http://people.csail.mit.edu/wlehr/Lehr-
Papers_files/Lehr%20Wifi%203G.pdf 286

Tema 2 HTML, XML y CSS Completo

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tema 2 HTML, XML y CSS Completo

Încărcat de

Drepturi de autor:

Formate disponibile

Programación web

Introducción HMTL Head

La W3C impone que, todo HTML5 CSS3 HMTL5, CSS3 y Javascript

• Intercambio de • Proceso lógico

<!DOCTYPE html> Tipo de documento

Es insensible a mayúsculas y minúsculas.

• Indica el principio y el fin de nuestra página web. Es también la raíz de la

• Permite indicar el lenguaje que se utilizará en la

• Señala el nombre de un archivo manifiesto donde

• Sus dos posibles valores (ambos mutuamente excluyentes) son:

• Los valores de este atributo son insensibles a mayúsculas y minúsculas.

Carga al servidor reducida

NETWORK: Esta línea da inicio a la lista de

FALLBACK: Esta línea da inicio a la lista de

• Son todos aquellos recursos que aparecen listados en el archivo de manifiesto.

• Son los recursos listados en un apartado NETWORK de nuestro archivo de manifiesto.

<script> • Se utiliza para insertar scripts (comúnmente de javascript) en el

<style> • Se utiliza para definir estilos dentro del documento.

<link> • Establece un enlace hacia un recurso externo. Por ejemplo, un

<base> • Nos permite establecer direcciones URL base para la localización de

<meta> • Nos permite definir propiedades de un documento (autor,

content • Define el valor de un metadato nombrado. Suele

charset • Define el conjunto de caracteres que debe

http-equiv • Usado para fijar directivas de programa.

author Autor de la página

description Descripción del contenido de la página

• Es una forma alternativa de especificar el juego

• Define la hoja de estilo por defecto. Esta hoja

• Es una alternativa al atributo lang de la etiqueta

1. Establece la dirección de texto de izquierda a derecha.

Valida también la página en el validador de la W3C

Onkeydown Cuando se pulsa una tecla

Onmousemove Cuando el mouse se mueve

Onmouseout Cuando el mouse se aparta de un elemento

Onmouseup Cuando se suelta el botón del mouse estándo sobre un elemento

Barra de navegación (menú)

Área principal Barra lateral

Pie de página (información institucional)

<nav></nav> (Barra de navegación - menú)

<footer></footer> (Pie de página)

• Se pueden incluir títulos, subtítulos, logos, etc.

• El elemento <nav> fue creado para definir el apartado de

• Tradicionalmente la navegación se realiza mediante

• Especifican bloques de información de tipo general pero de tipo

• Una <section> es tan general como un bloque <div> pero con

• Si es necesario pueden llegar a tener un título, un encabezado y

• El elemento <aside> podría estar ubicado del lado derecho o izquierdo

• Un aside podría estar incluso dentro de un bloque section si

• Comúnmente se le utiliza para indicar información de

• Generalmente, el elemento <footer> representará el final

<article> … </article> <article> … </article>

<footer></footer> (Pie de página)

1. Un header que contiene el encabezado en H1: Programación WEB y un H2:

Valida también la página en el validador de la W3C y corrige si es necesario

<body> Representa el contenido principal de una página web.

<section> Define una sección de un documento.

<nav> Define la sección que contiene los enlaces de navegación.

<h1…h6> Representan los seis niveles de cabecera.

<header> Define la cabecera de una página o sección.

<footer> Especifica el pie de página de una página o sección.

<pre> Utilizado para conservar el formato establecido previamente.

<ol> Define una lista ordenada de artículos

<dt> Representa un término que será definido por el siguiente <dd>.

<figcaption> Es la leyenda de una figura previa.