HTML
Última actualización
¿Te fue útil?
Última actualización
¿Te fue útil?
El llenguatge HTML (HyperText Markup Language) és el llenguatge amb el qual s'escriuen les pàgines web.
L'any 1989 Tim Berners-Lee i Anders Berglund, dos investigadors del , van crear un llenguatge basat en etiquetes destinat a compartir informació per Internet: HTML.
Les pàgines web són vistes pels usuaris mitjançant un tipus d'aplicació anomenat navegador.
El llenguatge HTML està pensat per compartir documents de manera que es vegin de forma semblant en diferents navegadors.
Conseqüentment, el llenguatge HTML serveix al navegador per mostrar les pàgines a l'usuari.
HTML ha sofert molts canvis al llarg del temps.
La versió actual del llenguatge HTML és HTML5.
Una pàgina web és un arxiu de text amb extensió .html o .htm
Pot ser creada amb el bloc de notes o programes Editors de codi HTML.
HTML és únicament text pla.
El llenguatge HTML base la seva sintaxis en un element de base que anomenem etiqueta.
Una obertura de forma general <etiqueta> Un tancament de tipus </etiqueta> .
Tot el que estigui dintre d'aquesta etiqueta tindrà les modificacions que caracteritzen aquesta etiqueta.
El resultat serà:
Però tot i que funciona, no és el que busquem, falta especificar molt millor les parts de la pàgina i la sintaxi de les etiquetes.
El llenguatge HTML té número d'etiquetes limitat.
Cada etiqueta està pensada per representar documents d'una forma determinada o per marcar-ne l'estructura.
Aquí hi trobaràs una llista d'etiquetes vàlides:
Tot document HTML5 ha de començar definint el DOCTYPE.
L'etiqueta DOCTYPE serveix per indica al programa client (navegador) amb quina sintaxi s'ha creat la pàgina, és una sentencia que es posa al principi de tot de la pàgina.
El DOCTYPE s'ha de posar a la primera línia.
Estricte:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "<http://www.w3.org/TR/html4/strict.dtd>">
Transicional:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">
Frames:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "<http://www.w3.org/TR/html4/frameset.dtd>">
<!DOCTYPE html>
Un document HTML ha d'estar delimitat per l'etiqueta <html> i </html>.
Pot incloure l'atribut lang:
lang ens permet definir l'idioma en el que està la pàgina
Aquesta informació és important pels motors de cerca i els programes de síntesis de veu.
Dins la pàgina HTML podem distingir-hi dues parts:
L'encapçalament
Flanquejat per les etiquetes <head> i </head>
Dóna informació sobre la pàgina.
Col·locarem etiquetes de tipus informatiu, com per exemple el títol de la pàgina, autor, paraules clau.
No es mostra en el navegador.
El cos
Flanquejat per les etiquetes <body> i </body>
Col·locarem el nostre contingut de la pàgina.
És el que es veu realment.
L'etiqueta <meta> serveix per afegir informació sobre la pàgina i es posen dins el <head>.
Els buscadors consultes l'informació d'aquesta etiqueta per millorar la seva cerca i indexació.
Conté els atributs name i content
És important definir el joc de caràcters utilitzat.
El joc de caràcters determina la forma en què els caràcters es converteixen en bytes (i viceversa).
El W3C recomana el charset UTF-8.
HTML defineix 6 nivells de capçaleres o títols.
Per definir els paràgrafs utilitzem l'etiqueta <p>, la qual introdueix una línia en blanc després del paràgraf.
L'etiqueta <br> la qual no té tancament, ens serveix per fer un salt de línia, dins dels paràgrafs.
Pregunta: A dins de l'etiqueta <p> podem definir atributs a fi de justificar el text del paràgraf?
Aquí comencem amb els perills de les coses mal fetes però que sembla que funcionin...
Què no s'ha de fer
Llegireu que hi ha atributs per alinear els paràgrafs, com align
Text alineat a l'esquerre: <p align="left"> Text left.</p>
Text alineat al centre: <p align="center"> Text center </p>
Text alineat a la dreta: <p align="right"> Text right </p>
Antigament es feia servir però ara no és correcte, a vegades el camí més ràpid no és el millor.
Coneixeu el CSS?
Mireu l'exemple de l'abadia del crimen, per entendre que una cosa ben feta dura més, és més fàcil de mantenir i es pot millorar amb facilitat.
Si comencem a fer codi brut, "espaguetti" o altres defectes, les pàgines esdevenen totalment inmantenibles.
En voleu més exemples? (en MAJÚSCULES EL QUE HEM D'EVITAR)
Podíem definir el color, tamany i tipus de lletra de diferents formes:
Mitjançant l'etiqueta <FONT> teníem els atributs:
FACE: Defineix el tipus de lletra.
SIZE: Defineix el tamany de la lletra.
COLOR: Defineix el color del text de la lletra.
Amb Es definien dins de l'etiqueta <body>;
ATRIBUTS
BGCOLOR: Especifica el color de fons de la pàgina
BACKGROUND: Serveix per indicar la col·locació d'una imatge com a fons de pàgina.
COLOR DEL TEXT
TEXT: Serveix per definir el color del text de la pàgina.
LINK: El color del enllaços que no han estat visitats ( per defecte, és blau ) VLINK: El color dels enllaços visitats.
... i un llarg etcètera...
L'etiqueta
<pre>defineix un paràgraf que respecte els codis propis del text pla (intros, número d'espais, etc.).
Adequat per fer textos literals, per exemple els poemes amb els seus salts de línia sense <br>.
Serveixen per indicar que un text concret té un significat especial.
<b></b> (bold) o <strong></strong>: Text important (es mostra en negreta):
<i></i> (italic): es mostra en cursiva
<u></u> (underlined): es mostra subratllat
<sub></sub>: Subindex
<sup></sup>: Superindex
No són per donar format sinò per donar significat especial al text. Sempre hem de formatar el contingut mitjançant les fulles d'estil (CSS).
MAI fer servir <u> per subratllar. Dóna lloc a equivocacions per l'usuari, que es pot pensar que és un link (enllaç).
Les llistes serveixen per enumerar i definir elements.
Podem distingir tres tipus de llistes:
Llistes desordenades
Llistes ordenades
Llistes de definició
Definides per les etiquetes <ul> i </ul> (unordered list).
Cada element de la llista queda enmarcat per l'etiqueta <li> (list item).
L'atribut type ens serveix per definir el tipus de vinyeta.
<ul TYPE="tipus vinyeta">
On tipus vinyeta pot ser: circle, disc, square o none.
Recordeu que això s'ha de fer CSS.
Definides per les etiquetes <ol> i </ol> (ordered list). Cada element de la llista queda enmarcat per l'etiqueta <li> (list item)
L'atribut TYPE ens serveix per definir el tipus de numeració que utilitzarem.
1 per ordenar amb nombres
a per lletra de l'alfabet
A per lletres majúscules de l'alfabet
i per ordenar amb xifres romanes
I per ordenar amb xifres romanes majúscules
Cada element és presentat juntament amb la seva definició.
Definides per les etiquetes <dl> i </dl> (definition list).
Les etiquetes de cada element són <dt> (definition term) i la seva definició <dd> (definition definition).
Podem aniuar llistes, fins i tot de diferents tipus de llista:
Els enllaços sorgeixen de la necessitat de que les pàgines HTML estiguin interconnectades (hypertext).
Per col·locar un enllaç utlitzarem les etiquetes <a> i </a> .
L'atribut href, ens indica el destí d'aquest enllaç.
Essent contingut un text o una imatge i destí un arxiu, un correu electrònic o una pàgina.
Els enllaços es poden classificar de la següent manera:
Enllaços interns: els que es dirigeixen a diferents llocs de la mateixa pàgina.
Enllaços locals: els dirigeixen a un altre pàgina dintre de la mateixa web.
Enllaços remots: els dirigits cap a altres pàgines web.
Enllaços amb direccions de correu: per crear un missatge de correu dirigit a una direcció.
Enllaços amb arxius: perquè els usuaris puguin descarregar arxius.
Són enllaços que apunten a un lloc diferent dins de la mateixa pàgina.
Per crear un enllaç d'aquest tipus és necessari a part de l'enllaç de l'origen, col·locar un enllaç al destí.
Exemple:
No utilitzar-los molt, és millor fer pàgines més petites ja que llavors tarden menys a carregar-se i són més fàcils de llegir.
Un lloc web està constituit de pàgines interconnectades.
Per regla general, un lloc web ha d'estar ordenat per directoris. S'ha d'utilitzar la "/" per especificar on es troben les coses.
Els enllaços locals també poden apuntar a una secció en concret dintre d'un altre pàgina.
La pàgina arxiu.html ha de contenir la marca referent a la secció.
Són enllaços dirigits cap a altres llocs web.
A l'atribut href i col·loquem la URL o direcció de la pàgina amb la que es vol enllaçar.
Totes les direccions van precedides de http://
Ens obren una nova finestra de correu electrònic per enviar a una direcció de correu determinat.
A l'atribut href i col·loquem la paraula mailto: seguit de la direcció de correu.
Per tal de configurar altres paràmetres del correu electrònic s'afegeix un interrogant després de la direcció de correu.
No és recomenable posar enllaços a correus, pel tema dels robots i l'SPAM.
El mecanisme és el mateix que hem vist en els enllaços remots i locals.
En comptes d'indicar la direcció web el que hem de fer és indicar el nom del fitxer (i en cas que sigui necessari la ruta).
L'aspecte més vistós i atractiu d'una pàgina web és el grafisme.
Les imatges són emmagatzemades en forma d'arxius, principalment GIF/PNG (per imatges) i JPG (per fotos).
L'etiqueta que utilitzem per insertar una imatge és <img>, no cal fer el tancament.
Mitjançant l'atribut src (source), especifiquem el lloc (URL) on es troba la imatge.
Si la imatge es troba en una carpeta diferents que la pàgina HTML:
<img>Alt: Breu descripció de l'imatge. És obligatori per tal que el document HTLM sigui validat correctament.
Height i Width: Defineixen l'altura i amplada de les imatges en pixels.
Altres coses mal fetes:
BORDER: Defineix el tamany en pixels del quadrat que rodeja l'imatge.
LOWSRC: Quant tenim activada aquesta opció primer es descarrega la imatge amb una baixa resolució i va millorant a mesura que es va descarregant.
PNG ( per dibuixos ) JPG ( per fotos ).
Els dos formats comprimeixen les imatges per guardar-les.
GIF - Arxiu ideal per imatges que estan dibuixades.
Compresió: És molt bona per dibuixos.
Transparència: És una utilitat per definir algunes parts de la imatge com a transparents.
Colors: Es poden utilitzar paletes, conjunts de 256 o menys. Quant menys colors utilitzem menys tamany ocuparà l'imatge.
Actualment s'està utilitzant un format PNG que té les mateixes prestacions que el GIF (transparència i animació) i a més a més incorpora color real, 48 bits per píxel i compresió sense pèrdua.
JPG
Compresió: El seu algorisme de compressió és ideal per guardar fotos.
Transparència: Aquest format no té possiblitats de crear arees transparents.
Colors: Treballa sempre amb 16 milions de colors.
Hem de procurar de no posar imatges de tamany més gran que el que s'ha de visualitzar
Per exemple si té 200x200 la imatge màxima no té sentit posar-hi una imatge a descarregar de més de 1000x1000 píxels!
Arxius GIF
Reduïm el numero de colors de la paleta.
Arxius JPG
Ajustem la qualitat i la mida de l'arxiu quant l'estem guardant.
És impresindible disposar d'un bon editor fotogràfic a fi d'optimitzar una imatge: GIMP
Una taula és un conjunt de cel·les organitzades dintre de les quals podem col·locar diferents continguts.
L'etiqueta per definir les taules és: <table> </table>
Les taules són descrites per línies d'esquerra a dreta, mitjançant <tr> </tr>
Com es pot veure així no es veu massa clar que hi hagi una taula...
si afegim un atribut border="1" ho veurem més clar:
ATRIBUTS PER FILES I CEL·LES no vàlids
Align: Justifica el text de la cel·la
Valign: Podem escollir si el text apareix a dalt (top), a baix (bottom) o al mig (middle) de la cel.la.
Bgcolor: Donar color a la cel·la o la fila escollida.
Bordercolor: Defineix el color del marc.
ATRIBUTS PER CEL.LES no vàlids
Background: Ens permet col·locar de fons una imatge en una cel·la.
Height: Defineix l'altura de la cel·la en pixels o percentatge.
Width: Defineix l'amplada de la cel·la en pixels o percentatge.
Align: Alinea la taula respecte al seu entorn
Background: Ens permet col·locar un fons per la taula a partir d'una imatge.
Bgcolor: Color de fons de la taula.
Border: Defineix el tamany del marc.
Bordercolor: Defineix el color del marc.
Cellpadding: Defineix en pixels l'espai entre les cel·les dela taula i el seu contingut.
Cellspacing: Defineix l'espai entre els marcs (en pixels)
Height: Defineix l'altura de la taula en pixels o percentatge.
Width: Defineix l'amplada de la taula en pixels o percentatge.
Atributs de taula vàlids
Colspan:: Expandeix una cel·la horitzontalment.
Rowspan:: Expandeix una cel·la verticalment.
També es poden utilitzar taules anidades.
Atribut target a enllaços: s'utilitza per decidir on es s'obrirà l'enllaç, pot ser:
_blank: nova finestra.
_top: finestra.
_self:(per defecte) en el frame actual.
_parent: es carrega al frame "pare", el que era havia cridat l'actual.
- o també un nom de frame (definit amb l'atribut name).
Estan obsolets per l'HTML5, però eren vàlids per altres versions.
Té l'interès "històric" de saber com es feien abans les pàgines web, el CSS actualment les millora molt.
Antigament els layouts una mica complexes es feien o bé amb taules o bé amb frames. Les dues coses estan en desús avui en dia.
Podria interessar saber-los fer per actualitzar alguna pàgina web antiga.
Doctypes de 4.01 o de XHTML, amb FRAMESET
Html 4.01:
Xhtml:
L'estructura de la pàgina també es veu modificada. No té <body>, té <frameset>
Els motors de cerca tenen problemes per indexar-los.
Ocupen espai a la pantalla.
No es poden utilitzar les funcionalitats d'anar endavant o endarrere a l'historial de navegació.
Tenen problemes d'usabilitat i accessibilitat web per persones invidents.
frameset: l'atribut cols o rows defineix el percentatge total de la pantalla que ocuparà cada secció.
És interessant que alguna secció tingui * perquè el navegador calculi de forma automática l'ampada o l'alçada que ha de tenir.
frame: hi ha tants frames com blocs s'hagin indicat a l'etiqueta frameset.
L'atribut <src> fa referència a la url de la pàgina volem que es carregui.
L'atribut <name> indica el nom del frame per ser utilitzat amb targets
Anem a veure diferents dissenys de frames
3 àrees verticals
3 àrees horitzontals
El frame que ha sobreviscut a l'HTML5 és l'iframe.
Un iframe s'utilitza per mostrar una web dins una altra pàgina web.
Apareixen barres d'scroll en el frame si la pàgina és més gran que l'espai dissenyat.
Validació de camps:
HTML Element Reference:
Més informació: w3schools HTML Headings
<blockquote></blockquote>: per cites (es mostra tabulat).
Més informació:
