Φ2: HTML5 – SVG – video – audio

 
 

Δοκιμή zoom σε υψηλής ανάλυσης εικόνα bitmap:

Δοκιμή zoom σε χαμηλής ανάλυσης εικόνα bitmap:

Εισαγωγή εικόνας BITMAP

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
<head> 
<title>Χρήση εικόνων BITMAP</title>
</head>
<body>
<h1>Εικόνα με γραφικά BITMAP</h1>	
<img SRC="https://shorturl.at/mqBHW" width="100">
</body>
</html>



Εμφάνιση ιστοσελίδων από τα παραδείγματα:

Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο. Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω: (Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ. Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε την λειτουργικότητα του κάθε παραδείγματος.)




Παραδείγματα κώδικα HTML (Χρήση της ετικέτας SVG, video, audio, ενσωμάτωση από youtube):


Πλέγμα για SVG (100x100px)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Σελίδα με πλέγμα SVG</title>
<style>
  body {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADcSURBVHhe7dBBDcAwDACx8acVYKsqFUDub0PwN6zdrJ8FWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWYGsQFYgK5AVyApkBbICWcHLYmXmAFoIqx7FyCd1AAAAAElFTkSuQmCC');
    background-repeat: repeat;
    background-position: 8px 8px;
  }
</style>

</head>
<body>
  
</body>
</html>

Πλέγμα για SVG(2) (100x100px / 25x25px)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Σελίδα με πλέγμα SVG</title>
<style>
  body {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEfSURBVHhe7dOxCQMxEEXB67+tK+eKsBVsbj/kQOCZ6EeLeKCL5vUjz/PM2nbf96xtv3qVWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYwcRa506zYs06xsSadNvWxVnbfMNArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArODcWOtlfDSxJt023zAQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQK/iLWOvcaVasWceYWJNu27o4a5tvGIgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFZwbi69c1xu7nD7azMw4OQAAAABJRU5ErkJggg==');
    background-repeat: repeat;
    background-position: 8px 8px;
  }
</style>
</head>
<body>

</body>
</html>

Παράδειγμα Φ2.Π1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Διανυσματικά γραφικά (μεγέθυνση)</title>
</head>
<body>

<h1>Διανυσματικό Γραφικό <br> (Vector Graphic)</h1>

<svg height="500" width="100%">
  <text x="100" y="100" fill="black" font-size="100px">Α</text>
  <text x="100" y="400" fill="black" font-size="500px">Α</text>
</svg>

</body>
</html>

Παράδειγμα Φ2.Π2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Κύκλος με SVG</title>
</head>
<body>

<svg width="100%" height="500">
  <circle cx="200" cy="200" r="100" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Παράδειγμα Φ2.Π3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Ορθογώνιο παραλληλόγραμμο με SVG</title>
</head>
<body>

<svg width="100%" height="500">
  <rect x="100" y="100" width="200" height="100" stroke-width="10" stroke="black" fill="blue" />
</svg>

</body>
</html>

Παράδειγμα Φ2.Π4

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Το σπιτάκι</title>
</head>
<body>

<svg height="500" width="100%">
  <polygon points="200,200 400,100 600,200"      stroke="black" stroke-width="5" fill="red"/>
  <rect x="250" y="200" width="300" height="200" stroke="black" stroke-width="5" fill="cyan"/>
  <rect x="350" y="300" width="100" height="100" stroke="black" stroke-width="5" fill="brown"/>
  <line x1="100" y1="400" x2="700" y2="400"      stroke="green" stroke-width="10"/>
</svg>

</body>
</html>


Παράδειγμα Φ2.Π5

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Το ισοσκελές τρίγωνο</title>
</head>
<body>



<svg height="500" width="500">
  <polygon points="20,400 180,40 340,400" stroke="black" stroke-width="5" fill="transparent"/>
   <text x="2" y="400" fill="black" font-size="25px">Β</text>
   <text x="170" y="35" fill="black" font-size="25px">Α</text> 
   <text x="345" y="400" fill="black" font-size="25px">Γ</text> 
   <text x="60" y="430" fill="black" font-size="25px">ΙΣΟΣΚΕΛΕΣ ΤΡΙΓΩΝΟ</text>
</svg>

</body>
</html>

Βίντεο:


Παράδειγμα Φ2.Π6 (Εισαγωγή video σε ιστοσελίδα)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Σελίδα με βίντεο</title>
</head>
<body>

<h1>Η κίνηση του σκύλου</h1>
<p>Προσομοίωση της κίνησης του σκύλου.</p>

<video src="https://files.catbox.moe/nyrpkk.mp4" width="320" height="240" controls>
Δυστυχώς δεν υποστηρίζεται η ετικέτα video!
</video>
</body>
</html>


dogs.mp4
cats.mp4


Ήχος:


Παράδειγμα Φ2.Π7 (Εισαγωγή ήχου σε ιστοσελίδα)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Εισαγωγή ήχου σε ιστοσελίδα</title>
</head>
<body>
<h1>Εισαγωγή ήχου σε ιστοσελίδα</h1>
<h2>Το γαύγισμα του σκύλου</h2>
<audio controls>
<source SRC="https://files.catbox.moe/sa7yx1.mp3" type="audio/mpeg">
<source SRC="https://files.catbox.moe/wa6f4s.ogg" type="audio/ogg">
Δυστυχώς δεν υποστηρίζεται η ετικέτα audio!
</audio>
</body>
</html>


cat1.mp3
dog2.mp3




Παράδειγμα Φ2.Π8 (Ενσωμάτωση video από το youtube)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Ενσωμάτωση video από το youtube</title>
</head>
<body>

<h1>Μαϊμουδίσματα</h1>
<p>Οι αντιδράσεις των μαϊμούδων σε
   ταχυδακτυλουργικά κόλπα.</p>
	
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/Xv5ehKNSdSM" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

</body>
</html>

Παράδειγμα Φ2.Π9

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Ενσωμάτωση με iframe</title>
</head>
<body>

	<h1>Τυραννόσαυρος και Τρικεράτωψ</h1>
	<p>Σκελετοί δεινόσαυρων σε διαδραστική προσομοίωση 
		από το Ινστιτούτο Smisthonian:</p>

	<iframe name="Smithsonian Voyager" 
	src="https://3d-api.si.edu/voyager/3d_package:d8c62d28-4ebc-11ea-b77f-2e728ce88125" 
         width="800" height="450" allow="xr; xr-spatial-tracking; fullscreen"></iframe>
	
	<br>
	<a HREF="https://3d.si.edu/object/3d/tyrannosaurus-rex%3Ad8c62d28-4ebc-11ea-b77f-2e728ce88125"  
          target="_blank">Για περισσότερα κάνε κλικ εδώ </a>
		
</body>
</html>

Παράδειγμα Φ2.Π10

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Ενσωμάτωση με iframe</title>
</head>
<body>

	<h1>Πύργος του Eiffel - Παρίσι</h1>
	<p>Διαδραστική εικόνα 360 μοιρών 
		από τον πύργο του Eiffel στο Παρίσι:</p>

        <iframe width="100%" height="640" style="width: 100%; height: 640px; border: none; max-width: 100%;" 
           frameborder="0" allowfullscreen allow="xr-spatial-tracking; gyroscope; accelerometer" scrolling="no" 
           src="https://kuula.co/share/72RMD?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1">
        </iframe>
	
	<br>
	<a HREF="https://kuula.co/post/72RMD" target="_blank">
          Για περισσότερα κάνε κλικ εδώ </a>
		
</body>
</html>

Παράδειγμα Φ2.Π11

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Ενσωμάτωση με iframe</title>
</head>
<body>

	<h1>Ενσωμάτωση 3D μοντέλων</h1>	
	
    <iframe src="https://3dwarehouse.sketchup.com/embed/02dd919c-d647-4981-bab4-516b7c6c444d" 
	 frameborder="0" scrolling="no" marginheight="0" 
	 marginwidth="0" width="580" height="326" allowfullscreen></iframe>
	<br>
    <iframe src="https://3dwarehouse.sketchup.com/embed/00b8c4aa-650d-4727-881c-3c2e83550ac2" 
         frameborder="0" scrolling="no" marginheight="0" 
         marginwidth="0" width="580" height="326" allowfullscreen></iframe>
    <br>
	<a HREF="https://3dwarehouse.sketchup.com/" target="_blank">
		Κάνε κλικ για περισσότερα...</a>
		
</body>
</html>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Αφήστε το σχόλιο σας

Εγγραφή σε: Αναρτήσεις (Atom)