HTML example 1 html html head titleA Simple
- Slides: 44
Μια απλή HTML σελίδα (example 1. html) <html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. </body> </html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 6
Παράδειγμα (example 2. html) <html> <body> <b> This </b> is a hypermedia document. <p><img src=“flower. jpeg”></p> <p>This document has <a href=http: //www. asfa. gr>hyperlinks</a></p> </body> </html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 11
Τα βασικά tags (main_tags. html) (1) <!-- This is just a comment! --> <html> <head> <title>A Simple Webpage</title> </head> <body> <p> This is a simple webpage. </p> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 14
Τα βασικά tags (main_tags. html) (2) <h 1> This is heading 1 </h 1> <h 2> This is heading 2 </h 2> <h 3> This is heading 3 </h 3> <h 4> This is heading 4 </h 4> <h 5> This is heading 5 </h 5> <h 6> This is heading 6 </h 6> <h 7> This is heading 7 </h 7> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 15
Τα βασικά tags (main_tags. html) (3) <p>This text contains a line break</p> <p>This is some text <hr> This is some text</p> </body> </html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 16
text. html (1) <html> <head> <title>The lyrics of a U 2 song</title> </head> <body> <h 1> <font face="Verdana" color="darkblue"> Song Lyrics </font> <h 1> <h 2><font face="Arial">Band name: U 2</font></h 2> <p> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 21
text. html (2) <font face="Verdana" color="#808000" size=3 px> Is there a time for keeping your distance, a time to turn your eyes away Is there a time for keeping your head down, for getting on with your day Is there a time for kohl and lipstick, a time for cutting hair Is there a time for high street shopping, to find the right dress to wear </font></p> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 22
text. html (3) <hr width=50% align=left size=5 px> <p><font color="darkblue"> <i> Miss Sarajevo, U 2 From the film "Miss Sarajevo" (Bill Carter US) </i> </font></p> </body> </html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 23
Λίστες (list_1. html) (1) <html> <body> <h 4> Disc bullets list: </h 4> <ul type="disc"> <li>Apples</li> <li>Lemons</li> </ul> <h 4>Circle bullets list: </h 4> <ul type="circle"> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 32
Λίστες (list_1. html) (2) <li>Apples</li> <li>Bananas</li> </ul> <h 4>Square bullets list: </h 4> <ul type="square"> <li>Lemons</li> <li>Oranges</li> </ul> </body></html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 33
Λίστες (list_2. html) (3) <h 4>Lowercase letters list: </h 4> <ol type="a"> <li>Bananas</li> <li>Lemons</li> </ol> </body> </html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 36
Λίστες (list_3. html) <html> <body> <h 4> Definition list: </h 4> <dl type="disc"> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl></body></html> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 37
Λίστες (list_4. html) (1) <html> <body> <h 4>A nested List: </h 4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea </li> <li>Green tea</li> 22/12/2006 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» 38