Taller Breve de HTML5-CSS

Dra. B.
Cristina Pelayo Garca-Bustelo

Departamento de Informtica
Universidad de Oviedo
crispelayo@uniovi.es
Taller de HTML y CSS
Realidad y Accesibilidad Aumentadas

Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

Dra. B. Cristina Pelayo Garca-Bustelo
2
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

3
Sintaxis bsica
Documento bsico en HTML5
<!DOCTYPE html>
<html>
<head>
<title>Pgina de ejemplo</title>
</head>
<body>
<h1>Pgina de ejemplo</h1>
<p>Esta es un <a href="demo.html">ejemplo</a>
simple.</p>
<!- esto es un comentario -->
</body>
</html>

4
Sintaxis bsica
Elementos completos: <etiqueta> . </etiqueta>
<p> esto es un prrafo</p>

Elementos simples sin etiqueta de cierre: <etiqueta>
<img src=imagen.jpg>

Comentarios

5
Sintaxis bsica
Se pueden utilizar en el nombre de los elementos
indistintamente Maysculas y minsculas

<P>he aqu un <EM>prrafo</EM> enfatizado</P>
<p>he aqu un <em>prrafo</em> enfatizado</p>

RECOMENDACIN: utilizar minsculas

6
Sintaxis bsica
Anidamiento de elementos
Correcto:
<p>he aqu un <em>prrafo</em> enfatizado</p>

INCORRECTO: elementos solapados

<p>he aqu un <em>prrafo</p> enfatizado</em>

7
Sintaxis bsica
Atributos

El valor de los atributos entre comillas dobles(), simples () o
sin ellas.
<a href="demo.html">demo</a>
<a href=demo.html>demo</a>
<a href=demo.html> demo </a>

RECOMENDACIN: utilizar comillas dobles, es obligatorio
cuando hay espacios en blanco.

Atributo
Nombre = valor
8
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

9
Etiquetas bsicas
Etiquetas de texto
Etiquetas de imgenes
Etiquetas de enlace
Etiquetas de estructura

10
Etiquetas bsicas de texto
<p> </p>: representa un prrafo de texto
<pre> </pre>: representa un prrafo preformateado,
mantiene los saltos de lnea, los espacios en blanco, los
tabuladores.

11
html Resultado
<p> Lorem ipsum ad his scripta
blandit partiendo, eum fastidii
accumsan euripidis in, eum liber
hendrerit an.

Qui ut wisi vocibus suscipiantur,
quo dicit ridens inciderint id.
</p>

<pre>Lorem ipsum ad his scripta
hendrerit an.

</pre>

Lorem ipsum ad his scripta
hendrerit an. Qui ut wisi vocibus
suscipiantur, quo dicit ridens
inciderint id.

Lorem ipsum ad his scripta
hendrerit an.


12
Existen tres tipos de listas: ordenadas, sin ordenar
(o de vietas) y de definicin
Lista ordenadas: etiqueta <ol> (ordered list) designa a
toda la lista y cada elemento se indica mediante <li>
Listas no ordenadas (vietas): etiqueta <ul> (unordered
list) designa a toda la lista y cada elemento se indica
mediante <li>
13
html Resultado
<ul>
<li> Etiquetas Texto</li>
<li> Etiquetas Enlace</li>
<li> Etiquetas Imagen</li>
<ul>

<ol>
<li> Etiquetas Texto</li>
<li> Etiquetas Enlace</li>
<li> Etiquetas Imagen</li>
<ol>
Etiquetas Texto
Etiquetas Enlace
Etiquetas Imagen

1. Etiquetas Texto
2. Etiquetas Enlace
3. Etiquetas Imagen

14
Etiquetas bsicas
Etiquetas de texto
Etiquetas de enlace

15
Etiquetas bsicas de imgenes
Etiqueta img con atributos:
src (obligatorio): define la imagen que se desea mostrar
teniendo en cuenta la ruta.
alt (obligatorio): descripcin alternativa a la imagen que
veremos cuando se pase el ratn sobre la misma y cuando
no ha sido posible cargar dicha imagen. Tambin se utiliza
por navegadores de texto.

16
html Resultado

<img alt=La casa de Tata"
src=tatahouse.jpeg" >

Si no esta el archivo se muestra

La casa de Tata
17
Etiquetas bsicas
Etiquetas de texto
Etiquetas de enlace

18
Etiqueta bsica de enlace
Etiqueta a: representa a los enlaces
Atributo href: contiene la URL a donde queremos enlazar
Atributo title: descripcin del sitio web al que enlazamos.

19
html Resultado
<p> Esta es la

<a href=demo.html
title=enlace a la
demostracin>
demostracin
</a>

de la frmula</p>

Esta es la demostracin de la
frmula

20
Etiquetas bsicas
Etiquetas de texto
Etiquetas de enlace

21
Documento web
<! Doctype html>
<html> Elemento raz
Etiquetas bsicas de estructura
<head> cabecera
Metadatos del documento
<title>, <base>, <link>, <meta>, <style>
Scripts
<body> cuerpo
22

<head> cabecera
Metadatos del documento
<title>, <base>, <link>, <meta>, <style>
Scripts
23
<title> Titulo o nombre de la pgina OBLIGATORIA

<title> Ejemplo de ttulo de una pagina </title>

<link> permite enlazar documentos a otros recursos,
generalmente hojas de estilo y scripts. El destino se
define con el atributo href
<link rel="stylesheet" href="default.css">

24
<meta> Los elementos META se utilizan para especificar
informacin sobre el propio documento:
Atributo name
Atributo http-equiv
Atributo content
Atributo charset

<meta name="keywords" content="HTML, CSS">
<meta http-equiv=content-type content=text/html;
charset=utf-8>

<meta charset =utf-8> OBLIGATORIA
25
<style> permite definir caractersticas de estilo dentro del
propio documento.

<style>
body { color: black;
background: white; }
em {color: red; }
</style>

26
<script> permite incluir contenido dinmico y bloques de
datos en los documentos.
<script>
function calculate(form) {
var price = 52000;
if (form.elements.brakes.checked)
price += 1000;
form.elements.result.value = price;
}
</script>

27

<body> cuerpo
article
Footer
header
aside
section
nav
Elemento h1, h2, h3, h4, h5 y h6
Address
header
28

El elemento section representa una seccin genrica de
un documento. Es una agrupacin temtica de contenido,
generalmente con encabezados.
<section>
<h1>Bora bora</h1>
<p>Isla principal caracterizada por su mar
turquesa y sus hoteles sobre el mar.</p>
</section>

section
29

El elemento nav representa una seccin del documento que
contiene enlaces a otras pginas o partes, es la seccin de
navegacin.
<nav>
<h1>Men</h1>
<ul>
<li><a href=articulos.html">Articulos</a></li>
<li><a href=actualidad.html">Actualidad</a></li>
<li><a href=sucesos.html">Sucesos</a></li>
</ul>
</nav>
30

El elemento article una composicin autocontenida
dentro del documento, que puede ser
independientemente distribuida o reutilizada.
<article>
<h1>Bora bora</h1>
<p>Isla principal caracterizada por su
mar turquesa y sus hoteles sobre el
mar.</p>
</article>
article
31

El elemento aside representa una seccin de una
pgina que consiste en contenido que es
tangencial a su alrededor. Debe ser considerado
separado del contenido general. Son las sidebars
<aside>
<! contenedor de twitter feed -->
<h1>Twitter Feed</h1>
<p> Estoy de vacaciones.</p>
<p> Me voy de vacaciones pronto</p>
</aside>
aside
32

Representan ttulos de su seccin, el h1 representa el de
ms rango y el h6 el de menos.
Deben seguir la secuencia lgica
<h1> La casita de Tata </h1>
<h2> Saln </h2>

Representa el encabezado de una seccin, se utiliza para
agrupar elementos h1-h6
<hgroup>
<h1> La casita de Tata </h1>
<h2> Saln </h2>
</hgroup>

Elemento h1, h2, h3, h4, h5 y h6
hgroup
33

Representa un grupo de ayuda introductoria.
<header>
<h1>Nombre del sitio</h1>
</header>
<header>
<h1>Nombre del sitio</h1>
<h2>Slogan del sitio</h2>
<p>Informacin adicional </p>
</header>

header
34

Contiene las secciones del final de un contenido
<footer>
<p><a href=creditos.html>
Creditos</a></p>
<p>Copyright @2012 Cris Pelayo</p>
</footer >

footer
35

Contiene la informacin de contacto del elemento
antecedente.
<address>
<p> Ms detalles:
<a href="mailto:crispelayo@uniovi.es">
Cris Pelayo</p>
</address>

address
36
Otras etiquetas
Elemento Div permite establecer una divisin dentro del
documento
<div> </div>
Atributo Id
<Elemento id=nombre> </elemento>
Atributo Class
<Elemento class =nombre></elemento>

37
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

38
Referencias
Lenguajes de marcas en el W3C
http://www.w3.org/standards/techs/html
XHTML2: http://www.w3.org/MarkUp/
Grupo de trabajo de HTML en el W3C:
http://www.w3.org/2007/03/HTML-WG-charter.html
WHATWG: http://www.whatwg.org/
HTML5: http://www.w3.org/TR/html5/
HTML5 Editors Draft: http://dev.w3.org/html5/spec/
Validador de HTML http://validator.w3.org/
39
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

40
Sintaxis bsica
Una regla define algn aspecto del estilo de uno o varios
elementos h1 { color: green; }
Una hoja de estilo es un conjunto de reglas que se aplican
a un documento HTML
h1 { color: green;}
PROPIEDAD VALOR
DECLARACIN
SELECTOR
REGLA
41
Sintaxis bsica
El selector es el enlace entre el documento HTML y el
estilo
La declaracin es la parte de la regla que especifica qu
efecto tendr sta (es decir, el estilo)
En el ejemplo, todos los elementos <h1> se vern
afectados por la declaracin (aparecern en verde)
42
Sintaxis bsica
Agrupacin de reglas

h1 { font-weight: bold; }
Como las declaraciones son idnticas, se pueden agrupar:
h1, h2, h3 { font-weight: bold; }
43
Sintaxis bsica
Un selector puede tener ms de una declaracin:
h1 { color: green; }

Se agrupan en una nica declaracin
h1 { font-weight: bold;
color: green; }
44
Sintaxis bsica
Comentarios

/* esto es un comentario en CSS */
45
Sintaxis bsica
<!DOCTYPE html>
<html>
<head>
<title>Pgina de ejemplo</title>

<link rel=stylesheet type=text/css
href=estilo.css/>

</head>
<body>
<h1>Pgina de ejemplo</h1>
<p>Esta es un <a href="demo.html">ejemplo</a> simple.</p>
</body>
</html>

46
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

47
Etiquetas bsicas
Selectores
Selector de tipos
Selector universal
Selector de clase
Selector id
Combinacin de selectores

48
Etiquetas bsicas
Selectores de tipos
Permite seleccionar todos los elementos de un
determinado tipo (elemento html) y dar valor a las
propiedades
h1 { color: #36C; }
Se aplica la declaracin a cada aparicin de ese tipo de
elemento

49
Etiquetas bsicas
Selectores universal
Compara el nombre de todos los tipos de elemento. Se
representa mediante un asterisco (*).

Ejemplo: selecciona todos los elementos y les da color
* { color: #36C; }

50
Etiquetas bsicas
Selectores de atributos class e id

Son atributos que tienen todos los elementos de HTML y
que permiten crear potentes selectores
Class
.importante{color: blue;}
Id
#menu{text-align: left; }

51
Etiquetas bsicas
Selector Class resultado
html
<p>
Los filsofos son personas
que dicen frases como:
</p>

<p class=importante>
No os lo que he callado.
</p>

css
.importante{color: blue;}

Los filsofos son
personas que dicen
frases como:
No os lo que he
callado.

52
Etiquetas bsicas
Selector id resultado
html
<nav id = menu>
<ul>
<li> item 1</li>
<li> item 2</li>
</ul>
</nav>

Css
#menu{text-align: left; }
Item 1
Item 2
53
Etiquetas bsicas
Los selectores se pueden combinar: no slo debe coincidir el
elemento, sino el contexto en el que aparece
Supongamos que tenemos estas reglas:
h1 { color: red; }
em { color: red; }
h1 em { color: blue; }

Si tenemos el siguiente cdigo el resultado ser:

<h1>Hola a <em>todos</em></h1>
Hola a todos
<h1>Hola a todos </h1>
Hola a todos
<p>Texto <em>enfatizado</em></p>
Texto enfatizado

54
Etiquetas bsicas
Modelo de caja
55
Etiquetas bsicas
Propiedades de Aspecto
Color
color: <color>
Fondo
background-color : <color>
background-image: <url> | none

56
Etiquetas bsicas
Propiedades de Aspecto
Fuentes
font-family: [ <familia concreta> , ]*
[ <familia-concreta> |
<familia-generica> ]
font-size: <longitud> | <porcentaje> |
<tamao-absoluto> |
<tamao-relativo>

57
Esquema
HTML
Sintaxis bsica
Etiquetas bsicas
Referencias

CSS
Sintaxis bsica
Etiquetas bsicas
Referencias

58
Referencias
CSS en el W3C http://www.w3.org/Style/CSS/
Gua breve de CSS
http://w3c.es/Divulgacion/GuiasBreves/HojasEstilo
Validador de CSS http://jigsaw.w3.org/css-validator/
59

Taller Breve de HTML5-CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Taller Breve de HTML5-CSS

Uploaded by

Copyright:

Available Formats

Dra. B.

Cristina Pelayo Garca-Bustelo

You might also like