Εμφάνιση ιστοσελίδων από τα παραδείγματα:
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
Παράδειγμα Φ3.Π1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Τίτλος της ιστοσελίδας</title>
<style type="text/css">
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1> Επικεφαλίδα </h1>
<p> Αυτή είναι μια παράγραφος </p>
</body>
</html>
|
Παράδειγμα Φ3.Π2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | <!DOCTYPE html>
<html>
<head>
<title>Ιστοσελίδα με CSS</title>
<style type="text/css">
body{
background-color: lightblue;
}
h1{
font-size:32px;
color:blue;
text-align: center;
border-bottom: 10px solid blue;
border-top: 2px solid black;
}
p{
font-size: 24px;
color:blue;
border: 1px solid red;
padding: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<h1> Κρόνος </h1>
<p> Ο Κρόνος είναι ο έκτος πλανήτης σε σχέση με την απόστασή του από τον Ήλιο
και ο δεύτερος σε μέγεθος του Ηλιακού συστήματος μετά τον Δία, με διάμετρο
στον ισημερινό του 120.660 χιλιόμετρα ενώ ανήκει στους λεγόμενους γίγαντες αερίων. </p>
<h1> Δίας </h1>
<p> Ο Δίας είναι ο μεγαλύτερος πλανήτης του Ηλιακού Συστήματος σε διαστάσεις και μάζα.
Είναι ένας γίγαντας αερίων με μάζα λίγο μικρότερη από το ένα χιλιοστό της ηλιακής,
αλλά δυόμισι φορές μεγαλύτερη του αθροίσματος της μάζας των υπόλοιπων πλανητών
του ηλιακού συστήματος. </p>
</body>
</html>
|
Παράδειγμα Φ3.Π3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | <!DOCTYPE html>
<html>
<head>
<title>Ιστοσελίδα με CSS</title>
<style type="text/css">
body{
background-color: lightblue;
}
h1{
font-size:32px;
color:black;
text-align: center;
border-bottom: 10px solid green;
border-top: 2px solid black;
}
p.pred{
font-size: 18px;
color:red;
border: 5px solid red;
padding: 10px;
background-color: pink;
}
p.pblue{
font-size: 18px;
color:blue;
border: 5px solid blue;
padding: 10px;
background-color: cyan;
}
</style>
</head>
<body>
<h1> Κρόνος </h1>
<p class="pred"> Ο Κρόνος είναι ο έκτος πλανήτης σε σχέση με την απόστασή του από τον Ήλιο
και ο δεύτερος σε μέγεθος του Ηλιακού συστήματος μετά τον Δία. </p>
<h1> Δίας </h1>
<p class="pblue"> Ο Δίας είναι ο μεγαλύτερος πλανήτης του Ηλιακού Συστήματος σε διαστάσεις
και μάζα.</p>
</body>
</html>
|
Παράδειγμα Φ3.Π4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | <!DOCTYPE html>
<html>
<head>
<title>Ιστοσελίδα με CSS</title>
<style type="text/css">
body{
background-color: lightblue;
}
h1{
font-size:32px;
color:black;
text-align: center;
border-bottom: 10px solid green;
border-top: 2px solid black;
}
p#pred{
font-size: 18px;
color:red;
border: 5px solid red;
padding: 10px;
background-color: pink;
}
p#pblue{
font-size: 18px;
color:blue;
border: 5px solid blue;
padding: 10px;
background-color: cyan;
}
</style>
</head>
<body>
<h1> Κρόνος </h1>
<p id="pred"> Ο Κρόνος είναι ο έκτος πλανήτης σε σχέση με την απόστασή του από τον Ήλιο
και ο δεύτερος σε μέγεθος του Ηλιακού συστήματος μετά τον Δία. </p>
<h1> Δίας </h1>
<p id="pblue"> Ο Δίας είναι ο μεγαλύτερος πλανήτης του Ηλιακού Συστήματος σε διαστάσεις
και μάζα.</p>
</body>
</html>
|
Παράδειγμα Φ3.Π5
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>Ιστοσελίδα με CSS</title>
<style type="text/css">
body{
background-color: lightblue;
}
img.img3 {
float: left;
width: 30%;
padding: 5px;
}
</style>
</head>
<body>
<h1>Μουσικά όργανα</h1>
<img class="img3" SRC="https://upload.wikimedia.org/wikipedia/commons/1/1b/Violin_VL100.png">
<img class="img3" SRC="https://upload.wikimedia.org/wikipedia/commons/4/45/GuitareClassique5.png">
<img class="img3" SRC="https://upload.wikimedia.org/wikipedia/commons/7/76/Platin_Drums_PTCL2016_AF.jpg">
</body>
</html>
|
Παράδειγμα Φ3.Π6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 | <!DOCTYPE html>
<html>
<head>
<title>Ιστοσελίδα με CSS</title>
<style type="text/css">
body{
background-color: lightblue;
}
p{
font: 24px "Verdana";
color: blue;
border: 20px inset red;
border-radius: 25px;
padding: 20px;
background: pink;
margin: auto;
width: 350px;
text-align: left;
}
</style>
</head>
<body>
<p>
ΟΝΟΜΑ: <b>ΓΙΩΡΓΟΣ</b> <br>
ΕΠΩΝΥΜΟ: <b>ΓΕΩΡΓΙΑΔΗΣ</b>
</p>
</body>
</html>
|
Παράδειγμα Φ3.Π7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | <!DOCTYPE html>
<html>
<head>
<style>
img {
width:100px;
height:100px;
margin-right:15px;
margin-left:15px;
}
img.left {
float: left;
}
img.right {
float: right;
}
p{
text-align: justify;
font: 16px arial, sans-serif;
}
</style>
</head>
<body>
<h1>Στοίχιση εικόνας</h1>
<p>Σε αυτό το παράδειγμα η εικόνα θα στοιχηθεί αριστερά από την παράγραφο
και το κείμενο θα περιστοιχίζει την εικόνα. </p>
<p><img class="left" src="https://www.w3schools.com/css/pineapple.jpg">
Ο Ανανάς ο εύκομος (Ananas comosus) ή απλώς ο Ανανάς, είναι ένα ποώδες
τροπικό φυτό με πολλαπλούς βρώσιμους καρπούς που αποτελείται από συνενωμένα μούρα.
</p>
<br>
<p><img class="right" src="https://www.w3schools.com/css/pineapple.jpg">
Τo γένος Ανανάς (Ananas) περιλαμβάνει 5 είδη, τα οποία είναι ιθαγενή
της τροπικής Αμερικής. Ο Ανανάς ο ήμερος (Ananas sativus) είναι γνωστός
από τον αρωματικό και γευστικό καρπό του που μοιάζει με μεγάλη κουκουνάρα.
</p>
</body>
</html>
|
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
Αφήστε το σχόλιο σας