/*

gothams2.newstart@gmail.com
goth@ms2KK

contrase�a oracle : 123

elpro321@yopmail.com
elpro321
*/

h1...h6 : encabezados
p : p�rrafos
br [break]: salto de linea (no se usa)
lorem : codigo de lorem ipson , genera codigo de muestra.
blockquote : etiqueta para escribir testimonios
em : etiqueta para cambiar el tipo de letra a cursiva (no se usa)
strong : etiqueta para resaltar (no se usa mucho)
control + d : selecciona las mismas etiquetas

investigar entidades en html

son codigos que generan simbolos.

a : etiqueta de enlace
href="" : se le ingresa el nombre de otro archivo . html(hacia donde se va a
dirigir) y direcciones de sitios web(link).
ejemplo:
<a href="https://netflix.com">Ir a Netflix</a>

target="_blank" : sirve para abrir un enlace en otra pesta�a

ejemplo:
<a target="_blank" href="https://netflix.com">Ir a Netflix</a>

target="_self" : sirve para abrir un enlace en la misma pesta�a

ejemplo:
<a target="_self" href="https://netflix.com">Ir a Netflix</a>

# : simula un enlace en el href

ejemplo
<a href="#">Ir a Netflix</a>

img : etiqueta para imagenes

<img scr="" alt="" >
no tiene etiqueta de cierre

scr="": se le agrega la ubicacion de la imagen

ejemplo
<img scr="img/logo.svg"

alt="" : se le agrega un texto que se mostrar� si la imagen no se muestr� o no

existe
ejemplo
<img scr=" " alt="logotipo de bines raices"

<a href="/"> : sirve para llevarte hasta la pagina principal, se cierra al final
del logo de la pag . Esto mejora la experiencia de usuario ya que al dar click los
lleva hasta la pagina principal
ejemplo
<a href="/">
<img scr="img/logo.svg" alt="logo de bees raices">
</a>

formato .svg : formato que te permite modificar el tama�o de la imagen y no se

distorciona.

investigar sobre el formato .svg y sobre adobe ilustrator

programas para generar imagenes .svg:

adobe ilustator cs6
adobe XD

tambien funcionan los formatos .jpg y .png

tips:
*la etiqueta img no tiene etiqueta de cierre.
*src es source y es la imagen que se va a utilizar.
*se le puede agregar un enlace sobre una imagen.
*para formatos .svg se recomienda usar vectores con adobe ilustrator o adobe XD
* .jpg y .png son formatos que tambien soporta una pagina web

investigar sobre html sem�ntico

estiquetas para estructurado y/o agrupaci�n

<header> --------> encabesado
se utiliza cuando hay contenido de encabezado.

<header>
<h1>dqwfdjdjqfqwjewf</h1>
.
.
.
</header>

<nav> --------> navegacion

se utiliza cuando se tiene una navegacion
<nav>
<a href="dkwiqf.html">dqwdqw</a>
.
.
.
</nav>

<section>
se uliliza cuando :
*el primer hijo sea un encabezado (h1,h2,h3 ..... h6).
*cuando hay un cambio de contenido o seccion.
 <section>
<h2>qwfqwfQWF</h2>
.
.
.
</section>

<div>
etiqueta para agrupar contenido dentro de otro contenido
<section>
<div>
<img src="img/lololo.png alt="lololo">
<h3>LOLOLOL</h3>
<p>dq�whfqw�hfqwhfqwf</p>
<a href="lololo.html">LOLOLOLO</a>
</div>
</section>

<main>
etiqueta para agrupar el contenido principal, solo se tiene un main por p�gina.

<main>
<div>
<img src="img/lololo.png alt="lololo">
<h3>LOLOLOL</h3>
<p>dq�whfqw�hfqwhfqwf</p>
<a href="lololo.html">LOLOLOLO</a>
</div>
</main>

<article>
se utiliza para una entrada de blog , a diferencia del section , este habla por si
solo en cambio el section va relacionado con otros elementos

<article>
<img src="img/lololo.png alt="lololo">
<h3>LOLOLOL</h3>
<p>dq�whfqw�hfqwhfqwf</p>
<p>dq�whfqw�hfqwhfqwf</p>
</article>

<footer>
etiqueta que funciona como la etiqueta <header> , pero se usa para la parte
inferior.

<footer>
<nav>
<a href="nosotros.html">NOSOTROS</a>
<a href="anuncios.html">ANUNCIOS</a>
<a href="blog.html">BLOG</a>
<a href="contactanos.html">CONTACTANOS</a>
</nav>
<p>Todos los Derechos Reservados 2019</p>
</footer>

CSS (HOJAS DE ESTILO EN CASCADA)

<style>
etiqueta de estilos
no se usa mucho

<link>
etiquta que enlaza una hoja de estilos con un archivo html

<link refl"stylesheet" href="">

refl"stylesheet" : se refiere a una hoja de estilos

href="" : se ingresa la ubicacion de la hoja de estilo

ejemplo
<link refl"stylesheet" href="css/style.css">

anatomia de un selector en css

h1{
color: blue;
}

h1 <------ selector : elemento al que se le va a aplicar las condiciones de css

{} <------ llaves : todo lo que est� estre estas llaves es lo que se va a plicar
como estilos hacia el selector.

color <------ propiedad : propiedad de css que se va a plicar

blue <----- valor : es el valor que se le dar� al dise�o , el valor tiene que ver
mucho con lo que va en la propiedad
ejemplo

color : blue (si)

color : 12px (no)

id : sirven para aplicar estilos a unicamente un atributo en especifico , se

pueden tener multiples id pero con nombres direfentes.
ejemplo
<header id="site-header">
.
.
.
</header>

como hay varios header en el html, si no se usa el id en un atributo en especifico

se aplicaria el estilo para todos los header.

para llamarlo en el css se usa el #

ejemplo

#site-header {
background-color: red;
}

class="" ---> clases : funcionan igual que los id , pero en css se les llama con un
(.), ademas son reutilizables.
ejemplo
<h1 class="encabezado">
.
.
.
</h1>

css
.encabezado{
color: darkred;
}

escribir 2 clases juntas : la manera de escribirlas es asi:

<h3 class="encabezado mayusculas"
solo se aplican entre clases pero no entre id

.mayuscula{
text-transform: uppercase; <----- transforma el texto a mayusculas
}

propiedades de css
usando dos clases juntas
.site-header.inicio{

}
para aplicar los estilos a ambas clases

background: url(../img/header.jpg)
esto agrega una imagen de fondo, se le agrega (../) para que salga de la carpeta de
css.

height: 800px;
esto se usa para aumentar la altura de la imagen.

height: 100vh;
(viewport height) detecta y toma la altura de tu pantalla, cubre toda la altura de
la pantalla.

est� funcion se ve mal al momento de reducir el tama�o de la pantalla , ya que la

imagen toma un tama�o muy peque�o , por ende se debe agregar un tama�o minimo para
la imagen.

min-height: 600px;
agrega un tama�o minimo de 600px .

background-position: center center;

muestra la imagen desde el centro ademas expande el contenido.

background-size: cover;
fuerza a que la imagen tome todo el alto y ancho disponible guardando las
proporciones.

max-witdth: 1200px; (altura m�xima)

tomar� todo el espacio disponible siempre y cuando no se pase de 1200px.

margin-left: auto;
el tama�o del margen hacia la izquierda es autom�tico.

margin-right: auto;
el tama�o del margen hacia la derecha es autom�tico.
otra manera de usar la propiedad margin
margin: 0 auto 0 auto;
se toma de manera horaria y como si fuera un reloj.

0: ser�a las 12
margen de arriba 0px.

auto: seria las 3

margen de la derecha automatico.

0: seria las 6
margen hacia abajo de 0px.

auto: seria las 9

margen hacia la izquierda automatico.

flex box:
sirve para posicionar elementos

se habilita agregando display:flex en la clase.

.barra{
display: flex;
}

de esta forma coloca el logotipo del lado izquierdo y el men� del lado derecho

existen algunas propiedades para alinear horizontalmente.

justify-content: flex-end;
posiciona los elementos hacia el lado derecho.

justify-content: flex-start;
posiciona los elementos hacia el lado izquierdo.

justify-content: center;
muestra el contenido al centro

justify-content: space-around;
distribuye los elementos de manera proporcional entre los objetos y entre sus
margenes.

justify-content: space-evenly;
distribuye los elementos de manera proporcional dejando cierto espacio.

justify-content: space-between;
distribuye los elementos en los extremos pero de manera proporcional.

padding-top:30px;
establece un espacio de relleno de 30px en la parte superior del elemento.

padding: espacio hacia adentro del elemento.

margin: separacion con otro elemento hacia afuera.

dando estilos a los enlaces

.navegacion a {
}

.navegacion a : esto har� que los enlaces a de la clase navegacion tengan el mismo
estilo, sin necesidad de agregar el mismo nombre de la clase a todos los enlaces.

color: white;
colocar� un color blanco en el texto;

#ffffff = blanco en hexagesimal

tambien se puede escribir como:

color: #ffffff;

rgba: red green blu alpha

color: rgba(255,255,255,1)

1 = significa la transparencia que tendra el color , esto va desde el 0 hasta el 1

(cuenta los decimales).

color: rgb(255,255,255);

text-decoration: none
sirve para eliminar la linea de subrayado que tiene el men�.

font-size: 18px;
sirve para agrandar el tama�o de la fuente(letra).

margin-right: 20px;
sirve para dar separacion con los elementos.

esto deja un margen en el ultimo elemento que lo vuelve desproporcionado

se debe aplicar un margin:0 al ultimo elemento

.navegacin a:last-of-type{
margin: 0;
}

a:last-of-type
es un pseudoselector, son propiedades muy utiles que permiten selectionar el ultimo
elemento asi como tambien el primer elemento (a:frst-of-type).

.navegacin a:hover{

a:hover
es el pseudoselector mas com�n para enlaces.
aplica un estilo cuando el usuario da un hover (es decir seleccione el elemento).

color: #71B100;
un color en hexadesimal