🟣Α-Εφαρμ.2

Στοιχεία HTML (ετικέτες & παράμετροι)

Η γλώσσα HTML είναι λοιπόν μια γλώσσα με την οποία επισημαίνουμε (μαρκάρουμε) το περιεχόμενο, τα συστατικά ενός εγγράφου, όπως κείμενα, εικόνες, πίνακες, κ.λπ. Έτσι καθορίζουμε τη σημασία του περιεχομένου και επηρεάζουμε τη μορφοποίησή του. Κάθε έγγραφο HTML αποτελείται από ένα σύνολο στοιχείων. Κάθε στοιχείο χαρακτηρίζεται από μία ετικέτα έναρξης και μία ετικέτα λήξης του.

 

 

Τα στοιχεία μπορούν να φωλιάζουν το ένα μέσα στο άλλο, αλλά όχι οι ετικέτες. Επιτρέπεται δηλαδή το εξής:

 

 

και το εξής:

 

 

Είναι καλή πρακτική να γράφουμε κάθε ετικέτα σε χωριστή γραμμή και με αντίστοιχη εσοχή ώστε ο κώδικας να είναι πιο ευανάγνωστος, βλέποντας τι “ανήκει” που.

 

 

 

Συνοψίζοντας, η σύνταξη κάθε στοιχείου της HTML την εξής γενική μορφή για στοιχεία με διπλές ετικέτες, με άλλα λόγια, ετικέτες αρχής και τέλους της επισήμανσης:

 

 

Ειδικοί Χαρακτήρες

Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand ( & ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα αντίστοιχα σύμβολα.

🔗 ειδικοί χαρακτήρες cheat sheet 🔗

 


 

Εφαρμογή 2: Συμβολικό… κείμενο

Πηγαίος κώδικας 2: Ιστοσελίδα με παραγράφους, σύμβολα και στοιχειώδη μορφοποίηση

 

 

💪🏻Δραστηριότητα: 

Πληκτρολογήστε τον παρακάτω πηγαίο κώδικα στον επεξεργαστή (IDE)   → 

https://www.tpointtech.com/compiler/html-css-javascript

<!DOCTYPE html>
<html>
   <head>
      <title>Κείμενο με Σύμβολα</title>
      <meta charset="utf-8">
   </head>
   <body>
      <p>
         <strong>Παράγραφος 1η</strong> <br>
         Αυτό είναι το κείμενο της 1ης παραγράφου.
         Περιέχει τον ειδικό χαρακτήρα του &euro;
      </p> 
      <p>
         <b>Παράγραφος 2η</b> <br>
         Αυτό είναι το κείμενο της 2ης παραγράφου.
         Περιέχει τον ειδικό χαρακτήρα του &frac12;
      </p> 
   </body>
</html>

 

 

🏠Άσκηση

Αποστείλετε τον κώδικα που πληκτρολογήσατε στην παρακάτω φόρμα ώστε να αξιολογηθεί από τον καθηγητή.

📝🔗 Φόρμα 📝🔗