Estructura i creació de pàgines web

En un lloc web trobem diferents pàgines web, i cal buscar una uniformitat entre aquestes pel que fa a l’organització dels seus elements dins l’espai. Mantenir aquesta uniformitat fa que la navegació pel lloc web sigui més fàcil per a l’usuari i proporciona sensació de continuïtat.

La figura presenta les diferents parts que es poden arribar a trobar en una pàgina web. Una pàgina web típica no inclou normalment totes aquestes parts, sinó que presenta una estructura més simple. Les parts bàsiques d’una pàgina web són:

• Capçalera
• Columna lateral
• Àrea de contingut
• Peu de pàgina

La capçalera és la part de la pàgina que és més propensa a repetir-se entre pàgines d’un mateix lloc web.

A la capçalera hi trobem la identitat i la navegació general del lloc web, així com una caixa de text per cercar continguts i altres eines com ara la cistella de compra (en botigues virtuals).

En aquesta àrea no pot faltar un enllaç a la pàgina d’inici del lloc web, en anglès homepage. Aquest enllaç acostuma a anar associat a la imatge del logotip de l’empresa o organització. En gairebé la totalitat de les pàgines web se situa a la cantonada superior esquerra de la pàgina.

El menú de navegació també acostuma a situar-se dins l’àrea de capçalera. Aquest menú permet a l’usuari accedir a les altres pàgines del lloc web mitjançant hipervincles. El format en què es presenta el menú pot variar segons l’estil de la pàgina, i pot ser des d’una simple taula fins a una disposició en pestanyes. La inclusió d’un menú de navegació a la capçalera afavoreix la usabilitat de la pàgina i la seva optimització per a motors de cerca.

En llocs web adaptats per a dispositius mòbils, on les mides de les pantalles són reduïdes, el menú s’acostuma a col·locar en una icona representada per tres línies horitzontals paral·leles, de forma que es desplega quan es prem sobre aquesta icona. A aquesta icona de menú se la coneix amb el nom d’“icona d’hamburguesa” (hamburguer icon, en anglès). Actualment, l’ús d’aquesta icona s’ha estès també a webs que es visualitzen des de qualsevol pantalla, sigui petita o no. La figura mostra un exemple de menú desplegat amb la icona de tres línies horitzontals.

Font: Wikipedia

La caixa de cerca acostuma a estar situada a la part superior dreta de l’àrea de capçalera. Aquesta eina permet al visitant cercar contingut dins del lloc web.

Altres elements que es troben a la capçalera poden ser la cistella de compra, en el cas de botigues en línia, i bàners publicitaris, que habitualment se situen per sobre dels altres elements de la capçalera.

Les columnes laterals (en anglès, sidebar columns) són àrees que s’utilitzen per a enllaços de navegació interna (dins del mateix lloc web), enllaços externs, blocs d’informació de contacte, caixa de cerca (si no es troba a la capçalera) o publicitat. El menú de navegació acostuma a situar-se a la barra lateral esquerra, mentre que la publicitat se sol col·locar en la barra lateral dreta.

No totes les pàgines web han de tenir les dues columnes laterals, podem trobar-ne amb només una o amb cap de les dues.

Aquesta zona està destinada a mostrar el contingut principal de la pàgina web. La distribució dels elements en aquesta àrea és variable, ja que depèn del tipus i de la quantitat de continguts (text, imatge, vídeo) que es mostrin i de la composició que es vulgui utilitzar. És interessant, però, tenir en compte algunes normes que faciliten la visualització d’aquests continguts al visitant:

• Situar un títol a la part superior utilitzant les etiquetes HTML <h1>. Fer que el títol contingui paraules clau és una ajuda per al cercador intern i també per a la millor indexació en els motors de cerca.
• Crear enllaços per tornar a l’inici de la pàgina en cas que el contingut sigui molt extens.
• Afegir un navegador de pàgines (enllaços a la pàgina següent i anterior) en cas que el contingut estigui repartit en diferents pàgines.
• Mostrar la data de publicació o d’actualització del contingut. En el cas de diaris, revistes digitals o blogs, la data se situa a la part superior.
• Mostrar la ruta de navegació (en anglès, breadcrum navigation) en una línia de text situada a la part superior, permetent així a l’usuari veure on és la pàgina que està consultant en relació amb la jerarquia del lloc web.

Al peu de pàgina (en anglès, footer) generalment hi trobem informació sobre l’autoria del lloc web, el mapa del lloc, els drets sobre els continguts, informacions legals, política de privacitat i dades de contacte, entre d’altres. També és habitual en aquesta àrea repetir enllaços de navegació per a les diferents seccions del lloc web.

Els llenguatges de desenvolupament web són HTML, CSS i JavaScript.

La figura mostra de forma esquemàtica com queden presentats, mitjançant un CSS, els continguts d’un fitxer HTML.

Font: "Web Style Guide" de Patrick J. Lynch. Ed. Yale University Press

Aquests llenguatges de desenvolupament web es descriuen com a:

• HTML (Hyper Text Markup Language): s’utilitza per al contingut i l’estructura de la pàgina web. El llenguatge HTML proposa una sèrie de marques o etiquetes que, inserides juntament amb la informació, estableixen el seu format. Aquestes etiquetes són interpretades pel navegador, que és l’encarregat de mostrar el contingut formatat. El Consorci W3C (World Wide Web Consortium) s’encarrega de l’estandardització del llenguatge HTML. Actualment, l’estàndard que s’utilitza per a la creació de pàgines web és l’HTML5.
• CSS (Cascading Style Sheets): els fulls d’estils en cascada s’utilitzen per definir la presentació de la pàgina web. Ofereixen la possibilitat de definir regles i estils que especifiquen com mostrar els diferents elements HTML en diferents tipus de dispositius, com ara pantalles d’ordinadors, mòbils, tauletes, etc. Els CSS permeten la separació del contingut del document (escrit en HTML o en un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, els colors i les fonts. Aquesta separació pot millorar l’accessibilitat al contingut, proporcionar més flexibilitat i control en l’especificació de característiques de presentació i permetre que múltiples pàgines comparteixin un format comú.
• JavaScript: s’utilitza per programar el comportament de la pàgina web. És un llenguatge de programació interpretat i orientat a objectes. S’utilitza en el costat del client, és a dir, que s’executa en el navegador web, la qual cosa permet millores en la interfície d’usuari. El seu ús més comú és escriure funcions (petits programes) que s’inclouen en les pàgines web.

Per tal de desenvolupar un lloc web és útil fer servir un editor o gestor d’HTML. Aquest tipus de programari ofereix facilitats per a l’edició de documents HTML i, a més, també pot proporcionar funcionalitats avançades per gestionar el codi i administrar el lloc web.

Existeixen diverses opcions per a l’edició del codi d’un lloc web: editors HTML locals o editors HTML en línia. Les funcionalitats més importants que inclouen i que els fan adequats per al desenvolupament web són:

• Creació de documents nous d’una manera ràpida i còmoda.
• Gestió de plantilles de diversos documents.
• Sintaxi acolorida per a una millor llegibilitat dels documents.
• Validació del codi.
• Accés ràpid al codi amb l’ajuda de marcadors.
• Configuració del sagnat i de l’estil del codi.
• Autocompleció del codi amb tancament automàtic d’etiquetes.
• Inserció d’etiquetes i atributs mitjançant auxiliars.
• Gestió de fragments de codi reusable, en anglès snippets.
• Gestió de projectes.
• Connectors addicionals, que donen més funcionalitats al gestor.

Posteriorment, per a la visualització de la pàgina web desenvolupada, s’utilitza el navegador web. Alhora, aquest incorpora una sèrie d’eines per als desenvolupadors que ajuden en la depuració del codi de la pàgina.

Avui dia hi ha una gran quantitat d’editors d’HTML que permeten el desenvolupament d’un lloc web, tots els quals tenen característiques comunes. Alguns dels editors d’HTML amb els quals podem treballar actualment són Brackets, Sublime Text, Atom… Aquestes són les seves característiques més rellevants:

• Brackets: permet veure dos o més arxius a la vegada mitjançant la funció Inline Editors. També incorpora la funcionalitat Live Preview, que permet visualitzar l’aspecte de la pàgina web a mesura que es va desenvolupant. A més a més, facilita la manera de trobar, afegir o modificar les correlacions entre documents HTML i CSS gràcies a la funcionalitat Prepocessor Support. És de codi obert i es troba disponible per a Windows, Linux i Mac OS. Es pot descarregar a: brackets.io. En la figura en podeu apreciar un exemple:

• Sublime Text: disposa de molts comandaments de teclat que agilitzen l’accés a les funcions i les característiques que ofereix. Així mateix, també compta amb plugins i complements que estan disponibles per a llenguatges de programació específics. La seva interfície és en pestanyes i mostra una vista en miniatura per visualitzar en quina part del codi s’està treballant. Es distribueix com un software d’avaluació i es troba disponible per a Windows, Linux i Mac OS X. Es pot descarregar a: www.sublimetext.com. En la figura en podeu apreciar un exemple:

• Atom: proporciona les funcions més importants per al desenvolupament web i està integrat en les eines del navegador. És de codi obert i està disponible per a Windows, Linux i Mac OS X. Es pot descarregar a: atom.io. En la figura en podeu apreciar un exemple.

A l’hora de fer el disseny d’una pàgina web es pot optar per l’ús d’eines en línia que permeten escriure el codi directament des del navegador, com poden ser Codepen, Online HTML Editor o Real-Time HTML Editor, entre molts altres. Les seves característiques principals són les següents:

• Codepen: aquesta eina està enfocada a crear un prototip ràpid i a provar fragments de codi. També permet que diversos usuaris col·laborin en un mateix projecte i que comparteixin fragments de codi. La trobem disponible a: codepen.io/pen. Vegeu-ne un exemple d’ús en la figura. A més, Codepen:
  • Ofereix una interfície d’usuari i funcionalitats bastant intuïtives i fàcils d’usar.
  • Permet actualitzar ràpidament el codi HTML, CSS o JavaScript i obtenir resultats immediats.
  • Permet guardar i compartir fragments de codi a través d’enllaços personalitzats, i incentiva la col·laboració oferint l’oportunitat de contribuir amb altres desenvolupadors.

Interfície gràfica de Codepen

• Online HTML Editor: aquest editor permet generar el codi dels documents HTML a partir d’una interfície gràfica. Consta de dues parts, una per crear la pàgina web mitjançant una interfície gràfica (a l’esquerra), la qual permet donar format al text, afegir-hi imatges, etc., i una altra per escriure directament el codi HTML (a la dreta). La trobem disponible a: html-online.com/editor. Vegeu un exemple d’ús en la figura:

Interfície gràfica de l'editor Online HTML Editor

• BDS Editor Online: permet visualitzar diferents panells on es pot incloure codi HTML, Javascript o CSS. També permet una previsualització de la pàgina web. Està disponible a: jseditor.proyectosbds.com. Vegeu-ne un exemple d’ús en la figura:

Interfície gràfica de l'editor BDS Editor

El llenguatge de marques HTML5 és la versió actual del llenguatge HTML. És el llenguatge que s’utilitza per al disseny de pàgines web i fa referència a un estàndard desenvolupat per W3C.

L’estàndard HTML5 conté un conjunt ampli de tecnologies que permet crear llocs web, així com aplicacions web d’envergadura. Algunes característiques d’HTML5 agrupades per la seva funció són:

• Semàntica: permet descriure amb major precisió quin és el seu contingut.
• Rendiment i integració: proporciona una major optimització de la velocitat i un major ús del maquinari a través de la introducció d’un disseny adaptatiu.
• CSS3: llenguatge de fulls d’estils que ofereix una gran varietat d’opcions per fer dissenys més sofisticats
• Multimèdia: proporciona un excel·lent suport per utilitzar contingut multimèdia, com ara àudio i vídeo nadiuament.
• Gràfics i efectes 2D/3D: proporciona una àmplia gamma de noves característiques que s’ocupen dels gràfics a la web, com ara canvas 2D, WebGL, SVG, etc.

El que s’anomena web semàntica és un concepte que proposa la inclusió de metadades semàntiques a la web perquè agents informàtics com poden ser els navegadors o robots web dels motors de cerca puguin processar el seu contingut, raonar amb aquest, combinar-lo i fer deduccions lògiques per resoldre i donar una resposta més encertada.

El llenguatge HTML5 també permet fer dissenys web adaptatius o responsius, en anglès Responsive Web Design. Així doncs, disposa de tècniques perquè una web sigui visible de manera òptima en tot tipus de dispositius capaços de visualitzar pàgines web, és a dir, des de mòbils fins a ordinadors o tauletes. Per això s’utilitzen estructures amb imatges fluides i fulls d’estils CSS.

Els objectius de l’HTML5 són la simplicitat i la permissivitat. Així doncs, HTML5 reprèn la sintaxi permissiva d’HTML4 i fa desaparèixer les regles estrictes de sintaxi d’XHTML. No obstant això, és recomanable seguir algunes de les normes de sintaxi d’XHTML:

• Usar només minúscules.
• Usar les cometes dobles per indicar el valor dels atributs.
• Tancar totes les etiquetes.
• Sagnar el codi per augmentar la llegibilitat.

<NomEtiqueta atribut1="valor atribut1" ... atributN="valor atributN"> 
  Elements afectats per l'etiqueta   
</NomEtiqueta>

Cada etiqueta pot tenir una sèrie d’atributs que modifiquen el seu comportament (vegeu l’exemple següent).

<!-- En la següent línia definim un paràgraf -->
<p>Aquesta és la primera pàgina web</p> 
 
<!-- Fixem-nos en el tancament de la següent etiqueta, directament amb la /
-->
<br /> 
 
<!-- En la següent línia estem definint un link -->
<a href="https://ioc.xtec.cat/educacio/" target="_blank">Link IOC</a>

Com es pot apreciar en l’exemple anterior, els comentaris d’HTML5 es posen entre els caràcters <!— i —>.

Generalment, l’estructura d’una pàgina web en HTML5 acostuma a tenir un patró semblant.

Exemple d'estructura d'una pàgina web en HTML5

<!DOCTYPE html> 
<html lang=”es”>
<head>
    <meta charset=”UTF-8” />
    <title>Primera pàgina HTML5</title>
</head> 
<body> 
    <h1> Això és HTML5 </h1>
    <p>Aquí hi veiem el contingut de la pàgina web. </p>
</body> 
</html>

En la figura es pot apreciar com es visualitza una pàgina web en el navegador.

En l’exemple anterior es pot apreciar que el document html s’estructura en dues parts: head i body.

Al head hi ha la informació addicional de la pàgina web, com ara el títol, que es visualitza a la pestanya del navegador a través de l’element <title>, o els elements <meta>, <script> i <link>, entre d’altres.

Al body hi ha el contingut que es visualitza de la pàgina web, el qual pot estar format per multitud d’elements html que donen format al document.

Encara que en l’especificació HTML5 s’ha fet un gran esforç per relaxar la sintaxi i les etiquetes <html>, <head> i <body> no serien obligatòries, és del tot recomanable que hi siguin.

Vegem alguns dels apartats que es poden definir en una pàgina web:

• El tipus de document: la primera línia d’un document HTML correspon a la declaració del tipus de document, el doctype, i serveix per indicar quina versió d’HTML s’ha utilitzat. En el següent exemple podreu apreciar que un dels objectius d’HTML5 és la simplicitat i sobretot la compatibilitat amb versions anteriors, i també amb versions futures; per tant, incloure el nombre de versió no tindria sentit.

<!--Declaració del doctype en HTML5-->
<!DOCTYPE html>
 
<!-- Declaració del doctype en HTML4.01 transicional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!--Declaració del doctype en XHTML 1.0 estricte-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• El document HTML: l’element html indica el principi del contingut de la pàgina HTML.

<!-- Sintaxi en HTML5. -->
  <html lang="es">

• La codificació de caràcters: se sol indicar quina codificació de caràcters s’ha utilitzat en una pàgina web (vegeu-ne la sintaxi). D’altra banda, saber quina codificació de caràcters s’ha utilitzat per al contingut del fitxer HTML permet al navegador interpretar la informació textual i representar-la correctament. Si la codificació no està ben indicada pot passar que apareguin signes estranys en lloc de caràcters, com per exemple lletres accentuades. La figura mostra un exemple de com es visualitza un document HTML que no conté la informació de codificació de caràcters.

<!-- Sintaxi en HTML5 -->
  <meta charset="UTF-8" />

• Estils CSS: per indicar els estils que s’utilitzaran en la pàgina html.

<!-- Sintaxi en HTML5 -->
  <link href="elsMeusEstils.css" rel="stylesheet" />

• Els scripts: en una pàgina web s’hi poden incloure scripts.

<!-- Sintaxi en HTML5 -->
  <script src="elsMeusScripts.js"> </script>

El codi del full d’estils en cascada, CSS, i el codi JavaScript poden incloure’s en el mateix document HTML (cas A). Ara bé, si es tracta de codis llargs i que no són d’ús exclusiu per a una sola pàgina web, els trobem en fitxers separats de l’HTML (cas B). En aquest segon cas, el fitxer HTML ha de fer referència als fitxers dels CSS i dels scripts. L’estructura del fitxer HTML dels dos casos presentats es pot veure en la figura:

Font: Hannes Hirzel, HTML, CSS and JavaScript. OpenStax CNX. Sota llicència Creative Commons Attribution License 4.0.

Tots els elements de l’estàndard HTML5 i els seus atributs, tant els obligatoris o requerits com els que són opcionals, es poden consultar, per exemple, a la web mzl.la/1ow4zxR.

A l’especificació HTML5 també es determina quins elements s’han declarat obsolets. HTML5 ha de ser compatible amb les versions anteriors; així doncs, els elements obsolets seguiran essent interpretats correctament pels navegadors.

Si es volen consultar tots els elements HTML estàndards, els no estàndards i els que estan obsolets i els que no es pot accedir, per exemple, a mzl.la/1qTSVwu.

Els encapçalaments, headings, són molt importants en HTML5. Es defineixen amb les etiquetes <h1> fins a <h6>, essent <h1> l’encapçalament més important i <h6> l’encapçalament menys important.

Automàticament, els navegadors afegeixen un espai (marge) abans i després de cada encapçalament.

És millor utilitzar els encapçalaments per escriure títols en lloc d’utilitzar, per exemple, les etiquetes <bold> o <big>, ja que els motors de cerca usen els encapçalaments per indexar l’estructura i el contingut del lloc web.

Exemple de visualització de diferents encapçalaments

<!doctype html>
 
<html lang="es">
<head>
  <meta charset="UTF-8" />
	<title>Primera pàgina web</title>
</head>
<body>
	<h1>Aquest és l’encapçalament 1</h1>
	<h2>Aquest és l’encapçalament 2</h2>
	<h3>Aquest és l’encapçalament 3</h3> 
</body>
</html>

Vegeu el resultat de l’exemple en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/xZJXVJ?editors=1000.

Els paràgrafs es defineixen amb l’element <p>. Realment no podem estar segurs de com es visualitzarà un paràgraf, ja que hi ha diferents dimensions de pantalla i el paràgrafs es veuran utilitzant més o menys línies.

Amb HTML no es pot canviar la sortida afegint espais en blanc o salts de línia, ja que el navegador abolirà aquests caràcters extres per mostrar la pàgina. D’aquesta manera, qualsevol nombre d’espais en blanc o de salts de línia comptarà com un sol espai en blanc.

Si es vol que es tinguin en compte els espais en blanc i/o salts de línia podem utilitzar l’element <pre>.

Exemple de visualització de paràgrafs

<!doctype html>
 
<html lang="es">
<head>
  <meta charset="UTF-8" />
	<title>Primera pàgina web</title>
</head>
<body>
	<h1>Aquest és l’encapçalament 1</h1>
	<p>
	Aquest paràgraf, 
	conté diverses línies
	en el codi font,
	però el navegador
	no les mostra.
	</p>
 
	<pre>
	Aquest     paràgraf, 
	conté diverses     línies
	en el    codi font,
	però   el     navegador
	no    les    mostra.
	</pre>
</body>
</html>

El resultat de l’exemple es pot visualitzar en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/pgZWMK?editors=1000.

Hi ha diverses maneres d’especificar els diferents colors que s’utilitzen per mostrar el contingut del lloc web:

• Amb el nom del color en anglès
• Amb el seu codi RGB
• Amb el seu codi hexadecimal

En HTML5, els colors se solen representar a través d’estils en CSS; així, una manera d’aplicar un color a un element és a través del seu atribut style.

Vegem amb una mica més de detall cadascuna de les opcions anteriors:

• Amb el nom del color en anglès: és una manera senzilla d’especificar un color, encara que aquest mètode limita la quantitat de colors representables.

Exemple de visualització de colors

<p>Colors pel seu nom:</p>
<p style="color:red">Text de color vermell.</p>
<p style="color:orange">Text de color taronja.</p>
<p style="color:yellow">Text de color groc.</p>
<p style="color:cyan">Text de color cian.</p>
<p style="color:blue">Text de color blau.</p>

El resultat el podeu visualitzar en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/vLzpPz?editors=1000.

• Amb el seu codi RGB: la paleta de colors RGB prové de la combinació de tres colors primaris: vermell, verd i blau. Per tant, per especificar el codi d’un color en RGB ho farem a través de tres números referents a la quantitat de vermell, verd i blau, respectivament. D’aquesta manera podem especificar qualsevol combinació de colors.

<p>Colors amb el seu codi RGB:</p>
<p style="color:rgb(255,0,0)">Text de color vermell.</p>
<p style="color:rgb(255,165,0)">Text de color taronja.</p>
<p style="color:rgb(255,255,0)">Text de color groc.</p>
<p style="color:rgb(0,255,255)">Text de color cian.</p>
<p style="color:rgb(0,0,255)">Text de color blau.</p>

• Amb el seu codi hexadecimal: el codi RGB també es pot especificar en hexadecimal, en lloc d’especificar tres números decimals. Aquest codi s’expressa amb una tira de caràcters que comença amb el caràcter “#” seguit de sis caràcters hexadecimals, dos per a cada color primari.

<p> Colors amb el seu codi HEX:</p>
<p style="color:#FF0000">Text de color vermell.</p>
<p style="color:#FFA500">Text de color taronja.</p>
<p style="color:#FFFF00">Text de color groc.</p>
<p style="color:#00FFFF">Text de color cian.</p>
<p style="color:#0000FF">Text de color blau.</p>

Per donar un format d’estil a un element HTML s’utilitza l’atribut style. Per aplicar estils a través d’aquest atribut es fa de la següent manera:

style=“propietat1:valor1; … propietatN:valorN;”

On propietat fa referència a una propietat CSS i valor fa referència a un valor CSS.

Exemple d'atribut style

  <h1 style="font-family:Verdana; color:blue;">Títol1</h1>
 
  <p style="font-family:arial; color:red; font-size:200%;">
  Paràgraf amb format
  </p>

El resultat de l’exemple es pot visualitzar en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/XXBzWG?editors=1000.

A banda de donar format al text a través de l’atribut style, el llenguatge HTML també proporciona altres elements per fer-ho, com els que es poden veure en la taula:

Exemple de format negreta i itàlica

  <p>Aquest text és normal.</p>
  <p><b>Aquest text està en negreta</b>.</p>
  <p><strong>Aquest text és important</strong>.</p>
  <p><i>Aquest text està en itàlica</i>.</p>
  <p><em>Aquest text està emfatitzat</em>.</p>  

El resultat de l’exemple es pot visualitzar en la figura:

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/LGBOJb?editors=1000.

Fixeu-vos en l’exemple anterior en el fet que la visualització del text a través dels elements <b> i <strong> és pràcticament igual, però si s’utilitza l’element <strong> s’afegeix significat semàntic al text i s’està indicant que aquest és important.

Podeu apreciar el mateix entre els elements <i> i <em>. D’aquesta manera, si s’utilitza l’element <em> també s’està afegint significat semàntic al text.

Exemple d'altres formats

  <h2>HTML format del text <small>petit</small></h2>
 
  <h2>HTML format del text <mark>remarcat</mark></h2>
 
  <p>Aquest text és <del>obsolet</del>.</p>
  <p>Aquest text és <ins>obligatori</ins>.</p>
 
  <p> Aquí posem un superíndex: E = m·c<sup>2</sup></p>
  <p> Aquí posem un subíndex: H<sub>2</sub>O</p>

El resultat de l’exemple es pot visualitzar en la figura:

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/VeByKQ?editors=1000.

En HTML, les imatges es defineixen a través de l’element <img>.

<img src="images/img.jpg" alt="text alternatiu" style="width:120px;height:120px;" />

La mida de la imatge també es pot especificar a través dels atributs width i height. És recomanable, però, fer-ho a través de l’atribut style, per prevenir possibles fulls d’estils que puguin canviar la mida de la imatge.

Visualització d'una imatge

<head>
  <meta charset="utf-8"/>
    <title>Primera pàgina web</title>
    <style>
        img {width:100%;}
    </style>
</head>
<body>
 
    <img src="./html5.png" alt="Icona" style="width:128px;height:128px;" />
    <img src="./html5.png" alt="Icona" width="128" height="128" />
 
</body>

El resultat de l’exemple es pot visualitzar en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/EPporb?editors=1100.

Veiem, doncs, que un estil en CSS podria modificar la visualització de la imatge.

Sovint, perquè el disseny del lloc web sigui adaptatiu, cal mostrar una imatge o una altra més petita en funció de la mida de la pantalla o de la resolució del dispositiu, així com en funció de la mida del navegador des del qual accedim al lloc web.

No obstant això, a l’hora de visualitzar una imatge cal tenir clars els conceptes de resolució de pantalla i de resolució de la imatge:

Per a una correcta visualització i per reduir la quantitat d’informació descarregada és important intentar adaptar al màxim els píxels en què es visualitzarà la imatge amb els píxels que realment té.

Els enllaços són els elements que permeten a l’usuari navegar d’una pàgina web a una altra.

L’element que permet definir un enllaç en HTML és <a>.

Vegeu els atributs que es poden especificar per a aquest element en la taula taula.

Exemple d'enllaços

  <a href="http://www.google.es" target="_blank">Enllaç a Google</a>
  <br />
  <a href="pagina.html" style="color: darkblue; text-decoration:none"> Enllaç a una pàgina del nostre lloc web </a>
  <br />  
  <a href="./imatgeGran.jpg"><img src="./imatgePetita.jpg" alt="img1" style:"width:30; height:30"/></a>

El resultat de l’exemple es pot visualitzar en la figura.

Podeu veure aquest exemple en el següent enllaç: codepen.io/ioc-daw-m09/pen/PZdBgO.

Vegeu algunes consideracions sobre els exemples anteriors:

• L’atribut href és obligatori.
• Si el destí de l’enllaç és una pàgina externa al vostre lloc web cal introduir l’URL sencer.
• Si el destí és una pàgina del nostre lloc web només cal que poseu la ruta d’aquesta pàgina, i en podeu obviar el domini i el protocol.
• Si voleu que l’enllaç permeti la descàrrega d’un fitxer o recurs, en el destí de l’enllaç hi haurà la ruta d’aquest fitxer descarregable. Fixeu-vos també que una imatge pot ser un enllaç.

• L’atribut target pot prendre per valor el nom de l’element on voleu que s’obri l’enllaç. El valor predefinit _blank significa que s’obre en una nova pestanya.
• Els enllaços, per defecte, són de color blau i apareixen subratllats, però podeu modificar el seu estil mitjançant l’atribut style.

Si voleu veure el logotip del lloc web o la icona a la barra d’adreces o a la pestanya del navegador haureu de crear la icona .ico, reanomenar-la amb el nom favicon.ico i posar-la a l’arrel del lloc web.

El motiu que el fitxer es digui favicon.ico i es posi a l’arrel del lloc és perquè, per defecte, els navegadors com Firefox, Safari o Opera busquen en aquesta ubicació.

Per assegurar-nos que el navegador troba el nostre favicon és recomanable inserir la següent línia de codi a la capçalera del nostre document HTML (entre les etiquetes <head> i </head>), indicant la ruta del favicon, que en aquest cas és l’arrel del lloc:

  <link rel=”Shortcut Icon” href=”favicon.ico” type=”image/x-icon” />

Per crear la nostra icona primer cal fer una imatge quadrada, per exemple 32×32 píxels, en format JPG, GIF o PNG.

Si es vol que la icona tingui un fons transparent, llavors aquesta imatge inicial ha de ser en format PNG i amb el fons transparent.

Per convertir aquesta imatge a .ico es pot fer a través del web www.favicon.cc.

Amb l’estàndard HTML5 arriben nous elements que aporten semàntica a l’estructura de la pàgina (page layout); en destaquem els següents:

• Element <header>: permet inserir una zona de visualització per a les capçaleres.
• Element <footer>: permet inserir una zona de visualització per als peus de pàgina.
• Element <nav>: permet inserir una zona de visualització per a la navegació amb vincles d’hipertext.
• Element <section>: permet agrupar elements que tinguin la mateixa temàtica.
• Element <article>: permet inserir un contingut autònom.
• Element <aside>: permet mostrar un contingut relacionat amb el contingut al qual estigui vinculat.
• Element <main>: permet representar el contingut principal de la pàgina.

En la figura podeu apreciar l’estructura del contingut d’una pàgina web en HTML5:

Per a la visualització de cada element s’utilitza un estil en llenguatge CSS. Així, la posició i el color de cadascun d’aquests elements està definit a través d’un estil CSS al head d’aquesta pàgina, i per tant, en el body només hi trobem el contingut.

Per tenir una pàgina web, o per extensió un lloc web, accessible a través d’Internet, tots els fitxers que en formen part han d’estar allotjats a un ordinador que tingui les funcions de servidor web. Un servidor web és una aplicació que permet acceptar peticions del protocol de transferència d’hipertext HTTP i respondre-les servint (enviant) pàgines web (normalment fitxers HTML). L’ordinador on es troba instal·lada aquesta aplicació també es coneix com a servidor web.

Qualsevol ordinador amb una connexió d’accés a Internet i les aplicacions específiques instal·lades pot funcionar com a servidor web. Entre les aplicacions necessàries hi ha la de servidor web, que és imprescindible perquè és el programa que fa actuar l’ordinador com a tal. L’Apache HTTP és una de les aplicacions de servidor web més utilitzades, juntament amb l’IIS (Internet Information Server) de Microsoft. Altres aplicacions que trobem actuant en un servidor web són el servidor de bases de dades MySQL i intèrprets de llenguatges de programació PHP i Perl. Totes aquestes aplicacions, excepte l’IIS, són programari lliure de codi obert.

Un dels requeriments bàsics perquè un ordinador actuï com a servidor web és que estigui engegat i connectat a Internet les vint-i-quatre hores del dia i els tres-cents seixanta-cinc dies de l’any i disposar de dispositius de seguretat davant de possibles fallades d’alimentació o xarxa. A part, l’ordinador ha de comptar amb unes característiques de maquinari determinades (memòria, processador, disc dur) i estar equipat amb sistemes que en garanteixin l’estabilitat.

La majoria de les empreses no tenen un servidor web a les seves oficines o instal·lacions, sinó que contracten el servei d’allotjament web a companyies especialitzades, com per exemple cdmon (www.cdmon.com/ca) o dinahosting (ca.dinahosting.com).

Habitualment, les empreses de hosting ofereixen diverses opcions per contractar el servei d’allotjament web. L’opció més bàsica consisteix en el servei d’allotjament web compartit, on en un mateix ordinador hi trobem allotjats diferents llocs web; per tant, aquests llocs web comparteixen els recursos de l’equip servidor. Una altra opció és contractar un servidor virtual privat o VPS (Virtual Private Server), la qual cosa significa que es contracta l’ús d’una màquina virtual. La tercera opció passa per la contractació d’un servidor dedicat, és a dir, un ordinador servidor web d’ús exclusiu per al client.

L’accés a una pàgina web des d’un navegador implica que el navegador ha de fer una petició a un servidor web determinat perquè aquest li transfereixi la informació necessària (fitxers HTML, CSS, imatges…) per visualitzar la pàgina web. La identificació dels equips connectats a Internet es fa a través de l’adreça IP que tenen. Recordar adreces IP és poc viable, per això s’utilitzen els noms de domini. Un nom de domini és un nom únic que permet identificar un lloc web a Internet, per exemple: ioc.xtec.cat.

Per saber a quina adreça IP correspon un nom de domini determinat cal consultar els servidors DNS. El sistema de noms de domini, DNS (Domain Name System), estableix una equivalència entre les adreces IP d’equips com servidors web i el seu nom de domini. Durant el procés d’accés a una pàgina web, els servidors DNS s’encarreguen de traduir el nom de domini escrit a l’URL (adreça d’Internet que s’escriu al navegador) a l’adreça IP del servidor que l’allotja.

Quan una empresa o organització vol publicar per primera vegada el seu lloc web necessita escollir i registrar un nom de domini. Habitualment s’opta per escollir el mateix nom que l’empresa, tal com www.nomempresa.cat. En companyies amb presència a diferents països es registren els dominis de cada país, i d’aquesta manera s’afavoreix un bon posicionament als resultats de cerca a per aquell país.

Exemple de nom de domini per a una promoció

En el llançament d’una promoció determinada hi ha empreses que utilitzen un lloc web específic amb un nom de domini pensat per a la campanya. És el cas d’una campanya de Granini que obsequia els seus consumidors amb caixes de fruita de temporada. Per a la promoció creen un web en el domini frutaparadaryregalar.com. En la figura podeu veure una captura de pantalla de la promoció de Granini.

Els noms de domini s’organitzen en diversos nivells:

• Els dominis de nivell superior o Top-Level Domain (TDL) són administrats per la Corporació d’Internet per a l’Assignació de Noms i Nombres (ICANN) en un registre centralitzat als EUA. En aquest nivell hi trobem els dominis genèrics (.com, .org, .edu, .net) i els dominis territorials (.cat, .es, .uk, .de, .fr, etc.).
• Els dominis de segon nivell són administrats per empreses registradores de domini coordinades per l’ICANN. Són dominis que poden registrar els usuaris que creen llocs web. S’escriuen just davant del codi de domini de primer nivell, separats per un punt.
• Els dominis de tercer nivell i següents s’utilitzen normalment per crear subdominis o redireccionar a un servidor determinat. S’escriuen just davant del domini de segon nivell, separats per un punt.

Per exemple, en l’adreça ioc.xtec.cat, el TLD (domini de primer nivell) és “.cat”; el domini de segon nivell, “xtec” i el domini de tercer nivell, “ioc”. IOC és un subdomini de l’XTEC (Xarxa Telemàtica Educativa de Catalunya).

El registre d’un domini és un servei que ofereixen la majoria d’empreses d’allotjament web. Per registrar el domini cal que no estigui ocupat. Quan s’inicia el procés de registre d’un domini, el primer que trobarem serà un cercador per verificar-ne la disponibilitat, però també podeu utilitzar webs com www.dondominio.com. En la figura podeu veure una captura de pantalla de la cerca de disponibilitat del domini “xtec.cat”:

Si un domini no està disponible es pot consultar qui n’és el propietari i quan caduca el registre al web www.whois.com/whois. Quan es registra un domini es paga per un període determinat (pot anar d’un fins a deu anys), i cal renovar-lo quan finalitza aquest període.

Un lloc web està format per un conjunt de pàgines web; per tant, per diversos fitxers en format HTML, i si cal, també per fitxers de fulls d’estil (CSS), codi JavaScript, imatges, vídeos o documents PDF, entre d’altres. És recomanable tenir aquests fitxers organitzats en carpetes. La figura mostra una possible organització dels fitxers d’un lloc web. Les pàgines HTML es desen a l’arrel del directori o carpeta principal del lloc web. La resta de fitxers s’organitzen en les seves carpetes corresponents.

Aquests fitxers han d’estar en un servidor web per tal que el lloc web sigui visible a Internet. El servidor enviarà els fitxers al navegador, que serà l’encarregat de muntar i presentar la pàgina web a visualitzar.

Per enviar els fitxers que componen un lloc web des del disc dur del nostre ordinador cap al servidor web, procés que s’anomena publicació web, existeixen diferents opcions:

• Aplicació web FTP del proveïdor d’allotjament. Moltes empreses d’allotjament web ofereixen la pujada de fitxers al servidor a través d’aplicacions FTP per a web pròpies. La figura mostra un exemple d’aplicació FTP per a web:

• Programes client d’FTP. Aquestes aplicacions utilitzen el protocol de transferència de fitxers (FTP). El proveïdor de serveis (ISP) d’allotjament web ha de proporcionar la informació de connexió, que és el nom (o adreça IP) del servidor FTP, el nom d’usuari i la contrasenya. Dos dels programes gratuïts de client FTP més utilitzats són el Filezilla i el WinSCP. La figura mostra una captura de la pantalla principal del programa WinSCP. A la part esquerra es visualitzen els fitxers i les carpetes de l’equip local, mentre que la part dreta correspon a l’equip remot (el servidor o el també anomenat amfitrió). Per pujar (enviar) arxius al servidor només cal seleccionar els fitxers o carpetes que es volen transferir de la part local i arrossegar-los fins a la part del servidor.