SlideShare ist ein Scribd-Unternehmen logo
1 von 11
ΔΗΜΙΟΤΡΓΙΑ Ι΢ΣΟ΢ΕΛΙΔΩΝ
HTML – CSS – JAVA SCRIPT – PHP – DRUPAL
Ένασ Συνοπτικόσ Οδθγόσ
• HTML
• CSS
• JAVA SCRIPT
• PHP
• DRUPAL
Ενδιαφζρεςτε για τη δημιουργία ιςτοςελίδων, αλλά ζχετε
μπερδευτεί!
Σι ςημαίνουν όλα αυτά, από ποφ πρζπει να ξεκινήςετε;
Εργαλεία Δημιουργίασ Ιςτοςελίδων
Πολλά πράγματα πρζπει να μάκει κανείσ, για να γίνει
επαγγελματίασ ςτθν
Ανάπτυξη Δικτυακών Σόπων (Web Developer)
Ασ εξετάςουμε βιμα – βιμα, τα ςθμαντικότερα
Web Developer
Η HTML, είναι θ βαςικι γλώςςα δθμιουργίασ ιςτοςελίδων.
Κάκε ιςτοςελίδα αρχίηει και τελειώνει με τθν ετικζτα:
<html>
HTML
<html>
<body>
<p> Hello World </p>
<img src=“world.jpg”>
</body>
</html>
Hello World
Κώδικασ HTML
Ιςτοςελίδα ςτον browser
Η CSS, είναι γλώςςα μορφοποίθςθσ του περιεχομζνου.
Μποροφμε να προςκζςουμε τισ εντολζσ τθσ ςτον κώδικα
τθσ HTML, για να πάρουμε πιο εντυπωςιακζσ ιςτοςελίδεσ!
CSS
<html>
<head>
<style>
p.x {color:rgb(0,0,255);}
</style>
</head>
<body>
<p>Δεν είναι τησ κλάςησ x. </p>
<p class="x“>Είναι τησ κλάςησ x!</p>
</body>
</html>
Δεν είναι τησ κλάςησ x.
Είναι τησ κλάςησ x!
Κώδικασ HTML + CSS
Ιςτοςελίδα ςτον browser
Η JAVA SCRIPT, είναι μία γλώςςα προγραμματιςμοφ
για ιςτοςελίδεσ. Μποροφμε να προςκζςουμε τισ εντολζσ
τθσ ςτον κώδικα τθσ HTML, για να πάρουμε δυναμικζσ
ιςτοςελίδεσ! Οι εντολζσ τθσ Java Script εκτελοφνται ςτον
υπολογιςτι του χριςτθ.
JAVA SCRIPT
<html>
<body>
<button onclick="myFunction()">Πάτηςζ με</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Καλημζρα!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Η PHP, είναι κι αυτι μία γλώςςα προγραμματιςμοφ για
ιςτοςελίδεσ. Μποροφμε να προςκζςουμε τισ εντολζσ τθσ
ςτον κώδικα τθσ HTML, για να πάρουμε δυναμικζσ
ιςτοςελίδεσ, οι οποίεσ μποροφν να ςυνδεθοφν με βάςεισ
δεδομζνων και να προςφζρουν απεριόριςτεσ δυνατότθτεσ.
Οι εντολζσ PHP εκτελοφνται ςτο server!
PHP
…
$query = "SELECT * FROM USER WHERE EMAIL='$user' and
PASSWORD='$password' ";
$results = mysql_query ($query) or die(mysql_error());
$res=mysql_num_rows($results);
if ($res ==1) {
$_SESSION['authuser'] = 1;
echo «Καλώσ ιλκατε" , $_POST['Name'];
echo '<a href="user.php"> Η αρχικι ςασ ςελίδα </a>';
}
else {
echo «Έχετε ξεχάςει το όνομα χριςτθ ι τον κωδικό πρόςβαςθσ";
echo "<br>";
echo «Παρακαλώ προςπακιςτε ξανά"; exit();
}
?>
Ζλεγχοσ
πρόςβαςησ
του χρήςτη
HTML + CSS + JAVA SCRIPT + PHP
• HTML: προςδιορίηει το
περιεχόμενο μιασ
ιςτοςελίδασ.
• CSS: προςδιορίηει τθ μορφι
και τθ διάταξθ του
περιεχομζνου τθσ
ιςτοςελίδασ.
• JavaScript - PHP:
προςδιορίηουν τθ
ςυμπεριφορά τθσ
ιςτοςελίδασ.
Σο’ πιαςα!
Το Drupal είναι ζνα Content Management System.
Ένα ςφςτθμα εγκατάςταςθσ, ανάπτυξθσ και διαχείριςθσ
δικτυακών τόπων, με απεριόριςτεσ δυνατότθτεσ!
Συνδυάηοντασ όλα τα προθγοφμενα εργαλεία, το Drupal ςασ
δίνει τθ δυνατότθτα να γίνετε ζνασ επαγγελματίασ
Web Developer
DRUPAL
( HTML + CSS + JAVA SCRIPT + PHP + … ) = DRUPAL
• HTML – CSS: περιεχόμενο και
μορφοποιιςεισ.
• JAVASCRIPT - PHP:
προγραμματιςμόσ για δυναμικζσ
ιςτοςελίδεσ.
• DRUPAL: ςφςτθμα που
περιλαμβάνει όλα τα
παραπάνω, για τθν ανάπτυξθ
πανίςχυρων δικτυακών τόπων!
Σο’ πιαςα!
Καμήλαλη Δζςποινα
deskamilali@gmail.com

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (10)

Behat for writing tests in a stylized way
Behat for writing tests in a stylized wayBehat for writing tests in a stylized way
Behat for writing tests in a stylized way
 
MOOCs: Ιστορικά και Στατιστικά Στοιχεία - Διδακτικός σχεδιασμός.
MOOCs: Ιστορικά και Στατιστικά Στοιχεία - Διδακτικός σχεδιασμός.MOOCs: Ιστορικά και Στατιστικά Στοιχεία - Διδακτικός σχεδιασμός.
MOOCs: Ιστορικά και Στατιστικά Στοιχεία - Διδακτικός σχεδιασμός.
 
SFA Sales Reporting Software for Key Performance Indicators
SFA Sales Reporting Software for Key Performance IndicatorsSFA Sales Reporting Software for Key Performance Indicators
SFA Sales Reporting Software for Key Performance Indicators
 
Moving through MOOCs: Pedagogy, Learning and Patterns of Engagement
Moving through MOOCs: Pedagogy, Learning and Patterns of EngagementMoving through MOOCs: Pedagogy, Learning and Patterns of Engagement
Moving through MOOCs: Pedagogy, Learning and Patterns of Engagement
 
Open badges for Open Education
Open badges for Open EducationOpen badges for Open Education
Open badges for Open Education
 
Migrating from RDBMS to MongoDB
Migrating from RDBMS to MongoDBMigrating from RDBMS to MongoDB
Migrating from RDBMS to MongoDB
 
Custom Android App Development – Web Animation India
Custom Android App Development – Web Animation IndiaCustom Android App Development – Web Animation India
Custom Android App Development – Web Animation India
 
Coursera Impact Revealed: Learner Outcomes in Open Online Courses
Coursera Impact Revealed: Learner Outcomes in Open Online CoursesCoursera Impact Revealed: Learner Outcomes in Open Online Courses
Coursera Impact Revealed: Learner Outcomes in Open Online Courses
 
Preparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learningPreparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learning
 
21 Inspiring Quotes & Thoughts On Mobile Learning
21 Inspiring Quotes & Thoughts On Mobile Learning21 Inspiring Quotes & Thoughts On Mobile Learning
21 Inspiring Quotes & Thoughts On Mobile Learning
 

Ähnlich wie Δημιουργία Ιστοσελίδων

New Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptxNew Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptx
andreasabiou
 

Ähnlich wie Δημιουργία Ιστοσελίδων (20)

SQL Injection
SQL InjectionSQL Injection
SQL Injection
 
Βάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο ΔιαδίκτυοΒάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
Βάσεις Δεδομένων με Εφαρμογές στο Διαδίκτυο
 
Eisagogi
EisagogiEisagogi
Eisagogi
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Create Websites with HTML 5.0
Create Websites with HTML 5.0Create Websites with HTML 5.0
Create Websites with HTML 5.0
 
Css light
Css lightCss light
Css light
 
Beauty salon
Beauty salonBeauty salon
Beauty salon
 
Html
HtmlHtml
Html
 
Php basics
Php basicsPhp basics
Php basics
 
Wordpress σε 2, 3... γλώσσες, γιατί και πώς;
Wordpress σε 2, 3... γλώσσες, γιατί και πώς;Wordpress σε 2, 3... γλώσσες, γιατί και πώς;
Wordpress σε 2, 3... γλώσσες, γιατί και πώς;
 
WordPress and Business Models
WordPress and Business ModelsWordPress and Business Models
WordPress and Business Models
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1ο
 
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνΒασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
 
Μοντέλο Client/Server, Διαδικτυακές υπηρεσίες και Cloud computing
Μοντέλο Client/Server, Διαδικτυακές υπηρεσίες και Cloud computingΜοντέλο Client/Server, Διαδικτυακές υπηρεσίες και Cloud computing
Μοντέλο Client/Server, Διαδικτυακές υπηρεσίες και Cloud computing
 
Html – basics of static html pages
Html – basics of static html pagesHtml – basics of static html pages
Html – basics of static html pages
 
New Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptxNew Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptx
 
Thesis.Net Features
Thesis.Net FeaturesThesis.Net Features
Thesis.Net Features
 
Intro to mobile apps
Intro to mobile appsIntro to mobile apps
Intro to mobile apps
 
βασικες εννοιες διαδικτυου και σχεδιασης ιστοσελιδων
βασικες εννοιες διαδικτυου και σχεδιασης ιστοσελιδωνβασικες εννοιες διαδικτυου και σχεδιασης ιστοσελιδων
βασικες εννοιες διαδικτυου και σχεδιασης ιστοσελιδων
 
2η διάλεξη Τεχνολογίες Παγκόσμιου Ιστού
2η διάλεξη Τεχνολογίες Παγκόσμιου Ιστού2η διάλεξη Τεχνολογίες Παγκόσμιου Ιστού
2η διάλεξη Τεχνολογίες Παγκόσμιου Ιστού
 

Mehr von Despina Kamilali

Mehr von Despina Kamilali (20)

Θέματα Εξετάσεων στη Συγχώνευση Αλληλογραφίας
Θέματα Εξετάσεων στη Συγχώνευση ΑλληλογραφίαςΘέματα Εξετάσεων στη Συγχώνευση Αλληλογραφίας
Θέματα Εξετάσεων στη Συγχώνευση Αλληλογραφίας
 
Λύση Δ Θέματος Επαναληπτικών Πανελλαδικών Εξετάσεων 2016
Λύση Δ Θέματος Επαναληπτικών Πανελλαδικών Εξετάσεων 2016Λύση Δ Θέματος Επαναληπτικών Πανελλαδικών Εξετάσεων 2016
Λύση Δ Θέματος Επαναληπτικών Πανελλαδικών Εξετάσεων 2016
 
Articulate Storyline
Articulate StorylineArticulate Storyline
Articulate Storyline
 
SlideShare
SlideShareSlideShare
SlideShare
 
Power Point
Power PointPower Point
Power Point
 
Powtoon
PowtoonPowtoon
Powtoon
 
Ηλεκτρονικές Κοινότητες Μάθησης
Ηλεκτρονικές Κοινότητες ΜάθησηςΗλεκτρονικές Κοινότητες Μάθησης
Ηλεκτρονικές Κοινότητες Μάθησης
 
Δημιουργήστε το δικό σας ιστολόγιο
Δημιουργήστε το δικό σας ιστολόγιοΔημιουργήστε το δικό σας ιστολόγιο
Δημιουργήστε το δικό σας ιστολόγιο
 
E-learning
E-learningE-learning
E-learning
 
Διδακτικός Σχεδιασμός
Διδακτικός ΣχεδιασμόςΔιδακτικός Σχεδιασμός
Διδακτικός Σχεδιασμός
 
Drupal Developer Open Badge: Πού θα το φιλοξενήσετε - Πώς θα το δημοσιεύσετε
Drupal Developer Open Badge: Πού θα το φιλοξενήσετε - Πώς θα το δημοσιεύσετεDrupal Developer Open Badge: Πού θα το φιλοξενήσετε - Πώς θα το δημοσιεύσετε
Drupal Developer Open Badge: Πού θα το φιλοξενήσετε - Πώς θα το δημοσιεύσετε
 
Twitter
TwitterTwitter
Twitter
 
Healthy Diet for Women in Menopause
Healthy Diet for Women in MenopauseHealthy Diet for Women in Menopause
Healthy Diet for Women in Menopause
 
Articulate
ArticulateArticulate
Articulate
 
Drupal & Εκπαίδευση
Drupal & ΕκπαίδευσηDrupal & Εκπαίδευση
Drupal & Εκπαίδευση
 
Δημιουργήστε ένα εκπαιδευτικό παιχνίδι με το Powerpoint!
Δημιουργήστε ένα εκπαιδευτικό παιχνίδι με το Powerpoint!Δημιουργήστε ένα εκπαιδευτικό παιχνίδι με το Powerpoint!
Δημιουργήστε ένα εκπαιδευτικό παιχνίδι με το Powerpoint!
 
Πώς να εγκαταστήσετε ένα distribution του Drupal
Πώς να εγκαταστήσετε ένα distribution του DrupalΠώς να εγκαταστήσετε ένα distribution του Drupal
Πώς να εγκαταστήσετε ένα distribution του Drupal
 
Ανοικτά Ακαδημαϊκά Μαθήματα Ελληνικών Πανεπιστημίων
Ανοικτά Ακαδημαϊκά Μαθήματα Ελληνικών ΠανεπιστημίωνΑνοικτά Ακαδημαϊκά Μαθήματα Ελληνικών Πανεπιστημίων
Ανοικτά Ακαδημαϊκά Μαθήματα Ελληνικών Πανεπιστημίων
 
Πληροφορίες Καταχώρησης Ανοικτού Πανεπιστημιακού Μαθήματος
Πληροφορίες Καταχώρησης Ανοικτού Πανεπιστημιακού ΜαθήματοςΠληροφορίες Καταχώρησης Ανοικτού Πανεπιστημιακού Μαθήματος
Πληροφορίες Καταχώρησης Ανοικτού Πανεπιστημιακού Μαθήματος
 
About Microlearning
About MicrolearningAbout Microlearning
About Microlearning
 

Δημιουργία Ιστοσελίδων

  • 1. ΔΗΜΙΟΤΡΓΙΑ Ι΢ΣΟ΢ΕΛΙΔΩΝ HTML – CSS – JAVA SCRIPT – PHP – DRUPAL Ένασ Συνοπτικόσ Οδθγόσ
  • 2. • HTML • CSS • JAVA SCRIPT • PHP • DRUPAL Ενδιαφζρεςτε για τη δημιουργία ιςτοςελίδων, αλλά ζχετε μπερδευτεί! Σι ςημαίνουν όλα αυτά, από ποφ πρζπει να ξεκινήςετε; Εργαλεία Δημιουργίασ Ιςτοςελίδων
  • 3. Πολλά πράγματα πρζπει να μάκει κανείσ, για να γίνει επαγγελματίασ ςτθν Ανάπτυξη Δικτυακών Σόπων (Web Developer) Ασ εξετάςουμε βιμα – βιμα, τα ςθμαντικότερα Web Developer
  • 4. Η HTML, είναι θ βαςικι γλώςςα δθμιουργίασ ιςτοςελίδων. Κάκε ιςτοςελίδα αρχίηει και τελειώνει με τθν ετικζτα: <html> HTML <html> <body> <p> Hello World </p> <img src=“world.jpg”> </body> </html> Hello World Κώδικασ HTML Ιςτοςελίδα ςτον browser
  • 5. Η CSS, είναι γλώςςα μορφοποίθςθσ του περιεχομζνου. Μποροφμε να προςκζςουμε τισ εντολζσ τθσ ςτον κώδικα τθσ HTML, για να πάρουμε πιο εντυπωςιακζσ ιςτοςελίδεσ! CSS <html> <head> <style> p.x {color:rgb(0,0,255);} </style> </head> <body> <p>Δεν είναι τησ κλάςησ x. </p> <p class="x“>Είναι τησ κλάςησ x!</p> </body> </html> Δεν είναι τησ κλάςησ x. Είναι τησ κλάςησ x! Κώδικασ HTML + CSS Ιςτοςελίδα ςτον browser
  • 6. Η JAVA SCRIPT, είναι μία γλώςςα προγραμματιςμοφ για ιςτοςελίδεσ. Μποροφμε να προςκζςουμε τισ εντολζσ τθσ ςτον κώδικα τθσ HTML, για να πάρουμε δυναμικζσ ιςτοςελίδεσ! Οι εντολζσ τθσ Java Script εκτελοφνται ςτον υπολογιςτι του χριςτθ. JAVA SCRIPT <html> <body> <button onclick="myFunction()">Πάτηςζ με</button> <p id="demo"></p> <script> function myFunction() { var x=""; var time=new Date().getHours(); if (time<20) { x="Καλημζρα!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
  • 7. Η PHP, είναι κι αυτι μία γλώςςα προγραμματιςμοφ για ιςτοςελίδεσ. Μποροφμε να προςκζςουμε τισ εντολζσ τθσ ςτον κώδικα τθσ HTML, για να πάρουμε δυναμικζσ ιςτοςελίδεσ, οι οποίεσ μποροφν να ςυνδεθοφν με βάςεισ δεδομζνων και να προςφζρουν απεριόριςτεσ δυνατότθτεσ. Οι εντολζσ PHP εκτελοφνται ςτο server! PHP … $query = "SELECT * FROM USER WHERE EMAIL='$user' and PASSWORD='$password' "; $results = mysql_query ($query) or die(mysql_error()); $res=mysql_num_rows($results); if ($res ==1) { $_SESSION['authuser'] = 1; echo «Καλώσ ιλκατε" , $_POST['Name']; echo '<a href="user.php"> Η αρχικι ςασ ςελίδα </a>'; } else { echo «Έχετε ξεχάςει το όνομα χριςτθ ι τον κωδικό πρόςβαςθσ"; echo "<br>"; echo «Παρακαλώ προςπακιςτε ξανά"; exit(); } ?> Ζλεγχοσ πρόςβαςησ του χρήςτη
  • 8. HTML + CSS + JAVA SCRIPT + PHP • HTML: προςδιορίηει το περιεχόμενο μιασ ιςτοςελίδασ. • CSS: προςδιορίηει τθ μορφι και τθ διάταξθ του περιεχομζνου τθσ ιςτοςελίδασ. • JavaScript - PHP: προςδιορίηουν τθ ςυμπεριφορά τθσ ιςτοςελίδασ. Σο’ πιαςα!
  • 9. Το Drupal είναι ζνα Content Management System. Ένα ςφςτθμα εγκατάςταςθσ, ανάπτυξθσ και διαχείριςθσ δικτυακών τόπων, με απεριόριςτεσ δυνατότθτεσ! Συνδυάηοντασ όλα τα προθγοφμενα εργαλεία, το Drupal ςασ δίνει τθ δυνατότθτα να γίνετε ζνασ επαγγελματίασ Web Developer DRUPAL
  • 10. ( HTML + CSS + JAVA SCRIPT + PHP + … ) = DRUPAL • HTML – CSS: περιεχόμενο και μορφοποιιςεισ. • JAVASCRIPT - PHP: προγραμματιςμόσ για δυναμικζσ ιςτοςελίδεσ. • DRUPAL: ςφςτθμα που περιλαμβάνει όλα τα παραπάνω, για τθν ανάπτυξθ πανίςχυρων δικτυακών τόπων! Σο’ πιαςα!