LES 2: HTML
advertisement
SCIENCE PROJECT WEBSITE BOUWEN (HTML / CSS) LES 1: HTML Extra informatie: - HTML in de wereld: https://www.youtube.com/watch?v=09lDmps4fbo Basisstructuur van een HTML pagina: https://www.youtube.com/watch?v=zDt-2RC5XYI Tags en HTML elementen: https://www.youtube.com/watch?v=MFvGRIllW-k HTML attribuut: https://www.youtube.com/watch?v=WaoHHbaS1lQ Hoe maak je een link in HTML?: https://www.youtube.com/watch?v=pAL6rl-tZm4 Thuis aan de slag met code schrijven oefenen: - Notepad++ installeren: https://www.youtube.com/watch?v=LTVbtfik-Eg Extra informatie: - Extra informatie site: http://www.cesarsite.com/html/watishtml/ Veel oefenen kan je op de website: - www.w3schools.com Opdracht: Klik op onderstaande link en dan op les 1 van HTML voor beginners en lees goed wat je moet doen: - http://www.w2informatica.nl/in2/software/cursushtml/index.html Als je les 1 af hebt, dan laat je deze controleren door de docent, daarna ga je verder met les 2, etc. Als je alle 4 de lessen afhebt van HTML voor beginners, dan laat je dit weten aan de docent. Zorg ervoor dat je steeds aan de docent kan laten zien wat je hebt gemaakt bij elke opdracht in bovenstaande 4 lessen. Bewaar je opdrachten op de H: schijf, die doe je als volgt om je pc netjes te houden. - Maak op de H: schijf een map met de titel: Science project website bouwen in deze map maak je een map met de titel: HTML opdrachten Basis opbouw HTML pagina <!DOCTYPE html> Stukje tekst dat tegen de browser zegt wat voor soort document het kan verwachten (dit noemen we doctype declareren) <html> Door deze tag geef je aan, dat alles wat hier tussen staat html code is <head> Deze tag verwijst naar b.v. een titel, CSS (opmaak taal) of het javascript (dit zijn dingen die de gebruiker niet hoeft te zien) <title></title> Deze tag plaats je binnen de head tags en geeft de titel aan </head> Afsluitend head tag <body> Tussen deze tag komen b.v. inhoud, plaatjes, tabellen, links en tekst (dit zijn de dingen die de gebruiker wel moet zien) </body> Afsluitende body tag </html> Afsluitende HTML tag Duidelijker doormiddel van onderstaande illustratie: <!DOCTYPE html> <html> <head> <title> Titel </title> Verwijzing naar CSS Verwijzing naar javascript </head> <body> Plaatjes Tabellen Links Tekst </body> </html> LES 2: HTML Opdracht: Ga verder met de opdrachten van HTML voor beginners en lees goed wat je moet doen: - Opdrachten maken: http://www.w2informatica.nl/in2/software/cursushtml/index.html Als je les 1 af hebt, dan laat je deze controleren door de docent, daarna ga je verder met les 2, etc. Als je alle 4 de lessen afhebt van HTML voor beginners, dan laat je dit weten aan de docent. Zorg ervoor dat je steeds aan de docent kan laten zien wat je hebt gemaakt bij elke opdracht in bovenstaande 4 lessen. Bewaar ook deze in de map HTML opdrachten Ga verder met de opdrachten toveren met tabellen en lees goed wat je moet doen: - Opdrachten maken: http://www.w2informatica.nl/in2/software/cursushtml/index.html Als je les 1 af hebt, dan laat je deze controleren door de docent, daarna ga je verder met les 2, etc. Als je alle 4 de lessen afhebt van toveren met tabellen, dan laat je dit weten aan de docent. Zorg ervoor dat je steeds aan de docent kan laten zien wat je hebt gemaakt bij elke opdracht in bovenstaande 4 lessen. Bewaar je opdrachten op de juiste schijf!! LES 3: HTML + CSS + HARDWARE (MENEER WINNUBST) Ga verder met de opdrachten het gebruik van frames en lees goed wat je moet doen: - Opdrachten maken: http://www.w2informatica.nl/in2/software/cursushtml/index.html Als je les 1 af hebt, dan laat je deze controleren door de docent, daarna ga je verder met les 2, etc. Als je alle 3 de lessen afhebt van het gebruik van frames, dan laat je dit weten aan de docent. Zorg ervoor dat je steeds aan de docent kan laten zien wat je hebt gemaakt bij elke opdracht in bovenstaande 4 lessen. Bewaar je opdrachten op de juiste schijf!! Als je klaar bent met de HTML opdrachten, dan ga je verder met de CSS opdrachten op de volgende bladzijde: CSS uitgelegd Met HTML 5 is het heel makkelijk om de structuur en de opmaak van je website te maken en weer te veranderen. Om dit mogelijk te maken hebben ze de structuur en de opmaak van elkaar gescheiden: In je webpagina’s staat wat je wilt tonen: de tekst, plaatjes, filmpjes en (hyper)links. Daar hebben we er al een paar van gemaakt, dus dat snap je nu al aardig. We moeten er nog maar een paar dingen aan toevoegen en dan zijn we al klaar. In de stijlpagina’s staat de opmaak: het lettertype (van gewone tekst, de headings, emphasized tekst, van links enz.), de kleuren (van teksten, links, van achtergronden), de locatie van een menu (links, rechts, boven enz.) en nog een paar dingen. Stijlpagina’s noemen we cascading style sheets, in het kort css. De extensie van een stylesheet is dan ook .css. Structuur in je layout In het kort maak je structuur in je layout door aan te geven dat iets een header, footer, menu-balk, content is. Je mag dat allemaal zelf kiezen. Je gebruikt hiervoor de HTML tag <div id=”zelf_te_kiezen_idnaam”>. Het einde van de sectie wordt weer met </div> aangegeven. Dus in een paar stapjes maken we de structuur duidelijk: Zie ook: https://www.youtube.com/watch?v=TuHPdH62MqQ Stap1 Kopieer de volgende html code in het document welkom.html. Verander MIJN NAAM in jouw naam. Bewaar welkom.html weer op je bureaublad (CTRL s). <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mijnstijl.css"> <title>Introductie</title> </head> <body> <div id="header"> <h1>Welkom op mijn Science webpagina</h1> </div> <div id="introductietekst"> <p> Hallo, ik ben <b>MIJN NAAM</b> en dit is mijn website.<br /> Op deze site ga ik je op de hoogte houden van mijn scienceprojecten<br /> </p> </div> <div id="keuzemenu"> <a href=”webwijs.html\">Webwijs</a><br /> <a href=”de_lucht_in.html\">De lucht in</a><br /> <a href=”de_sloot_in.html\">De sloot in</a><br /> <a href=”sterrenkunde.html\">Sterrenkunde</a><br /> </div> <div id="voeter"> <!-- de namen voor id’s mag je dus zelf verzinnen --> <br /> je kunt me mailen voor vragen: <a href="mailto:[email protected]? &subject=vraagje &body=Mijn%20vraag%20aan%20jou%20is " target="_top"> Mail mij!</a> </div>! </body> </html> Stap 2 Als je in de html code van welkom.html kijkt, dan zie je dat er verwezen wordt naar de vier pagina’s die wat vertellen over vier science projecten die je dit jaar gaat doen. Dus om de links “heel” te houden moeten de webpagina’s webwijs.html, de_lucht_in.html, de_sloot_in.html en sterrenkunde.html wel bestaan. Die webpagina’s ga je dus maken met als basis de onderstaande html-code. Maar pas wel steeds de <title> en <h1> even aan (de rest hoeft niet, maar mag wel). Sla je de documenten steeds op en controleer de drie nieuwe pagina’s in je browser. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mijnstijl.css"> <title>sterrenkunde</title> </head> <body> <div id="header"> <h1>Welkom op de webpagina over Sterrenkunde</h1> </div> <div id="introductietekst"> <p> Met sterrenkunde hebben we veel gedaan. Maar het leukste vond ik om een keer laat op de avond naar de sterren te kijken met de sterrenkijker van het Kaj Munk.<br /> We hebben veel dingen geleerd over sterren, zoals bijvoorbeeld......... </p> </div> <div id="keuzemenu"> <!-- geen content hier --> </div> <div id="voeter"> <!-- de namen voor id’s mag je dus zelf verzinnen --> <br /> <a href=”welkom.html\" > <img src="http://openclipart.org/image/250px/svg_to_png/16959/ jean_victor_balin_arrow_blue_left.png" alt="Terug" width="50" height="40"></a> </div>! </body> </html> Stap 3 Open welkom.html in je browser en kijk of de links naar de nieuwe pagina’s werken. Er zijn nog steeds geen grote veranderingen, toch? Structuur in je opmaak Nu kunnen we een stijl aan al die id’s gaan hangen. In alle webpagina’s wordt wel verwezen naar een mijnstijl.css, maar die is er nog niet. Stap 1 Open welkom.html met kladblok en sla die op als mijnstijl.css, waarbij je ervoor zorgt dat “alle bestanden” open staat. Als het goed is zie je nu een icoontje op je bureaublad met iets van css erin. Stap 2 Maak mijnstijl.css leeg en plak de onderstaande code erin. Sla de wijzigingen op (alle bestanden!). /* dit is een stylesheet voor mijn website */ #header { background-color:blue; padding-top:20px; padding-bottom:20px; text-align:center; } #keuzemenu { background-color:white; position:fixed; right:25%; padding-top:5px; padding-bottom:5px; } #introductietekst { background-color:white; background-repeat:no-repeat; background-attachment:fixed; background-position:left bottom; color:red; margin-left:120px; } #voeter { background-color:grey; background-position:left bottom; text-align:left; margin-top:200px; padding-right:10px; } Stap 3 Open welkom.html met je browser en bekijk de verschillen. Begrijp je wat alle css functie doen? Gefeliciteerd, je hebt nu de basics te pakken van HTML en CSS. Als je meer wilt leren, dan kun je dat doen door te gaan kijken en oefenen op: http://www.w3schools.com/html/default.asp. Ga verder met de eind opdrachten op de volgende pagina!! LES 4: HTML eindopdrachten Eindopdracht 1: HTML document Op deze pagina stel jij jezelf voor en laat je zien wat jij allemaal geleerd hebt met HTML en CSS. Je mag tijdens deze opdracht de website gebruiken waar wij de 3 lessen hiervoor in hebben gewerkt. Dit stuk HTML code dat jij zelf gaat schrijven, zal je later als pagina toevoegen in Weebly als een embedded code. Na dit project zal je gehele Weebly website en dus ook deze pagina via de schoolwebsite te zien zijn voor alle Kajmunk leerlingen en ook over de hele wereld via het internet, dus denk goed na over wat je wel en niet op deze pagina wilt laten zien (geen privé gegevens, etc.). Bij het maken van deze pagina kan je zelf de inhoud bepalen (sport, hobby, etc.) Laat aan de docent je inhoud weten voordat je met je pagina gaat beginnen!! In je pagina moeten de volgende punten verwerkt zitten voor het HTML gedeelte: - Les 1: Basisstructuur html pagina Les 1: Titel en inhoud Les 1: Vet, cursief en onderstrepen Les 1: Combinatie van tags Les 1: Achtergrondkleur Les 1: Plaatje als achtergrond Les 2: Nieuwe regels Les 2: Extra spaties en speciale tekens Les 2: De font-tag en zijn opties Les 2: De tt-tags en de pre-tags Les 3: Plaatje op je webpagina Les 3: Links Les 3: Afbeeldings grootte Les 3: Link naar een andere plaats Les 4: Aanhaling en definitie Les 4: Handige lijsten Les 4: Horizontale lijnen Les 4: Koppen op pagina’s Les 4: Doorstrepen Les 4: Knipperen en schuiven Les 4: Subschrift en superschrift Les 4: Relatieve fontgrootte en basisfont Les 4: Plaatjes om op te klikken Les 4: Commentaar In je pagina moeten de volgende punten verwerkt zitten voor het tabellen gedeelte: - Les 1: Tabel (bedenk zelf wat je in je tabel gaat zetten) Les 1: Tabelranden Les 1: Tabelafmetingen Les 2: Horizontale en verticale uitlijning in de cel Les 2: Plaatjes in een cel Les 2: Celbreedte Les 2: Meer dan 1 rij - Les 2: Celpadding en Celspacing Les 3: De achtergrondkleur van de tabel Les 4: Afbeelding als link Les 4: Een plaatje splitsen met een tabel (deze opdracht alleen als het lukt) In je pagina moeten de volgende punten verwerkt zitten voor het gebruiken van frames gedeelte: - Les 1: Voorbereiding Les 1: Masterpagina Les 1: Dochterpagina’s Les 1: Meer dan 2 kolommen Les 1: Nu rijen Les 1: Absolute of relatieve maten Les 1: Zowel kolommen als rijen Les 2: Plaatjes in frames Les 2: Schuifbalken en marges Les 2: Frameranden Les 2: Vaste afmetingen Les 2: Links tussen frames Les 2: Pagina openen in een ander frame Les 2: Links in een frame of in een nieuw venster Les 3: Masterpagina Les 3: Banner pagina Les 3: Inhoudsopgave pagina Les 3: Rest pagina’s Probeer ook CSS elementen toe te voegen zoals je deze geleerd hebt bij het hoofdstuk CSS en zoek eventueel op internet/youtube naar andere CSS codes om deze ook toe te voegen. Wees creatief en onderzoek de mogelijkheden. Ga verder met de eindopdrachten op de volgende pagina!! Eindopdracht 2: HTML / CSS Opdracht 2 moet na het doorlopen van de voorgaande lessen goed te doen zijn (je mag opzoeken). Ook deze pagina komt straks via embedded code op je Weebly website!! 1a Maak in het kladblok een HTML document met in de titelbalk: “Dit is de pagina van….” Op de plaats van de puntjes schrijf je je eigen naam. 1b Als achtergrond gebruik je een afbeelding die je van het internet haalt en met het bouwen van een website te maken heeft. 1c De titel op deze pagina wordt groot (grootte H1) en vet afgedrukt. De titel luidt Website bouwen op het Kaj Munk College. 1d Sla nu drie regels over en schrijf onderstreept: Met informatica kom je er wel in lettertype Artistik of Cataneo BT, lettergrootte 5 en kleur blauw. 1e Begin nu een nieuwe alinea, type onderstaande vraag 1 over en zet het antwoord eronder. Begin daarna elke nieuwe vraag op een nieuwe alinea: Vraag 1: Wie ben jij? Vraag 2: Hoe oud ben jij? Vraag 3: Welke sport beoefen je? Vraag 4: Wat is je favoriete leesboek? Vraag 5: Wat is je favoriete film? Vraag 6: Wat zijn je hobby’s? Vraag 7: Heb je wel eens eerder een website gebouwd? Vraag 8: Waarom heb je voor Science gekozen? Vraag 9: Waarom lijkt jou het belangrijk om een website / portfolio te bouwen? Vraag 10: Wat denk je dat je gaat leren tijdens dit project in blok 1? Bedenk zelf nog minimaal 4 vragen en maximaal 10 vragen als aanvulling op bovenstaande lijst. 1f Plaats een foto van jezelf boven vraag 1 (breed 10 cm en hoog 15 cm, rechts tegen de kantlijn). 1g Maak een link naar de website van school (www.kajmunk,nl), die actief wordt als je in je document de hyperlink aanklikt. 1h Sla dit document op als kajmunk.html en test het met je browser (b.v. Internet Explorer). Eindopdracht 3 maak je alleen als je alle voorgaande opdrachten gemaakt hebt en dus tijd over hebt. Ook deze zou je eventueel kunnen toevoegen aan je Weebly website, maar dit is niet verplicht. Extra: Eindopdracht 3: Bouw in 7 stappen een mini website met gebruik van onderstaande informatie. Bedenk zelf een onderwerp, kleuren, etc. (kopieer de onderstaande code dus niet letterlijk, maar geef hier je eigen draai aan) en laat de docent weten welk onderwerp je gekozen hebt. Deze code voeg je in een aparte pagina toe op Weebly als embedded code. Bouw nu je eigen HTML website! We gaan een site bouwen in zeven stappen. Klik hier voor stap 1. stap 1 - <html> en <head> tag stap 2 - <body> tag en kleurencodes stap 3 - lettertypen stap 4 - tekstopmaak stap 5 - afbeeldingen stap 6 - links stap 7 - tot slot Als je deze zeven stappen hebt doorlopen, heb je je eigen site in HTML gebouwd. Wil je alvast een voorproefje zien van wat je gaat maken? Klik dan hier! Het is handig om eerst het eerste hoofdstuk (Wat is HTML?) even door te lezen, zodat je de belangrijkste begrippen en het principe van HTML kent. Stap 1 - <html> en <head> tag De <html> tag Okee, laten we een website gaan bouwen. We gaan gewoon stap voor stap te werk en we beginnen met een leeg veld in bijvoorbeeld het Kladblok, een andere tekstverwerker of HTML-editor. Om de browser te laten weten dat we HTML gaan schrijven, geven we dat aan met de eerste code (tag) namelijk: <html> </html> Alle volgende tags worden tussen deze HTML-tags geplaatst. De tag <html> geeft het begin van het HTML-document aan en </html> het einde. Sla je document op in een nieuw te maken map en geef die bijvoorbeeld de naam "www" op je C-schijf. Voor een website die gelezen wordt vanaf een server is het van belang dat de eerste pagina die men te zien krijgt de naam "index.htm" of "index.html" heeft. De extenties .htm en .html mogen door elkaar worden gebruikt. Sla je pagina op als c:/www/index.html. Door dit adres in de adresbalk van Internet Explorer of een andere browser te typen, kun je zien hoe je page eruit komt te zien. Vernieuw de pagina telkens als je een verandering hebt aangebracht en het bestand opnieuw hebt opgeslagen. De <head> tag Als tweede code volgt de <head> tag die tussen de <html> tags wordt geplaatst: <html> < head> </head> < /html> Tussen de <head> tags wordt informatie geplaatst over de pagina die niet daadwerkelijk in het beeld van de browser wordt weergegeven. Achtergrondinformatie dus. Je kunt hier een korte beschrijving kwijt over je website en kernwoorden invullen waarop jouw site door zoekmachines, zoals Google, wordt geïndexeerd. Welke tags je daarvoor nodig hebt vind je op de tags-pagina. Je kunt je pagina ook een titel geven. Die titel wordt weergegeven in de titelbalk van de browser als je webpagina door een bezoeker bekeken wordt. Je maakt een titel door de <title> tags tussen de <head> tags te plaatsen: <html> < head> < title>Mijn Homepage</title> < /head> < /html> Stap 2 - <body> tag en kleurencodes De <body> tag Nu wordt de <body> tag toegevoegd aan ons stukje HTML: <html> < head> < title>Mijn Homepage</title> < /head> < body> < /body> < /html> Tussen de <body> tags wordt alle informatie geplaatst die wel zichtbaar in het scherm van de browser zal verschijnen. Kleuren... Eerst moeten we bedenken welke achtergrondkleur we de pagina willen geven en welke kleur tekst. De achtergrondkleur en de tekstkleur kunnen we in de <body> tag al aangeven, zodat ze gelden voor het hele document. Nu is het duidelijk dat HTML een taal van codes is en dat geldt dus ook voor de kleuren. Iedere kleur heeft zijn eigen code bestaande uit zes cijfers en/of letters met een # ervoor. Als je een geschikte kleur wilt zoeken, klik dan hier om je eigen kleur te zoeken met de bijbehorende kleurcode. Eerst plaatsen we de achtergrondkleur (bijvoorbeeld rood, oftewel kleurcode #FF0000) in de <body> tag: <body bgcolor="#FF0000"> De code "bgcolor" staat natuurlijk voor backgroundcolor. Wil je echt niet aan de codes, dan kun je er ook voor kiezen één van de standaardkleuren te nemen. De browser kent namelijk een aantal kleuren gewoon bij naam, zij het in het engels. In plaats van de kleurcode #FF0000 voor rood kun je dan dus ook "red" gebruiken. In de tag ziet dat er dan zo uit: <body bgcolor="red"> Zo kunnen we ook de tekstkleur van je pagina vastleggen. Gebruik de volgende tag: <body bgcolor="#FF0000" text="#000000"> ...als voorbeeld voor zwarte tekst (#000000). In de <body> tag ziet het geheel er nu zo uit: <html> < head> < title>Mijn Homepage</title> < /head> < body bgcolor="#FF0000" text="#000000"> < /body> < /html> Op de tags-pagina vind je tags om ook de tekst van links op je pagina een eigen kleur te geven om ze goed te kunnen onderscheiden van de overige tekst. Links zijn verwijzingen naar andere pagina's op je site of naar een andere website. Als iemand op een link klikt wordt de nieuwe pagina of site geopend. Ook vind je hier de codes om in plaats van een achtergrondkleur, een afbeelding als achtergrond weer te geven. Stap 3 - lettertypen Nu is het tijd om een lettertype voor je pagina te kiezen. Op deze pagina wordt het lettertype "Tahoma" gebruikt, maar er zijn er natuurlijk nog veel meer. Het is natuurlijk wel handig om een lettertype te nemen wat ook op je eigen pc is geïnstalleerd. Zo kun je zelf goed het resultaat zien. Voor het lettertype voer je gewoon de naam ervan in, bijvoorbeeld: "tahoma" "arial" "times new roman" "verdana" "comic sans ms" Het lettertype leg je vast in de <font face> tag. Voor tahoma wordt dat: <font face="tahoma"> Je kunt variëren in de tekstgrootte. Die ligt tussen de 1 en 7: Dit is tekstgrootte 1 Dit is tekstgrootte 2 Dit is tekstgrootte 3 Dit is tekstgrootte 4 Dit is tekstgrootte 5 Dit is tekstgrootte 6 Dit is tekstgrootte 7 Standaard is tekstgrootte 2 (10pt) of 3 (12pt). In de <font> tag ziet dat er zo uit: <font face="tahoma" size="3"> De HTML-structuur als geheel ziet er nu zo uit: <html> < head> < title>Mijn Homepage</title> < /head> < body bgcolor="#FF0000" text="#000000"> < font face="tahoma" size="3"> < /font> < /body> < /html> Standaard wordt tekst links uitgelijnd. Plaats de tekst tussen de volgende tags als je anders wilt uitlijnen: Links ----- ----- ----- ----- <div align="left">...</div> ----- ----- Midden ----- ----- <div align="center">...</div> ----- ----- ----- ----- Rechts <div align="right">...</div> Tussen de <font> tags gaan we nu de rest van onze pagina opbouwen. Stap 4 - tekstopmaak Nu we het lettertype en de kleuren hebben vastgesteld, zijn we klaar om de tekst op de pagina te plaatsen. We nemen als voorbeeld even een standaardtekst, die je natuurlijk zelf kunt aanpassen: Welkom op mijn website! Hallo, mijn naam is Bert. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met links naar sites van reisgenoten van me. Je kunt de foto's en verhalen bekijken door hieronder op de links te klikken. Veel plezier! Groeten, Bert Nu moeten we de tekst opmaken in HTML, zodat de browser weet hoe de tekst moet worden weergeven. Daarvoor zijn een aantal tags van belang. We kunnen tekst vetgedrukt, onderstreept en cursief gedrukt weergeven, door de tekst tussen de volgende tags te plaatsen: <b>...</b> voor vet; < u>...</u> voor onderstreept; < i>...</i> voor cursief. Voor de overzichtelijkheid van je pagina is het belangrijk alinea's te maken. Dat doe je door de tekst tussen <p> tags te zetten. De browser maakt dan automatisch een witregel aan tussen de stukken tekst. Wil je geen witregel, maar de volgende zin op een nieuwe regel beginnen, dan gebruik je de tag <br> aan het einde van de regel. Deze tag kun je vergelijken met de entertoets op je toetsenbord. De voorbeeldtekst in HTML-opmaak komt er dan bijvoorbeeld zo uit te zien: <p><b>Welkom op mijn website!</b></p> < p>Hallo, mijn naam is <u>Bert</u>. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met <i>links</i> naar sites van reisgenoten van me.</p> < p>Je kunt de <b>foto's en verhalen</b> bekijken door hieronder op de links te klikken.</p> < p>Veel plezier!</p> < p>Groeten,<br> Bert</p> Plak nu deze in HTML opgemaakte tekst tussen de <font> tags en we krijgen de volgende lap HTML: <html> < head> < title>Mijn Homepage</title> < /head> < body bgcolor="#FF0000" text="#000000"> < font face="tahoma" size="3"> < p><b>Welkom op mijn website!</b></p> < p>Hallo, mijn naam is <u>Bert</u>. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met <i>links</i> naar sites van reisgenoten van me.</p> < p>Je kunt de <b>foto's en verhalen</b> bekijken door hieronder op de links te klikken.</p> < p>Veel plezier!</p> < p>Groeten,<br> Bert</p> < /font> < /body> < /html> Als je deze HTML-structuur in je document zet en opslaat, krijg je, als je je pagina met je browser bekijkt, het volgende resultaat: ...en daarmee is je eerste echte webpagina geboren! Stap 5 - afbeeldingen Er zijn veel verschillende soorten afbeeldingen die geschikt zijn om geplaatst te worden op internet. Het meest gebruikt zijn .jpg .jpeg .gif en .png-bestanden. Dit omdat deze bestanden een relatief goede kwaliteit kunnen vertonen en toch niet al te groot zijn. Voor bewegende afbeeldingen wordt meestal .gif gebruikt. Als je een foto wilt plaatsen, zorg er dan voor dat de bestandsgrootte niet te groot is. Anders kost het de bezoeker zonder snelle internetverbinding veel tijd om je fotopagina te laden. Een bestandsgrootte tussen de 20 en 80 kB is acceptabel voor een gemiddelde afbeelding. De <img> tag Om de browser een afbeelding te laten weergeven moet je laten weten waar die afbeelding te vinden is. We hebben onze eerste pagina, index.html, opgeslagen in de map c:/www en daar sla je ook je afbeelding op. Bijvoorbeeld een foto van jezelf: bert.jpg. Je kunt er -voor de overzichtelijkheid als je straks veel foto's hebteen aparte map voor aanmaken (bijvoorbeeld "c:/www/jpg/bert.jpg"). De tag voor het weergeven van een afbeelding is: <img src="jpg/bert.jpg" width="250" height="250" border="1" alt="Bert"> Met 'src' geef je de browser aan welke afbeelding moet worden weergegeven (c:/www/jpg/bert.jpg in dit geval, maar omdat het HTML-document "index.html" zelf ook in de map c:/www staat, mag je dit weglaten). Je kunt ook een andere website als locatie opgeven voor een afbeelding. De tag kan er dan zo uitzien: <img src="http://www.cesarsite.com/html/afb/webhtmllogo-rechthoek.jpg">. Met 'width' en 'height' geef je resp. de breedte en lengte aan van je afbeelding in pixels. Als je ze weglaat wordt de afbeelding op ware grootte weergegeven. 'Border' gebruik je om een randje om je foto te laten weergeven en met het getal geef je de dikte van de rand aan. '0' is dus géén rand om je afbeelding. En tot slot 'alt'; die kun je gebruiken om een tekst weer te laten geven als een bezoeker met z'n muis over de afbeelding gaat. De tekst is ook te zien als de foto om welke reden dan ook niet zichtbaar is. Met de <img> tag krijg je de afbeelding bert.jpg te zien: Plaatsen we nu de <img> tag in index.html (en centreren we de foto), dan krijgen we het volgende: <html> < head> < title>Mijn Homepage</title> < /head> < body bgcolor="#FF0000" text="#000000"> < font face="tahoma" size="3"> < p><b>Welkom op mijn website!</b></p> < p>Hallo, mijn naam is <u>Bert</u>. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met <i>links</i> naar sites van reisgenoten van me.</p> < p>Je kunt de <b>foto's en verhalen</b> bekijken door hieronder op de links te klikken.</p> < p>Veel plezier!</p> < p>Groeten,<br> Bert</p> < p><center><img src="jpg/bert.jpg" width="250" height="250" border="1" alt="Bert"></center></p> < /font> < /body> < /html> Als je deze HTML-structuur in je document zet en opslaat, krijg je, als je je pagina met je browser bekijkt, het volgende resultaat: Stap 6 - links Links zijn, zoals eerder gezegd, verwijzingen naar andere pagina's binnen dezelfde website of naar een andere site. Als een bezoeker op een link klikt, verschijnt een nieuwe pagina in het venster of in een nieuw venster. In ons voorbeeld hebben we tot nu toe maar één pagina, index.html. Maar je hebt inmiddels wel de kennis om zelf een nieuwe pagina te maken. Zet er tekst op of foto's of allebei en sla de pagina op in dezelfde map als index.html, dus c:/www. Laten we even uitgaan van een pagina met foto's met de naam foto.html. De <a href> tag We willen nu een link plaatsen op de pagina index.html om de pagina foto.html te kunnen bekijken. Dat doen we met de volgende tag: <a href="foto.html">...</a> De tekst die je op de plaats van de puntjes zet wordt weergegeven als actieve link op het scherm. Natuurlijk hoeft het niet persé tekst te zijn, maar kun je ook van bijvoorbeeld een afbeelding een link maken. Plaats dan de <img> tag op de plaats van de puntjes. Met de bovenstaande tag wordt de nieuwe pagina geopend in hetzelfde venster. Als je een link wilt maken naar een andere website, is het handiger om die in een nieuw venster te laten openen, zodat jouw site ook nog geopend blijft. Om dat te doen voeg je wat code toe aan je tag: Klik <a href="http://www.webhtml.nl" target="_blank">hier</a> voor WebHTML.nl Als je een link maakt naar een andere site, zet dan altijd het http://-prefix voor het adres, dan herkent de browser het adres als een andere site. Bovenstaande link ziet er in de browser zo uit: Klik hier voor WebHTML.nl In het voorbeeld hebben we een link naar een fotopagina (foto.html) en een link naar een pagina met reisverhalen (verhalen.html). Neem de links op in je HTML structuur: <html> < head> < title>Mijn Homepage</title> < /head> < body bgcolor="#FF0000" text="#000000"> < font face="tahoma" size="3"> < p><b>Welkom op mijn website!</b></p> < p>Hallo, mijn naam is <u>Bert</u>. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met <i>links</i> naar sites van reisgenoten van me.</p> < p>Je kunt de <b>foto's en verhalen</b> bekijken door hieronder op de links te klikken.</p> < p><a href="foto.html">Foto's</a><br> < a href="verhalen.html">Verhalen</a></p> < p>Veel plezier!</p> < p>Groeten,<br> Bert</p> < p><center><img src="jpg/bert.jpg" width="250" height="250" border="1" alt="Bert"></center></p> < /font> < /body> < /html> Als je deze HTML-structuur in je document zet en opslaat, krijg je, als je je pagina met je browser bekijkt, het volgende resultaat: Links naar andere bestanden Behalve links naar andere html-pagina's en sites kun je de <a href> tag natuurlijk ook gebruiken om bezoekers een bestand te laten downloaden. Een filmpje op avi-formaat bijvoorbeeld kun je bezoekers als volgt laten downloaden: Klik <a href="filmpje.avi">hier</a> om mijn filmpje te downloaden ...en deze tag ziet er dan zo uit: Klik hier om mijn filmpje te downloaden Net als met een avi-bestandje kun je naar alle bestanden linken met de <a href> tag. Stap 7 - tot slot Je hebt in de afgelopen zes stappen de basis van HTML gezien en je weet nu hoe een simpele webpagina zo ongeveer in elkaar steekt. Je hebt zelf een site gemaakt met een aantal veel voorkomende HTML tags. Door meer gebruik te maken van andere HTML tags breidt je de site verder uit. Zie hier een voorbeeld van een site die je zelf kunt maken, als je het volgende hoofdstuk met uitleg over HTML tags, tabellen, frames en meer, doorlopen hebt. Ook kun je andere elementen zoals Flash en Javascript aan je HTML toevoegen. Als je dit alles onder de knie hebt, zou je bijvoorbeeld ook aan de slag kunnen met php. Daarmee is het mogelijk een volledig interactieve website te bouwen, voorzien van inlogsystemen, winkelwagens, polls, forums, gastenboeken, noem maar op. Werkelijk grenzeloos, maar men moet eenvoudig beginnen, is het niet? "Ter lering ende vermaak" is het altijd wel aardig om, als je een interessante site tegenkomt op internet, even te kijken hoe die site is opgebouwd. Om de (meestal) HTMLstructuur achter de page te bekijken, klik je met de rechtermuisknop ergens op de webpagina en kies je vervolgens "bron weergeven" of "view source". Sommige sites hebben die mogelijkheid geblokkeerd, maar dan kun je in Microsoft Internet Explorer altijd nog naar "Bron" onder "Beeld". Kladblok opent en je kunt de HTML-structuur bekijken.
