HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie.

Transcriptie

1 HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie Dit lesmateriaal is gemaakt met Wikiwijs Maken van Kennisnet. Wikiwijs Maken is een onderdeel van Wikiwijsleermiddelenplein, hét onderwijsplatform waar je leermiddelen zoekt, vergelijkt, maakt en deelt.

2 Inhoudsopgave Inleiding Structuur HTML Basis HTML H1 kopregel Alineas HyperLinks Lijsten maken Afbeeldingen invoegen Video`s Kleuren CSS voor de opmaak Opmaak verder aanpassen Over dit lesmateriaal Pagina 1 HTML 5 en CSS 3

3 Inleiding In deze lessen informatica gaan we een websites bouwen. Hiervoor gebruiken we niet èèn of ander duur programma, maar een soort kladblok editor (Notepad ++)waarmee we de webpagina`s in codes maken. Dit lijkt heel erg saai maar je zal zien dat je snel iets moois maakt en begint te begrijpen hoe je met die codes moet werken. We zullen zien hoe je de opmaak en de indeling van de pagina`s van elkaar moet scheiden en wat daarvan het voordeel is. Je krijgt inzicht in de constructie die achter webpagina`s zit en je gaat begrijpen op welke manier deze zijn opgebouwd uit objecten. Dit inzicht heb je nodig om in het vervolg lessen je webpagina te laten reageren op muisklikken. In de vervolg lessen laten we zien wat de mogelijkheden zijn van de scripttaal, Javascript. Als we de technieken goed onder de knie hebben gaan we een website maken. Deze opdracht komt als laatst en vind je onderaan deze website. In deze laatste opdracht staat ook aan welke eisen deze website moet voldoen. Als bronmateriaal voor de technieken gebruiken we; of je kan ook de volgende website`s gebruiken: Nieuwste versie HTML Wat is de nieuwste versie HTML. Het antwoord vind je op de website w3schools.com a. HTML 6 b. HTML 7 c. HTML 4 d. HTML 5 Pagina 2 HTML 5 en CSS 3

4 Structuur Een website bestaat uit woorden en zinnen met daar tussen een aantal code woorden<tags>. Deze code woorden vormen zelf een taal die HTML wordt genoemd. HTML is een afkorting van HyperText Markup Language. Deze code en de tekst daartussen worden door een webbrowser zoals, Chrome, Firefox en Internet explorer getoond als een mooie opgemaakte webpagina. Voor de opmaak en interactie met de gebruikers van een webpagina, kunnen de HTML codes ondersteund worden met andere codes zoals CSS voor de opmaak en Javascript voor extra interactie. In de volgende onderdelen van de les leggen we uit hoe deze HTML taal werkt en op welke manier je CSS kan gebruiken voor de opmaak van je webpagina. Javascript behandelen we in de vervolg lessen. koppel de goede begrippen aan elkaar Welke tekst hoort bij de juiste term? sleep de juiste woorden naar de juiste zin. Een toont de webpagina op het scherm bestaat uit codes voor de inhoud wordt gebruikt voor de opmaak van de website zorgt voor de interactie op het internet Beschikbare keuzes: CSS, Javascript, HTML, browser Pagina 3 HTML 5 en CSS 3

5 HTML De bouwstenen voor van een HTML-pagina heten elementen. De elementen worden tussen de haakjes kleiner-dan-teken <en> het groter-dan-teken geplaatst. In de meeste gevallen bestaat een element uit een begin en eindtag met de inhoud daartussen. Zie voorbeeld hieronder: Element begintag eindtag functie html <html> </html> Omvattend element head <head> </head> kopgedeelte meta <meta> </meta> Informatie over inhoud webpagina title <title> </title> Titel van het webbrowser body <body> </body> Basisgedeelte deze tekst is zichtbaar op je site H1 <h1> </h1> Belangrijkste koptekst (groot lettertype) H2 <h2> </h2> Kop van het tweede niveau tekstgrootte iets kleiner. Dit gaat door tot H6. p <p> </p> Alinea. Gebruik voor een nieuwe alinea strong <strong> </strong> Tekst vetgedrukt maken i <i> </i> Tekst cursief maken td <td> </td> Tabel plaatsen ol <ol> </ol> Wordt gebruikt voor genummerde lijsten altijd gebruiken in combinatie met <li> element li <li> </li> Tekst voor opsommingen altijd tussen deze tag Er zijn ook elementen die geen begin en eindtag hebben. Bijvoorbeeld het img element en het br element. Hier komen we later in deze les nog op terug. Pagina 4 HTML 5 en CSS 3

6 Basis HTML De basis van een nieuwe webpagina is altijd opgebouwd uit dezelfde codes. De eerste webpagina van je website noem je altijd index.html, sla het bestand altijd op zonder gebruik te maken van hoofdletters. Het is aan te raden je eerste tekst op te slaan als basis.html. Deze tekst kan je dan iedere keer gebruiken als je een nieuwe pagina wilt maken. Zie voorbeeld tekst hieronder, voor iedere nieuwe webpagina. Vraag Body Hoe heet het element (code) waar je de inhoud van je website plaatst? a. Tussen <head>...</head> b. Tussen <body>...</body> Pagina 5 HTML 5 en CSS 3

7 H1 kopregel H1 Kopregel Om aan te geven dat een stukje tekst een kopregel moet worden, zetten we voor deze tekst de tag <h1> dit is een kopregel</h1>. De h1 is de grootste kopregel (grootste lettergrootte) die er is. Voor de kleinere kopregels kan je de tags h2, h3, h4, h5 of de h6 gebruiken. Hieronder een afbeelding van de te gebruiken tags voor kopregels. En daaronder een afbeelding zoals deze in je webbrowser worden getoond. Pagina 6 HTML 5 en CSS 3

8 Alineas Alineas Om aan te geven dat een stuk tekst een alinea is, moeten we de tekst tussen de tags <p> en </p> zetten. Als je dan het volgende stuk tekst op een nieuwe regel wint beginnen moet je de volgende tekst ook weer tussen <p> en </p> zetten. In het voorbeeld hieronder is ook gebruik gemaakt van de tag <br>. De <br> code staat voor Break (hetzelfde als de entertoets), en bestaat niet uit een begintag en eindtag. Maar alleen de code <br> zorgt ervoor dat de tekst start op een nieuwe regel. De HTML codes Voorbeeld in webbrowser Pagina 7 HTML 5 en CSS 3

9 HyperLinks Hyperlinks Tot nu toe hebben we alleen elementen gebruikt die iets in de webpagina zetten zonder dat je daar iets mee kan doen. Als dit alles was bestond het "world Wide Web" (WWW) niet. Eèn van de belangrijkste elementen die voor de werking van het internet als World Wide Web hebben gezorgd is het gebruik van hyperlinks vanuit een webpagina naar andere webpagina`s en andere websites. Een hyperlink maak je door het A element te gebruiken. De A is afkomstig van van het woord anchor (anker). Tip: zorg er altijd voor dat de bestandsnaam geen spaties bevat, je krijgt dan foutmeldingen. Een hyperlinktekst krijgt meestal een andere kleur en een streep onder de tekst, hierdoor weet de bezoeker van je website dat het gaat om een hyperlink en als je met de muis op de hyperlink staat veranderd de cursor in een handje. Hieronder zie je een voorbeeld van de tag A, een hyperlink naar Twitter, en een voorbeeld van een interne link naar je volgende webpagina op je eigen website. De HTML hyperlink code Links maken Voorbeeld hyperlink in webbrowser Naar een andere pagina kan je linken met het volgende element: a. Element <h1 b. Element <p c. Element <img d. Element <a Pagina 8 HTML 5 en CSS 3

10 Lijsten maken Lijsten Maken Om aan te geven dat een tekst een genummerde lijst is moeten we eerst de gehele lijst tussen <ol> en </ol> zetten. De verschillende items van de lijst moeten vervolgens tussen de <li> en </li> worden gezet. zie voorbeeld hieronder: <ol> <li>het eerste item</li> <li> het tweede item </li> </ol> Er zijn twee verschillende manieren om een lijst op te zetten. Zoals hierboven de <ol> deze staat voor een genummerde lijst. Maar ook kan je de <ul> gebruiken, je krijgt dan een lijst met bolletjes ervoor. Hieronder een voorbeeld van de HTML tags en daaronder het voorbeeld, zoals dat zichtbaar is op je website. HTML code lijst lijst met nummers Een lijst met nummers, maak je met het element? Voorbeeld lijst in webbrowser Pagina 9 HTML 5 en CSS 3

11 a. <ol> b. <ul> c. <a d. <img lijst met bolletjes Voor een lijst met opsommingstekens (bolletjes) gebruik je het element: a. <a b. <ul> c. <img d. <ol> Pagina 10 HTML 5 en CSS 3

12 Afbeeldingen invoegen Afbeeldingen invoegen Om een plaatje toe te voegen aan een website heb je de tag <img> nodig. Een afbeelding/foto tag is anders opgebouwd als andere tags, want een afbeelding/foto heeft geen begintag en eindtag. Bij het element <img> leren we een nieuw onderdeel van HTML kennen: attributen. Attributen Een attribuut is een nadere specificatie van een element. Bij de meeste elementen kunnen we attributen toevoegen als we dat willen. Het is echter niet verplicht. Er zijn heel veel attributen, teveel om hier te laten zien. Maar op de volgende website staat een overzicht: Bijzonder aan het element img is dat het twee attributen heeft die wel verplicht zijn: src en alt een attribuut heeft altijd dezelfde opbouw namelijk <p> de naam van het attribuut (hier src en alt) het is gelijkteken (=) de inhoud van het attribuut (naam afbeelding en beschrijving daarvan) <img src="naam.jpg" alt="beschrijving"/> </p> Om een afbeelding/foto in jouw website te krijgen, moet je eerst een afbeelding/foto van internet downloaden, of deze via andere media opslaan in jouw eigen map waar ook de website staat. Anders werkt het niet. Daarna type je de tag over zoals hierboven staat omschreven. Door de <p> te gebruiken krijg je iets meer witruimte om je foto heen. Op de plaats van naam.jpg zet je de naam van de afbeelding/foto neer. Bij alt zet je de beschrijving van jouw afbeelding/foto neer. De alt tekst zorgt ervoor dat, wanneer iemand de afbeelding of foto niet kan zien, de webbrowser de beschrijving van je afbeelding/foto laat zien. Dit gebeurt bijvoorbeeld bij een slechte verbinding of bij software voor mensen met dyslexie en blinde mensen, waarbij websites worden voorgelezen. Hieronder een voorbeeld van de HTML tag img. en daaronder het voorbeeld zoals deze in een webbrowser wordt getoond. voorbeeld tag afbeelding Voorbeeld afbeelding in webbrowser Pagina 11 HTML 5 en CSS 3

13 afbeelding invoegen Verschil tussen JPG,PNG en Gif afbeeldingen Met welk element voeg je een afbeelding in? a. <h1> b. <a c. <p> d. <img Pagina 12 HTML 5 en CSS 3

14 Video`s Video`s op je website Je kan in jouw website ook filmpjes over nemen van videosites zoals You Tube. Je kan al een link maken naar de verschillende video`s. Nu is het lastig voor bezoekers van jouw website om video`s te bekijken door naar een andere website te gaan. Sterker nog, die bezoekers komen misschien wel niet meer terug en blijven op die andere website. We gaan daarom een video op onze eigen website zetten met behulp van een embedded code die je vindt in You Tube. Je vindt deze code door bij een You Tube video onder de video op share of delen te klikken. Er komt dan een link te staan, die willen we niet. Klik vervolgens op Embed of insluiten de code begint met iframe deze kopieer je naar je notepad++. zie voorbeeld van YouTube code hieronder. code You Tube You Tube HTML code Pagina 13 HTML 5 en CSS 3

15 Kleuren Kleuren op je website Kleuren worden in HTML gemaakt met speciale codes. Die codes worden hexadecimalen (kleur) codes genoemd. De kleurcodes bestaan uit de hoeveelheid rood,groen en blauw om zo samen alle kleuren te kunnen maken en lopen van 00 tot ff. zo is rood: #ff0000 groen: #00ff00 en blauw: #0000ff Je kunt online speciale kleurkiezer gebruiken om deze codes te maken. Gebruik hiervoor de volgende kleurenkiezer: welke kleurcode Welke van de onderstaande kleuren is zwart? a. #ff0000 b. #ffffff c. # d. #0000ff Pagina 14 HTML 5 en CSS 3

16 CSS voor de opmaak CSS voor de opmaak We gaan nu de opmaak van de pagina verbeteren. Hiervoor moeten we een nieuwe bestand maken met de naam eerste.css. Deze moet gekoppeld worden aan de webpagina die we al hebben gemaakt de eerste.html Deze koppeling maak je door de volgende code te plaatsen tussen de <head>..</head> <link rel="stylesheet" href="eerste.css" /> In dit nieuwe bestand: eerst.css zet je de codes waardoor je de tekst in: h1 blauw: code h2 groen: code p rood: code de achtergrond van je website moet grijs worden; code;# Pagina 15 HTML 5 en CSS 3

17 Opmaak verder aanpassen Opmaak aanpassen De stylesheet (css) geeft je de mogelijkheden om de stijl van jouw website helemaal aan te passen. Denk daarbij aan de kleuren, randen, vormen,muisovers, ga maar door. Veel te veel om op te noemen, gebruik daarom de volgende website om alle mogelijke css codes te bekijken. Engelse website Nederlandse website Pagina 16 HTML 5 en CSS 3

18 Antwoorden Nieuwste versie HTML Wat is de nieuwste versie HTML. Het antwoord vind je op de website w3schools.com 1. HTML 6 Deze zal misschien nu ontwikkeld worden 2. HTML 7 Deze zal misschien ooit wel komen 3. HTML 4 Jammer dit is een oudere versie 4. HTML 5 koppel de goede begrippen aan elkaar Welke tekst hoort bij de juiste term? sleep de juiste woorden naar de juiste zin. Een browser toont de webpagina op het scherm HTML bestaat uit codes voor de inhoud CSS wordt gebruikt voor de opmaak van de website Javascript zorgt voor de interactie op het internet Vraag Body Hoe heet het element (code) waar je de inhoud van je website plaatst? 1. Tussen <head>...</head> 2. Tussen <body>...</body> Links maken Naar een andere pagina kan je linken met het volgende element: 1. Element <h1 Nee helaas 2. Element <p Deze is voor het maken van alinea`s 3. Element <img dit element is om een afbeelding in te voegen 4. Element <a Juist helemaal goed lijst met nummers Een lijst met nummers, maak je met het element? 1. <ol> 2. <ul> 3. <a Pagina 17 HTML 5 en CSS 3

19 4. <img lijst met bolletjes Voor een lijst met opsommingstekens (bolletjes) gebruik je het element: 1. <a 2. <ul> 3. <img 4. <ol> afbeelding invoegen Met welk element voeg je een afbeelding in? 1. <h1> 2. <a 3. <p> 4. <img welke kleurcode Welke van de onderstaande kleuren is zwart? 1. #ff #ffffff 3. # #0000ff Pagina 18 HTML 5 en CSS 3

20 Over dit lesmateriaal Colofon Auteur Truus de Bont Laatst gewijzigd 14 september 2015 om 20:43 Licentie Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 3.0 Nederlands licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om: het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken voor alle doeleinden, inclusief commerciële doeleinden. Meer informatie over de CC Naamsvermelding 3.0 Nederland licentie Aanvullende informatie over dit lesmateriaal Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar: Leerniveau Praktijkonderwijs; VSO; Leerinhoud en doelen Computervaardigheden/ICT; Eindgebruiker leerling/student Moeilijkheidsgraad gemiddeld Trefwoorden html en css Pagina 19 HTML 5 en CSS 3