21.Επιπλέον Συστοίχιση

Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |

21. Επιπλέον Συστοίχιση

Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.

Συστοίχιση Κειμένου
Συστοιχίζοντας Εικόνες και Κείμενο
Περιθώριο Εικόνας
Προσθέτοντας Συστοίχιση στις Εικόνες του Volcano Site
Κεντράρισμα/Συστοίχιση Κειμένου

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

Η Netscape και πάλι, πρόσθεσε την HTML ετικέτα <center>...</center> η οποία συστοιχίζει οτιδήποτε περιλαμβάνει στο κέντρο της σελίδας. Ωστόσο οσον αφορά την "καθαρή" HTML, η συστοίχιση του κείμένου είναι απλά ένα χαρακτηριστικό της ετικέτα <p>:

<p align=center>
Κείμενο
<img src="file.gif"><br>
Κείμενο
</p>

Προσέξτε οτι τώρα χρησιμοποιούμε ετικέτα κλεισίματος </p>. Αυτό έχει ιδιαίτερη σημασία για τη συνέχεια όταν θα εξετάσουμε τα Style Sheets και άλλα χαρακτηριστικά της HTML 4.0. Επίσης, αν χρησιμοποιήσετε αρκετές παραγράφους, συστοιχισμένες στο κέντρο, η κάθε μια θα πρέπει να συμπεριληφθεί ανάμεσα σε ξεχωριστό <p align=center>...</p>

Για τα αποτελέσματα της συστοίχισης στο κέντρο, συγκρίνετε:

Cheese In History

Cheese has been there for many major events

When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.


return to the cheese home page

με το ακόλουθο παράδειγμα που έχει το περιεχόμενο συστοιχισμένο στο κέντρο:

Cheese In History

Cheese has been there for many major events


             return to the cheese home page

Στη συνέχεια θα τροποποιήσουμε την κεντρική σελίδα του παραδείγματος (index.html) ώστε να χρησιμοποιεί την ετικέτα <center>...</center> στο τμήμα με τη λίστα των μαθημάτων. Θα κάνοθμε ακόμη και κάποιες αλλαγές για να βελτιώσουμε την εμφάνιση της.

Ανοίξτε το αρχείο index.html στον κειμενογράφο σας.

Βρείτε το τμήμα που μοιάζει με τα ακόλουθα:

  <B>In this Lesson...</B>
  <ul>
  <i>
  <li><A HREF="intro.html">Introduction</A>
  <li><A HREF="term.html">Volcano Terminology</A>
  <li><A HREF="usa.html">Volcanic Places in the USA</A>
  <li><A HREF="mars.html">Volcanic Places on Mars</A>
  <li><A HREF="proj.html">Research Project</A>
  </i>
  </ul>

και αλλάξτε το με τα ακόλουθα:

  <p align=center>
  <font size=+1>
  <i>
  <A HREF="intro.html">Introduction</A><br>
  <A HREF="term.html">Volcano Terminology</A><br>
  <A HREF="usa.html">Volcanic Places in the USA</A><br>
  <A HREF="mars.html">Volcanic Places on Mars</A><br>
  <A HREF="proj.html">Research Project</A><br>
  </i>
  </font>
  </p>

Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας.

ΣΗΜΕΙΩΣΗ:Παρατηρείστε τις αλλαγές που κάναμε. Ολόκληρη η ενότητα περιλαμβάνετε στις ετικέτες <p align=center>..</p> για τη συστοίχιση. Η λίστα που δημιουργήσαμε στο μάθημα 6, θα έδειχνε περίεργη συστοιχισμένη στο κέντρο. Έτσι για το λόγο αυτό αφαιρέσαμε τη δομή <ul><li>...<li>...</ul>. Οι ετικέτες <br> στο τέλος κάθε γραμμής, είναι για την αλλαγή γραμμής.

Και τελειώνοντας, προσθέσαμε και την ετικέτα <font>...</font> για να μεγαλώσουμε το μέγεθος του κειμένου. Αν θέλετε μπορείτε να χρησιμοποιήσετε την ετικέτα <center>...</center> αντί του <p align=center>...</p>

Στο σημείο αυτό, αν θέλετε μπορείτε να συγκρίνετε το αρχείο HTML με ένα παράδειγμα για το πως θα πρέπει να μοιάζουν.

Κάθε ετικέτα <hN>...</hN> μπορεί να συστοιχιθεί στο κέντρο προσθέτοντας το χαρακτηριστικό:

<hN align=center>Κείμενο</hN>

Στη συνέχεια θα χρησιμοποιήσουμε το χαρακτηριστικό αυτό για να κεντράρουμε τον τίτλο κάθε σελίδας:

Ανοίξτε κάθε ένα απο τα αρχεία HTML files στον κειμενογράφο σας.
Για το κάθε ένα απο αυτά τα αρχεία, αλλάξτε το κείμενο που εμφανίζεται κοντά στην κορυφή, ανάμεσα στις ετικέτες <h1> ή <h2>, ακολουθώντας το παράδειγμα απο το αρχείο intro.html:
```
  <h2>Introduction</h2>
```
σε
```
  <h2 align=center>Introduction</h2>
```
Σώστε τις αλλαγές και φορτώστε τις σελίδες στον browser σας.

ΣΗΜΕΙΩΣΗ: There is also an align attribute for the <hr> tag that is relevant to the other options we reviewed in lesson 19 "Easy Horizontal Rules". When you specify a shorter width for a horizontal rule, you can also specify that it be aligned to the left or the right (the default is to center align horizontal rule lines):

<hr size=8 width=60% align=right> :

<hr size=8 width=60% align=left> :

Συστοιχίζοντας Εικόνες και Κείμενο

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

Προσθέτοντας το χαρακτηριστικό align στην ετικέτα <img> μπορούμε να ορίσουμε την εικόνα ώστε να είναι συστοιχισμένη στα αριστερά ή δεξιά της σελίδας. Αλλά επιπλέον μπορούμε να έχουμε οοιαδήποτε HTML να ακολουθεί, γεμίζοντας έτσι τον περιβάλλοντα χώρο. Η HTML που το κάνει αυτό είναι:

  <img src="Όνομα_αρχείου.gif" align=right>
  <img src="Όνομα_αρχείου.jpg" align=left>

Συγκρίνετε τα ακόλουθα παραδείγματα:

Χωρίς align
(όμοιο με align=bottom αν δε οριστεί)

Cheese In History

Cheese has been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

Με Κείμενο Στα Αριστερά
align=left

Cheese In History

Μεγαλώστε/μικρύνετε το παράθυρο του web browser για να δείτε πως επηρεάζετε η σελίδα σας.

Να σημειώσουμε ακόμη οτι μπορεί κάποια φορά να θελησετε να συστοιχίσετε μαζί με την εικόνα ένα μικρό τμήμα του κειμένου, και όχι όλο το υπόλοιπο κείμενο. Η δυνατότητα αυτή υπάρχει αν χρησιμοποιήσετε μαζί με την ετικέτα <br> το χαρακτηριστικό clear :

  <br clear=left>
  <br clear=right>
  <br clear=all>

το οποίο απενεργοποιεί τις όποιες προηγούμενες συστοιχίσεις έχουνα καθοριστεί απο την ετικέτα <img>.

Περιθώριο Εικόνας

Κάποιες φορές όταν χρησιμοποιείτε την αριστερή ή δεξιά συστοίχιση με μια εικόνα, το κείμενο μοιάζει να κολάει σχεδόν στην εικόνα. Για να αποφύγουμε κάτι τέτοιο υπάρχει μια επιλογή που μπορουμε να χρησιμοποιήσουμε μαζί με την ετικέτα <img> για να προσθέσουμε περιθώριο γύρο απο την εικόνα:

  <img scr="Εικόνα.gif" alt="Εικόνα" width=79 height=142 vspace=8 hspace=12>

Τα vspace και hspace προσθέτουν το καθορισμένο σε pixels περιθώριο πάνω και κάτω (vspace) ή αριστερά και δεξιά (hspace) απο την εικόνα. Έτσι μπορούμε να τροποποιήσουμε τα παραπάνω παραδείγματα με τον ακόλουθο τρόπο:

Κείμενο χωρίς περιθώριο
align=left

Cheese In History

Κείμενο με περιθώριο
align=left, vspace=10 hspace=18

Cheese In History

Προσθέτοντας Συστοίχιση στις Εικόνες του Volcano Site

Θα επιστρέψουμε στο σημείο αυτο στο αρχείο index.html για να τροποποιήσουμε την εισαγωγική σελίδα. Η εικόνα που έχουμε μπορεί να δείχνει ωραία, αλλά καταλαμβάνει περισσότερο χώρο να έχουμε την εικόνα με το κείμενο να ακολουθεί απο κάτω. Θα χρησιμοποιήσουμε τη συστοίχιση εικόνας/κειμένου για να εμφανίσουμε ένα μέρος του κειμένου συνεχόμενο της εικόνας.

Ανοίξτε το αρχείο index.html στον κειμενογράφο σας.

Βρείτε το τμήμα που περιλαμβάνει τα:

  <img alt="A Lesson on:"   src="../pictures/lava.gif">
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <BLOCKQUOTE>
  <B><I><font size=+1>"Nature raves savagely, 
  threatening the lands"</font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  </BLOCKQUOTE>

  In this lesson you will use the Internet
  to research information on volcanoes and then 
  write a report on your
  results.

και αντικαταστήστε το με τα ακόλουθα:

  <img alt="A Lesson on:" src="../pictures/lava.gif"   align=left>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <p>
  In this lesson you will use the Internet
  to research information on volcanoes and then write a report on your
  results.
  <br clear=left>

Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας

Κεντράρισμα/Συστοίχιση Κειμένου

Θα προσθέσουμε ακόμα μια ετικέτα συστοίχισης, την <div>...</div>, που περιλαμβάνεται στην HTML 3.0. Ολόκληρο το κείμενο που περιλαμβάνεται στην ετικέτα συστοιχίζεται σύμφωνα με την ιδιότητα align:

  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>

Στη συνέχεια θα χρησιμοποιήσουμε την ετικέτα αυτή για αλλάξουμε την εισαγωγή στην αρχική σελίδα, έτσι ώστε να έχει το κείμενο της συστοιχισμένο στα δεξιά της σελίδας:

Ανοίξτε το αρχείο index.html στον κειμενογράφο σας.

Προσθέστε τις ετικέτες <div> και </div> όπως στο ακόλουθο παράδειγμα:

  <div align=right>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  </div>

Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας

Ελέγξτε τις αλλαγές

Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να εμφανίζονται.

Στη συνέχεια: 22.Πίνακες