Inici en HTML

This translation is incomplete. Please help translate this article from English.

ci

En aquest article cobrirem els fonaments absoluts d'HTML, perquè pugueu començar - definirem els elements, atributs i tots els altres termes importants que podeu haver sentit, i on encaixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres importants característiques bàsiques del llenguatge. En el camí, tindrem un joc amb una mica d'HTML, perquè t'interessi!

Requisits previs: Coneixements bàsics d'informàtica, programari bàsic instal.lat i coneixements bàsics de treballar amb arxius.
Objectiu: Per guanyar familiaritat amb el llenguatge HTML, i obtenir una mica de pràctica escrivint elements HTML.

Què és HTML?

HTML (HyperText Markup Language) no és un llenguatge de programació; és un llenguatge de marcat, que serveix per dir-li al vostre navegador la forma d'estructurar les pàgines web que visiteu. Pot ser tan complicat o tan simple com el desenvolupador web desitji que sigui. HTML consisteix en una sèrie de elements, que s'utilitza per tancar, embolcall o marcar diferents parts del contingut per fer que aparegui d'una certa manera, o actuar d'una manera determinada . El tancament amb etiquetes pot donar una mica de contingut en un enllaç per vincular a una altra pàgina en la web, posar en cursiva paraules, i així successivament. Per exemple, prenguem la següent línia de contingut:

My cat is very grumpy

Si volem que la línia es mantingui independent, podríem especificar que és un paràgraf tancant-ho en un element d'etiqueta de paràgraf (<p>):

<p>My cat is very grumpy</p>

Anatomia d'un element HTML

Anem a explorar el nostre element paràgraf una mica més lluny :

Les parts principals del nostre element són:

  1. L'etiqueta d'obertura: Aquesta consisteix en el nom de l'element (en aquest cas, p), embolicat en claus angulars d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte - en aquest cas és en el començament del paràgraf.
  2. L'etiqueta de tancament: Aquesta és la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans que el nom de l'element. Això indica on acaba l'element - en aquest cas és en el final del paràgraf. El no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.
  3. El contingut: Aquest és el contingut de l'element, que en aquest cas és només text.
  4. L'element: L'etiqueta d'obertura, a més de l'etiqueta de tancament, a més del contingut, és igual a l'element.

Aprenentatge actiu: crear el vostre primer element HTML

Editeu la línia següent en l'àrea d'entrada embolicant-la amb les etiquetes <em> i </em> (posar <em> abans d'obri l'element, i </em> després, per tancar l'element) - això hauria de donar èmfasi en cursiva la línia!! Podreu  veure els canvis actualitzats en viu a l'àrea de sortida.

Si cometeu un error, sempre es pot restablir amb el botó de reinici.
Si realment us heu quedat encallats, feu clic al botó Mostra solució per veure la resposta.

Niar elements

Podeu posar elements dins d'altres elements també - això es diu niar. Si volguéssim afirmar que el nostre gat està de MOLT mal humor, podríem embolicar la paraula "molt" en un element <strong>, el que significa que la paraula està fortament emfatitzada:

<p>My cat is <strong>very</strong> grumpy.</p>

No obstant això, necessiteu assegurar-vos que els elements estan correctament niats: en l'exemple anterior vam obrir l'element p en primer lloc, a continuació, l'element strong, per tant, hem de tancar l'element strong en primer lloc, a continuació, el p. El següent és incorrecte:

<p>My cat is <strong>very grumpy.</p></strong>

Els elements es tenen que obrir i tancar correctament perquè estiguin clarament dins o fora un de l'altre. Si es superposen com el d'a dalt, llavors el vostre navegador web tractarà de fer una millor estimació del que estava tractant de dir, i així es pot obtenir resultats inesperats. Així que no ho feu!

Elements de Bloc versus en línia

Hi ha dues categories importants d'elements en HTML, que heu de saber sobre - elements de bloc i elements en línia.

  • Els elements de bloc formen un bloc visible en una pàgina — apareixeran en una nova línia de qualsevol contingut que vagi davant d'ell, i de qualsevol contingut que vagi després, també apareixeran en una nova línia. Els elements de bloc tendeixen a ser elements estructurals de la pàgina, representan, per exemple, paràgrafs, llistes, menús de navegació, peus de pàgina, etc. Un element de bloc no es pot niar dins d'un element en línia, però poden ser niats dintre d'un altre element de bloc.
  • Els elements en línia són els que estan continguts dins dels elements a nivell de bloc i envolten només petites parts del contingut del document, no paràgrafs sencers i agrupacions de contingut. Un element en línia no causarà una nova línia que aparegui en el document: normalment apareixen dins d'un paràgraf de text, per exemple, un element <a> (hipervincle) o elements d'èmfasi com <em> o <strong>.

Prenguem l'exemple següent:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> és un element en línia, així com es pot veure a continuació, els tres primers elements s'asseuen a la mateixa línia l'un a l'altre sense espai entre ells. <p> en l'altra part, és un element de bloc, de manera que apareix cada element en una nova línia, amb espai per sobre i per sota de cada un (L'espaiat es deu a l'estil CSS predeterminat que el navegador aplica als paràgrafs).

Nota: HTML5 va redefinir les categories d'elements en HTML5: vegeu Categories de contingut d'elements. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que "bloc" i "en línia", per la qual cosa ens quedarem amb ells al llarg d'aquest tema.

Nota: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i en línia — veure elements a nivell de Bloc i elements en Línia.

Elements buits

No tots els elements segueixen el patró anterior d'etiqueta d'obertura, el contingut, etiqueta de tancament. Alguns elements consisteixen únicament en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element <img> insereix una imatge en una pàgina en la posició en que està inclosa:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Aquesta sortida mostraria el següent a la vostra pàgina:

Nota: Els elements buits també se'ls diu de vegades elements buits (void).

Atributs

Els elements també poden tenir atributs, que es veuen així:

<p class="editor-note">My cat is very grumpy</p>

Els atributs contenen informació addicional sobre l'element que no desitjeu que aparegui en el contingut real. En aquest cas, l'atribut class us permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.

Un atribut ha de tenir:

  1. Un espai entre el mateix i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)
  2. El nom de l'atribut, seguit d'un signe igual.
  3. Un valor d'atribut, amb signes d'obertura i de tancament de comets embolicat al voltant d'ell

Aprenentatge actiu: Afegir atributs a un element

Un altre exemple d'un element és <a> - això significa l'àncora, i fa que la part del text s'emboliqui al voltant d'un enllaç. Això pot prendre una sèrie d'atributs, però dos són els següents:

  • href: Aquest atribut especifica, com a valor, l'adreça web que desitjeu que l'enllaç apunti; on el navegador es desplaçará quan es fa clic a l'enllaç. Per exemple, href="https://www.mozilla.org/".
  • title: L'atribut title especifica informació addicional sobre el enllaç, com quina és la pàgina que estem vinculant. Per exemple, title = "La pàgina web de Mozilla". Això apareixerà com un tooltip quan planegem per damunt.

Editeu la línia següent en l'àrea Input per convertir-lo en un enllaç al vostre lloc web favorit. En primer lloc, afegiu l'element <a>, llavors l'atribut href, i seguidament l'atribut title. Veureu els canvis actualitzats en directa a l'àrea Output. Hauriau de veure un enllaç, que el planejar per sobre mostri el contingut de l'atribut title, i quan es fa clic, navegueu a l'adreça web de l'element href. Recordeu que necessiteu incloure un espai entre el nom de l'element, i cada atribut.

Si cometeu un error, sempre es pot restablir amb el botó de reinici. Si  realment us heu encallat, feu clic al botó Mostra solució per veure la resposta.

Atributs Boolean

De vegades, veureu atributs escrits sense valors - això està perfectament permès. Aquests es diuen atributs booleans, i que només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, prendre l'atribut disabled, el podeu assignar a un element input d'un formulari si voleu que estigui desactivat (en gris) perquè l'usuari no pogui entrar cap dada en ells.

<input type="text" disabled="disabled">

Com a forma abreujada, és perfectament admissible escriure això de la següent manera (també hem inclòs un element input de formulari no desactivat com a referència, perquè tingueu una idea del que està succein):

<input type="text" disabled>

<input type="text">

Tots dos us donarà una sortida de la següent manera:

Ometent les cometes al voltant dels valors dels atributs

Quan mireu al voltant de la World Wide Web, us trobareu amb tot tipus d'estils de marcats estranys, incloent valors d'atributs sense cometes. Això és permissible en certes circumstàncies, però es trencarà el seu marge de benefici en d'altres. Per exemple, si anem a reprendre el nostre exemple d'enllaç d'abans, podríem escriure una versió bàsica amb només l'atribut href, com això::

<a href=https://www.mozilla.org/>favourite website</a>

No obstant això, tan aviat com li afegim l'atribut title en aquest estil, les coses van a malament:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

En aquest punt, el navegador a mal interpretat el marcatge, pensant que l'atribut title té en realitat tres atributs - un atribut title amb el valor "The", i dos atributs booleans, Mozilla i homepage. Això òbviament no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenteu planejar sobre l'enllaç per veure el que el text del títol és!

El nostre consell és incloure sempre cometes a l'atribut - evita aquest tipus de problemes, i dóna també com a resultat un codi més llegible.

Cometes simples o dobles?

En aquest article us adonareu que els atributs estan embolicats entre cometes dobles. No obstant això és possible que vegeu cometes simples en HTML d'algunes persones. Això és purament una qüestió d'estil, i podeu ser lliures d'escollir el que preferiu. Les dues línies següents són equivalents:

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

No obstant això, heu de assegurar-vos que no es barregen entre si. El següent us sortirà malament!

<a href="http://www.example.com'>A link to my example.</a>

Si heu utilitzat un tipus de cometes en el codi HTML, podeu niar l'altre tipus de cometes:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Si teniu niades el mateix tipus de cometes, haureu d'utilitzar Entitats de referències: incloent caràcters especials en HTML.

Anatomia d'un document HTML

Envolta els conceptes bàsics dels elements HTML individuals, però no són molt útils per si mateixos. Ara anem a veure com els elements individuals es combinen per formar tota una pàgina HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Aquí tenim:

  1. <!DOCTYPE html>: El tipus de document. A la nit dels temps, quan HTML era jove (al voltant de 1991/2), els doctypes estaven destinats per actuar com enllaços a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, el que podria significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com això:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    No obstant això, avui dia ningú realment es preocupa per ells, i que en realitat són un artefacte històric que ha de ser inclòs perquè tot funcioni bé. <! DOCTYPE html> és la cadena més curta de caràcters que es considera com un tipus de document vàlid; això és tot el que realment necessiteu saber.
  2. <html></html>: L'element <html>. Aquest element envolta tot el contingut de la pàgina sencera, i algunes vegades es coneix com l'element arrel.
  3. <head></head>: L'element <head>. Aquest element actua com a contenidor de totes les coses que voleu incloure a la pàgina HTML, peró que no és el contingut que es mostrarà als visitants de la vostra pàgina. Això inclou coses com paraules clau i una descripció de la pàgina que voleu que aparegui en els resultats de cerca, estil CSS per al vostre contingut, declaracions de conjunt de caràcters i més. Aprendreu més sobre això en el proper article de la sèrie.
  4. <meta charset="utf-8">: Aquest element defineix el conjunt de caràcters del document utilitzat per UTF-8, inclou la majoria dels caràcters de tots els idiomes humans coneguts. En essència, ara podeu gestionar qualsevol contingut textual possible posant-ho. No hi ha cap raó per no establir aquest, i us pot ajudar a evitar alguns problemes més endavant.
  5. <title></title>: Això estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan es un marcador/favorit.
  6. <body></body>: L'element <body>. Això inclou tot el contingut que voleu mostrar als usuaris d'Internet quan visiten la vostra pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.

Aprenentatge actiu: Afegir algunes característiques a un document HTML

Si voleu experimentar amb l'escriptura d'una mica d'HTML en el vostre ordinador local, podeu:

  1. Copieu l'exemple de la pàgina HTML que apareix a dalt.
  2. Creeu un nou arxiu a l'editor de text.
  3. Enganxeu el codi en el nou arxiu de text.
  4. Deseu el fitxer com index.html.

Nota: també podeu trobar aquesta plantilla bàsica HTML en el MDN Learning Area Github repo.

Ara podeu obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editeu el codi i actualitzeu el navegador per veure quin és el resultat. Inicialment es veurà així:

A simple HTML page that says This is my pageAixí doncs en aquest exercici, podeu editar el codi localment en l'equip, com es va indicar anteriorment, o podeu editar a la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <body>, en aquest cas. ) Ens agradaria que provéssiu l'aplicació dels següents passos:

  • Just a sota de l'etiqueta d'obertura <body>, afegiu un títol principal per al document. Això ha de ser embolicat dins d'una etiqueta d'obertura <h1> i una etiqueta  de tancament </h1>.
  • Editeu el contingut del paràgraf per incloure un text sobre alguna cosa que esteu interessats.
  • Feu que qualsevol paraula important destaqui en negreta embolicant-la dins d'una etiqueta d'obertura <strong> i una etiqueta de tancament </strong>
  • Afegiu un enllaç el paràgraf, com s'ha explicat anteriorment en aquest article.
  • Afegiu una imatge al document, sota el paràgraf, com s'h explicat anteriorment en aquest article. Obtindreu punts de bonificació si aconseguiu enllaçar a una imatge diferent (ja sigui de forma local a l'ordinador o en un altre lloc a la web.)

Si cometeu un error, sempre es pot restablir amb el botó de reinici. Si  realment us heu encallat, feu clic al botó Mostra solució per veure la resposta.

Espais en blanc en HTML

En els exemples anteriors us hareu adonat que hi ha una gran quantitat d'espai en blanc inclòs en els llistats de codi - això no és necessari en absolut; els dos fragments de codi següents són equivalents:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

No importa la quantitat d'espai en blanc que utilitzeu (pot incloure, els caràcters d'espai, peró també els salts de línia), l'analitzador HTML redueix cadascun a un sol espai quan es representa el codi. Així que per què utilitzeu tant els espais en blanc? La resposta és la llegibilitat - és molt més fàcil d'entendre el que està passant en el vostre codi si el teniu amb un format agradable, i no només agrupat junts en un gran embolic. En el nostre HTML tenim cada element niat amb una sagnia de dos espais més que el que està assegut a l'interior. Depèn del l'estil de format que utilitzeu (el nombre d'espais per a cada nivell de sagnat, per exemple), però s'ha de considerar l'ús d'algun tipus de format.

Referència Entitats: incloent caràcters especials en HTML

En HTML, els caràcters <, >,",' i & són caràcters especials. Són parts de la sintaxi HTML en si, així que com incloure un d'aquests caràcters en el text, per exemple, si realment desitjeu usar un ampersand o el signe menys que, i que no s'interpreti com a codi com alguns navegadors poden fer?

Hem d'utilitzar referències de caràcters - codis especials que representen caràcters, i es poden utilitzar en aquestes circumstàncies exactes. Cada caràcter de referència s'inicia amb un signe (&), i acaba amb un punt i coma (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

En el següent exemple, es poden veure dos paràgrafs, que estan parlant sobre tecnologies web:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

A la sortida en directa a continuació, es pot veure que el primer paràgraf ha anat malament, ja que el navegador pensa que la segona instància de <p> està iniciant un nou paràgraf! En el segon paràgraf es veu bé, perquè hem reemplaçat els parèntesis angulars amb les referències de caràcters.

Nota: Un gràfic de totes les referències a entitats de caràcters HTML disponibles, es pot trobar en Wikipedia: Llista de XML i HTML de les referències a entitats de caràcters.

Comentaris HTML

En HTML, com passa amb la majoria dels llenguatges de programació, hi ha un mecanisme disponible per escriure comentaris en el codi - Els comentaris són ignorats pel navegador i invisible per a l'usuari, i el seu propòsit és permetre que pugueu incloure comentaris en el codi per dir com funciona el vostre codi, el que les diferents parts del codi fan, etc. Això pot ser molt útil si es torna a una base de codi que no s'ha treballat durant 6 mesos, i no poden recordar el que es va fer - o si hi ha la mà d'una altra persona que ha treballat en el vostre codi.

Per activar una secció de contingut dins del vostre arxiu HTML en un comentari, cal embolicar-lo en els marcadors especials, per exemple <!-- i -->:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Com es pot veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.

Sumari

Heu arribat al final de l'article - espero que hagiu gaudit de la vostra visita als conceptes bàsics d'HTML. En aquest punt, heu d'entendre el que el llenguatge s'assembla, com funciona en un nivell bàsic, i ser capaços d'escriure una sèrie d'elements i atributs. Aquest és un lloc perfecte per estar en aquest moment, com en els articles següents en el mòdul, entrarem en algunes de les coses que ja heu examinat en molt més detall, i introduirem algunes noves característiques del llenguatge. Estigueu atents!

Nota: En aquest punt, a mesura que comenceu a aprendre més sobre HTML, és possible que també vulgueu començar a explorar els fonaments de Cascading Style Sheets o CSS. CSS és el llenguatge que utilitza l'estil de les vostres pàgines web (per exemple, si canvieu el tipus de lletra o colors, o alterar el disseny de pàgina.) HTML i CSS van molt bé junts, com aviat descobrireu.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,