Υποενότητα 1.3: Απλό αρχείο HTML
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
| Book: | Υποενότητα 1.3: Απλό αρχείο HTML |
| Printed by: | Guest user |
| Date: | Thursday, 21 November 2024, 6:15 PM |
Description
- Απλή HTML σελίδα
- Επικεφαλίδες - Headings και παράγραφοι - paragraphs
- Μορφοποίηση κειμένου- Text formatting
- Τύποι αλλαγής γραμμής - break
Απλή HTML σελίδα
Κάθε σελίδα HTML περιέχει ορισμένα βασικά στοιχεία-elements που είναι απαραίτητα για τη δομή της..
Αυτά είναι:<html>, <head>, <title> and <body>
Σχεδόν όλα τα στοιχεία HTML έχουν μια ετικέτα έναρξης και μια τελική ετικέτα-tag. Οι εξαιρέσεις θα συζητηθούν αργότερα στο μάθημα. Η βασική δομή μιας σελίδας HTML είναι:
Η πρώτη δήλωση που υπάρχει σε οποιαδήποτε σελίδα HTML είναι η <!DOCTYPE html>. Αυτή η δήλωση πρέπει να εμφανίζεται μόνο μία φορά, στην αρχή του εγγράφου -document μας και αντιπροσωπεύει τον τύπο εγγράφου. Όταν δηλώνουμε τον τύπο εγγράφου, βοηθάμε τα προγράμματα περιήγησης - browsers να εμφανίζουν σωστά το περιεχόμενο της ιστοσελίδας μας.
Μετά το <!DOCTYPE html ακολουθεί η <html> tag. Κάθε HTML document αρχίζει με <html και τελειώνει με </html>. Αυτή η ετικέτα είναι η ρίζα- root του εγγράφου μας και είναι επίσης ο τόπος όπου δηλώνουμε τη γλώσσα του εγγράφου μας. Για παράδειγμα, εάν το περιεχόμενό μας είναι στα αγγλικά, θα έχουμε:: <html lang="en"> </html>
To στοιχείο <head> -element ακολουθεί την <html> ετικέτα και τελειώνει πριν τη <body> ετικέτα- tag. Περιέχει πληροφορίες σχετικά με την ιστοσελίδα που συνήθως δεν εμφανίζεται στη σελίδα. Περιέχει επίσης το στοιχείο <title> όπου δηλώνουμε τον τίτλο του εγγράφου μας.
Για να εμφανίσει η ιστοσελίδα μας ελληνικούς χαρακτήρες πρέπει να προσθέσουμε τον ακόλουθο κώδικα μέσα στο <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="el">Στο στοιχείο <body> τοποθετούμε το περιεχόμενό μας. Οτιδήποτε βρίσκεται στο <body> είναι ορατό.
Άσκηση
- Αντιγράψτε τον προηγούμενο κώδικα
- Ανοίξτε τον επεγεργαστή και δημιουργήστε ένα νέο έγγραφο
- Επικολλήστε τον κώδικα στη σελίδα
- Αποθηκεύστε τη σελίδα ως
exersice01.3.01.htmlστον φλακελο "Exercises". - Δείτε τη σελίδα στον browser.
Πού εμφανίζεται ο τίτλος "Simple Web Page";
Επικεφαλίδες και παράγραφοι
Επικεφαλίδες HTML
Το HTML έχει 6 επικεφαλίδες- headings : <h1>, <h2>,<h3>,<h4>,<h5> και <h6>.
Οι διάφορες επικεφαλίδες έχουν διαφορετική σημασία και διαφορετικό μέγεθος.
Η <h1> είναι η μεγαλύτερη και πιο σημαντική επικεφαλίδα ενώ η <h6> είναι η μικρότερη και λιγότερο σημαντική.
Έτσιι η σειρά είναι: <h1> > <h2> > <h3> > <h4> > <h5> > <h6>.
Είναι σημαντικό να χρησιμοποιείτε τις επικεφαλίδες για να δομείτε το έγγραφο. Για παράδειγμα, η κύρια επικεφαλίδα πρέπει να είναι μέσα σε ένα <h1> tag, ένας τίτλος σε <h2> tag και ένας υπότιτλός σε <h3> tag.
Εδώ πρέπει να σημειώσουμε ότι, όπως περιγράφεται στη λέξη, οι επικεφαλίδες πρέπει να χρησιμοποιούνται μόνο για επικεφαλίδες. Δεν πρέπει να χρησιμοποιείτε επικεφαλίδες για να κάνετε τις λέξεις μεγαλύτερες. Αργότερα στο μάθημα, θα μάθουμε πώς να φτιάχνουμε λέξεις μεγαλύτερες.
Παράγραφοι HTML
Οι παράγραφοι σε μια HTML ορίζονται από το <p> στοιχείο-element. Οι παράγραφοι τοποθετούνται μέσα στο <body> αρχίζουν με <p>και τελειώνουν με</p>.
Είναι σημαντικό να σημειωθεί ότι από προεπιλογή, τα προγράμματα περιήγησης αφήνουν κάποιο κενό πριν και μετά από μια παράγραφο, ώστε να διαφέρει από τις γειτονικές παραγράφους. Κάθε παράγραφος ξεκινά από μια νέα γραμμή. Μέσα στο <p> δεν μπορείτε να μορφοποιήσετε την εμφάνιση του περιεχομένου σας προσθέτοντας κενά ή νέες γραμμές με το πλήκτρο Enter. Ο περιηγητής δεν θα τα εμφανίσει στη σελίδα.
Example
Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα και το αρχείο
exersice01.3.01.html - Αποθηκεύστε το ως
exersice01.3.02.html, στον φάκελο "Exercises" - Αντιγράψτε τον παραπάνω κώδικα, επικολλήστε τον στο αρχείο και αποθηκεύστε το
- Δείτε το αρχείο στον browser
- Προσθέστε ένα ακόμα
<h5>στοχείο και ένα<p>στποιχείο. Μπορείτε να χρησιμοποιήσετε το ψευδο- κείμενο Lorem ipsum. - Αποθηκεύστε και ανανεώστε τον browser για να δείτε το αποτέλεσμα
Προσθέστε κενά διαστήματα και αποθηκεύστε. Τι βλέπετε στον browser?
Τύποι αλλαγής γρμμής
<br> ή <br/>
Στην ετικέτα <p> αναφέραμε ότι οι τυχόν επιπλέον γραμμές καταργούνται όταν εμφανίζεται η σελίδα. Ωστόσο, υπάρχει ένας τρόπος για να προσθέσετε αλλαγές γραμμής που δεν θα καταργηθούν.
<br> ή<br/> εισάγει αλλαγή γραμμής. Χρησιμοποιείται συνήθως εσωτερικά μιας παραγράφου όταν θέλουμε να διαμορφώσουμε τις γραμμές του περιεχομένου μας. Επιπλέον, <br> είναι ένα από τα στοιχεία που δεν έχουν τελική ετικέτα.
Αυτά τα στοιχεία ονομάζονται κενές ετικέτες. Στην HTML μπορούμε να χρησιμοποιήσουμε την ετικέτα γράφοντας <br> είτε <br/>. TΟ τελευταίος είναι ένας πιο αυστηρός τρόπος και είναι υποχρεωτικός στο XHTML. Ωστόσο, στην HTML και οι δύο παράγουν το ίδιο αποτέλεσμα.
<wbr>
The <wbr> είναι ένα νέο στοιχείο της HTML5. Πρόκειται για το "Word Break Opportunity".
Το χρησιμοποιούμε όταν έχουμε μια μεγάλη λέξη ή φράση και δεν ξέρουμε πώς το πρόγραμμα περιήγησης θα το εμφανίσει στη σελίδα. Με την προσθήκη του <wbr> καθορίζουμε τον τόπο όπου το κείμενό μας πρόκειται να χωριστεί εάν η σελίδα δεν έχει αρκετό χώρο.
Παρόμοια με το <br>,το <wbr> δεν έχει τελική ετικέτα.
Παράδειγμα
<!DOCTYPE html>
<html lang="en">
<head>
<title>Break elements</title>
</head>
<body>
<h1>Break elements</h1>
<p>
My favourite word is supercalifragilisticexpialidocious. It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
<p>
My favourite word is supercalifragilisticexpialidocious.<br>It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
<p>
My favourite word is supercalifragilistic<wbr>expialidocious. It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
</body>
</html>
Μορφοποίηση κειμένου
Τα στοιχεία μορφοποίησης κειμένου χρησιμοποιούνται για την εμφάνιση κειμένου με ιδιαίτερη σημασία.
Αυτά τα στοιχεία είναι:
- Strong και bold:
<strong>,<b> - Italic και emphasized:
<i>,<em> - Subscript και Superscript :
<sub>,<sup> - Inserted και Deleted:
<ins>,<del> - Small:
<small> - Marked:
<mark>
Το πρώτο ζευγάρι <strong> και <b> θα έχει το ίδιο αποτέλεσμα στη σελίδα. Κάνουν το κείμενο να εμφανίζεται με έντονους χαρακτήρες. Ωστόσο, σημασιολογικά δεν αντιπροσωπεύουν το ίδιο πράγμα. Η ετικέτα <b> χρησιμοποιείται μόνο για να εμφανιστεί ένα κείμενο με έντονη γραφή και μπορεί να χρησιμοποιηθεί για οποιοδήποτε λόγο. Η ετικέτα <strong> όμως, έχει σημασιολογική σημασία και χρησιμοποιείται όταν θέλουμε να τονίσουμε τη σημασία του συγκεκριμένου κειμένου.
Οι ετικέτες Italic <i> και emphasized <em>, και οι δύο θα κάνουν το κείμενο να εμφανίζεται πλάγιο. Ωστόσο, παρόμοια με το προηγούμενο παράδειγμα μας, είναι σημασιολογικά διαφορετικές. Η <i> χρησιμοποιείται για να κάνει ένα κείμενο πλάγια χωρίς ιδιαίτερη σημασία. Η <em> όμοωςπό την άλλη πλευρά τονίζει τη σημαντικότητα του συγκεκριμένου κειμένου.
Η ετικέτα Subscript <sub> συνήθως αποδίδεται ως δείκτης και η Superscript <sup> ως εκθέτης. Η ετικέτα <sub> μετακινεί το κείμενο προς τα κάτω, ορίζει το κείμενο του δείκτη. Η ετικέτα <sup> μετακινεί το κείμενο προς τα επάνω, ορίζει το κείμενο του εκθέτη.
Οι ετικέτες Υπογράμμισης- Inserted <ins> και Διαγραφής- Deleted <del> χρησιμοποιούνται για την απεικόνιση των επεξεργασιών. Η ετικέτα <ins> εμφανίζει το κείμενο υπογραμμισμένο. Η ετικέτα <del> dεμφανίζει το κείμενο διαγραμμένο.
Η ετικέτα Small <small> ορίζει μικρότερο κείμενο. Κάνει το συγκεκριμένο κείμενο να φαίνεται μικρότερο από το περιβάλλον.
Η ετικέτα επισήμανσης - Marked <mark> ορίζει το επισημασμένο κείμενο. Εμφανίζεται επισημαίνοντας με κίτρινο το συγκεκριμένο κείμενο.
Παράδειγμα
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formating text</title>
</head>
<body>
<h1>Text formatting</h1>
<p>
<strong>Strong </strong> text <br>
<b>Bold </b>text <br>
<em>Emphasized </em> text <br>
<i>Italic </i> text <br>
<sub>Subscript </sub> text <br>
<sup>Superscript </sup> text <br>
<ins>Inserted </ins> text <br>
<del>Deleted</del> text <br>
<small>Small</small> text <br>
<mark>Marked</mark> text <br>
</p>
</body>
</html>
Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice01.3.04.htmlστον φάκελο "Exercises" - Επεξεργαστείτε το αρχείο. Η εμφάνσιση στον browser θα πρέπει να είναι σαν την ακόλουθη εικόνα:
