White Space και BR tag

Δημοσιεύτηκε από τον alex


Μέχρι στιγμής έχουμε μάθει την html, title, body και p ετικέτα. Ας δούμε τώρα λοιπόν πως πως διαχειρίζεται η html τα κενά ή αλλιώς white space.

Για την ανάγκες του συγκεκριμένου βοηθήματος, έχω περάσει ακόμη 2 παραγράφους με κείμενο.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>
     <p>some text here</p>
     <p>and some more here</p>
</body>

</html>

Ας δούμε τι θα γίνει εάν πάω πιο κάτω τη δεύτερη παράγραφο και έπειτα αποθηκεύσω τις αλλαγές στο έγγραφο μου και κάνω ανανέωση (refresh) στον περιηγητή μου.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>

 

 


     <p>some text here</p>
     <p>and some more here</p>
</body>

</html>

Θα παρατηρήσατε ότι δεν πραγματοποιήθηκε καμία αλλαγή στην ιστοσελίδα σας.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>

 

 


     <p>some               text                here</p>
     <p>and some more here</p>
</body>

</html>

Όπως είδατε, δεν έγινε καμία αλλαγή πάλι.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>

 

 


     <p>some        

                         text          

                             

 

           here</p>
     <p>and some more here</p>
</body>

</html>

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

Ας δούμε τώρα πως μπορούμε να διαχωρίσουμε μία παράγραφο και να ξεκινήσει σε νέα γραμμή. Θα πάω μετά τη λέξη text της δεύτερης παραγράφου και θα εισάγω την ετικέτα <br />. Έπειτα θα κάνω κλικ στο αποθήκευση και θα κάνω ανανέωση τον περιηγητή μου.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>

 

 


     <p>some        

                         text <br />         

                             

 

           here</p>
     <p>and some more here</p>
</body>

</html>

Θα δούμε πως η παράγραφος έχει χωριστεί και η συγκεκριμένη πρόταση πήγε από κάτω. Εάν τώρα θέλω να προσθέσω περισσότερες γραμμές μέσα στην ίδια την παράγραφο ή έξω από αυτή, μπορώ απλά να εισάγω περισσότερες ετικέτες <br />.

Θα διαπιστώσατε επίσης, ότι η br ετικέτα δεν έρχεται σε ζεύγος, όπως οι p, body και title ετικέτες. Για αυτό το λόγο είναι απαραίτητο να βάλουμε στο τέλος της μία μπροστινή κάθετο, προκειμένου να δώσουμε να καταλάβει ο περιηγητής μας, ότι εδώ τελειώνει η συγκεκριμένη ετικέτα.

Leave a Reply

Your email address will not be published.

 
 
 
εκπαιδευτικά βίντεο

Εκπαιδευτικά Βίντεο

Εκπαιδευτείτε μέσα από τα εντελώς δωρεάν βίντεο μας, πάνω σε web τεχνολογίες όπως HTML, CSS, Javascript και PHP.

 
δωρεάν themes

Δωρεάν Themes

Στη Supremo Hosting προσφέρουμε εντελώς δωρεάν premium wordpress themes για τις ανάγκες της ιστοσελίδας σας!

 
κατασκευή ιστοσελίδων

Κατασκευή Ιστοσελίδων

Επωφεληθείτε από τις εξαιρετικά χαμηλές τιμές που προσφέρουμε πάνω στην κατασκευή ιστοσελίδων και eshop.

cards