Ελληνικά

Μήνας: Απρίλιος 2020

Δημοσιεύτηκε στισ

Δραστηριότητες

  1. Εκτελέστε τον παρακάτω κώδικα htm:

<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

2. Ποιά αποτελέσματα προκύπτουν από την εκτέλεση του παρακάτω κώδικα html;

<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

 

3. Τι θα εμφανίσει ο παρακάτω κώδικας html;

<html>
<body>

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

 

Δημοσιεύτηκε στισ

Παράδειγμα HTML Εγγράφου

Παράδειγμα HTML Εγγράφου
<html>
<head>
<title>Παράδειγμα 1.</title>
</head>
<body>
<h1>Αυτό είναι το πρώτο παράδειγμα.</h1>
<h2>Εφαρμογή των μέχρι τώρα προαναφερθέντων εντολών.</h2>
<br>
<h4><b>Αυτό το κείμενο είναι έντονο.</b>
<p>
<center>Και όλες οι παρακάτω σειρές
είναι <i>κεντραρισμένες</i>.
Τέλος του <u>πρώτου</u> παραδείγματος.
</body>
</html>
Εντολές HTML - Παραδείγματα
<head>
Όπως έχει προαναφερθεί η εντολή αυτή περιέχει τον τίτλο και άλλες σημαντικές πληροφορίες για το έγγραφο.
<title>
Μέσα σε αυτήν την εντολή περικλείεται ο τίτλος του εγγράφου. Ο τίτλος εμφανίζεται στην μπάρα του browser (Netscape, Explorer κ.α)
<p>
Η εντολή αυτή ορίζει μία νέα παράγραφο.
<h1>
Η εντολή αυτή καθορίζει το μέγεθος των γραμμάτων. Ο αριθμός μπορεί να ανέλθει ως το 6 (δηλαδή <h2> , <h3> ?). Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.
<br>
Η εντολή <br> αναγκάζει το κείμενο (και όλο το υπόλοιπο υλικό που περιέχει η σελίδα) να συνεχίσει στη επόμενη σειρά. (Το </br> δεν έχει νόημα).
<center>
Από τη στιγμή που εμφανίζεται το <center> σ' ένα έγγραφο μέχρι να κλείσει με </center> όλα όσα περιέχονται εμφανίζονται κεντραρισμένα
<b>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </b>) αναγκάζει το κείμενο να φαίνεται με έντονη γραφή (bold).
<i>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </i>) αναγκάζει το κείμενο να φαίνεται με πλάγια γραφή (italic).
<u>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </u>) αναγκάζει το κείμενο να φαίνεται υπογραμμισμένο (underline).

Δημοσιεύτηκε στισ

Περιεχόμενο με σημασία

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

Ξεκινούμε με τη γραμμή 5, όπου στην ετικέτα html προσθέσαμε μια παράμετρο lang. Με αυτή δηλώνουμε τη γλώσσα στην οποία είναι γραμμένο το περιεχόμενο. Αυτό βοηθά μια μηχανή αναζήτησης να επιλέξει τη συγκεκριμένη σελίδα, στην περίπτωση που τα κριτήρια αναζήτησης ταιριάζουν και ο χρήστης έχει επιλέξει ότι θέλει να βρει ιστοσελίδες γραμμένες στα Ελληνικά. Το πρώτο συνθετικό της τιμής “el-GR” αναφέρεται στη γλώσσα, ενώ το δεύτερο στη χώρα.

Οι γραμμές 11 και 15 επισημαίνονται από τις ετικέτες <header> … </header> οι οποίες χαρακτηρίζουν εκείνο το τμήμα περιεχομένου ως κεφαλίδα της ιστοσελίδας. Δεν αλλάζει τη μορφοποίηση, παρά μόνο του δίνει τη σημασία της κεφαλής. Ομοίως στις επόμενες γραμμές τρεις περιοχές (γραμμές 16-30, 31-43, 44-53) χαρακτηρίζονται ως άρθρα με την <article>… </article> και μια περιοχή (γραμμές 54-57) ως υποσέλιδο με τη <footer> … </footer>. Ο προσδιορισμός της σημασίας που έχει για εμάς το περιεχόμενο μπορεί να βοηθήσει έτσι ώστε και η μηχανή να το «καταλαβαίνει» κατά κάποιο τρόπο. Αυτό θα έχει εφαρμογή σε πιο επιτυχημένες λ.χ. αναζητήσεις από μηχανές αναζήτησης ή στην αρτιότερη πιθανή ενσωμάτωση της
ιστοσελίδας μας σε κάποιο ιστότοπο που βασίζεται σε ένα σύστημα διαχείρισης περιεχομένου(Content Management System, CMS), όπως το WordPress, το Joomla, το Drupal, κ.α. Επίσης μας δίνεται η δυνατότητα να ορίσουμε εμείς κανόνες μορφοποίησης μέσω της γλώσσας των διαδοχικών φύλλων στυλ. Οι όροι κεφαλίδα και υποσέλιδο δεν αφορούν την επανάληψη αυτών των περιοχών κατά την εκτύπωση, όπως συμβαίνει στα έγγραφα των επεξεργαστών κειμένου.

Στη γραμμή 14 χρησιμοποιούμε τις ετικέτες <abbr> … </abbr> για να ορίσουμε ένα tool tip, δηλαδή ένα ταμπελάκι το οποίο θα εμφανίζεται αυτόματα, όταν το ποντίκι μας σταθεί πάνω από το κείμενο «ΠΣΔ», εμφανίζοντας την εξήγηση του όρου. Αυτό επιτυγχάνεται χάρη στην παράμετρο title η οποία όταν χρησιμοποιηθεί και στις ετικέτες των επικεφαλίδων και των παραγράφων (γραμμές 12, 17, 19, 32, 33, 45, 46) έχει το ίδιο αποτέλεσμα.

Στη γραμμή 14 χρησιμοποιούμε τις ετικέτες <abbr> … </abbr> για να ορίσουμε ένα tool tip, δηλαδή ένα ταμπελάκι το οποίο θα εμφανίζεται αυτόματα, όταν το ποντίκι μας σταθεί πάνω από το κείμενο «ΠΣΔ», εμφανίζοντας την εξήγηση του όρου. Αυτό επιτυγχάνεται χάρη στην παράμετρο title η οποία όταν χρησιμοποιηθεί και στις ετικέτες των επικεφαλίδων και των παραγράφων (γραμμές 12, 17, 19, 32, 33, 45, 46) έχει το ίδιο αποτέλεσμα. Οι γραμμές 20-24 χαρακτηρίζονται από τις ετικέτες <mark> … </mark> με αποτέλεσμα στο φυλλομετρητή να εμφανίζονται με κίτρινο χρώμα, σαν να τις έχουμε μαρκάρει με κίτρινο μαρκαδόρο επισήμανσης. Οι ετικέτες <u> … </u> στη γραμμή 40 προκαλούν την υπογράμμιση του κειμένου, ενώ η <hr> της γραμμής 55 εμφανίζει μια οριζόντια γραμμή. Στη γραμμή 33 υπάρχει η ετικέτα <em> η οποία θα δώσει έμφαση στο κείμενο μέχρι τη γραμμή 34 γράφοντάς το με πλάγια γράμματα. Το ίδιο θα συμβεί και με τη χρήση της <i> στις γραμμές 48-50. Η διαφορά είναι ότι ίσως η <em> να προκαλεί την εμφάνιση λιγότερο ή περισσότερο πλάγιων χαρακτήρων από φυλλομετρητή σε φυλλομετρητή, αλλά το σημαντικότερο είναι ότι η <em> προσδίδει τη σημασία της έμφασης στο περιεχόμενο και μας δίνει τη δυνατότητα να διαφοροποιήσουμε εμείς τη μορφοποίηση χρησιμοποιώντας τη γλώσσα CSS.

 

 

Δημοσιεύτηκε στισ

Εφαρμογή 2: Συμβολικό… κείμενο
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να το εμπλουτίσουμε με σύμβολα. Στο πλαίσιο Πηγαίος κώδικας 2 παρουσιάζεται ο κώδικας της δεύτερης εφαρμογής μας.

Ένα έγγραφο αποτελείται συνήθως στο μεγαλύτερο τμήμα του από κείμενο, το οποίο οργανώνεται σε παραγράφους. Έτσι στο παράδειγμά μας χρησιμοποιούμε το στοιχείο παραγράφων (ετικέτες <p> … </p>) για να καθορίσουμε τα όρια των τριών παραγράφων που απαρτίζουν το κείμενο (γραμμές 11-23, 25, 27, 28-35). Η κάθε παράγραφος αποτελεί μία μικρή ενότητα κειμένου. Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand ( & ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα αντίστοιχα σύμβολα.

Κοιτάζοντας προσεκτικά τον κώδικα του παραδείγματος παρατηρούμε ότι υπάρχουν κάποια κενά διαστήματα μεταξύ λέξεων και παραγράφων. Ανοίγοντας όμως το αρχείο του παραδείγματος με το φυλλομετρητή μας, παρατηρούμε ότι τα διαστήματα αυτά δεν εμφανίζονται. Αυτό συμβαίνει διότι οι χαρακτήρες αλλαγής γραμμής (Line Feed, LF, με κωδικό ASCII 10), οριζόντιου διαστήματος (Horizontal Tab, HT, με κωδικό ASCII 9) και επιστροφής του δρομέα στην αρχή της γραμμής (Carriage Return, CR, με κωδικό ASCII 13), είναι μη-εκτυπώσιμοι χαρακτήρες ελέγχου. Η γλώσσα HTML προέρχεται από την Πρότυπη Γενικευμένη Γλώσσα Σήμανσης (Standard Generalized Markup Language, SGML). Στις εφαρμογές της SGML η χρήση χαρακτήρων ελέγχου περιορίζεται για να υπάρχει μεγαλύτερη πιθανότητα επιτυχούς ανταλλαγής πληροφοριών μεταξύ ετερογενών συστημάτων μέσω ετερογενών δικτύων. Στην HTML μόνο οι τρεις προηγούμενοι χαρακτήρες ερμηνεύονται και μόνο όταν αποτελούν περιεχόμενα του στοιχείου <pre> … </pre>.

Έτσι λοιπόν στην HTML η ύπαρξη συνεχόμενων μη εκτυπώσιμων χαρακτήρων, όπως οι στηλοθέτες (tab), οι αλλαγές παραγράφου (enter/return) και τα διαστήματα (space) αντικαθίστανται από ένα απλό διάστημα. Επομένως, όπως συμβαίνει και σε ένα λογισμικό κειμενογράφου, η αλλαγή γραμμής γίνεται αυτόματα, ενώ παράγραφος θεωρείται ότι περικλείεται στις ετικέτες <p> … </p> (στον κειμενογράφου πατούμε το πλήκτρο Enter για αλλαγή παραγράφου).
Αλλαγή γραμμής, αλλά όχι παραγράφου υλοποιείται με την ετικέτα <hr> (όπως όταν πατούμε Shift+Enter στον κειμενογράφο μας) (γραμμές 12, 19). Παρατηρούμε επίσης ότι η γραμμή 27 που αποτελεί από μόνη της μία παράγραφο έχει μεγαλύτερη απόσταση από την παράγραφο που ακολουθεί, σε σχέση με τη γραμμή 12 στην οποία απλά εισάγεται μια αλλαγή γραμμής. Η παράγραφος είναι μια ενότητα περιεχομένου η οποία μπορεί με τις κατάλληλες οδηγίες να
έχει τα δικά της περιθώρια και τη δική της θέση στη ροή του κειμένου της ιστοσελίδας.

Τέλος, στη γραμμή 12 παρατηρούμε τις ετικέτες <strong> … </strong> που ορίζουν να εμφανιστεί το κείμενο με έντονα γράμματα, όπως συμβαίνει και με τις ετικέτες <b> … </b> της γραμμής 27. Η διαφορά έγκειται μόνο στη σημασιολογία, καθώς το στοιχείο strong δίνει ένα επιπλέον νόημα στο κείμενο, το οποίο συνήθως εκμεταλλευόμαστε σε πολυπλοκότερα έγγραφα. Το κείμενο των γραμμών 20-22 γράφεται με μικρότερα γράμματα, λόγω της επισήμανσής του με τις ετικέτες <small> … </small>. Πολυπλοκότερες βέβαια μορφοποιήσεις προτείνεται
να γίνονται χρησιμοποιώντας τη γλώσσα των Διαδοχικών Φύλλων Στυλ (Cascading Style Sheet, CSS), καθώς η μορφοποίηση με ετικέτες της γλώσσας HTML έχει περιορισμούς, ενώ πολλές από τις παλαιότερες ετικέτες μορφοποίησης έχουν πλέον αποχαρακτηριστεί, οπότε υπάρχει πιθανότητα να μην υποστηρίζονται από μελλοντικές εκδόσεις των φυλλομετρητών.

Κλείνοντας πρέπει να τονίσουμε ότι αλλάζοντας το μέγεθος του παραθύρου του φυλλομετρητή, αλλάζουν όπως είναι λογικό και τα σημεία αλλαγής γραμμών. Αυτό είναι το ζητούμενο. Η κάθε ιστοσελίδα να "γεμίζει" το κενό παράθυρο του φυλλομετρητή με περιεχόμενο σύμφωνα με τις οδηγίες μας, τις οποίες δίνουμε γράφοντας κώδικα. Η σύγχρονη τάση είναι το περιεχόμενο μιας ιστοσελίδας να προσαρμόζεται αρμονικά σε κάθε μέγεθος οθόνης. Αυτός είναι ο στόχος της προσαρμοστικής σχεδίασης, επίκαιρης λόγω της πληθώρας των τερματικών συσκευών που χρησιμοποιούμε στις μέρες μας για την πρόσβασή μας στο περιεχόμενο του παγκόσμιου ιστού.