Está en la página 1de 52

UT2 – Lenguajes

para visualización de
la información
HTML5 y CSS3 – INTRODUCCIÓN (1 de 2)

Jorge Castellanos Vega


1. ADVERTENCIA
• Las siguientes transparencias exponen las etiquetas del
lenguaje HTML en su versión 5
• Las transparencias carecen en su mayoría de ejemplos
• Se pretende que las pruebes mientras las estudias
• Puedes probarlas mediante un editor de texto y un navegador
• Notepad++
• Geany

“me lo contaron y lo
olvidé, lo vi y lo
entendí, lo hice y lo
aprendí.”
Confucio
2. PRINCIPIOS DE HTML5
• Principio de separación de contenido y apariencia
• Contenido  html
• Apariencia  css
• Simplificación del código
• Evitar plugins
• Integración de etiquetas para audio y vídeo
3. NOVEDADES EN HTML5
• Doctype simplificado
• Supresión de etiquetas y atributos de presentación
• Nuevas etiquetas
• Semánticas y organizativas
• Audio y vídeo
• Diseño 2D Y 3D (etiqueta canvas)
• Nuevos formularios
• Calendario
• Cursores
• Validación nativa de datos
4. REGLAS
• Las etiquetas se escriben en minúscula
• En todo caso no son sensibles a mayúsculas
• Toda etiqueta abierta debe cerrarse
• <etiqueta>…….</etiqueta>
• Los valores de los atributos deben ir entre comillas
• <etiqueta atributo=“valor”>…..</etiqueta>
• Las etiquetas deben anidarse correctamente
• <e1><e2><e3>…..</e3></e2></e1>  bien
• <e1><e2><e3>…..</e2></e3></e1>  mal
5. FORMATO DE DOCUMENTO
• Todo documento html5 debe comenzar por un doctype y una
etiqueta <html>
<!DOCTYPE html>
<html>
…..
</html>
• La etiqueta html puede incluir el atributo lang que especifica
el lenguaje de documento
• <html lang=“en”>
5. FORMATO DE DOCUMENTO
• El encabezado del documento
• Se define en la etiqueta <head>….</head>
• Dentro de la etiqueta <head> podemos encontrar:
• Título de la página <title>
• Obligatoria!!
• Meta etiquetas orientadas a definir codificación, palabras clave, etc…
• <meta name=“author” content=“Jorge”>
• Llamadas a hojas de estilo CSS
• <style>…</style>
• Funciones o vínculos a archivos de script
• <script>….</script>
5. FORMATO DEL
DOCUMENTO
• Meta etiquetas

<head>
<meta charset="UTF-8">
<meta name="description" content=“Tutorial de HTML">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content=“Jorge">
</head>
5. FORMATO DEL
DOCUMENTO
• Juego de caracteres
• Aspecto muy importante, puede provocar errores de legibilidad
de documento
• Determina como son interpretados los bytes del archivo para
generar su representación en texto
• Los navegadores incluyen una función de detección del juego de
caracteres
• No es recomendable dejarlo sin determinar
• Se establece con la etiqueta <meta>
• <meta charset=“codigo”>
• Por ejemplo
• <meta charset=“UTF-8”>
Wikipedia: Charset Encoding
5. FORMATO DE DOCUMENTO
<!– UN DOCUMENTO BÁSICO -->
<!DOCTYPE html>
<html>
<head>
<title>
Mi primera página web
</title>
</head>
</html>
5. FORMATO DE DOCUMENTO
• El cuerpo del documento
• Se define entre las etiquetas <body>….</body>
• En html5 ya no se usan los atributos de formato en esa etiqueta
5. FORMATO DE DOCUMENTO
<!– UN DOCUMENTO BÁSICO -->
<!DOCTYPE html>
<html>
<head>
<title>
Mi primera página web
</title>
</head>
<body>
¡Hola mundo!
</body>
</html>
6. ETIQUETAS BÁSICAS
• Salto de línea
• En html los retornos de carro no se interpretan como tal y se
sustituyen por un espacio

<!DOCTYPE html>
<html>
<head>
<title> Mi primera página web </title>
</head>
<body>
Ahora hay un salto
de línea
</body>
</html>
6. ETIQUETAS BÁSICAS
• ¿Qué ha pasado???
• El salto de línea no funciona
• Las tildes no se muestran correctamente
6. ETIQUETAS BÁSICAS
• Solución:
• Etiqueta de juego de caracteres, por ejemplo:
• <meta charset="UTF-8">
• <meta charset=“iso-8859-1”>
• Etiqueta de salto de línea <br>
• Se puede poner sin cierre
• O con cierre <br />
6. ETIQUETAS BÁSICAS
• También podemos generar un salto de línea mediante la
etiqueta párrafo
• Al finalizar el párrafo se genera un salto de línea
• <p> …. </p>
• Formatos básicos de texto
• Negrita <b>….</b>
• Cursiva <i>….</i>
• Texto tachado <del>….</del>
• Subíndice <sub> …. </sub>
• Superíndice <sup> …. </sup>
• Span <span> …. </span>
• No aplica formato pero identifica un texto para poder aplicar estilo
mediante las hojas de estilo que veremos más adelante
6. ETIQUETAS BÁSICAS
• Otros formatos de texto
• Preformateado
• Etiqueta <pre> …. </pre>
• Tipo de letra de ancho fijo
• Respeta saltos de línea y espacios
• Cita
• Dos tipos
• <blockquote> …. </blockquote>
• Al igual que el párrafo tiene salto de línea antes y después del texto
• Se muestra desplazada hacia el margen derecho
• <q> … </q>
• No cumple con las características de blockquote pero muestra el texto entre
comillas (“)
6. ETIQUETAS BÁSICAS
• Comentarios
• Para ayudar a entender el código es recomendable introducir
comentarios
• Pueden situarse en cualquier parte del documento
• Aconsejable ser ordenado
• Se indican de la siguiente forma:
<!-- texto del comentario -->
6. ETIQUETAS BÁSICAS
• Títulos
• Al igual que en los procesadores de texto hay títulos predefinidos
• Seis tamaños diferentes
• Organizados desde la etiqueta <h1> (para el más grande) a la h6
(para el más pequeño)
• Por defecto escriben el texto en negrita
<h1>….</h1>
<h2>….</h2>
<h3>….</h3>
<h4>….</h4>
<h5>….</h5>
<h6>….</h6>
6. ETIQUETAS BÁSICAS
• Línea horizontal
• Muestra una línea horizontal en el texto que puede actuar para
separa secciones
• Etiqueta <hr>
• No es necesario cierre
• Se puede usar el de XHTML 1.0 <hr />
6. ETIQUETAS BÁSICAS
• Listas
• Ordenadas
• Cada elemento de la lista lleva un identificador ordenado
• Se definen con la etiqueta <ol> …. </ol>
• El atributo start permite empezar las listas en valores distintos al 1
• No ordenadas
• Cada elemento va identificado por una viñeta
• Se definen con la etiqueta <ul> …. </ul>
• En ambos casos cada elemento de la lista se define mediante la
etiqueta <li> …. </li>
• Las listas permiten anidarse
6. ETIQUETAS BÁSICAS
• Listas
• De definición
• Formada por un texto y su descripción
• Se define mediante la etiqueta <dl> …. </dl>
• Cada elemento identificado por dos etiquetas
• Término a definir <dt> …. </dt>
• Definición <dd> …. </dd>
6. ETIQUETAS BÁSICAS
• Listas
<ol>
<li> primer elemento </li>
<li> segundo elemento</li>
<li> tercer elemento </li>
</ol> ¿Cómo se
ven en el
<ul> navegador?
<li> primer elemento </li>
<li> segundo elemento</li>
<li> tercer elemento </li>
</ul>
6. ETIQUETAS BÁSICAS
• Enlaces
• Permiten enlazar a otro recurso de Internet
• Página web o sección de página
• Dirección de correo
• Archivo
• Etiqueta ancla
• <a href=“destino”>Texto enlace </a>
• Atributos
• Ping – Puede contener URLs que serán notificadas cuando el usuario
visite el enlace
• Target – Lugar donde debe abrirse la página web
• Target=“_blank” – nueva ventana
• Target=“_self” – En la misma ventana
• Type – Tipo MIME del archivo de destino si no se trata de un
documento html5
6. ETIQUETAS BÁSICAS
• Enlaces a una página web
• <a href=“http://www.otrapagina.com”> Enlace a otra página </a>
• Enlaces a la misma carpeta
• <a href=”pagina.htm”>Enlace a página </a>
• Enlaces a una subcarpeta
• <a href=“subcarpeta/pagina.htm”>Enlace a página en subcarpeta
</a>
• Enlaces a una carpeta de nivel superior
• <a href=“../pagina.htm”>Enlace a página en carpeta de nivel
superior </a>
6. ETIQUETAS BÁSICAS
• Enlaces a secciones de la página
• Si tenemos una página con mucho contenido podemos establecer
secciones y acceder directamente a ellas mediante la etiqueta <a>
con atributo id. Por ejemplo:
• <a id=“seccion1”></a>
• Para acceder directamente a la página en la zona donde está el
enlace de la sección 1 lo indicamos del siguiente modo:
• <a href=“#seccion1”>Enlace a sección 1 de esta página </a>
• <a href=“pagina.htm#seccion1”>Enlace a sección 1 de
pagina.htm</a>
• Enlaces a correo electrónico
• <a href=“mailto:Jorge@educa.madrid.org”>Enlace </a>
ETIQUETAS BÁSICAS
• Imágenes
• <img src=“Ruta a la imagen” alt=“texto alternativo”>
• Atributos posibles.
• height – Define la altura de la imagen
• width – Define el ancho de la imagen
• Permiten al navegador ir construyendo la página aunque no se haya
acabado de cargar la imagen
• <img src=“img.jpg” height=“300” width=“200”>
• Se pueden definir en píxeles o porcentaje
• alt – Texto alternativo. Pensado para personas invidentes.
6. ETIQUETAS BÁSICAS
• Imágenes como mapa
• Permite que una imagen tenga diferentes zonas con enlaces a
distintos recursos.
<img src=“archivoImagen.jpg” usemap=“#identificadorMapa”>
• Cada zona se conoce con el nombre de área y se define en una
estructura como la siguiente:
<map name=“identificadorMapa”>
<area shape=“forma” coords=“coordenadas” href=“destino 1” alt=“texto”>
<area shape=“forma” coords=“coordenadas” href=“destino 2” alt=“texto”>
…..
</map>
6. ETIQUETAS BÁSICAS
• Etiqueta area
• El atributo shape determina la forma del área
• Rectángulo – rect
• Círculo – circle
• Polígono – polygon
• Por defecto – default
• Gestiona clics fuera de zonas activas
• El atributo coords indica las coordenadas de inicio y final de la
forma.
• Depende del tipo de área
• Para encontrarlas es recomendable abrir la imagen con algún editor,
como por ejemplo gimp
6. ETIQUETAS BÁSICAS
• Etiqueta area
x1, y1 X1, y1 X2, y2
r
x, y X5, y5
X3, y3

x2, y2 X4, y4

<area shape=“rect” coords=“x1,y1,x2,y2” href=“pagina1.htm”>


<area shape=“circle” coords=“x,y,r” href=“pagina2.htm”>
<area shape=“polygon” coords=“x1,y1,x2,y2, x3,y3,x4,y4, x5,y5”
href=“pagina3.htm”>
7. CARACTERES ESPECIALES
• Hay determinados caracteres que pueden presentar
ambigüedades al ser interpretados por el navegador. Para ello
se utiliza un código que lo sustituye.

Carácter Código
< &lt;
> &gt;
& &quot;
“ &amp;
8. VALIDACIÓN DE HTML5
• Es posible validar si nuestro código HTML cumple con la
especificación de HTML5
• Existen diferentes páginas en Internet que nos facilitan este
servicio
• W3C - https://validator.w3.org/
• Validator.nu - https://html5.validator.nu/
9. HOJAS DE ESTILO
• Permiten añadir información de formato a nuestros
documentos html
• La declaración de un estilo se indica mediante el par:
• Propiedad: valor;
• Por ejemplo:
• padding: 3px;
• Propiedad: Elemento de formato sobre el que queremos
aplicar el valor
• Valor: Puede ser un porcentaje, palabra reservada o número
de píxeles.
9. HOJAS DE ESTILO
• Las hojas de estilo no son case-sensitive
• Sin embargo puede que haya URLs que si lo sean
• Como norma general los nombres de propiedades y valores se
escribirán en minúscula
10. SELECTORES
• Permiten identificar a qué elementos de nuestro código html
vamos a aplicar el estilo definido
• Selector universal (*)
• Sirve para seleccionar todos los elementos de la página.
* {margin:10px; padding: 5px};
• Selectores de etiqueta
• En este caso se aplican solo a la etiqueta
p { text-align: center}
• Si queremos ajustar los mismos estilos a dos etiquetas diferentes
podemos ponerlos separados por comas
P, h1, h2 { text-align: center}
• También podríamos haber definido las etiquetas por separado
10. SELECTORES
• Selectores de clase
• En ocasiones no vamos a querer aplicar el mismo formato en
todas las etiquetas del mismo tipo
• Para ello podemos asignar a las etiquetas a una clase
determinada de la forma
• <p class=“parrafoCentrado”> ….. </p>
• El selector se especificaría:
.parrafoCentrado { text-align: center; }
• Y se aplicaría a todas las etiquetas que perteneciesen a la clase
“parrafoCentrado” sean del tipo que sean
• Si queremos limitarlo a un solo tipo de etiquetas se debe especificar:
p.parrafoCentrado {text-align: center; }
10. SELECTORES
• Selectores descendentes
• Permite seleccionar elementos que se encuentran dentro de
otros elementos, por ejemplo:
p h1 {color: red; }:
• Se aplicará a todas las etiquetas h1 que estén dentro de bloques p
• No tiene porqué ser descendiente directo
• El nivel de anidación puede tener varios niveles:
p a b i {text-decoration: underline; }
• Se aplica a los elementos en cursiva, dentro de etiquetas de negrita,
anidados dentro de enlaces que se encuentren en párrafos.
• ¡CUIDADO!!
• No confundir el selector descendente con la aplicación del mismo
selector a distintas etiquetas
• p a b i {color: blue; } vs p,a,b,i {color: blue;}
10. SELECTORES
• Selectores descendentes
• Podemos combinar el selector universal con selectores
descendentes, por ejemplo:
p * b {color: #0000FF;}
• Se aplica a todas las etiquetas de tipo <b> que estén anidadas en
cualquier otra etiqueta que a su vez esté dentro de una etiqueta de
tipo p
• Sin embargo no se aplicará a las etiquetas de tipo <b> que estén
dentro de una etiqueta de tipo <p> directamente
10. SELECTORES
• Selectores de ID
• Permite seleccionar un elemento de la página por medio de su
atributo id
• El valor del atributo id no puede repetirse en dos elementos
diferentes de la misma página
• Por ejemplo:
<p id=“unico”>….</p>
• Se referencia mediante una de las siguientes posibilidades:
#unico { color: blue;}
p#unico {color: blue;}
• Este último caso solo tiene sentido si el archivo css se aplica a
varias páginas
10. SELECTORES
• Selectores de hijos
• Sirve para seleccionar un elemento que es hijo directamente de
otro
• b > i {color: blue;}
• Se aplicará a todas las etiquetas <i> anidadas directamente
dentro de etiquetas <b>
• Selector adyacente
• Selecciona elementos que se encuentran a continuación de otro
• b + i {color: blue;}
• Se aplicará a todas las etiquetas <i> anidadas directamente a
continuación de etiquetas <b>
11. AÑADIENDO ESTILOS
• Declaración en línea
• Dentro de la propia etiqueta mediante el atributo style
• Deben evitarse para preservar el principio de separación de
contenidos y formato
• <p style=“color: red;”> …. </p>
• Declaración Interna
• En el encabezado del documento
• Dentro de las etiquetas <style type=“text/css”> …. </style>
11. AÑADIENDO ESTILOS
• Declaración en archivo externo
• En el encabezado mediante la etiqueta link
• <link rel=“stylesheet” type=“text/css” href=“rutaArchivo.css”>
• El archivo de estilos tendrá extensión CSS
• El código del archivo de estilos no tendrá etiqueta de declaración
de estilo, p.e:
• h1 {background-color: #blue}
• Otra forma de usar hojas de estilo externas es mediante la
etiqueta @import
• Es una directiva CSS no html

<style type=“text/css”>
@import url(“formato1.css”);
</style>
12. CASCADA Y HERENCIA
• Cascada, precedencia de estilos
• Ante distintas declaraciones contradictorias a aplicar sobre la
misma etiqueta el navegador aplicará la siguiente precedencia
1. Declaración en línea
2. Declaración interna
3. Declaración externa
4. Propiedades por defecto del navegador
• Herencia
• Si tenemos varios elementos anidados…
• Los elementos más internos heredan los estilos de los externos en
los que están anidados
• Siempre y cuando ellos no los tengan definidos
13. COMENTARIOS
• Podemos establecer comentarios en nuestro código CSS
mediante la siguiente sintaxis.
• Apertura  /* texto del comentario */  Cierre
• Pueden ocupar diferentes líneas
/* esto
es un
comentario */
14. UNIDADES DE MEDIDA
• Pueden ser absolutas o relativas
• Absolutas. Cualquier longitud expresada en una de estas
unidades siempre se mostrará del mismo tamaño
• Relativas. Dependen de la longitud de otra propiedad.
• Se debe especificar la unidad usada
• Siempre con dos caracteres
Unidades absolutas
• Sin dejar espacio
• P.e: 13px cm Centímetros
mm Milímetros
In Pulgadas
Px Píxeles
Pt Puntos
pc Picas
14. UNIDADES DE MEDIDA
UNIDADES RELATIVAS
em Relativa al tamaño del tipo de letra por
defecto
ex Relativa al valor de x-height de la
fuente actual
ch Relativa al ancho del cero “0”
rem Relativa al tamaño de letra del
elemento raíz
vw Relativa al 1ª del ancho del tamaño de
la ventana del navegador
vh Relativa al 1ª del alto del tamaño de la
ventana del navegador
15. FORMATOS DE TEXTO
Formato Propiedad Valores
Tipo de letra font-family font-family: font|initial|inherit;
Negrita font-weight Normal | bold | bolder | lighter |
number (100-900) | initial | inherit
Estilo font-style normal|italic|oblique|initial|inherit
Tamaño de letra font-size medium|xx-small|x-small|small|large|x-
large|xx-large| smaller | larger|length
(px, cm,…)|% | initial| inherit
Color del texto color Valores de color para CSS
Alineación text-align left|right|center|justify|initial|inherit
Alineación vertical- baseline|length|sub|super|top|text-
vertical align top|middle|bottom|text-
bottom|initial|inherit;
Initial – Establece la propiedad a su valor por defecto
Inherit – Hereda la propiedad del elemento padre
15. FORMATOS DE TEXTO
Formato Propiedad Valores
Espacio entre Letter- normal|length|initial|inherit
letras spacing
Espacio entre word- normal|length|initial|inherit
palabras spacing
Interlineado line-height normal|number|length|initial|inherit
Decoración text- none|underline|overline|line-through
decoration |initial|inherit
Transformación Text- none|capitalize|uppercase|lowercase|in
transform itial|inherit
Dirección texto direction ltr|rtl|initial|inherit
Indentación text-indent length|initial|inherit

Initial – Establece la propiedad a su valor por defecto


Inherit – Hereda la propiedad del elemento padre
16. FORMATOS PARA FONDOS
Formato Propiedad Valores
Color de fondo background-color color|transparent|initial|inherit;
Imagen de fondo background-image url(imagen.jpg)
none
Repetición de la background-repeat repeat|repeat-x|repeat-y|no-
imagen repeat|initial|inherit;
Posición de la background- X pos y pos (en unidades CSS)
imagen position Dos valores entre los siguientes: left
top | left center | left bottom |
right top | right center | right bottom
center top | center center | center
bottom
Initial | inherit
Fijación del background- Scroll |fixed;
fondo attachment
17. FORMATOS PARA LISTAS
Formato Propiedad Valores
Estilo del marcador de list-style-type Valor (ver enlace)
lista
Marcador gráfico list-style- url(imagen.gif) | none
image * Las imágenes pueden ser gif, jpg y
png
Posición list-style- Inside | outside
position
18. COLORES
• Cuando queremos asignar un color a una propiedad de una
hoja de estilo tenemos varias posibilidades:
• Palabras clave mediante códigos de color en inglés.
• Notación hexadecimal #rrggbb siendo
• rr – cantidad de color rojo desde 00 a ff
• gg – cantidad de color verde desde 00 a ff
• bb . Cantidad de color azul desde 00 a ff
• Por ejemplo: #00ef3d
18. COLORES
• Notación decimal. Parecida a la hexadecimal, se usa la sintaxis
rgb (rojo, verde, azul) siendo cada color representado por un
número cuyo valor oscilará entre 0 y 255.
• Por ejemplo: rgb (111, 23, 150)
• Notación en porcentaje. Similar a la anterior pero
especificando la cantidad de cada color en porcentaje
• Por ejemplo rgb (37%, 50%, 25%)
• Notación RGBa. Incorporando un cuarto valor a la notación
RGB (alpha) que representa el nivel de opacidad y que se
mueve entre 0 (totalmente transparente) y 1 (totalmente
opaco).
• Otras notaciones. Notación HLS (Hue, Saturation, Luminance),
HLSa (que añade opacidad a la anterior….)