Βασική δομή html κειμένου
<!DOCTYPE html> <html> <head> <title>Τίτλος</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="διεύθυνση_style"> </head> <body> </body> </html>
| Εισαγωγικές εντολές | |
|---|---|
| <!DOCTYPE html> | Ορίζει τον τύπο του κειμένου |
| <html> | Το tag που περιλαμβάνει ολο τον κώδικα html |
| Πεδίο head | |
|---|---|
| <head> | Η κεφαλή,περιλαμβάνει τις παρακάτω χρήσιμες πληροφορίες |
| <title> | Ο τίτλος της σελίδας |
| <meta charset="utf-8" > | Η κωδικοποίηση χαρακτήρων |
| <link rel="stylesheet" type="text/css" href="διεύθυνση"> | Σύνδεσμος προς ένα εξωτερικό stylesheet |
| Βασικά body tags | |
|---|---|
| <body> | Είναι το κύριο σώμα της σελίδας |
| <h1>,<h2>,<h3>,<h4>,<h5> | Επικεφαλίδες |
| <p> | Παράγραφος |
| <b>ή<strong> | Έντονα γράμματα |
| <em>ή<i> | Πλάγια γράμματα |
| <del> | |
| <sub> | Κείμενο σε μορφήδείκτη |
| <a href="διεύθυνση"> | Σύνδεσμος προς "διεύθυνση" |
| <code>ή<samp>ή <pre> | Για εντολές/κώδικα To <pre> εμφανίζει κενά και αλλαγές γραμμής όπως είναι γραμμένες |
| Λίστες | |
|---|---|
| <ul> | Μη αριθμημένη λίστα |
| <ol> | Aριθμημένη λίστα |
| <li > | Στοιχείο λίστας Χρησιμοποιείται μέσα σε <ul> ή <ol> |
| <dl> | Περιγραφική λίστα <dt>Τίτλος </dt> <dd>Περιγραφή<dd> |
| Πίνακες | |
|---|---|
| <table> | Πίνακας |
| <tr> | Γραμμή Πίνακα |
| <td> | Κελί Πίνακα |
| <th> | Κελί επικεφαλίδας |
| Βασικοί κανόνες CSS | |
|---|---|
| background-color | Χρώμα φόντου |
| color | Χρώμα γραμματοσειράς |
| font-family | Arial|Times|Sans|Serif|... Οικογένεια γραμματοσειράς |
| font-size | 120%|16px|... Μέγεθος γραμματοσειράς |
| font-weight | bold|bolder Πάχος γραμματοσειράς |
| word-spacing | Απόσταση λέξεων μεταξύ τους |
| text-align | left|right|center|justify Στοίχιση κειμένου |
| vertical-align | top|bottom|middle Κατακόρυφη στοίχιση |
| height | Ύψος αντικειμένου |
| width | Πλάτος αντικειμένου |
| border | πάχος τύπος χρώμα περιγράμματος πχ border:1px solid red; |
| outline | Εξωτερική γραμμή, εκτός του border. Για συντομία δηλώνεται όπως το border (πάχος, τύπος, χρώμα). |
| border-collapse | Χρησιμοποείται στα tables και δηλώνει αν τα borders των κελιών
ταυτίζονται ή κάθε κελί έχει το δικό του. Τιμές:
|
| padding | Εσωτερικό περιθώριο (μέσα από το border) |
| margin | Εξωτερικό περιθώριο (έξω από το border) |
| text-transform | uppercase (Κεφαλαία) |
| display | Καθορίζει τον τρόπο εμφάνισης ενός tag. Βασικές τιμές:
|