¿qué son html y css? - gd capacitación · respuesta en lenguaje html luego de procesar la...

¿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



• 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>






<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


Selectores para atributo ID


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>

http://www.xxx.com.ar/

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





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)


Modificamos las propiedades

display:flex;

flex-direction:row; (opción por defecto)



display: flex;

flex-direction: row-reverse;

flex-direction: row-reverse;

Cambia el orden de aparición de los

elementos <article>



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


Inset Define un borde de inserción 3D. El efecto depende


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;

¿qué son html y css? - gd capacitación · respuesta en lenguaje html luego de procesar la...

Documents