Είδαμε τα βασικά της γλώσσας HTML, της γλώσσας που χρησιμοποιείται για την περιγραφή ιστοσελίδων στο διαδίκτυο. Κάναμε μερικά απλά παραδείγματα για να πάρουμε μια ιδέα. Μπορείτε να βρείτε πληροφορίες για την HTML σε πάρα πολλά σημεία στο δίκτυο, π.χ. εδώ.
Στο υπόλοιπο της διάλεξης γράψαμε ένα πρόγραμμα python (φαίνεται παρακάτω) σκοπός του οποίου είναι να παίρνει κάποια δεδομένα από ένα αρχείο κειμένου (με όνομα data.txt) και να παράγει από αυτή την πληροφορία ένα αρχείο html (με όνομα data.html) ώστε να παρουσιάζεται η πληροφορία αυτή με ωραίο τρόπο στο δίκτυο. Αυτή είναι μια πολύ κοινή μέθοδος παραγωγής αρχείων HTML ειδικά όταν θέλουμε το αρχείο αυτό να έχει μεγάλο όγκο πληροφορίας παρουσιασμένη με ομοιόμορφο τρόπο. Το να φτιάξει κανείς ένα μεγάλο αρχείο HTML με το χέρι είναι εγγύηση λαθών.
Το αρχείο data.txt περιέχει γραμμές, μια γραμμή ανά άτομο, και κάθε γραμμή περιέχει 4 πεδία διαχωρισμένα με κόμμα (,), το όνομα του φοιτητή, το επώνυμό του, το email του και το βαθμό του στο μάθημα, με αυτή τη σειρά (για να τρέξετε το παρακάτω πρόγραμμα αποθηκεύστε το αρχείο data.txt στον ίδιο κατάλογο με το πρόγραμμα). Θέλουμε να δείξουμε αυτή την πληροφορία σε ένα αρχείο html. Μπορείτε να δείτε εδώ το αρχείο HTML που παράγεται (αν δεν καταφέρετε να τρέξετε το πρόγραμμα στον υπολογιστή σας).
inputfname="data.txt" # Όνομα αρχείου με τα δεδομένα
outfname="data.html" # Όνομα παραγόμενου αρχείου HTML
url="https://fourier.math.uoc.gr/prog1" # Ιστοσελίδα του μαθήματος
image="http://fourier.math.uoc.gr/~mk/uoclogo.png" # Εικόνα σύμβολο του Πανεπ. Κρήτης. Βρίσκεται στο δίκτυο στη θέση
# που φαίνεται.
f = open(inputfname, "r") # Ανοίγουμε το αρχείο εισόδου και διαβάζουμε όλες τις γραμμές του.
l = f.readlines()
f.close()
mem = [] # Σε αυτή τη λίστα αποθηκεύουμε όλη την πληροφορία. Τα στοιχεία της λίστας είναι λεξικά,
# ένα ανά άτομο (γραμμή του αρχείου εισόδου)
for line in l:
wl = line.rstrip().split(',') # Με το .rstrip() βγάζουμε από το τέλος το '\n', και με το .split(',')
# σπάμε το string-γραμμή σε λέξεις με διαχωριστικό το κόμμα.
d = {}
d['first'] = wl[0] # Εδώ φαίνονται τα 4 κλειδιά του κάθε λεξικού/ατόμου. Το τελευταίο έχει τιμή float (βαθμός).
d['last'] = wl[1]
d['email'] = wl[2]
d['grade'] = float(wl[3])
mem.append(d) # Αποθηκεύουμε το λεξικό του ατόμου στη λίστα mem.
def f(d): # Συνάρτηση αποτίμησης των στοιχείων της λίστας mem για να ταξινομηθεί η mem σε φθίνουσα
# του βαθμού.
return -d['grade']
mem.sort(key=f) # Ταξινομούμε τη λίστα mem κατά φθίνουσα σειρά του βαθμού
f = open(outfname, "w") # Ανοίγουμε για γράψιμο το αρχείο εξόδου (data.html)
f.write("<html> \n <head> </head> \n <body> \n") # Γράφουμε τις πρώτες προκαταρκτικές γραμμές του αρχείου.
f.write("<center><img src=%s width=20%%></center>\n" % image) # Με αυτή τη γραμμή θα φαίνεται μια εικόνα.
f.write("<center><h1>Βαθμοί <a href=%s>Προγραμματισμού Ι</a></h1></center>\n" % url)
# Επικεφαλίδα. Κάτω από τις λέξεις "Προγραμαμτισμού Ι" υπάρχει link στην ιστοσελίδα του μαθήματος
# Γράφουμε την επικεφαλίδα του πίνακα όπου θα δείξουμε τις πληροφορίες του κάθε ατόμου,
# ένα άτομο ανά γραμμή του πίνακα. Εδώ γράφουμε το tag του πίνακα και την πρώτη γραμμή με τις
# επικεφαλίδες των στηλών.
f.write("""
<table border=1 width=90% style="font-size:20px">
<tr>
<th>Όνομα</th> <th>Επώνυμο</th> <th>Email</th> <th>Βαθμός</th>
</tr>
""")
# Για κάθε άτομο προσθέτουμε μια γραμμή στον πίνακα
for person in mem:
f.write("<tr>\n") # Ανοίγουμε μια γραμμή του πίνακα
f.write("<td>%s</td>" % person['first']) # 1η στήλη: Όνομα
f.write("<td>%s</td>" % person['last']) # 2η στήλη: Επώνυμο
f.write("<td align=center><code>%s</code></td>" % person['email']) # 3η στήλη: email
tag = closetag = ""
if person['grade'] >= 5: # 4η στήλη: βαθμός
# Αν ο βαθμός είναι >= 5 τον τυπώνουμε με bold. Αυτός είναι ο ρόλος των μεταβλητών tag, closetag
tag = "<b>"; closetag = "</b>"
f.write("<td align=right>%s%.2f%s</td>" % (tag,person['grade'],closetag))
f.write("</tr>") # Κλείνει η γραμμή του πίνακα
f.write("</table>\n") # Κλείνει ο πίνακας
f.write("</body> </html>\n") # Κλείνει το tag <body> και το tag <html>
f.close() # Κλείνουμε το αρχείο