HTML VOOR BEGINNERS BOUWEN VAN WEBSITES STEFAN DEFAUW
HTML VOOR BEGINNERS BOUWEN VAN WEBSITES STEFAN DEFAUW Brussel
HTML VOOR BEGINNERS 1. INLEIDING 2. INHOUD 3. OPMAAK 4. HET HUWELIJK HTML voor beginners 1/11/2022 2
1 INLEIDING HTML voor beginners 4% 1/11/2022 3
Akkoorden HTML voor beginners 6% 1/11/2022 4
Methode http: //users. telenet. be/freelearning/html. NL/ Voor degenen die men “Explorers” noemt HTML voor beginners 7% 1/11/2022 5
Hello world • Open “Notepad” • Tik “Hello world” in • Opslaan als helloworld. html • Dubbelklik het bestand in Explorer HTML voor beginners 9% 1/11/2022 6
Hello world q Geen opmaak q Geen kleur q Geen foto's q Geen hyperlinks HTML voor beginners 10% 1/11/2022 7
2 INHOUD HTML voor beginners 12% 1/11/2022 8
Doel HTML tags kunnen gebruiken voor: § Tekst § Titels § Foto's § Hyperlinks § Opsommingen § Tabellen HTML voor beginners 13% 1/11/2022 9
Maar eerst de structuur in HTML 5. . . <!DOCTYPE html> <head> <title>Titel</title> </head> <body> De inhoud van de webpagina </body> </html> HTML voor beginners 14% 1/11/2022 10
Elementen q HTML is een taal met tags tussen volgende elementen: <html> et </html> q De inhoud staat tussen de begin- en eindtag: <title>Titel</title> q De structuur moet steeds alsvolgt zijn: <!DOCTYPE html> <head></head> <body></body> </html> http: //www. websonic. nl/tutorials/websitehtmlxhtml/html_doctypes. php HTML voor beginners 16% 1/11/2022 11
De eerste elementen <head></head>: de metadata Bevat info over de pagina - Titel - Auteur - Sleutelwoorden (interessant voor zoekmachines) -. . . <body></body>: de zichtbare inhoud Al hetgene de gebruiker ziet: - Tekst - Hyperlinks - Foto's -. . . HTML voor beginners 17% 1/11/2022 12
Oefening 1 Maak een webpagina (HTML 5) met een titel en een inhoud over een regenboog oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 1. html HTML voor beginners 19% 1/11/2022 13
De belangrijkste elementen <p></p> De paragrafen <h 1></h 1>, <h 2></h 2>, . . . , <h 6></h 6> De koppen (zoals MS Word) <br/> Een nieuwe lijn </br> = <br/> HTML voor beginners 20% 1/11/2022 14
Oefening 2 q Voeg op je website een kop (h 1) toe met "Regenboog". q Schrijf voor iedere kleur van de regenboog (Rood, oranje, geel, groen, blauw, indigo, violet) een title en een kleine uitleg over die kleur. Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 2. html HTML voor beginners 22% 1/11/2022 15
Foto’s <img src=“foto. jpg” alt=“beschrijving” height=“hoogte” width=“breedte” /> Src q Bron (source) q Adres van het bestand Alt q De beschrijving van de foto q Zichtbaar als de foto niet getoond kan worden Height et width q De hoogte en breedte van de foto q Beschreven in pixels (px) of percentages (%) q Normaal scherm: 1280 x 800 pixels http: //www. w 3 schools. com/tags/tag_img. asp HTML voor beginners 23% 1/11/2022 16
Absoluut en relatief adres Relatief adres Absoluut adres Indien je een link wil maken met een bestand buiten jouw website Indien je een link wil maken met een bestand binnen jouw website q “h: UserFree Learningphoto. jpg” q "https: //www. google. be/images/nav _logo 242. png“ q q “photo. jpg” “images/photo. jpg” “. . /images/photo. jpg” HTML voor beginners 25% 1/11/2022 17
Relatief adres Startplaats: index. html q photo 1. jpg de foto staat in dezelfde map q logosphoto 2. jpg q. . photo 3. jpg q. . photosphoto 4. jpg HTML voor beginners 26% 1/11/2022 18
Oefening 3 q Voeg op jouw webpagina een foto toe van een regenboog q Wijzig de breedte van de foto om dat effect te zien • • • Via je webbrowser kan je met de rechtermuisknop klikken op een foto Vervolgens moet je 'Properties' selecteren Tenslote kan je de URL kopiëren bij 'Address' Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 3. html HTML voor beginners 28% 1/11/2022 19
Hyperlink <a href=“http: //www. google. be”>Zoekmotor</a> q Href De link van de pagina, foto, video, liedje, etc. q Tussen de elementen Hetgeen de gebruiker ziet en waarop hij kan klikken http: //www. w 3 schools. com/tags/tag_a. asp HTML voor beginners 29% 1/11/2022 20
Foto en hyperlink Hoe kan je een foto gebruiken als hyperlink? <a href=“http: //www. google. be”> <img src=“http: //scholar. google. be/intl/nl/scholar/images/1 x/googlelogo_color_2 70 x 104 dp. png” alt=“Klikken voor Google” /> </a> HTML voor beginners 30% 1/11/2022 21
Oefening 4 q Zorg ervoor dat je foto een link wordt naar een andere webpagina Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 4. html HTML voor beginners 32% 1/11/2022 22
Opsommingen Ongenummerde lijst <ul> <li>Roma</li> <li>Paris</li> <li>London</li> </ul> Genummerde lijst <ol> <li>Roma</li> <li>Paris</li> <li>London</li> </ol> HTML voor beginners 33% 1/11/2022 23
Oefening 5 q Voeg onder de titel een genummerde lijst met alle kleuren van de regenboog Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 5. html HTML voor beginners 35% 1/11/2022 24
Tabellen <table> <tr> <th>Stad</th> <th>Land</th> </tr> <td>Paris</td> <td>France</td> </tr> <td>Roma</td> <td>Italia</td> </tr> </table HTML voor beginners 36% 1/11/2022 25
Tabellen – de elementen 4 nieuwe elementen: q <table></table> q <tr></tr> § Een tabel wordt eerst lijn per lijn beschreven, daarna pas de cel q <td></td> § § Iedere lijn heeft één of meerdere cellen Iedere cel moet beschreven staan in dit element q <th></th> § Je kan een cel ook definiëren als een titel (met dus een specifieke opmaak) Iedere lijn of cel kan een bepaalde hoogte en breedte hebben. HTML voor beginners 38% 1/11/2022 26
Oefening 6 q In plaats van de lijst met kleuren, moet je die nu in een tabel plaatsen. In de eerste kolom de kleur en in de tweede kolom de omschrijving q De eerste kolom met de kleuren moet een breedte hebben van 200 px (pixels) q De kolom met blauw moet een hoogte hebben van minstens 150 px. Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 6. html HTML voor beginners 39% 1/11/2022 27
Tabellen: rowspan et colspan Wat als een cel meerdere kolommen breed moet zijn? <td colspan=“ 3”>Cel</td> Wat als die cel meerdere lijnen hoog moet zijn? <td rowspan=“ 3”>Cel</td> HTML voor beginners 41% 1/11/2022 28
Oefening 7 q Voeg een extra kolom toe aan de bestaande tabel. q Deze kolom moet enkel het woord "Regenboog" bevatten, maar moet wel over alle zeven rijen beslaan. Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 7. html HTML voor beginners 42% 1/11/2022 29
3 OPMAAK HTML voor beginners 43% 1/11/2022 30
Doel <div> kunnen gebruiken om de inhoud te groeperen CSS toepassen zodat de opmaak gecentraliseerd is voor alle webpagina's De opmaak specifiek maken voor smartphones en tablets. HTML voor beginners 45% 1/11/2022 31
DIV q Een div (“division”) is een onzichtbare post-it om de inhoud te groeperen q Iedere div kan een bepaalde breedte, hoogte en plaats hebben op het scherm q Een div kan ook een andere div hebben als inhoud (genest) q Krachtig in combinatie met CSS HTML voor beginners 46% 1/11/2022 32
Oefening 8 Op je webpagina moet je 3 divs maken: 1. 2. 3. De titel Het menu De inhoud Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 8. html HTML voor beginners 48% 1/11/2022 33
Positionering <div style=". . . ">tekst, foto's, etc. </div> Alles wat we beschrijven in het attribuut 'style', bepaalt de opmaak van die div. vb. <div style="top: 0 px; left: 0 px; "> <p>de tekst</p> </div> q Top: de afstand tussen de top van de div en het scherm (of een andere div) q Left: de afstand tussen de linkerkant van de div en het scherm (of een andere div) HTML voor beginners 49% 1/11/2022 34
Positionering Er zijn verschillende mogelijkheden: q top <-> bottom q left <-> right q height q width q z-index Indien er meerdere div's staan op dezelfde plaats moet er een scheidsrechter zijn die bepaalt welke div zichtbaar moet zijn. Alle div's worden vergeleken en degene met de hoogste z-index wordt getoond. HTML voor beginners 51% 1/11/2022 35
Positionering - position q Position § Position: relative; De browser zal alle divs in een lijst plaats en de ene na de andere tonen. Indien we de hoogte en de breedte aanpassen van een specifieke div, zal de positie van die div wijzigen (relatief gezien met zijn oorspronkelijke plaats), maar alle andere divs zullen als tevoren blijven. § Position: absolute; In dit geval zal de div niet in die lijst opgenomen worden met divs die één na één geplaatst wordt. Deze div zal een absolute positionering krijgen in de container (een andere div of het scherm) § Position: fixed; In dit geval heeft de div geen container meer, maar zal die zich positioneren relatief met het scherm. Dus indien het scherm gescrold wordt, zal de pagina uiteraard wijzigen maar de div blijft wel op dezelfde plaats in het scherm! position: sticky; https: //developer. mozilla. org/fr/docs/Web/CSS/position HTML voor beginners 52% 1/11/2022 36
Overflow: visible; De inhoud zal alsnog getoond worden. Dit is de standaardwaarde bij een div. Overflow: hidden; De inhoud wordt niet getoond. De inhoud is te groot en de div is te klein. . . Wat doen we nu? Overflow: scroll; De browser toont hoe dan ook schuifbalken Overflow: auto; De browser toont schuifbalken indien de inhoud te klein is HTML voor beginners 54% 1/11/2022 37
Oefening 9 Voor de 3 divs op de webpagina moet je de positie bepalen. 1. De titel moet 200 px hoog zijn 2. Het menu moet links van het scherm staan met een breedte van 250 px en onder de titel 3. De tekst moet onder de titel staan, rechts van het menu Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 9. html HTML voor beginners 55% 1/11/2022 38
HTML 5 Sommige divs werden vervangen door andere elementen. De functionaliteit blijft wel dezelfde: q <header> en <footer>: voor de hoofding en de voettekst bij een sectie q <nav>: al hetgene dat gebruikt wordt voor de navigatie q <section>: De plaats waar de inhoud geplaatst worden. Normaal gezien met een titel (<h 1>) en inhoud (<p>) q <aside>: de plaats waar je iets beschrijft dat indirect verband heeft met de inhoud van de rest van de pagina. q <article>: autonome inhoud die kan hergebruikt worden zoals commentaar, een artikel, etc. HTML voor beginners 57% 1/11/2022 39
HTML 5 HTML voor beginners 58% 1/11/2022 40
HTML 5 q <address>: de plaats waar je contactgegevens plaatst q <figure>: de ideale plaats voor foto's, grafieken, illustraties, etc. q <figcaption>: de plaats waar je wat uitleg bij de <figure> zet <address> <p>Indien u ons wil contacteren dan kan dit op <a href="mailto: blabla@bla. be">blabla@bla. be</a> </address> <figure> <img src="photo. jpg" /> <figcaption>bij deze een foto van ons product</figcaption> </figure> http: //www. w 3 schools. com/html 5_svg. asp HTML voor beginners 59% 1/11/2022 41
Oefening 10 Pas zoveel mogelijk HTML 5 toe op je webpagina Oplossing: http: //users. telenet. be/freelearning/html. NL/exer cice 10. html HTML voor beginners 61% 1/11/2022 42
Cascading Style Sheets Welke superheld zal er ons helpen om een opmaak toe te passen op onze ganse website? HTML voor beginners 62% 1/11/2022 43
CSS We passen CSS toe op: q Een element. Dat is inderdaard zoals we dat hiervoor gedaan hebben q Een enkele webpagina. In de <head></head> q Een afzonderlijk document gelink aan de pagina's. Onze voorkeur! HTML voor beginners 64% 1/11/2022 44
CSS – het bestand. css Er zijn twee stappen: q Maak een bestand. css. Bijvoorbeeld opmaak. css q Maak een link naar dat bestand in de webpagina's. . <head> <link rel="stylesheet" type="text/css" href="opmaak. css" /> </head>. . . HTML voor beginners 65% 1/11/2022 45
CSS – het bestand. css a { color: yellow; } p { margin-left: 20 px; } body { background-image: url("images/back 40. gif"); } HTML voor beginners 67% 1/11/2022 46
De attributen bij een achtergrond De attributen: q Background-color q Background-image q Background-repeat q Background-attachment q Background-position Van toepassing op: q Body q Div, hearder, footer, etc. q. . . HTML voor beginners 68% 1/11/2022 47
De attributen bij de achtergrond Body { background-image=url("glitter. gif"); } Div { background-color: blue; } HTML voor beginners 70% 1/11/2022 48
De kleuren - RGB q RGB = red, green, blue q Te gebruiken met de functie rgb(x, y, z) q x, y et z zijn een getal tussen 0 en 255 die de aanwezigheid geeft van de kleuren rood, groen en blauw. Vb. rgb(255, 0, 0) is rood en rgb(255, 255) wit, rgb(0, 0, 0) is zwart, etc. q Met iedere Office applicatie kan je wel een kleur kiezen en vervolgens de RGB waarden krijgen. HTML voor beginners 71% 1/11/2022 49
Kleuren van de bank in RGB Groentinten R 000 G 150 B 094 R 133 G 185 B 095 R 000 G 171 B 142 R 000 G 133 B 120 R 067 G 176 B 042 R 208 G 223 B 000 Accentkleuren R: G: B: 140 040 R: G: B: 030 150 R: G: B: 040 140 HTML voor beginners 72% 1/11/2022 50
Oefening 11 Wijzig de achtergrond van je webpagina naar rood. Vergeet de link niet te maken met je CSSbestand. Oplossing: q http: //users. telenet. be/freelearning/html. NL/e xercice 11. html q http: //users. telenet. be/freelearning/html. NL/e xercice 11. css HTML voor beginners 74% 1/11/2022 51
De attributen van een tekstelement De attributen: q color q Text-align: left, right, center, justify, inherit q Text-decoration q Text-transform q Text-indent q Font-family q Font-style q Font-size HTML voor beginners 75% 1/11/2022 52
De attributen van een tekstelement: voorbeeld h 1, h 2, h 3, h 4, h 5, h 6, p { font-family: Calibri, Arial, "Times New Roman"; } p{ color: rgb(0, 145, 90); text-align: right; font-size: 24 px; background-color: rgb(255, 204, 0); } HTML voor beginners 77% 1/11/2022 53
Hoe maken we uitzonderingen? We kunnen bepaalde layouts groeperen met het attribuut 'class' q In de html: <p class="rood">de tekst</p> q In de css. rouge { color: red; } Opgelet: deze class kan ook gebruikt worden bij andere elementen! P. e. : <h 1 class="rood">de titel</p> Als je enkel een specifieke class wil voor dat element, dan moet je alsvolgt tewerk gaan: p. rouge { } HTML voor beginners 78% 1/11/2022 54
Oefening 12 Het lettertype van jouw paragrafen moet Calibri zijn en van de titels (h 1, h 2, etc. ) Arial. De divs die gemaakt worden in het menu moet de class 'link' hebben. Vervolgens moet de achtergrond ervan rgb(51, 153) hebben. Oplossing: q http: //users. telenet. be/freelearning/html. NL/e xercice 12. html q http: //users. telenet. be/freelearning/html. NL/e xercice 12. css HTML voor beginners 80% 1/11/2022 55
De positionering van een div De attributen: q Position: fixed, absolute, relative q Top – bottom q Left – right q Width q Height q Float q Z-index HTML voor beginners 81% 1/11/2022 56
De positionering van een div: voorbeeld div { position: absolute; top: 0 px; left: 0 px; height: 120 px; overflow: hidden; z-index: 99; } HTML voor beginners 83% 1/11/2022 57
Hoe bepaal je de layout van één element? Ieder element kan een id hebben. q In de html <div id="titel">Titel van de pagina</div> q In de css #titel { position: absolute; top: 0 px; left: 0 px; } Uiteraard kan een id slechts éénmaal gebruikt worden binnen jouw pagina! HTML voor beginners 84% 1/11/2022 58
Oefening 13 Je moet drie divs hebben: - De titel - De breedte van het scherm Hoogte van 100 px - Het deel met de links (menu) - Op 25 px van de linkerkant van het scherm Breedte van 150 px - De inhoud - Oplossing: q http: //users. telenet. be/fre elearning/html. NL/exercic e 13. html q http: //users. telenet. be/fre elearning/html. NL/exercic e 13. css Links van het menu (dus op 200 px van de linkerkant van het scherm) De menu's moeten volgende kleur hebben • • rood: rgb(255, 0, 0) Oranje: rgb(255, 127, 0) Geel: rgb(255, 0) Groen: rgb(0, 255, 0) Blauw: rgb(0, 0, 255) Indigo: rgb(111, 0, 255) Violet: rgb(127, 0, 255) HTML voor beginners 86% 1/11/2022 59
De opmaak van een hyperlink Een hyperlink kan 4 toestanden hebben: 1. a: link Een normale link die nog niet bezocht is 2. a: visited Een link die reeds bezocht is 3. a: hover Een link waar je met de muis over gaat 4. a: active Een link waarop geklikt wordt (tijdens het klikken) Deze stijlen moeten steeds in die volgorde beschreven worden HTML voor beginners 87% 1/11/2022 60
Oefening 14 Alle links moeten lettertype Calibri hebben. Als de link nog niet bezocht werd, dan is de kleur wit, anders is die grijs. Als de bezoeker er met de muis over gaat, dan is de achtergrond zwart en als hij erop klikt rood. Oplossing: q http: //users. telenet. be/freelearning/html. NL/e xercice 14. html q http: //users. telenet. be/freelearning/html. NL/e xercice 14. css HTML voor beginners 88% 1/11/2022 61
Een afzonderlijke opmaak bij smartphones en tablets HTML voor beginners 90% 1/11/2022 62
Een afzonderlijke opmaak bij smartphones en tablets Dit doe je in twee stappen: 1. Voeg dit stukje code toe in de <head></head>. <meta name="viewport" content="width=device-width, initialscale=1. 0; maximum-scale=1. 0; user-scalable=0; " /> 2. Voeg dit stukje code toe in je css @media screen and (max-width: 480 px), screen and (max-devicewidth: 480 px) { De opmaak die je wil toepassen op het moment dat het scherm maximaal 480 px breed is } HTML voor beginners 91% 1/11/2022 63
Oefening 15 Pas in functie van jouw voorkeuren een opmaak toe specifiek voor een smartphone. Oplossing: q http: //users. telenet. be/freelearning/html. NL/e xercice 15. html q http: //users. telenet. be/freelearning/html. NL/e xercice 15. css HTML voor beginners 93% 1/11/2022 64
4 HET HUWELIJK HTML voor beginners 94% 1/11/2022 65
Doel Jouw webpagina op een server uploaden. De landingspagina maken HTML voor beginners 96% 1/11/2022 66
De pagina uploaden Alle documenten (html, css, foto's, etc. ) moeten op een server geplaatst worden. Iedere server heeft zijn eigen instructies: q Upload via webpage: userfriendly q Upload via ftp: gemakkelijk te automatiseren HTML voor beginners 97% 1/11/2022 67
Landingspagina Is het adres van jouw webpagina http: //www. mijnwebsite. be/start. html ? Of eerder http: //www. mijnwebsite. be ? Welke pagina krijgen we als we het adres niet specifieren? -> index. html HTML voor beginners 99% 1/11/2022 68
Dankjewel HTML voor beginners 100% 1/11/2022 69
- Slides: 69