SlideShare a Scribd company logo
1 of 109
O Παγκόσμιος Ιστός World Wide Web (WWW)
Υπηρεσίες Παγκόσμιου Ιστού ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Η αρχή ... ,[object Object],[object Object],CERN: Conseil European pour la Recherche Nucleaire
[object Object],[object Object],[object Object],[object Object]
Διευθύνσεις ΙΣΤΟΥ  (URL) ,[object Object],[object Object],[object Object],[object Object]
Μοντέλο Client-Server ,[object Object],[object Object]
Μοντέλο Client-Server ,[object Object],[object Object],[object Object],[object Object]
WEB BROWSERS ,[object Object],[object Object],[object Object],[object Object]
Σημερινοί Browsers ,[object Object],[object Object],[object Object],[object Object]
HTML:  Η ΓΛΩΣΣΑ ΤΟΥ WEB ,[object Object],[object Object],[object Object],[object Object],[object Object]
Παράδειγμα HTML αρχείου ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Eτικέτες  (tags)  HTLM ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Σχόλια στην  HTML ,[object Object],[object Object],[object Object],[object Object]
Eξαιρέσεις & Eκπλήξεις ,[object Object],[object Object],[object Object],[object Object]
ΤΙΤΛΟΙ   &  ΕΠΙΚΕΦΑΛΙΔΕΣ ,[object Object],[object Object],[object Object],[object Object],[object Object]
Παράμετροι  ετικετών ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Η ετικέτα  νέας παραγράφου ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι με άλλα έγγραφα (links)   ,[object Object],[object Object],[object Object]
Σύνδεσμοι  ... ,[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι  ... ,[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι σε άλλους  servers   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι για Email ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι με καθορισμένα σημεία εντός αρχείων. ,[object Object],[object Object],[object Object],[object Object]
Σύνδεσμοι μέσα στο ίδιο αρχείο ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ΛΙΣΤΕΣ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ΛΙΣΤΕΣ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Λίστες -Παράμετροι ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<OL TYPE = 1>  ισοδυναμεί με  <OL>
Λίστες -Παράμετροι ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],κλπ . . .
Λίστες -Παράμετροι ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Λίστες -Παράμετροι Εάν αντικαταστήσουμε την ετικέτα  <OL  START=3 >  με την   <OL  START=3 TYPE=A >  θα έχουμε: C. Apples D. Oranges G. Grapes H. Bananas Λίστες -Παράμετροι Εάν αντικαταστήσουμε την ετικέτα  <OL  START=3 >  με την  <OL  START=3 TYPE=i >  θα έχουμε:   iii. Apples   iv. Oranges vii. Grapes viii. Bananas
[object Object],[object Object],[object Object],[object Object],Λίστες Ορισμού Παράδειγμα <DL> <DT> Fortran <DD> Γλώσσα προγραμματισμού κατάλληλη για  επιστημονικούς υπολογισμούς. <DT> C <DD> Γλώσσα προγραμματισμού κατάλληλη για  προγραμματισμό συστημάτων. </DL>
Λίστες Ορισμού ,[object Object],[object Object],[object Object],[object Object],[object Object]
Προκαθορισμένη &quot; ως έχει &quot; μορφή. ,[object Object],<PRE> PROGRAM FARCEL  WRITE(*,*)'TEMPERATURE IN FAHRENHEIT ? '  READ(*,*) FAR  CELCIU = (FAR-32)*5./9.  WRITE(*,*) ' FAHRENHEIT', ' CELCIUS '  WRITE(*,*) FAR,CELCIU  END </PRE>
Eτικέτες  επεξεργασίας κειμένου ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Παραδείγματα ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Κεντράρισμα,  αλλαγή γραμμής ... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Εικόνες στην HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
H ετικέτα  <IMG> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Εικόνες - Σύνδεσμοι  ,[object Object],[object Object],[object Object],[object Object],[object Object]
Φόντο σελίδας ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Επιπλέον εντολές  ,[object Object],[object Object],[object Object],[object Object],[object Object]
Ετικέτα  BASEFONT ,[object Object],[object Object],[object Object],[object Object]
Πίνακες <TABLE> <CAPTION>The Bradys</CAPTION> <TR> <TD> Marcia </TD> <TD> Carol </TD> <TD> Greg </TD> </TR> <TR> <TD> Jan </TD> <TD> Alice </TD> <TD> Peter </TD> </TR> <TR> <TD> Cindy </TD> <TD> Mike </TD> <TD>Bobby </TD> </TR> </TABLE> The Bradys  Marcia Carol Greg Jan   Alice  Peter Cindy  Mike  Bobby
Επεξηγήσεις ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Table  Row Table  Data
<TABLE  BORDER=&quot;3&quot;   CELLSPACING=&quot;1&quot;  CELLPADDING=&quot;1&quot; > <CAPTION>The Bradys</CAPTION> <TR> <TD  ALIGN = &quot;center&quot; > Agnes </TD> <TD ALIGN = &quot;center&quot;> Wilma </TD> <TD ALIGN = &quot;center&quot;> George </TD> </TR> <TR> <TD ALIGN = &quot;center&quot;> Gwen </TD> <TD ALIGN = &quot;center&quot;> Skippy </TD> <TD ALIGN = &quot;center&quot;> Alvin </TD> </TR> <TR> <TD ALIGN = &quot;center&quot;> Harry </TD> <TD ALIGN = &quot;center&quot;> Melvin </TD> <TD ALIGN = &quot;center&quot;> Joe </TD> </TR> </TABLE> The Bradys Agnes Gwen Harry Wilma Skippy Alvin George Melvin Joe
Επεξηγήσεις ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<TD  ALIGN = &quot;center&quot; > Agnes </TD> Κανονίζει  την θέση του κειμένου στο κελί. Δυνατές τιμές:  &quot;left&quot;, &quot;center&quot;, &quot;right&quot;
ΣΥΝΘΕΤΟΙ  ΠΙΝΑΚΕΣ Partial Subtotals 1999-2000 Tax 2001 TOTAL
ΠΑΡΑΔΕΙΓΜΑ <html><head><title>Strange</title></head> <body> <table bgcolor=&quot;lightblue&quot; border=&quot;3&quot;> <tr> <td colspan=&quot;3&quot; align=&quot;center&quot; > <b>1999-2000</b></td> <th rowspan=&quot;3&quot; bgcolor=&quot;yellow&quot;>2001</th> </tr> <tr><td bgcolor=&quot;red&quot;  rowspan=&quot;2&quot; valign=&quot;middle&quot;>Tax</td>  <td>Partial</td> <td> Subtotals </td></tr> <tr> <td bgcolor=&quot;green&quot;  align=&quot;center&quot; colspan=&quot;2&quot;>TOTAL</td> </tr> </table>  </body>  </html>
EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ <html> <head> <title> Photos in Table </title></head> <body bgcolor=&quot;silver&quot;>  <H1> Many Photos </H1> <table border=&quot;0&quot; bgcolor=&quot;black&quot; cellspacing=&quot;0&quot; >  <tr align=center >  <td> <IMG src=&quot;photosgp.jpg&quot;,HEIGHT=200> </td> <td> <IMG src=&quot;photosrly.jpg&quot;, HEIGHT=200> </td> </tr>   <tr align=center> <td><IMG src=&quot;photosikolop04.jpg&quot; height=200></td> <td><IMG src=&quot;photosupport.jpg&quot; height=200></td> </tr> </table> </body> </html>
Many Photos
Πλαίσια  (frames) Δυνατότητα  παρουσιάσεων με χρήση πολλών παραθύρων
Ποιοί υποστηρίζουν τα πλαίσια ,[object Object],[object Object],Στην HTML 4.0 τα πλαίσια έχουν ενσωματωθεί. Σήμερα χρησιμοποιούνται ευρύτατα.
Συνδεδεμένα Παράθυρα ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ΠΑΡΑΔΕΙΓΜΑ <html> <head> </head> <body> <h1> HI there </h1> You can see your  <a href =&quot;grades.html&quot;  target=&quot;new&quot;>  grades here </a> </body></html> <html><head></head> <body> <UL> <li>Math 19 <li>Phys 18 <li>Comp 16 <li>Lite 19 </UL> </body></html> ΑΡΧΕΙΟ  grades.html Η πρώτη σελίδα εμφανίζεται ως: HI there   You can see your  grades here
[object Object],[object Object],[object Object],[object Object],HI there   You can see your  grades here
Η ετικέτα BASE <BASE  TARGET= &quot;ΌΝΟΜΑ_ΠΑΡΑΘΥΡΟΥ&quot; > ,[object Object],[object Object]
<html><head>< base target=&quot;profs&quot; ></head> <body> <UL> <li> <a href=math.txt>Math 19 </a> <li> <a href=phys.txt>Phys 18 </a> <li> <a href=comp.txt>Comp 16 </a> <li> <a href=lite.txt>Lite 19 </a> </UL> </body></html> Αρχείο Mathematics Professor: C. F.Gauss Physics Professor: A. Einstein Comp. Science Professor: A. Turing Literature Professor: S. Bellow Περιεχόμενα math.txt phys.txt comp.txt lite.txt
Ετικέτες:  FRAMESET &  FRAME Με τις ετικέτες  FRAMESET  καθορίζουμε την δομή του πλαισίου, που απαρτίζεται από διαφορετικά παράθυρα.  Με τις ετικέτες  FRAME  καθορίζουμε τα περιεχόμενα των διαφορετικών παραθύρων του πλαισίου.
FRAMESET ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<frameset COLS=&quot;110,30%,*&quot;>   </frameset> Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις στήλες . Η πρώτη έχει  εύρος 110 pixels , η δεύτερη έχει  εύρος ίσον προς το 30%  της σελίδας, και η τρίτη προσαρμόζεται στο  εναπομένον εύρος . 110  270  520
<frameset ROWS=&quot;110,30%,*&quot;>   </frameset> ,[object Object],[object Object],[object Object],[object Object],110  270  520
Κάθε μέρος (στήλη ή σειρά) της διαμέρισης είναι ένα διαφορετικό παράθυρο. ΣΗΜΑΝΤΙΚΟ Τα παράθυρα αυτά μπορούν να έχουν ονόματα.
FRAME Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια ετικέτα τύπου FRAME που θα καθορίζει το περιεχόμενο της διαμέρισης. <html> <head> <frameset cols=&quot;30%,*&quot;> <frame  src=&quot;grades.html&quot; > <frame  src=&quot;tex8.gif&quot;  name=&quot;new&quot; > </frameset></head></html> Χωρίζεται η σελίδα σε δύο στήλες. Η πρώτη καταλαμβάνει τα 30% του εύρους της σελίδας και τα υπόλοιπα 70% η δεύτερη .
Τα περιεχόμενα της πρώτης στήλης καθορίζονται από το αρχείο  grades.html   που ορίζεται μέσω της παραμέτρου  SRC : <frame SRC=&quot;grades.html&quot;> Τα περιεχόμενα της δεύτερης στήλης καθορίζονται από το αρχείο  tex8.gif   που επίσης ορίζεται μέσω της παραμέτρου  SRC : <frame SRC=&quot;tex8.gif&quot;  name=&quot;new&quot; > Παρατηρήστε την επιπλέον παράμετρο  name=&quot;new&quot; ,   που ονομάζει το παράθυρο της δεύτερης στήλης  new .  Αυτό το όνομα μπορεί να χρησιμοποιηθεί σε συνδυασμό με την TARGET παράμετρο της ετικέτας <Α>
<html> <head> <frameset cols=&quot;30%,*&quot;> <frame  src=&quot;grades.html&quot; > <frame  name=&quot;new&quot; > </frameset></head></html> <html><head><base target=&quot;new&quot;></head> <body> <UL> <li><a href=&quot;math.txt&quot;> Math 19</a> <li><a href=&quot;phys.txt&quot;> Phys 18</a> <li><a href=&quot;comp.txt&quot;> Comp 16</a> <li><a href=&quot;lite.txt&quot;> Lite 19</a> </UL> </body></html> grades.html
[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Mathematics Professor: C. F.Gauss
[object Object],[object Object],[object Object],[object Object],Physics Professor: A. Einstein
[object Object],[object Object],[object Object],[object Object],Comp. Science Professor: A. Turing
[object Object],[object Object],[object Object],[object Object],Literature Professor: S. Bellow
Επιπλέον παράμετροι ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ετικέτες  <META> ,[object Object],[object Object],[object Object],[object Object],[object Object]
Ετικέτες  <META> ... ,[object Object],[object Object],[object Object],[object Object],[object Object]
Παραδείγματα ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Παραδείγματα ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Ετικέτες  <META>
Παραδείγματα <META  HTTP-EQUIV =&quot; expires &quot;  CONTENT =&quot; Wed, 26 Feb 1977 08:21:37 GMT &quot;> <META  HTTP-EQUIV =&quot; pragma &quot;  CONTENT =&quot; no-cache &quot;> Εντέλει τον Browser να μην αποθηκεύσει την σελίδα ούτε καν προσωρινά. <META  HTTP-EQUIV =&quot; refresh &quot;  CONTENT =&quot; 2; URL= http://www.cs.uoi.gr/   &quot;> Σε χρόνο 2 sec &quot;φορτώνει&quot; το καθορισμένο URL
Παραδείγματα ,[object Object],[object Object],[object Object],[object Object]
Κίνηση Στο αρχείο  file1 .html, υπάρχει η ετικέτα: Στο αρχείο  file2 .html, υπάρχει η ετικέτα: Κ.Ο.Κ.  ... <META  HTTP-EQUIV =&quot; refresh &quot;  CONTENT =&quot; 1; URL=  file2 .html   &quot;> <META  HTTP-EQUIV =&quot; refresh &quot;  CONTENT =&quot; 1; URL=  file3 .html   &quot;>
Μεταφορά στον Παγκόσμιο Ιστό
Ενέργειες . . .  ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],Ενέργειες . . .
 
C ascading  S tyle  S heets  ( CSS ) ,[object Object],[object Object],[object Object],[object Object]
Υποστήριξη ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Εισαγωγικά Παραδείγματα ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Η ετικέτα <STYLE> … </STYLE> Τοποθετείται μεταξύ  <head> … </head>
Επεξηγήσεις ,[object Object],[object Object],[object Object],[object Object],[object Object]
Στυλιστική Σύνταξη  ,[object Object],[object Object],[object Object],[object Object],[object Object],Απομένει να καθοριστούν οι ιδιότητες και οι αντίστοιχες τιμές.
Παραδείγματα  Ιδιοτήτων …  ,[object Object],[object Object],[object Object],[object Object]
Κατηγορίες ,[object Object],Δηλαδή η ίδια ετικέτα μπορεί να έχει περισσότερα του ενός στυλ.   ,[object Object],[object Object],[object Object],Classes
Στο παράδειγμα κατασκευάστηκαν δύο κατηγορίες για την ετικέτα  Η1. ,[object Object],[object Object],Θα μπορούν δε να χρησιμοποιούνται ως εξής : < H1  class =  norm >  Εισαγωγή   </H1> <H1  class =  enh  >  ΚΕΦΑΛΑΙΟ VI   </H1> Η και η
[object Object],.norm  { color: #0000FF; font-size: 24pt } .enh   { color: #FF2288; font-size: 32pt } Θα μπορούν δε να χρησιμοποιούνται ως εξής : <H1  class =  norm >  Εισαγωγή   </ H1 > < P   class =  enh  >  ΚΕΦΑΛΑΙΟ VI   </ P >
[object Object],[object Object],[object Object],[object Object],[object Object],Είναι προτιμητέα η χρήση των κατηγοριών
Ετικέτες σε συνάφεια Contextual selectors Παράδειγμα: P  EM { background: yellow } Το παραπάνω στυλ ερμηνεύεται ως εξής : Κείμενο που είναι εντός  και των δύο ετικετών: <P>… <EM>  κείμενο  </EM> … </P> Θα έχει  κίτρινο  φόντο. Προσοχή: Όχι κόμμα  !!!
Παράδειγμα <html><head> <style>  P  EM { background: yellow } </style>  </head> <body> <h1> Παράδειγμα </h1> <p> This is an  <em>   emphasized piece of text   </em>   and it is treated specially </p> Isn't it great ?  <P>  <em>  INDEED  </em>  !!! </p> </body></html>
Εμφάνιση Παράδειγμα This is an  emphasized piece of text and it is treated specially Isn't it great ? INDEED  !!!
Ομαδοποίηση   ,[object Object],[object Object],[object Object],Grouping Ο παραπάνω κανόνας  επιβάλει ότι για τις ετικέτες <Η1>, <Η2> και <Η3> το χρώμα θα είναι κόκκινο και η γραμματοσειρά τύπου  sans-serif.
Ψευδοκατηγορίες ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pseudo-classes Anchor pseudo-classes
Πρώτη Γραμμή - Πρώτο γράμμα ,[object Object],[object Object],[object Object],[object Object],Επηρεάζουν αντίστοιχα την πρώτη γραμμή και το πρώτο γράμμα μιας παραγράφου.
Ιδιότητες ,[object Object],[object Object],[object Object],[object Object],Ορίζονται ιδιότητες σχετικά με τις  παρακάτω έννοιες
FONT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font-Family Font-family: Name1, Name2, …, Generic1, Generic2, … P  { Font-Family:   Arial ,  Times ,  serif } Name1, Name2  είναι ονόματα γραμματοσειρών Generic1, … είναι γενικός τύπος γραμματοσειρών Δυνατές τιμές για τα Generic1, …  είναι: ,[object Object],[object Object],[object Object],[object Object],[object Object]
Font-Style ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font-Variant ,[object Object],[object Object],[object Object],[object Object],[object Object]
Font-Weight ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font-Size ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font ,[object Object],[object Object],[object Object],[object Object],[object Object]
Επιπλέον  ... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Similar to Html

ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2vaseisdedom
 
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...andreasabiou
 
Φύλλο εργασίας για HTML & CSS
Φύλλο εργασίας για HTML & CSSΦύλλο εργασίας για HTML & CSS
Φύλλο εργασίας για HTML & CSSlyk-tragaias
 
05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demoeretrianews
 
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνΒασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνpasxelfstone
 
Ws13 2(2010-11)
Ws13 2(2010-11)Ws13 2(2010-11)
Ws13 2(2010-11)vafopoulos
 
Tips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkTips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkNikos Papastamatiou
 
Βάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο ΔιαδίκτυοΒάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο ΔιαδίκτυοΘεοδώρα Μαγουλιώτη
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οDespina Kamilali
 

Similar to Html (15)

ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2
 
Html ekplog
Html ekplogHtml ekplog
Html ekplog
 
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
 
Eisagogi
EisagogiEisagogi
Eisagogi
 
Φύλλο εργασίας για HTML & CSS
Φύλλο εργασίας για HTML & CSSΦύλλο εργασίας για HTML & CSS
Φύλλο εργασίας για HTML & CSS
 
Kef4 parousiash
Kef4 parousiashKef4 parousiash
Kef4 parousiash
 
05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo
 
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνΒασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
 
Ws13 2(2010-11)
Ws13 2(2010-11)Ws13 2(2010-11)
Ws13 2(2010-11)
 
Tips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkTips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & link
 
Βάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο ΔιαδίκτυοΒάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
 
CSS
CSSCSS
CSS
 
Html
HtmlHtml
Html
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1ο
 
HTML and Javascript
HTML and JavascriptHTML and Javascript
HTML and Javascript
 

Html

  • 1. O Παγκόσμιος Ιστός World Wide Web (WWW)
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44. Πίνακες <TABLE> <CAPTION>The Bradys</CAPTION> <TR> <TD> Marcia </TD> <TD> Carol </TD> <TD> Greg </TD> </TR> <TR> <TD> Jan </TD> <TD> Alice </TD> <TD> Peter </TD> </TR> <TR> <TD> Cindy </TD> <TD> Mike </TD> <TD>Bobby </TD> </TR> </TABLE> The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby
  • 45.
  • 46. <TABLE BORDER=&quot;3&quot; CELLSPACING=&quot;1&quot; CELLPADDING=&quot;1&quot; > <CAPTION>The Bradys</CAPTION> <TR> <TD ALIGN = &quot;center&quot; > Agnes </TD> <TD ALIGN = &quot;center&quot;> Wilma </TD> <TD ALIGN = &quot;center&quot;> George </TD> </TR> <TR> <TD ALIGN = &quot;center&quot;> Gwen </TD> <TD ALIGN = &quot;center&quot;> Skippy </TD> <TD ALIGN = &quot;center&quot;> Alvin </TD> </TR> <TR> <TD ALIGN = &quot;center&quot;> Harry </TD> <TD ALIGN = &quot;center&quot;> Melvin </TD> <TD ALIGN = &quot;center&quot;> Joe </TD> </TR> </TABLE> The Bradys Agnes Gwen Harry Wilma Skippy Alvin George Melvin Joe
  • 47.
  • 48. ΣΥΝΘΕΤΟΙ ΠΙΝΑΚΕΣ Partial Subtotals 1999-2000 Tax 2001 TOTAL
  • 49. ΠΑΡΑΔΕΙΓΜΑ <html><head><title>Strange</title></head> <body> <table bgcolor=&quot;lightblue&quot; border=&quot;3&quot;> <tr> <td colspan=&quot;3&quot; align=&quot;center&quot; > <b>1999-2000</b></td> <th rowspan=&quot;3&quot; bgcolor=&quot;yellow&quot;>2001</th> </tr> <tr><td bgcolor=&quot;red&quot; rowspan=&quot;2&quot; valign=&quot;middle&quot;>Tax</td> <td>Partial</td> <td> Subtotals </td></tr> <tr> <td bgcolor=&quot;green&quot; align=&quot;center&quot; colspan=&quot;2&quot;>TOTAL</td> </tr> </table> </body> </html>
  • 50. EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ <html> <head> <title> Photos in Table </title></head> <body bgcolor=&quot;silver&quot;> <H1> Many Photos </H1> <table border=&quot;0&quot; bgcolor=&quot;black&quot; cellspacing=&quot;0&quot; > <tr align=center > <td> <IMG src=&quot;photosgp.jpg&quot;,HEIGHT=200> </td> <td> <IMG src=&quot;photosrly.jpg&quot;, HEIGHT=200> </td> </tr> <tr align=center> <td><IMG src=&quot;photosikolop04.jpg&quot; height=200></td> <td><IMG src=&quot;photosupport.jpg&quot; height=200></td> </tr> </table> </body> </html>
  • 52. Πλαίσια (frames) Δυνατότητα παρουσιάσεων με χρήση πολλών παραθύρων
  • 53.
  • 54.
  • 55. ΠΑΡΑΔΕΙΓΜΑ <html> <head> </head> <body> <h1> HI there </h1> You can see your <a href =&quot;grades.html&quot; target=&quot;new&quot;> grades here </a> </body></html> <html><head></head> <body> <UL> <li>Math 19 <li>Phys 18 <li>Comp 16 <li>Lite 19 </UL> </body></html> ΑΡΧΕΙΟ grades.html Η πρώτη σελίδα εμφανίζεται ως: HI there You can see your grades here
  • 56.
  • 57.
  • 58. <html><head>< base target=&quot;profs&quot; ></head> <body> <UL> <li> <a href=math.txt>Math 19 </a> <li> <a href=phys.txt>Phys 18 </a> <li> <a href=comp.txt>Comp 16 </a> <li> <a href=lite.txt>Lite 19 </a> </UL> </body></html> Αρχείο Mathematics Professor: C. F.Gauss Physics Professor: A. Einstein Comp. Science Professor: A. Turing Literature Professor: S. Bellow Περιεχόμενα math.txt phys.txt comp.txt lite.txt
  • 59. Ετικέτες: FRAMESET & FRAME Με τις ετικέτες FRAMESET καθορίζουμε την δομή του πλαισίου, που απαρτίζεται από διαφορετικά παράθυρα. Με τις ετικέτες FRAME καθορίζουμε τα περιεχόμενα των διαφορετικών παραθύρων του πλαισίου.
  • 60.
  • 61. <frameset COLS=&quot;110,30%,*&quot;>  </frameset> Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις στήλες . Η πρώτη έχει εύρος 110 pixels , η δεύτερη έχει εύρος ίσον προς το 30% της σελίδας, και η τρίτη προσαρμόζεται στο εναπομένον εύρος . 110 270 520
  • 62.
  • 63. Κάθε μέρος (στήλη ή σειρά) της διαμέρισης είναι ένα διαφορετικό παράθυρο. ΣΗΜΑΝΤΙΚΟ Τα παράθυρα αυτά μπορούν να έχουν ονόματα.
  • 64. FRAME Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια ετικέτα τύπου FRAME που θα καθορίζει το περιεχόμενο της διαμέρισης. <html> <head> <frameset cols=&quot;30%,*&quot;> <frame src=&quot;grades.html&quot; > <frame src=&quot;tex8.gif&quot; name=&quot;new&quot; > </frameset></head></html> Χωρίζεται η σελίδα σε δύο στήλες. Η πρώτη καταλαμβάνει τα 30% του εύρους της σελίδας και τα υπόλοιπα 70% η δεύτερη .
  • 65. Τα περιεχόμενα της πρώτης στήλης καθορίζονται από το αρχείο grades.html που ορίζεται μέσω της παραμέτρου SRC : <frame SRC=&quot;grades.html&quot;> Τα περιεχόμενα της δεύτερης στήλης καθορίζονται από το αρχείο tex8.gif που επίσης ορίζεται μέσω της παραμέτρου SRC : <frame SRC=&quot;tex8.gif&quot; name=&quot;new&quot; > Παρατηρήστε την επιπλέον παράμετρο name=&quot;new&quot; , που ονομάζει το παράθυρο της δεύτερης στήλης new . Αυτό το όνομα μπορεί να χρησιμοποιηθεί σε συνδυασμό με την TARGET παράμετρο της ετικέτας <Α>
  • 66. <html> <head> <frameset cols=&quot;30%,*&quot;> <frame src=&quot;grades.html&quot; > <frame name=&quot;new&quot; > </frameset></head></html> <html><head><base target=&quot;new&quot;></head> <body> <UL> <li><a href=&quot;math.txt&quot;> Math 19</a> <li><a href=&quot;phys.txt&quot;> Phys 18</a> <li><a href=&quot;comp.txt&quot;> Comp 16</a> <li><a href=&quot;lite.txt&quot;> Lite 19</a> </UL> </body></html> grades.html
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78. Παραδείγματα <META HTTP-EQUIV =&quot; expires &quot; CONTENT =&quot; Wed, 26 Feb 1977 08:21:37 GMT &quot;> <META HTTP-EQUIV =&quot; pragma &quot; CONTENT =&quot; no-cache &quot;> Εντέλει τον Browser να μην αποθηκεύσει την σελίδα ούτε καν προσωρινά. <META HTTP-EQUIV =&quot; refresh &quot; CONTENT =&quot; 2; URL= http://www.cs.uoi.gr/ &quot;> Σε χρόνο 2 sec &quot;φορτώνει&quot; το καθορισμένο URL
  • 79.
  • 80. Κίνηση Στο αρχείο file1 .html, υπάρχει η ετικέτα: Στο αρχείο file2 .html, υπάρχει η ετικέτα: Κ.Ο.Κ. ... <META HTTP-EQUIV =&quot; refresh &quot; CONTENT =&quot; 1; URL= file2 .html &quot;> <META HTTP-EQUIV =&quot; refresh &quot; CONTENT =&quot; 1; URL= file3 .html &quot;>
  • 82.
  • 83.
  • 84.  
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95. Ετικέτες σε συνάφεια Contextual selectors Παράδειγμα: P EM { background: yellow } Το παραπάνω στυλ ερμηνεύεται ως εξής : Κείμενο που είναι εντός και των δύο ετικετών: <P>… <EM> κείμενο </EM> … </P> Θα έχει κίτρινο φόντο. Προσοχή: Όχι κόμμα !!!
  • 96. Παράδειγμα <html><head> <style> P EM { background: yellow } </style> </head> <body> <h1> Παράδειγμα </h1> <p> This is an <em> emphasized piece of text </em> and it is treated specially </p> Isn't it great ? <P> <em> INDEED </em> !!! </p> </body></html>
  • 97. Εμφάνιση Παράδειγμα This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.