PDF de programación - Taller de HTML, CSS, JS y Bootstrap

Cualquiera

puede

desarrollar
en la web

Taller de

HTML, CSS, JS
y Bootstrap

Creación de una hoja de estilos
Dentro de la carpeta “css” creamos
un archivo llamado “mis_estilos.css”

Añadir hoja de estilos a nuestra página
Dentro de la etiqueta head, crearemos una etiqueta link, en
esta debemos especificar la carpeta donde se encuentra el
archivo y el nombre de este.

Colores

Los colores se reciben de diferentes
formas:

● Por nombre: gold
● Hexadecimal: #ffd700
● RGB: 255, 215,0
● RGBA: 255, 215,0,1

Lista de completa de colores por nombre:
https://www.w3schools.com/colors/colors_names.asp

Nuestros primeros estilos

Archivo mis_estilos.css

Cambia alineación del texto
(center, right, left, justify)

Cambia tamaño de la letra

Cambia color del texto

Estilos en cascada

Como la etiqueta body es la etiqueta
principal todos los estilos que le
apliquemos a estas también tendrán
efecto en las demás etiquetas

En este caso podemos decir que todos
los párrafos y demás elementos
tendrán un tamaño de letra de 13pt,
excepto que indiquemos lo contrario

Otras formas de agregar estilos

Ejercicios
https://www.w3schools.com/html/exercise.asp?filename=exercise_styles1

https://www.w3schools.com/html/exercise.asp?filename=exercise_css1

https://www.w3schools.com/html/exercise.asp?filename=exercise_styles3 *

https://www.w3schools.com/html/exercise.asp?filename=exercise_styles4 *

https://www.w3schools.com/html/exercise.asp?filename=exercise_styles5 **

https://www.w3schools.com/html/exercise.asp?filename=exercise_styles6 **

Actividad

Transformaciones de texto

Cambiar el color de la letra en los

encabezados h2 y aplicar una
transformación de texto en las

etiquetas que consideres necesario

a)capitalize:
Esto hará que la primera letra de cada palabra sea
mayúscula.
b)uppercase:
Te mostrará todas las letras como mayúsculas.
c)lowercase:
Mostrará todas las letras como minúsculas.
d)none: Esto eliminará cualquier transformación del
texto.

Listas ordenadas

Listas no ordenadas

Crea tu propia lista no ordenada, usando
los ejemplos de la w3schools

https://www.w3schools.com/html/html_lists.
asp

Tablas

Más estilos de tablas
https://www.w3schools.com/html/html_tables.asp

¿Que pasa sí cambiamos el valor de la
propiedad width a un 50%?

Dándole estilo a nuestra tabla

Que pasa si agregamos la siguiente

propiedad a la primera regla

border-collapse: collapse;

Cambia el color de los bordes

a tu gusto

Agregar favicon de página

1. Descarga una imagen en formato .ico de la siguiente página

http://www.iconarchive.com/ y guardalo con el nombre mi_icono.ico, en la
misma carpeta en donde esta el archivo index.html

2. Busca en google la LÍNEA de código que te permite colocar el favicon XD

Google fonts

Agregaremos los estilos
de fuente que más nos

gusten!!

Agregando fuentes a

nuestro proyecto

1.

Ir a la página https://fonts.google.com

2. Seleccionar el tipo de letra que deseamos

3. En la parte inferior derecha aparecera un
rectangulo que dice “Family Selected” lo
clickeamos

Podemos agregar muchos tipos de letra
en un mismo proyecto pero debemos
tener en cuenta el tiempo de carga

Tenemos dos forma para vincular el tipo de
letra a nuestro proyecto, una es colocarlo en
nuestro archivo HTML y otra es colocarlo en
nuestro css

4. En el HTML: Copiar la etiqueta link en
el head de tu página

5. Agrega la regla css al elemento que
quieres cambiar

Paso 4

Paso 5

Así se verán los párrafos de

nuestra página

Letra normal

Id y clases

Las clases permiten a CSS y Javascript
seleccionar y acceder a elementos
específicos a través de los selectores de
clase

El atributo global id define un
identificador único (ID) el cual no debe
repetirse en todo el documento

Uso de clases HTML
Colocar 3 párrafos, en donde el
color de cada párrafo debe ser
diferente.

La forma en la que estábamos
haciéndolo consistía en dar a
TODOS los párrafos el mismo
aspecto.

p {
color: green;
size: 15px;
}

Primero crearemos las reglas css en el archivo
mis_estilos.css

Importante! cada regla de clase debe
comenzar con un punto y sin espacios entre el
punto y el nombre de la clase

luego le daremos la clase a cada párrafo

Lo asombroso de las clases es que podemos

reutilizarlas en diferentes partes de nuestra página

A Juan le piden cambiar
el color de los títulos por
el mismo color que tiene
en un imagen para que
combine.

¿Cómo debe hacerlo?

Inspector de página

Este nos permite
cambiar el contenido, el
tamaño de letra, el color
y otras propiedades
desde el mismo
navegador, para tener
ver el aspecto de forma
rápida y segura

Gracias