schoolvoorbeeld van een <em>efemeer Hoekige haakjes
Voorwaartse slash
Figuur 1.1 Dit is een typisch (X)HTML-element. De begin- en sluittag omsluiten de tekst die gemanipuleerd moet worden. In dit geval wordt het woord efemeer benadrukt, wat in de meeste gevallen betekent dat het cursief zal worden weergegeven.
Een spatie en een voorwaartse slash
Figuur 1.2 Lege elementen, zoals img, omsluiten geen tekstinhoud. Ze hebben een enkele tag die zowel dient om het element te openen als het te sluiten. In HTML is de laatste slash optioneel. In XHTML is deze slash verplicht.
colspan is een attribuut van id
februari
De waarde van het attribuut colspan
Figuur 1.3 Hier ziet u een td-element (voor een tabelcel) met een eenvoudig attribuut-waardepaar. Attributen bevinden zich altijd binnen een begintag van een element. De waarde van een attribuut moet altijd tussen dubbele aanhalingstekens staan.
Hoofdstuk 1 Bouwstenen van webpagina’s src is een attribuut van img Waarde van
src
width is eveneens een attribuut van img Waarde van width
Figuur 1.4 Sommige elementen, zoals img in dit voorbeeld, kunnen een of meer attributen met elk een eigen waarde hebben. De volgorde is niet belangrijk. Scheid elk attribuut-waardepaar door een spatie van het volgende paar.
Vooraf gedefinieerde waarde
Figuur 1.5 Sommige attributen accepteren uitsluitend specifieke waarden. Zo kan het attribuut media van het element link onder andere worden ingesteld op screen, handheld of print, maar niet op een getal.
Ik blijf me voortdurend verbazen over de wondermooie, delicate Blue Flax die op een of andere manier in mijn tuin bloeien. Ze staan er elke morgen fleurig bij, maar toch is er ‘s middags geen enkele bloem over. Ze zijn een schoolvoorbeeld van een <em>efemeer verschijnsel.
Figuur 1.6 De blokelementen, hier vet weergegeven, zijn div en p. De inline-elementen zijn img en em.
Hoofdstuk 1 Bouwstenen van webpagina’s
Figuur 1.7 Elk element van blokniveau begint op een nieuwe regel. De inline-elementen (in dit geval de afbeelding en de cursieve tekst) gaan verder op de regel die werd begonnen door het blokelement waarvan ze deel uitmaken.
... een <em>efemeer
... by Blue Flax Society
Figuur 1.8 Het element div is de ouder van de elementen img en p. Omgekeerd zijn de elementen img en p kinderen (en afstammelingen) van het div-element. Het eerst p-element is de ouder van de em-tag. De em-tag is een kind van de eerste p en ook een afstammeling (maar niet een kind) van de div.
Correct (geen overlappende regels)
... een <em>efemeer
... een <em>efemeer
Onjuist (de paren tags liggen over elkaar heen)
Figuur 1.9 Elementen moeten op de juiste manier worden genest. Als u eerst p en vervolgens em opent, moet u eerst em sluiten voordat u p sluit.
Hoofdstuk 1 Bouwstenen van webpagina’s
Ik blijf me voortdurend verbazen over de wondermooie, delicate Blue Flax die op een of andere manier in mijn tuin bloeien. Ze staan er elke morgen fleurig bij, maar toch is er ‘s middags geen enkele bloem over. Ze zijn een schoolvoorbeeld van een <em>efemeer verschijnsel.
Tijgerlelies lijken op hun neefjes in het dierenrijk. Ze verbergen zich in het gras en springen kleurig te voorschijn op het moment dat je dat het minst verwacht.
Ze zijn net zo alomtegenwoordig als de tijger zeldzaam is. Je vindt ze langs zo veel wegen dat ze wel <em>Ditch Lilies worden genoemd.
Figuur 1.12 In dit (X)HTML-document wordt verwezen naar een bestand met de naam tigerlily.jpg. Dit bestand wordt door de browser geopend en geladen wanneer de rest van de pagina wordt geladen.
Figuur 1.13 Naar afbeeldingen en andere niet-tekstinhoud wordt vanuit een webpagina verwezen, waarna de browser ze tezamen met de tekst weergeeft.
Hoofdstuk 1 Bouwstenen van webpagina’s
Bestandsnaam geheel in kleine letters
Bestandsextensie
tweede_kamer.html Tweede_Kamer.html Bestandsnamen met hoofdletters zijn lastig om te typen en zorgen voor problemen
Figuur 1.14 Gebruik voor al uw bestandsnamen uitsluitend kleine letters en voeg daar consistent de extensie .htm of .html aan toe. Door hoofdletters en kleine letters te vermengen maakt u het de bezoekers van uw site lastiger om het juiste adres in te typen en uw pagina te vinden.
http://www.uwsite.nl/WebPaginas/ POLITIEK/Tweede_Kamer.html Figuur 1.15 Geef mappen eveneens namen die uitsluitend uit kleine letters bestaan. Consistentie is het devies. Als u geen hoofdletters gebruikt, verspillen uw bezoekers (en u) geen tijd aan piekeren over dingen als “was het nu met een hoofdletter T of met een kleine t?’.
Figuur 1.16 Uw elementaire URL bevat een schema, een servernaam, een pad en een bestandsnaam.
Hoofdstuk 1 Bouwstenen van webpagina’s
Voorwaartse slash
“http://www.site.nl/liz/˝ Figuur 1.17 Een URL dat op een voorwaartse slash eindigt waarna geen bestandsnaam volgt, wijst naar het standaardbestand in de laatstgenoemde directory (in dit geval liz). Veelgebruikte standaardbestandsnamen zijn index.html en default.htm.
Servernaam Schema
Pad
“ftp://ftp.site.nl/pub/prog.exe˝ Bestandsnaam
Figuur 1.18 Wanneer de gebruiker op deze URL klikt, begint de browser een FTP-bestandsoverdracht van het bestand prog. exe.
Schema
E-mailadres
“mailto:[email protected]˝ Figuur 1.19 Een URL voor een e-mailadres bevat het schema mailto, gevolgd door een dubbele punt (maar geen voorwaartse slashes) en vervolgens het e-mailadres zelf.
Stationsletter Schema
“file:///˝c| /pad/home.htm˝ Verticale balk Pad en bestandsnaam
Figuur 1.20 Als u naar een bestand op een lokale Windowsmachine wilt verwijzen, gebruikt u het schema file (methodiek van verwijzen naar een bestand). Op een Macintosh gebruikt u file:///Harddisk/pad/bestandsnaam (zonder verticale balk te gebruiken). Soms gaat dit onder Windows ook goed.
Hoofdstuk 1 Bouwstenen van webpagina’s
server
map/dir
=web
map/dir
=index.html
=info
=data.html
=jebenthier.html =images
map/dir
server
map/dir
=image.gif
=www.remote.nl
=pub
map/dir
=homepg.html
=bcn
=info.html
Figuur 1.21 Het document dat de URL’s bevat (youarehere. html in dit geval) is het referentiepunt voor relatieve URL’s. Met andere woorden, relatieve URL’s zijn relatief ten opzichte van de locatie van dat bestand op de server. Absolute URL’s malen er niet om waar ze zich bevinden.
Binnen de huidige map bevindt zich een bestand met de naam index.html
“index.html˝ Figuur 1.22 De relatieve URL voor een bestand dat zich in dezelfde map (figuur 1.21) bevindt als het bestand dat de link bevat, is gelijk aan de bestandsnaam plus de bestandsextensie.
Hoofdstuk 1 Bouwstenen van webpagina’s
Binnen de huidige map bevindt zich een map die images heet ...
“images/image.gif˝ die een bestand bevat ...
dat image.gif heet
Figuur 1.23 Bij een bestand dat zich in een map binnen de huidige map bevindt (figuur 1.21), voegt u de naam van de map en een voorwaartse slash vóór de bestandsnaam toe.
De map die de huidige map bevat ... ... bevat ... ... een map die info heet ...
“.../info/data.html˝ dat data.html heet en die een bestand bevat ...
Figuur 1.24 Zoals u in figuur 1.21 kunt zien, bevindt dit bestand zich in een map binnen een map die de huidige map bevat (een hele mondvol!). In dat geval typt u twee punten en een slash om een niveau omhoog te gaan, gevolgd door een voorwaartse slash en de bestandsnaam.
Hoofdstuk 1 Bouwstenen van webpagina’s
Ik blijf me voortdurend verbazen over de wondermooie, delicate Blue Flax die op een of andere manier in mijn tuin bloeien. Ze staan er elke morgen fleurig bij, maar toch is er ‘s middags geen enkele bloem over. Ze zijn een schoolvoorbeeld van een <em>efemeer verschijnsel.
Ik blijf me voortdurend verbazen over de wondermooie, delicate Blue Flax die op een of andere manier in mijn tuin bloeien. Ze staan er elke morgen fleurig bij, maar toch is er ‘s middags geen enkele bloem over. Ze zijn een schoolvoorbeeld van een <em>efemeer verschijnsel.
Figuur 1.26 In XHTML moeten alle elementen sluittags hebben.
Figuur 1.27 In HTML hebben lege elementen geen afsluitende slash, hoewel browsers er niet over zullen klagen wanneer dat wel het geval is.
Figuur 1.28 In XHTML moeten zelfs lege elementen een sluittag hebben. Hoewel een onafhankelijke sluittag voor een leeg element, bijvoorbeeld , technisch correct zou zijn, verzekert de toevoeging van een spatie en / aan de enkelvoudige img-tag de compatibiliteit met browsers die niet dol zijn op XHTML.
10
Hoofdstuk 1 Bouwstenen van webpagina’s
Figuur 1.29 In HTML moeten attribuutwaarden alleen tussen dubbele aanhalingstekens worden geplaatst als ze spaties of andere speciale lettertekens (alles, behalve letters, cijfers, koppeltekens, punten, underscores of dubbele punten) bevatten.
Figuur 1.30 In XHTML moeten alle waarden van attributen altijd tussen dubbele aanhalingstekens worden geplaatst.
Figuur 1.31 In HTML maakt het geen verschil of u de namen van elementen of attributen of vooraf gedefinieerde waarden in hoofdletters of in kleine letters typt.
Figuur 1.32 In XHTML moeten alle namen van elementen en attributen en vooraf gedefinieerde waarden in kleine letters worden geschreven.
Figuur 1.33 In HTML verlangen sommige attributen, zoals het hier getoonde noshade, helemaal geen waarde.
Figuur 1.34 In XHTML moeten attribuutwaarden expliciet worden gedeclareerd. Bij de attributen die in HTML geen waarde hebben, gebruikt u gewoon de naam van het attribuut als waarde.
11
Hoofdstuk 1 Bouwstenen van webpagina’s Figuur 1.35 Hier is de officiële DOCTYPE voor transitional XHTML-documenten. Op mijn website kunt u een lijst met DOCTYPE-declaraties vinden. (Het is uiterst omslachtig om ze met de hand in te typen.)
body {background:url(bg_flax.jpg) bottom right norepeat} p {font-family: “Trebuchet MS”, “Helvetica”, sans-serif; font-weight: bold; color:3366cc; } img {float:left;margin-right:10px} Figuur 1.36 Sommige browsers, met name Internet Explorer, vinden het niet erg als u het beginteken # vóór een hexadecimale kleur weglaat. Hoewel u misschien denkt dat dat aardig van ze is, biedt het webontwikkelaars de gelegenheid om slechte code te schrijven die in andere browsers fout loopt.
Figuur 1.37 Als u de DOCTYPE weglaat, handhaaft Internet Explorer de niet-standaard quirkmodus en wordt de tekst in een blauwe kleur weergegeven. Maar dat is de bedoeling helemaal niet!
12
Hoofdstuk 1 Bouwstenen van webpagina’s
Figuur 1.38 Als u de DOCTYPE gebruikt, neemt Internet Explorer aan dat u de standaard wilt volgen; de foutieve kleurwaarde wordt genegeerd en de tekst wordt in zwart afgedrukt.
Figuur 1.39 Zodra het stijlblad van het ontbrekende #-symbool is voorzien, leidt het gebruik van de DOCTYPE wederom tot blauwe tekst (op de juiste manier en in de standaardmodus).
Figuur 1.37 Als u de DOCTYPE weglaat, handhaaft Internet Explorer de niet-standaard quirkmodus en wordt de tekst in een blauwe kleur weergegeven. Maar dat is de bedoeling helemaal niet!
13
Hoofdstuk 1 Bouwstenen van webpagina’s
Figuur 1.38 Als u de DOCTYPE gebruikt, neemt Internet Explorer aan dat u de standaard wilt volgen; de foutieve kleurwaarde wordt genegeerd en de tekst wordt in zwart afgedrukt.
Figuur 1.39 Zodra het stijlblad van het ontbrekende #-symbool is voorzien, leidt het gebruik van de DOCTYPE wederom tot blauwe tekst (op de juiste manier en in de standaardmodus).
14
Hoofdstuk 1 Bouwstenen van webpagina’s
Figuur 1.40 Zonder opmaakstijlen wordt de tekst onder de afbeelding weergegeven in het standaardlettertype en in de standaardkleur. De meeste huidige versies van de belangrijkste browsers (van boven naar beneden: Internet Explorer 7, Firefox 1.5, Opera 8.54 en Netscape 8.1.2) hebben sterk op elkaar lijkende standaardinstellingen. Safari wijkt iets af omdat het op een Mac draait, maar lijkt sterk op de Firefox en Opera voor Macintosh.
15
2
home
pers
intern
nu
nieuws
archief
banen
home
v&a
faq
tech
intro Foto 1
einde Foto 3
Foto 2
Figuur 2.1 Door een schets te maken van de site en na te denken over wat er op de site moet komen te staan, kunt u gemakkelijker beslissen welke structuur u voor uw site nodig hebt: een gecentraliseerd hiërarchisch model (boven), een kringvormig model dat de bezoeker van de ene naar de andere pagina leidt (onder) of een ander systeem.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.2 Open een teksteditor of tekstverwerkingsprogramma en kies in het menu Bestand de menuoptie Nieuw. (Links ziet u TextEdit voor Macintosh en rechts WordPad voor Windows.)
Figuur 2.3 Op een Macintosh-computer kunt u de (X)HTMLcode van uw pagina in TextEdit schrijven.
Figuur 2.4 Dit is WordPad, een van de programma’s waarmee Windows-gebruikers (X)HTML-pagina’s kunnen maken.
Hoofdstuk 2 Werken met webpaginabestanden Figuur 2.5 Een Excel-werkblad heeft de extensie .xlsx en wordt aangeduid door het Excel-pictogram (boven). Door op dit pictogram te dubbelklikken opent u het bestand in Excel. Een webpaginabestand heeft de extensie .htm of .html, ongeacht met welke tekstverwerker of teksteditor dat bestand werd gemaakt, en heeft het pictogram van de standaardbrowser. Als u op zo’n pictogram dubbelklikt, wordt het bestand in de standaardbrowser (en niet in de tekstverwerker) geopend.
Figuur 2.6 Kies in het menu Bestand van uw tekstverwerker of teksteditor de menuoptie Opslaan als.
Figuur 2.7 Geef het bestand in WordPad voor Windows de extensie .htm of .html, kies Tekstdocument in de vervolgkeuzelijst Bestand opslaan als en klik op Opslaan.
Figuur 2.8 Geef uw bestand in TextEdit voor Macintosh een naam, kies een locatie en klik op Opslaan.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.9 Kies op een Windows-computer Extra > Mapopties om het dialoogvenster Mapopties te openen. Plaats het tabblad Weergave op de voorgrond en blader naar beneden totdat u het item Extensies voor bekende bestandstypen verbergen ziet. Het bijbehorende selectievakje moet leeg zijn als u de extensie van een bestand (bijvoorbeeld .html) op het bureaublad wilt kunnen zien.
Figuur 2.10 In veel tekstverwerkers, zoals de uitstekende BBEdit (boven) kunt u de codering voor uw bestand kiezen, zodat u symbolen en lettertekens uit verschillende talen in hetzelfde document kunt opslaan. Vanaf versie 7 slaat BBEdit uw bestand automatisch op met dezelfde codering als die u verderop in uw document declareert. Een heel handige functie!
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.11 Kies in Word niet het item Webpagina in de vervolgkeuzelijst Bestand opslaan als! En kies evenmin Opslaan als webpagina in het menu Bestand! Deze menuopties zijn bedoeld om doorsnee Word-documenten naar webpagina’s te converteren en sturen met de hand gecodeerde pagina’s in de war.
Figuur 2.12 Kies in plaats daarvan het item Tekstbestand (*.txt) in de vervolgkeuzelijst Bestand opslaan als ...
Figuur 2.13 ... en typ vervolgens de extensie .html met de hand. Klik ten slotte op Opslaan.
Figuur 2.14 Sla het bestand op als index.html of default.htm om het bestand te benoemen tot de standaardpagina die in die directory geopend moet worden.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.15 Wanneer de bezoeker het pad naar de directory typt, maar de bestandsnaam zelf weglaat, wordt het bestand met de standaardnaam gebruikt.
Figuur 2.16 Sommige tekstverwerkers in Windows zien (X)HTML-bestanden niet automatisch. Kies zo nodig Alle documenten om bestanden met allerlei extensies te laten weergeven.
Figuur 2.17 Zodra alle bestanden worden weergegeven, kunt u op het gewenste (X)HTML-bestand klikken en daarna op Openen klikken.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.18 In Windows kunt u ook met de rechtermuisknop op het documentpictogram klikken en vervolgens in het snelmenu de menuoptie Bewerken of Openen met kiezen. Op een Mac klikt u met ingedrukte Control-knop op het pictogram, waarna u in het pop-upmenu de menuoptie Openen met kiest en vervolgens de gewenste teksteditor selecteert.
Figuur 2.19 Kies op een Mac Nieuwe map en geef de map een naam. Maak vervolgens voor elke sectie van uw site een aparte map.
Figuur 2.20 In Windows kiest u Bestand > Nieuw > Map op het bureaublad of in Explorer.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.21 U kunt desgewenst submappen in de map maken.
Figuur 2.22 Kies in het menu Bestand van de gewenste browser (Firefox in dit voorbeeld) de menuoptie Bestand openen. In Internet Explorer kiest u Bestand > Openen. In de Explorer voor de Mac kiest u Bestand > Bestand openen.
Figuur 2.23 In Explorer voor Windows krijgt u een dialoogvenster te zien met de vraag of u het pad met de hand wilt intypen. Als u dat niet wilt – en waarom zou u? – klik u op de knop Bladeren.
Hoofdstuk 2 Werken met webpaginabestanden Figuur 2.24 Selecteer het bestand dat u wilt openen en klik op de knop Openen (hier niet zichtbaar).
Figuur 2.25 De pagina wordt in de browser getoond. Bekijk hem goed en ga na of alles op de gewenste manier wordt weergegeven.
Figuur 2.26 Alle browsers bieden menuopties om de (X)HTML-code van een pagina te bekijken. De naam van de optie varieert van Paginabron (in Firefox) tot Broncode of kortweg Bron.
Hoofdstuk 2 Werken met webpaginabestanden
Figuur 2.27 In de meeste browsers kunt u ook met de rechtermuisknop (op de Mac met ingedrukte Control-toets) klikken en in het snelmenu de menuoptie Bron (bekijken) kiezen. Hier ziet u Internet Explorer voor Windows.
Figuur 2.28 Sommige browsers tonen de code in een gespecificeerde teksteditor. In andere browsers kunt u kiezen tussen het standaardvenster in de browser (hier weergegeven) of in de teksteditor van uw keuze.
10
3
Figuur 3.1 Dit is de DOCTYPE voor een transitional HTMLdocument plus de begin- en sluittags. Omdat het een vaste, maar langdradige formule is, raad ik aan om het van het ene nar het andere document te kopiëren in plaats van te proberen dit abracadabra steeds weer in te typen.
Figuur 3.2 Dit is de DOCTYPE voor een transitional XHTMLdocument, gevolgd door de begintag html en de eindtag html.
Figuur 3.3 De elementen head en body helpen uw (X)HTMLdocumenten te structureren.
Hoofdstuk 3 De elementaire structuur van (X)HTML
Figuur 3.4 Ik heb mijn bestanden opgeslagen in Unicode met de UTF8-codering. (Dit is MS Word.) Zie hoofdstuk 21 voor meer details over bestanden opslaan met een andere codering dan de standaardcodering van uw systeem.
<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Figuur 3.5 Wanneer de browser van de bezoeker op deze meta-tag stuit, weet de browser dat de pagina met UTF-8 werd gecodeerd en zal de pagina correct worden weergegeven. Van belang is dat de codering die u in de meta-tag declareert, overeenkomt met de codering waarmee u het bestand daadwerkelijk hebt opgeslagen.
Hoofdstuk 3 De elementaire structuur van (X)HTML <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Antoni Gaudí - Inleiding Figuur 3.6 Het element title dient u in de kopsectie te plaatsen. Het is een verplicht element.
Figuur 3.7 De titel van een webpagina wordt in de titelbalk van het venster getoond.
Figuur 3.8 Nog belangrijker is het dat de titel door Google en andere zoekmachines wordt gebruikt om uw pagina bij zoekresultaten te beschrijven. Verder is het een van de belangrijkste factoren die de relevantie en de ranking van de pagina in de zoekresultaten bepaalt.
Figuur 3.9 De titel verschijnt ook in de lijsten Geschiedenis (hier weergegeven), Favorieten en Bladwijzers van uw bezoeker.
Hoofdstuk 3 De elementaire structuur van (X)HTML <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Antoni Gaudí - Inleiding
Antoni Gaudí
La Casa Milà
La Sagrada Família
Figuur 3.10 Door koppen te gebruiken kunt u een document structuur geven, zoals bij een overzicht.
Figuur 3.11 De standaardweergave van een kop van niveau 1 is vaak 24 pixels, Times New Roman, vet.
Hoofdstuk 3 De elementaire structuur van (X)HTML
Antoni Gaudí
Veel toeristen bezoeken Barcelona om Antoni Gaudí’s ongelooflijke gebouwen te zien.
Barcelona vierde de 150e verjaardag van Gaudi’s geboortedag in 2002.
La Casa Milà
Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin echte mensen wonen.
La Sagrada Família
De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het meest bezochte bouwwerk van Barcelona.
Figuur 3.12 Zet elke alinea tussen een begintag
en een eindtag
. Als u alinea’s niet met een sluittag afsluit (wat in HTML volkomen legaal is, maar in XHTML niet wordt getolereerd), zullen opmaakstijlen niet correct worden toegepast.
Figuur 3.13 De hoeveelheid ruimte tussen de alinea’s varieert proportioneel met de grootte van de tekst.
Hoofdstuk 3 De elementaire structuur van (X)HTML
Antoni Gaudí
Veel toeristen bezoeken Barcelona om Antoni Gaudí’s ongelooflijke gebouwen te zien.
Barcelona vierde de 150e verjaardag van Gaudi’s geboortedag in 2002.
La Casa Milà
Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin echte mensen wonen.
La Sagrada Família
De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het meest bezochte bouwwerk van Barcelona.
Figuur 3.14 Voeg een id-attribuut toe aan een uniek element als u dit later voor opmaak of links wilt gebruiken. Voeg een class-attribuut toe aan een groep elementen om ze later allemaal tegelijk in één klap te kunnen opmaken.
Figuur 3.15 De attributen id en class wijzigen op zich niets aan het uiterlijk van een element. Ze moeten met CSS-opmaak worden gecombineerd (zie de hoofdstukken 10 en 11).
Hoofdstuk 3 De elementaire structuur van (X)HTML
Antoni Gaudí
Veel toeristen bezoeken Barcelona om Antoni Gaudí’s ongelooflijke gebouwen te zien.
Barcelona vierde de 150e verjaardag van Gaudi’s geboortedag in 2002.
La Casa Milà
Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin echte mensen wonen.
La Sagrada Família
De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het meest bezochte bouwwerk van Barcelona.