Μάθημα : ΓΕΛ Α - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ

ΓΕΛ Α - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ

A-GEL - ΔΗΜΗΤΡΙΟΣ ΜΑΣΣΑΣ

Ενότητες μαθήματος

ΚΕΦΑΛΑΙΟ 11. ΕΙΣΑΓΩΓΗ ΣΤΗ HTML

Κεφάλαιο 10: Υπηρεσίες και Εφα... Κεφάλαιο 13: Εφαρμογές νέφους...

Ένας πολύ καλό διαδικτυακό εργαλείο στο οποίο μπορείτε να συντάξετε κώδικα και να δείτε άμεσα το αποτέλεσμα του είναι το:

https://jsfiddle.net/

Επίσης πληροφορίες για την γλώσσα html και css μπορείτε να βρείτε στο:

https://www.w3schools.com/

 

  • Απαραίτητες ετικέτες/εντολές html για την δημιουργία ιστοσελίδας (επέκταση αρχείου .html)

Για να δημιουργήσουμε μια ιστοσελίδα αρκεί να δημιουργήσουμε ένα έγγραφο κειμένου. Το έγραφο αυτό πρέπει να το μετονομάσουμε σε αρχείο .html ώστε να ανοίγει με ένα web browser για να μας εμφανίσει την ιστοσελίδα. Το έγγραφο κειμένου μπορούμε να το επεξεργαστούμε για να γράψουμε html tags με έναν επεξεργαστή κειμένου π.χ. το notepad ή με κάποιον άλλο επεξεργαστή κειμένου π.χ. το notepad++ το οποίο μπορούμε να το κατεβάσουμε από: https://notepad-plus-plus.org/downloads/. Επίσης μπορούμε να χρησιμοποιήσουμε ένα πρόγραμμα συγγραφής κώδικα π.χ. το visual studio code ο οποίο μπορούμε να το κατεβάσουμε από: https://code.visualstudio.com/

<!DOCTYPE html>
<html>
<!-- (ΣΧΟΛΙΑ) -->

<head> <!-- Ετικέτες/εντολές παραμέτρων σελίδας -->
<title>Κενή Ιστοσελίδα</title> <!-- Τίτλος σελίδας -->
</head>

<body> <!-- Ετικέτες/εντολές περιεχομένου σελίδας -->


</body>

</html>

Έγγραφα
html-ΚΕΝΗ-ΣΕΛΙΔΑ.html

ΑΡΧΕΙΟ HTML ΓΙΑ ΛΗΨΗ

  • Επικεφαλίδες και παράγραφοι

<!DOCTYPE html>
<html>
<!-- (ΣΧΟΛΙΑ) -->

<head> <!-- Ετικέτες/εντολές παραμέτρων σελίδας -->
<title>Επικεφαλίδες-Παράγραφοι</title> <!-- Τίτλος σελίδας -->
</head>

<body> <!-- Ετικέτες/εντολές περιεχομένου σελίδας -->

<!-- HTML Επικεφαλίδες -->
<h1>Επικεφαλίδα 1</h1> <!-- Μεγαλύτερο μέγεθος -->
<h2>Επικεφαλίδα 2</h2>
<h3>Επικεφαλίδα 3</h3>
<h4>Επικεφαλίδα 4</h4>
<h5>Επικεφαλίδα 5</h5>
<h6>Επικεφαλίδα 6</h6> <!-- Μικρότερο μέγεθος -->

 

<hr/> <!-- Γραμμή -->

 

<!-- HTML Paragraphs -->
<p>Μια παράγραφος.<br/></p>
<p>Άλλη μια παράγραφος.<br/></p>
<br> <!-- Κενή γραμμή -->
<p>Άλλη μια παράγραφος... <br> ... με αλλαγή γραμμής.</p>
<b>Αυτό το κείμενο είναι bold<br/></b>
<strong>Αυτό το κείμενο είναι important!<br/></strong>
<i>Αυτό το κείμενο είναι italic<br/></i>
<em>Αυτό το κείμενο είναι emphasized<br/></em>
<small>Αυτό το κείμενο είναι με μικρότερο μέγεθος.<br/></small>
<p>Μην ξεχάσεις να αγοράσεις <mark>γάλα</mark> σήμερα.</p>
<p>Το αγαπημένο μου χρώμα είναι <del>μπλε</del> κόκκινο.</p>
<p>Το αγαπημένο μου χρώμα είναι <ins>red</ins>.</p>
<p>Η<sub>2</sub>Ο</p>
<p>α<sup>2</sup>+2</p>
<hr/>

</body>

</html>

 
  • Σύνδεσμοι και εικόνες

<!DOCTYPE html>
<html>
<!-- (ΣΧΟΛΙΑ) -->

<head> <!-- Ετικέτες/εντολές παραμέτρων σελίδας -->
<title>Σύνδεσμοι και εικόνες</title> <!-- Τίτλος σελίδας -->

<link rel="icon" type="image/x-icon" href="pagehtml01ico.jpg"> <!-- Εικονίδιο σελίδας -->
</head>

<body> <!-- Ετικέτες/εντολές περιεχομένου σελίδας -->

<!-- HTML ΣΎΝΔΕΣΜΟΙ -->
<a href="https://www.w3schools.com/html/default.asp" target="_blank">W3C HTML<br/></a>
<hr/>

<!-- HTML ΕΙΚΟΝΕΣ -->
<img src="pagehtml01sea.jpg" alt="sea" style="width:500px;height:300px;">
<!-- ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΕΙΚΟΝΑ ΠΡΕΠΕΙ ΝΑ ΕΧΕΙ ΙΔΙΟ ΟΝΟΜΑ ΑΡΧΕΙΟΥ -->
<!-- ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΕΙΚΟΝΑ ΠΡΕΠΕΙ ΤΟ ΑΡΧΕΙΟ ΝΑ ΕΙΝΑΙ ΣΤΟΝ ΙΔΙΟ ΦΑΚΕΛΟ ΜΕ ΤΟ ΑΡΧΕΙΟ ΤΗΣ ΣΕΛΙΔΑΣ -->
<hr/>

</body>

</html>

Πολυμέσα
ΕΙΚΟΝΑ ΓΙΑ ΣΕΛΙΔΑ

ΑΠΟΘΗΚΕΥΣΤΕ ΤΗΝ ΕΙΚΟΝΑ ΣΤΟΝ ΙΔΙΟ ΦΑΚΕΛΟ ΜΕ ΤΗΝ ΣΕΛΙΔΑ ΩΣΤΕ ΝΑ ΕΜΦΑΝΙΖΕΤΑΙ ΣΤΗΝ ΙΣΤΟΣΕΛΙΔΑ

Πολυμέσα
ΕΙΚΟΝΙΔΙΟ ΣΕΛΙΔΑΣ

ΑΠΟΘΗΚΕΥΣΤΕ ΤΟ ΕΙΚΟΝΙΔΙΟ ΣΤΟΝ ΙΔΙΟ ΦΑΚΕΛΟ ΜΕ ΤΗΝ ΣΕΛΙΔΑ ΩΣΤΕ ΝΑ ΕΜΦΑΝΙΖΕΤΑΙ ΣΤΗΝ ΙΣΤΟΣΕΛΙΔΑ

Μπορούμε να χρησιμοποίήσουμε μια εικόνα στην οποία αν κάνουμε κλικ θα ανοίγει ένας υπερσύνδεσμος:

<a href="https://www.w3schools.com/html/default.asp" target="_blank">
    <img src="pagehtml01sea.jpg" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Επίσης μπορούμε να χρησιμοποίήσουμε ένα κουμπί στο οποίο αν κάνουμε κλικ θα ανοίγει ένας υπερσύνδεσμος:
<button onclick="document.location='https://www.w3schools.com/html/default.asp'">HTML Tutorial</button>

 

  • HTML 5 ΠΟΛΥΜΕΣΑ

Εισαγωγή video από αρχείο:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Εισαγωγή ήχου από αρχείο:

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Έγγραφα
ΣΕΛΙΔΑ HTML 5 ΠΟΛΥΜΕΣΑ

ΑΡΧΕΙΟ HTML 5 ΠΟΛΥΜΕΣΑ ΓΙΑ ΛΗΨΗ

Ενσωμάτωση αντικειμένων (embedding) στην σελίδα:

<img class="MyIframe"  src="url" title="description"></img class="MyIframe" >

<img class="MyIframe"  src="demo_img class="MyIframe" .htm" height="200" width="300" title="Iframe Example"></img class="MyIframe" >

<img class="MyIframe"  width="420" height="315"
  src="https://www.youtube.com/embed/tgbNymZ7vqY">
</img class="MyIframe" >

  • Καθορίζοντας την εμφάνιση – CSS

Ιδιότητα (attribute) είναι μια παράμετρος που επηρεάζει το στυλ εμφάνισης μιας ετικέτας. Οι ιδιότητες μπορούν να γραφούν μέσα στην κάθε ετικέτα (inline) ή ανεξάρτητα μέσα στην ετικέτα <style> </style> στο τμήμα <head> (internal) ή σε ξεχωριστό αρχείο CSS (external). Οι παράμετροι έχουν συγκεκριμένες προκαθορισμένες τιμές από τις οποίες επιλέγουμε τις επιθυμητές. Τις τιμές τις γράφουμε ανάμεσα στα σύμβολα "  " ενώ αν είναι πολλές διαχωρίζονται με το σύμβολο ;. π.χ. η color λαμβάνει τιμές όπως: tomato, orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray κ.τ.λ.. Μερικά από τα προκαθορισμένα χρώματα μπορούμε να δούμε εδώ: https://www.w3schools.com/colors/colors_names.asp  

1. Inline  CSS

Στον ενσωματωμένο τρόπο μορφοποίησης με CSS οι ιδιότητες γράφονται μέσα σε κάθε ετικέτα με την εντολή style=. Οι παράμετροι της κάθε ιδιότητας γράφονται με την σειρά ανάμεσα σε " " και ξεχωρίζουν με το σύμβολο ; του ελληνικού ερωτηματικού. Με αυτό τον τρόπο η μορφοποίηση επηρεάζει μόνο την κάθε ξεχωριστή ετικέτα.

π.χ. <p style="color:red; text-align:center;">A red paragraph.</p>

2. Internal CSS

Στον εσωτερικό τρόπο μορφοποίησης με CSS οι ιδιότητες γράφονται μέσα στην ετικέτα <style> </style> στο τμήμα <head>. Με αυτό τον τρόπο η μορφοποίηση επηρεάζει όλες τις ετικέτες του ίδιου τύπου που βρίσκονται μέσα στην ιστοσελίδα. Αν ορίσουμε ιδιότητες για μια ετικέτα π.χ. την <p> τότε όλες οι παράγραφοι θα έχουν αυτές τις ιδιότητες.

π.χ.

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. External CSS

Στον εξωτερικό τρόπο μορφοποίησης με CSS οι ιδιότητες δίνονται σε ξεχωριστό αρχείο το οποίο πρέπει να έχει επέκταση .css, π.χ. mystyle.css. Το αρχείο css μπορούμε και αυτό να το επεξεργαστούμε με έναν κειμενογράφο.

Το αρχείο αυτό πρέπει να το συνδέσουμε με την σελίδα στο τμήμα <head> χρησιμοποιώντας την ετικέτα link.

<head> 
<link rel="stylesheet" href="mystyle.css">
</head>

Η ιδιότητες που δίνουμε μέσα στο css αρχείο σε κάθε τύπο ετικέτας επηρεάζουν όλες τις ετικέτες αυτού του τύπου στην σελίδα. Το πλεονέκτημα είναι ότι αν κάνουμε μια αλλαγή στο css αρχείο τότε αλλάζει καθολικά η εμφάνιση της σελίδας.

π.χ.

<html>
<head>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Στο αρχείο mystyle.css η μορφοποίηση των ετικετών γίνεται με το παρακάτω τρόπο, δηλ. γράφουμε το όνομα της ετικέτες και ανάμεσα στα σύμβολα { } τις ιδιότητες με τις παραμέτρους τους οι οποίες ξεχωρίζουν με το ελληνικό ερωτηματικό:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

 

  • Ιδιότητες μεγέθους

width είναι το πλάτος σε pixel και height το ύψος σε pixel

π.χ. <img src="img.jpg" width="500" height="600">

 

  • Ιδιότητες μορφοποίησης κειμένων

background-color είναι το χρώμα φόντου και color το χρώμα των γραμμάτων. Λαμβάνουν προκαθορισμένες τιμέ όπως αναφέρθηκε παραπάνω.

font-family είναι η γραμματοσειρά, font-size είναι το μέγεθος των γραμμάτων και text-align είναι η στοίχιση των γραμμάτων.

π.χ.

<body style="background-color:powderblue;">

<p style="color:red;">This is a red paragraph.</p>

<h1 style="font-family:verdana; font-size:300%; text-align:center;">This is a heading</h1>

<p style="color:red; font-size:14pt;"> Παράγραφος</p>

 

  • Ιδιότητες εμφάνισης περιγραμμάτων (Borders)

Η border εμφανίζει ένα πλαίσιο στο οποίο δίνουμε το πάχος σε pixel, τον τύπο του π.χ. συμπαγές και το χρώμα του.

Η padding ορίζει την απόσταση που θα έχουν τα γράμματα από το πλαίσιο σε pixel.

Η margin ορίζει την απόσταση που θα έχει το πλαίσιο από τις άκρες της σελίδας σε pixel.

<h1 style="border:2px  solid Tomato; padding:30px; margin: 50px">Hello World</h1>

 

  • Ιδιότητες συνδέσμων

Η target ορίζει τον τρόπο με τον οποίο θα ανοίγει ένας υπερσύνδεσμος. 

_self - Προεπιλογή. Ανοίγει το έγγραφο στο ίδιο παράθυρο/καρτέλα όπου έγινε κλικ
_blank - Ανοίγει το έγγραφο σε νέο παράθυρο ή καρτέλα
_parent - Ανοίγει το έγγραφο στο γονικό πλαίσιο
_top - Ανοίγει το έγγραφο σε ολόκληρο το σώμα του παραθύρου

Μπορούμε να καθορίσουμε την εμφάνιση του υπερσυνδέσμου ανάλογα με την κατάσταση στην οποία βρίσκεται. visited εάν έχει γίνει κλικ και άνοιξε ο σύνδεσμος, hover εάν περνάμε το mouse από επάνω του, active εάν είναι ενεργός.

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

 

  • Ιδιότητες εικόνων

Η float στοιχίζει την εικόνα στην οθόνη.

<p><img src="pagehtml01sea.jpg" alt="sea" style="float:right;width:42px;height:42px;">
  The image will float to the right of the text.</p>

Η background-image εμφανίζει μια εικόνα ως υπόβαθρο (background) σε ένα αντικείμενο.

<p style="background-image: url('pagehtml01sea.jpg');">Κείμενο<br>με<br>εικόνα</p>
  • HTML 5 - Δομή εγγράφου και περιοχές εμφάνισης αντικειμένων στην σελίδα

H ετικέτα <div></div> μας δίνει την δυνατότητα να χωρίσουμε την ιστοσελίδα σε περιοχές με διαφορετική μορφοποίηση η κάθε μια. Στο παρακάτω παράδειγμα ορίζουμε μια οριζόντια περιοχή στην ιστοσελίδα χρησιμοποιώντας την ιδιότητα

style="display:flex" η οποία ορίζει την εμφάνιση της ως flexible layout. Σε αυτήν τοποθετούμε άλλες 3 περιοχές με <div></div> οι οποίες έχουν πλάτος 30%, 49% και 20% αντίστοιχα.
<div style="display:flex">

      <div style="background-color:black; color:white; width:30%; ">
        <h2>ΠΕΡΙΟΧΗ 1</h2>
        <p>Εδώ εμφανίζονται τα περιεχόμενα της περιοχής 1 η οποία καταλαμβάνει το 30% του πλάτους της σελίδας.</p>
      </div>
      
    <div style="background-color:rgb(155, 41, 41); color:white; width:49%; ">
        <h2>ΠΕΡΙΟΧΗ 2</h2>
        <p>Εδώ εμφανίζονται τα περιεχόμενα της περιοχής 2 η οποία καταλαμβάνει το 49% του πλάτους της σελίδας.</p>
      </div>
            
    <div style="background-color:rgb(53, 16, 86); color:white; width:20%; ">
        <h2>ΠΕΡΙΟΧΗ 3</h2>
        <p>Εδώ εμφανίζονται τα περιεχόμενα της περιοχής 3 η οποία καταλαμβάνει το 20% του πλάτους της σελίδας.</p>
      </div>
  • HTML πίνακες και λίστες

Η ετικέτα <table></table> εμφανίζει έναν πίνακα. Η <tr></tr> προσθέτει γραμμή και η <th></th> ένα κείμενο ως στήλη στη γραμμή.

<table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
      </table>
Η <ul></ul> εμφανίζει μια λίστα με κουκίδες. Η <li></li> προσθέτει ένα κείμενο στη λίστα.
 <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
 </ul>
Η <ol></ol> εμφανίζει μια λίστα με αρίθμηση.
 <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
 </ol>
  • Παράδειγμα ιστοσελίδας

HTML - Παιχνίδια

Έγγραφα
HTML - Παιχνίδι

Ασκήσεις CSS:

inline CSS

  1. Εμφανίστε μια επικεφαλίδα τύπου 3 με χρώμα γραμμάτων κόκκινο και φόντο μπλέ
  2. Αλλάξτε το φόντο όλης της ιστοσελίδας σε lightGray
  3. Εμφανίστε μια παράγραφο με το κείμενο "CSS", γραμματοσειρά Arial, μέγεθος γραμμάτων 22 και πάχος κειμένου bold
  4. Εμφανίστε μια παράγραφο με το κείμενο "html" υπογραμμισμένο, στοίχιση στο κέντρο και σκιά κειμένου
  5. Εμφανίστε μια παράγραφο με το κείμενο "πλαίσιο" με περίγραμμα κόκκινο και παχύ, στυλ περιγράμματος διακεκομμένες γραμμές και στρογγυλεμένες γωνίες
  6. Εμφανίστε μια παράγραφο με το κείμενο "αποστάσεις" με περίγραμμα η οποία θα απέχει από τα αριστερά της οθόνης 200pixel και το κείμενο εντός να απέχει από την κορυφή του πλαισίου 50 pixel
  7. Εμφανίστε μια εικόνα με πλάτος 500 pixel, ύψος 340 pixel και εναλάκτικό κείμενο "εναλλακτικό κείμενο εικόνας", η εικόνα να έχει αδιαφάνεια 30%
  8. Εμφανίστε έναν σύνδεσμο προς την σελίδα www.google.com που θα ανοίγει σε νέο παράθυρο και θα έχει αριστερή στοίχιση

Internal CSS

  1. Παραμετροποιήστε την σελίδα στο <head> ώστε όλες οι παράγραφοι να έχουν χρώμα γραμμάτων μπλέ και μέγεθος γραμμάτων 16
  2. Παραμετροποιήστε την σελίδα ώστε όλες οι επικεφαλίδες τύπου 2 να έχουν στοίχιση στο κέντρο και γραμματοσειρά arial
  3. Παραμετροποιήστε την σελίδα ώστε όλες οι εικόνες να έχουν πλάτος 240 pixel, ύψος 120 και περίγραμμα λεπτό

External CSS

  1. Δημιουργήστε το εξωτερικό αρχείο myStyle.css
  2. Ορίστε στο αρχείο myStyle.css οι σελίδες να έχουν φόντο pink
  3. Συνδέστε στο <head> της σελίδας το εξωτερικό αρχείο  myStyle.css
  4. Ορίστε στο αρχείο css οι παράγραφοι να έχουν περίγραμμα
  5. Ορίστε στο αρχείο css οι επικεφαλίδες τύπου 1 να έχουν στοίχιση δεξιά