html στοιχεία επιπέδου block και inline

Κάθε στοιχείο της html έχει ένα προκαθορισμένο τρόπο παρουσίασης. Ο τρόπος παρουσίασης εξαρτάται από το τύπο του html στοιχείου. Για τα περισσότερα στοιχεία της HTML ο τρόπος παρουσίασης είναι είτε block ή inline

Στοιχεία επιπέδου block

Ένα στοιχείο επιπέδου block πάντα ξεκινά σε νέα γραμμή και καταλαμβάνει ολόκληρο το διαθέσιμο πλάτος. Δηλαδή επεκτείνεται τόσο προς τα δεξιά όσο και προς τα αριστερά και καταλαμβάνει όλη τη διαθέσιμη έκταση.

Το σττοιχείο <div> είναι στοιχείο επιπέδου block.

Ακολουθούν παραδείγματα στοιχείων επιπέδου block:
<div>
<h1> – <h6>
<p>
<form>

Στοιχεία επιπέδου inline

Ένα στοιχείο επιπέδου inline δεν ξεκινά σε μια νέα γραμμή και καταλαμβάνει μόνο το πλάτος που του είναι απραίτητο.

Ένα παράδειγμα στοιχείου επιπέδου inline είναι το στοιχείο <span> μέσα σε μια παράγραφο.

Ακολουθούν παραδείγματα στοιχείων επιπέδου inline:

<span>
<a>
<img>

Το στοιχείο <div>

Το στοιχείο <div> χρησιμοποιείται συχνά ως χώρος τοποθέτησης άλλων HTML στοιχείων.

Το στοιχείο <div> δεν έχει υποχρεωτικά χαρακτηριστικά, συνηθίζεται όμως να χρησιμοποιούμε πάντα το style και το class.

Όταν χρησιμοποιείται σε συνδυασμό με το CSS, το στοιχείο <div> μπορεί να χρησιμοποιηθεί για να μορφοποιήσουμε κομμάτια περιεχομένου. Αυτό γίνεται στο παράδειγμα που ακολουθεί:

————————————
<!DOCTYPE html>
<html>
<body>

<div style=»background-color:black;color:white;padding:20px;»>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

</body>
</html>
————————————
Εδώ βλέπουμε το αποτέλεσμα:

το στοιχείο div

Το στοιχείο <span>

Το στοιχείο <span> χρησιμοποιείται ως το σημείο στο οποίο θα τοποθετήσουμε κείμενο.

Το στοιχείο <span> δεν έχει υποχρεωτικά χαρακτηριστικά, συνηθίζεται όμως να χρησιμοποιούμε πάντα το style και το class.

Όταν χρησιμοποιείται σε συνδυασμό με το css, το στοιχείο <span> μπορεί να χρησιμοποιηθεί για να μορφοποιήσουμε κομμάτια κειμένου. Αυτό γίνεται στο παράδειγμα που ακολουθεί:

————————————
<!DOCTYPE html>
<html>
<body>

<h1>My <span style=»color:red»>Important</span> Heading</h1>

</body>
</html>
————————————
Και προκύπτει το εξής:

το στοιχείο span

Στοιχεία block και inline στην προώθηση ιστοσελίδων

Τα στοιχεία block και inline είναι ίσως η χρησιμοότερη γνώση της html για την προώθηση ιστοσελίδων. Η καλή γνώση της τοποθέτησης στοιχείων μέσα στο κείμενο ή στη σελίδα μας επιτρέπουν να εισάγουμε με διακριτικό τρόπο την πληροφορία για την προωθούμενη ιστοσελίδα. Όταν προωθούμε μια ιστοσελίδα τότε πρέπει να γράψουμε πολλά άρθρα για αυτή την ιστοσελίδα και να τα τοποθετήσουμε σε σημαντικά blog μεγάλης κυκλοφορίας. Όσο καλύτερα κάνουμε αυτή την τοποθέτηση, τόσο περισσότερο θα μας επιτρέψουν να εισάγουμε. Άρα τόσο καλύτερα θα πάει η προώθηση της ιστοσελίδας μας. Εδώ πρέπει να επισημάνουμε οτι η καταχώρηση περιεχομένου σε blog μεγάλης επισκεψιμότητας απαιτεί εμπειρία και καλό είναι να την αναθέσουμε σε μια εταιρία με μεγάλη εμπειρία στην προώθηση ιστοσελίδων όπως είναι η dreamweaver.gr