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

Ίσως αναρρωτιέστε, τι είναι ένα template;

Ένα template είναι ένα αρχείο που μπορούμε να επαναχρησιμοποιούμε για να παρουσιάζουμε διαφορετικές πληροφορίες μέσα από μια συνεπή μορφή. Για παράδειγμα, θα μπορούσατε να χρησιμοποιήσετε ένα πρότυπο (template) για να σας βοηθήσει να γράψετε μια επιστολή, γιατί αν και κάθε επιστολή μπορεί να περιέχει διαφορετικό μήνυμα και να απευθύνεται σε ένα διαφορετικό πρόσωπο, μερικά σημεία θα μοιραστούν την ίδια μορφή.

Η μορφή ενός Django template περιγράφεται με μια γλώσσα που ονομάζεται HTML (που είναι η HTML που αναφέραμε στο πρώτο κεφάλαιο, Πώς λειτουργεί το Internet).

Τι είναι η HTML;

Η HTML είναι ένας κώδικας που ερμηνεύεται από τον web browser σας – όπως ο Chrome, Firefox ή Safari - για να εμφανιστεί μια ιστοσελίδα στον χρήστη.

HTML σημαίνει "HyperText Markup Language". Η λέξη HyperText σημαίνει ότι είναι ένας τύπος κειμένου που υποστηρίζει υπερ-συνδέσεις μεταξύ των σελιδών. Markup σημαίνει ότι έχουμε λάβει ένα έγγραφο και το έχουμε επισημάνει με κώδικα ούτως ώστε να πει κάτι (στην προκειμένη περίπτωση, ένας browser) πώς να ερμηνεύσει τη σελίδα. Ο HTML κώδικας είναι χτισμένος με tags, όπου καθένα αρχίζει με < και τελειώνει με >. Αυτά τα tags αντιπροσωπεύουν τα markup elements.

Το πρώτο σας template!

H δημιουργία ενός template σημαίνει τη δημιουργία ενός αρχείου template. Τα πάντα είναι ένα αρχείο, σωστά; Πιθανώς να το έχετε παρατηρήσει αυτό.

Τα templates αποθηκεύονται στο φάκελο blog/templates/blog. Άρα, πρώτα δημιουργήστε έναν φάκελο με το όνομα templates μέσα στον φάκελο blog. Στη συνέχεια, δημιουργήστε έναν άλλο φάκελο που ονομάζεται blog μέσα στον φάκελο templates:

blog
└───templates
    └───blog

(Ίσως να αναρωτηθείτε γιατί χρειαζόμαστε δύο φακέλους που και οι δύο ονομάζονται blog. Όπως θα ανακαλύψετε αργότερα, αυτό είναι μια τεχνική ονομασίας που κάνει τη ζωή ευκολότερη όταν τα πράγματα αρχίζουν να περιπλέκονται.)

Και τώρα δημιουργήστε ένα αρχείο post_list.html (απλά αφήστε το κενό για τώρα) μέσα στον φάκελο blog/templates/blog.

Δείτε πώς εμφανίζεται η ιστοσελίδα σας στο: http://127.0.0.1:8000 /

Αν παρουσιάζεται ακόμα το σφάλμα TemplateDoesNotExist, δοκιμάστε να επανεκκινήσετε τον server σας. Προσπαθήστε να τον σταματήσετε (πιέζοντας Ctrl + C) και επανεκκινήστε τον τρέχοντας την εντολή python manage.py runserver.

Σχήμα 11.1

Δεν υπάρχει σφάλμα πια! Συγχαρητήρια :) Ωστόσο, ιστοσελίδα σας δεν δείχνει κάτι παρά μια κενή σελίδα επειδή το template σας είναι κενό. Πρέπει να το διορθώσουμε αυτό.

Ανοίξτε το νέο αρχείο και προσθέστε τα εξής:

blog/templates/blog/post_list.html

<html>
<body>
    <p>Hi there!</p>
    <p>It works!</p>
</body>
</html>

Οπότε πως φαίνεται τώρα η ιστοσελίδα μας; Επισκεφθείτε το για να μάθετε: http://127.0.0.1:8000/

Σχήμα 11.2

Λειτουργεί! Καλή δουλειά :)

  • Το πιο βασικό tag, <html>, είναι πάντα η αρχή οποιασδήποτε ιστοσελίδας και </html> είναι πάντα στο τέλος. Όπως μπορείτε να δείτε, όλο το περιεχόμενο της σελίδας ενσωματώνεται μεταξύ της αρχής του tag <html> και του tag κλεισίματος </html>
  • <p>είναι ένα tag για στοιχεία κειμένου παραγράφου. Το tag </p> κλείνει κάθε παράγραφο

Head και body

Κάθε σελίδα HTML χωρίζεται σε δύο στοιχεία: το head και το body.

  • To head είναι ένα στοιχείο (element) που περιέχει πληροφορίες σχετικά με το έγγραφο αλλά αυτές οι πληροφορίες δεν εμφανίζονται στην οθόνη.

  • Το body είναι ένα στοιχείο που περιέχει όλα τα υπόλοιπα που εμφανίζονται ως μέρος της ιστοσελίδας.

Χρησιμοποιούμε το tag <head>για να πούμε στον browser σχετικά με τη διαμόρφωση της σελίδας και το tag <body> για να πούμε για το περιεχόμενο της.

Για παράδειγμα, μπορείτε να προσθέσετε τίτλο στην ιστοσελίδα σας μέσα από το tag <head>, όπως παρακάτω:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Αποθηκεύστε το αρχείο και ανανέωστε την σελίδα σας.

Σχήμα 11.3

Παρατηρήσατε πως ο browser κατάλαβε το "Ola's blog" ως τίτλο για την σελίδα σας; Ερμήνευσε το κείμενο <title>Ola's blog</title> και το τοποθέτησε στην μπάρα τίτλων του browser σας (το ίδιο κείμενο θα λειτουργήσει και ως όνομα σελιδοδείκτη κλπ).

Πιθανώς να έχετε παρατηρήσει ότι κάθε tag αντιστοιχίζεται με ένα tag κλεισίματος, με μια κάθετο / και ότι τα στοιχεία είναι ένθετα (δηλαδή δεν μπορείτε να κλείσετε μια συγκεκριμένη ετικέτα μέχρι να έχουν κλείσει όλα αυτά που ήταν μέσα σε αυτό).

Είναι σαν να βάζουμε πράγματα μέσα σε κουτιά. Έχετε ένα μεγάλο κουτί, <html></html>. Στο εσωτερικό του υπάρχει το <body></body> το οποίο με τη σειρά του περιέχει ακόμα μικρότερα κουτιά: <p></p>.

Θα πρέπει να ακολουθείτε αυτούς τους κανόνες κλεισίματος ετικέτας και "φωλιάσματος" των elements. Αν δεν το κάνετε, ο browser ενδέχεται να μην μπορεί να τα ερμηνεύσει ορθά και η σελίδα να μην εμφανίζεται σωστά.

Παραμετροποιώντας το template

Μπορείτε, τώρα, να διασκεδάσετε λιγάκι και να τροποιήσετε το template σας! Παρακάτω παρουσιάζονται μερικά χρήσιμα tags γι'αυτό:

  • <h1>A heading</h1> για επικεφαλίδες
  • <h2>A sub-heading</h2> για επικεφαλίδες χαμηλότερου επιπέδου
  • <h3>A sub-sub-heading</h3> …κοκ μέχρι την <h6>
  • <p>Μια παράγραφος κειμένου</p>
  • <em>text</em> δίνει έμφαση στο κείμενο σας
  • <strong>text</strong> κάνει τα γράμματα πιο έντονα
  • <br> αλλάζει γραμμή (δεν μπορείτε να βάλετε τίποτα ανάμεσα και δεν υπάρχει αντίστοιχο tag που να το κλείνει)
  • <a href="https://djangogirls.org">link</a> δημιουργεί έναν σύνδεσμο
  • <ul><li>first item</li><li>second item</li></ul> δημιουργεί μια λίστα, όπως αυτή εδώ που διαβάζετε τώρα!
  • <div></div> ορίζει ένα τμήμα στη σελίδα

Παρακάτω φαίνεται ένα πλήρες παράδειγμα ενός template. Αντιγράψτε-επικολλήστε το μέσα στο αρχείο blog/templates/blog/post_list.html:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>

Δημιουργήσαμε τρία div εδώ.

  • Το πρώτο div περιέχει τον τίτλο του blog μας – είναι μια επικεφαλίδα και ένας σύνδεσμος
  • Τα υπόλοιπα δύο div περιέχουν τα posts μας με ημ/νια δημοσίευσης, το h2 με τον τίτλο του post ο οποίος μπορεί να κλικαριστεί και επίσης δύο ps (παραγράφους) κείμενα, ένα για την ημ/νια και το άλλο για το κυρίως κείμενο.

Δίνει αυτή την αίσθηση:

Σχήμα 11.4

Ναιιι! Αλλά μέχρι στιγμής, το template μας εμφανίζει τις ίδιες πληροφορίες – ενώ προηγουμένως μιλούσαμε για templates που μας επέτρεπαν να εμφανίσουμε διαφορετικές/δυναμικές πληροφορίες με την ίδια μορφή.

Αυτό που θέλουμε να κάνουμε είναι να εμφανίσουμε πραγματικά posts τα οποία θα τα προσθέτουμε μέσω του Django admin. Και αυτό ακριβώς θα κάνουμε μετά.

Ένα πράγμα ακόμα: ώρα να το ανεβάσετε!

Θα ήταν καλό να το δούμε όλο αυτό στο internet, σωστά; Ας κάνουμε άλλο ένα deploy στο PythonAnywhere:

Κάντε commit και έπειτα push τον κώδικα σας στο GitHub

Πρώτ'απ'όλα ας δούμε ποια αρχεία έχουν αλλάξει από την τελευταία φορά που κάναμε deploy (τρέξτε αυτές τις εντολές τοπικά, όχι στο PythonAnywhere):

command-line

$ git status

Σιγουρευτείτε ότι βρίσκεστε μέσα στο φάκελο djangogirls και ας πούμε στο git να συμπεριλάβει όλες τις αλλαγές μέσα σε αυτό το φάκελο:

command-line

$ git add --all .

Σημείωση --all σημαίνει ότι το git θα αναγνωρίσει, επίσης, και τυχόν διεγραμμένα αρχεία/φακέλους (από προεπιλογή, αναγνωρίζει μόνο νέα/τροποποιημένα αρχεία). Επίσης, θυμηθείτε (από το κεφάλαιο 3) ότι η τελεία . σημαίνει ο τρέχων φάκελος.

Πριν ανεβάσουμε όλα τα αρχεία, ας δούμε τι επρόκειτο να ανεβάσει το git (όλα τα αρχεία που επρόκειτο να ανεβούν από το git θα εμφανίζονται με πράσινο χρώμα):

command-line

$ git status

Σχεδόν φτάσαμε. Τώρα είναι η ώρα να του πούμε να αποθηκεύσει αυτή την αλλαγή στο ιστορικό του. Θα του δώσουμε ένα "commit message" όπου θα περιγράψουμε τι άλλαξε. Μπορείτε να γράψετε ότι θέλετε σε αυτό το σημείο αλλά είναι χρήσιμο να γράψετε κάτι περιγραφικό ούτως ώστε να το θυμάστε στο μέλλον.

command-line

$ git commit -m "Changed the HTML for the site."

Σημείωση Σιγουρευτείτε ότι χρησιμοποιείτε διπλά "αυτάκια" γύρω από το commit message.

Μόλις τελειώσουμε με αυτό, θα ανεβάσουμε (push) τις αλλαγές μας στο GitHub:

command-line

$ git push

Κάντε pull τον νέο σας κώδικα στο PythonAnywhere και ανανεώστε την εφαρμογή

  • Έπειτα συνδεθείτε στο PythonAnywhere, μεταβείτε στο Bash console (ή ανοίξτε ένα νέο) και τρέξτε:

PythonAnywhere command-line

$ cd ~/<your-pythonanywhere-username>.pythonanywhere.com
$ git pull
[...]

(Θυμηθείτε να αντικαταστήσετε με το <your-pythonanywhere-username>πραγματικό όνομα χρήστη σας του PythonAnywhere χωρίς τα <>).

Και δείτε τον κώδικα σας να κατεβαίνει. Αν θέλετε να δείτε ότι ολοκληρώθηκε, μεταβείτε στη σελίδα "Files" page και δείτε τον κώδικα σας στο PythonAnywhere (μπορείτε να ανοίξετε και άλλες σελίδες του PythonAnywhere από το κουμπί του μενού στην σελίδα της κονσόλας).

  • Τέλος, πηγαίνετε στο "Web" page και κλικάρετε Reload στην εφαρμογή σας.

Οι αλλαγές θα πρέπει να είναι ορατές τώρα! Πηγαίνετε και ανανεώστε τη σελίδα στον browser σας. :)

results matching ""

    No results matching ""