2. Τι είναι η HTML?HyperTextMarkup LanguageΔεν είναι γλώσσα προγραμματισμού, είναι markup γλώσσα.Μια markup γλώσσα είναι ένας ειδικός τρόπος γραφής ενός αρχείου, χρησιμοποιώντας tags.Κάθε ιστοσελίδα είναι ένα HTML αρχείο. Το αρχείο αυτό αποτελείται από tags που περιγράφουν την ιστοσελίδα.Δουλειά ενός browser είναι να διαβάσει το αρχείο και να σχεδιάσει την ιστοσελίδα.
3. Βασική Δομή της HTMLΚάθε tag έχει ένα opening tagκαι (πιθανώς) ένα ending tag.Ανάμεσα στο opening και στο ending υπάρχει το περιεχόμενο του tag.Μέσα στο περιεχόμενο μπορεί να υπάρχουν άλλα tags ή μόνο απλό κείμενο.Κάθε tag αντιπροσωπεύει ένα διαφορετικό αντικείμενο που κάνει διαφορετικές λειτουργίες.Κάθε tag μπορεί να έχει και κάποια attributesπου το περιγράφουν.
4. Βασική Δομή της HTML<nameattribute=“value”></name><nameattribute=“value” /><div id=“header”> <p>Click <a href=“www.studentguru.gr”>here</a> to go to SG!</p><br /> <imgsrc=“sample.jpg” alt=“image” /></div>
5. Βασική Δομή της HTMLΚάθε HTML σελίδα ξεκινάει με το tag <html> και τελειώνει με το </html>.Μέσα στην σελίδα υπάρχουν δύο βασικές περιοχές που ορίζονται με τα tags <head></head> και <body></body>.ΌΛΑ τα tags βρίσκονται μέσα σε αυτές τις περιοχές, τίποτε δεν ορίζεται έξω από αυτές.Άλλα tags μπαίνουν στο <head> και άλλα στο <body>.
7. Tagsστην περιοχή <head>Τα tags της περιοχής <head> είναι εντολές προς τον browser για το που βρίσκονται αρχεία CSS και script, καθώς και metadata.Μερικά από αυτά τα tags:<title>First Steps in Web Development</title><linkrel="shortcut icon” href=“logo.ico" /><meta name=“description” content=“Tutorial Page” /><meta name=“author” content=“Kostas Voulgaris” /><meta name=“keywords” content=“HTML, CSS, JS” /><meta http-equiv=“Content-Type” content=“text/html;charset=ISO-8859-1” />
8. Tags στην περιοχή <body>Τα tags της περιοχής <body> είναι αντικείμενα τα οποία ο browser θα κάνει render στην οθόνη μας.<div></div> Ορίζει μια περιοχή της σελίδας.<p></p>Ορίζει μια παράγραφο μέσα στην σελίδα.<span></span> Ξεχωρίζει ένα κομμάτι κειμένου.<br /> Το new line της HTML.<h1></h1>, <h2></h2> … <h6></h6> Επικεφαλίδες κομματιών της σελίδας.<strong></strong> και<em></em>
9. Tags στην περιοχή <body>Εικόνες:Εικόνες στην HTML βάζουμε με το tag img.<imgsrc=“./sample.jpg” alt=“Image” />Srcείναι το urlόπου βρίσκεται η εικόναAlt είναι ένα κείμενο που θα εμφανιστεί αν δεν βρεθεί η εικόνα.
10. Tags στην περιοχή <body>Σύνδεσμοι:Σύνδεσμοι σε άλλες σελίδες ορίζονται με το tag a.<a href=“../index.html”>Home Page</a>Στο attribute hrefδίνουμε το url (απόλυτο ή και σχετικό) της σελίδας στην οποία θα μας στέλνει.Με το attribute targetορίζουμε αν η νέα σελίδα θα ανοίξει στο ίδιο παράθυρο ή σε καινούργιο tab.
11. Tags στην περιοχή <body>Λίστες:<ul></ul>Unordered list, κάθε στοιχείο έχει ένα σύμβολο δίπλα του.<ol></ol> Ordered list, κάθε στοιχείο έχει ένα αύξοντα αριθμό δίπλα του.Κάθε στοιχείο μιας λίστας ορίζεται με το tag <li></li>
12. Tags στην περιοχή <body>Tables:Ορίζονται με το tag <table></table>.Κάθε γραμμή ορίζεται με το tag <tr></tr>.Κάθε κελί μέσα σε μια γραμμή με το tag <td></td>.Με το <th></th>ορίζουμε επικεφαλίδα σε μια κολώνα.<table border=“1”> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr></table>
