Introduction to HTML

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

Abans de començar

Per comprendre aquest article, heu de sentir-vos còmodes amb l'ús d'un browser. Si sabeu com crear i editar arxius de text, podeu provar els exemples que es mostren en aquest article.

Fonamentalment, quan mireu una pàgina web en un Web browser, veieu paraules. Però la majoria de les pàgines web contenent text amb estil en lloc de text pla.  Avui dia, els dissenyadors de pàgines web tenen accés a centenars de diferents fonts, mides de font, colors i fins i tot alfabets (per exemple, espanyol, japonès, rus), en el qual els navegadors poden, en la seva major part, mostra-los amb precisió. Les pàgines web també poden contenir imatges, videoclips i música de fons. Poden incloure menús desplegables, quadres de cerca o enllaços que poden seguir per accedir a altres pàgines (ja sigui en el mateix lloc o en un altre lloc). Alguns llocs web, fins i tot, permeten als visitants personalitzar la visualització de la pàgina per donar cabuda les seves preferències i desafiaments (per exemple, problemes de visió, sordesa o daltonisme). Sovint, una pàgina conté quadres de contingut que es mouen (desplaçament), mentre que la resta de la pàgina es manté estàtica.

Una pàgina web típica depèn de diverses tecnologies (com ara CSS, JavaScriptAJAX, JSON) per controlar el que l'usuari final veu, però el més fonamental, és que els desenvolupadors escriuen les pàgines web en HTML, sense el qual no pot haver-hi pàgines web. Per visualitzar la pàgina al dispositiu del costat del client, un navegador comença per la lectura del codi HTML.

El W3C (World Wide Web Consortium) i la WHATWG (Web Hypertext Application Technology Working Group) mantenen les normes i especificacions internacionals d'HTML (HyperText Markup Language). La WHATWG tracta HTML com un "estàndard de vida" en constant evolució, mentre que el W3C funciona tant en l'evolució HTML (HTML 5.1) com en les "instantànies" d'HTML (de les quals la més recent és HTML5).

L'Especification HTML defineix un únic idioma que es pot escriure ja sigui amb la sintaxi relaxada HTML o la sintaxi més estricta XML (Extensible Markup Language). HTML també s'ocupa de les necessitats de les aplicacions web. HTML només descriu el significat del contingut, no l'estil i el format. Per definir l'aparença i el disseny, utilitzeu CSS, no presentació explícita HTML.

Aquest article proporciona una introducció a HTML. Si alguna vegada us heu preguntat el que passa darrere de les escenes en el vostre navegador web, aquest article és el lloc per començar a aprendre-ho.

Historia del HTML

Tim Berners-Lee, llavors contractista en la CERN (Organització Europea per a la Recerca Nuclear), va idear una manera a la fi dels anys 80 perquè els científics compartissin documents sobre el Internet. Abans d'això, la comunicació per Internet s'havia limitat al text sense format, utilitzant tecnologies com a correu electrònic, FTP (File Transfer Protocol), i panells de discussió basats en Usenet. HTML va utilitzar un model de continguts emmagatzemats en un servidor central, però transferible a una estació de treball local i visible en un navegador, el que simplificava l'accés als continguts i fent possible continguts "rics" (per exemple, el format sofisticat de text  i les imatges ). HTML es deriva de SGML, amb una sintaxi complexa per el marcatge manual o l'enquadernació de continguts (text o gràfics) en documents; a partir d'HTML5, HTML ja no intenta adherir-se a la sintaxi SGML.

Què és HTML?

HTML és un llenguatge de marcat. El marcat de paraules va ser utilitzat pels editors que marcaven els manuscrits (generalment amb un llapis blau) en donar instruccions per a les revisions. "Markup" ara vol dir alguna cosa lleugerament diferent: un llenguatge amb una sintaxi específica que sol·licita a un navegador web com mostrar una pàgina. Un cop més, HTML separa "contingut" (paraules, imatges, àudio, vídeo, etc.) de "presentació" (instruccions per a mostrar cada tipus de contingut). HTML utilitza un conjunt predefinit de elements per definir tipus de contingut. Els elements contenen un o més "tags" que contenen o expressen contingut. Les etiquetes estan tancades entre claudàtors angulars i l'etiqueta de tancament comença amb una barra inclinada.

A continuació us vam mostrar l'estructura bàsica de codi HTML

<html>
<head>
    <title>Page title here</title>
</head>
<body>
    This is sample text...
    <!-- We use this syntax to write comments -->
    <!-- Page content and rest of the tags here.... -->
    <!-- This is the actual area that gets shown in the browser -->
</body>
</html>

La majoria dels navegadors permeten a l'usuari veure el codi HTML de qualsevol pàgina web. A Firefox, per exemple, premeu Ctrl + U per veure la font de la pàgina. Els principiants trobaran el codi gairebé il·legible per a una pàgina complexa, però si passeu algun temps observant en el codi d'una pàgina senzilla i comparant-lo en el que fa el codi de la pàgina, aviat tindreu una clara comprensió de com funciona la sintaxi.

L'element de paràgraf consisteix en l'etiqueta d'inici "<p>" i l'etiqueta de tancament "</ p>". El següent exemple mostra un paràgraf contingut en l'element paràgraf HTML. Recordeu que el vostre navegador no mostrarà més d'un caràcter d'espai en una fila.

<p>You are beginning to learn HTML.</p>

Quan aquest contingut es visualitza en un navegador web, es veu ai

El navegador utilitza tags com un indicador de com mostrar el contingut en les etiquetes.

En general, elements conté contingut però també pot contenir altres elements. Per exemple, l'element èmfasi ("<em>") pot ser incrustat dins d'un element paràgraf, per donar èmfasi a una paraula o frase:

<p>You are <em>beginning</em> to learn HTML.</p>

Quan es mostra, es veu així:

Alguns elements no poden contenir altres elements. Per exemple, la imatge tag ("<img>") especifica el nom d'arxiu del contingut (una imatge) com un attribute:

<img src="smileyface.jpg" alt="Smiley face" >

En XHTML (un esquema XML que implementa elements HTML), solen posar una barra diagonal abans del parèntesi angular final per indicar el final d'un element buit.

La resta d'aquest article entra en més detall en relació amb els conceptes introduïts en aquesta secció. No obstant això, si voleu veure HTML en acció, descarregar Mozilla Thimble, un editor interactiu en línia que ajuda a aprendre com escriure HTML. A més, vegeu els elements HTML d'una llista d'elements disponibles i una descripció del seu ús.

Elements - els blocs de construcció bàsics

HTML consisteix en un conjunt de elements, que defineixen el significat semàntic del seu contingut. Els elements inclouen dues tags que coincideixen i tota la resta. Per exemple, l'element "<p>" indica un paràgraf; l'element "<img>" indica una imatge. Veure la pàgina Elements HTML per a una llista completa. Nota: Algunes etiquetes són de tancament automàtic i no contenen cap contingut.

Alguns elements tenen un significat molt precís, com "aquesta és una imatge", "aquest és un encapçalat", o "això és una llista ordenada". Altres són menys específics, com ara "això és una secció en la pàgina" o "això és part del text". No obstant això, altres s'utilitzen per raons tècniques, com ara "aquesta és la identificació de la informació de la pàgina, per la qual cosa no mostrar-ho". En qualsevol cas, d'una manera o altra tots els elements HTML tenen un valor semàntic.

La majoria dels elements poden contenir altres elements, formant una estructura jeràrquica. Una pàgina web molt simple però completa es veu així:

<html>
  <head>
    <title>A minimal web page</title>
  </head>
  <body>
    <p>You are in the beginning stage of learning HTML.</p>
  </body>
</html>

Com es pot veure, el <html> element envolta la resta del document, i el <body> element envolta el contingut de la pàgina. Aquesta estructura és sovint considerada com un arbre amb branques (en aquest cas, els elements <body> i <p>) que creixen des del tronc (<html>). Aquesta estructura jeràrquica s'anomena DOM (document object model).

Etiquetes

Els documents HTML estan escrits en text sense format. Es pot escriure HTML a qualsevol editor de text que us permeti guardar el contingut com a text sense format (per exemple, el Bloc de notes, Notepad ++ o Sublim Text), però la majoria dels autors d'HTML prefereixen utilitzar un editor especialitzat que posa en relleu la sintaxi i mostra el DOM. És possible utilitzar majúscules per als noms de les etiquetes, però el W3C (el consorci global que manté l'estàndard HTML) recomana l'ús de minúscules (i XHTML requereix minúscules).

HTML atribueix un significat especial per a qualsevol cosa que comença amb el signe menor que ("<") i acaba amb el símbol major que (">"). El marcatge es denomina tag. Assegureu-vos de tancar l'etiqueta, ja que algunes etiquetes estan tancades per defecte, mentre que altres poden produir errors inesperats si s'oblida de l'etiqueta final.

Aquí teniu un exemple senzill:

<p>This is text within a paragraph.</p>

En aquest exemple hi ha una etiqueta d'inici i una etiqueta de tancament. Les etiquetes de tancament són les mateixes que l'etiqueta d'inici, excepte amb una barra diagonal immediatament després del signe menys que, de l'anterior. La majoria dels elements en HTML s'escriuen utilitzant ambdues etiquetes d'inici i de tancament. Per escriure codi vàlid, heu de niar correctament les etiquetes d'inici i tancament, és a dir, escriure etiquetes de tancament en l'ordre oposat a les etiquetes d'inici

Aquest és un exemple de codi vàlid:

<em>I <strong>really</strong> mean that</em>.

Aquest és un exemple de codi no vàlid:

<!--Invalid:--> <em>I <strong>really</em> mean that</strong>.

En l'exemple vàlid, el element interior <strong> es tanca abans que l'element extern <em>.

Alguns elements no contnen cap contingut de text o qualsevol altre element. Aquests són els elements buits i no necessiten etiqueta de tancament. Aquest és un exemple:

<img src="smileyface.jpg" alt="Smiley face" >

Els elements buits en mode XHTML solen estar tancats usant una barra inclinada.

<img src="smileyface.jpg" alt="Smiley face" />

En HTML aquesta barra té un significat que no està implementat a Firefox pel que no ha de ser utilitzat. No tanqui els elements buits en mode HTML.

Atributs

L'etiqueta d'inici pot contenir informació addicional, com en l'exemple anterior. Aquesta informació es denomina attribute. Els atributs en general constan de 2 parts:

  • Un atribut nom
  • Un atribut valor

Alguns atributs només poden tenir un valor. Són atributs booleans i poden ser escurçats únicament especificant el nom de l'atribut o deixant el valor de l'atribut buit. Per tant, els 3 exemples següents tenen el mateix significat:

<input required="required">

<input required="">

<input required>

Els valors d'atribut que consisteixen en una sola paraula o nombre poden escriure's com són, però han d'incloure valors que continguin espais entre cometes (ja sigui simple (') o doble (")). Molts desenvolupadors sempre utilitzen cometes per evitar errors com això:

<p class=foo bar> <!--(Beware, this probably does not mean what you think it means.)-->

En aquest exemple se suposa que el valor és "foo bar", però ja que no hi havia cometes el codi és interpretat com si hagués estat escrit així:

<p class="foo" bar="">

També XHTML requereix que els valors dels atributs sempre han de ser anomenats, fins i tot els atributs que requereixen un valor numèric.

Referències a entitats de caràcters

Referències a entitats de caràcters (Sovint anomenades casualment entities) s'utilitzen per imprimir caràcters que tenen un significat especial en HTML. Per exemple, HTML interpreta els símbols menys que i major com a delimitadors d'etiquetes. Quan es vol mostrar un símbol de major que, en el text, es pot utilitzar una referència a entitat de caràcter. Heu de saber aquestes quatre referències a entitats de caràcters comuns:

  • &gt; denota el signe més gran que (>)
  • &lt; denota el signe menor que (<)
  • &amp; denotes el signe ampersand (&)
  • &quot; denota cometes dobles (")

Hi ha moltes més entitats, però aquestes quatre són les més importants perquè representen els caràcters que tenen un significat especial en HTML.

Comentaris i doctype

HTML té un mecanisme per a la incorporació de comentaris (comments) que no es visualitzen quan la pàgina es presentada en un browser. Això és útil per explicar una secció de marcat, deixar notes per a altres persones que podrien treballar a la pàgina, o per deixar-nos recordatoris a nosaltres mateixos. Els comentaris HTML estan tancats en símbols d'aquesta manera:

<!-- This is comment text -->

A més de les tags, el contingut del text, i les entities, un document HTML ha de contenir una declaració doctype en la primera línia. La declaració doctype no és una etiqueta HTML, sinó que li diu al navegador en quina versió d'HTML està escrita la pàgina.

En HTML5, només hi ha una declaració i s'escriu així:

<!DOCTYPE html>

El doctype té una llarga i complexa història, però per ara tot el que necessiteu saber és que aquest doctype indica al navegador com interpretar el codi HTML i CSS d'acord amb les normes W3C i no tractar de fer veure que és Internet Explorer dels anys 90. (Consulteu maneres particulars (quirks mode))

En HTML 4.01, doctype es refereix a un DTD (Document Type Definition), ja que es basa en SGML. Hi havia tres declaracions doctype diferents en HTML 4.01: strict, transitional i frameset.

El DTD strict contenia tots els elements i atributs HTML, però NO els elements de presentació o desaprovats (com font). Els conjunts de marcs no se'ls va permetre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

El DTD transitional contenia tots els elements i atributs HTML, INCLOENT els elements de presentació o desaprovats (com font). Els conjunts de marcs no se'ls va permetre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

El DTD frameset permet un contingut de marcs i en cas contrari és el mateix que HTML 4.01 Transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

Un document petit, però complet

Posem això junt, aquest és un petit exemple de document HTML. Podeu copiar aquest codi en un editor de text, guardar-lo com myfirstdoc.html, i carregar-lo en un browser. Assegureu-vos que està guardat utilitzant la codificació de caràcters UTF-8. Atès que aquest document no utilitza un estil, es veurà molt simple, però és només un petit començament.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letters "one" -->
  <p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

Document Tags and Contributors

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