Pdf downloaden
Pdf downloaden
Als je een afbeelding toe wilt voegen aan een webpagina, dan heb je alleen maar HTML nodig. Als je een afbeelding als achtergrond wilt gebruiken voor een webpagina, dan heb je zowel HTML als CSS nodig. HTML staat voor Hypertext Markup Language en is code waarmee je de browser duidelijk maakt wat er op een webpagina moet worden getoond. [1] X Bron CSS staat voor Cascading Style Sheets en wordt gebruikt voor het uiterlijk en de opmaak van een webpagina. [2] X Bron Je hebt een achtergrondafbeelding nodig als je die graag wilt gebruiken voor je webpagina.
Stappen
-
Maak een map voor het HTML-bestand en de achtergrondafbeelding. Maak op je computer een map die je op een later tijdstip makkelijk weer kunt vinden.
- Je kunt de map elke naam geven die je wilt, maar als je met HTML werkt is het beter om bestanden en mappen korte namen te geven die uit één woord bestaan.
-
Doe de achtergrondafbeelding in de map met HTML-code. Plaats de afbeelding die je wilt gebruiken als achtergrond in de map met HTML-code.
- Eenvoudige afbeeldingen met een onopvallend, herhalend patroon zijn het best te gebruiken als achtergrondafbeeldingen, zodat je de tekst die op de afbeelding staat nog goed kunt lezen.
- Als je geen afbeelding hebt dan kun je wel ergens een gratis achtergrond downloaden. Plaats die afbeelding in de map met HTML-code die je hebt gemaakt.
-
Maak een HTML-bestand. Open een teksteditor en maak een nieuw bestand. Sla het bestand op als index.html.
- Je kunt elke teksteditor gebruiken die je wilt, zelfs de teksteditors van Windows (Kladblok) en Mac OS X (TextEdit).
- Als je een teksteditor wilt gebruiken die speciaal bedoeld zijn voor het coderen in HTML, klik dan hier om Atom te downloaden, een teksteditor voor Windows, Mac OS X en Linux.
- Als je TextEdit gebruikt, klik dan op het menu Format en daarna Make Plain Text, voor je begint met het coderen in HTML. Deze instelling zorgt ervoor dat het HTML-bestand correct in de webbrowser laadt.
- Tekstverwerkers zoals Microsoft Word zijn niet geschikt voor het coderen in HTML, omdat die onzichtbare tekens en opmaak toevoegen waardoor het HTML bestand niet op de juiste manier in een webbrowser wordt getoond.
Advertentie
-
Kopieer en plak de standaard HTML-code. Selecteer en kopieer de HTML-code hieronder, en plak dit vervolgens in je geopende index.html bestand.
<!DOCTYPE html> < html > < head > < title > Titel van pagina </ title > < style > body { background-image : url ( " " ); } </ style > </ head > < body > </ body > </ html >
-
Voeg de URL van de achtergrondafbeelding er aan toe. Zoek in het index.html bestand naar de regel background-image: url(" "); . Zet de cursor tussen de haakjes en typ daarna de bestandsnaam van de achtergrondafbeelding. Zorg dat je de extensie van de achtergrondafbeelding meeneemt.Advertentie
- Wanneer je klaar bent, dan hoort het er als volgt uit te zien:
background-image: url("background.png");
- Wanneer je een bestandsnaam gebruikt zonder pad of een URL, dan zal de webbrowser in de map van de webpagina zoeken naar de afbeelding met die naam. Als het bestand in een andere map staat op je systeem, dan zal je het volledige pad naar dat bestand moeten toevoegen. [3]
X
Bron
-
Open het HTML-bestand in een webbrowser. Klik met de rechtermuisknop op de index.html en open het dan in de webbrowser van je keuze.
- Wanneer je browser opent en je ziet de afbeelding niet, zorg dan dat de bestandsnaam van de afbeelding correct is gespeld in de code van index.html.
- Wanneer de browser opent en je ziet HTML-code in plaats van de de achtergrondafbeelding, dan heb je het index.html bestand opgeslagen als rich text document. Probeer het HTML-bestand in een andere teksteditor te bewerken.
-
Bewerk het HTML-bestand. In de teksteditor plaats je de cursor tussen de<body></body> tags en typ je Hello world! . Herlaad het browservenster om de tekst bovenop de achtergrondafbeelding te zien.Advertentie
-
HTML en CSS-tags. HTML-code bestaat uit open en sluiten-tags. De<body>-tag is de open body-tag, en </body> is de sluiten body-tag. Elke open-tag op een HTML-pagina heeft ook een sluiten-tag nodig om de pagina correct weer te kunnen geven.
-
De DOCTYPE-tag. Elke HTML-pagina hoort te beginnen met een <!DOCTYPE html>. Hiermee maak je de webbrowser duidelijk dat het om een HTML-bestand gaat.
-
Bewerk het HTML-bestand. In de teksteditor plaats je de cursor tussen de<body></body>-tags en typ je daar "Hello world! Herlaad het browservenster om de tekst bovenop de achtergrondafbeelding te zien.
-
HTML en CSS-tags. HTML-code bestaat uit open en sluiten-tags. De <body>-tag is de open body-tag, en </body> is de sluiten body-tag. Elke open-tag op een HTML-pagina heeft ook een sluiten-tag nodig om de pagina correct weer te kunnen geven.
-
De title-tag. De <title>-tag is tekst die verschijnt in de titelbalk van je browservenster, naast de tekst die verschijnt in een browser tabblad.
-
De style-tag. De <style>-tag geeft aan dat er CSS gaat volgen. Alles tussen de <style>-tags is CSS-code.
-
De body-tag. Elke tekst die tussen de <body>-tags komt te staan zal als gewone tekst worden weergegeven, behalve als het HTML of CSS-code is.
-
Bewerk het HTML-bestand. In de teksteditor plaats je de cursor tussen de <body></body>-tags en typ je daar "Hello world!". Herlaad het browservenster om de tekst bovenop de achtergrondafbeelding te zien.Advertentie
-
Begrijp de CSS-code. In je index.HTML-code, vertelt CSS-code tussen de <style>-tags de webbrowser om een achtergrondafbeelding met een specifieke naam toe te voegen aan de <body>-tag wanneer de webpagina wordt gegenereerd.
-
Bekijk de CSS-code.
-
Uit welke onderdelen bestaat CSS-code. CSS-stijlen bestaan uit twee delen, de selector en de declaratie. [4] X Bron
- In het voorbeeld is body
de selector en
background-image: url("background.png") is de declaratie.- Een selector kan elke HTML-tag zijn.
- Declaraties staat altijd tussen accolades { }.
-
Wat is een CSS declaratie. De CSS-declaratie bestaat uit twee delen, de eigenschap en de waarde. Tussen de accolades,
background-image is de eigenschap (property) en url("background.png") is de waarde (value). [5] X Bron- De eigenschap geeft aan wat er in een stijl wordt gegoten en de waarde geeft aan in hoeverre een stijl op die eigenschap wordt toegepast.
- De eigenschap en de waarde worden altijd door een dubbele punt van elkaar gescheiden.
- CSS declaraties eindigen altijd met een puntkomma.
Advertentie
Bronnen
Advertentie
Meld je aan voor de gratis nieuwsbrief van wikiHow!
Je vindt dan elke week handige handleidingen in je inbox.
Meld me aan!
