Ηλεκτρονική Σχολική Τάξη (η-Τάξη) | ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

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

0501007560 - ΒΑΣΙΛΕΙΟΣ ΠΡΟΞΕΝΙΑΣ

Ενότητες - Εισαγωγή στην HTML

Θεματικές Ενότητες
- Μικροεφαρμογές με appinventor
  9/10/24
- Κύκλος Ανάπτυξης Μικροεφαρμογής
  16/10/24
- Χρήσιμα Εργαλεία
  21/1/25
- Εισαγωγή στην HTML
  21/1/25
- Τι είναι η CSS
- Project δημιουργίας Ιστοσελίδας μουσικής μπάντας
  29/4/25

Εισαγωγή στην HTML

από 21/1/25

Τι είναι η HTML

Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου και είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού.

Η HTML δεν είναι μια γλώσσα προγραμματισμού αλλά μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Oρίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται ετικέτες (tags).

Όταν ο Φυλλομετρητής ανακτά μια ιστοσελίδα, στην ουσία ανακτά τον κώδικα HTML της ιστοσελίδας. Στη συνέχεια, ο Φυλλομετρητής «διαβάζει» και «διερμηνεύει» τις ετικέτες της HTML, δημιουργεί την ιστοσελίδα και την εμφανίζει στην οθόνη, μορφοποιώντας το κείμενο και τις εικόνες της.

Βασική Δομή ενός αρχείου html

Παρατηρήστε:

Κάθε ετικέτα (tag) που ανοίγει πρέπει να κλείσει
- <HTML> ..... </HTML>
- <HEAD>.....</HEAD>
- <TITLE> .....</TITLE>
- <BODY> .....</BODY>
Οι ετικέτες μπορεί να είναι εμφωλευμένες μεσα σε αλλες ετικές αλλά Δεν μπορεί να γίνεται επικάλυψη ετικετών για π.χ

το παρακάτω ειναι λάθος:

<HEAD>

<TITLE> Εδώ είναι ο τίτλος που φαίνεται στην καρτέλα του φυλλομετρητή

<⁄HEAD>

<⁄TITLE>

Δραστηριότητα 1 ( η βασική δομή ενος αρχείου html και βασικες ετικέτες μορφοποίησης <b>, <i>, <u>)

Φτιάξτε την πρώτη σας Ιστοσελίδα

Με το Online εργαλείο https://jsfiddle.net/ πληκτρολογήστε τα παρακάτω προσπαθώντας να διατηρήσετε την στοίχιση

Τί κάνει η ετικέτα <i> </i> ;
Τί κάνει η ετικέτα <b> </b> ;
Τί κάνει η ετικέτα <u> </u> ;
Τί κάνει η ετικέτα <br/> ;
Βλέπετε κάπου να εμφανιζεται το κείμενο: H πρώτη μου ιστοσελίδα ;
Τα κενά που πληκτρολογήσατε εμφανιζονται στο αποτέλεσμα;

Δραστηριότητα 2 (ετικέτες επικεφαλίδων <h1>...<h6>)

Ανοιξτε το σημειωματάριο (notepad) στον υπολογιστή σας
Αντιγράψτε τον κώδικα της δραστηριότητας 1 και επικολλήστε τον μέσα στον κειμενογράφο (notepad).
Αποθηκεύεστε το αρχείο με την εντολή Αποθηκευση ως...
Δώστε σαν όνομα: index.html
Εντοπίστε το αρχείο που μολις δημιουργήσατε και κάντε διπλό κλικ για να το ανοιξετε. Λογικά θα ανοιξει με κάποιο φυλλομετρητή.

Για να ανοίξετε και πάλι το αρχειο ώστε να επεξεργαστείτε τον κώδικα της HTML κάντε δεξι κλικ και ανοιξτε το με τον notepad (κειμενογραφο)

Μέσα στην ετικέτα του <body> προσθέστε τις γραμμές

<h1>Γαλαξίας</h1>
<h2>Γη </h2>
<h3>Ευρώπη </h3>
<h4>Ελλάδα </h4>
<h5>Αττική </h5>
<h6>Άλιμος </h6>

Σημ: αν σας δυσκολεύει η χρήση του κειμενογράφου χρησιμοποιηστε το https://jsfiddle.net/

παρατηρήστε το αποτέλεσμα. Διαφέρουν τα μεγέθη των επικεφαλίδων;
προσπαθήστε να κάνετε χρήση της επικεφαλίδας <h7></h7>. παρατηρείτε κάτι;
Αν βαλετε τις επικεφαλίδες την μια δίπλα στην αλλη
για π.χ <h1>Γαλαξίας</h1><h2>Γη </h2><h3>Ευρώπη </h3>
τότε αλλάζει το αποτέλεσμα;
Η έννοια του block και του inline

Δραστηριότητα 3 (ετικέτες λίστας <ul> & <ol>)

Στο αρχείο της προηγούμενης δραστηριότητας ή με την χρήση του https://jsfiddle.net/ δημιουργήστε την παρακάτω λίστα με τις πόλεις

Αθήνα, Πειραιάς, Πάτρα, Θεσσαλονίκη, Ηράκλειο

-πρώτα με την χρήση της ετικέτας <ul> και

-στην συνέχεια με την χρήση της ετικέτας <ol>

Ποιά η διαφορά τους;

ο κώδικας που πρέπει να γράψετε είναι:

για μη αριθμημένη λίστα

ενώ για αριθμημένη λίστα

-Πως θα προσθέσετε και αλλες πόλεις;

Δραστηριότητα 4 (εμφωλευμένες λίστες)

Μέσα σε μια λίστα μπορούμε να συμπεριλάβουμε/εμφωλευσουμε (nesting) καποια αλλη λίστα.

Στην προηγούμενη δραστηριότητα θέλετε σε κάθε πόλη να συμπεριλάβεται κάποια αξιοθέατα

Στην Αθήνα: Ακρόπολη, Αρχαιολογικό Μουσείο, Στήλες Ολυμπίου Διός

Στον Πειραιά: Δημοτικό θέατρο Πειραιά, Αρχαιολογικό Μουσείο Πειραιά, Καστέλλα

Στην Πάτρα: Αρχαιολογικό Μουσείο Πατρών, Κάστρο Πατρών, Ρωμαϊκό Ωδείο

Στην Θεσσαλονίκη: Λευκός Πύργος, Ροτόντα, Άγαλμα Μεγάλου Αλεξάνδρου

Στο Ηράκλειο: Ενετικό φρούριο, Κνωσός, Αρχαιολογικό μουσείο Κρήτης

Η δομή θα είναι κάπως έτσι:

Συμπληρώστε όλα τα αξιοθέατα ή προσθέστε και άλλα

Δραστηριότητα 5 (εικόνες με την ετικέτα <img> και βασικές ιδιότητες (attributes) src, width, height, title)

Δημιουργήστε τον φάκελο ΔΡΑΣΤΗΡΙΟΤΗΤΑ 5 (στην επιφάνεια εργασίας ή στον φάκελο σας)
Αποθηκεύστε στον φάκελο την παρακάτω εικόνα με το όνομα: workplace.jpg σημείωση: έχει σημασία ο χώρος που θα αποθηκεύσετε την εικόνα
Στην συνέχεια δημιουργήστε ένα αρχείο με το όνομα MyImage.html και γράψτε τον παρακάτω κώδικα

<!DOCTYPE html>

<html>

<head>

<title> Εικόνες & HTML</title>

</head>

<body>

<h2>HTML και εικόνες</h2>

</body>

</html>

Δείτε το αποτέλεσμα ανοίγοντας το αρχείο με κάποιο φυλλομετρητη
Τι χρειάζεται η ιδιότητα src ;
Δηιουργήστε ένα υποφακελο με το ονομα IMAGES και μετακινήστε εκεί το αρχείο της εικόνας workplace.jpg.
Αν ανοιξετε και παλι το αρχείο MyImage.html υπάρχει κάποιο πρόβλημα;
Τι πρέπει να κάνετε ώστε να εμφανιζεται η εικόνα;
Τι κάνει η ιδιότητα alt;
Πειραματιστείτε με τις ιδιότητες width και height; τι κάνει η καθεμιά;
Προσθέστε την ιδιότητα title ως title="το laptop μου". τι κάνει;

Δραστηριότητα 6 (υπερδεσμοί -links- ετικέτα <a> με ιδιότητα href )

Δημιουργήστε ένα αρχείο html με όνομα mylinks.html και

γράψτε τον κώδικα

<!DOCTYPE html>
<html>
<head>
<title>οι συνδεσμοι μου</title>
</head>
<body>

<h2>Υπερδεσμοί</h2>
<p><a href="computer.html" target="_blank">Ο υπολογιστής μου</a></p>
<p><a href="phone.html" target="_blank">Το κινητό μου τηλέφωνο</a></p>
<p><a href="coffee.html" target="_blank">Ο καφές μου</a></p>

</body>
</html>

Ανοιξτε το αρχείο σας με τον φυλλομετρητη
Κάνοντας κλικ πάνω στην κάθε φράση τι γίνεται;
Δημιουργήστε τις ιστοσελίδες computer.html, phone.html και coffee.html χωρίς περιεχόμενο ώστε να υπάρχουν σαν αρχεία.

computer.html

phone.html

coffee.html

<!DOCTYPE html>
<html>
<head>
<title>η ιστοσελίδα για τον Υπολογιστή μου</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>η ιστοσελίδα για το κινητό μου</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>η ιστοσελίδα για τον καφέ μου</title>
</head>
<body>

</body>
</html>

ανοιξτε και παλι την ιστοσελίδα mylinks.html

Τώρα οι υπερδεσμοί πρέπει να οδηγούν στις ιστοσελίδες.

Κάθε σύνδεσμος ανοιγει νέα καρτέλα;;; γιατι πιστευετε οτι γίνεται αυτό και πώς μπορείτε να το αλλάξετε;;;
Δημιουργήστε και έναν εξωτερικό υπερδεσμό που θα οδηγεί στην ιστοσελίδα του σχολείου μας: https://mousalim.gr/ (σημ: με παρόμοιο τρόπο πρέπει να προσθέσετε μια νέα ετικέτα <a> και να ορίσετε την ιδιότητα href ώστε να παίρνει την τιμή: https://mousalim.gr/)
Στην συνέχεια προσθέστε τον κώδικα: <a href="mailto:someone@example.com">Επικοινωνία με mail</a>. Δείτε το αποτέλεσμα στην ιστοσελίδα. Τι γίνεται όταν ο χρήστης επιλέγει την φράση: Επικοινωνία με mail
Στην συνέχεια προσθέστε τον κώδικα: <a href="tel:2160049930">Επικοινωνία στο 2160049930</a>. Δείτε το αποτέλεσμα στην ιστοσελίδα. Τι γίνεται όταν ο χρήστης επιλέγει την φράση: Επικοινωνία στο 2160049930. Αν ανοιγατε την ιστοσελίδα με το κινητό σας τι θα γινόταν;

Δραστηριοτητα 7 (περιοχές εικόνας map & usemap)

Στην εικόνα της δραστηριότητας 5 θα δημιουργήσουμε 3 περιοχές στις οποίες αν κάνει κλικ ο χρήστης θα μεταφέρεται σε άλλες ιστοσελίδες

προσθέστε στον κώδικα της ιστοσελίδας myimage.html τον κώδικα

ανοιξτε και παλι την ιστοσελίδα με τον φυλλομετρήτη. Βλεπετε να γίνεται κάτι όταν περνάτε το ποντίκι σας πάνω απο την εικόνα;;;
Προσθέστε στην ετικέτα img την ιδιότητα usemap με τιμή #workmap, δηλ usemap=" #workmap"
ανοιξτε και παλι την ιστοσελίδα. δουλευουν οι περιοχές με τους υπερδεσμούς (link);

Δραστηριότητα 8 Δημιουργία πίνακα στην html

Σε ένα αρχείο της html θέλουμε να φτιαξουμε τον παρακάτω πίνακα:

Ένας ΠΙΝΑΚΑΣ (TABLE) είναι μια δομή που αποτελείται απο ΓΡΑΜΜΕΣ (ROWS) και ΣΤΗΛΕΣ (COLUMNS). Οι διασταυρώσεις των γραμμών με τις στήλες δημιουργούν τα ΚΕΛΙΑ μέσα στα οποία τοποθετούνται τα δεδομένα (DATA).

Η δημιουργία ενός πίνακα με την HTML γίνεται με την ετικέτα <table> ενώ οι γραμμές ορίζονται με ετικέτες <tr>. Για τις στήλες ΔΝ ΥΠΑΡΧΕΙ ΕΤΙΚΕΤΑ. Tα κελιά ορίζονται με ετικέτες <td>.

Μαλιστα συνηθίζεται σε πίνακες η πρώτη γραμμή να είναι γραμμή επικεφαλίδων. Οι επικεφαλίδες οριζονται με ετικέτες <th>

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

<table>
	<tr>
	<th>Ημερομηνία</th>
	<th>Τοποθεσία</th>
	<th>Ώρα</th>
	</tr>
	<tr>
	<td>15 Μαρτίου 2025</td>
	<td>Θέατρο Σχολείου</td>
	<td>19:00</td>
	</tr>
	<tr>
	<td>20 Απριλίου 2025</td>
	<td>Πολιτιστικό Κέντρο</td>
	<td>20:30</td>
	</tr>
	<tr>
	<td>10 Μαΐου 2025</td>
	<td>Δημοτικό Πάρκο</td>
	<td>18:00</td>
	</tr>
</table>

Δημιουργήστε ένα αρχείο με όνομα TABLE.html και γραψτε τον παραπάνω κώδικα μέσα στο <body>.....</body>

το αρχείο θα περιέχει τον κώδικα

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table>
<tr>
<th>Ημερομηνία</th>
<th>Τοποθεσία</th>
<th>Ώρα</th>
</tr>
<tr>
<td>15 Μαρτίου 2025</td>
<td>Θέατρο Σχολείου</td>
<td>19:00</td>
</tr>
<tr>
<td>20 Απριλίου 2025</td>
<td>Πολιτιστικό Κέντρο</td>
<td>20:30</td>
</tr>
<tr>
<td>10 Μαΐου 2025</td>
<td>Δημοτικό Πάρκο</td>
<td>18:00</td>
</tr>
</table>

</body>
</html>

Αν θέλετε να προσθέστε μια νέα γραμμή με τα δεδομένα

25 Μαϊου 2025 Μουσικό Σχολείο Αλίμου 18:00

πως πρέπει να τροποποιησετε τον κώδικα

Μετάβαση σε:

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

Κωδικός : 0501007560

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

Θεματικές Ενότητες

Εισαγωγή στην HTML

Τι είναι η HTML