forbeginners.html workshop.

css

1
2
3
4
Etiquetas ‘mas comunes’ {
5
6
[de HTML]
7
8
9 < Creando un sitio web básico >
10
11
12
13 }
14

Programming Language
 forbeginners.html workshop.css

1
2
Etiquetas de ‘TEXTO’;
3
4
5
6
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
7
8
9 Estos elementos representan encabezados o títulos de
10
11
mayor a menor importancia o nivel en la página web.
12
13
14

Programming Language
 forbeginners.html workshop.css

1
2
Más etiquetas de ‘Texto’ {
3 <p> - un párrafo.
4
5
6 <strong> - esta etiqueta te permite resaltar texto importante.
7 Usualmente se muestra en negrita.
8
9 <em> - esta etiqueta te permite resaltar texto importante.
10 Usualmente se muestra en cursiva.
11
12
13 <hr> - una línea horizontal que puede ser usada para separar
14 } párrafos o secciones de tu página web.

Programming Language
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 forbeginners.html workshop.css

01 {
1
2 [Imagenes en HTML]
3
4
5 < Al principio, la web solo era texto y resultaba más bien aburrido.
6 Afortunadamente, no pasó mucho tiempo antes de que se añadiera la
7 capacidad de insertar imágenes (y otros tipos de contenido más
8
interesantes) en las páginas web.
9
10
Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico
11
comenzar con el humilde elemento <img> utilizado para insertar una
12
imagen simple en una página web >
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
4 < Para poner una imagen simple en una página web, utilizamos el
5 elemento <img>. Se trata de un elemento vacío (lo que significa que no
6
7
} contiene texto o etiqueta de cierre) que requiere de por lo menos de un
atributo para ser utilizado: src (a veces denominado por su nombre
8 completo, source). El atributo src contiene una ruta que apunta a la
9 imagen que quieres poner en la página, que puede ser una URL relativa
10
o absoluta, de la misma forma que el elemento <a> contiene los valores
11
del atributo href >
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
Ejemplo en Sublime Text; {
3
4
5
6
7
8
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1 El sitio web se vera de la siguiente forma{

2
3
4
5
6
7
8
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
4 Step 01 También puedes incrustar la imagen usando la URL absoluta, por ejemplo:

5
6
7
8
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1 El sitio web se vera de la siguiente forma{

2
3
4
5
6
7
8
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
Introducción a CSS{
3
4
¿QUÉ ES CSS?
5
6
7 < CSS son las siglas en inglés para «hojas de estilo en cascada»
8
(Cascading Style Sheets). Básicamente, es un lenguaje que
maneja el diseño y presentación de las páginas web, es decir,
9
cómo lucen cuando un usuario las visita. Funciona junto con el
10
lenguaje HTML que se encarga del contenido básico de los
11
sitios.>
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
Una regla en CSS luce así:
3
4
5
6
7
8
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
SELECTOR {
3
4
5
6 < "Todas las reglas CSS comienzan con un selector. Este indica la parte del
7 documento donde se aplica la regla. A este le siguen una o más declaraciones
8 dentro de corchetes. Existen varias formas de escribir un selector, el más
9 básico es el que viste en el ejemplo de arriba: cada elemento HTML a
10 modificar se menciona por su nombre (p, div, a, etc.)>
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14 }
Programming Language
 AÑADIENDO UN
ARCHIVO CSS { A
MI ARCHIVO
}HTML
 forbeginners.html workshop.css

1
2

Awesome {Por supuesto, CSS no sirve de

3
4
5
mucho si no está vinculado a un archivo HTML. Existen tres
6
estilos para llevar a cabo esta importante tarea: mediante un CSS
7
externo (external), CSS interno (internal) o CSS en línea (inline).
8
A continuación, veremos las características de estos tres estilos
9
de CSS.
10
11
12
13
14
}
Programming Language
 forbeginners.html workshop.css

1
2
Did You Know ‘This ?’ {
3
4
El CSS externo existe en su propio archivo, el cual está enlazado a un documento HTML
5
con una etiqueta <link>. Es el método más usado para añadir CSS a HTML, ya que una hoja
6 de estilo externa puede dictar el estilo de diferentes documentos HTML. Esto permite que
7 los desarrolladores hagan cambios a lo ancho del sitio con un solo archivo CSS.
8
Para crear un archivo CSS, escribe tu código en cualquier editor de texto o editor de código
9
y guarda el archivo con la extensión .css para vincularlo con un archivo de HTML;
10 almacena tus HTML y CSS en la misma carpeta y luego, pega el siguiente código dentro de
11 la sección <head> del archivo HTML:
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
4
5
6
7
8
9
10 — EJEMPLO
11
12
13
14

Programming Language
 forbeginners.html workshop.css

1
2
Gracias; {
3
‘Tienes alguna pregunta?’
4
5 [email protected]
+91 620 421 838
6 yourcompany.com
7
8
9
10 CREDITS: This presentation template was created by Slidesgo,
11 including icons by Flaticon, and infographics & images by Freepik
12
< Please keep this slide for attribution >
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
Web ‘Design’
3
4
5
6
7
8
9
10
11
12
13
14

Programming Language
 CODIGOS RGB

This presentation has been made using the following fonts:

Fira Code
(https://fonts.google.com/specimen/Fira+Code)

#16191f #2e323b #707070 #e7e7e7 #ffffff

#ff5858 #fcc642 #dba0db #72d9f0 #a5cf27