¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la...
Transcript of ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la...
![Page 1: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/1.jpg)
¿Qué son HTML y CSS?
HTML
Establece la estructura y el contenido
CSS
Establece el aspecto
HTML CSS≠
![Page 2: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/2.jpg)
¿Cómo funciona la web?
HTTP Request
HTTP
Response
HTTP: Protocolo de comunicación de Hipertexto
![Page 3: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/3.jpg)
https://www.santanderrio.com.ar/banco/online/personas
URL La procesa utilizando un lenguaje de programación
Python Ruby
También puede consultar bases de datos
![Page 4: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/4.jpg)
Respuesta en lenguaje
HTML
Luego de Procesar la información
HTML
HTML
HEAD BODY
META TITLE
P
TABLAS
IMAGENE
S
Nuestra el RESULTADO en el Navegador del Cliente
![Page 5: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/5.jpg)
HTML CSS
![Page 6: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/6.jpg)
BACK-END
Lenguajes que trabajan
dentro del Server
Flujo de Trabajo para desarrollar una Web
Necesidad
Experiencia que
le queremos
dar al usuario
U I
Diseño de la
interfase de
usuario
Desarr
oll
o
FRONT-END
visual delusuario
HTML CSS JS
![Page 7: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/7.jpg)
Sintaxis html
Forma visible del
lenguaje de estructura
y contenido
![Page 8: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/8.jpg)
Doctype
<!doctype html> esta etiqueta se ubica al
inicio del documento y se
utiliza para que los
navegadores puedan
reconocer que estamos
utilizando la versión
HTML 5
Es indistinto si escribes
esta etiqueta en
mayúsculas, minúsculas
o una combinación de
ambas
<!doctype html>
![Page 9: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/9.jpg)
Elementos<elemento>xxxxxx contenido xxxxx</elemento>
Permite estructurar las distintas partes de la web
Encabezados
Barras de navegación
Párrafos
Imágenes
Tablas
Pie de página
![Page 10: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/10.jpg)
Contenido de los Elementos
•Caracteres
<p id=“párrafo”>xxxxxxxxxxxxxxxx</p>
•Caracteres<p id=“párrafo”><!—Comentarios--></p>
•Otros elementos<p id=“párrafo”><strong>texto resaltado</strong></p>
Por ejemplo el elemento <p> puede contener:
![Page 11: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/11.jpg)
Modelo de ContenidoDefine la estructura del elemento:
SI puede o
NO puede tener CONTENIDO
NO<br> xxxx</br>
Si <p>xxxx</p>
Qué ATRIBUTOS puede tener?
Un elemento NO puede tener
atributos que no formen parte
de su modelo de contenido
NO<p cellspacing=“10%”> xxxx</p>
Si <p id=“párrafo”>xxxx</p>
![Page 12: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/12.jpg)
Etiquetas de un elemento
Son utilizadas para definir el inicio y el fin de un elemento
xxxx
Nombre atributos Nombre
No distinguen entre Mayúsculas o Minúsculas
Inicio Cierre
![Page 13: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/13.jpg)
Atributos
xxxx
Inicio
atributos
Nombre Valor
![Page 14: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/14.jpg)
Cómo se escriben los atributosAtributo vacío
<p >xxxx</p>
<p >xxxx</p>
Atributo sin comillas (sin espacios en blanco)
<p >xxxx</p>
Atributo con comillas simples
<p >xxxx</p>
Atributo con comillas dobles
<p >xxxx</p>
![Page 15: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/15.jpg)
Elementos Vacíos (void element)
<br>• Solo tienen
etiqueta de
inicio
• NO pueden
tener contenido
• SI pueden tener
atributos
<img src=“ubicación de la imagen>
![Page 16: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/16.jpg)
Elementos No Vacíos (Non void element)
<span></span>
<span>xxxxxx</span>
• Tienen etiqueta
de inicio y fin
• Pueden tener o
no tener
contenido
• SI pueden tener
atributos
<p></p>
<p> xxxxxx </p>
<p id=“párrafo”> xxxxxx </p>
![Page 17: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/17.jpg)
Comentarios
<!--Comentarios-->
• Permiten escribir comentarios dentro de código
html que no son visibles por los navegadores
![Page 18: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/18.jpg)
Estructura básica<!doctype html> esta
etiqueta se utiliza para que
los navegadores puedan
reconocer que estamos
utilizando la versión HTML 5
Es indistinto si escribes esta
etiqueta en mayúsculas,
minúsculas o una
combinación de ambas
<html> </html> Este
elemento o etiqueta es
considerado el ELEMENTO
RAIZ puesto que contendrá
a los demás elementos de
muestra página
Para que pueda interpretar
el idioma en que se escribirá
la página le agregaremos el
atributo lang=“es”
<head> </head> Esta etiqueta
contiene información de la
página que por lo general no se
visualiza en el navegador salvo
por la etiqueta <title></title>
que se visualiza en la pestaña
del navegador
<body> </body> Esta etiqueta
contiene todos los elementos que dan
forma al documento
<meta charset="utf-8"> Esta
etiqueta <meta> junto con el
atributo charset=“utf-8” le
permite al navegador reconocer
los caracteres de una amplia
variedad de idiomas entre ellos
el español.
Luego de incluirla reconocerá
los acentos que coloquemos
tanto en el <title> como en el
<p>
![Page 19: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/19.jpg)
Elementos
Estructurales
![Page 20: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/20.jpg)
DIV y SPAN En HTML 4
<div>
<span>
Permiten
agrupar
contenido
Contenido
en BLOQUE
Contenido
en LINEA
Atributo
DISPLAY
display:block;
display:inline;
<div>
<div>
<div>
<span> <span>
Elementos de Display BLOCK Elementos de Display INLINE
<header></header>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
<a></a>
<img>
<td></td>
![Page 21: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/21.jpg)
Elementos semánticos• Existen una gran cantidad de etiquetas, especialmente desde la llegada de HTML5, pero es
posible que tu página este escrita utilizando mayormente etiquetas del tipo <div> y <span>,
sin aprovechar las opciones semánticas que HTML5 nos ofrece.
• La semántica hace referencia al significado de las palabras y al significado de las oraciones,
por ejemplo, cuando leemos un texto coherente, que utiliza palabras y oraciones adecuadas y
que le dan sentido a lo que leemos.
• De igual forma, HTML nos brinda una serie de etiquetas con mayor significado, para cada
parte, sección, o elemento de nuestra página, y que, aunque en la práctica no generen un
resultado visual distinto al de usar una etiqueta <div> como contenedor para todo, pueden
darle mayor significado a nuestro código, así como algunas otras ventajas.
Código más claro y fácil
de mantener
Ayuda a tu sitio a ser
accesible
Mejora tu
posicionamiento SEO
![Page 22: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/22.jpg)
Elementos NO semánticos
<div>
<span>
Atributo
id=”cabecera”
Atributo
class=”Cabecera”
No
semánticos
Se los
puede
identificar
<div id=“header”></div>
<div id=“nav”></div>
<div id=“main”></div>
<div
id=“sidebar”>
</div>
<div id=“footer”></div>
![Page 23: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/23.jpg)
Elementos Semánticos de HTML5
<header>
</header>
<nav></nav>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside>
</aside>
<footer></footer>
![Page 24: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/24.jpg)
Elementos semánticos para estructurar texto
Comportamiento in-line Comportamiento block
No semánticos Semánticos Semánticos
Etiqueta Efecto Etiqueta Efecto Etiqueta Efecto
<i>xx</i>xx
<em>xx</em>xx
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
<p>texto de párrafo</p>
Encabezado1Encabezado2Encabezado3Encabezado4Encabezado5Encabezado6
texto de párrafo<b>xx</b> xx <strongxx></strong>
xx
![Page 25: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/25.jpg)
Sintaxis CSS
Forma visible del
lenguaje de estilos
![Page 26: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/26.jpg)
Sintaxis CSS
Propiedad valor
Propiedad valor
Selectores para elementos HTML
Propiedad valorPropiedad valor
Selectores para clases
Propiedad valorPropiedad valor
Selectores para atributo ID
Propiedad valorPropiedad valor
![Page 27: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/27.jpg)
Formas de incluir CSSDentro del elemento
<head> del código HTML
Directamente sobre el
elemento html
En un archivo aparte con
extensión .css
<head>
<meta charset="utf-8">
<title>xxxxxx</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<h1 style="color:blue">Titulo</h1>
<h2 style="color: cyan">Subtitulo</h2>
p{
color: #D33134;
}
#cabecera{
border-color:red;
border-width:thin;
border-style: solid;
}
.Texto_Especial{
color: grey;
font-family: Baskerville;
}
<link href="css/estilos.css"
rel="stylesheet" type="text/css">
Agregar este elemento al
<head> del html
Usando elemento Style Usando atributo Style
![Page 28: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/28.jpg)
Elemento para enlaces <a></a> (anchor)<a href=“https://www.xxxxx.com.ar/ ”>texto del enlace visible en la pagina </a>
A otra pagina
del sitioIndex.html Producto.html
<a href=“Product.html”>Ir a Productos</a> <a href=“index.html”>Ir a Productos</a>
Index.html
A una pagina
externaIndex.html WWW.XXX.COM.AR
<a href=“http://www.xxx.com.ar” target=“_blank”>Visite nuestra web</a>
El atributo target=“_blank”
permite que la web se
abra en otra Ventana de
navegador
A un mailIndex.html
<a href=“mailto:[email protected]”>Enviar un mail a [email protected]</a>
![Page 29: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/29.jpg)
Elemento para enlaces <a></a> (anchor)<a href=“https://www.xxxxx.com.ar/ ”>texto del enlace visible en la pagina </a>
A un recurso
para descargar
A otra lugar
dentro de la
misma pagina
Index.html Index.html<h1 id=“Detalles”>Detalles del autor</h1>
<a href=“#detalles”>Ver los detalles del autor</a>
Index.html
<a href=“http://www.gdc.com.ar/apuntes-manuales/outlook2010.pdf” download>Descargar PDF</a>
![Page 30: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/30.jpg)
Selector Universal
*{
Propiedad:valor;
}
Aplica las propiedades a todos
los elementos
*{
color:blue;
}
![Page 31: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/31.jpg)
Selector de Tipo
Elemento html{
Propiedad:valor;
}
Aplica solamente al
elemento html que se indica
como selector en la regla css
p{
color:blue;
}
h1{
color:red;
}
Titulo con elemento h1
Xxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxx
![Page 32: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/32.jpg)
Selector de ID
#nombreID{
Propiedad:valor;
}
Se aplica solamente al
elemento que tiene el
atributo id que coincide con
el selector de la regla CSS
#nota{
color:blue;
}
<article id=”nota”>
Texto del articulo</article>
![Page 33: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/33.jpg)
Selector de Clase
.nombreclase{
Propiedad:valor;
}
Se a todos los elementos
que tienen el mismo
atributo Class
.titulares{
color:blue;
}
<article class=”titulares”>
Texto del articulo</article>
<h2 class=”titulares”>
Texto del h2 </h2>
![Page 34: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/34.jpg)
Sintaxis PseudoclasesElemento:Pseudoclase{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
![Page 35: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/35.jpg)
PseudoClasesPermiten dar forma a los eventosde los elementos. Por ejemplo el
elemento <a>
Los eventos son las acciones que
realizamos con el mouse.
IR A GOOGLE (el link en estado de reposo)
IR A GOOGLE (el mouse sobre el link)
IR A GOOGLE (cuando hago clic sobre el link)
IR A GOOLGE (un link ya visitado)
![Page 36: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/36.jpg)
PseudoClases para element <form>
![Page 37: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/37.jpg)
PseudoClases para tablas
![Page 38: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/38.jpg)
PseudoClases en listas
![Page 39: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/39.jpg)
Sintaxis PseudoElementos
Elemento::Pseudoelemento{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
![Page 40: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/40.jpg)
PseudoElemento ::Before y ::AfterPermiten agregar Prefijos y Sufijos.
![Page 41: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/41.jpg)
PseudoElemento::First-letter y ::FirstLinePermiten modificar la primera letra y la primera fila de un
elemento de texto
![Page 42: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/42.jpg)
Combinacion de Selectores
ElementoPadre ElementoHijo{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
![Page 43: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/43.jpg)
Combinación de Selectores
![Page 44: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/44.jpg)
Colores: SRGB: Standard red, gree, and blue
Keywords Hexadecimal rgb rgba
section{
background:deeppink;
}
#ff0000 red
#00ff00 green
#0000ff blue
rgb(255,0,0) red
rgb(0,255,0) green
rgb(0,0,255) blue
#f00 red
#0f0 green
#00f blue
rgba(255,0,0,0.4) red al 40%
rgba(0,255,0,0.4) green al 40%
rgba(0,0,255,0.4) blue al 40%
255,255,255 255,0,0
0,255,0
0,0,255
0,0,0
black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua
![Page 45: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/45.jpg)
Longuitudes en CSSPermiten establecer el tamaño en:
• Elementos estructurales
• Letras
• Bordes
Medidas absolutasSu valor esta directamente especificado
Medidas relativasSu valor está referenciado con respecto a otro valor
Centímetro (cm) rem
Milímetro (mm) em
pulgada (in) ex
Pixel (px) ch
Punto (pt)
Pica (pc)
![Page 46: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/46.jpg)
Ejemplo en medidas absolutas
![Page 47: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/47.jpg)
Ejemplo en Medida Absoluta: REM
Unidad Absoluta: 12 puntos (solo lo hereda las propiedades font-size y margin-bottom)
1rem= 12px
2rem=24px
3rem=36px
4rem=48px
Lo hereda solo font-size y margin bottom
Height no lo hereda
![Page 48: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/48.jpg)
Ejemplo en Medida Absoluta: EM
Unidad Absoluta: 12 puntos (lo hereda
font-size, height y margin-bottom)
1rem= 12px
2rem=24px
3rem=36px
4rem=48px
Lo hereda font-
size, height y
margin-bottom
![Page 49: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/49.jpg)
Medidas en Porcentajes (%)Son relativas a la medida del Elemento Padre
![Page 50: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/50.jpg)
Propiedad Displayblock, inline, inline-block
display:block;Propiedad por defecto
display:inline;No respeta width ni height
display:inline-block;Respeta width y height
![Page 51: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/51.jpg)
Propiedad Display none
display:block;Propiedad por defecto
display:none;Hereda el element hijo
La clase “invisible” esta
aplicada al div 2 y por lo
tanto la hereda su
element hijo; por lo
tanto no se visualiza ni
el div 2 ni el div 3
![Page 52: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/52.jpg)
Display:flex;Se aplica al element contenedor padre
Partimos de este ejemplo con la propiedad display:block;
(opción por defecto)
![Page 53: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/53.jpg)
Display:flex;Se aplica al element contenedor padre
Modificamos las propiedades
display:flex;
flex-direction:row; (opción por defecto)
![Page 54: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/54.jpg)
Display:flex;Se aplica al element contenedor padre
Modificamos las propiedades
display: flex;
flex-direction: row-reverse;
flex-direction: row-reverse;
Cambia el orden de aparición de los
elementos <article>
![Page 55: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/55.jpg)
Display:flex;Se aplica al element contenedor padre
Modificamos las propiedades
display:flex;
flex-direction:column;
![Page 56: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/56.jpg)
Display:flex;
![Page 57: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/57.jpg)
Propiedades para el Modelo de caja
Las propiedades del Ancho del borde y
padding modifican el ancho del elemento
contenedor
![Page 58: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/58.jpg)
Padding
top right bottom lefttop bottom left right top bottom left right
![Page 59: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/59.jpg)
Border
Dotted Define un borde punteado.
Dashed Define un borde discontinuo.
Solid Define un borde sólido.
Double Define un doble borde.
Groove Define un borde ranurado en 3D. El efecto depende
del valor del color del borde.
Ridge Define un borde acanalado en 3D. El efecto depende
del valor del color del borde.
Inset Define un borde de inserción 3D. El efecto depende
del valor del color del borde.
Outset Define un borde de inicio 3D. El efecto depende del
valor del color del borde.
None No define borde
Hidden Define un borde oculto.
![Page 60: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/60.jpg)
Rounded Borders
![Page 61: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/61.jpg)
box-sizing•content-boxEs el comportamiento CSS por defecto para
el tamaño de la caja (box-sizing).
Si se define el ancho de un elemento en 100
pixeles, la caja del contenido del elemento
tendrá 100 pixeles de ancho, y el ancho de
cualquier borde o relleno ser añadirá al
ancho final desplegado.
•borde-boxLe dice al navegador tomar en cuenta para
cualquier valor que se especifique de borde o de
relleno para el ancho o alto de un elemento.
Es decir, si se define un elemento con un ancho de
100 pixeles. Esos 100 pixeles incluiran cualquier
borde o relleno que se añadan, y la caja de
contenido se encogerá para absorber ese
ancho extra. Esto típicamente hace mucho más
fácil dimensionar elementos.
![Page 62: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/62.jpg)
Margin con elementos display:block;
top right bottom lefttop bottom left right top bottom left right
![Page 63: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/63.jpg)
Margin elementos con valor negativo
![Page 64: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/64.jpg)
position:static; (opción por defecto)
Sigue el flujo natural de los elementos
position:relative;Sigue el flujo natural de los elementos
Position
position:static; no
reconoce las
propiedades top,
right, bottom ni left
position:relative; reconoce las
propriedades top, right, bottom y left
ATENCION!!!!!
Al colocar un valor en left y en right
prevalence left
Y al colocar un valor en top y bottom,
prevalence top
Controla la posición de un objeto
dentro de su element padre
![Page 65: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/65.jpg)
position:fixed; (para elemento hijo)
position:relative; (para elemento padre)
position:absolute; (para elemento hijo)
position:relative; (para elemento padre)
Position
position:absolute; reconoce las
propiedades top, right, bottom y
left dentro del elemento padre
position:relative; para el
element padre
position:fixed; reconoce las
propiedades top, right, bottom y left
dentro de la Ventana del navegador
y no dentro del elemento padre
position:relative; para el
element padre
![Page 66: ¿Qué son HTML y CSS? - GD Capacitación · Respuesta en lenguaje HTML Luego de Procesar la información HTML HTML HEAD BODY META TITLE P TABLAS IMAGENE S Nuestra el RESULTADO en](https://reader030.fdocumento.com/reader030/viewer/2022040114/5e24a0bb27e9c576451da3b6/html5/thumbnails/66.jpg)
float:left; float:right; clear:both;