Υποενότητα 1.3: Απλό αρχείο HTML

  • Απλή 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> είναι ορατό.

Άσκηση

  1. Αντιγράψτε τον προηγούμενο κώδικα 
  2. Ανοίξτε τον επεγεργαστή και δημιουργήστε ένα νέο έγγραφο
  3. Επικολλήστε τον κώδικα στη σελίδα
  4. Αποθηκεύστε τη σελίδα ως exersice01.3.01.htmlστον φλακελο "Exercises".
  5. Δείτε τη σελίδα στον browser. 

Τι βλέπετε;

Είναι μια κενή σελίδα.

Πού εμφανίζεται ο τίτλος "Simple Web Page";

Στον title του browser