Μάθημα 1 > Δομή HTML Αυτός είναι ο κώδικας από το προηγούμενο παράδειγμα: <html> <title>hello world!</title> Hello world! Αυτή η σελίδα εμφανίζει απλά το μήνυμα Hello world! στο πρόγραμμα περιήγησής σας. Ας ρίξουμε μια ματιά στη δομή της σελίδας. Η βασική δομή του εγγράφου αποτελείται από τις ακόλουθες τρεις ετικέτες: html head body Στον κώδικα μας βλέπουμε ότι η ετικέτα html περιέχει τις ετικέτες head και body. Η πρώτη είναι ο γονέας και οι άλλες παιδιά. Μπορείτε επίσης να φανταστείτε τη δομή της σελίδας, σαν ένα δέντρο.. Η ετικέτα html είναι το ίδιο το δέντρο, και κάθε άλλη ετικέτα είναι ένα κλαδί σε αυτό το δέντρο. Σαν αποτέλεσμα, μπορεί να υπάρχει μόνο ένα δέντρο, αλλά ένα κλαδί μπορεί να έχει από κανένα έως πολλά άλλα κλαδιά. Η ετικέτα head περιλαμβάνει πληροφορίες για την ίδια την σελίδα. Για παράδειγμα τον τίτλο της, την κωδικοποίηση, τον εξωτερικό κώδικα ή τα στυλ που πρέπει να συμπεριληφθούν κτλ. Μην ανησυχείτε αν δεν γνωρίζετε τι είναι η κωδικοποίηση ή τα εξωτερικά αρχεία κώδικα. Θα αναφερθούμε σε αυτά αργότερα. Από την άλλη, η ετικέτα body περιλαμβάνει οτιδήποτε θα εμφανιστεί στη σελίδα. Γράψαμε το μήνυμα Hello World! και αυτό ακριβώς εμφανίστηκε. Κενά διαστήματα Τα κενά διαστήματα είναι χαρακτήρες που αντιπροσωπεύουν οριζόντιο ή κάθετο χώρο. Για παράδειγμα ο χαρακτήρας του διαστήματος, της αλλαγής γραμμής, της στηλοθέτησης κτλ. Στην HTML τα κενά διαστήματα αγνοούνται. Για να το καταλάβουμε καλύτερα ας μελετήσουμε τον παρακάτω κώδικα: <html> <title></title> Hello World!
Μπορούμε να δούμε ότι αν και έχουμε πολλές κενές γραμμές, διαστήματα και στηλοθέτες στο κείμενο, αυτό εμφανίζεται ακριβώς όπως και πριν: Hello World! Άσκηση 1 Τώρα που γνωρίζετε την βασική δομή ενός HTML αρχείου, γράψτε κώδικα χρησιμοποιώντας αυτή τη βασική δομή. Δεν χρειάζεται να έχετε ετικέτα title, ή κείμενο μέσα στο σώμα της σελίδας. Μάθημα 1 > Τίτλος σελίδας Μια σελίδα τίτλου ορίζει το κείμενο που εμφανίζεται στη γραμμή τίτλου του περιηγητή σας. <html> <title>η σελίδα μου</title> Hello world! Με αυτό τον κώδικα, το κείμενο που θα εμφανίζεται στη γραμμή τίτλου θα είναι Η σελίδα μου. Κάντε κλικ εδώ για να ρίξετε μια ματιά. Τώρα, αλλάξτε τον τίτλο της σελίδας του ακόλουθου κώδικα σε οτιδήποτε θέλετε. Μάθημα 1 > Σχόλια Ρίξτε μια ματιά στον παρακάτω κώδικα. <html> <title>πώς βάζουμε σχόλια</title> <!-- Αυτό είναι ένα σχόλιο ΗTML, και θα αγνοηθεί από τον φυλλομετρητή σας --> Πώς βάζουμε σχόλια σε μια σελίδα HTML! Πέρα από τον κώδικα, έχουμε γράψει ένα μικρό μήνυμα που εξηγεί τα σχόλια. Αυτές οι μικρές (ή μεγάλες σε ορισμένες περιπτώσεις) περιγραφές ονομάζονται σχόλια. Τα σχόλια δεν εκτελούνται και αγνοούνται από το πρόγραμμα περιήγησης. Αυτό που κάνουν, είναι να μας βοηθήσουν να κατανοήσουμε μπλοκ κώδικα που κάποιος άλλος, ή ακόμη και εμείς έχουμε γράψει. Αν θέλουμε να βάλουμε ένα σχόλιο πολλών γραμμών θα πρέπει να το εσωκλείσουμε σε <!-- και -- >
<!-- This is a comment --> Τώρα, μετατρέψτε το κείμενο Hello World σε σχόλιο. <html> <title>hello world!</title> Hello world! Μάθημα 1 > Block και inline στοιχεία Πριν προχωρήσουμε πρέπει να μιλήσουμε για τα δύο βασικά είδη των στοιχείων δηλαδή τα στοιχεία block και τα στοιχεία inline. Block στοιχεία Block στοιχεία είναι τα στοιχεία που καταλαμβάνουν όλο το διαθέσιμο πλάτος του γονικό στοιχείο τους. Προκαλούν επίσης την δημιουργία μιας νέας γραμμής πριν και μετά από τη θέση που έχουν τοποθετηθεί. Το div στοιχείο είναι ένα στοιχείο μπλοκ. Αυτό σημαίνει ότι εάν τοποθετήσετε το ένα μετά το άλλο, θα εμφανίζονται το ένα κάτω από το άλλο και όχι δίπλα-δίπλα. Ρίξτε μια ματιά παρακάτω. <div>div 1</div> <div>div 2</div> <div>div 3</div> <div>div 4</div> Το παραπάνω παράδειγμα θα εμφανίσει: DIV 1 DIV 2 DIV 3 DIV 4 Στοιχεία Inline Στοιχεία inline είναι τα στοιχεία που καταλαμβάνουν μόνο τόσο πλάτος, όσο απαιτείται από το περιεχόμενο τους. Επίσης, δεν προκαλούν την αλλαγή γραμμής πριν ή μετά. Το span στοιχείο είναι ένα στοιχείο inline. Αυτό σημαίνει ότι εάν τοποθετήσετε το ένα μετά το άλλο, θα εμφανίζονται το ένα δίπλα στο άλλο. Ρίξτε μια ματιά παρακάτω. <span>span 1</span> <span>span 2</span> <span>span 3</span> <span>span 4</span> Το παραπάνω παράδειγμα θα εμφανίσει: SPAN 1 SPAN 2 SPAN 3 SPAN 4 Τώρα, τοποθετήστε ένα στοιχείο div με το κείμενο Hello, και ένα στοιχείο span με το κείμενο World.
<html> <title>hello world!</title> Μάθημα 2 > Επικεφαλίδες Λοιπόν, έφτασε η ώρα για να γνωρίσετε τις επικεφαλίδες. Επικεφαλίδες είναι στοιχεία block που μας παρέχουν έναν τρόπο για να οργανώσουμε το περιεχόμενό μας. Υπάρχουν έξι (6) διαθέσιμες επικεφαλίδες. Παρακάτω μπορούμε να τις δούμε Αυτό... <h1>επικεφαλίδα 1</h1> <h2>επικεφαλίδα 2</h2> <h3>επικεφαλίδα 3</h3> <h4>επικεφαλίδα 4</h4> <h5>επικεφαλίδα 5</h5> <h6>επικεφαλίδα 6</h6>... θα μας δώσει αυτό: Επικεφαλίδα 1 Επικεφαλίδα 2 Επικεφαλίδα 3 Επικεφαλίδα 4 Επικεφαλίδα 5 Επικεφαλίδα 6 Κάθε επικεφαλίδα έχει διαφορετική απόσταση και μέγεθος γραμματοσειράς. Ανάλογα με τις ανάγκες μας, θα πρέπει να χρησιμοποιήσουμε την αντίστοιχη επικεφαλίδα. Τώρα, βεβαιωθείτε ότι η λέξη Hello εμφανίζεται ως επικεφαλίδα 2, και η λέξη world ως επικεφαλίδα 4.
<html> <title>hello world!</title> Hello world Μάθημα 2 > Παράγραφοι Οι παράγραφοι είναι στοιχεία block που περιέχουν κείμενο. Όταν θέλετε να εμφανίσετε ένα κείμενο, θα πρέπει το εσωκλείετε στις ετικέτες <p></p>. Δώστε προσοχή στη λέξη πρέπει. Τοποθετώντας το κείμενο σε παραγράφους, δεν είναι υποχρεωτικό, αλλά είναι μια καλή πρακτική. <p>αυτή είναι μια παράγραφος</p> Εισάγετε δύο παραγράφους στο κείμενό σας. Η πρώτη θα πρέπει να περιέχει το κείμενο Θα πιω απόψε και η δεύτερη το φεγγάρι. <html> <title>τραγούδι</title> Μάθημα 2 > Στοίχιση παραγράφων Έχουμε αναφέρει ότι τα στοιχεία block καταλαμβάνουν όλο το διαθέσιμο πλάτος του γονικό στοιχείο τους. Αυτό σημαίνει ότι αν βάλουμε μια παράγραφο ως παιδί μέσα στο σώμα, το πλάτος της παραγράφου θα ταιριάζει με το πλάτος του σώματος. Αυτή είναι μια ευκαιρία για να μάθουμε σχετικά με τις επιλογές ευθυγράμμισης του κείμενου μέσα σε μια παράγραφο. Για το λόγο αυτό, θα χρησιμοποιήσουμε το χαρακτηριστικό align. Χαρακτηριστικά είναι επιλογές που έχουν οριστεί για μια συγκεκριμένη ετικέτα. Ρίξτε μια ματιά παρακάτω. <!-- Αυτή είναι η πρώτη φορά που βλέπουμε ένα χαρακτηριστικό--> <p align="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> Ένα χαρακτηριστικό τοποθετείται μέσα στην ετικέτα, και η τιμή του πάντα περικλείεται με μονά ή διπλά εισαγωγικά. Το παραπάνω παράδειγμα ορίζει την ευθυγράμμιση του περιεχομένου του στοιχείου αριστερά. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Μπορείτε να δείτε ότι το κείμενο στοιχίζεται στα αριστερά. Υπάρχουν τέσσερις διαθέσιμες ευθυγραμμίσεις. left (αριστερή. Βλέπε το προηγούμενο παράδειγμα) right (δεξιά) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. center (στο κέντρο) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du is aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. justify (πλήρης στοίχιση) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Τώρα, βεβαιωθείτε ότι το κείμενο της παραγράφου στο παρακάτω σενάριο είναι πλήρως στοιχισμένο. Ας υποθέσουμε ότι θέλουμε να μορφοποιήσουμε την παράγραφο μας, κάπως έτσι: Γραμμή 1 Γραμμή 2 Γραμμή 3 Το πρώτο πράγμα που έρχεται στο μυαλό είναι να χτυπήσουμε το πλήκτρο enter στη θέση όπου θέλουμε την αλλαγή γραμμής. Κάτι σαν αυτό δηλαδή: <p> Γραμμή 1 Γραμμή 2 Γραμμή 3 </p>
Αλλά αν θα εκτελέστει αυτό στον περιηγητή μας, το αποτέλεσμα θα είναι: Γραμμή 1 Γραμμή 2 Γραμμή 3... τα πάντα θα εμφανίζονται στην ίδια γραμμή. Γιατί; Λόγω των κενών διαστημάτων που αναφέραμε σε προηγούμενο μάθημα. Για να εισάγετε μια αλλαγή γραμμής, θα πρέπει να χρησιμοποιήσετε την ετικέτα br. Ο κώδικας μας θα γίνει κάπως έτσι: <p> Γραμμή 1<br /> Γραμμή 2<br /> Γραμμή 3 </p>... και θα πάρουμε το επιθυμητό αποτέλεσμα μας: Γραμμή 1 Γραμμή 2 Γραμμή 3 Σημείωση Η ετικέτα αλλαγής γραμμής ονομάζεται επίσης ένα κενό στοιχείο. Τα κενά στοιχεία ορίζονται από δύο σημαντικά χαρακτηριστικά. 1. Δεν μπορεί να περιέχουν οποιοδήποτε κείμενο 2. Δεν μπορούν να έχουν μια ετικέτα κλεισίματος. Αυτό σημαίνει ότι δεν μπορείτε να έχετε <br></br> Αλλά έχουμε μάθει ότι όλες οι ετικέτες πρέπει να είναι κλειστές. Λοιπόν, αυτές οι ετικέτες κλείνουν χρησιμοποιώντας την κάθετο (/). Με αυτό τον τρόπο, η ετικέτα ανοίγει και κλείνει ταυτόχρονα, όπως παρακάτω: <br /> Μάθημα 3 > Μορφοποίηση κειμένου Θα υπάρξουν φορές που θα χρειαστεί να υπογραμμίσετε κάτι, ή να το γράψετε σε έντονη ή πλάγια γραφή. Υπάρχουν τρεις διαφορετικές και εύκολο να θυμάστε ετικέτες για αυτό. <b> έντονα (bold) <i> πλάγια (italic) <u> υπογραμμισμένα (underline) <b>αυτό</b> είναι κείμενο γραμμένο με έντονη γραμματοσειρά.<br /> <i>αυτό</i> είναι κείμενο γραμμένο με πλάγια γραμματοσειρά.<br /> <u>αυτό</u> είναι κείμενο γραμμένο με υπογραμμισμένη γραμματοσειρά....θα μας δώσει: Αυτό είναι κείμενο γραμμένο με έντονη γραμματοσειρά. Αυτό είναι κείμενο γραμμένο με πλάγια γραμματοσειρά. Αυτό είναι κείμενο γραμμένο με υπογραμμισμένη γραμματοσειρά.
Μάθημα 3 > Γραμματοσειρά κειμένου Εκτός από το έντονο και πλάγιο, η HTML μας παρέχει έναν τρόπο να ορίσουμε και τη γραμματοσειρά του κειμένου μας. Για παράδειγμα, αυτή είναι η Arial, αυτή είναι η Tahoma, αυτή είναι η Times New Roman και αυτή είναι η Courier New. Για να ρυθμίσουμε την επιθυμητή γραμματοσειρά, χρησιμοποιούμε την ετικέτα γραμματοσειράς font. Αλλά μόνη της η ετικέτα δεν είναι αρκετή. Χρειαζόμαστε ένα χαρακτηριστικό (θυμηθείτε το χαρακτηριστικό ευθυγράμμισης της παραγράφου align ) για να ορίσουμε το όνομα της γραμματοσειράς. Αυτό το χαρακτηριστικό είναι το face. Χρησιμοποιώντας το χαρακτηριστικό αυτό, έχουμε το ακόλουθο παράδειγμα. <font face="times New Roman">Αυτό το κείμενο είναι γραμμένο με γραμματοσειρά Times New Roman</font> Και μας εμφανίζει: Αυτό το κείμενο είναι γραμμένο με γραμματοσειρά Times New Roman Σημαντική σημείωση Δεν μπορείτε να χρησιμοποιήσετε οποιοδήποτε όνομα γραμματοσειράς σας αρέσει. Ο φυλλομετρητής σας χρησιμοποιεί γραμματοσειρές που είναι εγκατεστημένες στον υπολογιστή σας. Αυτό σημαίνει ότι, αν δεν έχετε τη γραμματοσειρά Times New Roman εγκατεστημένη, δεν θα είστε σε θέση να δείτε την σελίδα σωστά. Μεταξύ δημοφιλών λειτουργικών συστημάτων όπως τα Windows, Linux και Mac, υπάρχουν γραμματοσειρές που υπάρχουν σε όλα αυτά. Έτσι, αν υπάρχει μια γραμματοσειρά σε όλα αυτά την καθιστά ασφαλή για χρήση στο σχεδιασμό μας. Αυτές οι γραμματοσειρές ονομάζονται ασφαλής γραμματοσειρές ιστού. Μερικές από αυτές είναι: Arial Comic Sans MS Courier New Impact Lucida Console Tahoma Times New Roman Verdana Μάθημα 3 > Μέγεθος κειμένου Τώρα που γνωρίζουμε πώς να ορίσουμε τη γραμματοσειρά του κειμένου μας, ας δούμε πώς μπορούμε να αλλάξουμε το μέγεθός του. Θα χρησιμοποιήσουμε την ίδια ακριβώς ετικέτα, αλλά αυτή τη φορά θα προσθέσουμε την ιδιότητα μέγεθος (size). <font face="times New Roman" size="6">αυτό το κείμενο είναι γραμμένο με γραμματοσειρά Times New Roman και το μεγεθός του είναι 6.</font>
Αυτό το κείμενο είναι γραμμένο με γραμματοσειρά Times New Roman και το μεγεθός του είναι 6. Τα διαθέσιμα μεγέθη που μπορούν να χρησιμοποιηθούν είναι από 1 έως 7. Μάθημα 3 > Χρώμα κειμένου Τώρα θα δούμε κάτι λίγο πιο περίπλοκο. Τουλάχιστον θα είναι δύσκολο στην αρχή. Μόλις καταλάβουμε όμως πώς λειτουργεί θα είναι παιχνιδάκι. Θα μιλήσουμε για τα χρώματα. Υπάρχουν δύο τρόποι με τους οποίους μπορούμε να ορίσουμε ένα χρώμα. Χρησιμοποιώντας το όνομα του χρώματος π.χ. κόκινο (red) ή χρησιμοποιώντας το δεκαεξαδικό κωδικό του χρώματος (#ff0000) Χρώμα Όνομα Hex κόκκινο red #ff0000 πράσινο green #00ff00 Μπλε blue #0000ff Αυτά είναι τα τρία βασικά χρώματα από τα οποία όλα τα υπόλοιπα παράγονται. Ας εξηγήσουμε τι εννοούμε με το όνομα και με το hex. Όνομα Μπορείτε να επιλέξετε ένα χρώμα ορίζοντας το όνομά του. Για παράδειγμα, κόκκινο, πράσινο, μπλε, κίτρινο, μαύρο κλπ. Μια λίστα με τα υποστηριζόμενα ονόματα των χρωμάτων μπορείτε να βρείτε εδώ. hex απόσπασμα Wikipedia: Το δεκαεξαδικό σύστημα αρίθμησης είναι ένα θεσιακό σύστημα αναπαράστασης αριθμών. Έχει ως βάση του τον αριθμό 16. Αυτό σημαίνει ότι, σε μια σειρά ψηφίων, κάθε ψηφίο έχει αξία 16 φορές μεγαλύτερη από εκείνο που βρίσκεται αμέσως δεξιά του. Δηλαδή, οι θέσεις των ψηφίων στο δεκαεξαδικό σύστημα δηλώνουν μονάδες, 16άδες, 16Χ16=256άδες κ.ο.κ., σε αναλογία με το δεκαδικό σύστημα, όπου οι θέσεις δηλώνουν δυνάμεις του δέκα (μονάδες, δεκάδες, εκατοντάδες...). Για την αναπαράστασή του, το δεκαεξαδικό σύστημα έχει ανάγκη 16 ψηφίων. Για τα πρώτα δέκα, χρησιμοποιούνται τα ψηφία 0-9 της αραβικής αναπαράστασης του δεκαδικού συστήματος. Για να αναπαρασταθούν οι αξίες από το 10 έως και το 15, δανειζόμαστε τα πρώτα 6 κεφαλαία γράμματα του λατινικού αλφαβήτου: A, B, C, D, E και F. Οι δεκαεξαδικές αναπαραστάσεις των χρωμάτων αποτελούνται από τρείς τιμές, την τιμή του κόκκινου, του πράσινου και του μπλε. Κάθε τιμή αποτελείται από 2 ψηφία αι κυμαίνεται από την τιμή 00 ως και την ff (0-255).[00=0 και 255=ff] Κάθε δεκαεξαδική αναπαράσταση χρώματος ξεκινά με το #. Το χρώμα κόκκινο απεικονίζεται με #ff0000. κόκκινο = 255, πράσινο = 0 και μπλε = 0. Γνωρίζουμε ότι αν ανακατέψουμε κόκκινο με μπλε, θα πάρουμε το χρώμα φούξια. Χρησιμοποιώντας αυτό που έχουμε μάθει μέχρι τώρα, θα έχουμε αυτό το χρώμα, αν
ορίσουμε τις τιμές του κόκκινου σε 255, πράσινο σε 0 και το μπλε σε 255. #ff00ff = φούξια Ας επιστρέψουμε στον τρόπο με τον οποίο μπορούμε να ορίσουμε ένα χρώμα στο κείμενό μας. Μετά από τις ιδιότητες face και size, θα δούμε την του ιδιότητα color. <font color="#ff8044">αυτό το κείμενο είναι πορτοκαλί!</font> Αυτό το κείμενο είναι πορτοκαλί! Μπορείτε να διαβάσετε περισσότερα σχετικά με τα χρώματα ιστού εδώ. Μάθημα 4 > Σύνδεσμοι Επιτέλους φτάνουμε στο σημείο, όπου μπορούμε να δούμε τι κάνει τον ιστό αυτό που είναι. Οι σύνδεσμοι. Για να μπορέσετε να φτάσετε εδώ, θα πρέπει να έχετε κάνει κλικ σε πολλούς από αυτούς. Κάθε φορά που κάνετε κλικ σε έναν, είτε θα σας μεταφέρει σε μια άλλη σελίδα, η οποία είναι η πιο κοινή ενέργεια, ή μπορεί να εκτελεστεί κάτι πιο περίπλοκο (όπως η εμφάνιση μιας μικρής φόρμας). Στην HTML, μπορούμε να δημιουργήσουμε ένα σύνδεσμο, χρησιμοποιώντας την ετικέτα a. <a>κάντε κλίκ εδώ για να επισκευθείτε το google</a> Ωστόσο είναι ελλιπής. Πού θα μας οδηγήσει; Αυτό ορίζεται από την ιδιότητα href. Σημείωση: href σημαίνει «αναφορά υπερκειμένου» ('hypertext reference') Προσθέτουμε την ιδιότητα href και θέτουμε την τιμή της στη διεύθυνση URL στην οποία θέλουμε να οδηγηθούμε πατώντας το σύνδεσμο. <a href="http://www.google.com">κάντε κλίκ εδώ για να επισκευθείτε το google</a> Το αποτέλεσμα θα είναι: κάντε κλίκ εδώ για να επισκευθείτε το google Όπως μπορείτε να δείτε, ή στην πραγματικότητα, όπως δεν μπορείτε να δείτε, η διεύθυνση URL προορισμού δεν είναι πουθενά στο ορατό κείμενο. Το μόνο ορατό κείμενο, είναι το κείμενο ανάμεσα στο άνοιγμα και το κλείσιμο της ετικέτας. Αυτός είναι ο τρόπος που λειτουργούν οι συνδέσεις. Εάν κάνετε κλικ στο σύνδεσμο, θα πάτε στην αρχική σελίδα της Google. Σημείωση: Στην πραγματικότητα η σύνδεση θα ανοίξει σε ένα νέο παράθυρο του προγράμματος περιήγησης. Η προεπιλεγμένη συμπεριφο ρά ενός συνδέσμου είναι να χρησιμοποιήσετε το ίδιο παράθυρο, αλλά για να μην χαλάσουμε το μάθημα και να μην περιηγηθείτε μακριά από αυτό, η σύνδεση θα ανοίξει σε ένα νέο παράθυρο. Τώρα, δημιουργήστε ένα σύνδεσμο για να πλοηγηθείτε στο http://www.php.net. Το κείμενο του συνδέσμου πρέπει να είναι Άνοιγμα του php.net Μάθημα 4 > Άνοιγμα σε άλλο παράθυρο Τώρα θα δούμε πώς εσείς μπορείτε να δημιουργήσετε ένα σύνδεσμο που θα ανοίξει σε νέο παράθυρο. Αυτό που χρειαζόμαστε είναι την παράμετρο target. Η τιμή αυτής της παραμέτρου που μας ενδιαφέρει είναι η _blank. Όταν η ιδιότητα στόχος δεν έχει οριστεί, ο φυλλομετρητής θα χρησιμοποιεί το ίδιο παράθυρο για να μεταβεί στη διεύθυνση URL προορισμού. Εάν ρυθμίσετε την παράμετρο target αλλά το αφήστε κενό, ο φυλλομετρητής θα χρησιμοποιήσει και πάλι το ίδιο παράθυρο. Αν όμως θέσουμε την τιμή σε _blank, ένα νέο παράθυρο θα ανοίξει. Ρίξτε μια ματιά.
<a href="http://www.google.com/" target="_blank">θα ανοίξω σε ένα νέο παράθυρο!</a> Θα ανοίξω σε ένα νέο παράθυρο! Μάθημα 4 > Επεξηγήσεις Έχετε ποτέ παρατηρήσει ότι όταν μετακινείτε το ποντίκι σας πάνω από μια σύνδεση, εμφανίζεται μια μικρή επεξήγηση; Βάλτε το ποντίκι σας εδώ και δείτε τι θα συμβεί. Το χαρακτηριστικό που απαιτείται για αυτή τη λειτουργία είναι το title, και ο κώδικας για το παραπάνω παράδειγμα είναι: <a href="#" title="μαγική επεξήγηση!">βάλτε το ποντίκι σας εδώ και δείτε τι θα συμβεί.</a> Δοκιμάστε να ορίσετε τον τίτλο του συνδέσμου του κώδικα σε PHP: Hypertext Preprocessor Μάθημα 4 > Εικόνες Τι γίνεται με τις εικόνες; Πώς μπορούμε να τις συμπεριλάβουμε στις σελίδες μας; Εύκολα. Θα χρησιμοποιήσουμε την ετικέτα img. Παρακάτω, μπορείτε να δείτε την εικόνα webe2.png....με χρήση αυτού του κώδικα: <img src="/img/webe2.png" alt="web-e2 logo" /> Θυμηθείτε εκείνα τα κενά στοιχεία που μιλήσαμε στο Μάθημα 1; Λοιπόν, αυτό είναι ένα από αυτά. Η ετικέτα ανοίγματος είναι η <img και η ετικέτα κλεισίματος είναι το />. Ας ρίξουμε μια ματιά στα χαρακτηριστικά. src Αυτό το χαρακτηριστικό ορίζει τη διαδρομή της εικόνας που θα εμφανιστεί. Μπορείτε να δείτε ότι δεν υπάρχει http:// μπροστά από την πραγματική διαδρομή. Η πραγματική ιστοσελίδα παραλείφθηκε επειδή η εικόνα βρίσκεται στον ίδιο διακομιστή, με την τρέχουσα σελίδα. Μπορούμε να γράψουμε http://www.web-e2.net/img/webe2.png ή /img/webe2.png χωρίς καμία διαφορά. alt Αυτό το χαρακτηριστικό καθορίζει το εναλλακτικό κείμενο για μια εικόνα. Εάν η εικόνα προέλευσης δεν βρέθηκε ή δεν μπορεί να εμφανιστεί, αυτό το κείμενο εμφανίζεται αντί της εικόνας. <!-- Η εικόνα δεν υπάρχει--> <img src="/img/webe22.png" alt="εδώ βρίσκεται μια εικόνα!" /> θα μας δώσει
αντί για την πραγματική εικόνα. Σημείωση: Υπάρχουν μερικά επιπλέον χαρακτηριστικά που μπορούμε να θέσουμε σε μια ετικέτα εικόνας, όπως το πλάτος και το ύψος, αλλά αυτά δεν θα συζητηθούν αυτή τη στιγμή. Μάθημα 5 > Αριθμημένη λίστα Ένα άλλο αντικείμενο στις ιστοσελίδες είναι οι λίστες. Υπάρχουν δύο τύποι λίστας. οι αριθμημένες και οι μη αριθμημένες (κουκίδες). Μια αριθμημένη λίστα μοιάζει με: 1. Στοιχείο Α 2. Στοιχείο Α 3. Στοιχείο Α 4. Στοιχείο Α 5. Στοιχείο Α Η ετικέτα για την αριθμημένη (ταξινομημένη, διατεταγμένη, ordered list) είναι πολύ εύκολο να τη θυμάστε, ol. Κάθε στοιχείο της λίστας, έχει τη δική του ετικέτα li. <ol> <li>στοιχείο Α</li> <li>στοιχείο Β</li> <li>στοιχείο Γ</li> <li>στοιχείο Δ</li> <li>στοιχείο Ε</li> </ol> Όπως μπορείτε να δείτε από το άνοιγμα ως το κλείσιμο της ol, ετικέτας υπάρχουν πέντε (5) ετικέτες στοιχεία της λίστας (li). Υπάρχουν δύο χαρακτηριστικά για ταξινομημένες λίστες: start και type. Με τη χρήση του start, μπορούμε να καθορίσουμε τον αριθμό από τον οποίο η αρίθμηση θα ξεκινήσει. <ol start="3"> <li>στοιχείο Α</li> <li>στοιχείο Β</li> <li>στοιχείο Γ</li> <li>στοιχείο Δ</li> <li>στοιχείο Ε</li> </ol> 3. Στοιχείο Α 4. Στοιχείο Α 5. Στοιχείο Α 6. Στοιχείο Α 7. Στοιχείο Α
Με τη χρήση του type μπορούμε να καθορίσουμε τον τύπο της αρίθμησης. Μπορείτε να επιλέξετε ανάμεσα σε 1, A, a, I και i. <ol type="a"> <li>στοιχείο Α</li> <li>στοιχείο Β</li> <li>στοιχείο Γ</li> <li>στοιχείο Δ</li> <li>στοιχείο Ε</li> </ol> a. Στοιχείο Α b. Στοιχείο Α c. Στοιχείο Α d. Στοιχείο Α e. Στοιχείο Α Μπορείτε επίσης να έχετε μια λίστα μέσα σε μια λίστα, ακριβώς όπως παρακάτω: <ol type="a"> <li>στοιχείο 1</li> <li>στοιχείο 2</li> <li>στοιχείο 3</li> <li> <ol type="i"> <li>στοιχείο 3.1</li> <li>στοιχείο 3.2</li> <li>στοιχείο 3.3</li> </ol> </li> <li>στοιχείο 4</li> </ol> a. Στοιχείο 1 b. Στοιχείο 1 c. Στοιχείο 1 d. i. Στοιχείο 3.1 ii. Στοιχείο 3.1 iii. Στοιχείο 3.1 e. Στοιχείο 1 Τώρα, δημιουργείστε μια αριθμημένη λίστα με τα ακόλουθα στοιχεία της λίστας: HTML, CSS, JavaScript, PHP και MySQL. Μάθημα 5 > Μη αριθμημένη λίστα Αυτό θα είναι πολύ εύκολο. Μια μη αριθμημένη λίστα μοιάζει έτσι: <ul> <li>στοιχείο Α</li> <li>στοιχείο Β</li> <li>στοιχείο Γ</li>
<li>στοιχείο Δ</li> <li>στοιχείο Ε</li> </ul> Η ετικέτα για την μη αριθμημένη λίστα (unordered list) είναι η ul. Για άλλη μια φορά, κάθε στοιχείο της λίστας έχει τη δική του ετικέτα li. Στοιχείο Α Στοιχείο Β Στοιχείο Γ Στοιχείο Δ Στοιχείο Ε Οι μη αριθμημένες λίστες έχουν ένα χαρακτηριστικό που καθορίζει την εικόνα της κουκίδας. Αυτό είναι το χαρακτηριστικό type, με το οποίο μπορείτε να ρυθμίσετε το σχήμα των κουκκίδων με εκείνο ενός δίσκου (disc), τετραγώνου (square) ή κύκλου (circle). <ul type="square"> <li>στοιχείο Α</li> <li>στοιχείο Β</li> <li>στοιχείο Γ</li> <li>στοιχείο Δ</li> <li>στοιχείο Ε</li> </ul> Στοιχείο Α Στοιχείο Β Στοιχείο Γ Στοιχείο Δ Στοιχείο Ε Και ακριβώς όπως με τις αριθμημένες λίστες μπορούν να περιέχουν και άλλες λίστες μέσα τους. Τώρα, δημιουργήστε μια μη αριθμημένη λίστα με τα ακόλουθα στοιχεία της λίστας: HTML, CSS, JavaScript, PHP και MySQL.