¿qué son html y css? - gd capacitación · respuesta en lenguaje html luego de procesar la...
TRANSCRIPT
¿Qué son HTML y CSS?
HTML
Establece la estructura y el contenido
CSS
Establece el aspecto
HTML CSS≠
¿Cómo funciona la web?
HTTP Request
HTTP
Response
HTTP: Protocolo de comunicación de Hipertexto
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
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
HTML CSS
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
Sintaxis html
Forma visible del
lenguaje de estructura
y contenido
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>
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
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:
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>
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
Atributos
xxxx
Inicio
atributos
Nombre Valor
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>
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>
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>
Comentarios
<!--Comentarios-->
• Permiten escribir comentarios dentro de código
html que no son visibles por los navegadores
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>
Elementos
Estructurales
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>
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
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>
Elementos Semánticos de HTML5
<header>
</header>
<nav></nav>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside>
</aside>
<footer></footer>
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
Sintaxis CSS
Forma visible del
lenguaje de estilos
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
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
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>
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>
Selector Universal
*{
Propiedad:valor;
}
Aplica las propiedades a todos
los elementos
*{
color:blue;
}
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
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>
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>
Sintaxis PseudoclasesElemento:Pseudoclase{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
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)
PseudoClases para element <form>
PseudoClases para tablas
PseudoClases en listas
Sintaxis PseudoElementos
Elemento::Pseudoelemento{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
PseudoElemento ::Before y ::AfterPermiten agregar Prefijos y Sufijos.
PseudoElemento::First-letter y ::FirstLinePermiten modificar la primera letra y la primera fila de un
elemento de texto
Combinacion de Selectores
ElementoPadre ElementoHijo{
propiedad:valor;
propiedad:valor;
propiedad:valor;
propiedad:valor;
{
Combinación de Selectores
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
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)
Ejemplo en medidas absolutas
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
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
Medidas en Porcentajes (%)Son relativas a la medida del Elemento Padre
Propiedad Displayblock, inline, inline-block
display:block;Propiedad por defecto
display:inline;No respeta width ni height
display:inline-block;Respeta width y height
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
Display:flex;Se aplica al element contenedor padre
Partimos de este ejemplo con la propiedad display:block;
(opción por defecto)
Display:flex;Se aplica al element contenedor padre
Modificamos las propiedades
display:flex;
flex-direction:row; (opción por defecto)
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>
Display:flex;Se aplica al element contenedor padre
Modificamos las propiedades
display:flex;
flex-direction:column;
Display:flex;
Propiedades para el Modelo de caja
Las propiedades del Ancho del borde y
padding modifican el ancho del elemento
contenedor
Padding
top right bottom lefttop bottom left right top bottom left right
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.
Rounded Borders
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.
Margin con elementos display:block;
top right bottom lefttop bottom left right top bottom left right
Margin elementos con valor negativo
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
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
float:left; float:right; clear:both;