Μάθημα : Εφαρμογές Πληροφορικής

Κωδικός : EL1386100

EL1386100 - Θοδωρής Τσοβίλης - Μανόλης Παπαδάκης - Γουλούλης Βασίλης

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

Διαδίκτυο - HTML

από 11/2/24 

Κεφάλαιο 9

Κεφάλαιο 10

Κεφάλαιο 11

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

Θα μιλήσουμε για το μοντέλο Πελάτη - Εξυπηρετή και τον τρόπο που λειτουργεί ο Παγκόσμιος Ιστός.

Θα γνωρίσουμε τη γλώσσα προγραμματισμού HTML και θα μάθουμε να δημιουργούμε ιστοσελίδες με τη βοήθειά της.

Εργασίες

Με την εργασία αυτή, θα μάθετε τις βασικές ετικέτες της HTML

(<!DOCTYPE html> <html> <head> <body> headings, paragraph, anchors (<a href), images (img src)

 

Μεταβείτε στην ιστοσελίδα www.w3schools.com και μέσω της επιλογής Learn HTML - μελετήσετε εκ νέου τα παρακάτω :

  • Introduction
  • Editors
  • Basic
  • Elements
  • Attributes
  • Headings
  • Paragraphs
  • Styles

Στο τέλος κάθε μικρής ενότητας, κάνετε το Online τεστ που έχει και κρατήστε scrennshot!

Κατά τη διάρκεια της εκμάθησης, μπορείτε να δουλεύετε με το online editor της πλατφόρμας, αλλά είναι σημαντικό να αντιγράφετε το κείμενο στο σημειωματάριο και να δημιουργήσετε δικό σας αρχείο με την κατάληξη html, π.χ. test.html στο οποίο θα δοκιμάζετε αυτά που μαθαίνετε! Το αρχείο αυτό ανοίγει με ένα φυλλομετρητή (π.χ. chrome, firefox)

Μη ξεχνάτε να πατάτε ανανεώση σελίδας στον φυλλομετρητή, για να βλέπετε το αποτέλεσμα του κώδικά σας, μετά από τις αλλαγές που του κάνετε!

 

Στη συνέχεια δημιουργείστε με το σημειωματάριο ένα αρχείο με το epitheto1_epitheto2_ask1.html που να περιέχει μια εφαρμογή των παραπάνω και ανεβάστε το εδώ. Η εφαρμογή αυτή θα πρέπει να περιέχει όλα τα στοιχεία (ετικέτες) μάθατε και τις αντίστοιχες ιδιότητές τους.

Εργασίες

Μελετήσετε τις επιλογές :Styles και Formatting από τη σχετική σελίδα μαθημάτων: https://www.w3schools.com/html/html_styles.asp

Κάνετε πειραματισμούς στο περιβάλλον αυτό και ελέγξετε πώς δουλεύουν τα συγκεκριμένα χαρακτηριστικά.

Στη συνέχεια δημιουργήσετε μία ιστοσελίδα eponimo1_eponimo2.html στην οποία θα γράψετε ένα μικρό κείμενο για το πως θα περάσετε την τσουκνοπέμπτη σας. Την ιστοσελίδα αυτή θα στείλετε ως απάντηση σε αυτή την εργασία.

Στη σελίδα αυτή, χρησιμοποιήσετε όσα έχετε μάθει μέχρι τώρα, δηλαδή:

HTML elements

  • <h1>, defines heading 1
  • <p>, Defines a paragraph
  • <hr>, Defines a thematic change in the content
  • <br>, Inserts a single line break

HTML elements attributes

  • <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
  • <p title="I'm a tooltip">This is a paragraph.</p>
  • <img src="img_typo.jpg" alt="Girl with a jacket" width="500" height="600">

 

Σιγουρευτείτε ότι έχετε χρησιμοποιήσει τις περισσότερες από τις παρακάτω ετικέτες και αντίστοιχες ιδιότητες τους

style attribute for styling HTML elements

  • background-color
  • color (text color)
  • font-family
  • font-size
  • text-align
  • π.χ. <h1 style="background-color:powderblue;">Hello</h1>

HTML Formatting Elements

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

 

Εργασίες

Μελετήσετε αυστηρά τις ενότητες tables και lists των μαθημάτων της πλατφόρμας: https://www.w3schools.com/html/

Αυτός είναι ένας πίνακας (table)

Αυτή είναι μία αριθμημένη λίστα (ordered list) με τις βασικές ετικέτες για τη δημιουργία και συμπλήρωση ενός πίνακα Αυτή είναι μία μη αριθμημένη λίστα (unordered list) με τις βασιικές ετικέτες σχετικά με τις λίστες
  1. Στοιχεία και ετικέτες του πίνακα
  2. table
  3. th (header cell) - κελί με τίτλο
  4. tr (row) -  στήλη
  5. td  - το κελί δεδομένων
  6. caption - τίτλος λεζάντα του πίνακα
  • ul (un-ordered list)  μη αριθμημένη λίστα
  • ol (ordered list)  αριθμημένη λίστα
  • li (list item) στοιχείο της λίστας

 

Χρησιμοποιήστε τα παρακάτω στοιχεία και ιδιότητες και δημιουργήσετε ένα αρχείο με ονομα onoma1_onoma2_table_list.html που θα περιέχει τουλάχιστον:

Μία μη αριθμημένη λίστα με τα ονόματα της ομάδας σας

Μια αριθμημένη λίστα με τα αγαπημένα σας τραγούδια

Ένας πίνακας με 3 στήλες (Τίτλοι :  ΑΑ, Μάθημα , Βαθμός) και 4 γραμμές συμπληρωμένες!

Επικεντρωθείτε σε πρώτη φάση στη δημιουργία τωνπαραπάνω και σε δεύετρη φάση, στην εφαρμογή και επεξεργασία του style τους και άλλων μορφοποιήσεων

Έγγραφα
EntolesHTML.pdf
Έγγραφα
Vasika_stoixeia_HTML.pdf
Εργασίες

Παρακαλώ, κατεβαστε το αρχείο και ακολουθήστε τις οδηγίες.

Σκοπός είναι ναδημιουργήσουμε μία νέα ιστοσελίδα!

Εργασίες

Παρακαλώ, κατεβαστε το αρχείο και ακολουθήστε τις οδηγίες.

Σκοπός είναι να δημιουργήσουμε μία νέα ιστοσελίδα με λίστες, εικόνες, συνδέσμους και ενσωματωμένο βίντεο.

 

Έγγραφα
link.jpg
Έγγραφα
loli1.jpg
Έγγραφα
loli2.jpg
Εργασίες

Παρακαλώ, κατεβαστε το αρχείο και ακολουθήστε τις οδηγίες.

Σκοπός είναι ναδημιουργήσουμε μία νέα ιστοσελίδα!

Έγγραφα
gym.jpg
Εργασίες

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

Έγγραφα
WELLCOME.jpg
Εργασίες

Στην εργασία αυτή θα μάθουμε να αναγνωρίζουμε, να δημιουργούμε και να προγραμματίζουμε φόρμες σε HTML.

Στόχοι:

  • Να κατανοήσουν οι μαθητές την έννοια της Φόρμας και της λειτουργίας της
  • Να γνωρίσουν οι μαθητές τα βασικά αντικείμενα μίας φόρμας
  • Να δημιουργήσουν απλές φόρμες σε HTML

Να δημιουρήσετε μία ιστοσελίδα με φόρμα για ένα διαγωνισμό όπως φαίνεται πιο κάτω στην εικόνα:

ΕΙΚΟΝΑ ΣΕΛΙΔΑΣ ΔΙΑΓΩΝΙΣΜΟΣ

ΕΙΚΟΝΑ IMAGINE