Nivel2HTML CSS Bootstrap
Nivel2HTML CSS Bootstrap
CSS:
Diseño
web
Technology & Innovation / CIC Argentina / March20, 2018 / © 2018 IBM Corporation
Conceptos
Basicos
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Elementos
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Elementos
<html>
<head>
<title> Empezamos… </title>
</head>
<body>
Hola Mundo!
</body>
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags
Texto
<p> </p>
Párrafos
<pre> </pre>
<h1> </h1>
… Títulos
<h5> </h5>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags
Texto
<b> </b>
<strong> </strong>
<i> </i>
<em> </em>
<small> </small>
<mark> </mark> Formato de texto
<del> </del>
<ins> </ins>
<sub> </sub>
<sup> </sup>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags
Estructura
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags: Atributos
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags
Multimedia
<img> </img>
Imágenes
<picture> </picture>
<video> </video> Videos
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Formularios
Tipos de input
email submit
file tel
hidden text
image time
month url
number week
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
El soporte de
cada elemento
individualmente
depende del
browser
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2017 IBM Corporation
Mismo HTML, distintos browsers
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2017 IBM Corporation
<Code Academy>
Ejercicios HTML
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
Conceptos
Basicos
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
¿Cómo funciona?
El navegador convierte HTML y CSS en un DOM (Objeto Documento
Modelo). Este DOM representa el documento en la memoria del ordenador.
Combinando el contenido del documento con su estilo.
El navegador muestra el contenido del DOM.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
¿Cómo funciona?
En el archivo HTML, indicamos la ruta al CSS que queremos usar:
<html>
<head>
<title> Ahora CSS... </title>
<link rel="stylesheet” href=”mi_archivo.css">
</head>
<body>
Hola Mundo!
</body>
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Reglas
Selector
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Reglas
Tipos de Selectores
Tipos de Selectores
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Selectores
#emailHelp Id
div Elemento
.form-group Clase
[for=”exampleSelect1”] Atributo
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Selectores
Combinaciones Pseudo-selectores
Reglas que se combinan con selectores para Seleccionar elementos por su estado.
especificar certeramente elementos.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Selectores
Multiples
a.link-externo:hover
Todos los <a> con clase ‘link-externo’ que tienen el mouse por encima
div#contenedorTitulo.titulos p.texto
Todos los <p> con clase ‘texto’ descendientes de un div <div> con id
‘contenedorTitulo y clase ‘titulos’
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Box Model
Padding:
el espacio alrededor del contenido
Border:
la línea que se encuentra fuera del
relleno
Margin:
el espacio fuera del elemento que lo
separa de los demás.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
div{
background-color: lightgrey;
width: 300px;
border: 4px solid #c0392b;
padding: 25px 20px 0px 30px;
margin: 25px;
}
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Posicionamiento
Layout Position
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Posicionamiento
Ejemplo:
footer
position: absolute;
bottom: 0;
header
position: fixed;
top: 0;
centrado en pantalla
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
margin: auto;
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Background
<div> con width: 100px; y height: 100px;
Especificidad
Ejercicios CSS
Utilizando la página del ejercicio de
HTML, implementar un CSS que:
1- Cambie el color de título on
:hover.
2- El párrafo de texto esté con
alineación justificada, fondo verde
claro y tenga un borde.
3- Cambie el color de la caja de
texto que tiene el foco.
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
Bootstrap
Grid
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Bootstrap
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Bootstrap Grid
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Elementos
container: Delimita un
ancho máximo de
acuerdo al tamaño de
la pantalla.
col: Contenedores de
contenido. Se disponen
12 por fila.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
<div class="row">
<div class="col"> 1 of 3 </div>
<div class="col"> 2 of 3 </div>
<div class="col"> 3 of 3 </div>
</div>
</div>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Ejemplo
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Ejemplo
1 container;
compuesto por 1 row;
que contiene 3 col
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
Anexos
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Links útiles
§ Atributos
§ Box Model
§ Selectores § Background
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
Referencias:
HTML:
w3 Schools
MDN
CSS:
w3 Schools
MDN
Technology & Innovation / CIC Argentina / September 07, 2017 / © 2017 IBM Corporation