Desenvolupament web estàtic amb HTML + CSS
Conceptes¶
Sessió 1: World Wide Web¶
Objectiu Sessió 1
L'objectiu d'aquesta 1a sessió és introduir els conceptes bàsics necessaris per a implementar un desenvolupament d'una web. Introduint el HTML com el llenguatge de marques que usarem per crear-les.
World Wide Web¶
Podem definir la WWW com a una Xarxa d'Abast Mundial de contingut Web, bàsicament amb format llenguatge de marques HTML per donar contingut i format a la informació que hi ha disponible.
No únicament tindrem pàgines web com a tal, si no que podem tenir molt més contingut accessible via web, com per exemple, imatges, audio, vídeo, documents, dades, …
Caldrà uns estàndards o protocols per a que tots els elements que intervenen en aquest objectiu utilitzin un format i una funcionalitat compatible per assolir l'objectiu, que normalment serà realitzar una petició a un recurs URL usant un navegador.
El World Wide Web Consortium www és un consorci internacional que treballa per a desenvolupar i promocionar estàndards per al World Wide Web.
Ull
En català, quan es parla de "web" en masculí es fa referència al sistema web o bé a un lloc web, però quan es parla de "web" en femení es fa referència a només una de les pàgines web del sistema.
L'arquitectura bàsica que es basa la WWW és la de Client-Servidor, on de manera simple podem dir que accedim des de un client usant les xarxes a un recurs web d'un servidor.
Podem datar els orígens al març de 1989, Tim Berner-Lee al CERN de Ginebra.
Primera web publicada!
Fem una llista d'elements clau que en formen part
- Adreça IP -> identificador lògic a dins de la xarxa
- Client -> element qui fa la petició del recurs via web.
- Codificació -> Indica com convertim una informació en codi de 0 i 1 a una que els humans podem entendre.
- Domini -> Nom que associem a una adreça IP i que ens és més fàcil recordar.
- Estils CSS -> eines que usem per donar un disseny al format de la pàgina web.
- HTML -> llenguatge de marques que usem per formatar el contingut d'una web.
- Internet -> conjunt de serveis i xarxes que usem per WWW
- JSON -> Format d'intercanvi de dades pla en format text
- Navegador -> aplicació que usem a la banda del client per fer la petició al recurs web. Rebrà el codi HTML i sabrà formatar-ne el seu contingut per mostrar-lo a la interfície.
- Protocols -> conjunt de regles i normes a seguir en la comunicació web. Per exemple HTTP
- Servei web -> Aplicació a la banda del servidor, que respondrà a una petició d'un recurs web. Per exemple Apache.
- Servidor -> Ordinador que farà el rol de contenidor i receptor de les peticions dels recursos web.
- URL -> (o URI) Identificador del Recurs Universal. Significa com identifiquem a dins d'internet el recurs que en farem la petició des de el client.
- Xarxa -> conjunt d'elements que formen part de l'entramat de dispositius que interconnecten els clients i els servidors.
URL¶
O també URI, Identificador del Recurs Universa, serveix per localitzar i identificar el recurs a internet, tenim les següents parts:
A partir del port és opcional.
Exemples:
- http://www.apunts.cat
- http://www.apunts.cat/MOpt/Introduccio
- http://daw.apunts.cat/Mopt/index.html
- https://daw.apunts.cat
- https://www.apunts.cat:8080
- http://www.apunts.cat?id=33
- …
Més endavant veurem com es pot usar una o altra característica depenent de l'arquitectura de desenvolupament o crida a recurs.
HTTP¶
El protocol HTTP és l'encarregat de definir les normes i les regles en la comunicació de contingut Web entre un client i un servidor.
Què passa quan faig una petició d'un recurs web?
Passes:
- L'usuari usa un navegador web
- L'usuari escriu una adreça web, URL
- L'ordinador resol l'adreça IP amb el protocol DNS
- El navegador realitza la petició HTTP GET a la IP destí i port 80
- La petició arriba al servidor web, Apache està escoltant port 80
- El servidor respon al recurs sol·licitat.
- Si cap processar codi ara és el moment
- Una vegada té la informació HTML de resposta surt del servidor
- La resposta arriba al client
- El parser del navegador del client, processa el codi HTML i formata la interfície
Tot ordenat i controlat pel protocol HTTP. Protocol de transferència d'Hipertext.
Entre altres coses aquest protocol HTTP té:
- Accions:
GET,PUT,POST,DELETE, … - Estats de resposta: 200 OK, 400 Petició incorrecte, 404 No trobat, 500 Errada
- Permet passar informació per una capçalera cap al servidor
- Permet l'enviament de Galetes (Cookies)
HTML¶
Posem-nos mans a l'obra, què ens cal per crear una pàgina web? Doncs, bàsicament un arxiu de text amb un llenguatge de marques HTML. D'aquesta forma quan el navegador que n'ha fet la petició en rep el seu contingut és capaç d'interpretar-lo i generar la interfície tal com el dissenyador l'ha creat.
Enllaços
https://www.w3schools.com/html/
https://www.w3schools.com/tags/
Per tant, què és HTML?
HyperText Markup Language
Hypertext. text que s'enllaça a altres continguts. Aquesta és la base de la navegació web.
Markup: Etiqueta: <HTML>.
Language: Conjunt de normes, estructures i convencions per definir un contingut. Per exemple, per mostrar una imatge usarem l'etiqueta <IMG>
Normalment un lloc web tindrà una pàgina web inicial amb un conjunt de codi HTML per a formatar el contingut a mostrar i un full d'estils CSS per a indicar el disseny del mateix contingut. D'alguna manera contindrà altres recursos web o enllaços a més contingut. Pot incloure codi Javascript o similar per dinamitzar el contingut en el navegador, com per exemple, controlar què passa quan es fa clic a un botó.
I per què usem CSS?
Cascade Style Sheet
Cascade: Apliquem l'estil en cascada als elements web.
Style: estil visual de l'element web, per exemple negreta.
Sheet: document a part del .html, normalment .css.
Per indicar que volem incloure un arxiu d'estils CSS a un codi HTML usariem l'etiqueta.
Evolució HTML
-
HTML 1.0:
Tim Berners Lee (CERN) crea la primera versió HTML.1989.
Creat per compartit informació.
Poques etiquetes. -
HTML 2.0
Primera especificació oficial. 1993.
Inclou HTML 1.0.
S'afegeixen etiquetes per imatges, formularis, …
S'inclou <!DOCTYPE> per validar DTD -
HTML 3.2
Es crea una recomanació del W3C a partir de 3.0 al 1995-1997.
S'afegeixen taules HTML.
Es crea el CSS -
HTML 4.01
Any 1999.
Inclou fulles d'estils en un fitxer.
Es treuen etiquetes d'estils que passen a CSS -
HTML 5.0
Any 2014.
Basat en l'estandar XHTML.
La majoria dels navegadors adopten aquest estandar W3C.
Etiquetes semàntiques.
Millora en etiquetes de formularis.
Consolidem etiqueta en HTML
Serà un text entre < >
<HTML>
Tindrem de dos tipus:
obrir i tancar
o només una
també està permès usar
Les etiquetes HTML tenen atributs.
Un atribut donarà informació addicional, per exemple quina imatge volem mostrar:
Totes les etiquetes poden tenir un o varis atributs
Sempre les posarem en l'etiqueta d'obertura
Es representen clau="valor"
Bones pràctiques
- Les etiquetes i els atributs aniran en minúscula
- Tanca totes les etiquetes
- Usa cometes dobles “" per assignar el valor
- Tabula el contingut
- Separa el CSS del HTML
Etiquetes bàsiques
Les etiquetes bàsiques d'HTML, d'obligada presència en tot document són:
<!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra.
Existeixen tres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).
<html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.<head>: Defineix la capçalera del document HTML. Permet declarar metainformació del document que no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pels indexadors i cercadors automàtics.<body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en el navegador.
Dintre de la capçalera <HEAD> s'hi pot trobar:
<title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut del title apareix a la barra del títol a sobre de la finestra.<meta>: Permet definir metainformacions del document tals com l'autor, la data de realització, la codificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix.<LINK>: Permet definir metadades complementàries a les del meta tals com el document anterior, el següent, el capítol al qual pertany el document, la pàgina glossari, etc.
Dintre del cos <BODY> s'hi pot trobar:
<a>: Etiqueta àncora. Crea un enllaç a un altre document o a una altra zona d'aquest, segons els atributs.<h1>,<h2>,…<h6>: capçaleres o títols del document, acostumen a distingir-se per mida.<div>: Divisió estructural de la pàgina.<p>: Paràgraf.<br>: Salt de línia.<b>: Text en negreta (etiqueta desaprovada. Es recomana usar l'etiqueta<strong>).<i>: Text en cursiva (etiqueta desaprovada. Es recomana usar l'etiqueta<em>).<s>: Text ratllat (etiqueta desaprovada. Es recomana usar l'etiqueta<del>).<table>: Indica el començament d'una taula, després s'haurà de definir les files amb<tr>i les cel·les dintre de les files amb<td>.<tr>: Fila d'una taula.<td>: Cel·la d'una taula (ha d'estar dins d'una fila).<ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb<li>.<ol>: Llista ordenada (numerat). Els ítems es defineixen amb<li>.<dl>: Llista de definició. Hi ha dos tipus d'ítem; el dt i el dd.<dt>: Terme a definir.<dd>: Definició del terme.
Comentaris Un aspecte que els desenvolupadors o creadors de pàgines web usen regularment per ajudar a la comprensió o millora del codi són els comentaris.
Aquesta informació no serà usada per a la formatació de la interfície, però si que serà visible per a tothom a dins del codi.
En el llenguatge HTML usarem les etiquetes:
<!-- Comentari…. —>
Exemple:
<html>
<body>
<!-- secció d'infomació –>
<section>
bla bla bla
</section>
</body>
</html
Element HTML
Més endavant el concepte de Element HTML serà rellevant alhora de dinamitzar contingut
Enllaços
https://www.w3schools.com/html/html_head.asp
https://www.w3schools.com/tags/html_head.asp
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://developer.mozilla.org/es/docs/Web/HTML/Element/head