Embedded Files
1. Introducció a l'HTML
1. Introducció a l'HTML
Què és HTML?
Què és HTML?
El llenguatge HTML ens permet estructurar una pàgina web. És un estàndard que ens permet definir l’estructura i el contingut de la nostra pàgina. Fem servir etiquetes per a assignar com s’ha de comportar un navegador web en llegir el codi.
El navegador demana una petició a un servidor i s’encarrega de mostrar el codi HTML en un format determinat que prèviament hem definit.
HTML (Hyper Text Markup Language) ha anat evolucionant des de la seva creació l'any 1991, tot i que encara es mantenen moltes de les etiquetes (tags) originals. Actualment treballem amb HTML5.
Podem testejar els nostres navegadors per comprovar si permeten els estàndards del HTML5. Per fer-ho podem accedir a la web html5test.
Tips
Tips
No és un llenguatge de programació. És un llenguatge d’estructura.
És la base de totes les pàgines web del món.
L’objectiu és dir als navegadors quina és l’estructura de la nostra pàgina web i els tipus de contingut, per als cercadors. Molt important pel posicionament (SEO).
HTML no serveix per fer maques les coses, per això s’utilitza CSS.
Funciona amb etiquetes. Hi ha molts tipus d’etiquetes i cadascuna serveix per a un contingut en particular. Si no posem l’etiqueta correcta, es veurà el contingut, però els motors de cerca no ho entendran bé.
Com treballem amb el llenguatge HTML?
Com treballem amb el llenguatge HTML?
Podem fer servir diferents programes per a programar les nostres pàgines web.
La programació en HTML la podem realitzar des de qualsevol editor de text, com per exemple el Bloc de Notes de Windows, el Text Editor en MAC o Gedit en Linux.
També existeixen editors en línia, basats en WYSIWYG (What You See Is What You Get) com aquest Codepen.io o aquest altre Dabblet.
Existeixen programes d'escriptori, instal·lables en Linux, Windows i/o Mac, que ens faciliten aquesta tasca i ens donen ajudes puntuals a la nostra programació per evitar errades o ens permeten organitzar d’una manera més senzilla tots els nostres arxius.. Entre d'altres: Visual Code Studio de Microsoft, Atom o Adobe Dreamweaver CC entre altres.
Per instal·lar el Visual Code Studio només hem de fer la descàrrega i seguir els passos indicats.
Hi podem afegir una sèrie d’extensions que ens ajudaran encara més en el nostre dia a dia.
A l’apartat “extensions” trobarem moltes eines, entre les quals destaquem:
HTML End Tag Labels (ens permet tancar etiquetes automàticament)
Autorename Tag (realitza canvis a les dues etiquetes alhora)
indent-rainbow (ajuda amb la tabulació en colors)
Live Server (actualitza automàticament el navegador amb els canvis)
Prettier (ens ajuda a formatar en el nostre codi)
Lorem Ipsum (Permet inserir paràgrafs de text)
Per tal de treballar correctament, podem seguir unes bones pràctiques a l'hora de crear la nostra pàgina web. Podem crear una carpeta general per al nostre projecte i posteriorment subcarpetes per al nostre codi HTML, CSS, imatges i vídeos.
2. Com s'escriu HTML?
2. Com s'escriu HTML?
En general, les etiquetes s’obren i es tanquen, la sintaxi és
Les etiquetes poden tenir Atributs. Els atributs són valors addicionals que configuren els elements o ajusten el seu comportament. P.ex: <html lang="ca"> ó <h1 class="titol">
Es poden posar etiquetes a dins d’una altra etiqueta (pares, fills, germans, etc.).
3. Quines etiquetes hi ha?
3. Quines etiquetes hi ha?
3.1 Estructura de la pàgina
3.1 Estructura de la pàgina
L'estructura principal de totes les webs és:
<html>
<head>
……….
</head>
<body>
………..
</body>
</html>
L’etiqueta <html> indica que escriurem amb llenguatge HTML i embolcalla tota la resta del codi.
L’etiqueta <head> és la capçalera del document HTML i conté tots els elements no visibles que ajuden a fer que la pàgina funcioni correctament.
L’etiqueta <body> conté tots els elements visibles.
3.2 Text
3.2 Text
Hi ha 6 nivells de títols: h1, h2, h3, h4, h5 i h6.
h2 és un subapartat de h1, i h3 un subapartat de h2, etc.
Els paràgrafs de text van amb l’etiqueta <p>
Tot el text dins l’etiqueta <p> s’interpreta com a una sola línia, encara que nosaltres fem salts de línia amb “enter”. Si volem forçar un salt de línia hem de posar l’etiqueta <br>.
3.3 Imatges
3.3 Imatges
L'etiqueta <img> s'utilitza per inserir imatges a la pàgina web. L'origen de la imatge s'indica amb l'atribut src. Atenció! aquesta etiqueta no cal tancar-la, es tanca sola automàticament. Exemple:
<img src="https://sandbox.trinket-shell.com/5550343ee6c144dc/raspberrypi.png">
Sempre és preferible tenir les imatges guardades juntament amb la web i treballar amb referències relatives:
3.4 Enllaços
3.4 Enllaços
Una etiqueta <a> s'utilitza per definir un enllaç, que s'utilitza per enllaçar pàgines web. Dins de l'etiqueta <a> hi ha l'atribut href, que dona a l'URL la destinació de l'enllaç. El text o imatges tancats per les etiquetes <a> i </a> seran visibles a la pàgina web i clicables. Exemple:
<a href="https://www.raspberrypi.org">Visit our website</a>
Podeu utilitzar l'atribut target per especificar on obrir la pàgina web enllaçada. L'exemple següent utilitza el valor _blank per obrir la pàgina d'inici de Raspberry Pi en una pestanya nova:
<a href="http://www.raspberrypi.org/" target="_blank">Visit Raspberry Pi!</a>
Tipus de rutes:
Rutes absolutes -> tenen un protocol http, es solen utilitzar per rutes externes.
Rutes relatives -> relatives al punt on ens trobem. El millor és utilitzar rutes relatives a l’arrel: “/jjjj/xxx.html”
També es pot navegar a diferents punts de la pàgina a través d’enllaços. Cal posar una id als apartats on s’ha de navegar i on posem l’enllaç href=”#id”.
Exercici: Fem un Portfoli
Exercici: Fem un Portfoli
Part 1: Comencem posant un títol amb el nostre nom complet i un paràgraf de presentació (About).
Part 2: Al <head> afegeix un títol (<title>) i un favicon (p.ex. <link rel="icon" href="url imatge"/>)
from Canva Education
Recursos
Recursos
Recursos proposats al Curs de Robolot > Programació al nou currículum de Batxillerat
Page updated
Report abuse