Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
|
|
- Φυλλίς Αλεξάκης
- 5 χρόνια πριν
- Προβολές:
Transcript
1 Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και Αρχιτεκτονικής Υπολογιστών arch.icte.uowm.gr/mdasyg 1
2 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. Έκδοση Σεπτέμβριος 2011 Περιεχόμενα 1. Σκοπός της άσκησης Ερωτήσεις/Ασκήσεις
3 1.Σκοπός της Άσκησης 1 : Κατασκευή μιας σελίδας με τη χρήση CSS 2. Ερωτήσεις/Ασκήσεις Κεφάλαιο 1 :Στήσιμο του layout Πρώτα θα δημιουργήσουμε ένα αρχείο για το css το οποίο θα το ονομάσουμε index.css και έπειτα θα δημιουργήσουμε και ένα αρχείο html το οποίο θα το ονομάσουμε index.html. Στη συνέχεια θα συνδέσουμε τα δύο αυτά αρχεία. Οι εικόνες που θα χρειαστείτε βρίσκονται στη σελίδα του μαθήματος. Η σελίδα που θέλουμε να κατασκευάσουμε βρίσκεται στη σελίδα 11 Δημιουργήστε ένα κενό αρχείο index.css και ένα κενό αρχείο index.html. Στο index.html Τοποθετήστε το κατάλληλο XML DOCtype Συνδέστε το index.css γράφοντας το παρακάτω στο head του index.html <link href="index.css" rel="stylesheet" type="text/css" /> 2.Θα πρέπει να φροντίσουμε όλα τα αρχεία μας μαζί με τις εικόνες να βρίσκονται στον ίδιο φάκελο. Αφού συνδέσαμε τα αρχεία μας θα αρχίσουμε να γράφουμε το CSS μας. Στο CSS: body{ margin:0; background-image:url(background.gif); background-repeat:repeat-x; Το margin δηλώνει ότι τα περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό background.gif και το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά. Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.1): (3.1)Εικόνα σελίδας που δημιουργήσατε 1. Η παρούσα άσκηση χρησιμοποιεί τα παραδείγματα από την ενότητα CSS του συγγραφέα manolism του ιστοχώρου 3
4 Στην συνέχεια μέσα στο body της HTML σελίδας μας θα πρέπει να γράψουμε το παρακάτω για να δημιουργήσουμε το κύριο τμήμα της σελίδας μας: <div id="container"> Η μορφοποίηση του παραπάνω τμήματος θα γίνει με το να προσθέσουμε στο αρχείο index.css τις παρακάτω γραμμές: #container { margin: 0 auto; padding: 0px; width: 781px; height:800px; background-image:url(main_back.gif); Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_back.gif. Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.2): (3.2)Εικόνα σελίδας που δημιουργήσατε Το επόμενο div μας θα είναι το header. Μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: <div id="header"> Οπότε συνολικά θα έχουμε το παρακάτω: <div id="container"> <div id="header"> Στο css αρχείο μας γράφουμε το παρακάτω. Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_banner.gif. 4
5 #header { background-image:url(main_banner.jpg); width: 780px; height: 117px; margin: 0; padding: 0; Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.3): (3.3)Σελίδα που δημιουργήσατε Το επόμενο div μας θα είναι το navigation και στο css αρχείο μας γράφουμε το: κώδικας: #navigation { background-image:url(navbar.jpg); width: 780px; height: 31px; padding-top:9px; Tο padding-top είναι τα περιθώρια που θα έχει το κείμενο του μενού από το πάνω μέρος του div και αυτό είναι 9 px, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό navbar.gif. Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div header θα πρέπει να γράψουμε το παρακάτω: <div id="header"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.4): (3.4)Σελίδα που δημιουργήσατε 5
6 Το επόμενο div θα είναι το main_content μέσα στο οποίο θα τοποθετήσουμε όλα τα divs που θα χρησιμοποιήσουμε για το περιεχόμενο της ιστοσελίδας μας. #main_content { background:none; width: 741px; height:600px; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; Όλα τα padding είναι τα περιθώρια που θα έχει το περιεχόμενο του div από τις 4 πλευρές του και αυτό είναι 20 px (παρατηρήστε ότι το άθροισμα του width και των padding-left και padding-right μας κάνουν 781px,) το Width είναι το πλάτος του και το Height είναι το ύψος του και το background:none δηλώνει ότι δε θα τοποθετηθεί τίποτα σαν φόντο. Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div navigation θα πρέπει να γράψουμε το παρακάτω: <div id="main_content"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.5): (3.5) Εικόνα σελίδας που δημιουργήσατε Το επόμενο div θα είναι το retouch δηλαδή το πάνω αριστερά «κουτί» 6
7 #retouch { float:left; background-image:url(main_retouch.gif); width: 218px; height: 143px; padding-top:40px; text-align:center; line-height:15px; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας main_retouch.gif (218x183 οι διαστάσεις της εικόνας) που έχουμε ως φόντο), padding είναι η απόσταση από τη γραμμή ορίου (border) και το περιεχόμενο του κελιού. 2. Κάνουμε αυτή τη τεχνική γιατί στη συνέχεια θα γράψουμε κείμενο πάνω σε αυτό. Το κείμενο θα τοποθετηθεί πάνω στην εικόνα σε ένα κουτί που έχει διαστάσεις όσο το width και το height, δηλαδή 218x143. Αφήνουμε το padding γιατί η εικόνα που θα τοποθετήσουμε έχει 40 pixel ένα μικρό κείμενο, και δε θέλουμενα πέσουν τα γράμματα πάνω στο κείμενο. Το κείμενο που έχει η εικόνα είναι το: το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων. Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container θα πρέπει να γράψουμε το παρακάτω: <div id="retouch"> Οπότε θα έχουμε το παρακάτω (Προσέξτε που ανοίγει και που κλείνει το κάθε div): <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> 2 Total element width = width + left padding + right padding + left border + right border + left margin + right margin, Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 7
8 Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.6): (3.6)Σελίδα που δημιουργήσατε Το επόμενο div θα είναι το content1 δηλαδή το «κουτί» που βρίσκεται δεξιά του retouch. #content1 { float:left; background-image:url(main_content1.gif); width: 480px; height: 133px; margin-left:20px; padding-top:40px; padding-bottom:10px; padding-left:10px; padding-right:10px; line-height:15px; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων. Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div retouch θα πρέπει να γράψουμε το παρακάτω: 8
9 <div id="content1"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> <div id="content1"> Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.7): (3.7)Σελίδα που δημιουργήσαμε Το επόμενο div θα είναι το funny δηλαδή το μεσαίο αριστερά «κουτί» #funny { float:left; background-image:url(main_funny.gif); width: 218px; height: 143px; margin-top:20px; padding-top:40px; text-align:center; line-height:15px; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, 9
10 το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων. Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content1 θα πρέπει να γράψουμε το παρακάτω: <div id="funny"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> <div id="content1"> <div id="funny"> Προσέξτε που ανοίγει και που κλείνει το κάθε div Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.8): (3.8)Σελίδα που δημιουργήσατε Το επόμενο div θα είναι το content2 δηλαδή το «κουτί» που βρίσκεται δεξιά του funny. #content2 { float:left; background-image:url(main_content2.gif); 10
11 width: 480px; height: 133px; margin-left:20px; margin-top:20px; padding-top:40px; padding-bottom:10px; padding-left:10px; padding-right:10px; line-height:15px; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-align:center; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left και top δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά και πάνω 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του width και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων και το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση. Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div funny θα πρέπει να γράψουμε το παρακάτω: <div id="content2"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> <div id="content1"> <div id="funny"> <div id="content2"> Το επόμενο div θα είναι το random δηλαδή το κάτω αριστερά «κουτί» #random { float:left; background-image:url(main_random.gif); width: 218px; 11
12 height: 143px; margin-top:20px; padding-top:40px; text-align:center; line-height:15px; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων. Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content2 θα πρέπει να γράψουμε το παρακάτω: <div id="random"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> <div id="content1"> <div id="funny"> <div id="content2"> <div id="random"> Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.9): 12
13 (3.9)Σελίδα που δημιουργήσατε Τελευταίο div που θα τοποθετήσουμε είναι το footer: #footer { float:left; background-image:url(main_footer.jpg); width: 781px; height: 24px; padding-top:10px; text-align:center; font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 10 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 34px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων. Στην συνέχεια μέσα στο div container και κάτω από το σημείο που κλείνει το div main_content θα πρέπει να γράψουμε το παρακάτω: <div id="footer"> Οπότε θα έχουμε το παρακάτω: <div id="container"> <div id="header"> <div id="navigation"> <div id="main_content"> <div id="retouch"> <div id="content1"> <div id="funny"> <div id="content2"> <div id="random"> 13
14 <div id="footer"> Η συνολική σελίδα μας θα είναι τώρα (3.10): (3.10)Εικόνα τελικής εικόνας Κεφάλαιο 2: Φτιάχνοντας το μενού Στο κεφάλαιο αυτό θα δούμε πως θα στήσουμε το μενού με τις επιλογές μέσα στο div navigation. Πρώτα θα γράψουμε στο css αρχείο το παρακάτω: #menu { margin: 0; padding: 0; list-style-type: none; Σε αυτό το div δεν έχουμε κανένα εσωτερικό ή εξωτερικό περιθώριο καθώς επίσης λέμε ότι η οριζόντια λίστα που θα χρησιμοποιήσουμε δεν θα έχει κανένα τύπο. #menu li { display: inline; padding-right: 15px; padding-left: 17px; 14
15 Εδώ με την επιλογή li ορίζουμε ότι η λίστα μας θα είναι οριζόντια καθώς επίσης και ότι οι επιλογές μεταξύ τους θα έχουν απόσταση αριστερά 17px και δεξιά 15px. #menu a:link{ font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#ffffff; text-decoration: none; Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links στο μενού δηλαδή γραμματοσειρά, μέγεθος, στυλ, χρώμα και το text-decoration ορίζει αν θα υπάρχει κάποια υπογράμμιση ή όχι. #menu a:hover { font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#0099ff; text-decoration:underline; Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα hover των links στο μενού δηλαδή όταν περνάει το ποντίκι από πάνω και με τις επιλογές που δίνουμε του λέμε να αλλάζει το χρώμα και να υπογραμμίζεται. #menu a:visited { font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# FFFFCC; text-decoration: none; Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που έχουμε επισκεφτεί στο μενού. #menu a:active { font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# 99CCFF; text-decoration: none; Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που είναι ενεργά στο μενού. Στην συνέχεια θα προσθέσουμε το παρακάτω μέσα στο div navigation <ul id="menu"> <li><a href=" #" title="home">home</a></li> <li><a href=" #" title="portfolio">portfolio</a></li> <li><a href=" #" title="gallery">gallery</a></li> <li><a href=" #" title="tutorials">tutorials</a></li> <li><a href=" #"title="donate">donate</a></li> 15
16 <li><a href=" #" title="forum">forum</a></li> <li><a href=" #" title="about">about</a></li> <li><a href=" #" title="admin panel">admin panel</a></li> <li><a href=" #" title="contact">contact</a></li> </ul> Επίσης εδώ έχουμε χρησιμοποιήσει και το: title="home" το οποίο δίνει τίτλο στην επιλογή μας ώστε να είναι πιο φιλικό στις μηχανές αναζήτησης καθώς επίσης και όταν πηγαίνει το ποντίκι μας πάνω του να βγάζει το γνωστό κίτρινο ταμπελάκι. Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.11): (3.11)Σελίδα που δημιουργήσατε Κεφάλαιο 3: Προσθέτοντας περιεχόμενο Σε αυτό το κεφάλαιο θα δούμε πως θα προσθέσουμε περιεχόμενο μέσα στα div μας. Πρώτα απ όλα μέσα στο css αρχείο θα προσθέσουμε τα παρακάτω: img { margin-bottom:5px; Δηλώνουμε ότι όλες οι εικόνες που θα τοποθετηθούν στην ιστοσελίδα μας θα έχουν κάτω περιθώριο 5px..image { margin-left:5px; margin-right:5px; Εδώ θα δηλώσουμε μέσα στο html αρχείο μας όσες από τις εικόνες μας θα έχουν περιθώριο δεξιά και αριστερά με τον παρακάτω κώδικα (χρησιμοποιούμε την 'κλάση.image'): κώδικας: <img src="εικόνα" class="image" /> Οι δύο αυτές επιλογές είναι ανεξάρτητες μεταξύ τους 16
17 .emphasis { font-weight:bold; color:#838181; Με αυτές τις επιλογές θα τονίσουμε ορισμένες από τις λέξεις μας με τον παρακάτω κώδικα: κώδικας: <span class="emphasis">λέξη που θέλουμε </span> Τοποθετήστε μέσα στα αντίστοιχα τμήματα (div) το κείμενο που ακολουθεί: Div retouch: <img src="retouch.gif" alt="image Retouch" /> <br /> Μάθετε πως να διορθώνετε<br /> χρωματικά μία εικόνα <br /> με το Photoshop Div funny: <img src="funny.gif" alt="funny Creation" /><br /> Δημιουργήστε καταπληκτικά <br /> γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop Div content1: <span class="emphasis">adobe Photoshop</span>, or simply <span class="emphasis">photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office. Div content2: <img src="work1.jpg" alt="work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="work 3" width="134" height="111" class="image" /><br /> Δείγματα εργασιών Div random: <img src="random.gif" alt="nike Bug" /><br /> Τυχαίας εμφάνισης εικόνα Div footer: Copyright <span class="emphasis">john Doe</span>. All Rights Reserved. Template created by <span class="emphasis">eklektos</span> 17
18 Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.12): (3.12)Σελίδα που δημιουργήσαμε Κεφάλαιο 4: Προσθέτοντας αόρατο περιεχόμενο Εάν τυχόν δούμε την ιστοσελίδα μας χωρίς περιεχόμενο και χωρίς την χρήση του css τότε θα δούμε κάτι σαν το παρακάτω: Αυτό που θα κάνουμε τώρα είναι να δώσουμε τίτλο στα div μας ο οποίος θα είναι αόρατος όταν γίνεται χρήση των css και ορατός όταν δεν χρησιμοποιούνται. Προσθέτουμε στο css αρχείο μας (στις πρώτες γραμμές) τα παρακάτω: #retouch h2 { display: none; #funny h2 { display: none; 18
19 #random h2 { display: none; #content1 h2 { display: none; #content2 h2 { display: none; #header h2 { display: none; ΠΡΟΣΟΧΗ: Όλα τα παραπάνω πρέπει να τοποθετηθούν πριν από τις αντίστοιχες καταχωρήσεις του κάθε τμήματος. Δηλαδή, το #retouch h2 {.. πρέπει να τοποθετηθεί πριν από το #retouch {.. διαφορετικά θα αγνοηθούν. Όλα τα παραπάνω θα ορίσουν ότι το tag <h2></h2> που θα χρησιμοποιηθεί σε καθένα από αυτά τα div θα είναι ορατό στον κώδικα αλλά ΑΟΡΑΤΟ στην διάταξη της ιστοσελίδας. Στην html σελίδα μας αρκεί να προθέσουμε μέσα στο div header το: <h2>ολοκληρωμένο βοήθημα σχεδίασης με CSS</h2> και αμέσως μόλις ανοίγει το div retouch το κείμενο <h2>χρωματική διόρθωση εικόνας</h2> όπως παρακάτω: <div id="retouch"><h2>χρωματική διόρθωση εικόνας</h2> <img src="retouch.gif" alt="image Retouch" /> <br /> Μάθετε πως να διορθώνετε<br /> χρωματικά μία εικόνα <br /> με το Photoshop Με την ίδια λογική προσθέτουμε όλες τις επικεφαλίδες μας στα υπόλοιπα 3 div. Επιβεβαιώστε ότι η σελίδα σας δεν έχει τροποποιηθεί στον φυλλομετρητή σας που υποστηρίζει CSS. Αν χρησιμοποιήσετε φυλλομετρητή χωρίς υποστήριξη CSS τότε θα δείτε (3.13): Για να μπορέσουμε να δούμε τη σελίδα στο Firefox ΧΩΡΙΣ CSS θα πρέπει να επιλέξουμε από το menu Προβολή->Μορφοποίηση Σελίδας-> Χωρίς μορφοποίηση 19
20 (3.13)Εικόνα χρήσης φυλλομετρητή χωρίς CSS Κεφάλαιο 5: Links σε ολόκληρο div (image sprites) Στο παρακάτω κεφάλαιο θα δούμε πως θα κάνουμε όλο το περιεχόμενο ενός div link καθώς επίσης και μία τεχνική για rollover images. Έχουμε δημιουργήσει μία εικόνα στην οποία στο πάνω μέρος της θα είναι αυτό που θα φαίνεται στην σελίδα μας και στο κάτω μέρος της αυτό που θα φαίνεται όταν κάνουμε rollover (3.14). (3.14)Αναφερόμενη εικόνα Προσθέτουμε στο css αρχείο μας το παρακάτω: div.music a{ background:url(music.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; div.music a:hover { background:url(music.gif) 0px 50px; border: 1px solid #0099FF; 20
21 Το μηδέν στο background property ορίζει από ποιο pixel θα φαίνεται η εικόνα μας, το text-indent θα απομακρύνει το text-link που έχουμε χρησιμοποιήσει ώστε να μην ειναι ορατό και το border: 1px solid #fff θα βάλει γύρω από το div ένα περίγραμμα άσπρο 1px. Όταν γίνεται rollover θα δείχνει την εικόνα από το 50 px και κάτω και το border θα αλλάζει χρώμα Και στην σελίδα μας προσθέτουμε τον παρακάτω κώδικα στο σημείο που θέλουμε να εμφανίζεται το div μας <div class="music"><a title="music" href='#'>music</a> Με παρόμοιο τρόπο κατασκευάστε το CSS και τα DIV για: games.gif photos.gif photoshop.gif fonts.gif firefox.gif dreamweaver.gif chat.gif .gif Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.15): (3.15)Σελίδα που δημιουργήσαμε 21
22 Κεφάλαιο 6: Εισαγωγή ημερομηνιών σε όμορφα πλαίσια Στο κεφάλαιο αυτό θα δούμε πως μπορούμε να προσθέσουμε στην ιστοσελίδα μας έξυπνες και όμορφες ημερομηνίες για τα θέματά μας. Θα χρειαστούμε δύο εικόνες Στο css αρχείο μας θα προσθέσουμε το παρακάτω:.date { display:block; text-align: center; float:left; font-family: Arial, Helvetica, sans-serif; background:url(clip-bottom.png) right bottom no-repeat; margin-right:2px; width:40px; display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. text-align: κεντρική στοίχιση float:left τοποθέτηση στα αριστερά font-family: επιλογή γραμματοσειράς background: εικόνα φόντου τοποθετημένη κάτω αριστερά και μη επαναλαμβανόμενη margin-right απόσταση από δεξιά width: πλάτος.month { display:block; font-size: 10px; padding-top:12px; background:url(clip-top.gif) center top repeat-x; display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. font-size: Μέγεθος γραμματοσειράς padding-top: απόσταση του περιεχομένου από το πάνω μέρος background: εικόνα φόντου τοποθετημένη πάνω κέντρο και επαναλαμβανόμενη μόνο οριζόντια 22
23 .day { display:block; font-size:14px; display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. font-size: Μέγεθος γραμματοσειράς Μέσα στο html αρχείο μας και στο σημείο που θέλουμε να εμφανίζετε η ημερομηνία θα γράψουμε το παρακάτω: <acronym class="date" title="9 Ιανουαρίου 2007"> <span class="month">ιαν</span> <span class="day">9</span> </acronym> Τοποθετήστε μια ημερομηνία στο div που έχει την εικόνα about adove photoshop Επιβεβαιώστε ότι έχετε δημιουργήσει την παρακάτω σελίδα (3.16): (3.16) Σελίδα που δημιουργήσατε Κεφάλαιο 7: Printer friendly pages Στο κεφάλαιο αυτό θα δούμε πως θα δημιουργήσουμε φιλικές προς εκτύπωση σελίδες, δηλαδή να εκτυπώνει μόνο τα div που θέλουμε και όχι ολόκληρη την σελίδα. Στο css αρχείο θα γράψουμε το print{ body{ background-color:#ffffff; background-image:none; color:# #header{ display:none; #navigation{ display:none; #footer{ display:none; #main_content{ width:100%; img {display:none; body Ορίζουμε την σελίδα μας λευκή με μαύρα γράμματα χωρίς background display:none Ορίζουμε τι δεν θέλουμε να εκτυπώνουμε 23
24 width:100% Ορίζουμε αυτό που θέλουμε να εκτυπώνουμε να πιάνει το 100% της σελίδας μας. Επιβεβαιώστε ότι όταν κάνετε 'προεπισκόπηση εκτύπωσης' βλέπετε το παρακάτω : (3.17)Εικόνα προεπισκόπησης εκτύπωση ==> Επιβεβαιώστε ότι η σελίδα index.html και το αρχείο στυλ index.css είναι έγκυρα XHTML αρχεία με να το επισκεφτείτε τη σελίδα επικύρωσης XHTML: Το CSS αρχείο μπορεί να επικυρωθεί από τη διεύθυνση: Αν η επικύρωση είναι σωστή, αντιγράψτε το html κώδικα που θα σας δοθεί από το site στο τέλος του index.html (πριν το </body>) 24
Εμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Διαβάστε περισσότεραΕργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Διαβάστε περισσότεραCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Διαβάστε περισσότερα<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Διαβάστε περισσότεραΔιάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Διαβάστε περισσότεραΗ Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Διαβάστε περισσότεραΑ ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Διαβάστε περισσότεραΣπουδές 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
Διαβάστε περισσότερα1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Διαβάστε περισσότεραCSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Διαβάστε περισσότεραΣτην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Διαβάστε περισσότεραΓραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε
Διαβάστε περισσότεραΕτικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Διαβάστε περισσότεραΓαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική
Διαβάστε περισσότεραCSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΤο απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Διαβάστε περισσότεραCSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Διαβάστε περισσότεραΒασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Διαβάστε περισσότεραΣτοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
Διαβάστε περισσότεραΝέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Διαβάστε περισσότεραΗ γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Διαβάστε περισσότεραΘέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Διαβάστε περισσότεραΗ γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
Διαβάστε περισσότεραEurope Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Διαβάστε περισσότεραΠρογραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 01 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Διαβάστε περισσότεραCSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης
CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά
Διαβάστε περισσότεραΕργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Διαβάστε περισσότεραΓλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Διαβάστε περισσότεραΣτις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,
Διαβάστε περισσότεραΗ ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Διαβάστε περισσότεραCSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Διαβάστε περισσότεραCSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Διαβάστε περισσότεραΠεριεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
Διαβάστε περισσότεραCSS Εργαστήριο 5. Θέση και διάταξη
Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα
Διαβάστε περισσότεραΗ Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
Διαβάστε περισσότεραCSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας. Ανδρέας Αθανασόπουλος
CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας Ανδρέας Αθανασόπουλος Πλαϊνή στήλη πλοήγησης Αντικείμενο: Πρόβλημα: Λογισμικό: Ρύθμιση χρώματος και μήκους Πώς δίνουμε χρώμα φόντου και παράλληλα
Διαβάστε περισσότερα3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
Διαβάστε περισσότεραΆσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Διαβάστε περισσότεραΠοιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Διαβάστε περισσότεραΠρογραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 6 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 3 Απριλίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Positioning Responsive
Διαβάστε περισσότεραΣχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Διαβάστε περισσότεραΕισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Διαβάστε περισσότερα12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».
12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη
Διαβάστε περισσότεραΓαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός
Διαβάστε περισσότεραΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
Διαβάστε περισσότεραCascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Διαβάστε περισσότεραΔιάλεξη 6η CSS Advanced
Διάλεξη 6η CSS Advanced Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e. (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Block & Inline elements Advanced
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Διαβάστε περισσότεραΣχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Διαβάστε περισσότεραΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Διαβάστε περισσότεραΕκπαιδευτικά Περιβάλλοντα Διαδικτύου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Διαβάστε περισσότεραΠρογραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 5 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 27 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Ιεραρχία CSS Selectors
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
Διαβάστε περισσότεραΝέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
Διαβάστε περισσότεραΕισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Διαβάστε περισσότεραΕισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Διαβάστε περισσότεραΣημασιολογικός Ιστός (Semantic Web) - XML
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων
Διαβάστε περισσότεραΣε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers
Διαβάστε περισσότεραΠίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).
Διαβάστε περισσότεραΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Διαβάστε περισσότεραΚεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Διαβάστε περισσότεραΠίνακες. ιδιότητες ετικέτας <tr>
Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)
Διαβάστε περισσότεραΨηφιακή Σχεδίαση. Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ No:07. Δρ. Μηνάς Δασυγένης. Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών
Ψηφιακή Σχεδίαση Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ No:07 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και Αρχιτεκτονικής Υπολογιστών http:
Διαβάστε περισσότεραΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Διαβάστε περισσότερα<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
Διαβάστε περισσότεραCTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Μορφοποίηση Αριθμών 2. Αλλαγή Μεγέθους Και Τύπου Γραμματοσειράς 3. Χρησιμοποίηση Πλάγιων, Έντονων, Υπογραμμισμένων Χαρακτήρων 4. Αλλαγή Χρώματος Γραμματοσειράς 5. Παράθυρο Διαλόγου
Διαβάστε περισσότεραHyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
Διαβάστε περισσότεραΕισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Διαβάστε περισσότεραΠρογραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 11 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Διαβάστε περισσότεραΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
Διαβάστε περισσότεραΠίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Διαβάστε περισσότεραΘέμα πτυχιακής εργασίας: ΑΝΑΠΤΥΞΗ ΕΜΠΟΡΙΚΟΥ ΠΑΚΕΤΟΥ ΓΙΑ ΕΠΙΧΕΙΡΙΣΗ ΧΟΝΔΡΙΚΗΣ ΜΕ ΧΡΗΣΗ CMS. Επιμέλεια: Κασσαβέτη Ευγενία, Παρχαρίδου Μαρία
Θέμα πτυχιακής εργασίας: ΑΝΑΠΤΥΞΗ ΕΜΠΟΡΙΚΟΥ ΠΑΚΕΤΟΥ ΓΙΑ ΕΠΙΧΕΙΡΙΣΗ ΧΟΝΔΡΙΚΗΣ ΜΕ ΧΡΗΣΗ CMS Επιμέλεια: Κασσαβέτη Ευγενία, Παρχαρίδου Μαρία ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή Παγκόσμιος Ιστός Πρωτόκολλα Γλώσσες Ηλεκτρονικό
Διαβάστε περισσότεραΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Διαβάστε περισσότεραΆσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων.
Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα
Διαβάστε περισσότεραΕΠΛ 012. ιαδοχικά Φύλλα Στυλ
ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS) Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών
Διαβάστε περισσότεραΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Διαβάστε περισσότεραΗ Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά
Διαβάστε περισσότεραΣε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Διαβάστε περισσότεραΕπαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Διαβάστε περισσότεραΆσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει
Διαβάστε περισσότεραΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε
Διαβάστε περισσότεραΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας
ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική
Διαβάστε περισσότεραΕνότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων
Ενότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων 17.1 Το παράθυρο Print Preview Θέλουμε να τυπώσουμε το φύλλο εργασίας μας. Πρέπει όμως να σιγουρευτούμε ότι οι σωστές γραμμές και στήλες θα
Διαβάστε περισσότεραΑρχιτεκτονική Υπολογιστών Ασκήσεις Εργαστηρίου
Αρχιτεκτονική Υπολογιστών Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Διαβάστε περισσότεραCTEC-153: ΦΥΛΛΑ ΕΡΓΑΣΙΑΣ
ΜΑΘΗΜΑ 7 ΣΤΟΧΟΙ: 1. Προσανατολισμός Σελίδας Ενός Φύλλου Εργασίας 2. Τροποποίηση Περιθωρίων Φύλλου Εργασίας 3. Στοίχιση Δεδομένων Στο Κέντρο Της Σελίδας Οριζόντια Και Κάθετα 4. Αλλαγή Μεγέθους Χαρτιού 5.
Διαβάστε περισσότεραΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών
Διαβάστε περισσότεραΚεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Διαβάστε περισσότερα2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Διαβάστε περισσότερα