Tag: HTML

  • Multilevel Menu

    Multilevel Menu

    Murat Kilic har denne vejledning til kodning af en multilevel menu i ren CSS / HTML. Med denne teknik behøver du ikke at bruge JavaScript i menuerne.

  • En ny karrusel

    En ny karrusel

    Sådan kunne løsningen se ud, når du implementerer en karrusel fra W3 Schools i en “Tilpasset HTML” blok.

    1 / 3

    Caption Text

    2 / 3

    Caption Two

    3 / 3

    Caption Three




    CSS, HTML & JavaScript

    Herunder ser du indholdet i blokken "Tilpasset HTML":

    <style>
        * {box-sizing: border-box}
        body {font-family: Verdana, sans-serif; margin:0}
        .mySlides {display: none}
        img {vertical-align: middle;}
    
        /* Slideshow container */
        .slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
        }
    
        /* Next & previous buttons */
        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
        }
    
        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }
    
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
        }
    
        /* Caption text */
        .text {
          color: #f2f2f2;
          font-size: 15px;
          padding: 8px 12px;
          position: absolute;
          bottom: 8px;
          width: 100%;
          text-align: center;
        }
    
        /* Number text (1/3 etc) */
        .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }
    
        /* The dots/bullets/indicators */
        .dot {
          cursor: pointer;
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }
    
        .active, .dot:hover {
          background-color: #717171;
        }
    
        /* Fading animation */
        .fade {
          animation-name: fade;
          animation-duration: 1.5s;
        }
    
        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }
    
        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
          .prev, .next,.text {font-size: 11px}
        }
        </style>
      <div>
        <div class="slideshow-container">
    
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/witch-edited.jpeg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>
    
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/superwoman-coder-edited.jpeg" style="width:100%">
          <div class="text">Caption Two</div>
        </div>
    
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/hugin-munin-2.jpeg" style="width:100%">
          <div class="text">Caption Three</div>
        </div>
    
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
    
        </div>
        <br>
    
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </div>
    
        <script>
        let slideIndex = 1;
        showSlides(slideIndex);
    
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }
    
        function currentSlide(n) {
          showSlides(slideIndex = n);
        }
    
        function showSlides(n) {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          let dots = document.getElementsByClassName("dot");
          if (n > slides.length) {slideIndex = 1}
          if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";
          dots[slideIndex-1].className += " active";
        }
        </script>

    Kilde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

  • HTML – how to validate your code

    The trade mark of the Multimedia Designer is a code with as few issues as possible. In the video you’ll get a short introduction to the debugging craft.

  • The Future of HTML and CSS

    What is the future perspectives for the HTML and CSS standards? At the Future of the Web conference Den Odell started with a definition for responsive web design, somewhat like this:

    … the website appears to have been built for that particular device.

    Odell talked about what is going to happen with HTML and CSS soon, in the future and the end goal of RWD.

    Soon

    The new specifications for HTML5.1 and CSS level 4 is in the near future. A great improvement is the pictures tag. Here a new attribute is srcset that will work in the img and picture tags.

    <picture 
        srcset="tiny.jpg 1x, larger.jpg 2x"
        src="myPicture.jpg"
        alt="Here is my picture" />

    In the CSS you will be able to use the images according to media queries. And so you can have responsive images in a more elegant way.

    But Odell states, that this is in the near future. By now some 52% of the web browsers support using pictures and images like that.

    The future

    Here Odell presented ideas for media queries, for instance a webpage might look different from country to country or even from continent to continent. The CSS might look somewhat like this:

    @media {
        continent: europe;
    }

    Perhaps the user acitity could be monitored. What if you’re jogging while on the webpage?

    @media {
        activity: jog;
    }

    Connection speed is also an important factor, so perhaps you could address the problem thus:

    @media {
        connection-speed: slow;
    }
    The end goal

    For Odell the end goal is this: the browsers must disappear. So in conclusion Odell asumes, that the GUI will:

    … apear to have been built for the user.

    From the helicopter perspective Odell’s vision is a movement from a focus on devices to focus on the user.

  • The image registration point

    On at JavaScript canvas the registration point is the top left corner.

    So in hit detection you have to calculate the x-position, the image width and height. In layout you should be able to figure out where to plage the images, and illustrations.

    • Y = “up / down”
    • X = “left / right”

    ( I tend to forget this … )

    The image registration point.
    The image registration point.
  • HTML Kickstart og PHP

    HTML Kickstart wireframe
    HTML Kickstart wireframe

    HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

    • Gem din fil som minfil.php
    • Herefter kan kode genbruges ved includes.

    Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

    Husk at en række = 12 kolonner.

  • HTML Encoder

    For WordPress and Blogger.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close