Media¶

Images¶

Embedding an image into a Web page is done via the tag img. It is a special tag as it exists only as an single tag without end tag. The content (image) is defined via the attribute src. We can insert a description of the image via the alt tag.

<img src="img/radematic_com.jpg" alt="screenshot of radematic.com"> 

Task: Insert some images into the body of your index.html document. The images should be placed in a subfolder named img.

There are several ways to specify the size of the image.

Through width and height as attributes of the img tag:

<img src="img/mschf_xyz.jpg" width="600" height="auto">

The values inserted via attributes (above) will be overridden if you specify width and height through a CSS stylesheet. We can also use this style inline, then it has priority over an external style sheet:

<img src="img/designsystems_international.jpg" style="width:192px; height=108px;">

We can use an image as content of a link:

<a href="https://terra0.org" target="_blank">
    <img src="img/terra0_org.jpg" style="width:50vw; height:auto;">
</a>

So far we have defined the size of an image in pixel. Another way is the unit vw (viewport width) and vh (viewport height). The value is given in percent of the viewport of the users device/ browser window.

Full Page Background Image¶

/*Source: https://www.w3schools.com/howto/howto_css_full_page.asp */

body, html {
  height: 100%;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Video¶

Video is embedded through the video tag:

<video width="380" height="260" controls>
  <source src="video/pure_data_video.mp4" type="video/mp4">
  <source src="video/pure_data_video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 

We can add a tag autoplay to start the video automatically, but some browsers require another attribute muted to allow autoplay.

Full Screen Background Video¶

<!-- Source:
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
(With some elements removed.)
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
</div>



</body>
</html>

Writing an own Website