Tim BernersLee HYPERTEXT PROJECT 1989 CERN Conseil European
Η αρχή. . . Tim Berners-Lee HYPERTEXT PROJECT 1989 CERN: Conseil European pour la Recherche Nucleaire
WEB BROWSERS Ο πρώτος browser δημιουργήθηκε στο NCSA (National Center for Supercomputing Applications) University of Illinois MOSAIC το όνομα του πρώτου browser Χρονολογία 1992 -1993 Από τον Marc Andreessen και ομάδα άλλων φοιτητών
Σημερινοί Browsers Netscape Internet Explorer Amaya Hot. Java. . .
Λίστες -Παράμετροι 3. Apples 4. Oranges 7. Grapes 8. Bananas Εάν αντικαταστήσουμε την ετικέτα <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
Πίνακες <TABLE> <CAPTION>The Bradys</CAPTION> <TR> <TD> Marcia </TD> <TD> Carol </TD> <TD> Greg </TD> </TR> <TD> Jan </TD> <TD> Alice </TD> <TD> Peter </TD> </TR> <TD> Cindy </TD> <TD> Mike </TD> <TD>Bobby </TD> </TR> </TABLE> The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby
<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1"> <CAPTION>The Bradys</CAPTION> <TR> <TD ALIGN = "center"> Agnes </TD> <TD ALIGN = "center"> Wilma </TD> <TD ALIGN = "center"> George </TD> </TR> <TD ALIGN = "center"> Gwen </TD> <TD ALIGN = "center"> Skippy </TD> <TD ALIGN = "center"> Alvin </TD> </TR> <TD ALIGN = "center"> Harry </TD> <TD ALIGN = "center"> Melvin </TD> <TD ALIGN = "center"> Joe </TD> </TR> </TABLE> The Bradys Agnes Wilma George Gwen Skippy Alvin Harry Melvin Joe
ΠΑΡΑΔΕΙΓΜΑ <html><head><title>Strange</title></head> <body> <table bgcolor="lightblue" border="3"> <tr> <td colspan="3" align="center" > <b>1999 -2000</b></td> <th rowspan="3" bgcolor="yellow">2001</th> </tr> <tr><td bgcolor="red" rowspan="2" valign="middle">Tax</td> <td>Partial</td> <td> Subtotals </td></tr> <td bgcolor="green" align="center" colspan="2">TOTAL</td> </tr> </table> </body> </html>
EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ <html> <head> <title> Photos in Table </title></head> <body bgcolor="silver"> <H 1> Many Photos </H 1> <table border="0" bgcolor="black" cellspacing="0" > <tr align=center > <td> <IMG src="photosdgp. jpg", HEIGHT=200> </td> <IMG src="photosarly. jpg", HEIGHT=200> </td> </tr> <tr align=center> <td><IMG src="photosnikolop 04. jpg" height=200></td> <td><IMG src="photossupport. jpg" height=200></td> </tr> </table> </body> </html>
ΠΑΡΑΔΕΙΓΜΑ <html> <head> </head> <body> <h 1> HI there </h 1> You can see your <a href ="grades. html" target="new"> grades here</a> </body></html>
<html><head><base target="profs"></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> Αρχείο
<html> <head> <frameset cols="30%, *"> <frame src="grades. html"> <frame name="new"> </frameset></head></html>
• Math 19 • Phys 18 • Comp 16 • Lite 19
• Math 19 • Phys 18 • Comp 16 • Lite 19 Mathematics Professor: C. F. Gauss
• Math 19 • Phys 18 • Comp 16 • Lite 19 Physics Professor: A. Einstein
• Math 19 • Phys 18 • Comp 16 • Lite 19 Comp. Science Professor: A. Turing
• Math 19 • Phys 18 • Comp 16 • Lite 19 Literature Professor: S. Bellow
Ετικέτες <META>. . . <META NAME="XXX" CONTENT="YYY"> XXX παίρνει διάφορες τιμές όπως: description keywords generator copyright expires author YYY είναι κείμενο
Ετικέτες <META> <META HTTP-EQUIV="XX" CONTENT="YY"> Με ΧΧ και με αντίστοιχο ΥΥ expires Wed, 26 Feb 1977 08: 21: 37 GMT pragma no-cache refresh 2; URL= http: //www. cs. uoi. gr/ set-cookievalue=2; path=/ window-target _top content-type text/html; charset=iso-8859 -7
Παραδείγματα <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1977 08: 21: 37 GMT"> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> Εντέλει τον Browser να μην αποθηκεύσει την σελίδα ούτε καν προσωρινά. <META HTTP-EQUIV="refresh" CONTENT="2; URL= http: //www. cs. uoi. gr/ "> Σε χρόνο 2 sec "φορτώνει" το καθορισμένο URL
Υποστήριξη Netscape Navigator 4. 0 Microsoft Internet Explorer 4. 0 Emacs Arena Amaya . . . και συνεχώς η λίστα αυξάνει .
Εισαγωγικά Παραδείγματα Η ετικέτα <STYLE> … </STYLE> Τοποθετείται μεταξύ <head> … </head> <HEAD> <TITLE> CSS Example </TITLE> <STYLE TYPE="text/css"> H 1 {font-size: 32 pt; color: red} H 2 {font-size: 24 pt; color: blue} </STYLE> </HEAD>
Παράδειγμα <html><head> <style> P EM { background: yellow } </style> </head> <body> <h 1> Παράδειγμα </h 1> <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>
FONT Font-Family Font-Style Font-Variant Font-Weight Font-Size Font
Font-Family Font-family: Name 1, Name 2, …, Generic 1, Generic 2, … P {Font-Family: Arial, Times, serif} Name 1, Name 2 είναι ονόματα γραμματοσειρών Generic 1, … είναι γενικός τύπος γραμματοσειρών Δυνατές τιμές για τα Generic 1, … είναι: • serif Times • sans-serif Arial • cursive Zapf-Chancery • fantasy Western • monospace Courier
Font-Style Font-Style: XXX Όπου: XXX μπορεί να είναι: normal italic oblique H 1 { font-style: oblique } P { font-style: normal }
Font-Variant: XXX Όπου: XXX μπορεί να είναι: normal small-caps H 1 { font-variant: small-caps }
Font-Weight: XXX Όπου: XXX μπορεί να είναι: normal bolder lighter 100 200 … 900 H 1 { font-weight: 800 } P { font-weight: 300 }
Font-Size Font-Size: XXX Όπου: XXX μπορεί να είναι: xx-small medium large xx-large larger smaller Aριθμός σε pt ή in (points/inches) Αριθμός σε % P { font-size: 90% }
Font Font: XXX Όπου: XXX μπορεί να είναι: font-style font-variant font-weight font-size/line-height P { font: italic bold 12 pt/14 pt Times, serif }
- Slides: 109