Llocs web, blocs, pàgines web: conceptes ja coneguts en els nostres temps. Amb el desenvolupament d'Internet, els llocs per allotjar pàgines web s'han tornat increïblement populars, i això no és sorprenent: per a algunes persones, tenir el seu propi lloc web és una necessitat, per a altres és un entreteniment agradable. En el primer cas, normalment parlem d'empreses, corporacions, emprenedors privats, quan anuncien qualsevol producte o servei demanat. El segon tracta sobre bloggers.
A més d'això, hi ha usuaris d'Internet que simplement busquen informació, llegeixen blocs, miren vídeos, etc.
Per crear un lloc web de qualitat, hi ha moltes opcions. Ens centrarem en la programació web mitjançant HTML.
Què és HTML
HTML significa Hyper Text Mark-Up Language. Traduït de l'anglès, significa "Llenguatge de marcat d'hipertext".
En altres paraules, HTML és un conjunt de codis amb els quals pots crear els elements principals del lloc, el seu marc, com aracom es formen les paraules per frases.
Els codis HTML s'escriuen exclusivament en lletres llatines i s'anomenen etiquetes, i cada codi està inclòs entre claudàtors angulars. Algunes etiquetes estan aparellades, altres no aparellades.
Parellat significa que s'han d'utilitzar per parelles sense fallar. Per exemple, l'etiqueta d'obertura indica on comença en una pàgina web i l'etiqueta de tancament indica on s'atura. El segon difereix del primer per la presència d'un caràcter de barra després de l'angle d'obertura. Per exemple, és l'etiqueta d'obertura,és l'etiqueta de tancament.
Les etiquetes no aparellades no necessiten parella.
Moltes etiquetes poden tenir atributs, elements addicionals que li donen un significat més específic. Per exemple, l'etiqueta.
On s'utilitza HTML
La comprensió clàssica d'on es necessita HTML és la creació de llocs web.
A la pràctica, això pot ser suficient, ja que HTML us permet crear els elements principals del lloc, menús (inclosos els de diversos nivells), establir el fons, inserir text, imatges, àudio, vídeo, editar fonts i molt més.
No obstant això, hi ha altres idiomes que us permeten afegir elements més interessants i sovint necessaris a una pàgina web:
- CSS estableix estils per a tot el lloc sense necessitat de prescriure constantment característiques d'estil d'elements individuals mitjançant etiquetes, com ara el color i la font del text.
- El llenguatge de script us permet desenvolupar i incrustar miniprogrames (scripts) al lloc, que van des decoses estètiques banals (canviar el color de l'enllaç en passar el cursor per sobre) i acabar amb altres funcionals (recollir adreces de correu electrònic dels clients, números de telèfon).
- Amb PHP podeu desenvolupar el vostre propi llibre de visites o sistema de comentaris.
També s'utilitza HTML en la creació de correus electrònics per a la distribució.
Què és un enllaç
Us permeten navegar a una altra pàgina web, tant dins del lloc com externa.
Elsenllaços HTML s'utilitzen habitualment:
- Per anar a un recurs web extern.
- Per moure's per les pàgines del lloc.
- Per anar a formularis de Google.
Sovint també s'indica un enllaç a la font en HTML, sobretot perquè quan copieu material d'un altre lloc, heu d'especificar l'autor. En cas contrari, la còpia sense atribució pot caure sota les definicions d'infracció dels drets d'autor, robatori de contingut i contraproducció. A més, l'ús de materials prestats i no únics redueix el rendiment de SEO i indicar un enllaç a la font redueix els riscos.
Tipus d'enllaços
En el sentit clàssic, un enllaç és l'adreça d'un recurs web al qual pots accedir fent-hi clic.
A més d'això, hi ha hiperenllaços: text i imatges. En aquests casos, l'enllaç HTML està "amagat" sota alguna frase (paraula) o imatge i, per seguir-lo, cal que feu clic al text o a la imatge.
Altres tipus d'enllaços:
- No visitat: un enllaç que encara no s'ha fet clic durant una sessió concreta. Per exemple, si vau seguir aquest enllaç ahir, després vau apagar l'ordinador i l'heu tornat a encendre avui, ara l'enllaç no tornarà a ser visitat, ja que ha començat una sessió nova.
- Activat: en aquest estat, l'enllaç es desa durant molt poc temps: l'interval entre fer clic a l'enllaç i seguir-lo.
- Visitat: un enllaç que ja s'ha visitat almenys una vegada durant una sessió.
Per als enllaços de text habituals, els visitats tendeixen a canviar de color tret que s'especifiqui el contrari.
Una imatge amb hiperenllaç no canvia el seu aspecte, tant si es visita com si no.
Com inserir un enllaç normal
Molts recursos web perceben l'adreça del lloc com un enllaç, immediatament la fan clicable i la ress alten amb color. Per exemple, si l'adreça s'envia per missatgeria o per correu electrònic, fent-hi clic, podeu anar al lloc.
En el cas de crear un lloc amb HTML, heu d'inserir un enllaç amb una etiqueta especial. Es veurà així: adreça del lloc web. El text de l'enllaç en HTML s'ha d'especificar completament, amb el protocol.
Com inserir un hiperenllaç de text
Ja es va dir que un hiperenllaç de text fa la mateixa funció que un enllaç normal, però sembla més estèticament agradable: en lloc de l'adreça d'un lloc, que sovint és innecessàriament llarga, s'indica una paraula o frase. Per exemple, a la frase "Busca informació aquí", pots amagar l'enllaçla paraula "aquí". Es ress altarà i en fer-hi clic es portarà l'usuari al lloc desitjat.
Com fer un enllaç HTML ja s'ha parlat anteriorment. Podeu inserir un hiperenllaç de text amb la mateixa etiqueta. L'única diferència és que heu d'especificar entre les etiquetes el text sota el qual s'amagarà l'enllaç: text visible.
Com inserir un hiperenllaç d'imatge
Aquí és una mica més complicat. Utilitzem la mateixa etiqueta, però en comptes de text, cal que especifiqueu el camí a la imatge.
El camí és la ubicació de la imatge. Si la imatge (foto) es troba en un servei d'intercanvi de fitxers, haureu d'especificar totes les carpetes al llarg del camí cap a la imatge mitjançant una barra inclinada. També podeu incloure un enllaç a una imatge si és possible.
Per etiquetar
a més de src, també s'apliquen altres atributs, que us permeten ajustar l'alçada, l'amplada i la ubicació de la imatge i molt més. Alguns d'ells:
- Src: especifica el camí a la imatge.
- Lowsrc: idèntic a l'atribut anterior, però especificat per a imatges de baixa qualitat.
- Alçada - alçada de la imatge.
- Amplada - la seva amplada.
- Alt - descripció de la imatge. Quan passeu el cursor per sobre d'una foto o imatge, apareixerà el text especificat en aquest atribut.
- Bord: determina el gruix de la vora al voltant de la imatge.
Els atributs s'especifiquen després de l'etiqueta i s'hi inclouenla seva composició. L'atribut ha d'anar seguit del seu valor. Per exemple, per als atributs "alçada" o "amplada" (alçada, amplada) especifica l'alçada de la imatge a la pàgina web. La unitat de mesura són els píxels, tret que s'especifiqui el contrari.
Semblarà així: <a href="adreça de la pàgina web"
. Aquests atributs ajudaran a establir la mida adequada per a la imatge. La vora ajuda a crear una vora invisible al voltant de la imatge.
Els atributs anteriors s'apliquen per separat a l'etiqueta d'inserció d'imatges. Per exemple:.
Què són els enllaços d'ancoratge
Crear enllaços d'àncora és una habilitat molt útil. Sovint és necessari dissenyar una pàgina web amb un bloc de text llarg o amb diverses subseccions en una mateixa pàgina. En aquest cas, podeu començar immediatament amb una llista d'enllaços a subseccions del text o de la pàgina web i, quan hi feu clic, l'usuari anirà directament a la secció sol·licitada.
La creació d'enllaços d'ancoratge requerirà més ús d'etiquetes d'atribut que altres tipus d'enllaços.
Primer, heu d'establir el valor global de cada bloc d'informació o subsecció de text mitjançant l'atribut superior i, a continuació, associar-lo amb l'enllaç corresponent.
Les seves característiques són més extenses, per tant, és recomanable dominar primer la creació d'enllaços més senzills i després passar a la formació d'enllaços d'ancoratge.
Consells
Ajuda d'experimentatsprogramadors:
- Podeu fer que la informació sobre un enllaç es mostri al passar el cursor en HTML. Per això, l'atribut alt, que també fem servir per als elements gràfics, pot ser útil.
- És possible fer una llista d'enllaços mitjançant HTML. En particular, pot ser útil per als enllaços d'ancoratge, així com quan necessiteu fer una llista de recursos web que es pot seguir per un enllaç directament des de la pàgina web actual.
- Amb l'ajuda de CSS i JavaScript, així com algunes funcions HTML, podeu crear un disseny d'enllaços de text i hiperenllaços diferent de l'habitual. Per exemple, quan passeu el cursor per sobre d'un enllaç, pot canviar el seu color i tornar a l'anterior quan el cursor està lluny d'ell. Això es pot fer amb un script JavaScript personalitzat. A més, el color de l'enllaç es pot configurar en una altra cosa que no sigui blau per als no visitats o morat per als visitats. Aquesta és la feina de CSS.
- No abuseu dels enllaços. Una pàgina web amb molts enllaços inadequats sembla descuidada i descuidada.
- Assegureu-vos que l'usuari entén que l'hiperenllaç amb la imatge és realment una imatge, i no només una imatge.
Conclusió
És molt fàcil enllaçar a una pàgina en HTML. És important seguir tots els punts principals d'aquest llenguatge, ja que fins i tot un petit error pot fer que no hi hagi cap resultat i el codi no funcionarà.
