Transcript les 6 - De Ridder Dichters

LES 6 – HTML, STYLE SHEETS EN DE AFBOUW VAN DE WEBSITE
Eerst wat theorie. Kijkt u eens naar de links.
De link Bolnes eerst zonder lijntje onder, en dan met een lijntje boven. Dat resultaat is
verkregen door het CSS style element text-decoration te gebruiken. De eerste toont textdecoration:none de tweede text-decoration: overline. Hieronder is een passage uit het
html-bestand weergegeven en is text-decoration: overline in de desbetreffende link gezet.
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a style=”text-decoration:overline;” href=”vers-bolnesserbocht.html”>Bolnes</a> /
<a href=”vers-drierivierenpunt.html”>Slikkerveer</a> /
<a href=”vers-nieuwcentrum.html”>Ridderkerk</a> /
<a href=”vers-moederenzoon.html”>Rijsoord</a> /
<a href=”vers-wassenaarwaal.html”>Oostendam</a>
</p>
<h3 style="margin-top: 55px;">Bolnesserbocht in De Nieuwe Maas</h3>
<p style="margin-top: 30px;">
Bolnesserbocht in De Nieuwe Maas<br>
Als je weet dat je ook de links Bolnes, Slikkerveer, etc. andere kleuren kunt geven, trek je
niet ten onrechte de conclusie dat er zo een vrolijke boel kan ontstaan, en dat met CSS
kennelijk veel mogelijk is op het gebied van het opmaken van webpagina's. Zeker, zeker.
CSS externe werkwijze. Een korte STYLE SHEET introductie.
Een goed moment om opnieuw aandacht te vragen voor de CSS-werkwijzen.
Vanaf Les 3 volgden we een interne CSS-werkwijze, door CSS-style code in het htmlbestand te plaatsen, als onderdeel van HTML code elementen binnen het
<body>..</body> deel van een HTML-bestand.
Voorbeeld: <h3 style="margin-top: 55px;">Drierivierenpunt Ridderkerk</h3>
De externe CSS-werkwijze houdt in dat je de style code op een aparte pagina verzamelt.
Voorbeeld: HTML-pagina: <h3>Drierivierenpunt Ridderkerk</h3>
CSS-pagina: h3 { margin-top: 55px; }
De CSS-pagina wordt met een link aan de HTML-pagina gekoppeld.
Voorbeeld: Zou je een CSS-pagina opslaan als meezinger.css dan wordt de link zoiets als:
<link rel="stylesheet" href="meezinger.css" type="text/css">
De link in de head van de HTML-pagina plaatsen. Voorbeeld:
<head>
<title>Drierivierenpunt Ridderkerk. Te Slikkerveer. Couplet 2 van de Ridderkerkse
Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Drierivierenpunt Ridderkerk bezongen in het
tweede couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Drierivierenpunt Ridderkerk, De Noord, De Lek,
De
Nieuwe Maas, Ridderkerk, Meezinger”>
<link rel="stylesheet" href="meezinger.css" type="text/css">
</head>
rel is de verkorting van 'relationship', de link legt een relatie tussen de HTML-pagine
en de CSS-pagina, de pagina met de style-elementen, kortom een 'stylesheet'
href zijn we al tegengekomen bij de links; het geeft aan welk pad de relatie neemt;
in dit geval is er geen pad: het stylesheet 'meezinger.css' bevindt zich in dezelfde
map als het html-bestand; het hoeft geen practicum/meezinger.css te worden of nog
uitgebreider; alleen: meezinger.css
type betreft een css-bestand, en dat is text/css
Tot zo ver de korte introductie van de CSS externe werkwijze. We werken het nog verder
uit in een nieuw blok lessen. We handhaven thans voor de – betrekkelijk kleine – website
De Ridderkerkse Meezinger de interne CSS-werkwijze.
AFRONDING BOUW WEBSITE
De voorpagina: de homepage
Deze pagina maken naar het voorbeeld van de andere pagina's, met het opvallendste
verschil dat we op de plaats van de tekst van het vers, een foto plaatsen. Dat is geen
regel. Foto's kun je op alle pagina's plaatsen.Maar ik heb een goed gevoel bij deze layout.
Hoe zet je een foto in je webpagina?
In HTML-CSS-termen behoort een foto tot de categorie: afbeelding, in het Engels: image,
hetgeen verkort wordt weergegeven met img. Je moet vertellen waar de afbeelding – de
foto in ons geval – te vinden is. Je moet de bron noemen, in het Engels source, verkort tot
src. Er behoort ook een beschrijving bij als terugvaloptievoor het geval er iets is waardoor
de foto niet op het scherm wordt geplaatst, en omdat voorlees- en zoekprogramma's het
uitlezen op prijs stellen. In het Engels wordt 'alternate' gebruikt, een soort alternatief, in de
verkorte vorm: alt. Je kunt er ook nog een titel in zetten: title=”..”
Dat wordt zoiets als <img src=”..” alt=”..” title=”..” >
Met een style=”..” erin kun je de presentatie van de foto in de webpagina naar je hand
zetten. Hieronder hebben het bestand ingevuld, de korte beschrijving, de afmetingen
aangegeven, de foto gecentreerd, en de marges
<img src=”meezinger.jpg.” alt=”de bocht in de rivier de Nieuwe Maas ter hoogte van
Bolnes, foto Faas van Rietschoten” title=”de bocht in de rivier de Nieuwe Maas ter hoogte
van Bolnes, foto Faas van Rietschoten” style=”width:550px; height:auto; float:center;
margin: 10px 0;”>
Foto's met de huidige toestellen gemaakt zijn globaal genomen 1 Mb tot 12 MB
groot met resoluties van wel enkele duizenden pixels breedte.
Voor een 'gewone' homepage (website) die op een beeldscherm wordt geplaatst,
waarin je iets wil vertellen en dat opleukt met illustraties wordt wel de vuistregel
voor foto's gegeven 0,1 MB (100kB) groot en 500px breed (ongeveer de helft van
een tradionele homepage.) Laten we een proef nemen met Paint.
Onderstaande foto kwam 4 MB groot en 4000 pixels breed uit het fototoestel. In
Paint geplakt, en horizontaal bij pixels 500 ingevuld; daarop werd als grootte 123 kB
aangegeven.
Meer weten? Kijk eens op sites als Mijn-eigenwebsite.nl. Struin http://www.mijn-eigenwebsite.nl/gratis-downloads.html af.
Of begin een surftocht vanaf Google.
Foto voorpagina 'Bolnesserbocht in de Nieuwe Maas'.
Op de voorpagina staan de links naar de vijf pagina's met de verzen.
We maken nog link aan voor de voorpagina:
<a href="index-practicum.html">Home</a>.
Op de vijf pagina's met een vers, de naam van de auteur cursief: <p style="fontstyle: italic; font-size: 100%; color: #404040; margin-top: 30px;">Faas van
Rietschoten </p>
We hebben de bovenmarge weer veranderd, van eerst 100px naar 50px, en nu
definitef naar 75px: margin-top:75px;
Op de pagina met het eigen vers deactiveren we de pagina-link in het menu.
Vervolgens dwingen ons zelf nu de beginners-website als afgerond te beschouwen.
We uploaden de tekstbestanden en foto naar de server... en...
Het resultaat van het practicum: de kleine website 'De Ridderkerkse Meezinger',
staat op Internet. Op het adres http://www.deridderdichters.nl/practicum/indexpracticum.html
De website werd geleidelijk opgebouwd. De opbouw werd uitgelegd. Vanaf Les 1 tot
en met deze Les 6, waarin nu nog de definiteve inhoud geheel uitgeschreven wordt
vermeld.
De website bestaat uit één foto: meezinger.jpg en zes HTML-CSS bestanden:
index-practicum.html, vers-bolnesserbocht.html, vers-drierivierenpunt.html,
vers-nieuwcentrum.html, vers-moederenzoon.html, vers-wassenaarwaal.html
Hieronder alle bestanddelen van de website.
VOORPAGINA: DE RIDDERKERKSE MEEZINGER
Nieuwe map maken, geef de map de naam: practicum
Onderstaand bestand selecteren, kopiëren en in de map practicum opslaan als: indexpracticum.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>De Ridderkerkse Meezinger. Een vijf dorpen lied. Van Faas van Rietschoten.
</title>
<meta charset=utf-8>
<meta name=description content=“De vijf oude kerndorpen van Ridderkerk: Bolnes,
Slikkerveer, Ridderkerk, Rijsoord, Oostendam bezongen in de Ridderkerkse Meezinger”>
<meta name=keywords content=”Bolnes, Slikkerveer, Ridderkerk, Rijsoord, Oostendam,
De Ridderkerkse Meezinger”>
<style>
a { text-decoration:none; }
</style>
</head>
<body style="background: #dddddd; text-align: center; margin-top: 50px; font-family:
helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>Home /
<a href="vers-bolnesserbocht.html">Bolnes</a> /
<a href="vers-drierivierenpunt.html">Slikkerveer</a> /
<a href="vers-nieuwcentrum.html">Ridderkerk</a> /
<a href="vers-moederenzoon.html">Rijsoord</a> /
<a href="vers-wassenaarwaal.html">Oostendam</a>
</p>
<p>
<img src="meezinger.jpg" alt="foto rivierbocht nieuwe maas ter hoogte van bolnes,
foto faas van rietschoten 2014" style="width:650px; height:auto; float:center;
margin: 30px 0 15px 0">
</p>
<p style="font-size: 75%; color: #404040; margin-top: 5px;">Beeld en tekst: Faas van
Rietschoten 2014<br><a href="practicum.html" target="_blank">Lesmateriaal</a>
</p>
</body>
</html>
FOTO
Foto selecteren, kopiëren en in de map practicum opslaan als: meezinger.jpg
BOLNES: BOLNESSERBOCHT IN DE NIEUWE MAAS
Onderstaand bestand selecteren, kopiëren en in de map practicum opslaan als: versdrierivierenpunt.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>Bolnesserbocht in de Nieuwe Maas. Couplet van de Ridderkerkse Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Bolnesserbocht in de Nieuwe Maas bezongen in het
eerste couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Bolnes, De Nieuwe Maas, Ridderkerk, Meezinger”>
</head>
<body style="background: cornsilk; text-align: center; margin-top: 50px; fontfamily: helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a href="index-practicum.html">Home</a> /
Bolnes /
<a href="vers-drierivierenpunt.html">Slikkerveer</a> /
<a href="vers-nieuwcentrum.html">Ridderkerk</a> /
<a href="vers-moederenzoon.html">Rijsoord</a> /
<a href="vers-wassenaarwaal.html">Oostendam</a>
</p>
<h3 style="margin-top: 55px;">Bolnesserbocht in De Nieuwe Maas</h3>
<p style="margin-top: 30px;">
Bolnesserbocht in De Nieuwe Maas<br>
Daar stroomt heel wat water door heen<br>
Hoe houd je het droog<br>
Ja, dat is dan de vraag<br>
Door dijken op deltaniveau
</p>
<p>
Dijkhuizen verdwenen, de werf op zijn beurt<br>
Geen lasser of klinker die niet heeft getreurd<br>
Na tijden vol onzekerheid<br>
Wordt toch langs de dijk weer geheid
</p>
<p>
De woningen die er nu staan<br>
Zijn torens zo hoog als een kraan<br>
Zijn torens zo hoog als een kraan
</p>
<p style="font-style: italic; font-size: 100%; color: #404040; margin-top:
30px;">Faas van Rietschoten </p>
</body>
</html>
SLIKKERVEER: HET DRIERIVIERENPUNT RIDDERKERK
Onderstaand bestand selecteren, kopiëren en in de map practicum opslaan als: versdrierivierenpunt.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>Drierivierenpunt Ridderkerk. Te Slikkerveer. Couplet 2 van de Ridderkerkse
Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Drierivierenpunt Ridderkerk bezongen in het
tweede couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Drierivierenpunt Ridderkerk, De Noord, De Lek, De
Nieuwe Maas, Ridderkerk, Meezinger”>
</head>
<body style="background: lightcyan; text-align: center; margin-top: 50px; fontfamily: helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a href="index-practicum.html">Home</a> /
<a href="vers-bolnesserbocht.html">Bolnes</a> /
Slikkerveer</a> /
<a href="vers-nieuwcentrum.html">Ridderkerk</a> /
<a href="vers-moederenzoon.html">Rijsoord</a> /
<a href="vers-wassenaarwaal.html">Oostendam</a>
</p>
<h3 style="margin-top: 55px;">Drierivierenpunt Ridderkerk</h3>
<p style="margin-top: 30px;">
Het drierivierenpunt Ridderkerk <br>
de Noord, de Lek, de Nieuwe Maas<br>
Daar moet u voor <br>
naar de wijk Slikkerveer<br>
Dat is u op school geleerd
</p>
<p>
De Lek komt uit Maurik, uit Dordrecht de Noord<br>
Dan samen op weg als Nieuwe Maas, dat bekoort<br>
En wilt u het zelf gadeslaan<br>
Dan moet u de dijk overgaan
</p>
<p>
Komt allemaal naar Slikkerveer<br>
Er vaart ook een pont heen en weer<br>
Er vaart ook een pont heen en weer
</p>
<p style="font-style: italic; font-size: 100%; color: #404040; margin-top:
30px;">Faas van Rietschoten </p>
</body>
</html>
RIDDERKERK: OP HET NIEUWE CENTRUM VAN RIDDERKERK
Onderstaand bestand selecteren en in de map practicum opslaan als: versnieuwcentrum.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>Op het nieuwe centrum van Ridderkerk. Couplet 3 van de Ridderkerkse
Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Het nieuwe centrum van Ridderkerk bezongen in het
derde couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Ridderkerk-Centrum, Nieuwbouw, Ridderkerk,
Meezinger”>
</head>
<body style="background: white; text-align: center; margin-top: 75px; font-family:
helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a href="vers-bolnesserbocht.html">Bolnes</a> /
<a href="vers-drierivierenpunt.html">Slikkerveer</a> /
Ridderkerk /
<a href="vers-moederenzoon.html">Rijsoord</a> /
<a href="vers-wassenaarwaal.html">Oostendam</a>
</p>
<h3 style="margin-top: 55px;">Op het nieuwe centrum van Ridderkerk</h3>
<p style="margin-top: 30px;">
Het nieuwe centrum van Ridderkerk.<br>
Daar word je haast sprakeloos van.<br>
Modern klassiek, ja, zo wordt het genoemd.<br>
De bouw was meteen al beroemd
</p>
<p>
Financiers werkten over. Adviseurs waren druk.<br>
Geen alternatieven. Het kon niet meer stuk.<br>
Na jaren van centrumgetob,<br>
kan men zijn geluk nu niet op.
</p><p>
Drink allen op 't goede gebruik.<br>
Van 't centrum en trek er op uit.<br>
Van 't centrum en trek er op uit.
</p>
<p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten
<br> <a style="text-decoration: none;" href="index-practicum.html">Voorpagina</a></p>
</body>
</html>
RJSOORD: MOEDER EN ZOON
Onderstaand bestand selecteren, kopiëren en in de map practicum opslaan als: versmoederenzoon.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>Moeder en zoon over Rijsoord. Couplet 4 van de Ridderkerkse Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Oud en minder oud Rijsoord bezongen in het
vierde couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Rijsoord, Ridderkerk, Meezinger”>
</head>
<body style="background: #eeeeee; text-align: center; margin-top: 50px; font-family:
helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a href="index-practicum.html">Home</a> /
<a href="vers-bolnesserbocht.html">Bolnes</a> /
<a href="vers-drierivierenpunt.html">Slikkerveer</a> /
<a href="vers-nieuwcentrum.html">Ridderkerk</a> /
Rijsoord /
<a href="vers-wassenaarwaal.html">Oostendam</a>
</p>
<h3 style="margin-top: 55px;">Moeder en zoon over Rijsoord</h3>
<p style="margin-top: 30px;">
"Ma! Strevelshoek, dat is geen Rijsoord.<br>
En Wevershoek al evenmin.<br>
Hetzelfde geldt voor het Zwaantje, het Zweth,<br>
de Kromme, de Schaapherderweg.
</p>
<p>
Want het echte Rijsoord ligt over de brug.<br>
Bij tolhuis en molen, op dat kleine stuk."<br>
"Daar komt ruzie van, houd je mond.<br>
Zulke dingen bazuin je niet rond."
</p>
<p>
"Maar Ma! Het staat wel in het werk:<br>
Vijfhonderd jaar oud Ridderkerk.<br>
Vijfhonderd jaar oud Ridderkerk."
<p style="font-style: italic; font-size: 100%; color: #404040; margin-top:
30px;">Faas van Rietschoten </p>
</body>
</html>
OOSTENDAM: 'WASSENAAR AAN DE WAAL'
Onderstaand bestand selecteren, kopiëren in de map practicum opslaan als: verswassenaarwaal.html
<!DOCTYPE html>
<html lang=nl>
<head>
<title>Wassenaar aan de Waal. Over Oostendam. Couplet 5 van de Ridderkerkse
Meezinger.
</title>
<meta charset=utf-8>
<meta name=description content=“Oostendam als 'Wassenaar aan de Waal' bezongen in
het
vijfde couplet van de Ridderkerkse Meezinger”>
<meta name=keywords content=”Oostendam, De Waal, Ridderkerk, Meezinger”>
</head>
<body style="background: #cae1ff; text-align: center; margin-top: 50px; font-family:
helvetica, arial, sans serif; font-size:120%; line-height:130%;">
<h2>Een vijf dorpen lied</h2>
<h1>De Ridderkerkse Meezinger</h1>
<p>
<a href="index-practicum.html">Home</a> /
<a href="vers-bolnesserbocht.html">Bolnes</a> /
<a href="vers-drierivierenpunt.html">Slikkerveer</a> /
<a href="vers-nieuwcentrum.html">Ridderkerk</a> /
<a href="vers-moederenzoon.html">Rijsoord</a> /
Oostendam
</p>
<h3 style="margin-top: 55px;">'Wassenaar aan de Waal'</h3>
<p style="margin-top: 30px;">
De Pruimendijk ging vroeg met pensioen.<br>
De dijk had geen kind aan de Waal.<br>
Die afgedamd van getijden ontdaan.<br>
Als stil binnenwater bleef staan.
</p>
<p>
De Waal werd gezuiverd. Verwijderd de prut.<br>
De oevers veranderen in een bouwput.<br>
Het Wassenaar komt er nu aan.<br>
En Oostendam wordt heel voornaam.
</p>
<p>
Gevraagd werd ook om een beleid.<br>
Voor Oostendam als eigen wijk.<br>
Voor Oostendam als eigen wijk.
</p>
<p style="font-style: italic; font-size: 100%; color: #404040; margin-top: 30px;">Faas
van Rietschoten </p>
</body>
</html>
In de tweede helft van november hopen we nog een grotere HTML-CSS-website te
maken, met toelichtingen.
Faas van Rietschoten, 7 november 2014