Está en la página 1de 53

INS018 Desarrollo Web

Ingeniera en Computacin e Informtica


Semestre 2017-1

Desarrollo Web
Introduccin al HTML5 y CSS3

Profesor Miguel Cantillana


HTML5
Qu es HTML5
Estructura HTML5
Sintaxis y etiquetas bsicas orientadas al texto
Tablas, filas, celdas, nombres de columnas
Links, imgenes y tipos de enlaces
Divs y spans
Herramientas para la revisin del markup
Hojas de estilo en cascada (CSS)
Qu es CSS?
Estructura, sintaxis de reglas CSS, Herencia y Cascada
Selectores de Clase, de ID y Generales
Propiedades CSS
Fondo, Textos, Fuentes, Bordes, Mrgenes, Padding,
Listas
Propiedades CSS3
Border Radius, Box Shadow, Text Shadow, RGBA,
@Font Face, CSS Gradient
Selectores de CSS avanzado
Pseudo Clases
Pseudo Elementos
Selectores CSS3
Qu es HTML?
Es un lenguaje semntico, lo que quiere decir
que no definimos el aspecto de las cosas, sino
lo que significan.
Caractersticas HTML
Lenguaje de Marcado
Funciona a travs de etiquetas
<etiqueta> .. </etiqueta>
Documento Jerarquizado (DOM)
Lenguaje Semntico
NO es un lenguaje de diseo web
NO es un lenguaje de programacin
Estructura HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ttulo de la pgima</title>
</head>
<body>
....
</body>
</html>
<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="description" \
content="descripcin de la pgina" />
OJO!
<meta name="keywords"
content="HTML,CSS,XML,Java
Script">
Anatoma de una etiqueta
Sintaxis y etiquetas
bsicas orientadas al
texto
Etiquetas
Ttulos
Prrafos
nfasis (strong, em)
Listas en orden
Listas sin orden
Links, y tipos de
enlaces
<a href="#">Link</a>
<a href="#" tittle="Ir a"
target="_blank">Link</a>
Opciones de target
_blank
_self
_parent
_top
Imgenes en una web
<img src="/path/" />
<img
src="/path/" alt="Descripcin"
width="100" height="100"
title="Titulo"
/>
<figure>
<img src="/macaque.jpg" alt="Macaque in the
trees">
<figcaption>A cheeky macaque, Lower
Kintaganban River, Borneo. Original by
<ahref="http://www.flickr.com/photos/rclark/">R
ichard Clark</a></figcaption>
</figure>

http://html5doctor.com/the-figure-figcaption-elements/
Tablas, filas, celdas,
nombres de columnas
Tabla Simple
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>

<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>

<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>

<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
Tabla Avanzada
<table border="1">
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
</tbody>

<tfoot>
<tr>
Divs y spans
<div>...</div>
<span>...</span>
Iframes
Actividad en clases
Actividad en clases
Actividad en clases
Debe poseer las siguientes caractersticas
Debe ser un documento HTML5
Un ttulo de primer nivel
5 ttulos de de segundo nivel
2 ttulos de tercer nivel
Una imagen (puede utilizar lorempixel.com)
2 listas sin orden con links
Los enlaces deben abrirse en una segunda pestaa
Debe incorporar una etiqueta inline
Debe utilizar la etiqueta de nfasis
Hojas de estilo en
cascada (CSS)
Qu es CSS?
Estructura y sintaxis CSS
Herencia y Cascada
Herencia
Cuando se establece el valor de una propiedad CSS en un
elemento, sus elementos descendientes heredan de forma
automtica el valor de esa propiedad.
Cascada
Selectores de Clase, de
ID y Generales
Selector de clase
.clase_texto {
color:#FF0000;
font-size:14px;
}
Selector de ID
#texto {
color:#FF0000;
font-size:14px;
}
Selectores generales
p {
color:#FF0000;
font-size:14px;
}

h2 { background:olive}
Propiedades CSS
Propiedades de CSS
Fondo Mrgenes
Textos Padding
Fuentes Listas
Bordes
Propiedades CSS3
CSS3
Border Radius
Box Shadow
Text Shadow
RGBA
@Font Face
CSS Gradient
Selectores de CSS
avanzado
Pseudo Clases
a:focus
a:hover
a:active
input:focus
p:first-lin
p:first-letter
Pseudo Elementos
.selector::after {}
.selector::before {}
.selector::first-letter {}
.selector::first-line {}
.selector::selection {}
Selectores CSS3
Elemento[atributo^="valor"]: selecciona todos los
elementos que disponen de ese atributo y cuyo valor
comienza exactamente por la cadena de texto indicada
Elemento[atributo$="valor"]: selecciona todos los
elementos que disponen de ese atributo y cuyo valor
termina exactamente por la cadena de texto indicada
Elemento[atributo*="valor"]: selecciona todos los
elementos que disponen de ese atributo y cuyo valor
contiene la cadena de texto indicada
Actividad en clases
Dado el siguiente HTML, aplicar las siguientes reglas de CSS:
Dejar el primer elemento y ltimo elemento de la lista sin orden con
tamao de fuente 22px
Dejar los prrafos con 16px
Configurar la clase .titulo_principal con margen superior a 10px,
margen inferior a 5px, adems definir un borde inferior de color gris,
con ancho 1px y tipo de lnea punteada
Dejar la primera letra de los prrafos con tamao 42px
Agregar un doble guion antes y despus en la clase crdito
Agregar mrgenes interiores de 2px en el contorno a imgenes
Agregar mrgenes exterior de 5px en el contorno a imgenes
Agregar borde de color #CCC a las imgenes del documento
Configurar los estados visited, hover y link de la siguiente forma
Estado visitado en color morado o similar y sin linea baja
Estado hover con linea baja y color azul
Estado link con color negro y sin lnea baja
Crditos
http://www.w3schools.com/
https://jmacias.files.wordpress.com/2011/02/n33-css-un-
juego-de-ninos-pc-cuadernos.pdf
http://code.tutsplus.com/es/tutorials/the-30-css-
selectors-you-must-memorize--net-16048
http://www.virtualnauta.com/css-ejemplos
http://librosweb.es/libro/css_avanzado