Compare commits
8 Commits
1.0
...
assignment
| Author | SHA1 | Date | |
|---|---|---|---|
| c98aa0509e | |||
| 8f7572826f | |||
| a3905f67fe | |||
|
6d60288621 | ||
|
|
700f1d9701 | ||
|
|
c599a53409 | ||
|
|
77e644f628 | ||
| ba7086e579 |
67
about.html
67
about.html
@@ -1,67 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About</title>
|
||||
<link rel="shortcut icon" href="assets/favicon.svg" type="image/svg+xml">
|
||||
<!-- Royalty free icon, source: https://pixabay.com/vectors/flat-design-symbol-icon-www-2126879/ -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Name: Øystein Tveit</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>This is me</h2>
|
||||
</header>
|
||||
|
||||
<img src="./assets/html_joke.jpg" alt="An html joke">
|
||||
<!-- Source: http://funnygeekjokes.blogspot.com/2013/02/how-to-tell-html-from-html5-joke.html -->
|
||||
|
||||
<p>
|
||||
I like programming. I've done it on a regular basis ever since a friend of mine introduced me to it in elementary school. I've been working a little bit with a lot of languages, but the ones I use on a regular basis would be Javascript running in Node.js, Dart + Flutter
|
||||
</p>
|
||||
<p>
|
||||
I've also written a bit of shellscript for UNIX based systems. But even though shellscript is theoretically a programming language, I wouldn't really call the shellscripts "programs". They're more like a thread sewing together programs that are already installed on the system in special ways to automate a certain workflow.
|
||||
</p>
|
||||
<p>
|
||||
Even though I've done quite a bit of HTML, CSS and Javascript before, I'm looking forward to get a new perspective on the things I know, and learn things I didn't know. There's a lot of tips and tricks for every language out there, and even when you think you know it all, there will still be more to learn.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>Questions</h2>
|
||||
</header>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
The server provides content and/or services to the client. In the case of services, it makes more sense for the server to be responsible for it because it's more cost efficient in terms of power and easier to maintain. It's also centralizes the content delivery, and this makes the content safer in many ways. In the case of the WWW, the server would be the webserver providing HTML documents, stylesheets, scripts and other assets. In many cases it would also be responsible for processing services and maybe content processing before delivery. However, the server is also the system's weak point. If the server shuts down for any reason, none of the clients will be able to use the system.
|
||||
</li>
|
||||
<li>
|
||||
The client is the user's terminal or endpoint. The client requests services and content. It usually doesn't need to do a lot of heavy processing, and it's very dependent on the server to function. This means that it doesn't really matter how much processing power you have on your client, because the server handles most of it anyway.
|
||||
</li>
|
||||
<li>
|
||||
An IP address which is short for an Internet Protocol address is an identifier a computer can use to communicate with other computers on a computer network. It's often referred to as the computer's "name". As of today, the most normal types of IP address is IPv4 and IPv6. However, we are soon running out of IPv4 addresses for the internet, because there is only 2^32 or about 4.3 billon possible IPv4 combinations. For local networks however, IPv4 is still the most common protocol.
|
||||
</li>
|
||||
<li>
|
||||
DNS is a system where we mask IP addresses as URLs in order to make it easier for us to remember. For example, it's much easier to remember https://google.com rather than 172.217.14.228. In order for this to work, there exists a lot of DNS servers providing name resolution for URLs. Sometimes, a DNS server doesn't have the IP for a specific site. It will then ask another DNS server for the IP. Any person can make a DNS server, but some DNS servers are more commonly used and trusted than others. ISPs often run their own DNS servers. In some countries, this can be problematic because the government can remove certain domains and block access to DNS servers in other countries. Because the DNS servers are so critical for anyone to access the WWW, the servers are often known to be incredibly stable. Therefore, pinging a DNS server like 8.8.8.8 (Google's DNS server) can be a good indicator whether you are connected to the internet or not. If you don't recieve a response, it's probably not the DNS server that's down.
|
||||
</li>
|
||||
<li>
|
||||
The internet is the computer network connecting computers all over the world. The World Wide Web however, is a term describing the vast amount of documents shared on web servers arond the world. We usually call these documents websites, which are usually read in programs called web browsers. It's usually described as an enourmus spiderweb where the different junctions connect to each other using links. But there's much more to the internet than just the web. Enourmus loads of types of different information using protocols like FTP, SSH, XMPP and proprietary protocols connecting to different servers also use the internet for communication. But it's not something that you can see in a web browser. For example, these days, whenever you send an SMS, it travels through the internet. But it's not linked anywhere on a website, and it's not something you can view in a web browser.
|
||||
</li>
|
||||
<li>
|
||||
HTML is a markup language, based on XML. It's used to classify specific parts of text in nodes with properties inside of a big node tree structure. A markup language is not the same as a programming language because it can't- and is not meant to be used to process and calculate arithmetic or logic. We say that it's not Turing complete. In the case of HTML in a web browser, calculation and processing is usually (but not necessarily) left to JavaScript, or the server (via languages like PHP).
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<footer>Created by: Øystein Tveit</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,125 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="favicon.svg"
|
||||
id="svg18"
|
||||
viewBox="0 0 322.93549 322.93549"
|
||||
version="1.1"
|
||||
height="322.93549"
|
||||
width="322.93549">
|
||||
<metadata
|
||||
id="metadata24">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs22" />
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg18"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="48"
|
||||
inkscape:window-x="0"
|
||||
inkscape:cy="170.2036"
|
||||
inkscape:cx="170.01564"
|
||||
inkscape:zoom="1.294"
|
||||
showgrid="false"
|
||||
id="namedview20"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff"
|
||||
inkscape:document-rotation="0" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:1;stroke:#009900;stroke-width:23.0416;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
cx="161.46774"
|
||||
cy="161.46774"
|
||||
r="149.94695"
|
||||
fill="none"
|
||||
stroke="#555555"
|
||||
stroke-width="14.6177"
|
||||
id="circle2" />
|
||||
<path
|
||||
d="m 113.39588,102.28858 c -4.8345,-0.0773 -8.30498,4.63035 -6.79409,9.22346 l 44.51155,135.6218 c 1.88088,5.695 9.57132,6.56851 12.68235,1.44131 l 20.35486,-33.58605 29.29021,29.2895 c 2.74441,2.7435 7.19254,2.7435 9.93744,0 l 24.89808,-24.88402 c 2.74301,-2.7442 2.74301,-7.19254 0,-9.93674 l -29.2902,-29.29021 33.54459,-20.32745 c 5.12761,-3.11103 4.25368,-10.80112 -1.44118,-12.68235 L 115.4677,102.64627 c -0.66894,-0.22487 -1.36761,-0.34434 -2.07252,-0.35839 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path4" />
|
||||
<path
|
||||
d="m 121.44225,56.610477 a 4.9457436,4.9457436 0 0 0 -4.87252,5.00983 v 19.95641 a 4.947995,4.947995 0 0 0 9.89599,0 v -19.95641 a 4.9457436,4.9457436 0 0 0 -5.02347,-5.00983 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
fill-rule="evenodd"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path6" />
|
||||
<path
|
||||
d="m 161.13301,73.476237 a 4.9457436,4.9457436 0 0 0 -3.40394,1.49613 l -16.45676,16.45677 a 4.9457436,4.9457436 0 1 0 6.99992,6.98664 L 164.729,81.959007 a 4.9457436,4.9457436 0 0 0 -3.59606,-8.48277 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
fill-rule="evenodd"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path8" />
|
||||
<path
|
||||
d="m 65.342519,112.82968 a 4.9457436,4.9457436 0 1 0 0,9.88263 h 25.66617 a 4.9457436,4.9457436 0 1 0 0,-9.88263 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
fill-rule="evenodd"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path10" />
|
||||
<path
|
||||
d="m 81.744469,73.476237 a 4.9457436,4.9457436 0 0 0 -3.44504,8.48277 l 14.20589,14.20519 a 4.9457436,4.9457436 0 1 0 6.99992,-6.98594 l -14.20589,-14.20589 a 4.9457436,4.9457436 0 0 0 -3.55488,-1.49613 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
fill-rule="evenodd"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path12" />
|
||||
<path
|
||||
d="m 98.673479,136.0201 a 4.9457436,4.9457436 0 0 0 -3.40394,1.49613 l -16.51158,16.51158 a 4.9457436,4.9457436 0 1 0 6.98622,7 l 16.525641,-16.52564 a 4.9457436,4.9457436 0 0 0 -3.596061,-8.48207 z"
|
||||
color="#000000"
|
||||
color-rendering="auto"
|
||||
fill="#555555"
|
||||
fill-rule="evenodd"
|
||||
image-rendering="auto"
|
||||
shape-rendering="auto"
|
||||
solid-color="#000000"
|
||||
style="text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#009900;fill-opacity:1;stroke-width:7.0274"
|
||||
id="path14" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
57
css/style.css
Normal file
57
css/style.css
Normal file
@@ -0,0 +1,57 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
font-family: arial, sans-serif;
|
||||
}
|
||||
|
||||
#screen {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
video {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mobile-image {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#title > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 80%; /* 100% - 10% left - 10% right = 80% */
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
p {
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
video {
|
||||
display: none;
|
||||
}
|
||||
#mobile-image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
img/hovedbygget.png
Normal file
BIN
img/hovedbygget.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
BIN
img/ntnu.png
Normal file
BIN
img/ntnu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
29
index.html
Normal file
29
index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Video and CSS</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="screen">
|
||||
|
||||
<video autoplay muted loop poster="img/hovedbygget.png">
|
||||
<source src="videos/hovedbygget.mp4" type="video/mp4">
|
||||
<source src="videos/hovedbygget.ogv" type="video/ogv">
|
||||
<source src="videos/hovedbygget.webm" type="video/webm">
|
||||
</video>
|
||||
<img id="mobile-image" src="img/hovedbygget.png" alt="Hovedbygget på ntnu">
|
||||
|
||||
<div id="title">
|
||||
<img src="img/ntnu.png" alt="NTNU" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<article class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
questions.txt
Normal file
25
questions.txt
Normal file
@@ -0,0 +1,25 @@
|
||||
# Questions
|
||||
|
||||
1. Mobile phones usually ignore the autoplay tag in order to save cellular data.
|
||||
|
||||
2. The css snippet
|
||||
```CSS
|
||||
@media only screen
|
||||
and (min-device-width : 768px)
|
||||
and (max-device-width : 1024px) {
|
||||
#logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
will make no difference for a device with `320 x 568` resolution because the device' height, `568px`, is not between `768` and `1024`
|
||||
|
||||
3. There is several advantages of using a responsive website. Some of them are:
|
||||
|
||||
* A collected codebase: There is not as much work to do as if you were to make two different sites.
|
||||
|
||||
* The user is guaranteed the same info: The HTML will stay the same no matter how the CSS is written, and there will be less occurences of the mobile website not having the same services/options/information as the desktop website or vice versa.
|
||||
|
||||
* Easier networking: No need for any special redirection proxys or desktop/mobile specific load balancer. You can just serve the website as is.
|
||||
|
||||
[//]: # vim: set syntax=markdown:
|
||||
BIN
videos/hovedbygget.mp4
Normal file
BIN
videos/hovedbygget.mp4
Normal file
Binary file not shown.
Reference in New Issue
Block a user