HTML Y CSS
ENTENDIENDO LA WEB
WWW nace con la idea de compartir datos a otras computadoras a través de internet, con un
enlace para poder entrar y ver esos datos.
Si nosotros queremos que algo que esta en nuestra compu, tenemos que cargarlo al servidor
para que nos de un URL o enlace para poder entrar y verlo.
NAVEGADORES: es la forma en la que con mi computadora puedo ver lo que tiene el enlace.
Mi compu manda una petición al servidor a través del url y el servidor recibe la petición y
decide que hacer con ella, por lo general dice que si y devuelve la info solicitada. El servidor
nos da un enlace para poder acceder al archivo.
Las paginas web es un conjunto de códigos raros para que los navegadores puedan abrirlos.
LAS PAGINAS WEB SON ARCHIVOS DE TEXTO ESCRITOS EN CODIGOS HTML Y CSS. (LENGUAJES
DONDE ESTA CONSTRUIDA TODA LA PARTE VISUAL DE UNA PAGINA WEB)
ENTENDIENDO HTML Y CSS
HTML BASICO
HTML: HYPER TEXT MARKUP LENGUAGE = LENGUAJE DE MARCADO
Lenguaje interpretado para que pueda funcionar tiene que ser interpretado por otro
programa, lee línea por línea y lo traduce en un resultado final.
Con HTML armamos la estructura de nuestra pagina web. Cada elemento es un bloque o algo
que le da info extra al bloque.
Cada componente de HTML son elementos img, video, titulo. Cada elemento forma parte de la
estructura. Estos elementos se llaman TAGS o ETIQUETAS. Las etiquetas se tienen que cerrar
ya que de esa forma el navegador interpreta que todo lo que continue después del cierre no
pertenece a la etiqueta.
Cuando creamos un elemento de HTML, este tiene propiedades. Y esas propiedades son
declaradas por el navegador: color, tamaño y demás. Con la aparición de css cambio todo ya
que con este establecemos un estándar que todos los navegadores van a cumplir para que
nosotros con css le digamos lo que tiene que cumplir.
Css tiene propiedades que nos permiten modificar las propiedades básicas de html. |
Si tengo varios párrafos en mi página puedo hacer declaraciones generales o particulares.
Herramientas para desarrollar. VISUAL ESTUDIO CODE .
hay que descargarlo desde visual studio code
HTML (Lenguaje de marcado de hipertexto) es el lenguaje estándar utilizado para crear y
diseñar páginas web. Es un lenguaje de marcado que define la estructura y el contenido de una
página web mediante una serie de elementos y etiquetas.
En HTML, los elementos y las etiquetas se utilizan para definir diferentes partes de una página
web, como encabezados, párrafos, imágenes, enlaces, formularios, listas, etc. Estas etiquetas
proporcionan instrucciones al navegador web sobre cómo mostrar el contenido de la página.
Por ejemplo, el siguiente es un ejemplo básico de un documento
<!DOCTYPE html>: Defina el tipo de documento como HTML5.
<html>: Defina el elemento raíz del documento.
<head>: Contiene metadatos y enlaces a scripts y estilos.
<meta>: Proporciona metadatos sobre el documento.
<title>: Defina el título de la página que se muestra en la pestaña del navegador.
<body>: Contiene el contenido visible de la página.
<h1>: Defina un encabezado de nivel 1.
<p>: Defina un párrafo de texto.
<img>: Inserta una imagen en la página.
<a>: Defina un enlace (hipervínculo) a otra página web.
CSS
CSS significa "Cascading Style Sheets" (Hojas de Estilo en Cascada). Es un lenguaje utilizado
para definir el aspecto y el formato del contenido de un documento HTML.
HTML se utiliza para definir la estructura y el contenido de una página web, mientras que CSS
se utiliza para definir cómo se va a presentar ese contenido. Con CSS, puedes definir el color, la
fuente, el tamaño, el espacio, el diseño y otros aspectos visuales de los elementos HTML en
una página web.
Aquí tienes un ejemplo básico de cómo utilizar CSS para cambiar el color del texto en un
documento HTML:
CSS
En este ejemplo, el título ( <h1>) se mostrará en azul y el párrafo ( <p>) se mostrará en rojo,
según las reglas definidas en el archivo CSS.
EDITOR DE CODIGO
Pasos
New folder. Creo una carpeta en el escritorio llamada cursito HTML. Selecciono la carpeta y la
abro en HTML.
Luego voy a extenciones y en search extencion escribo prettier y lo instalo
Esto ayuda a tener el codigo ordenado
Luego indent rainbow y agrega los espacios necesarios en el código
También imagen preview, Para que cuando pase el mouse por encima de la imagen, en el
código, me muestre cuál es .
También live server que sirve para que los cambios que hagamos en el servidor se muestren en
tiempo real
Palenight theme es para modificar la paleta de colores del código.
ESTRUCTURA DE UNA ETIQUETA
LO PRIMERO QUE HAY QUE HACER ES CREAR EN VISUAL STUDIO CODE UN ARCHIVO LLAMADO
INDEX.HTML
Ir a la carpeta en el escritorio y donde dice vista darle a donde dice elementos ocultos y
extensiones de nombre de archivo.
Se llama índex por que la mayoría los servidores están configurados para leer índex que
significa índice y el . html es el formato. Las paginas web termina en html.
Todo funciona por etiquetas y se abren y se cierran asi <tag> ACA ADENTRO VA EL
CONTENIDO DE LA ETIQUETA </tag>
Nombre de la etiqueta : Es el nombre que define el tipo de elemento que se está creando,
como <p>para un párrafo, <h1>para un encabezado de nivel 1, <a>para un enlace, etc.
Atributos : Son opcionales y proporcionan información adicional sobre el elemento. Los
atributos se escriben dentro del par de etiquetas y pueden tener un valor asociado. Por
ejemplo, el atributo hrefen un enlace ( <a>) define la URL a la que enlaza el hipervínculo.
Contenido de la etiqueta: Es el texto o cualquier otro elemento HTML que esté contenido
dentro de las etiquetas de apertura y cierre.
TODAS LAS ETIQUETAS SIEMPRE TIENEN UNA FUNCION muy específica, por ahí hay etiquetas
que son muy parecidas pero semánticamente son muy diferentes.
Con la configuración anterior ya la etiqueta se escribe sola en su auto cierre y el cursor se ubica
solo en el lugar donde tiene que ir el contenido.
PARRAFOS Y ENCABEZADOS.
SI ESCRIBIMOS HTML:5 SE AUTOESCRIBE LA ESTRUCTURA DE HTML.
<!DOCTYPE html>: Defina el tipo de documento como HTML5.
<html>: Defina el elemento raíz del documento.
<head>: Contiene metadatos y enlaces a scripts y estilos. No es visible
<meta>: Proporciona metadatos sobre el documento.
<title>: Defina el título de la página que se muestra en la pestaña del navegador.
<body>: Contiene el contenido visible de la página. Toda la pagina web se construye dentro
de body.
PARRAFO - <p></P>
Se utilizan para una idea especifica, cada párrafo que nosotros escribimos tiene que tenes un
concepto puntual.
ENCABEZADO - H1-H6
<H1> TITULO PRINCIPAL </H1>
<H2> SUBTITULO 1</H2>
<H3> SUBTITULO 2</H3>
<H4> SUBTITULO 3</H4>
<H5> SUBTITULO 4</H5>
<H6> SUBTITULO 5</H6>
La otra forma de escribir rápido los H del 1 al 6 es poniendo el comando h$*6 (emmet) , de
esta forma le digo a vsc que me escriba de manera correlativa los encabezados del 1 al 6 e
manera ordenada.
El H1 se escribe una sola vez por pagina y debe ser lo mas descriptivo posible, esto es por SEO
que es por posicionamiento web. Es la etiqueta mas importante de la pagina
Lo demás H (2-6) se pueden usar la cantidad de veces que queramos porque son títulos que le
vamos dando a diferentes secciones.
Listas
ORDENADAS DESORDENADAS
Se escriben como Se escriben como
<ol> </ol> (order list) <ul> </ul> (unorder list)
A su vez dento mini
elementitos <li>
</li> (list item)
Asi se escribe en el codigo Asi se escribe en el codigo
asi se ve en la pagina Asi se ve en la pagina
La diferencia es que uno tiene
números y el otro tiene ítems.
ENLACES / HIPERVINCULOS
ETIQUETA <A> </A>
Los enlaces, también conocidos como hipervínculos o links, son elementos HTML que permiten
a los usuarios navegar de una página web a otra o dentro de la misma página. Los enlaces son
una parte fundamental de la web, ya que permiten la navegación entre diferentes páginas y
recursos en línea.
Los enlaces, también conocidos como hipervínculos o links, son elementos HTML que permiten
a los usuarios navegar de una página web a otra o dentro de la misma página. Los enlaces son
una parte fundamental de la web, ya que permiten la navegación entre diferentes páginas y
recursos en línea.
En HTML, los enlaces se crean utilizando la etiqueta <a>(anchor), y se definen mediante el
atributo href (hiperreferencia), que especifica la URL del destino.
Para poder clickear lo que esta dentro de la etiqueta en la pagina web, debemos en el código
colocarle un atributo a la etiqueta A.
ATRIBUTO: son características de los elementos que se ponen directamente en HTML. La
etiqueta lo que debe hacer es redirigirme a un lugar de la web y para eso se utiliza el atributo
HREF, vuelve funcional a la etiqueta.
<a> es la etiqueta de apertura del enlace.
Href es el atributo que especifica la URL de destino del enlace.
"https://www.ejemplo.com"es la URL a la que apunta el enlace.
Este es un enlace de ejemplo es el texto del enlace que se mostrará en la página.
OJO!!!
SI POR EJEMPLO ESCRIBO
<a href="www.ejemplo.com">Este es un enlace de ejemplo</a> Esto lo que va a hacer es
buscar dentro de mi directorio donde tengo alojado esto a ver si hay una propia carpeta
llamada asi.
EN CAMBIO
<a href="https://www.ejemplo.com">Este es un enlace de ejemplo</a> Escribiendo esto lo
que hace es buscar un enlace externo. Ahí si me manda al link de la web.
COMO MOVERME ENTRE MIS PROPIAS PAGINAS, ASOCIANDOLAS UNAS CON OTRAS.
Tengo que crear dentro de la carpeta varios archivos con distintos enlaces dentro, por
ejemplo:
Luego dentro de cada carpeta hacer referencia con la etiqueta A al enlace del archivo al que
quiero que me dirija.
Si quiero que el archivo llamado ENLACE 1 me lleve al archivo HTML, tenge escribir lo siguiente
Si quiero que el archivo llamado ENLACE 2 me lleve al archivo ENLACE 1, tenge escribir lo
siguiente
¿¿¿Como hacer para que el enlace se abra en una nueva pestaña, sin cerrar la pestaña que
tenemos abierta??
Hay que agregarle el atributo llamado TARGET=”_blank” quedando asi:
<a href=”enlaces_2.html” target=”_blank”> segundo enlace </a>
Otro atributo importante es TITLE: lo que nos pide es información de la pagina, por ende
cuando pasamos el mouse por encima del enlace en la pagina, nos va a salir un cartel
brindando la información que pusimos en title.
EN HTML SE VE ASI
En la pagina se ve asi:
No solo funciona con los enlaces sino también con cualquier elemento, por ejemplo en
formularios, títulos, etc. No se suele usar mucho pero esta bueno por una cuestión de
accesibilidad a personas por ejemplo ciegas.
IMÁGENES
Las imágenes son un tipo de etiqueta de AUTOCIERRE.
¿Como hacer para cargar una imagen en html? Tengo que usar el atriburo SOURCE: “src”
<img src=” nombre de la imagen”> NO NECESITA UNA ETIQUETA DE CIERRE </IMG>
¿QUE PASA SI LA IMAGEN NO CARG POR UN ERROR DEL SERVIDOR?
El usuario debe saber si pasa el mouse por encima de la imagen que no cargo, por lo menos de
que trata la imagen. Para eso debemos utilizar dos cosas:
- Primero es la etiqueta ALT: (alternative) que nos permite escribir un texto describirdo
la imagen, y esto solamente va a cargar si la imagen no se carga por error.
El nombre del archivo es NY.WEBP, y por error de tipeo no se va a mostrar. Por ende se va
a ver asi:
La imagen cortada con la descripción que nosotros le proporcionamos.
En cambio si el archivo no tiene errores, se va a mostrar la imagen y el texto va a
desaparecer.
En HTML
EN LA WEB:
Tambien nos sirve para posicionar nuestra pagina web por el Seo, por que describe nuestra
imagen. Entonces si yo busco en los motores de búsqueda, por ejemplo, imagen de nueva
york, como fue escrito en el código, va a ser una de las primeras paginas que se muestre.
Hay que crear carpetas por tipos de contenido para que el código este mas ordenado
¿Como hago para colocar una imagen que está dentro de una carpeta?
En este caso tenemos la carpeta que se llama SOY DALTO y
dentro de ella tiene una carpeta llmada IMG (con dos
archivos de imagen) y tres index.
De esta manera para traer una img que esta dentro de una carpeta, hago referencia al nombre
de la carpeta donde se encuentra la imagen, barra (/) y el nombre que tiene la imagen.
RUTAS
HAY DOS TIPOS DE RUTAS:
- ABSOLUTAS, no importa desde donde estemos o donde la miremos, es absoluta.
Especifican la relación con la raíz del sistema de archivos o la raíz del sitio web incluyen
el equema http// o https//, el nombre del dominio y la ruta completa del recurso.
- RELATIVAS: dependiedo de donde se encuentre mi elemento, tenemos que llamarlo
de distintas formas. Por ejemplo archivos que están dentro de otra carpeta.
<img src:”img/ny.webp”> - el archivo ny.webp esta dentro de la carpeta
img.
EN EL CASO DE QUE QUIERA VOLVERME UNA CARPETA PARA ATRÁS PARA LLAMAR A
UN ARCHIVO QUE ESTA FUERA DE MI CARPETA, TENGO QUE PONER:
<a href=” ../enlaces_2.html” target=”_blank”> segundo enlace </a> pero para usar
esto, el archivo si o si tiene que estar en otra carpeta
FORMULARIOS
Son una de las cosas mas importantes de desarrollo web. Es una de las formas que tenemos
nosotros de pedirle datos al usuario, son distintos imputs.
Se usa la etiqueta <form> </form>
Y dentro de FORM se coloca la etiqueta imput, que esta es la forma de decirle al usuario, por
favor dame un dato. Y tengo que especificar que tipo de imput voy a poner, por ejemplo
Type … y al mismo tiempo que tipo de type voy a elegir:
1 Text: es el mas común, y es para escribir un texto.
2 Button
3 Checkbox: para tildar o destildar
4 Color: nos pide que seleccionemos un color
5 Date: fecha
6 Submit: es el botón enviar
7 Email: es igual que un texto pero solo es para email.
8 Pasword: es para poner una contraseña y que no se vea
9 Radio: similar al checkbox pero sol puedo seleccionar una de todas
las opciones
10 File: permite seleccionar archivo.
Lo que hace form es recopilar todos los datos del usuario y hacer que se manden a un servidor
y base de datos.
Hay 4 atributos muy importantes:
1 Required: es un atributo de funcionalidad. obliga al usuario a completar ciertos
campos (agregarle el atributo minlength, es para poner un mínimo de
caracteres que tiene que escribir el usuario)
2 Name: configuración interna. definir como se va a llamar el campo, entonces
cuando el servidor reciba los datos de cierto campo saber a que se refiere.
3 Placeholder: escribe un breve texto para dar un ejemplo de lo que hay que
escribir. Desaparece cuando el usuario empieza a escribir. No todos los imputs
tienen placeholder.
4 Value: lo que recibe el servidor.
INTRODUCCION A CSS
Css significa hojas de estilos en cascada. Sirve para darle estilo a los elementos de HTML. No se
trata de modificar los elementos por separado, si no lo que importa es la relación que tienen
los elementos. Lo utilizamos para agarrar cada componente de html y darle un estilo. Se trata
de entender como funciona cada propiedad y cada combinación.
La forma en la que escribimos css es distinta a html.
Creamos la carpeta
Creamos en open folder una carpeta llamada css.
Creamos un archivo llamado index.html porque css no existe sin html.
Creamos la estructura básica de HTML. (!)
Creamos un titulo y solo un párrafo (h1 y p)
Hay 3 formas de escribir css:
Estilos en línea: se llama así por que le da estilo en una sola línea de código. style
esto nos dice que vamos a acceder a las propiedades de css y quiero modificarlas.
Tiene varias limitaciones: que es una mala practica por que no podemos mezclar dos
códigos por que no se le puede dar una buena lectura al código sin que se me obstruya
algo que no tiene que ver con lo que yo quiero leer Por ejemplo:
La segunda forma es utilizando style no como atributo sino como etiqueta. Esa forma
es mejor que la anterior pero tampoco se recomienda, lo que si se recomienda es
tener todo en archivos separados por que normalmente las propiedades que les
damos no son poquitas como las que tenemos en el ejemplo de abajo. Un archivo
puede ser mucho mas grande que esto.
La tercera forma y la mas recomendada es usar una etiqueta especial llamada link, que
justamente link lo que hace es linkear una hoja de estilos, y se utiliza en el HEAD…
Link rel(atributo) =”stylesheet(hojas de estilo) ”href ( atributo) =”styles.css(nombre del
archivo al que vamos a vincular”
Rel viene de relationsheep. Nos dice que el archivo que vamos a vincular que
relación tiene con este archivo html? Vamos a vincular una hoja de estilo, un archivo
para definir cada una de las propiedades html.
Vamos a crear el archivo:
1. New file: styles.css
Ahora en la hoja de styles.css ya puedo empezar a modificar mis etiquetas
html con estilos css.
Quedando asi
y si esto se cambia de color, quiere decir que la hoja de estilos esta vinculada correctamente.
Esta es la forma recomendada de usar css.
Hay muchas formas de seleccionar elementos, una es por el nombre del elemento: por
ejemplo, con la letra <p> seleccionamos todos los elementos <p> del archivo html.
La forma mas básica y tradicional es por el nombre del elemento, después usamos llaves que
significa que abrimos un bloque de declaraciones y luego colocamos la propiedad que vamos a
modificar y el valor que vamos a modificar.
<P> es el elemento
{} apertura y cierre del bloque de declaraciones
Color: propiedad que vamos a modificar (color es un ejemplo de propiedad)
Pink: valor de la propiedad (Pink es un ejemplo de color)
SELECTORES BASICOS
Hace referencia a la forma que tenemos de seleccionar uno o varios elementos dentro de css.
Si yo abro el bloque de propiedades y
selecciono la etiqueta LI y le modifico el color, me
va a modificar todas las etiquetas LI
QUEDANDOME ASI
¿Entonces que debo hacer para ser más específico?
Usar clases, que nos permite asignarle un nombre puntual y permite identificarlos unos de
otros.
Para eso usamos el atributo CLASS y le ponemos por ejemplo el nombre faltante, entonces con
esto ya distinguimos cada elemento por una clase.
RED
HTML CSS
Podemos utilizar las clases para muchos elementos y también
repetirlos en varios elementos que queremos que pertenezcan
a la misma clase.
Cuales la mejor forma de nombrar una clase? Tiene que ser de fácil lectura para que otro
desarrollador entienda a que nos estamos refiriendo.
Se utiliza el (.) para llamar al elemento en css, para poder identificarlo.
Hay otra forma de seleccionar un elemento y es por selectores ID y se usa para un solo
elemento en toda la pagina.
Para llamar el ID usamos # y el nombre del id. Por ejemplo:
HTML
CSS RED
¿Se pueden usar varios ID? SI se puede, pero no es lo recomendable ya que no es una buena
práctica, porque esto le dice al navegador que este va a ser un identificador único de este
elemento. Por eso no podemos usar varios id.
PROPIEDADES DE TEXTO.
La primera propiedad que solemos utilizar es la de color, con esta definimos el color del texto
que queremos modificar. Y luego de colocar el valor a la propiedad siempre va un (; )
La segunda propiedad es la de fuente( FONT-FAMILY) y ahí se despliega una cantidad
interminable de tipografías. Por ejemplo
FONT-FAMILY: SANS-SERIF;
Esta forma escrita arriba es una de las formas que podemos utilizar para escribir. La segunda
de las formas es usando comillas en el valor de la fuente y funciona igual. Esto funciona cuando
el nombre de la tipografia tiene mas de una palabra tiene que ir entre comillas para que no nos
largue error por el espacio que tiene una palabra y la otra. Y sino se puede escribir con guion
medio (-).
DATO IMPORTANTE, luego de poner el tipo de fuente, puedo colocar coma y colocar otra
tipografia. Esto es por que si la primera no esta disponible, por defecto se usa la segunda y si la
segunda no carga, puedo ir poniendo mas.
CON ERROR
SIN ERROR.
CON GUION MEDIO.
Luego tenemos FONT SIZE. Lo que hace es cambiar el tamaño de la letra. Por defecto tiene 16
px.
FONT-WEIGHT es para marcar el grosor de la letra. Lo que haríamos normalmente para poner
la letra en negrita es en html poner el texto dentro de la etiqueta <b></b> pero si en vez de
hacer eso usamos el valor bold en css el efecto es el mismo. De hecho se recomienda hacerlo
en CSS y que no lo hagamos con la etiqueta B. En todo caso si tenemos que resaltar una
palabra dentro de un texto tenemos que usar la etiqueta strong, que funciona exactamente
igual que B solamente que la diferencia es que el navegador le va a dar mas importancia en
CEO Por Google.
Font-weight tiene los valores que van desde el 100 al 900 que esto define el grosor de
tipografia. Dentro de esos valores tenemos BOLD Y BOLDER. Bold establece un grosor de 700 y
BOLDER nos lleva a un escalon mas arriba, un poco mas gruesa.
FONT STYLE:
ITALIC: lo que hace es inclinar la letra y ponerla en cursiva, inclinarla entre 8 y 12
grados.
NORMAL: por defecto.
OBLIQUE: la inclina un poco muy similar a italic pero no es la misma .
TEXT ALIGN: alinea el texto dentro de su contenedor
LEFT: valor por defecto de derecha a izquierda.
RIGHT: de izquierda a derecha.
CENTER: nos da centro, ni a la izquierda ni a la derecha. Por lo general lo usamos en los
títulos. Ahora si la caja contenedora es igual de grande que la letra que utilicemos, no
importa a donde lo alineemos.
JUSTIFY: que todas las las letras empiecen y terminen en la misma línea.
START: quiero que la letra se alinee a la izquierda.
END: que el texto se alinee a la derecha.
TEXT DECORATION:
Underline; subrayado por debajo
OVERLINE: subrayado por arriba.
LINE-THROUGH: coloca un tachado al texto.
(dato importante, si quiero usar dos o mas valores, escribo uno al lado del otro
separado por espacio y terminando con ; )
LA PROPIEDAD POR DEFECTO ES NONE.
LINE-HEIGHT: define cual va a ser el tamaño de la línea. El espaciado entre las líneas del
párrafo. Cuanto de alto va a tener la línea.
LETTER-SPACING: define cuan separadas van a estar las letras entre si.
Text-transform: define si quiero que el texto este en mayúscula o minúscula.
Uppercase: todo el texto en mayúscula.
Lowercase: todo el texto en minúscula.
Capitalize: a cada primera letra de una palabra le agrega mayúscula.
TIPOGRAFIAS EXTERNAS.
Como traer tipografías externas a nuestro archivo html.
La primera es Google fonts y elegimos el tipo de tipografia que necesitamos usar.
Seleccionamos la versión que quiero , aprieto select y me permite seleccionarla, ( es un
link bien largo) copio todo y lo pego en el archivo html, abajo del link que vincula el
archivo css con html. Y luego en el archivo css en Font family escribo el nombre de la
tipografia que elegi por ejemplo MONSERRAT y ahí se modifica.
HTML
CSS
Segunda forma es configurar nuestras propias tipógrafIas
Es creando un archivo de tipografías llamado por ejemplo fonts.css y esto nos va a
permitirnos definir un nuevo valor para una nueva propiedad.
Escibimos @font-face{
Font-family: (escribimos el nombre que le vamos a poner a la nueva
tipografia) “jamila” (puede llamarse como se nos de la gana)
Src: url() ; aca tenemos que escribir donde esta almacenada nuestra
tipografia y cual es la que vamos a usar. Podemos descargar el archivo de Google
fonts , elijo la tiporafia, descargo la familia de letras (download family) y ahí se
descarga la tipografia completa. Dejamos un espacio y ponemos FORMAT(“truetype)
el nombre del formato
Font-weight: 400 por ejemplo
Al archivo lo abrimos y tiene que aparecer la carpeta con las tipografías. Copio y pego
la carpeta
dentro de la
carpeta que
usamos para
nuestro html y
css
Y asi sucesivamente puedo ir creando miles y miles de tipografías externas configuradas.
2:53:46
Git
Maneja grandes proyectos, es seguro y podemos hacer de todo con las carpetas.
DESCARGAR GIT
Entrar a la pagina de git y desargarlo.
Vamos a trabajar con git Bush. Se abre la consola…
El repo de git y git hub tiene que tener el mismo mail configurado
Tres tipos comunes de jerarquias
Sistema ( aplica para toda la computadora) Siempre se le da
Global ( aplica para todos los repositorios de un usuario ) prioridad a lo
Local (nuestro lugar de trabajo, lo que esta adentro de una carpeta. Es solo aplicable mas especifico
para el repositorio donde estamos trabajando. Tiene la prioridad por sobre todo)
Una vez instalado tenemos que configurar nuestro alias y nuestro correo electrónico.
Configurar globalmente el Nombre del usuario
$ git config -- global user.name “jamila”
Configurar globalmente el EMAIL del usuario
$ git config -- global user.email “jamilakademian@gmail.com”
Si queremos ver todas las configuraciones que podemos hacer o que ya estan listas por
defecto
$git config -- list
Si queremos ver todas las configuraciones globales
$git config – global – list
Si queremos ver todas las configuraciones locales
$git config – local -- list
LIMPIAR CONSOLA
$clear
CONFIGURAR EL EDITOR (cuando bajamos un archivo y lo modificamos, tenemos que escribir
que es lo que se modifico para que cuando otro desarrollador trabaje en el epa que se hizo)
$git config -- global core.editor “code --wait” esto hace que cada cambio se ejecute cuando
cerremos el editor de codigo
CONFIGRAR EL COLOR
$gt config—global color.ui true
CONFIGURACION PARA SUBIR Y BAJAR ARCHIVOS DE UN REPOSITORIO
$git config - - global core.autocrlf crlf = cariage return line fed ( es como cuando las
maquinas de escribir terminaban la linea y volvía al comienzo y bajaba la línea)
EN LINUX Y MAC ES AUTOMATICO, EN WINDOWS NO ASI QUE HAY DOS FORMAS: \R \N
EN LOS DEMAS SISTEMAS ES \N
Esto es importante ya que si nosotros no cnfiguramos CRLF podemos tener errores xq si
estoy en Windows e internamente tenemos \r\n y Linux \ n, cuando lo suba a un sistema de
windows pero lo descargue de Linux o mac, voy a tener errores xq hay un problema de
compatibilidad. Lo que ha que hacer es que el servidor tenga \n cuando lo subo y cada vez
que lo baje tenga \r\n si lo uso desde Windows , y si lo uso desde mac Linux tenga \n
COMO SE CONFIGURA ESTO?
WINDOWS $git config—global core.autocrlf true
MAC/LINUX $git config – global core.autocrlf imput
PRIMEROS PASOS EN GIT
QUE ES UN REPOSITORIO? ESPACIO PARA CREAR, GUARDAR ARCHIVOS, PROYECTOS, ETC, Y
NOS PERMITE TENER UN CONTROL DE VERSIONES, PODER VOLVER A VERSIONES ANTERIORES.
Git tiene tres estados principales en los que se pueden encontrar tus archivos:
confirmado (committed): significa que los datos están almacenados de manera segura
en tu base de datos local.
modificado (modified) : significa que has modificado el archivo pero todavía no lo has
confirmado a tu base de datos.
preparado (staged): significa que has marcado un archivo modificado en su versión actual
para que vaya en tu próxima confirmación.
Esto nos lleva a las tres secciones principales de un proyecto de Git:
El directorio de Git (Git directory)
directorio de trabajo (working directory)
área de preparación (staging area).
Como creamos un repositrio en git:
Nos movemos a ruta donde queremos crear el repositorio. Lo solemos hacer con cd
