Scribd
Cargar
398 vistas

Nivel2HTML CSS Bootstrap

Este documento explica los conceptos básicos de HTML y CSS para el diseño web. Introduce HTML como un lenguaje de marcado usado para crear y representar páginas web visualmente sin programación. Explica la estructura básica de un documento HTML, incluyendo las etiquetas <html>, <head>, <title>, y <body>. También cubre elementos como párrafos, títulos, hipervínculos, y formato de texto.

Cargado por

Romina González
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
398 vistas

Nivel2HTML CSS Bootstrap

Este documento explica los conceptos básicos de HTML y CSS para el diseño web. Introduce HTML como un lenguaje de marcado usado para crear y representar páginas web visualmente sin programación. Explica la estructura básica de un documento HTML, incluyendo las etiquetas <html>, <head>, <title>, y <body>. También cubre elementos como párrafos, títulos, hipervínculos, y formato de texto.

Cargado por

Romina González
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 49

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

También podría gustarte