Εισαγωγή στη δημιουργία ιστοσελίδων Διδάσκων: Πανεπιστημιακό κέντρο εκπαίδευσης επιμορφωτών Δυτικής Ελλάδας Πανεπιστήμιο Πατρών, ΤΕΕΑΠΗ - Πανεπιστήμιο Πελοποννήσου, ΤΚΕΠ Εκπαίδευση Επιμορφωτών Β΄Επιπέδου Ενότητα 3.2.3: Εισαγωγή στη δημιουργία ιστοσελίδων Διδάσκων: Χρήστος Κατσάνος - ckatsanos@ece.upatras.gr

Η γλώσσα HTML (1/2) Οι Ιστοσελίδες είναι γραμμένες σε μια ειδική γλώσσα, την HTML (Hyper-Text Markup Language-γλώσσα σήμανσης υπέρ-κειμένου) Η HTML μπορεί να διαβαστεί από οποιοδήποτε υπολογιστή διαθέτει ένα web browser (π.χ. Internet Explorer)

Η γλώσσα HTML (2/2) http://www.w3schools.com/html/default.asp

Τυπικές Ετικέτες http://www.w3schools.com/html/default.asp

Ετικέτες Κειμένων http://www.w3schools.com/html/default.asp

Ετικέτες Υπερσυνδέσμων http://www.w3schools.com/html/default.asp

Ετικέτες Υπερσυνδέσμων http://www.w3schools.com/html/default.asp

Ετικέτες Δημιουργίας Λίστας http://www.w3schools.com/html/default.asp

Σημασιολογικές Ετικέτες http://www.w3schools.com/html/default.asp

Ετικέτες εικόνων http://www.w3schools.com/html/default.asp

Ετικέτες Φορμών http://www.w3schools.com/html/default.asp

Ετικέτες Πινάκων http://www.w3schools.com/html/default.asp

Δραστηριότητα Πειραματισμός με ετικέτες http://www.w3schools.com/html/html_examples.asp

Microsoft FrontPage Υποστηρίζει την ανάπτυξη ιστοσελίδων χωρίς απαραίτητη γνώση HTML Απλοποιεί και επιταχύνει την ανάπτυξη Ιστοσελίδων WYSIWYG – What You See Is What You Get

Δημιουργία Ιστοτόπου στο FrontPage (1/2) Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Δημιουργία Ιστοτόπου στο FrontPage (2/2) Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιστοσελίδες & Προβολές Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιδιότητες Ιστοσελίδας (1/4) File > Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιδιότητες Ιστοσελίδας (2/4) File > Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιδιότητες Ιστοσελίδας (3/4) File > Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιδιότητες Ιστοσελίδας (4/4) File > Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Προσθήκη & Μορφοποίηση Κειμένου Σαν το Word! To Frontpage δημιουργεί αυτόματα τον απαραίτητο HTML κώδικα για αυτά που γράφετε. Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Προβολή Περιήγησης Ιστοτόπου (1/2) Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Προβολή Περιήγησης Ιστοτόπου (2/2) Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Εισαγωγή Πίνακα σε Ιστοσελίδα Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Ιδιότητες Πίνακα Δεξί Κλικ > Table Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Διατάξεις Σελίδας (με Πίνακες) Table > Layout Table and Cells Σημείωση: Είναι προτιμότερο να χρησιμοποιούνται CSS (Cascading Style Sheets) για τη διάταξη

Εισαγωγή Εικόνας σε Ιστοσελίδα & Ιδιότητες Insert > Picture Δεξί Κλικ > Picture Properties Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Δημιουργία Υπερσυνδέσμου Επιλέγω το κείμενο!! + Insert > Hyperlink Εσωτερικός Υπερσύνδεσμος (στον ίδιο ιστότοπο) Εξωτερικός Υπερσύνδεσμος (σε άλλον ιστότοπο) Σταύρος Καμμάς, Πανεπιστήμιο Αιγαίου

Εισαγωγή Βίντεο σε Ιστοσελίδα Insert > Picture > Video

Χρήσιμα FREE εργαλεία GoogleSites - https://sites.google.com/ Wix - http://www.wix.com/