missie1/index.html

<html>
<head>  

  <!--

    Ha! Daar ben je!

    Als je goed kijkt, dan zie je hieronder dezelfde tekst
    als dat je op de website zag, maar dan met allemaal code 
    er omheen. Die code zorgt er voor dat het er mooi uit ziet,
    en dat er een plaatje op de pagina staat!

    De MediaMasters Missie is:
    Met welke browser moet je op een andere manier de code van een website bekijken?

    Het antwoord op de vraag staat in de code hieronder. 
    
    Succes!

  -->

  <title>De MediaMissie van FutureNL</title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="../vormgeving.css" rel="stylesheet">
  
  <meta name="description" content="MediaMasters Missie - kun jij de code kraken?">
  <meta name="author" content="Q42">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div class="site-wrapper">

    <div class="site-wrapper-inner">

      <div class="cover-container">

        <div class="inner cover">
          <h1 class="cover-heading">Wist je dat...</h1>
          <p class="lead">... je van elke website op het internet de code kunt bekijken?</p>
          <p>Probeer het zelf maar eens. Je hebt er wel een computer voor nodig, met een iPad/tablet wordt het lastiger.</p>

          <!-- In de browser Safari moet je op een andere manier de code bekijken -->
          <script>
            var browser = navigator.userAgent.toLowerCase();
            if (browser.indexOf('safari') >= 0 && browser.indexOf('chrome') == -1) {
              document.write('<p>Eerst moet je de "developer modus" van je browser aanzetten, daarna kan je de code bekijken. Het filmpje laat zien hoe dat werkt.</p>');
              document.write('<iframe src="https://www.youtube.com/embed/__BxxUFr1CA" frameborder="0" allowfullscreen></iframe>');
            } else {
              document.write('<p>Klik met je rechter muisknop ergens op deze website en kies voor het bekijken van de "source" of "broncode".</p>');
              document.write('<p><img src="../view-source.png" name="view-source.png" /></p>');
            }
          </script>
        </div>

        <div class="mastfoot">
          <div class="inner">
            <p>MediaMissie van <a href="http://www.futurenl.org">FutureNL</a>, met hulp van <a href="https://www.q42.nl">Q42</a>.</p>
          </div>
        </div>

      </div>

    </div>

  </div>

</body>
</html>