HTML
Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση ιστοσελίδων στο Web ΔΕΝ ΕΊΝΑΙ ΓΛΩΣΣΑ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ ΑΛΛΑ ΜΙΑ ΠΕΡΙΓΡΑΦΙΚΗ ΓΛΩΣΣΑ ΕΝΑΣ ΕΙΔΙΚΟΣ ΤΡΟΠΟΣ ΓΡΑΦΗΣ ΚΕΙΜΕΝΟΥ
Η επέκταση των αρχείων HTML, είναι “.html” ή “.htm”. τα κείμενα των ιστοσελίδων και οι ετικέτες (tags), οι οποίες «μεταφράζονται» από τον φυλλομετρητή ιστοσελίδων (Web browser) και υποδεικνύουν τα στοιχεία, τη δομή και μορφοποίηση των ιστοσελίδων.
Γιατί να χρησιμοποιώ HTML ;
ΤΙ ΕΊΝΑΙ ΟΙ ΕΤΙΚΕΤΕΣ; Οι εντολές της HTML που εμφανίζονται με τη μορφή ετικετών μέσα στα HTML αρχεία, συνήθως εμφανίζονται ανά ζευγάρι : η πρώτη εμφάνιση της ετικέτας προσδιορίζει το σημείο αρχής εκτέλεσης της εντολής, ενώ η δεύτερη, το τέλος της.
Τι είναι οι ετικέτες; Πώς είναι μια ετικέτα ; Οι ετικέτες ελέγχουν την δομή και την μορφή του κειμένου της ιστοσελίδας. Πώς είναι μια ετικέτα ; Οι HTML ετικέτες γράφονται ανάμεσα στα σύμβολα < και > <όνομα-ετικέτας> Π.χ. <p>
Οι περισσότερες HTML ετικέτες αποτελούνται από μια ετικέτα αρχής και μια ετικέτα τέλους και ανάμεσα σε αυτές υπάρχει το κείμενο που χαρακτηρίζεται από τις ετικέτες αυτές. Η ετικέτα τέλους περιέχει τον χαρακτήρα / πριν το όνομα της ετικέτας. πχ. <b> Κείμενο </b>
Κάθε HTML αρχείο πρέπει να περιλαμβάνει τα ακόλουθα στοιχεία : HTML: Η ετικέτα αυτή υποδηλώνει στον browser, ότι πρόκειται για ένα HTML αρχείο. Τα αρχεία HTML, ξεκινούν πάντα με <HTML> και κλείνουν με </HTML> HEAD: Η ετικέτα αυτή χρησιμοποιείται για να προσδιορίσει την επικεφαλίδα του αρχείου. Στην επικεφαλίδα του αρχείου μπαίνει ο τίτλος της ιστοσελίδας TITLE: Η ετικέτα αυτή προσδιορίζει τον τίτλο της ιστοσελίδας (αυτό που φαίνεται σαν περιγραφή της ιστοσελίδας στη γραμμή Τίτλου του φυλλομετρητή ιστοσελίδων, όταν φορτωθεί η ιστοσελίδα). BODY: Η ετικέτα αυτή προσδιορίζει το κυρίως σώμα της ιστοσελίδας. Όλο το κείμενο, οι δεσμοί, οι εικόνες κ.ά., πρέπει να βρίσκονται στο κομμάτι αυτό του αρχείου.
<html> <head> <title> Τίτλος του εγγράφου Η δομή μιας ιστοσελίδας, στην πλέον βασική της μορφή, είναι όπως παρακάτω : <html> <head> <title> Τίτλος του εγγράφου </title> </head> <body> Σώμα του εγγράφου </body> </html>
Σε κάθε ιστοσελίδα, μπορούμε να καθορίσουμε 5 διαφορετικά χρώματα, μέσω της ακόλουθης εντολής : <body bgcolor=#XXXXXX text=#ΧΧΧΧΧΧ link=#ΧΧΧΧΧΧ alink=#ΧΧΧΧΧΧ vlink=#ΧΧΧΧΧΧ>, όπου X μπορεί να είναι οποιαδήποτε τιμή μεταξύ 0 και F (δεκαεξαδικό σύστημα αρίθμησης). bgcolor καθορίζει το χρώμα του φόντου της ιστοσελίδας Text καθορίζει το χρώμα του κυρίως κειμένου Alink Link καθορίζει το χρώμα ενός δεσμού, τον οποίο δεν έχουμε επισκεφθεί (Active Link) καθορίζει το χρώμα ενός δεσμού, ο οποίος είναι ενεργός (επιλεγμένος) Vlink (Visited Link) καθορίζει το χρώμα ενός δεσμού, τον οποίο έχουμε ήδη επισκεφθεί
ΑΣΚΗΣΗ ΑΝΟΙΞΤΕ NOTEPAD ΤΩΝ WINDOWS ΓΡΑΨΤΕ ΤΙΣ ΠΑΡΑΚΑΤΩ ΕΝΤΟΛΕΣ HTML <head> <title> ΤΟ ΠΡΩΤΟ ΜΟΥ ΜΑΘΗΜΑ ΣΤΗΝ HTML </title> </head> <body> ΠΡΟΤΥΠΟ ΠΕΙΡΑΜΑΤΙΚΟ ΛΥΚΕΙΟ ΑΝΑΒΡΥΤΩΝ </body> </html> ΑΠΟΘΗΚΕΥΣΤΕ ΤΟ ΑΡΧΕΙΟ ΜΕ ΤΟ ΟΝΟΜΑ First.html ΑΝΟΙΞΤΕ ΤΟ ΑΡΧΕΙΟ ΑΥΤΟ ΜΕ ΕΝΑΝ BROWSER
Μια πολύ απλή σελίδα σε HTML <head> <title>Page title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Επεξεργασία κειμένου Έντονο κείμενο Υπογράμμιση Πλάγια γραφή Αλλαγή χρώματος Χρώματα στην HTML Σύνδεσμοι Επιλογή γραμματοσειράς (και μεγέθους) κλπ
Ιδιότητες κειμένου στην HTML παράδειγμα link <bold> παράδειγμα </bold> <underline> παράδειγμα </underline> <italic> παράδειγμα </italic> <font color="red">παράδειγμα</font> <a href=“http://www...”> link </a> …
Πίνακες στην HTML Δημιουργία πίνακα Ιδιότητες πίνακα Δημιουργία γραμμής και στήλης Στοίχιση πίνακα Περίγραμμα πίνακα Ιδιότητες πίνακα Μέγεθος πίνακα (με βάση τα pixel ή ποσοστό) Μέγεθος γραμμής (με βάση τα pixel ή ποσοστό) Μέγεθος στήλης (με βάση τα pixel ή ποσοστό)
Πίνακες στην HTML Δημιουργία πίνακα: <table> και Δημιουργία γραμμής στον πίνακα <tr> και τερματισμός με </tr> Δημιουργία στήλης μέσα στη γραμμή <td> και τερματισμός με </td>
Παράδειγμα πίνακα στην HTML <table> <tr> <td> a1 </td> <td> a2 </td> <td> a3 </td> </tr> <td> b1 </td> <td> b2 </td> <td> b3 </td> </table> Εμφανίζεται ως εξής: a1 a2 a3 b1 b2 b3
Εισαγωγή εικόνας στην σελίδα <img src="bird.jpg" width="100" height="30" border="2“ /> Με τον παραπάνω κώδικα προσθέτουμε στην σελίδα μας την εικόνα με όνομα bird.jpg, η οποία έχει μήκος 100 pixels και ύψος 30 pixels και το περίγραμμα της έχει πάχος 2 pixels
Λίστες Στην σελίδα μας μπορούμε να εισάγουμε Λίστες. Στην σελίδα μας μπορούμε να εισάγουμε Λίστες. Μια λίστα είναι κάπως έτσι: Coffee Tea Milk
Μη αριθμημένη λίστα <ul> <li> Coffee </li> <li> Tea < /li> <li> Milk </li> </ul> Η ετικέτα <ul>εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το ul είναι τα δύο πρώτα γράμματα από το Unordered List. Η ετικέτα <li> προσθέτει γραμμές στην λίστα.
Αριθμημένη λίστα <ol> <li> Coffee </li> <li> Tea </li> <li> Milk </li> </ol> Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας, Το ol είναι τα δύο πρώτα γράμματα από το Ordered List.