Εισαγωγή στην γλώσσα υπερκειμένου HTML

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Εισαγωγή στην γλώσσα υπερκειμένου HTML"

Transcript

1 Εισαγωγή στην γλώσσα υπερκειμένου HTML 1

2 Βασικές έννοιες 2

3 3 Yπερκείμενο - Υπερσύνδεσμος - HTML Το δομικό χαρακτηριστικό του WWW είναι το υπερκείμενο (hypertext), δηλαδή ένα αρχείο που εκτός από απλό κείμενο περιέχει και υπερσυνδέσμους με τους οποίους μπορεί κανείς να μεταβεί ανάμεσα σε διάφορα άλλα έγγραφα Ο υπερσύνδεσμος αποτελείται από: ένα ορατό τμήμα κειμένου, το οποίο είναι συνήθως υπογραμμισμένο ένα μη ορατό μέρος το οποίο περιέχει πληροφορία για το πού (διεύθυνση, τμήμα κειμένου) θα βρεθεί ο πόρος πληροφορίας (δεδομένα, φωνή, video) που αντιστοιχεί στο υπογραμμισμένο κείμενο Η HTML είναι μια απλή γλώσσα που χρησιμοποιείται για τη δημιουργία εγγράφων υπερκειμένου

4 4 Σχεδιασμός και Οργάνωση Ιστοσελίδων Γραμμική οργάνωση ιεραρχική οργάνωση δικτυωτή οργάνωση

5 5 Τρόποι δημιουργίας ιστοσελίδων απλοί συντάκτες (editors) κειμένου (π.χ. το notepad των Windows), επεξεργαστές κειμένου (π.χ. το Microsoft Word), ειδικοί συντάκτες κώδικα HTML (HTML editors), οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML όπως χρωματισμός των ετικετών της HTML (π.χ. το notepad++ των Windows), Συντάκτες ιστοσελίδων (όπως το Dreamweaver, frontppage, το Amaya, αλλά και το SeaMonkey που αποτελεί ενσωματωμένο συντάκτη HMΤL σε φυλλομετρητή)

6 Ο συντάκτης ΗΤΜL Amaya -1 6

7 7 Ο συντάκτης ΗΤΜL Amaya -2 Μενού επιλογών: όπου ο χρήστης μπορεί να προσπελάσει κάθε δυνατή επιλογή του εργαλείου. Γραμμή διευθύνσεων: όπου ο χρήστης μπορεί να προσπελάσει μια ιστοσελίδα ή ένα αρχείο είτε στο διαδίκτυο είτε τοπικά στον υπολογιστή του. Ουσιαστικά πρόκειται για την γραμμή διευθύνσεων που έχει κάθε φυλλομετρητής Εργαλεία επεξεργασίας: Πρόκειται για την βασική εργαλειοθήκη που αφορά την δημιουργία, αποθήκευση, εκτύπωση κ.λπ. του αρχείου. Ενσωματώνει μεταξύ άλλων εργαλεία για αναίρεση ενεργειών, αντιγραφή και επικόλληση αλλά και ορθογραφικό έλεγχο. Εργαλεία μορφοποίησης: Πρόκειται για την κύρια και εκτεταμένη εργαλειοθήκη σχετικά με την μορφοποίηση του κειμένου της ιστοσελίδας, την δημιουργία πινάκων και υπερσυνδέσμων, την ενσωμάτωση εικόνων κ.λπ. Ενσωματώνει μεταξύ άλλων εργαλεία για την εισαγωγή ειδικών χαρακτήρων, μαθηματικών συμβόλων κ.λπ. Χώρος εργασίας: Ο χώρος εργασίας αποτελεί τον χώρο επεξεργασίας της ιστοσελίδας. Από το μενού Views μπορούμε να επιλέξουμε διάφορες προβολές του χώρου εργασίας. Συνίσταται η χρήση της ταυτόχρονης προβολής και επεξεργασίας σε κατάσταση WYSIWIG και προβολής και επεξεργασίας σε HTML κώδικα (μενού Views, επιλογή: Show source ).

8 8 Ο συντάκτης ΗΤΜL Amaya -3 Είναι διαθέσιμος στην παρακάτω διεύθυνση:

9 9 Η γλώσσα HTML Η γλώσσα HTML πήρε το όνομά της από τα αρχικά των λέξεων Hyper Text Markup Language (Γλώσσα Χαρακτηρισμού Υπερκειμένου). Η HTML είναι μια γλώσσα χαρακτηρισμού που δίνει στους φυλλομετρητές τη δυνατότητα της ανάγνωσης. Πρόκειται για γλώσσα περιγραφής της δομής ενός εγγράφου και όχι της πραγματικής του παρουσίασης. Είναι με λίγα λόγια, μέθοδος κωδικοποίησης των δεδομένων για μια κατάλληλη παρουσίασή τους στο WWW. Η κωδικοποίηση των δεδομένων γίνεται με την χρήση ετικετών (tags). Στην συνέχεια παρουσίαση αυτή την αναλαμβάνουν οι φυλλομετρητές οι οποίοι βασίζονται στη περιγραφόμενη από την HTML δομή.

10 Δημιουργία της δομής HTML εγγράφου Ένα HTML έγγραφο αποτελείται από δύο βασικές ενότητες: HEAD BODY καθώς και κάποιες πληροφορίες για την έκδοση της HTML 10

11 Σχόλια - Ετικέτα σχολίων Σύνταξη: <!--Σχόλιο--> Χρήση: Διευκόλυνση των προγραμματιστών για να σημειώνουν ενότητες ή άλλες πληροφορίες όπως η ταυτότητά τους ή τα πνευματικά τους δικαιώματα Σημείωση: Τα σχόλια δεν εμφανίζονται στον browser αλλά μόνο στον πηγαίο (source) κώδικα 11

12 Βασική Μορφοποίηση κειμένου 12

13 Δημιουργία Επικεφαλίδων Ενοτήτων Σύνταξη: <Ηx χαρακτηριστικά> Περιεχόμενο </Ηx> x: παίρνει τιμές από 1μέχρι 6. Με H1 δηλώνεται η σημαντικότερη/μεγαλύτερη επικεφαλίδα χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Περιεχόμενο: αυτό που φαίνεται στον browser Χρήση: Δημιουργία των έξι επικεφαλίδων σε ιεραρχική ταξινόμηση 13

14 Καθορισμός παραγράφων Σύνταξη: <P χαρακτηριστικά> Περιεχόμενο </P> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Περιεχόμενο: αυτό που φαίνεται στον browser Σημειώσεις: μια ετικέτα παραγράφου ισοδυναμεί με δύο αλλαγές γραμμής Δεν έχει νόημα η σύνταξη <P>...<P>...</P>... </P> σε μια γραμμή Το </P> είναι προαιρετικό αλλά συνίσταται η χρήση του Χρήση: Καθορισμός παραγράφων 14

15 Αλλαγή γραμμών κειμένου Σύνταξη: <BR χαρακτηριστικά> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Σημείωση: Δεν υπάρχει </ΒR> Χρήση: Δημιουργία κενής γραμμής. Τοποθετείται είτε σε καινούργια γραμμή ή στο τέλος μιας γραμμής 15

16 Ζωηρό, πλάγιο και υπογραμμισμένο κείμενο Ζωηρό κείμενο Σύνταξη: <Β χαρακτηριστικά> Περιεχόμενο </Β> Πλάγιο κείμενο Σύνταξη: <Ι χαρακτηριστικά> Περιεχόμενο </Ι> Υπογραμμισμένο κείμενο Σύνταξη: <U χαρακτηριστικά> Περιεχόμενο </U> Σημειώσεις: Ο κώδικας θα πρέπει να είναι συμμετρικός δηλαδή κάθε σετ ετικετών να είναι τοποθετημένο μέσα στο επόμενο σετ ετικετών: <Β><Ι><U> Περιεχόμενο </U></Ι></Β> Δεν έχει σημασία το ποιο σετ ετικετών βρίσκεται στο εξωτερικό των υπόλοιπων 16

17 Περιθώρια και κενά διαστήματα Σύνταξη: <BLOCKQUOTE χαρ/στικά> Περιεχόμενο </ BLOCKQUOTE > Χρήση: Δημιουργεί σε μια σελίδα περιθώρια, δεξιά και αριστερά Σημείωση: Τα blockquotes μπορούν να τοποθετηθούν το ένα μέσα στο άλλο διαδοχικά περισσότερα από τρία επίπεδα blockquotes είναι υπερβολικά 17

18 Δημιουργία μη διατεταγμένης λίστας Σύνταξη: <UL χαρ/στικά> Περιεχόμενο </ UL > Περιεχόμενο: <LI> στοιχείο της λίστας Χρήση: Δημιουργεί μια λίστα με κουκκίδες Σημείωση: Για την δημιουργία μιας μη διατεταγμένης λίστας χρησιμοποιούμε δύο ετικέτες (UL και LI) To </LI> είναι προαιρετικό υπάρχει η δυνατότητα για λίστα μέσα σε λίστα όποιο στοιχείο δεν έχει LI δεν έχει κουκκίδα 18

19 Δημιουργία διατεταγμένης λίστας Σύνταξη: <ΟL χαρ/στικά> Περιεχόμενο </ ΟL > Περιεχόμενο: <LI> στοιχείο της λίστας </LI> Χρήση: Δημιουργεί μια αριθμημένη λίστα Σημειώσεις: Για την δημιουργία μιας διατεταγμένης λίστας χρησιμοποιούμε δύο ετικέτες (OL και LI) To </LI> είναι προαιρετικό υπάρχει η δυνατότητα για λίστα μέσα σε λίστα όποιο στοιχείο δεν έχει LI δεν είναι αριθμημένο 19

20 Αλλαγή γραμμών κειμένου Σύνταξη: <ΗR χαρακτηριστικά> χαρακτηριστικά: επιπλέον στοιχεία για την εμφάνιση Σημείωση: Δεν υπάρχει </ΗR> Χρήση: Δημιουργία οριζόντιων γραμμών για διαχωρισμό ενοτήτων ενός εγγράφου 20

21 Στοίχιση ενοτήτων κειμένου Σύνταξη: <DIV χαρακτηριστικά> Περιεχόμενο </DIV > Χαρακτηριστικά: align = center, [χρήση: στοίχιση στο κέντρο] align = left, [χρήση: στοίχιση αριστερά] align = right, [χρήση: στοίχιση δεξιά] align = justify, [χρήση: πλήρης στοίχιση] Χρήση: Δημιουργεί δομή που καθορίζει ο χρήστης σε επίπεδα τμημάτων στο έγγραφο 21

22 Δημιουργία υπερσυνδέσμου Σύνταξη: <a href= Διεύθυνση">Περιεχόμενο</a> Διεύθυνση (το κρυφό μέρος του υπερσυνδέσμου): [χρήση: απόλυτη σύνδεση ιστοσελίδας] file:///c:/...[χρήση: απόλυτη σύνδεση αρχείου από τον σκληρό δίσκο]../../... [χρήση: σχετική σύνδεση] Περιεχόμενο: το φανερό μέρος του υπερσυνδέσμου Σημείωση: Υπάρχουν δύο τρόποι για δημιουργία υπερσυνδέσμου Απόλυτη σύνδεση: Σύνδεση με ολόκληρη την διεύθυνση URL Σχετική σύνδεση: Χρησιμοποιείται για συνδέσεις με τον τοπικό διακομιστή, από έγγραφο σε έγγραφο ή από κατάλογο σε κατάλογο 22

23 Προσθήκη χρώματος σε HTML έγγραφο 23

24 Μετατροπή RGB σε Δεκαεξαδικά Χρώματα Ένα RGB (κόκκινο-πράσινο-μπλε) χρώμα με τιμές: R -> A στο δεκαεξαδικό σύστημα) G ->B στο δεκαεξαδικό σύστημα) B -> C στο δεκαεξαδικό σύστημα) σαν δεκαεξαδικό χρώμα έχει τιμή: #ABC R: 181 -> Β5 στο δεκαεξαδικό σύστημα) G: 156 -> 9C στο δεκαεξαδικό σύστημα) B: 17 -> 11στο δεκαεξαδικό σύστημα Το αντίστοιχο δεκαεξαδικό χρώμα είναι: #B59C11 Σημείωση: γιαναβρωταr, G, B χρησιμοποιώ ένα πρόγραμμα για γραφικά (π.χ. Adobe Photoshop) 24

25 Προσθήκη χρώματος στο φόντο Σύνταξη: <BODY bgcolor= τιμή χρώματος > τιμή χρώματος: υπάρχουν δύο τρόποι κατά όνομα -136 χρώματα (τα ονόματα υπάρχουν στο δεκαεξαδικό χρώμα: α) μετατρέποντας ένα RGB σε δεκαεξαδικό χρώμα ή β) χρησιμοποιώντας την παλέτα των 216 ασφαλών χρωμάτων ( κατά όνομα: <BODY bgcolor= black > δεκαεξαδικό χρώμα: <BODY bgcolor= > 25

26 Προσθήκη χρώματος στο κείμενο Προεπιλεγμένο χρώμα κειμένου Σύνταξη: <BODY text = τιμή χρώματος > Xρώμα για συγκεκριμένο τμήμα κειμένου Σύνταξη: <FONT color= τιμή χρώματος > κείμενο < /FONT > 26

27 Χρώματα συνδέσεων Σύνταξη: <body link="χρώμα1" alink="χρώμα2" vlink="χρώμα3"> χρώμα 1: προεπιλεγμένο χρώμα σύνδεσης χρώμα 2: χρώμα ενεργής σύνδεσης χρώμα 3: χρώμα σύνδεσης που έχουμε επισκεφθεί <body link="#ff0099" alink="yellow" vlink="magenta"> 27

28 HTML και Εικόνες 28

29 Προσθήκη εικόνας σε μια σελίδα Σύνταξη: <IMG χαρακτηριστικά> Χαρακτηριστικά: src= διεύθυνση_εικόνας/όνομα_εικόνας width= πλάτος_εικόνας _σε pixels " height="ύψος_εικόνας_σε pixels " alt= περιγραφή_εικόνας align= τιμή_στοίχισης [τιμές στοίχισης είναι: left, right, center] Σημειώσεις: Δεν υπάρχει </IMG> Οι εικόνες πρέπει να είναι βελτιστοποιημένες για χρήση στο Web έτσι ώστε να διασφαλίζεται η ομαλή και γρήγορη φόρτωσή τους στον browser Είναι πολύ σημαντικό να χρησιμοποιείτε τι ακριβές πλάτος και ύψος μιας εικόνας 29

30 Προσθήκη εικόνας σε μια σελίδα <img src="box.gif" width="32" height="32" alt="κόκκινος Κύβος" align="center"> 30

31 Επίπλευση μιας εικόνας Επίπλευση μιας εικόνας είναι η δυνατότητα του κειμένου να αναδιπλώνεται ελεύθερα γύρω από μια εικόνα Βήματα: τοποθετώ την εικόνα πάνω από το κείμενο στοιχίζω την εικόνα οριζόντια [αριστερά: align= left ήδεξιά: align= right ) <img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32"> <p>επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο </p> 31

32 Προσθήκη οριζόντιου/κατακόρυφου διαστήματος Χρησιμοποιούμε τα χαρακτηριστικά: hspace= τιμή του διαστήματος σε pixels [οριζόντιο διάστημα] vspace= τιμή του διαστήματος σε pixels [κατακόρυφο διάστημα] <img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32" hspace="20" vspace="40"> <p>επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο Επίπλευση εικόνας αριστερά από το κείμενο </p> 32

33 Εικόνα σαν υπερσύνδεσμος σε άλλη σελίδα Σύνταξη: <a href= Διεύθυνση σελίδας"><img χαρακτηριστικά></a> <a href="sld001.htm"><img src="box.gif" alt="κόκκινος Κύβος" align="left" width="32" height="32"> </a> Σημείωση: Όταν μια εικόνα είναι υπερσύνδεσμος, αυτό θα πρέπει να είναι προφανές Πολλοί browsers τοποθετούν γύρω από την εικόνα-υπερσύνδεσμο ένα περίγραμμα. Για να το εξαλείψουμε χρησιμοποιούμε το χαρακτηριστικό border με τιμή 0 στην δήλωση της εικόνας. 33 <a href="sld001.htm"><img src="box.gif" alt="κόκκινος Κύβος" align="left" border="0" width="32" height="32"> </a>

34 Προσθήκη μιας εικόνας στο Φόντο Σύνταξη: <BODY background= διεύθυνση_εικόνας/όνομα_εικόνας > <body background="box.gif"> 34

35 Χρήση πινάκων για σχεδιασμό σελίδων 35

36 Γενικά Χρήση πινάκων Στην HTML οι πίνακες δεν χρησιμοποιούνται μόνο για την διάταξη κάποιων στοιχείων σε μια σελίδα, αλλά Κυρίως για την δημιουργία ενός πλέγματος πάνω στο οποίο οι σχεδιαστές δημιουργούν την σελίδα Για την δημιουργία ενός πίνακα χρησιμοποιούνται οι παρακάτω ετικέτες Δημιουργία ενός πίνακα: <TABLE χαρακτηριστικά>περιεχόμενο </TABLE> Καθορισμός μιας γραμμής: <TR χαρακτηριστικά>περιεχόμενο </TR> Καθορισμός μιας στήλης: <TD χαρακτηριστικά>περιεχόμενο </TD> Ένας πίνακας στην απλούστερη δομή (1 στήλη x1 γραμμή) του συντάσσεται ως εξής: 36 <table> <tr> <td></td> </tr> </table>

37 Δημιουργία πίνακα σταθερού πλάτους Χρήση: μέγιστος έλεγχος πάνω σε έναν πίνακα, καθορίζοντας επακριβώς το πλάτος του και των εσωτερικών κελιών του <table width="770"> <tr> <td width="200"></td> <td width="570"></td> </tr> </table> Σημείωση: Όταν θέλουμε η σελίδα να εμφανίζεται σωστά σε ανάλυση οθόνης 800x600 pixels, καθορίζουμε το πλάτος του πίνακα 770 pixels Επίσης καλό είναι για έναν πίνακα που ελέγχει την διάταξη ολόκληρης της σελίδας να τον κεντράρουμε στο κέντρο με την χρήση της ετικέτας <DIV align= center > </DIV> 37

38 Δημιουργία δυναμικού πίνακα Χρήση: αναδίπλωση του περιεχομένου του πίνακα ανάλογα με το ποσοστό του διαθέσιμου χώρου και την ανάλυση της οθόνης χρήσιμο για πίνακες με κείμενο και λίγες εικόνες <table width="100%"> <tr> <td width="30%"></td> <td width="70%"></td> </tr> </table> 38

39 Κατάργηση περιγραμμάτων Σύνταξη: με χρήση του χαρακτηριστικού border= 0 Χρήση: δημιουργία πλέγματος σχεδίασης <table width="100%" border="0"> <tr> <td width="30%"></td> <td width="70%"></td> </tr> </table> 39

40 Ρύθμιση οριζόντιας κατακόρυφης στοίχισης στα κελιά Σύνταξη: Κατακόρυφη στοίχιση: με χρήση του χαρακτηριστικού valign= τιμήστοίχισης [τιμές στοίχισης είναι: top, middle, bottom] Οριζόντια στοίχιση: με χρήση του χαρακτηριστικού align= τιμήστοίχισης [τιμές στοίχισης είναι: left, right, center] <table border="2" width="200" height="200"> <tr> <td valign="bottom">κάτω-αριστερή στοίχιση</td> </tr> <tr> <td valign="middle"align="right">μέση-δεξιά</td> </tr> <tr> <td valign="top">πάνω-αριστερή στοίχιση</td> </tr> </table> 40

41 Αποφυγή της κατάπτωσης των κελιών Κατάπτωση των κελιών είναι το φαινόμενο της μη εμφάνισης κενών κελιών στο ύψος που τα ορίσαμε Επίλυση: Αρχικά δημιουργούμε ένα διαφανές εικονίδιο GIF μεγέθους 1x1 pixel Το εισάγουμε σαν εικόνα στο κελί Ρυθμίζουμε το ύψος (ή τοπλάτος) του ίσο με αυτό του κελιού 41

42 Επέκταση κελιών και γραμμών Επέκταση κελιών (συνένωση κελιών σε μια στήλη) Σύνταξη: με χρήση του χαρακτηριστικού: colspan= αριθμός στηλών που θα επεκταθεί το κελί Επέκταση γραμμών (συνένωση κελιών σε μια γραμμή) Σύνταξη: με χρήση του χαρακτηριστικού: rowspan= αριθμός γραμμών που θα επεκταθεί το κελί <table border="1" width="200"> <tr> <td colspan="2"></td> <td></td> </tr> <tr> <td></td> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table> 42

43 Διαχείριση του φόντου των κελιών Προσθήκη χρώματος στον φόντο του κελιού Σύνταξη: <TD bgcolor = τιμή χρώματος ></TD> Προσθήκη γραφικού στον φόντο του κελιού Σύνταξη: <TDbackground= διεύθυνση_εικόνας/όνομα_εικόνας ></TD> <table border="1" width="200"> <tr> <td colspan="2"></td> <td></td> </tr> <tr> <td bgcolor="#008000"></td> <td></td> <td rowspan="2" background="box.gif"></td> </tr> <tr> <td></td> <td></td> </tr> </table> 43

44 Ένθεση πινάκων Η ένθεση πινάκων είναι ουσιαστικά η χρήση πίνακα μέσα σε πίνακα και γίνεται μέσα σε κελιά του πίνακα <table border="1" width="200"> <tr> <td></td> <td> <table border="1" width="200"> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </td> <td></td> </tr> </table> 44

45 Στοίβα πινάκων Η στοίβα πινάκων είναι ουσιαστικά η χρήση πινάκων τον ένα μετά τον άλλο και είναι πολύ χρήσιμη για την δημιουργία μιας μακριάς σελίδας με ποικιλία επέκτασης και ελέγχου των στοιχείων της. <table border="1" width="200"> <tr> <td></td> </tr> </table> <table border="1" width="200"> <tr> <td></td> </tr> </table> 45 <table border="1" width="200"> <tr> <td></td> </tr> </table>

46 Χρήση Πλαισίων (Framesets) 46

47 Δημιουργία Διάταξης Πλαισίων Σύνταξη: <FRAMESET χαρακτηριστικά>περιεχόμενο</ FRAMESET > Χρήση: Καθορίζει την διάταξη των πλαισίων μέσα στο κύριο παράθυρο <html> <head> </head> <frameset > </frameset> </html> 47 Σημείωση: Αντί για την ετικέτα </ BODY > χρησιμοποιούμε την ετικέτα </ FRAMESET > η παραπάνω διάταξη λειτουργεί σαν δοχείο που περιέχει τα υπόλοιπα περιγράμματα και τις γραμμές κύλισης η διάταξη των πλαισίων θα πρέπει να διαθέτει τουλάχιστον δύο HTML αρχεία

48 Προσθήκη Ανεξάρτητων Πλαισίων Βήματα: Δημιουργώ τα επιμέρους HMTL αρχεία τα οποία θέλω να εισάγω στο πλαίσιο Δημιουργώ την βασική διάταξη πλαισίων Εισάγω τα επιμέρους αρχεία στο πλαίσιο χρησιμοποιώντας μέσα στην ετικέτα <FRAMESET> </ FRAMESET > την ετικέτα <FRAME> με την παρακάτω σύνταξη: <FRAME src= διεύθυνση_επιμέρους_αρχείου_html/όνομα_του_αρχείου > <frameset> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> 48

49 Δυναμική Διάταξη Πλαισίων ανά Στήλη Σύνταξη: Στην ετικέτα FRAMESET χρησιμοποιώ το χαρακτηριστικό cols: <frameset cols="200,*"> για την δημιουργία στηλών Σημειώσεις: Το, διαχωρίζει τις στήλες (δηλ. τα επιμέρους πλαίσια) Το 200 σημαίνει ότι το πρώτο πλαίσιο (αριστερό) είναι σταθερού πλάτους 200 pixels Το * σημαίνει ότι το δεύτερο πλαίσιο (δεξί) έχει δυναμικό πλάτος <frameset cols="200,*"> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> </html> 49

50 Δυναμική Διάταξη Πλαισίων ανά Γραμμή Σύνταξη: Στην ετικέτα FRAMESET χρησιμοποιώ το χαρακτηριστικό rows: <frameset rows= 50,*"> για την δημιουργία στηλών Σημειώσεις: Το, διαχωρίζει τις γραμμές (δηλ. τα επιμέρους πλαίσια) Το 50 σημαίνει ότι το πρώτο πλαίσιο (επάνω) είναι σταθερού ύψους 50 pixels Το * σημαίνει ότι το δεύτερο πλαίσιο (κάτω) έχει δυναμικό ύψος <frameset rows="50,*"> <frame src="arxeio_1.htm"> <frame src="arxeio_2.htm"> </frameset> 50

51 Συνδυασμός Γραμμών και Στηλών Βήματα: Δημιουργώ τα επιμέρους HMTL αρχεία τα οποία θέλω να εισάγω στο πλαίσιο Δημιουργώ την βασική διάταξη πλαισίων Ορίζω τις γραμμές των επιμέρους πλαισίων Εισάγω το αρχείο για την πρώτη γραμμή Εισάγω μια νέα διάταξη πλαισίων μέσα στην ετικέτα <FRAMESET> </ FRAMESET > μια νέα ετικέτα <FRAMESET> </ FRAMESET > Εισάγω τα επιμέρους αρχεία στο πλαίσιο χρησιμοποιώντας μέσα στην ετικέτα <FRAMESET> </ FRAMESET > την ετικέτα <FRAME> <frameset rows="64,*"> <frame src="arxeio_1.htm"> <frameset cols="150,*"> <frame src="arxeio_2.htm"> <frame src="arxeio_3.htm"> </frameset> </frameset> 51

52 Ρύθμιση Κύλισης Σύνταξη: Για να καθορίσω αν θα φαίνονται ή όχι scrollbars δίπλα από ένα πλαίσιο χρησιμοποιώ το χαρακτηριστικό scrolling στην ετικέτα <FRAME>: scrolling= auto : εμφανίζονται scrollbars αν είναι απαραίτητο scrolling= yes : εμφανίζονται scrollbars πάντα scrolling= no : δε νεμφανίζονται scrollbars ποτέ <frame src="arxeio_2.htm" scrolling="yes" > 52

53 Αλλαγή μεγέθους Πλαισίων- Προσθήκη Περιθωρίων Αλλαγή μεγέθους Πλαισίων Η αλλαγή του μεγέθους των πλαισίων από τον χρήστη είναι προεπιλογή Σύνταξη: Για να μην αλλάζει το μέγεθος των πλαισίων χρησιμοποιούμε το χαρακτηριστικό noresize στην ετικέτα <FRAME> Σημείωση: Το χαρακτηριστικό noresize είναι από τα λίγα HTML χαρακτηριστικά που δεν θέλουν κάποια τιμή <frame src="arxeio_2.htm" noresize> Προσθήκη Περιθωρίων Σύνταξη: Για να τροποποιήσουμε τα περιθώρια στα πλαίσια χρησιμοποιούμε το χαρακτηριστικά marginwidth και marginheight στην ετικέτα <FRAME> δίνοντάς τους μια τιμή σε pixels 53 <frame src="arxeio_2.htm" marginwidth="10" marginheight="10">

54 Ονομασία Πλαισίων Χρήση: Για να κάνουμε μια αλληλεπίδραση μεταξύ των πλαισίων της ίδιας σελίδας ή να αντικαταστήσουμε την σελίδα σε ένα πλαίσιο είναι απαραίτητο να ονομάσουμε τα πλαίσια Σύνταξη: Η ονομασία των πλαισίων γίνεται με το χαρακτηριστικό name στην ετικέτα <FRAME> <frameset rows="64,*"> <frame name="banner" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> </frameset> 54

55 Στόχευση Πλαισίων Από πλαίσιο της ίδιας διάταξης: Χρήση: Για να προκαθορίσω τον προορισμό τον υπερσυνδέσμων από ένα πλαίσιο της ίδιας διάταξης σε ένα άλλο Σύνταξη: Χρησιμοποιώ το χαρακτηριστικό target στην ετικέτα του αρχικού πλαισίου: target= όνομα_του_στοχευόμενου_πλαισίου <frameset rows="64,*"> <frame name="banner" target="contents" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> </frameset> 55

56 Στόχευση Πλαισίων Από μια σελίδα στο πλαίσιο μιας διάταξης: Σύνταξη: Τροποποιώ το χαρακτηριστικό target στην σύνταξη του υπερσυνδέσμου <a href= Διεύθυνση target= όνομα_του_στοχευόμενου_πλαισίου >Περιεχόμενο</a> <a href="ex1.html" target="contents">arxeio 3</a> 56

57 Στόχευση Πλαισίων με Χρήση Ειδικών Ονομάτων Σύνταξη: Τροποποιώ το χαρακτηριστικό target στην σύνταξη του υπερσυνδέσμου δίνοντάς του σαν τιμή ένα ειδικό όνομα <a href= Διεύθυνση target= ειδικό _όνομα >Περιεχόμενο</a> Χρήση: target= _blank : ανοίγει ένα καινούργιο παράθυρο του browser target= _self : φορτώνει την σελίδα στο ίδιο παράθυρο από όπου προέρχεται η αρχική σύνδεση target= _parent : φορτώνει την σελίδα στην διάταξη πλαισίων της αρχικής διασύνδεσης target= _top : φορτώνει την σελίδα σε πλήρες παράθυρο, παραβλέποντας τα υπάρχοντα πλαίσια 57 <a href="ex1.html" target="_parent">arxeio 3</a>

58 Διαχείριση πρόσβασης από browsers που δεν υποστηρίζουν πλαίσια Βήματα: Κάτω από την τελική ετικέτα τερματισμού <FRAMESET> προσθέτω την ετικέτα <NOFRAMES> </NOFRAMES> Μέσα στην ετικέτα <NOFRAMES> εισάγω μια ολόκληρη σελίδα εισάγοντας την ετικέτα <BODY> </BODY> Στην σελίδα αυτή εισάγουμε ένα μήνυμα to το οποίο εμφανίζεται στους browsers που δεν έχουν την δυνατότητα να απεικονίσουν frames <html> <head> <title>frames</title> </head> <frameset rows="64,*"> <frame name="banner" scrolling="no" noresize target="contents" src="arxeio_1.htm"> <frameset cols="150,*"> <frame name="contents" target="main" src="arxeio_2.htm"> <frame name="main" src="arxeio_3.htm"> </frameset> <noframes> <body> <p>δυστυχώς ΔΕΝ υποστηρίζετε πλαίσια</p> </body> </noframes> </frameset> </html> 58

59 Σχεδιασμός Φορμών Ανατροφοδότησης 59

60 Γενικά Οι φόρμες είναι μια πανίσχυρη μέθοδος για να λαμβάνει ο διαχειριστής του site πληροφορίες από τον επισκέπτη (χρήστη) του site Βασίζονται στην αλληλεπίδραση του χρήστη με την ιστοσελίδα, και στα scripts που είναι αποθηκευμένα στον server Η παραπάνω αλληλεπίδραση υποστηρίζεται από μια διαδικασία που λέγεται Common Gateway Interface (CGI) και η οποία λειτουργεί σαν οδός μέσα από την οποία περνούν οι πληροφορίες και παραδίδονται στην πλευρά του server. Παράδειγμα χρήσης φορμών είναι η συλλογή του ονόματος, της διεύθυνσης και πληροφοριών επικοινωνίας για έναν χρήστη και η αποστολή τους με 60

61 Δημιουργία μιας Φόρμας Σύνταξη: Χρησιμοποιείται η ετικέτα <FORM> <FORM χαρακτηριστικά> Περιεχόμενο </FORM> Όπου χαρακτηριστικά: action= όνομα_στοχευόμενου_script (καθορίζει σε ποιο script του server θα παραδοθούν οι πληροφορίες που αποστέλλονται από την φόρμα) method= τρόπος_αποστολής_των δεδομένων Υπάρχουν δύο τρόποι: get και post. Με την get τα δεδομένα αποστέλλονται μαζί με την υπόλοιπη φόρμα Με την post τα δεδομένα αποστέλλονται ξεχωριστά (είναι πιο ευέλικτη και ασφαλής από την get) <form method="post" action="scropt.asp"> 61 </form>

62 Δημιουργία ενός Πεδίου Κειμένου Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (για πεδίο κειμένου): type= text (καθορίζει ότι το πεδίο είναι τύπου text - αν έχουμε type= password τότε αντί του πληκτρολογημένου χαρακτήρα φαίνεται ο χαρακτήρας * ) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) size= πλάτος_πεδίου (καθορίζει το πλάτος του πεδίου σε pixels) maxlength= αριθμός_επιτρεπόμενων χαρακτήρων (καθορίζει τον μέγιστο αριθμό χαρακτήρων που μπορούμε να εισάγουμε στο πεδίο κειμένου) <form method="post" action="script.asp"> <p> <input type="text" name=" " size="20" maxlength="10"> </p> </form> 62

63 Δημιουργία ενός Πλαισίου Ελέγχου (check box) Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Πλαίσιο Ελέγχου ): type= checkbox (καθορίζει ότι το πεδίο είναι τύπου checkbox) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) checked (δηλώνει ότι το συγκεκριμένο πλαίσιο ελέγχου είναι προεπιλεγμένο) Χρήση: Καθορισμός επιλογών, όπου ο χρήστης μπορεί να επιλέξει περισσότερες από μια <form method="post" action="script.asp"> <p>color</p> <p>red <input type="checkbox" name="red" checked> </p> <p>green <input type="checkbox" name="green"> </p> <p>blue <input type="checkbox" name="blue"> </p> </form> 63

64 Δημιουργία ενός Κουμπιού Επιλογής Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Επιλογής): type= radio (καθορίζει ότι το πεδίο είναι κουμπί επιλογής) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) checked (δηλώνει ότι το συγκεκριμένο κουμπί επιλογής είναι προεπιλεγμένο) Χρήση: Καθορισμός επιλογών, όπου ο χρήστης μπορεί να επιλέξει μόνο μια 64 <form method="post" action="script.asp"> <p>gender</p> <p>female <input type="radio" name="female" checked> </p> <p>male <input type="radio" name="male"> </p> </form>

65 Δημιουργία μιας Περιοχής Κειμένου Σύνταξη: Χρησιμοποιείται η ετικέτα <TEXTAREA χαρακτηριστικά> </TEXTAREA>, η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά: rows= γραμμές_κειμένου (καθορίζει το ύψος της περιοχής κειμένου) cols= στήλες_κειμένου (καθορίζει το πλάτος της περιοχής κειμένου) Χρήση: Εισαγωγή κειμένου σε περισσότερες από μια γραμμή <form method="post" action="script.asp"> <textarea rows="5" cols="25"> </textarea> </form> 65

66 Δημιουργία μιας Αναπτυσσόμενης Λίστας Σύνταξη: Χρησιμοποιούνται οι ετικέτες <SELECT χαρακτηριστικά> </ SELECT>, η οποία εισάγεται ανάμεσα από την ετικέτα < FORM > Όπου χαρακτηριστικά: size= αριθμός_αντικειμένων (καθορίζει τον αριθμό των επιλογών της λίστας) multiple (επιτρέπει την επιλογή πολλαπλών αντικειμένων) <OPTION χαρακτηριστικά>, η οποία εισάγεται ανάμεσα από την ετικέτα <SELECT > και καθορίζει ένα αντικείμενο Όπου χαρακτηριστικά: name= όνομα_αμτικειμένου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο αντικείμενο) selected (επιτρέπει την επιλογή πολλαπλών αντικειμένων) Χρήση: Επιλογή ενός (ή περισσοτέρων) αντικειμένων από μια λίστα 66

67 Δημιουργία μιας Αναπτυσσόμενης Λίστας <form method="post" action="script.asp"> <p><select size="1"> <option name="greece"> Greece </option> <option name="italy"> Italy </option> <option name="france" selected> France </option> </select> </p> </form> Σημείωση: Χρησιμοποιούμε το χαρακτηριστικό size μόνο όταν θέλουμε να είναι ορατές όλες οι επιλογές ή ένα μέρος τους 67

68 Προσθήκη Κουμπιών Ακύρωσης και Υποβολής Κουμπί Υποβολής: Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Υποβολής): type= submit (καθορίζει ότι το πεδίο είναι κουμπί υποβολής) values= όνομα_κουμπιού (καθορίζει το κείμενο που εμφανίζεται στο κουμπί) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) Χρήση: Αποστολή των στοιχείων της φόρμας στον server Κουμπί Ακύρωσης : Σύνταξη: Χρησιμοποιείται η ετικέτα <INPUT χαρακτηριστικά> η οποία εισάγεται ανάμεσα από την ετικέτα <FORM> Όπου χαρακτηριστικά (Κουμπί Ακύρωσης): type= reset (καθορίζει ότι το πεδίο είναι κουμπί ακύρωσης) values= όνομα_κουμπιού (καθορίζει το κείμενο που εμφανίζεται στο κουμπί) name= όνομα_πεδίου (μας βοηθάει ώστε να καταλάβουμε την πληροφορία που σχετίζεται με το συγκεκριμένο πεδίο ) Χρήση: Διαγράφει οτιδήποτε έχουμε εισάγει στην φόρμα 68

69 Προσθήκη Κουμπιών Ακύρωσης και Υποβολής <form method="post" action="script.asp"> <p> <input type="submit" value="εισαγωγή" name="b1"> <input type="reset" value="διαγραφή" name="b2"> </p> </form> 69

70 Ενσωμάτωση Πολυμέσων και Εξειδικευμένων Προγραμμάτων 70

71 Δημιουργία Συνδέσεων με αρχεία Ήχου ή Video Σύνταξη: <a href= Διεύθυνση_αρχείου_ήχου-βίντεο">Περιεχόμενο</a> Σημείωση: Επειδή τα πολυμέσα που φορτώνονται απαιτούν μια κατάλληλη εφαρμογή για να εκτελεστούν καλό είναι να προσθέτουμε μια επεξήγηση στην σελίδα μας που θα αναφέρουμε την συγκεκριμένη εφαρμογή και που ο χρήστης μπορεί να την αποκτήσει. <a href="../../windows/media/chimes.wav">hxos</a> 71

72 Προσθήκη Ηχητικής Υπόκρουσης Υπάρχουν δύο τρόποι: Α τρόπος: με χρήση της ετικέτας <BGSOUND> Σύνταξη: Κάτω από την ετικέτα <BODY> εισάγω την ετικέτα <BGSOUND>: <BGSOUND src= Διεύθυνση_αρχείου_ήχου loop= αριθμός αναπαραγωγής του αρχείου ήχου > Σημειώσεις: Η ετικέτα <BGSOUND> είναι εξειδικευμένη και δεν λειτουργεί στονnetscape Δεν υπάρχει </BGSOUND> Η τιμήloop μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σεπερίπτωσηπουθέλουμετοαρχείοναπαίζεται συνεχώς θέτουμε την τιμή infinite 72 <bgsound src="media/chimes.wav">

73 Προσθήκη Ηχητικής Υπόκρουσης Β τρόπος: με χρήση της ετικέτας < EMBED > Σύνταξη: Πάνω ακριβώς από την ετικέτα τερματισμού </BODY> εισάγω την ετικέτα <EMBED>: <EMBED src= Διεύθυνση_αρχείου_ήχου autoplay true loop= αριθμός αναπαραγωγής του αρχείου ήχου > Σημειώσεις: Η ετικέτα <EMBED> μπορεί να χρησιμοποιηθεί ταυτόχρονα με την <BGSOUND> έτσι ώστε να εξυπηρετούνται όλοι οι browsers Δεν υπάρχει </ EMBED > Το χαρακτηριστικό autoplay= true είναι απαραίτητο για την αναπαραγωγή του ήχου αυτόματα Το χαρακτηριστικό loop μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σε περίπτωση που θέλουμε το αρχείο να παίζεται συνεχώς θέτουμε την τιμή infinite 73 <embed src="media/chimes.wav" autoplay="true" loop="false">

74 Αναπαραγωγή Ήχου και Video inline Σύνταξη: Χρήση της ετικέτας <EMBED>: <EMBED src= Διεύθυνση_αρχείου_ήχου-βίντεο χαρακτηριστικά> Χαρακτηριστικά: height: ύψος του βίντεο (ισχύει μόνο για βίντεο) width: πλάτος του βίντεο (ισχύει μόνο για βίντεο) controller: παίρνει τιμές true (εμφανίζεται η κονσόλα ελέγχου) και false (δεν εμφανίζεται η κονσόλα ελέγχου) autoplay: παίρνει τιμές true (για την αναπαραγωγή του αρχείου πολυμέσων αυτόματα) και false (που σημαίνει ότι ο χρήστης θα πρέπει να ξεκινήσει χειροκίνητα την αναπαραγωγή του αρχείου πολυμέσων) loop: μπορεί να πάρει αριθμητικές τιμές (1, 2, 3,...) και δηλώνει το πόσες φορές θα παιχθεί το αρχείο ήχου. Σε περίπτωση που θέλουμε το αρχείο να παίζεται συνεχώς θέτουμε την τιμή infinite pluginspage= διεύθυνση plug-in 74

75 Αναπαραγωγή Ήχου και Video inline <embed src="../../windows/help/explorer.avi " autoplay="true" loop="false" width="200" height="200" controller="true" pluginspage=" m/windows/mediaplayer"></p> </body> </html> 75

76 Διαδοχικά Φύλλα Στυλ (CSS) 76

77 Τι είναι Διαδοχικό Φύλλο Στυλ Ορισμός: Ένα Διαδοχικό Φύλλο Στυλ (cascading style sheet -CSS) είναι μια ιστοσελίδα που παράγεται από διάφορες πηγές, με μια προκαθορισμένη σειρά προτεραιότητας (στην περίπτωση που ο καθορισμός ενός στυλ για κάποιο στοιχείο γίνεται σε διάφορα διαδοχικά φύλλα στυλ) Χρησιμότητα: Τα Διαδοχικά Φύλλα Στυλ δίνουν στον προγραμματιστή μεγαλύτερο έλεγχο για την εμφάνιση μιας ιστοσελίδας Μέθοδοι: Υπάρχουν τρεις μέθοδοι φύλλων στυλ Μέθοδος σύνδεσης: πουχρησιμεύειγιατονέλεγχοστυλπολλώνεγγράφων σε ένα μόνο φύλλο στυλ Ενσωματωμένα φύλλα στυλ: που χρησιμεύει για τον έλεγχο στυλ σελίδα - προς-σελίδα Inline στυλ: που χρησιμεύει για τον έλεγχο στυλ σε τμήματα της ίδιας σελίδας 77

78 Δημιουργία Φύλλου Στυλ για Σύνδεση Δημιουργώ ένα αρχείο με κατάληξη.css σε έναν text editor Με την παρακάτω (απλή) μορφή Στοιχείο_που_θέλω_να_επηρεάσω{ } ιδιότητα:τιμή; Η1{ 78 } color:#669999;

79 Σύνδεση HTML εγγράφου σε ένα Φύλλο Στυλ Ανάμεσα από τα </TITLE> και </HEAD> σεμιασελίδαγράφω: <LINK rel=stylesheet href= Διεύθυνση φύλλου στυλ type= text/css > <html> <head> <title>style</title> <link rel="stylesheet" href="css/my_style.css" type="text/css"> </head> <body> <h1>επικεφαλίδα 1</h1> <p>απλό κείμενο</p> </body> </html> Σημείωση: Με αυτόν τον τρόπο μπορώ να συνδέσω όσα έγγραφα επιθυμώ (ακόμη και ανεξάρτητα) σε ένα css. Αλλάζοντας ένα στοιχείο στο.css μπορώ να το αλλάξω αυτομάτως σε όλες τις σελίδες που το χρησιμοποιώ 79

80 Δημιουργία ενός ενσωματωμένου Φύλλου Στυλ.. Ανάμεσα από τα </TITLE> και </HEAD> σεμιασελίδαγράφωτοtag: <STYLE> </ STYLE > Ανάμεσα από τα <STYLE> και </ STYLE > δηλώνω τα στοιχεία και τις ιδιότητες που θέλω να τροποιήσω ως εξής: Στοιχείο_που_θέλω_να_επηρεάσω{ ιδιότητα:τιμή; ιδιότητα:τιμή; } 80

81 ..Δημιουργία ενός ενσωματωμένου Φύλλου Στυλ <html> <head> <title>style</title> <style> h1{ color: #00FF00; } </style> </head> <body> <h1>επικεφαλίδα 1</h1> <p>απλό κείμενο</p> </body> </html> 81

82 Χρήση Inline Στυλ Βρίσκω το τμήμα του κειμένου που θέλω να τροποποιήσω Μέσα στην ετικέτα προσθέτω το χαρακτηριστικό style συνοδευόμενο από ιδιότητες και τιμές ως εξής: <Στοιχείο_που_θέλω_να_επηρεάσω style= ιδιότητα:τιμή;ιδιότητα:τιμή; > Περιεχόμενο </ Στοιχείο_που_θέλω_να_επηρεάσω > <p style="font-family: helvetica;"> Παράδειγμα1 </p> 82 <p style="font-family: helvetica;font-style: italic"> Παράδειγμα2 </p>

83 Inline, Ενσωματωμένα και Συνδεδεμένα στυλ μαζί Θα πρέπει να έχουμε υπόψη μας για την προτεραιότητα, ότι το inline στυλ προηγείται ακολουθεί το ενσωματωμένο στυλ και τέλος το συνδεδεμένο 83

84 Χρήση κλάσεων για προσαρμογή του φύλλου στυλ... Μια κλάση είναι ένας προσαρμοζόμενος επιλογέας Δημιουργία: σε ένα συνδεδεμένο ή ενσωματωμένο φύλλο στυλ δημιουργούμε μια κλάση με την μορφή: Στοιχείο.όνομα_κλάσης { ιδιότητα:τιμή; } Σημείωση: το «στοιχείο» είναι προαιρετικό το «όνομα_κλάσης» είναι της επιλογής μας χωρίς χαρακτήρες διαστημάτων και ειδικών συμβόλων Κλήση της κλάσης Στο HTML αρχείο γράφουμε 84 <Στοιχείο class= όνομα κλάσης > Περιεχόμενο </ Στοιχείο>

85 ...Χρήση κλάσεων για προσαρμογή του φύλλου στυλ Δημιουργία: <style> h1.peach { color=#ff9966; } Κλήση της κλάσης: <h1 class="peach">κλάση</h1> <html> <head> <title>παράδειγμα1 για inline styl</title> <style> h1.peach { color=#ff9966; } </style> </head> <body> <h1 class="peach">κλάση</h1> <h1>κλάση </h1> </body> </html> Κλάση Κλάση 85

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

Πίνακες. ιδιότητες ετικέτας <tr>

Πίνακες. ιδιότητες ετικέτας <tr> Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

Διαβάστε περισσότερα

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form> Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις

Διαβάστε περισσότερα

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .

Διαβάστε περισσότερα

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI)

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI) ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα

Πίνακες. ετικέτα <table>

Πίνακες. ετικέτα <table> Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία

Διαβάστε περισσότερα

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πλαίσια Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Οικονοµικό Πανεπιστήµιο Αθηνών Τµήµα ιοικητικής Επιστήµης & Τεχνολογίας ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων µε HMTL Γιώργος Γιαγλής Περίληψη Κεφαλαίου

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά

Διαβάστε περισσότερα

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week 7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων με τη γλώσσα HTML

Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Η λίστα <ol> (ordered list)

Η λίστα <ol> (ordered list) Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20 Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google

Διαβάστε περισσότερα

<HTML> <HEAD> <TITLE> <BODY>

<HTML> <HEAD> <TITLE> <BODY> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες

Διαβάστε περισσότερα

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

Διαβάστε περισσότερα

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 6 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες,

Διαβάστε περισσότερα

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Εικόνα, κείμενο και εικόνα Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πίνακες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

Διαβάστε περισσότερα

Βασικά στοιχεία του CSS

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Επεξεργαστής Κειμένου: (Microsoft Word)

Επεξεργαστής Κειμένου: (Microsoft Word) Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου

Διαβάστε περισσότερα

PowerPoint Ένα εργαλείο παρουσίασης

PowerPoint Ένα εργαλείο παρουσίασης Εργασία 7η 2 Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι σε θέση να χειρίζεται ί ά άνετα έ ένα πρόγραμμα ό

Διαβάστε περισσότερα

Cascading Style Sheets Φόρμες (Forms)

Cascading Style Sheets Φόρμες (Forms) Cascading Style Sheets Φόρμες (Forms) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Cascading Style Sheets Τα Cascading Style Sheets (CSS) είναι οδηγίες

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

Αλεξιάδης Γεώργιος (ΠΕ86) -

Αλεξιάδης Γεώργιος (ΠΕ86) - 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ

Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15 Ετικέτες meta 2 Δε περιέχουν περιεχόμενο Έχουν 2 ιδιότητες. content: (υποχρεωτικό): Τα ίδια τα μετα-δεδομένα name: Συνήθως author, keywords και

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

Διαβάστε περισσότερα

ΚΕΦΑΛΑΙΟ 4. H Γλώσσα Σήµανσης HTML. - Απρίλιος ηµήτριος Σάµψων. Επίκουρος Καθηγητής

ΚΕΦΑΛΑΙΟ 4. H Γλώσσα Σήµανσης HTML. - Απρίλιος ηµήτριος Σάµψων. Επίκουρος Καθηγητής ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ Τµήµα ιδακτικής της Τεχνολογίας και Ψηφιακών Συστηµάτων ΚΕΦΑΛΑΙΟ 4 H Γλώσσα Σήµανσης HTML ηµήτριος Σάµψων Επίκουρος Καθηγητής - Απρίλιος 2004 - Περιεχόµενα 4 Η Γλώσσα Σήµανσης HTML...

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

Διάλεξη 3η HTML intermediate

Διάλεξη 3η HTML intermediate Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html

Διαβάστε περισσότερα

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει

Διαβάστε περισσότερα

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

Εισαγωγή στην HTML. Κεφ. HTML + CSS

Εισαγωγή στην HTML. Κεφ. HTML + CSS Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη

Διαβάστε περισσότερα

Η Γλώσσα Προγραμματισμού του Internet HTML

Η Γλώσσα Προγραμματισμού του Internet HTML Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

HTML Εργαστήριο 1.2 (Πίνακες)

HTML Εργαστήριο 1.2 (Πίνακες) HTML Εργαστήριο 1.2 (Πίνακες) Πίνακες 1. Η ετικέτα με την οποία ορίζουμε στην HTML έναν πίνακα είναι η . Κάθε γραμμή του πίνακα ορίζεται με τις και κάθε στήλη με τις . Έτσι ένας απλός πίνακας

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org) PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο

Διαβάστε περισσότερα

Microsoft EXCEL ΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ ECDL. Περιεχόμενα. Απόκτησε τώρα το δίπλωμα. για να θεωρείσαι Επαγγελματίας! 1 Χρήση της Εφαρμογής.

Microsoft EXCEL ΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ ECDL. Περιεχόμενα. Απόκτησε τώρα το δίπλωμα. για να θεωρείσαι Επαγγελματίας! 1 Χρήση της Εφαρμογής. Microsoft EXCEL Περιεχόμενα ΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ 1 Χρήση της Εφαρμογής 2 Κελιά 3 Διαχείριση Φύλλων Εργασίας 4 Τύποι και Συναρτήσεις 5 Μορφοποίηση 6 Γραφήματα 7 Προετοιμασία Εκτυπώσεων Εργασία με υπολογιστικά

Διαβάστε περισσότερα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή

Διαβάστε περισσότερα