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

Transcript

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

2 Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML

3 Τί θα δούμε.. Τί είναι η HTML. Σε τί χρησιμεύει. Εκδόσεις. Tags, elements, attributes Head: meta, title Body: background color, headings, paragraphs, BR, styles και formatting, comments, lists Links (internal, external) Images Tables, Forms Div CSS (Inline, Internal, External)

4 HyperText Markup Language (Γλώσσα μορφοποίησης υπερκειμένου) Απλός και κομψός τρόπος δόμησης του περιεχομένου των ιστοσελίδων (web pages) και διαμόρφωσης της εμφάνισής τους. Δεν πρόκειται για μία γλώσσα προγραμματισμού, αλλά για μια γλώσσα περιγραφής ιδιοτήτων των στοιχείων που αποτελούν μία ιστοσελίδα. Η HTML αποτελεί υποσύνολο της γλώσσας SGML (Standard Generalized Markup Language) που δημιούργησε η IBM προκειμένου να λυθεί το πρόβλημα της μη τυποποιημένης εμφάνισης κειμένων στα διάφορα συστήματα.

5 Κάθε ιστοσελίδα είναι ένα text αρχείο γραμμένο με τη γλώσσα HTML που περιλαμβάνει: το κείμενο της σελίδας, τη δομή της, τους συνδέσμους προς άλλα έγγραφα ή ιστότοπους, εικόνες ή άλλα μέσα. Τύπος αρχείου: filename.html ή filename.htm

6 (2) Για τη δόμηση και διαμόρφωση του περιεχομένου των ιστοσελίδων, η HTML χρησιμοποιεί ειδικές ετικέτες (tags). Τα tags αναγνωρίζονται από τους διάφορους browsers (chrome, firefox, edge, opera, κλπ.), έτσι ώστε να παρουσιάζουν με ανάλογο τρόπο το περιεχόμενο των ιστοσελίδων. Αρχικά η HTML περιελάμβανε tags για μορφοποίηση απλού κειμένου, αλλά εξελίχθηκε και πλέον μπορεί και εντάσει σχεδιαστικές τεχνικές, ήχο, εικόνες, βίντεο, γραφήματα, φόρμες κ.α.

7 (3) Ο φυλλομετρητής (web browser) παίρνει τις πληροφορίες από τον web server και τις εμφανίζει κατάλληλα με βάση τα HTML tags. Διαφορετικοί browsers μπορεί να εμφανίζουν το ίδιο αρχείο με διαφορετικό τρόπο, ανάλογα με τις δυνατότητες του συστήματος (υπολογιστής, tablet, smartphone, κλπ.) στο οποίο τρέχουν και τις επιλογές διαμόρφωσης του προγράμματος του browser.

8 Εκδόσεις (εξέλιξη) της HTML Έκδοση Έτος HTML 1991 HTML HTML HTML XHTML 2000 HTML5 2014

9 Πως γράφουμε HTML 1. Ανοίγουμε έναν text editor για τη συγγραφή απλού κειμένου, όπως το notepad ή το notepad++ 2. Γράφουμε τον κώδικα της HTML σελίδας μας 3. Αποθηκεύουμε το text αρχείο με κατάληξη.htm ή.html 4. Ανοίγουμε το αρχείο με κάποιο browser (firefox, chrome, internet explorer/edge, opera, κλπ.)

10 1. Ανοίγουμε ένα text editor

11 2. Γράφουμε τον κώδικα της HTML σελίδας

12 3. Αποθηκεύουμε τη σελίδα myfirstpage.html

13 4. Ανοίγουμε το αρχείο από ένα browser Οι browsers δεν δείχνουν τα HTML tags, τα χρησιμοποιούν για να παρουσιάσουν το περιεχόμενο.

14 Η δομή μιας HTML σελίδας

15 Βασικά HTML tags <html>..</html> tag: δηλώνει στο φυλλομετρητή ότι το αρχείο περιέχει πληροφορία σε κώδικα HTML. Αυτό δηλώνεται και από την κατάληξη του αρχείου.html <head>..</head> element: περιέχει μετα-πληροφορίες σχετικές με το κείμενο που τις χρησιμοποιεί ο browser και δεν παρουσιάζονται στους χρήστες (αποτελεί το 1 ο μέρος του html αρχείου) <body>..</body> element: περιέχει όλη την πληροφορία της σελίδας που θα εμφανίζεται στο χρήστη

16 Tags (ετικέτες) Το περιεχόμενο περικλείεται μέσα σε tags. Τα tags προσδιορίζουν τον τρόπο δόμησης και παρουσίασης του περιεχομένου. Τα περισσότερα tags χρησιμοποιούνται σε ζεύγη: tag αρχής και tag τέλους <tagname> περιεχόμενο </tagname> Υπάρχουν και self-closing tags: π.χ. <br> ή <br />

17 HTML elements (στοιχεία) Είναι τα δομικά στοιχεία (blocks) των HTML σελίδων Τα elements προσδιορίζονται από tags (συνήθως start και end tag) Παραδείγματα: <title>η πρώτη μου σελίδα</title> <p> Εδώ θα βρείτε πληροφορίες που αφορούν τα προσωπικά μου στοιχεία και τα ενδιαφέροντά μου</p> Nested elements (εμφωλιασμένα) <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body>

18 HTML attributes (ιδιότητες) Προσδιορίζουν/παραμετροποιούν/συμπληρώνουν το tag Τοποθετούνται στο tag αρχής και η τιμή της ιδιότητας περικλείεται σε εισαγωγικά. <tagname attribute="value">ο,τιδήποτε</tagname> Παράδειγμα: Html 4.01: <meta http-equiv="content-type content="text/html; charset=utf-8"> Html 5: <meta charset= UTF-8 >

19 Εντός του <HEAD> <TITLE> Το στοιχείο αυτό περιέχει τον τίτλο του εγγράφου και προσδιορίζει το περιεχόμενό του. Ο τίτλος φαίνεται στην μπάρα τίτλου του φυλλομετρητή. Επίσης, φαίνεται στη λίστα σελιδοδεικτών κάποιου, γι αυτό διαλέγουμε κάτι μοναδικό, σαφές και σχετικά σύντομο. Χρησιμοποιείται για την αναγνώριση μιας ιστοσελίδας στις μηχανές αναζήτησης. <HEAD> <TITLE> Η πρώτη μου σελίδα </TITLE> </HEAD>

20 Εντός του <HEAD> (2) <META> Περιέχει πληροφορία σχετική με το έγγραφο, όπως την ημερομηνία δημιουργίας του, το συγγραφέα, πληροφορία για τα δικαιώματα του δημιουργού, λέξεις κλειδιά κλπ. Είναι χρήσιμη για εξυπηρετητές, φυλλομετρητές αλλά δεν είναι ορατή από το χρήστη. <head> <meta charset="utf-8"> <meta name="description" content="free Web tutorials"> <meta name="keywords" content="html,css,xml,javascript"> <meta name="author" content="hege Refsnes"> </head>

21 Σχόλια Για την προσθήκη σχολίων σε αρχεία HTML, ώστε να είναι πιο ευανάγνωστος ο κώδικας, γράφουμε:  Τα σχόλια στην HTML μπορεί να καταλαμβάνουν περισσότερες από μια γραμμές : Παράδειγμα:

22 Tags Body attribute bgcolor Για να αλλάξουμε το χρώμα του φόντου/υποβάθρου μιας σελίδας, προσθέτουμε την ιδιότητα bgcolor στο tag <BODY>, δίνοντας το όνομα του χρώματος σαν τιμή στην ιδιότητα, ως εξής: <body bgcolor="powderblue"> ΣΗΜΕΙΩΣΗ: Υπάρχει και η δυνατότητα ορισμού των RGB τιμών χρώματος: <body bgcolor="color_name hex_number rgb_number"> <body bgcolor="powderblue"> <body bgcolor="#b0e0e6"> <body bgcolor="rgb(176,224,230)"> Μπορείτε να βρείτε τις RGB τιμές:

23 Παράδειγμα

24 Tags font <HTML> <HEAD> <TITLE>Text color </TITLE> </HEAD> <BODY> Κείμενο χωρίς μορφοποίηση.<br> <font color= blue > Κείμενο με χρώμα γραμματοσειράς μπλε.<br> </font> <font size= +2 > Κείμενο με μέγεθος μεγαλύτερο κατά δύο μονάδες. </font> </BODY> </HTML>

25 Tags font (παράδειγμα)

26 Tags headings <HTML> <HEAD> <TITLE>Οι επικεφαλίδες στην HTML</TITLE> </HEAD> <BODY> <h1>πρώτο επίπεδο μεγέθους</h1> <h2>δεύτερο επίπεδο μεγέθους</h2> <h3>τρίτο επίπεδο μεγέθους</h3> <h4>τέταρτο επίπεδο μεγέθους</h4> <h5>πέμπτο επίπεδο μεγέθους</h5> <h6>έκτο επίπεδο μεγέθους</h6> </BODY> </HTML>

27 Tags headings (παράδειγμα)

28 Tags μορφοποίησης κειμένου (1) <P> </P> Δηλώνει το ξεκίνημα μιας νέας παραγράφου. Κάθε περιττό κενό και χαρακτήρας επιστροφής αυτόματα συμπιέζεται σε ένα μοναδικό κενό όταν το έγγραφο παρουσιαστεί από το φυλλομετρητή. Προσθέτει μία κενή γραμμή πριν την παράγραφο που δημιουργεί. <BR> ή <BR /> (χωρίς tag τέλους) Αναγκάζει μια αλλαγή γραμμής χωρίς κάποιο επιπρόσθετο κενό μεταξύ των γραμμών. <HR> (χωρίς tag τέλους) Δημιουργεί μια οριζόντια γραμμή.

29 Παράδειγμα χωρίς μορφοποίηση <HTML> <HEAD> <TITLE> Σελίδα χωρίς μορφοποίηση</title> </HEAD> <BODY> ΠΡΟΣΟΧΗ: Περισσότερα του ενός κενά μεταξύ λέξεων, ή κενές γραμμές, αγνοούνται από το φυλλομετρητή. Γι αυτό το λόγο θα πρέπει να χρησιμοποιείτε τις αντίστοιχες ετικέτες. </BODY> </HTML>

30 Παράδειγμα χωρίς μορφοποίηση

31 Παράδειγμα με μορφοποίηση <HTML> <HEAD> <TITLE> Σελίδα με μορφοποίηση</title> </HEAD> <BODY> ΠΡΟΣΟΧΗ: <HR> <p> Περισσότερα του ενός κενά μεταξύ λέξεων, <BR> ή κενές γραμμές, <BR> αγνοούνται από το φυλλομετρητή. Γι αυτό το λόγο θα πρέπει να χρησιμοποιείτε τις αντίστοιχες ετικέτες. </p> </BODY> </HTML>

32 Παράδειγμα με μορφοποίηση

33 Tags μορφοποίησης κειμένου (2) <B> </B> Εμφανίζει το κείμενο που περιλαμβάνει με έντονα γράμματα (bold) <I> </I> Εμφανίζει το κείμενο που περικλείει με πλάγια γραφή (italic) <U> </U> Εμφανίζει το κείμενο που περικλείει υπογραμμισμένο (underlined)

34 Παράδειγμα <HTML> <HEAD> <TITLE> Χρήση ετικετών διαμόρφωσης κειμένου </TITLE> </HEAD> <BODY> <P><B>Έντονη γραφή (bold) </B> <BR> <I>Πλάγια Γραφή</I><BR> <U>Υπογραμμισμένο κείμενο</u></p> </BODY> </HTML>

35 Tags Attribute (<p>, <hi>, <img>) align Για να ορίσουμε τη στοίχιση για μια επικεφαλίδα ή παράγραφο κειμένου ή εικόνα, χρησιμοποιούμε την ιδιότητα ALIGN με τιμές : left, right, center ή justify <HTML> <HEAD> <TITLE>Στοίχιση κειμένου </TITLE> </HEAD> <BODY> <H1 ALIGN= CENTER > Τμήμα Πληροφορικής </H1> <P ALIGN= LEFT > Εισαγωγή στην Επιστήμη των Υπολογιστών</P> <H2 ALIGN= RIGHT >Α Εξάμηνο</H2> <H2 ALIGN= RIGHT >Ακαδ. Έτος: </H2> </BODY> </HTML>

37 Tags div και align Το tag <DIV> (division), που περιλαμβάνει κι αυτό την ιδιότητα align, χρησιμοποιείται για να περικλείσει μια ολόκληρη ομάδα από οποιαδήποτε άλλα tags της HTML και επηρεάζει όλα τα tags και το κείμενο που βρίσκεται μέσα στο ζευγάρι <DIV> και </DIV>. Για να στοιχίσουμε ένα τμήμα κώδικα HTML, περικλείουμε αυτόν τον κώδικα μέσα στα tags αρχής και τέλους του <DIV> και γράφουμε την ιδιότητα ALIGN στο tag αρχής.

38 Παράδειγμα <HTML> <HEAD> <TITLE>Στοίχιση κειμένου </TITLE> </HEAD> <BODY> <H1 ALIGN= CENTER > Τμήμα Πληροφορικής </H1> <P ALIGN= LEFT > Εισαγωγή στην Επιστήμη των Υπολογιστών</P> <DIV ALIGN= RIGHT > <H2>Α' Εξάμηνο</H2> <H2>Ακαδ. Έτος: </H2> </DIV> </BODY> </HTML>

40 Tags Κινούμενο κείμενο marquee <HTML> <HEAD> <TITLE> Σελίδα με κινούμενο κείμενο</title> </HEAD> <BODY> <MARQUEE> Εισαγωγή στην Επιστήμη των Υπολογιστών </MARQUEE> </BODY> </HTML>

41 Tags img Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες εικόνες τύπου GIF, JPEG, PNG, κλπ. Κάθε εικόνα αποτελεί χωριστό αρχείο. Μέσα στο html αρχείο, ορίζεται η θέση της εικόνας και πως αυτή θα εμφανιστεί από τον browser. <IMG SRC=Όνομα_Εικόνας>, όπου «Όνομα_Εικόνας» περιλαμβάνει το όνομα αρχείου της εικόνας (με το αντίστοιχο path αν δεν είναι στο ίδιο folder) ή κάποιο URL από το οποίο εισάγεται η εικόνα. <html> <body> <h2>το logo του Πανεπιστημίου είναι ο Ερμής</h2> <img src="aueb-logo.jpg" alt="το logo του Πανεπιστημίου" style="width:795px;height:198px;"> <p> Εναλλακτικά κατευθείαν από τον ιστότοπο της Οπτικής Ταυτότητας του Πανεπιστημίου </p> <img src=" HR.jpg" alt="το logo του Πανεπιστημίου" style="width:795px;height:198px;"> </body> </html>

42 Παράδειγμα Attribute alt: εναλλακτικό κείμενο που προσδιορίζει το περιεχόμενο της εικόνας

43 Tags Attribute style (CSS) <html> <tagname style="property:value;"> <body style="background-color:powderblue; > <h2>το logo του Πανεπιστημίου είναι ο Ερμής</h2> <img src="aueb-logo.jpg" alt="το logo του Πανεπιστημίου style="width:795px; height:198px;"> <h1 style="color:blue;">this is a heading</h1> <p style="color:red;">this is a paragraph.</p> <h1 style="font-family:verdana;">this is a heading with different fonts</h1> <p style="font-family:courier;">this is a paragraph with courier fonts.</p> <h1 style="font-size:300%;text-align:center;">this is a heading</h1> <p style="font-size:160%;">this is a paragraph.</p> </body> </html>

45 Tags a href (hyperlink) <a href="uri">κείμενο που περιγράφει το σύνδεσμο</a> Το URI (Uniform Resource Identifier) μπορεί να είναι: Σύνδεσμος σε άλλο σημείο της ίδιας σελίδας. <a href="#tips">visit the Useful Tips Section</a> Σύνδεσμος σε άλλη σελίδα/αρχείο στον ίδιο Ιστότοπο. <a href="html_examples.pdf">παρουσίαση HTML </a> Σύνδεσμος σε άλλη σελίδα/αρχείο σε άλλο Ιστότοπο. <a href=" target="_blank">επισκεφθείτε τον Ιστότοπο του ΟΠΑ</a> Άνοιγμα σε νέο παράθυρο/tab

46 Παράδειγμα <html> <body style="background-color:powderblue;"> <h2>το Οικονομικό Πανεπιστήμιο ΑΘηνών</h2> <p> Το <a href=" target="_blank">οικονομικό Πανεπιστήμιο Αθηνών </a> επιδιώκει... </p> <p>το Οικονομικό Πανεπιστήμιο Αθηνών διαθέτει τρεις σχολές στις οποίες εντάσσονται <a href="#departments">οκτώ Τμήματα</a>. Σε κάθε ένα από τα Τμήματα πραγματοποιούνται Προπτυχιακά, Μεταπτυχιακά και... </p> <p id="departments">τα τμήματα του Πανεπιστημίου είναι τα ακόλουθα: Τμήμα Διεθνών και Ευρωπαϊκών Οικονομικών Σπουδών Τμήμα Οικονομικής Επιστήμης...</p> </body> </html>

48 Tags a href σε εικόνα Μπορεί αντί για κείμενο που να περιγράφει το σύνδεσμο, να χρησιμοποιήσουμε εικόνα: <a href= " <img src= aueblogo.jpg" alt= AUEB web page" style="width:795px;height:198px;"> </a>

49 Tags Lists: ol, ul Ordered List <ol> <p> Οι αγαπημένες μου ταινίες είναι:</p> <ol type= " 1" start= " 1 " > <li>fight Club</li> <li>lord of the Rings</li> <li>batman begins</li> </ol> type: 1: αριθμοί A: κεφαλαία γράμματα a: πεζά γράμματα I: κεφαλαία ρωμαϊκή αρίθμηση i: πεζά ρωμαϊκή αρίθμηση start: τιμή έναρξης Unordered List <ul> <p> Οι αγαπημένες μου ταινίες είναι:</p> <ul style="list-style-type:disc"> <li>fight Club</li> <li>lord of the Rings</li> <li>batman begins</li> </ul> list-style-type: disc circle square none

51 Tags table Ορισμός πίνακα στην HTML: <TABLE> </TABLE> Ορίζει έναν πίνακα στην HTML. Αν έχει δοθεί το χαρακτηριστικό BORDER, ο φυλλομετρητής θα εμφανίσει τον πίνακα με πλαίσιο. <TR> </TR> Καθορίζει μια γραμμή του πίνακα μέσα σε αυτόν. Μπορούν να οριστούν συνηθισμένα χαρακτηριστικά για όλη τη γραμμή: ALIGN (LEFT, CENTER, RIGHT) ή/και VALIGN (TOP, MIDDLE, BOTTOM), που αφορούν την οριζόντια και κατακόρυφη στοίχιση αντίστοιχα. <ΤΗ> </ΤΗ> Κελί επικεφαλίδας του πίνακα. Προκαθορισμένα το κείμενο σε αυτό το κελί είναι έντονο και στο κέντρο. Τα κελιά αυτά μπορεί να περιέχουν άλλα χαρακτηριστικά για να προσδιορίσουν τα χαρακτηριστικά του κελιού ή/και τα περιεχόμενα του. <ΤD> </ΤD> Κελί δεδομένων του πίνακα. Τα κελιά δεδομένων του πίνακα μπορεί να περιέχουν επίσης attributes που να τα προσδιορίζουν.

52 Παράδειγμα 1 <HTML> <HEAD><TITLE>Παράδειγμα Πίνακα</TITLE></HEAD> <BODY> <TABLE BORDER=2> <TR> <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR> <TR> <TD> first row, first cell contents</td> <TD> first row, last cell contents</td> </TR> <TR> <TD> last row, first cell contents</td> <TD> last row, last cell contents</td> </TR> </TABLE> </BODY> </HTML>

53 Παράδειγμα 1

54 Παράδειγμα 2 <HTML> <HEAD><TITLE>Παράδειγμα Πίνακα</TITLE></HEAD> <BODY> <table bgcolor="lightblue" width="80%" align="center"> <tr bgcolor="navy"> <th colspan="2" height="40">τmhma ΠΛΗΡΟΦΟΡΙΚΗΣ</th></tr> <tr><td rowspan="3" bgcolor="blue" align="center">μαθήματα</td> <td>εισαγωγή Επιστήμη των Υπολογιστών</td></tr> <tr><td>τεχνολογίες Διαδικτύου</td></tr> <tr><td>δίκτυα Υπολογιστών</td></tr> </table> </BODY> </HTML>

56 Παράδειγμα 3 <HTML> <HEAD><TITLE>Παράδειγμα Πίνακα</TITLE></HEAD> <BODY> <table bgcolor="yellow" align="center" border="1" cellpading="7" cellspacing="2"> <tr bgcolor="red">  <td> Κελί 1α </td> <td> Κελί 1β </td> <td> Κελί 1γ </td> <td> Κελί 1δ </td> </tr> <tr>  <td> Κελί 2α </td> <td colspan="2" bgcolor="blue"> Κελί 2β + 2γ </td> <td rowspan="2" bgcolor="green"> Κελί 2δ </td> </tr> <tr>  <td> Κελί 3α </td> <td> Κελί 3β </td> <td> Κελί 3γ </td> </tr> </TABLE> </BODY> </HTML>