HTML +
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>
HyperText Markup Language
“Lenguaje de marcas de HTML NO es un lenguaje de
hipertexto” programación; es un lenguaje de
marcado.
Se usa para crear y
representar visualmente Consiste de una serie de etiquetas
una página web. para decirle al navegador como
Determina el contenido de mostrar los contenidos de la web en
la página web, pero no su pantalla.
funcionalidad.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Elementos
El principal elemento del Elemento
HTML son las etiquetas o
tags.
<p> Arranquemos con HTML </p>
Una línea de una página
web podría verse así: Contenido
Etiqueta de apertura Etiqueta de cierre
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Elementos
Etiqueta de apertura: es el nombre del Los elementos pueden tener
elemento (en este caso, p), encerrado atributos, que contienen información
por <>. Establece dónde empieza a adicional acerca del elemento.
tener efecto ese elemento.
Un atributo debe tener siempre:
Contenido: es el texto sobre el cual se
- Un espacio entre éste y el nombre del
aplica el elemento en cuestión.
elemento (o del atributo previo, si el
Etiqueta de cierre: es igual a la de elemento ya posee uno o más
apertura, pero incluye la barra de cierre atributos).
( / ) antes del nombre de la etiqueta. - El nombre del atributo, seguido por
Define donde termina el elemento. un signo de igual (=).
- Comillas de apertura y de cierre,
encerrando el valor del atributo.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura básica de un documento HTML
<html>
<head>
<title> Empezamos… </title>
</head>
<body>
Hola Mundo!
</body>
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura básica de un documento HTML
<html>
<html> </html>
<head>
engloba todo el contenido de la <title> Empezamos… </title>
página. </head>
Todo lo que está en medio será <body>
la página web. Hola Mundo!
</body>
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura básica de un documento HTML
<html>
<head> </head>
<head>
Es contenedor de todo aquello <title> Empezamos… </title>
que queremos incluir en la </head>
página HTML que no es
contenido visible por los <body>
Hola Mundo!
visitantes de la página.
</body>
Incluye cosas como palabras
clave, una descripción de la </html>
página que quieres que
aparezca en resultados de
búsquedas, etc.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura básica de un documento HTML
<html>
<title> </title>
<head>
Este elemento establece el <title> Empezamos… </title>
título de tu página, que aparece </head>
en la pestaña/ventana de tu
navegador cuando la página se <body>
Hola Mundo!
carga y se utiliza para describir
</body>
la página cuando la agregas a
tus marcadores o la marcas </html>
como favorita.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura básica de un documento HTML
<html>
<body> </body>
<head>
Contiene todo el contenido que <title> Empezamos… </title>
quieres mostrar a los usuarios </head>
cuando visitan tu página, ya sea
texto, imágenes, vídeos, juegos, <body>
Hola Mundo!
pistas de audio reproducibles o
</body>
cualquier otra cosa.
</html>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Estructura del DOM
DOM es la abreviatura de Document Object Model es el árbol de elementos
que definen la estructura de un documento HTML.
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>
<a> </a> Hipervínculos
<br> Salto de línea
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
Tag sin semántica asociada;
<div> </div>
divisor organizacional.
<header> </header> Encabezado
Contentedor para los links de
<nav> </nav>
navegación
<section> </section> Sección
<article> </article> Composición auto-contenida
<aside> </aside> Contenido contextual o lateral.
<footer> </footer> Pie de pagina
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags: Atributos
id Identificador único del elemento width Ancho
class Identificar grupos del elementos height Alto
title Tooltip alt Texto alternativo
href Ruta (URL) del link Atributo personalizado a un
data-*
elemento HTML
style Estilos que modifican el tag align Alineación del elemento
src Ruta de un archivo dir Dirección del texto
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tags
Multimedia
<img> </img>
Imágenes
<picture> </picture>
<video> </video> Videos
<audio> </audio> Audio
<object> </object> Objetos / plug-ins (PDF
<embed> readers, Flash Players)
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Formularios
Es un elemento de interacción Los sub-elementos pueden ser:
entre un usuario y un sitio web o
aplicación. <input>
Utiliza las etiquetas <label>
<form> </form>
<button>
Permiten a los usuarios enviar
información a un sitio web. <select> </select>
El formulario es un elemento <textarea> </textarea>
contenedor, por lo tanto, deberá
tener sub-elementos de otros <fieldset> </fieldset>
tipos para ser visible.
<datalist> </datalist>
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation <output> </output>
<Code Academy>
Tipos de input
Es el elemento principal de los button password
formularios. checkbox radio
Dependiendo del valor del color range
atributo type resultará en un
subelemento diferente. date reset
datetime-local search
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
1 - Crear una página html con un
párrafo de texto y una imagen.
2 - Agregar un formulario con
nombre, apellido y dirección de e-
mail; y un botón de Enviar.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
Conceptos
Basicos
Technology & Innovation / CIC Argentina / March 20, 2018 / © 2018 IBM Corporation
<Code Academy>
Cascading Style Sheets
“Hojas de Estilo en CSS tampoco es un lenguaje de
Cascada” programación; es un lenguaje de
hojas de estilo.
Determina el estilo de la
página web, pero no su Permite aplicar estilos de manera
funcionalidad. selectiva a elementos en
documentos HTML.
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
El principal elemento del Regla
CSS son las reglas
Propiedad
predeterminadas.
p { Valor de propiedad
Las reglas se guardan en color: red;
un archivo .css }
Declaración
Una regla de un CSS
podría verse así:
Selector
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Reglas
Selector: El elemento HTML en el que Valor de Propiedad: Establece una de
comienza la regla. Indiqua a qué las muchas posibles apariencias para
elementos se dará estilo (en este caso, una propiedad determinada.
los elementos p)
La sintaxis de una regla es:
Declaración: especifica a cuál de las
- Cada una de las reglas deben estar
propiedades del elemento quieres dar
encapsulada entre corchetes {}.
estilo.
- Dentro de cada declaración, debes
Propiedades: Maneras en las que usar los dos puntos : para separar la
puedes dar estilo a un elemento HTML. propiedad de su valor.
(Por ejemplo, color es una propiedad - Dentro de cada regla, debes usar el
del elemento p.) En CSS, indicas que punto y coma ; para separar una
propiedad quieres usar en tu regla. declaración de la siguiente.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Tipos de Selectores
Simples: Seleccionan los Pseudo-clases: Seleccionan los
elementos por el nombre del tipo elementos por el estado en que se
de elemento, class, o su id. encuentran, cómo haber aparecido
al pasar el ratón, o el tic
De Atributos: Seleccionan los
deshabilitado o seleccionado, o por
elementos por los valores de sus
ser el primer hijo de su padre en el
atributos.
árbol DOM.
Pseudo-elementos: Selecciona los
elementos por su situación en
relación a otro elemento, por
ejemplo: la primera palabra de
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
cada párrafo.
<Code Academy>
Tipos de Selectores
Combinaciones: No son en sí Múltiples: Tampoco son selectores
mismos selectores, sino formas de en sí mismos; podemos agrupar
combinar dos o más selectores de múltiples selectores en la misma
forma práctica para una selección regla CSS separados por comas,
especial. Por ejemplo, se pueden para aplicarlos a una de las
seleccionar párrafos que sean declaraciones o a todos los
descendientes de divs, o párrafos elementos seleccionados por estos
situados justo después de títulos. 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
div a Descendiente :hover Mouse sobre elemento
div > span Hijo :active Elemento activo
label ~ input Hermano :first-child Primer hijo de elemento
:nth-child(2n+1) ó (2n) Hijos pares ó impares
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.lista > *[data-target=”boton”]
Todos los hijos de un <div> con clase lista que tengan el atributo ‘data-
target=”boton”’
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>
Box Model: Ejemplo
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
display: none; Ocultar elemento. absolute Elemento posicionado relativo al
primer antecesor relativo o
display: block; Bloque, todo el ancho absoluto.
posible.
relative Elemento posicionado relativo a
display: inline-block; Bloque de una línea. sí mismo.
Mínimo ancho posible.
fixed Elemento posicionado relativo a
display: inline; Texto de una línea. la pantalla del browser.
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Posicionamiento
Ejemplo:
footer
position: absolute;
bottom: 0;
header
position: fixed;
top: 0;
offset hacia la izquierda
position: relative;
left: -20px;
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;
background-color: #c0392b; background-image: url(css.png); background-repeat: no-repeat;
background-position: center; background-size: cover; background-attachment: fixed;
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
Especificidad
Especificidad son los mecanismos por los <h1 class=“titulo”> Esto es un
cuales el browser decide qué valores de una titulo </h1>
propiedad de CSS serán los que se apliquen +
a un elemento en caso de conflicto.
h1{
La especificidad solo se aplica cuando el color: blue;
mismo elemento es objetivo de múltiples }
reglas.
El orden es: .titulo{
1. Selectores de tipo y pseudo-elementos color: red;
}
2. Selectores de clase, selectores de
atributos y pseudo-clases. =
3. Selectores de ID Esto es un titulo
Technology & Innovation / CIC Argentina / March 20, 2018/ © 2017 IBM Corporation
<Code Academy>
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
Bootstrap es uno de los Es “Mobile First” por lo que se enfoca en
frameworks de front-end más smartphones y tablets como herramientas
utilizados en el mundo. principales de los trabajadores para realizar
sus tareas.
En cada página que lo usa, se
implementa un CSS que define El sistema de grid de Bootstrap tiene cuatro
una grilla o grid para estructurar clases:
contenido.
xs (para dispositivos más pequeños que
La grilla utilizada en Bootstrap 768px, teléfonos)
establece 12 columnas
sm (más grandes o iguales a 768px, tablets),
individuales que se pueden
agrupar para formar columnas md (más de 992px de ancho)
más grandes.
ld (más de 1200px de ancho)
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.
row: Grupo horizontal de
columnas.
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
§ Elementos básicos HTML (div, p, span, h1, img, input, a)
§ Conceptos básicos CSS (herencia, colors, font-family)
§ Atributos
§ Box Model
§ Selectores § Background
§ Combinando Selectores § Formularios
§ Pseudo Selectores § Bootstrap | Grid
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
