Lojdf sjfsd sjdnfs jsdf jsnfsd jsdf s?

Basic-layout

Zo ziet de basic layout van een html pagina eruit:


                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                </head>
                
                <body>
                    <header>
                
                    </header>
                    <nav>
                
                    </nav>
                
                    <main>
                
                    </main>
                
                    <footer>
                
                    </footer>
                </body>
                
                </html>

html-structuur

Dit is eigenlijk de basis van een webpagina en bepaalt hoe een webpagina is opgebouwd. Deze structuur zorgt ervoor dat browsers en zoekmachines, zoals Google, de inhoud van de pagina goed kunnen verwerken, interpreteren en weergeven.

Doctype
Dit is de eerste regel van een html-pagina. Dit laat de browser weten dat dit een html pagina is en welke versie van html er gebruikt wordt.

<html>
Tussen de deze tag bevindt zich alle html-code inclusief 2 hele belangrijke tags, namelijk de head en body.

<head>
tussen deze tag bevindt zich de meta data van de pagina, bijvoorbeeld de <title> en <links> van stylesheets. ook bevat het de <meta> tag. Hierin zit data om ervoor te zorgen dat de browser de pagina juist inlaat. De meta tags zijn niet zichtbaar in de pagina. maar zorgen ervoor dat de pagina juist geladen moet worden.

<body>
Hier bevindt zich alle zichtbare inhoud van een pagina, bijvoorbeeld de <img> <p> etc.. .

Heading

Headings zijn de koppen van elementen, deze zijn gerangschikt van belangrijk naar minder belangrijk. Er zijn 6 headings.


Dit is h1

heading


Dit is h2

heading


Dit is h3

heading


Dit is h4

heading


Dit is h5

heading

Dit is h6

heading
                
    <p>Dit is h1</p>
    <h1>heading</h1>
    <br>
    <p>Dit is h2</p>
    <h2>heading</h2>
    <br>
    <p>Dit is h3</p>
    <h3>heading</h3>
    <br>
    <p>Dit is h4</p>
    <h4>heading</h4>
    <br>
    <p>Dit is h5</p>
    <h5>heading</h5>
    <br>
    <p>Dit is h6</p>
    <h6>heading</h6>

<p>

                
                    <p>Een paragraph word gebruikt voor het schrijven van een text.
                    Je gebruikt de openingstag:<code>&lt;p&gt;</code> en de sluitingstag:<code>&lt;/p&gt;</code>.Een
                    paragraph begint altijd op een nieuwe witregel.</p>

Een paragraph word gebruikt voor het schrijven van een text. Je gebruikt de openingstag:<p> en de sluitingstag:</p>.Een paragraph begint altijd op een nieuwe witregel.

<br>

Om elementen als bijvoorbeels afbeeldingen en tekst te laten beginnen om een nieuwe witregel. Maak je gebruik van <br>. Dit staat voor brake.


random tekst en ik wil nu een witregel ertussen.
Ik wil dat deze zin op de volgende regel komt. 

            
                <p>random tekst en ik wil nu een witregel ertussen <br>.Ik wil dat deze zin op de volgende regel komt.</p>

<hr>

Voor het maken van een horizontale lijn om bijvoorbeeld secties van elkaar te scheiden.

                
                    <p>Voor het maken van een horizontale lijn om bijvoorbeeld secties van elkaar te scheiden.</p>
                    <hr>

<blockquote>

Dit wordt gebruikt voor bronvermelding.

<strong>

Dit wordt gebruikt voor het aangeven dat iets belangrijk is. Het maakt de tekst vetgedrukt.

                
                    <p>Dit wordt gebruikt voor het aangeven dat iets <strong>belangrijk</strong> is. Het maakt de tekst vetgedrukt.</p>

<em>

Dit maakt de tekst cursief.

                
                    <p>Dit maakt de tekst <em>cursief.</em></p>

<small>

Dit maakt de tekst kleiner.

                
                    <p>Dit maakt de tekst <small>kleiner.</small></p>

<mark>

Dit markeert de tekst.

                
                    <p>Dit <mark>markeert</mark> de tekst.</p>

<del>

Dit doorkruist de tekst

                
                    <p>Dit <del>doorkruist</del> de tekst</p>

<ins>

Dit wordt gebruikt voor het vervangen van een tekst dat is verwijderd met <del>.


My favorite color is blue red!

                
                    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<List>

Dit staat voor unordered list. Een ongesorteerde lijst is een lijst zonder een bepaalde volgorde. De items in deze lijst worden vaak weergegeven met een bolletje.



Dit is een ordered list. hier maakt de volgorde wel uit. Het is genummerd:


  1. item-1
  2. item-2
  3. item-3

Dit is een definitie lijst. Hiermee kun je definities weergeven van bepaalde termen:


appel
Een fruit dat groeit aan bomen.

CSS
Een stijltaal voor het opmaken van HTML-elementen.

Elke item van eem list wordt aangeduidt met listitem: <li>:


  • Dit is een item in de lijst
    •                     
                        <li>Dit is een item in de lijst</li>

                        Een unordered list:

                        <ul>                                            
                            <li>item-1</li>
                            <li>item-2</li>
                            <li>item-3</li>
                        </ul>

                        Een ordered list:

                        <ol>
                            <li>item-1</li>
                            <li>item-2</li>
                            <li>item-3</li>
                        </ol>

                        Een defintielijst:

                        <dt>Term</dt>
                        
                        <dd>Dit is de uitleg van de term.</dd>

                        <dl>
                            <dt>appel</dt>
                            <dd>Een fruit dat groeit aan bomen.</dd>

                            <dt>CSS</dt>
                            <dd>Een stijltaal voor het opmaken van HTML-elementen.</dd>
                        </dl>

    <a>

    Met de anker element kun je links toevoegen aan elementen, bijvoorbeeld je headings, images etc.. .

    Bijvoorbeeld het linken naar een andere pagina: LINK 

        
        <p> Bijvoorbeeld het linken naar een andere pagina:
            <a href="/test.html">een link</a>
        </p>

    <img>

    Inladen van images kun je doen met de <img> tag. met src moet je het pad of url weergeven waar de image is opgeslagen.


                    
                     <img src="https://picsum.photos/200/200">

    <video>

    Voor het inladen van video gebruik je de <video> tag. Ook hier geef je de url of pad weer in de src.




    loop: zorgt ervoor dat de video steeds opnieuw afspeelt.

    autoplay: zorgt ervoor dat de video automatisch afspeelt.

    controls: zorgt ervoor dat de controls hebt op de video om de video bijvoorbeeld te pauzeren of af te spelen.

                    
                    <video src="/images/video.mp4" style="height: 200px;" loop autoplay controls></video>

    <audio>

    Voor het inladen van audio gebruik je de <audio> tag. ook hier maak je weer gebruik van de src.




    controls: zorgt ervoor dat je de controls hebt om de audio af te spelen. Ook hier kun je 'loop' en 'autoplay' gebruiken

                    
                    <audio controls src="/images/video.mp4"></audio>

    <iframe>

    Hiermee je een stukje van een andere website in jouwe website plaatsen.


                    
                    <iframe width="300" height="200"
                    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.
                    00030577182769775396%2C51.478569861898606&layer=mapnik">
                    </iframe>

    <canvas>