Εργαλεία ανάπτυξης εφαρμογών internet Ι
|
|
|
- Ευσέβιος Αργυριάδης
- 8 χρόνια πριν
- Προβολές:
Transcript
1 IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής
2 HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται για την αναπαράσταση δεδομένων από τους Browsers Τα δεδομένα ομαδοποιούνται και παρουσιάζονται ως έγγραφα (ιστοσελίδες) Βασικά χαρακτηριστικά δυνατότητα μη γραμμικής πλοήγησης δυνατότητα διασύνδεσης με άλλα έγγραφα μέσω συνδέσμων (hyperlinks) Τρέχουσα έκδοση 4.01 Έκδοση 5 - W3C Working Draft 23 October 2009 Ένα HTML αρχείο είναι ένα αρχείο κειμένου που περιέχει markup tags Τα tags λένε στον Web Browser πώς να παρουσιάσει το περιεχόμενο της σελίδας Τα HTML αρχεία έχουν htm ή html καταλήξεις Ένα HTML αρχείο μπορεί να δημιουργηθεί χρησιμοποιώντας έναν απλό text editor (π.χ. notepad)
3 Παράδειγμα Απλής Σελίδας <HTML> <HEAD> <TITLE>Παράδειγμα σελίδας HTML </TITLE> </HEAD> <BODY> <H1>Πολύ Απλό Παράδειγμα</H1> <P>1η Παράγραφος</P> <P>2η Παράγραφος</P> </BODY> </HTML>
4 Παρουσίαση
5 HTML Σύνταξη Βασικό δομικό στοιχείο η ετικέτα (tag) Κάθε διακριτικό της HTML περικλείεται από το μικρότερο και μεγαλύτερο σύμβολο < > Τα περισσότερα διακριτικά ομαδοποιούνται σε ζεύγη. Το πρώτο δείχνει την αρχή και το δεύτερο το τέλος επίδρασης του συγκεκριμένου διακριτικού. Πχ <HTML> </HTML> Λέξεις όπως τα HEAD, TITLE, και BODY λέγονται elements και προσδιορίζουν τον τύπο του tag
6 HTML Σύνταξη Ο Web browser αναγνωρίζει μόνο κείμενο και έγκυρες ετικέτες (tags) Ο Web browser αγνοεί μη εκτυπώσιμους χαρακτήρες Κενά, στηλοθέτες, αλλαγή γραμμής Πρέπει να χρησιμοποιηθούν έγκυρα tags ή ειδικοί χαρακτήρες: Κενό (Non-breaking space)
7 Eξαιρέσεις & Eκπλήξεις Οι Browsers δεν υποστηρίζουν όλες τις ετικέτες. Ετικέτες που δεν υποστηρίζονται, απλώς παραβλέπονται. Ορισμένες ετικέτες μπορεί να πάψουν να υποστηρίζονται. Συνέχεια προστίθενται νέες δυνατότητες στην HTML.
8 O browser, προσδιορίζει τον τρόπο εμφάνισης μίας σελίδας βασισμένος στα tags Αγνοεί τον τρόπο μορφοποίησης του HTML, δηλαδή τα enter, τα επιπλέον κενά και τις κενές γραμμές Λαμβάνει υπ όψιν το πλάτος και το ύψος του παραθύρου του browser Εάν αλλάξετε το μέγεθος του παραθύρου τα περιεχόμενα της Web σελίδας θα αλλάξουν ώστε να προσαρμοστούν στο νέο μέγεθος
9 Eτικέτες (tags) HTML Είναι σημάδια που χρησιμοποιεί η HTML για να καθορίσει τον τρόπο εμφάνισης του ενδιάμεσου κειμένου. Οι ετικέτες συνήθως συντάσσονται σε ζεύγη, π.χ.: <H1>. </H1> H ετικέτα <Η1> καθορίζει ότι το κείμενο που ακολουθεί, θα εμφανιστεί ως επικεφαλίδα πρώτου μεγέθους. H ετικέτα </Η1> καθορίζει το τέλος του κειμένου επικεφαλίδας.
10 Η HTML είναι αναπτυσσόμενη γλώσσα και αλλάζει συνεχώς Πχ. σε παλιότερη έκδοση της HTML, η ετικέτα <P> συντασσόταν χωρίς </P> Σήμερα συντάσσεται ως <P>... </P> Η <P> επιβάλλει αλλαγή παραγράφου. Στην HTML οι εντολές μπορούν να γραφτούν με μικρά και/ή με κεφαλαία γράμματα.
11 Σχόλια στην HTML <!-- Aυτό εδώ είναι σχόλιο. --> Σχόλιο είναι οτιδήποτε βρίσκεται ανάμεσα στα: <!-- και --> Τα σχόλια δεν εμφανίζονται στην σελίδα. Χρησιμοποιούνται από τους συγγραφείς σελίδων ως επεξηγήσεις.
12 Βασική δομή μιας σελίδας <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html> <body> </html> </body> This is my first web page.
13 DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> Δηλώνει την έκδοση της γλώσσας HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδας
14 Ετικέτες <html> </html> Κάθε ετικέτα έχει όνομα: html Κάθε ετικέτα πρέπει να ανοίγει: <html> Κάθε ετικέτα πρέπει να κλείνει: </html> Ανάμεσα στο άνοιγμα και το κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας.
15 Άνοιγμα ετικέτας html Περιεχόμενο ετικέτας html <html> <body> This is my first web page. </body> </html> Κλείσιμο ετικέτας html
16 <html>, <head>, <title> και <body> <html>: Περιέχει μία ολόκληρη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head>.
17 Ιεραρχία στις ετικέτες Μία ετικέτα μπορεί να περιέχεται ολόκληρη μέσα σε μία άλλη. Πρόκειται για μια δενδρική δομή. Ό,τι ανοίγει πρώτο κλείνει τελευταίο (LIFO). Η body περιέχεται στην html <html> <body> This is my first web page. </body> </html>
18 Η βασική ετικέτα HEAD Η διπλή ετικέτα HEAD δηλώνει την επικεφαλίδα του εγγράφου HTML.Περιλαμβάνει πληροφορίες για το έγγραφο όπως τίτλο, λέξεις κλειδιά, περιγραφή και το φύλλο στυλ που μπορεί να χρησιμοποιηθεί για τη μορφοποίηση του. Title : ορισμός του τίτλου της σελίδας Script : καθορισμός της scripting γλώσσας Style : καθορισμός style sheet Base : ορισμός της βάσης αρχής για τον καθορισμό των σχετικών urls Meta : καθορισμός ζεύγους πληροφοριών (όνομα/τιμή) - π.χ. εισαγωγή keywords Link : ορισμός σχέσεων με άλλα κείμενα ή φύλλα στυλ Μόνο η ετικέτα Title εμφανίζεται στην οθόνη του φυλλομετρητή.
19 Η ετικέτα BODY - παράμετροι Η βασική ετικέτα BODY δηλώνει το περιεχόμενο του εγγράφου HTML. Περιλαμβάνει όλο το κείμενο, τη μορφοποίηση, συνδέσμους σε εικόνες και σε λοιπά πολυμεσικά στοιχεία, τα οποία εμφανίζονται στον φυλλομετρητή. Βασικές παράμετροι: bgcolor : το χρώμα του φόντου της σελίδας text : το χρώμα των χαρακτήρων του κειμένου link / vlink / alink : το χρώμα των links background : το URL της εικόνας που θα εμφανίζεται στο φόντο της σελίδας <body bgcolor=blue text=orange> Πχ.blue = #0000FF
20 Web Colors - RGB
21 Βασικά τμήματα HTML σελίδας Στοιχεία ορισμού περιοχής Επικεφαλίδες <h1></h1>,, <h6></h6> Παράγραφοι - <p></p> Λίστες - <ul>, <ol> <dl> Φόρμες - <form></form> Πίνακες - <table></table> Οριζόντιες γραμμές - <hr> Πλαίσια Στοιχεία ορισμού κειμένου Font style elements - <b></b>, <i></i>, <u></u> Συνδέσμους - Links - <a></a> Εικόνες - <img> Διακοπές κειμένου - <br>
22 Ειδικοί χαρακτήρες Ο χαρακτήρας < εισάγεται με < Ο χαρακτήρας > εισάγεται με > Ο χαρακτήρας & εισάγεται με & Ο χαρακτήρας εισάγεται με " Ο χαρακτήρας κενού (space) εισάγεται με Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.
23
24 Παράδειγμα HTML αρχείου <HTML> <HEAD> <TITLE> ΠΑΡΑΔΕΙΓΜΑ </TITLE> <!-- ΜΑΘΗΜΑ ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ ΙΝΤΕΡΝΕΤ,2014--> </HEAD> <BODY> <H1> ΠΑΡΑΔΕΙΓΜΑ </H1> <P> Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου. Τέλος. </P> </BODY> </HTML>
25 ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ Κάθε HTML έγγραφο, πρέπει να έχει ένα τίτλο, κυρίως γι λόγους αναγνώρισης. <TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE> Υποστηρίζονται επίσης επικεφαλίδες έξη μεγεθών. <Hn> ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ </Hn> (n = 1,2,,6) Η <h1> χρησιμοποιείται 1 φορά. Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη. Δεν υπάρχει h7.
26 Παράδειγμα HTML αρχείου <HTML> <HEAD> <TITLE> ΠΑΡΑΔΕΙΓΜΑ ΣΤΙΣ ΕΠΙΚΕΦΑΛΙΔΕΣ</TITLE> <!-- ΜΑΘΗΜΑ ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ ΙΝΤΕΡΝΕΤ, > </HEAD> <BODY> <H1> Αυτή είναι επικεφαλίδα επιπέδου 1 </H1> <H2> Αυτή είναι επικεφαλίδα επιπέδου 2 </H2> <H3> Αυτή είναι επικεφαλίδα επιπέδου 3 </H3> <H4> Αυτή είναι επικεφαλίδα επιπέδου 4</H4> <H5> Αυτή είναι επικεφαλίδα επιπέδου 5 </H5> <H6> Αυτή είναι επικεφαλίδα επιπέδου 6 </H6> <P>Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου. </P> </BODY> </HTML>
27
28 Ιδιότητες ετικετών Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα Κάθε ιδιότητα έχει όνομα και τιμή Όνομα από τιμή χωρίζονται με = Τιμή περιλαμβάνεται σε εισαγωγικά Μονά ή διπλά ό,τι προτιμάτε Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες.
29 Ιδιότητες ετικετών <h1 align= center > Γεια σου κόσμε! </h1> Άνοιγμα ετικέτας Περιεχόμενο ετικέτας Κλείσιμο ετικέτας
30 Ιδιότητες ετικετών Όνομα ιδιότητας Τιμή ιδιότητας <h1 align= center > Γεια σου κόσμε!</h1> Ιδιότητα align
31 Στοίχιση επικεφαλίδας/ παραγράφου Μια παράμετρος της επικεφαλίδας αλλά και της παραγράφου είναι η ALIGNπου χρησιμοποιείται για την οριζόντια στοίχιση του κειμένου και μπορεί να πάρει τις εξής τιμές: ALIGN = ( LEFT CENTER RIGHT JUSTIFY ) Πχ. Για επικεφαλίδες <H1 ALIGN= CENTER > Αυτή η επικεφαλίδα θα έχει κεντρική στοίχιση</h1> <H1 ALIGN= LEFT > Αυτή η επικεφαλίδα θα έχει αριστερή στοίχιση</h1> <H1 ALIGN= RIGHT > Αυτή η επικεφαλίδα θα έχει δεξιά στοίχιση</h1> Για παραγράφους <P ALIGN= CENTER > Αυτή η παράγραφος θα έχει κεντρική στοίχιση</p> <P ALIGN= LEFT > Αυτή η παράγραφος θα έχει αριστερή στοίχιση</p> <P ALIGN= RIGHT > Αυτή η παράγραφος θα έχει δεξιά στοίχιση</p>
32 Παράδειγμα στοίχισης. Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. τίτλος
33 Παράγραφοι Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά. Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό. Αυτή είναι η πρώτη μου σελίδα Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα Είμαι ενθουσιασμένος!
34 Παράγραφοι <p>: Ορίζει μία παράγραφο (μνημονικό: paragraph) <p>αυτή είναι η πρώτη μου σελίδα</p> <p>είμαι ενθουσιασμένος!</p> Αυτή είναι η πρώτη μου σελίδα Είμαι ενθουσιασμένος!
35 Παράγραφοι <br />: Ορίζει μία αλλαγή γραμμής (μνημονικό: break) Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS.
36 Λίστες Αριθμημένες: Σειρά έχει σημασία, χρήση <ol> Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση <ul> (μνημονικά: ordered list, unordered list) Ορισμών: <dl> <li>: Ένα στοιχείο μίας λίστας (μνημονικό: list item) Πανομοιότυπος HTML κώδικας για την περιγραφή τους. <ol> <li>πρώτο στοιχείο</li> <li>δεύτερο στοιχείο</li> <li>τρίτο στοιχείο</li> </ol>
37 Λίστες Το <li> μπορεί να περιέχεται μόνο σε <ol> ή <ul> Τα <ol> και <ul> μπορούν να περιέχουν μόνο <li> To <dl> περιέχει <dt> και η περιγραφή ορίζεται με την ετικέτα <dd>.
38 Λίστες Αριθμημένες Mέρες της εβδομάδας Ρούχα που θα φορέσω Νικητές της Formula 1 Εκδόσεις του Photoshop Μη αριθμημένες Λίστα για τα ψώνια Μαθητές στο αμφιθέατρο Οι διευθύνσεις μου Αυτή η λίστα
39 Αριθμημένη λίστα: Μέρες <ol> <li>δευτέρα</li> <li>τρίτη</li> <li>τετάρτη</li> <li>πέμπτη</li> <li>παρασκευή</li> <li>σάββατο</li> <li>κυριακή</li> </ol> 1. Δευτέρα 2. Τρίτη 3. Τετάρτη 4. Πέμπτη 5. Παρασκευή 6. Σάββατο 7. Κυριακή
40 Μη αριθμημένη λίστα: Ψώνια <ul> <li>kinder Γαλακτοφέτες</li> <li>kinder Bueno</li> <li>happy Hippo</li> <li>αυγά Kinder</li> <li>kinder Delice</li> <li>kinder Duplo</li> <li>kinder Maxi</li> </ul> Kinder Γαλακτοφέτες Kinder Bueno Happy Hippo Αυγά Kinder Kinder Delice Kinder Duplo Kinder Maxi
41 Ιδιότητες λιστών
42 Παράδειγμα <html> <head> <title> lista </title> </head> <body> <ol type= "I" > <li>δευτέρα</li> <li>τρίτη</li> <li>τετάρτη</li> <li>πέμπτη</li> <li>παρασκευή</li> <li>σάββατο</li> <li>κυριακή</li> </ol> </body> </html>
43 Παράδειγμα <html> <head> <title> lista </title> </head> <body> <ul type= "square"> <li>kinder Γαλακτοφέτες</li> <li>kinder Bueno</li> <li>happy Hippo</li> <li>αυγά Kinder</li> <li>kinder Delice</li> <li>kinder Duplo</li> <li>kinder Maxi</li> </ul> </body> </html>
44 Εμφώλευση Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους, κλπ. <h1>λόγοι που έρχομαι στο μάθημα</h1> <ol> <li>για να εντυπωσιάσω: <ul> <li>τη γάτα μου</li> <li>το σκύλο μου</li> </ul> </li> <li>για να μάθω</li> <li>για να γίνω διάσημος</li> </ol>
45 Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου 2. Για να μάθω 3. Για να γίνω διάσημος
46 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. Επικεφαλίδα επιπέδου 1
47 <html> <head> <title> Συνδιασμός καταλόγων </title> </head> <body> <h1> Σύνθετος κατάλογος</h1> <ol> <li> Η γλώσσα HTML</li> <ul> <li> Συντάκτης HTML</li> <li> Μορφή αρχείων</li> </ul> <li> Δημοσίευση ιστοσελίδας</li> <ul> <li> Ηλεκτρονική διεύθυνση </li> <li> Μεταφορά αρχείων </li> </ul> </ol> </body> </html>
48 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.
49 Λίστες ορισμών Definitions lists <dl> </dl> <dt>αυτοκίνητο </dt> <dd> Όχημα με 4 ρόδες </dd> <dt>μηχανή </dt> <dd> Όχημα με 2 ρόδες </dd>
50 Προκαθορισμένη "ως έχει" μορφή. Η ετικέτα <PRE> </PRE> (preformatted) χρησιμοποιείται για παρουσίαση κειμένου τύπου "γραφομηχανής" (όπου τα tabs και τα κενά μετρούν) και το κείμενο διατηρεί την μορφή του. Πχ: <PRE> PROGRAM FARCEL WRITE(*,*)'TEMPERATURE IN FAHRENHEIT? ' READ(*,*) FAR CELCIU = (FAR-32)*5./9. WRITE(*,*) ' FAHRENHEIT', ' CELCIUS ' WRITE(*,*) FAR,CELCIU END </PRE>
51 Ετικέτα hr <hr> η ετικέτα αυτή μας επιτρέπει να δημιουργούμε μια οριζόντια γραμμή στην σελίδα μας
52 Σύνδεσμοι <a>: Ορίζει ένα σύνδεσμο href: Ορίζει τον προορισμό ενός συνδέσμου Ο προορισμός του συνδέσμου μπορεί να είναι: 1. Εξωτερική ιστοσελίδα 2. Μια άλλη σελίδα μέσα στον ίδιο φάκελο 3. Μι α άλλη σελίδα μέσα σε υποφάκελο 4. Μια άλλη σελίδα σε ανώτερο φάκελο 5. Παραπομπή σε e - mail
53 Σύνδεσμοι σε ιστοσελίδα <a href= >Μάθε HTML! </a> Μάθε HTML!
54 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. παράγραφος
55 Λύση <html> <head> <title>δημιουργία συνδέσμων </title> </head> <body> <p>αυτός είναι ο πρώτος μου υπερσύνδεσμος </p> <a href = " Δείτε εδώ </a> </body> </html>
56 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.
57 Λύση <html> <head> <title>δημιουργία συνδέσμων </title> </head> <body> <p>αυτός <a href = " εδώ</a> είναι ο πρώτος μου υπερσύνδεσμος </p> </body> </html>
58 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. Επικεφαλίδα επιπέδου1 Εισαγωγή γραμμής
59 Λύση <html> <head> <title> Λίστες και υπερσύνδεσμοι </title> </head> <body> <h1> Αυτές είναι οι αγαπημένες μου ιστοσελίδες </h1> <ol> <li> Κοινωνικής δικτύωσης </li> <ul type= "square"> <li> <a href = " Facebook </a> </li> <li> <a href = " Twitter </a> </li> <li> <a href = " Linkedin </a></li> </ul> <hr> <li> Ενημέρωσης </li> <ul type = "disc"> <li> Η εφημερίδα Ελευθερία της Καλαμάτας. <a href = " Δείτε εδώ </a></li> <li> Η εφημερίδα Το πρώτο θέμα.<a href = " Επισκεφτείτε την </a> </li> <li> Η ειδησιογραφική ιστοσελίδα newsbomb. <a href = " Δείτε εδώ. </a> </li> </ul> <hr> <li> Εύρεσης εργασίας</li> <ul> <li> Η σεδίδα του ΟΑΕΔ. Δείτε την <a href = " εδώ</a>. </li> <li> Οι σελίδες: <a href = " Καριέρα</a>, <a href = " Προσόν</a>, <a href = " Skywalker </a> </ul> </body> </html>
60 Σύνδεσμοι σε σελίδα που βρίσκεται μέσα στον ίδιο φάκελο <a href = όνομα αρχείου ">πχ. Εδώ </a> <html> <head> <title>δημιουργία συνδέσμων </title> </head> <body> <p>αυτός είναι ο πρώτος μου υπερσύνδεσμος </p> <a href="sindesmos.html"> εδώ </a> </body> </html>
61 Σύνδεσμοι σε σελίδα που βρίσκεται σε άλλο υποφάκελο <a href= /υποφάκελος/mypage2.htm >...</a> Σύνδεσμοι σε σελίδα που βρίσκεται σε ανώτερο φάκελο <a href="../mypage2.htm >...</a> <a href ="../../mypage1.htm >...</a>
62 Παραπομπή σε <a href= </a>
63 Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. παράγραφος
64 Άσκηση ομαδική Δημιουργείστε με την ομάδα σας μια ιστοσελίδα σε HTMLκαι ζητήστε από μια άλλη ομάδα να σας γράψει τον κώδικα της. Η σελίδα σας θα πρέπει να περιέχει : 1. Τίτλο 2. Επικεφαλίδες (όποιου επιπέδου εσείς επιθυμείτε) 3. Παράγραφο 4. Λίστες (αριθμημένες, μη αριθμημένες) 5. Συνδέσμους σε εξωτερικές ιστοσελίδες και παραπομπή σε . Μπορείτε να χρησιμοποιήσετε όποια στοίχιση εσείς επιθυμείτε και όποια αρίθμηση και bullets θέλετε. Ανεβάστε printscreen της σελίδας που δημιουργήσατε στο αντίστοιχο θέμα στο forum «Θέματα html».
65 Εικόνες στο web Χρήση Χρώματα Μέγεθος JPG Φωτογραφίες Πολλά Μικρό PNG Γραφικά Πολλά Μέτριο GIF Γραφικά 256 Ελάχιστο
66 Εικόνες <img>: Περιγράφει μία εικόνα src: Το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: Μία περιγραφή της εικόνας (υποχρεωτικό) width: Μήκος εικόνας σε pixels height: Μήκος εικόνας σε pixels Η ετικέτα <img> δεν περιλαμβάνει περιεχόμενο.
67 Εικόνες <img src= cake.gif alt= The cake is not a lie width= 200 height= 200 />
68 Παράδειγμα εικόνας από το διαδίκτυο <html> <head> <title>εικόνες </title> </head> <body> <img src=" ons-tweeting/128/spring-flower-follow-meicon.png" alt= follow spring width= 200 height= 200 /> </body> </html>
69 Παράδειγμα εικόνας αποθηκευμένης στον ίδιο φάκελο <html> <head> <title>εικόνες </title> </head> <body> <img "top" src= " _ _ _n.jpg" alt ="me" width = "300" high= "300" /> </body> </html>
70 Εικόνα - υπερσύνδεσμος <html> <head> <title>εικόνες </title> </head> <body> <a href = " <img "top" src= " _ _ _n.jpg" alt ="me" width = "300" high= "300" /> </a> </body> </html>
71 Στοίχιση εικόνας Με την ιδιότητα < align= top > στην ετικέτα <img>. Mπορούμε να διαλέξουμε μεταξύ TOP, MIDDLE ή ΒΟΤΤΟΜ.
72 Άσκηση - ατομική Δημιουργείστε μια στατική ιστοσελίδα η οποία θα περιέχει πληροφορίες για τον εαυτό σας. Ακολουθείστε το παράδειγμα που σας δίνεται. Ανεβάστε το.html αρχείο της σελίδας σας στο αντίστοιχο θέμα στο forum «Θέματα html». Σχετικά με την στοίχιση του κειμένου και αρίθμηση ακολουθείστε το παράδειγμα που ακολουθεί.
73 1.Τίτλος Άσκηση - ατομική Δημιουργείστε μια στατική ιστοσελίδα η οποία θα περιέχει πληροφορίες 2.Επικεφαλίδα για τον 1 εαυτό σας. Ακολουθείστε το παράδειγμα που σας δίνεται. 3.Επικεφαλίδα 2 4.Εμφωλευμένη λίστα. Αριθμημένη μη αριθμημένη 5.Εισαγωγή εικόνας και υπερσύνδεση σε ιστοσελίδα 6.Εισαγωγή υπερσύνδεσης. Σύνδεσμος σε εξωτερική σελίδα 7.Εισαγωγή υπερσύνδεσης. Σύνδεσμος σε .
74 Eτικέτες επεξεργασίας κειμένου <B> </B> Έντονη (bold) γραφή. <I> </I> Πλάγια (Italic) γραφή. <CODE> </CODE> Γραφή γραφομηχανής. <SUP> </SUP> Εκθέτης. <SUB> </SUB> Δείκτης. <U> </U> Υπογράμμιση. <BIG> </BIG> Αύξηση μεγέθους. <SMALL> </SMALL> Μείωση μεγέθους
75 Παραδείγματα Το νέο βιβλίο του <B> B. Jones </B> έχει τίτλο Το νέο βιβλίο του B. Jones έχει τίτλο Το νέο βιβλίο του <BIG> B. Jones </BIG> έχει τίτλο Το νέο βιβλίο του B. Jones έχει τίτλο Το νέο βιβλίο του <I> B. Jones </I> έχει τίτλο Το νέο βιβλίο του B. Jones έχει τίτλο Το νέο βιβλίο του <CODE> B. Jones </CODE> έχει τίτλο Το νέο βιβλίο του B. Jones έχει τίτλο Το νέο βιβλίο του <B><U> B. Jones</U> </B> έχει τίτλο Το νέο βιβλίο του B. Jones έχει τίτλο
76 Κεντράρισμα, αλλαγή γραμμής... <CENTER> </ CENTER > Κεντράρει στην σελίδα οτιδήποτε υπάρχει ανάμεσα. <BR> Επιβάλλει αλλαγή γραμμής <HR> Τοποθετεί μια οριζόντια γραμμή Έχει παραμέτρους: <HR SIZE= αριθμός > Καθορίζει το πάχος <HR WIDTH= αριθμός ή % > Καθορίζει το πλάτος απόλυτα ή σε ποσοστό της σελίδας. <HR ALIGN= LEFT > Καθορίζει την θέση της γραμμής ή = CENTER ή = RIGHT (αριστερά, κέντρο ή δεξιά) <HR NOSHADE> Μη σκιασμένη γραμμή.
77 Επιπλέον εντολές <font color="#rrggbb">... </font> Καθορίζει το χρώμα των χαρακτήρων του ενδιάμεσου κειμένου <font size= J > </font> όπου εάν J = 1,2,,7 καθορίζει το μέγεθος των χαρακτήρων, και εάν J=+3, x=-2 (με πρόσημο) την σχετική τους διαφορά από το τρέχον μέγεθος.
78 Ετικέτα BASEFONT <basefont size =J color = "#rrggbb" > J = 1,2,,7 Καθορίζει το προεπιλεγμένο (default) μέγεθος και χρώμα των χαρακτήρων για όλη την σελίδα. Εισάγεται στο <HEAD> </HEAD> μέρος της σελίδας.
79 Φόντο σελίδας <BODY BACKGROUND = "stone.gif"> </BODY> Το φόντο της σελίδος καθορίζεται από την εικόνα του αρχείου: stone.gif <BODY BGCOLOR="color"> </BODY> Καθορίζει το χρώμα του φόντου. color = #RRGGBB όπου RR, GG, BB διψήφιοι δεκαεξαδικοί αριθμοί για τις εντάσεις των χρωμάτων R,G,B (Κόκκινο, Πράσινο, Μπλε). Τα ψηφία του δεκαεξαδικού είναι: ABCDEF Πχ : <body bgcolor="#ff0000"> κάνει το φόντο της σελίδας κόκκινο.
80 Βιβλιογραφία Καμμάς Σ., Διαδικτυακές σημειώσεις μαθήματος «Εργαλεία ανάπτυξης εφαρμογών Ιντερνέτ Ι», Πρέντζα Α., σημειώσεις μαθήματος «Προγραμματισμός Παγκόσμιου Ιστού», πανεπιστήμιο Πειραιώς www. w3schools.com
HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:
HTML 1 Στόχος της ώρας Τι είναι HTML και CSS; ιαχωρισμός περιεχομένου/μορφοποίησης Πότε χρησιμοποιούμε το ένα και πότε το άλλο; Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο: Βασική σύνταξη, ετικέτες Τίτλοι,
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15 Έμφαση 2 : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis) Συνηθίζεται
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
HTML 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
HTML 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο.
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Περιεχόμενα Τι είναι HTML και CSS; Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο. Βασική δομή της HTML. XML DOCTYPE Τίτλοι, παράγραφοι, επικεφαλίδες Λίστες, σύνδεσμοι,
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Σχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week
7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
HTML 1. ιδάσκοντες: Π. Αγγελάτος,. Ζήνδρος Επιµέλεια διαφανειών:. Ζήνδρος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
HTML 1 ιδάσκοντες: Π. Αγγελάτος,. Ζήνδρος Επιµέλεια διαφανειών:. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Στόχος της ώρας Τι είναι HTML και CSS; ιαχωρισµός περιεχοµένου/µορφοποίησης
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις
Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML
Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Παρουσίαση και μορφοποίηση κειμένου
HTML [ετικέτες] Παρουσίαση και μορφοποίηση κειμένου Στην HTML σύμφωνα με τους κανόνες, κενές γραμμές και περισσότερα του ενός κενά μεταξύ λέξεων δεν λαμβάνονται υπόψη από τον φυλλομετρητή. Για αυτό το
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);
Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7
The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Υπερσυνδέσεις (hyperlinks)
Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Εικόνα, κείμενο και εικόνα Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
Κειµενογράφοι ετικετών
ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Σπουδές 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
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Η Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική
Εισαγωγή στην HTML (1)
Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα
HTML Εργαστήριο 1.1 Μάθημα (Ορισμός εικόνας ως φόντου - Μορφοποιήσεις κειμένου Λίστες)
HTML Εργαστήριο 1.1 Μάθημα (Ορισμός εικόνας ως φόντου - Μορφοποιήσεις κειμένου Λίστες) Ορισμός εικόνας ως φόντου 1. Για να ορίσουμε σαν φόντο μια εικόνα, θα πρέπει να βάλουμε την εικόνα στον ίδιο φάκελο
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized
Εισαγωγή στην πληροφορική
Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Η Γλώσσα Προγραμματισμού του Internet HTML
Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),
2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ 1. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ HTML ΣΕΛΙΔΩΝ Ας δούμε τι συμβαίνει όταν «μπαίνουμε» στο internet και επισκεπτόμαστε μια ιστοσελίδα. Για να μπούμε στο
Αλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Εισαγωγή στο Word. Κεντρική οθόνη του Word
Εισαγωγή στο Word Το Word είναι το δημοφιλέστερο πρόγραμμα επεξεργασίας κειμένου. Τα κύρια χαρακτηριστικά του είναι η εύκολη και γρήγορη δημιουργία και επεξεργασία εγγράφων. Κεντρική οθόνη του Word Το
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7
Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με
Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML: Λίστες Παρουσίαση 8 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε
Βασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων Η Γλώσσα HTML Παρουσίαση 4 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Κανόνες σύνταξης της HTML Δομή σελίδας και βασικές ετικέτες Ιεραρχία (Hierarchy) Κανόνες σύνταξης της
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο
Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες
Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ Δρ. Κουζαπάς Δημήτριος Πανεπιστήμιο Κύπρου - Τμήμα Πληροφορικής Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς
ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών
Πίνακες. ιδιότητες ετικέτας <tr>
Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)
Εμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2
Διαχείριση Πληροφοριών στο Διαδίκτυο Εργαστήριο 2 Τεχνολογικό Εκπαιδευτικό Ίδρυμα Καβάλας Σχολή Διοίκησης & Οικονομίας Τμήμα Διαχείρισης Πληροφοριών Διδάσκων Μαρδύρης Βασίλειος, Διπλ. Ηλ. Μηχανικός & Μηχ.
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).