APUNTS-GITHUB-MARKDOWN-HTML-CSS
INTRODUCCIÓ: Primer de tot hem hagut d’instal·lar el GitHub i el VisualStudioCode per poder treballar els següents llenguatges de marques explicats a clase:
-
GITHUB
-
MARKDOWN
-
HTML
-
CSS
1. GITHUB
GitHub, és una pàgina web que serveix per crear i guardar els repositoris que anem creant. També amb el CMD (Símbol del Sistema) del nostre equip podem fer una cópia local per treballar des del teu equip i no des del navegador. Llista de comandos
Per crear un repositori hem de seguir els àssos següents:
- Primer de tot anar l’apartat de “repositoris” i des de allà donar-li a “nou”, per així crear un repositori nou.
- Despres una vegada l’estem creant, escrivim el nom que li volguem posar al repositori.
- El deixem en estat públic.
- Seleccionem la opció “Add a README file”.
- Baixem fins a baix de la pàgina i li donem a “crear el repositori”.
2. VISUAL STUDIO CODE
Per a descarregar-ho hem accedit a la pàgina web de Visual Studio code, i ens hem descarregat la versió de 64 bits.
Per obrir una fulla de Visual Studio Code es fa de la següent forma:
- A la part superior esquerra li donem a la pestanya de “Archivo”, i seguit li posem el nom a l’arxiu que volguem.
3. MARKDOWN
El primer llenguatge de marques que hem vist ha sigut Markdown.
1) Encapçalats
En Markdown hi ha 6 tipus diferents d’encapçalats, que són de més gran a més petit. Per a posar un encapçalat el que hem de fer és posar una etiqueta (#) al principi de cada linia. Segons el nombre d’etiquetes que posis a l’inici, la grandària de l’encapçalat serà més gran o més petit. Diferents tipus d’encpçalats:
Encapçalat 1
Encapçalat 2
Encapçalat 3
Encapçalat 4
Encapçalat 5
Encapçalat 6
2) Negreta o cursiva
Per a posar negreta el que hem de fer és posar dues barres baixes al principi i final de la frase o paraula, com per exemple en el nostre cas ALEX . D’altra banda també tenim la cursiva que en aquest cas es posa amb un asteric al principi i al final de la frase o paraula, com ara ALEX . Per últim tenim la combinació d’aquestes dues que es fa posant primer les barres baixes i seguidament l’astérisc, per exemple ALEX .
3) Imatges
També podem introduir imatges utilitzant un signe d’exclamació i seguit obrim un claudator i dins poses el nom que vulguis per la foto, una vegada tancat el claudator obres un parentesi i poses el link de la imatge, desprès dins del mateix parentesi, entre comes posem una nota que volem que es mostri quan fem clic. Com en l’exemple següent:
4) Llistes
Hi ha 2 tipus de llistes per fer una llista ordenada, escrivim el numero amb un punt i seguit d’un espai per començar a escriure, d’aquesta manera:
- ALEX
- HOLA
- ADEU
L’altre tipus és posant un esterisc al pincipi, d’aquesta forma:
- ALEX
- HOLA
- ADEU
5) Taules
Per crear taula utilitzem la barra vertical, al principi i al final de la paraula o el text, també tenim 3 tipus d’aliniats, d’aquesta manera:
| Encapçalat 1 | Encapçalat 2 | Encapçalat 3 |
|---|---|---|
| Producte 1 | Llapis | 1€ |
| Producte 2 | Gomes | 2€ |
| Producte 3 | Bolis | 3€ |
6) Hipervíncles
Per crear un hipervincle hem de posar entre claudators el nom que volem que surti per que així sapiguem a quina pàgina ens porta. Seguit entre paréntesi posem la URL de la pàgina web, i finalment entre cometes dins del parentesi escrivim un missatge que vols que surti ens posem amb el cursor a sobre del hipervincle. A continuació tenim un exemple:
4. HTML
HTML és el segon llenguatge de marques que hem vist.
Sempre, el nostre primer pas en el HTML serà escriure html:5 des del Visual Studio Code.
En l’apartat de <body> podrem escriure tot el text que volguem veure. Podem escriure diferentes instruccions, com ara:
-
Per introduir paràgrafs és:
<p> text </p> -
Per crear hipervíncles és:
<a href="enllaç" </a> -
Per crear llistes ordenades és:
<ol>i dins d’aquesta etiqueta posem<li>per cada element. -
Per crear llistes desordenades és:
<ul>i dins d’aquesta etiqueta posem<li>per cada element. -
Per introduïr imatges és:
<img src="enllaç_de la_imatge" alt="comentari_que_vulguis"> -
Per centrar una imatge o un text:
<center>text o imatge</center> -
Per dividir la pàgina en sectors:
divi dins posem el text que volem dins d’aquest sector. -
Per resaltar paraules en un paragraf:
spani seguit posem allò que volem resaltar.
5. CSS
CSS és el tercer llenguatge de marques que hem vist.
- Per poder utilitzar el CSS, haurem de tenir 2 arxius al Visual Studio Code, un primer arxiu amb el HTML i un altre pel CSS, i fer un link en l’arxiu index.html per que es vinculin els dos arxius.
- A continuació mostraré una serie de funcions que pots fer amb el CSS:
-Google Fonts serveix per utilitzar diferents lletres i estils.
-Per crear un recuadre al voltant d’un paràgraf: border
-Per fer un marge de separació entre l’altre bloc: margin
-Per fer una distància entre el requadre del voltant i el text: padding
-Per fer les cantonades corbes d’un requadre: border-radius
-Per determinar l’amplada d’un contingut: width
-Per determinar la grandaria del text: font-weight
-El color del text: color
-El color del fons del text: backgroung-color
-Per seleccionar una part en concret (paraula/text), utilitzem: id es mostra amb un punt .
-Per decorar el text amb més opcions podem utilitzar: text-decoration