5 passos per entendre el codi HTML bàsic

5 passos per entendre el codi HTML bàsic

L’HTML és una part vital de la web tal com la coneixem. I, tot i que pocs dissenyadors web creen pàgines escrivint HTML manualment, encara és útil saber-ne una mica.





Veurem alguns conceptes bàsics del llenguatge, inclosos què és realment l’HTML, alguns conceptes fonamentals i com interactua amb altres llenguatges. Penseu en això com en un curs de bloqueig 'HTML per a maniquís'.



Conceptes bàsics d'HTML: què és l'HTML?

HTML significa Llenguatge de marcatge d’hipertext . I, tot i que de vegades s’uneix als llenguatges de programació, això no és precís.





Com un llenguatge de marques , HTML només us permet crear el disseny de visualització de les pàgines. Un cert llenguatge de programació , com Java o C ++, conté lògica i ordres que es duen a terme.

Tot i que és senzill, l’HTML és l’eix vertebrador de totes les pàgines del web. És responsable del text que apareix en negreta, afegeix imatges i enllaça amb altres pàgines. Tenim un FAQ sobre HTML que explica més.



Podeu fer clic amb el botó dret a la majoria de pàgines web del navegador i triar Mostra la font o similar per veure l’HTML que hi ha darrere. Probablement també contindrà molts codis que no siguin HTML, però podeu examinar-ho.

Fins i tot si no teniu experiència amb els llenguatges de programació o de marcatge, aprendre una mica sobre HTML us convertirà en un usuari web més informat. Anem a fer cinc passos bàsics per ajudar-vos a entendre com funciona l'HTML. Donarem exemples en el camí.



Pas 1: entendre el concepte d'etiquetes

HTML utilitza un sistema de etiquetes per classificar diferents elements del document.

La majoria de les etiquetes es presenten per parelles per embolicar el text afectat al seu interior. Heus aquí un exemple senzill (el



l'etiqueta fa text atrevit ; en parlarem més en un moment).

This is some bold text .

Fixeu-vos en com comença l'etiqueta de tancament amb una barra inclinada (/). Això significa una etiqueta de tancament, que és important. Si no tanqueu cap etiqueta, tot des del principi tindrà aquest atribut.

com formatar una unitat USB

Tot i això, no totes les etiquetes tenen un parell. Alguns elements HTML, anomenats elements buits , no tenen contingut i existeixen sols. Un exemple és el


tag, que és un salt de línia. Podeu 'tancar' aquestes etiquetes afegint una barra inclosa (com ara


) però no és estrictament necessari.

Pas 2: el disseny HTML d'esquelet

Un document HTML adequat ha de tenir determinades etiquetes definides perquè estiguin dissenyades correctament. Aquestes són les parts essencials:

  • Tots els documents HTML han de començar per declarar-se com a tal. Per tant, la seva etiqueta de tancament, , és l'últim element d'un fitxer HTML.
  • A continuació, el La secció inclou informació com el títol de la pàgina, diversos scripts que s’executen a la pàgina i similars. Com el seu nom indica, normalment apareix just després de la inicial etiqueta. L’usuari final no veu gran part del contingut d’aquestes etiquetes.
  • Finalment, el L'etiqueta conté el text de la pàgina que veu el lector (a més de molt més). Aquí trobareu imatges, enllaços i molt més.

Des del

secció constitueix la major part d’un document HTML, la resta del nostre recorregut examina els elements que hi pertanyen.

Pas 3: etiquetes HTML bàsiques per al format

A continuació, vegem algunes etiquetes habituals que formen documents HTML. Per descomptat, no és possible cobrir tots els elements, així que revisarem alguns dels més importants. Hem cobert molts més exemples HTML si no us satisfan.

Si aquestes etiquetes semblen bastant bàsiques, recordeu que HTML es va crear des del 1993. El web es basava molt en text en aquells moments en les seves primeres etapes.

Format de text senzill

HTML admet estils de text bàsics com els que trobareu a Microsoft Word:

  • les etiquetes fan text atrevit .
  • etiquetes (que significa 'èmfasi') cursiva text.

HTML també és compatible amb els antics

etiqueta per a negreta i

per a cursiva. No obstant això, és preferible utilitzar els anteriors.

En resum,

i

mostreu com s’ha d’entendre alguna cosa, mentre que les últimes etiquetes només us indiquen com ha de quedar. Aquestes etiquetes anteriors són més accessibles per als lectors de pantalla que fan servir persones amb discapacitat visual.

Paràgraf i altres divisions

HTML

tag us permet definir una secció del document. Normalment, es combina amb CSS (vegeu més avall) per donar format a una secció d’una manera determinada.

El

tag us permet dividir text en paràgrafs. Els navegadors posaran automàticament una mica d’espai abans i després d’aquests, cosa que us permet separar el text de manera natural.

Podeu afegir capçaleres al vostre document i facilitar-ne el seguiment mitjançant

a través

etiquetes. H1 és la capçalera més important, mentre que H6 és menys important. Gairebé tots els articles de MakeUseOf utilitzen capçaleres H2 i H3 per organitzar la informació.

Colpejar Entra per afegir salts de línia al document HTML, en realitat no es mostraran. En el seu lloc, podeu utilitzar-lo




per afegir un salt de línia.

A continuació, es mostra un exemple que utilitza tot això:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Pas 4: inserir imatges

Les imatges són una part vital de la majoria de pàgines web. Podeu afegir-los fàcilment amb HTML i fins i tot establir-los diferents propietats.

Inseriu una imatge amb el fitxer

etiqueta. Combinant això amb el

què fer a Internet quan t’avorreixes
src

L'atribut us permet especificar d'on voleu que es carregui la imatge.

Un altre atribut important de

etiquetes és

alt

. El text alternatiu us permet descriure la imatge dels lectors de pantalla o en cas que la imatge no es carregui correctament. Podeu passar el ratolí sobre una imatge per veure'n el text alternatiu.

Utilitzar el

width

i

height

elements per especificar el nombre de píxels en què apareix la imatge.

Poseu-ho tot junt i una etiqueta d'imatge té aquest aspecte:

Dr. Phil

La World Wide Web no seria una gran xarxa sense enllaços a altres pàgines. Utilitzant el

, podeu enllaçar a altres pàgines de qualsevol text.

Dins del

etiqueta, el

href

L'atribut indica on s'està enllaçant. Simplement enganxar l'URL funcionarà bé. Podeu utilitzar el fitxer

title

element per afegir una mica de text que apareix quan algú passa el cursor per sobre de l'enllaç.

Un enllaç bàsic té aquest aspecte:

Visit Google

El

tag té molts altres elements possibles, però aquí no ens endinsarem en ells.

Com es connecta HTML amb CSS i JavaScript

Hem analitzat les bases de l'HTML i com estableix una pàgina web. Però, com us podeu imaginar, l’HTML només no ho fa per a la web moderna. Les pàgines web HTML simples eren habituals als dies de la 'Web 1.0', quan la majoria de llocs web no eren més que text estàtic.

Però ara en tenim molt més. CSS (Cascading Style Sheets) és un llenguatge que s’utilitza per descriure l’aspecte del text que heu preparat en HTML. Recordeu el

etiqueta que hem comentat? Dins d’aquest (i d’altres etiquetes), podeu definir un fitxer

class

atribut. A continuació, al document CSS que l'acompanya, podeu escriure instruccions sobre com funciona

class

hauria de mirar.

Podeu definir aquests elements d'estil en línia al vostre codi HTML, però es considera una pràctica deficient, ja que és molt més difícil de mantenir. Més informació amb aquests simples exemples CSS . Consulteu també com optimitzar els fitxers CSS .

JavaScript

Hem vist que HTML defineix el contingut i que CSS determina l’aspecte. JavaScript, l’últim membre del trio vital per a la web, permet a les pàgines web respondre a les accions de la gent sense carregar-ne una nova cada vegada.

Per exemple, JavaScript permet a un lloc web advertir-vos que la contrasenya que heu introduït no compleix els seus requisits abans d'intentar enviar-la. Un dissenyador web pot utilitzar JavaScript per recórrer les imatges en una presentació de diapositives o demanar a l'usuari la seva entrada.

Aquests són només alguns exemples elementals. JavaScript és un llenguatge de seqüència d’ordres que pot fer moltíssim i és comparativament molt més complicat que HTML i CSS. Veure la nostra visió general de JavaScript per molt més.

Mirar l'abast complet del disseny web està més enllà de l'abast d'aquest article, però n'hi ha prou amb dir que l'HTML interactua amb altres llenguatges per crear les pàgines web que coneixem avui.

L'evolució de l'HTML

És important tenir en compte que l’HTML no és estàtic. HTML ha passat per diverses revisions, la més recent és HTML 5. Cal destacar que aquest estàndard admet la inserció de vídeos natius en lloc de confiar en formats propietaris com Adobe Flash.

Les noves iteracions d'HTML també declaren que algunes etiquetes arcaiques són obsoletes de tant en tant. Aquests inclouen etiquetes horribles com

i

(aquest text de desplaçament i flaix respectivament) que es veu habitualment en el disseny de llocs web dels anys 90. Tingueu en compte, doncs, que les normes canvien amb el pas del temps.

Un petit coneixement HTML recorre un llarg camí

Hem fet un breu recorregut pel funcionament d'un document HTML. Ara ja coneixeu els fonaments de com s’estructuren les pàgines web. Fins i tot si no continueu creant pàgines web, sou una mica més conscients del web que feu servir cada dia.

Puc jugar a jocs de PlayStation 3 a PS4

Per obtenir més informació, actualitzeu les vostres habilitats de desenvolupament web amb eines essencials i, a continuació, consulteu la pàgina la nostra guia sobre com dissenyar el vostre primer lloc web .

Crèdit de la imatge: Belyaevskiy / Depositphotos

Compartir Compartir Tweet Correu electrònic 5 consells per sobrecarregar les vostres màquines VirtualBox Linux

Cansat del baix rendiment que ofereixen les màquines virtuals? Això és el que heu de fer per millorar el rendiment del VirtualBox.

Llegiu a continuació Temes relacionats
  • Programació
  • HTML
  • Desenvolupament web
  • JavaScript
  • Eines per a administradors web
  • Programació
  • HTML5
Sobre l'autor Ben Stegner(1735 articles publicats)

Ben és editor adjunt i gerent d’incorporació a MakeUseOf. Va deixar el seu treball en informàtica per escriure a temps complet el 2016 i mai no ha mirat enrere. Fa més de set anys que cobreix tutorials de tecnologia, recomanacions de videojocs i molt més com a escriptor professional.

Més de Ben Stegner

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us