Ετικέτα: Σχεδιασμός και Ανάπτυξη Ιστοτόπων

Δημοσιεύτηκε στισ

Άσκηση στην CSS

  1. Μπείτε στη σελίδα http://www.cssdesk.com/ ή https://codepen.io/pen/
  2. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα HTML
  3. Γράψτε τους κατάλληλους κανόνες CSS και τροποποιήστε τον κωδικά HTML προσθέτοντας τα χαρακτηριστικά id και class όπου χρειάζεται ώστε να έχετε το αποτέλεσμα που βλέπετε σε αυτό το pdf.
<body>

<h1>Lorem Ipsum</h1>

<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>

<h4>"Δεν υπάρχει κανείς που να αγαπάει τον ίδιο τον πόνο, να τον αναζητά και να θέλει να τον νιώθει, επειδή απλά είναι πόνος..."</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi mauris, vulputate eget vehicula at, mollis et ipsum. Praesent quis tempor enim. Nam vel lorem at nisl lacinia mollis id at orci. Vivamus at ligula at eros ultricies tincidunt ac quis nibh. Morbi condimentum tempus metus, eget facilisis massa pharetra nec. Etiam tristique elit non dui lobortis tincidunt. Proin ipsum nisi, finibus condimentum enim in, varius suscipit eros. Suspendisse scelerisque tempor purus, consectetur laoreet lorem rutrum nec. Praesent a ante sit amet dolor vulputate bibendum ut sit amet massa. Aenean aliquet neque id risus lobortis, eu mollis justo egestas. Maecenas quis augue pharetra, auctor odio nec, iaculis lectus.</p>

<p>Integer ac ex ut orci facilisis iaculis. Suspendisse euismod, dolor sed consectetur pharetra, ante magna hendrerit ipsum, quis semper urna velit et risus. Vivamus nec turpis nec sem commodo porta. Fusce accumsan nisi lacus, in vulputate diam rutrum sed. Pellentesque sodales diam nulla. Nunc at quam et metus mattis sagittis. Etiam nec ultricies magna, in gravida risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<h4>Pic1</h4>
<img src="http://www.prepressure.com/images/lorem-ipsum-cartoon-entities-r-us.png">

<p> In hac habitasse platea dictumst. Maecenas vel mi non dui pulvinar cursus. Maecenas eros ipsum, ullamcorper sit amet elementum non, vulputate auctor lectus. Nulla vel eros ac dolor rhoncus viverra vitae eget orci. Ut felis lacus, mattis molestie elit ut, scelerisque bibendum libero. Nulla nunc eros, congue ac nisi quis, euismod varius nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<p> Cras sed consequat sem, quis ornare risus. Donec condimentum id justo ac pulvinar. Aliquam pellentesque a urna ut faucibus. Curabitur sollicitudin scelerisque egestas. Duis eu justo vitae eros elementum euismod. Nam eu gravida erat. Pellentesque ultricies vitae turpis mollis placerat. Nam vel semper magna. Pellentesque ligula tellus, egestas in purus non, lacinia pellentesque odio. Nullam commodo tincidunt erat ut consectetur. Nulla facilisi. Nulla nec vestibulum lectus. Vestibulum nec vehicula sapien, sit amet interdum risus. Vestibulum venenatis accumsan metus consequat finibus.</p>

<p>Donec blandit ullamcorper malesuada. Duis bibendum tempor risus, ac congue tellus. Aenean in posuere erat, eu sodales sem. Vivamus ornare, orci et mollis consequat, libero elit porttitor nunc, lobortis vulputate ante elit vitae turpis. Sed gravida est ac sapien auctor, at sollicitudin diam egestas. Etiam sit amet velit dolor. Donec a eros dictum, scelerisque metus non, sodales nibh. Aenean et rutrum ligula. Integer et lacus pretium, convallis urna non, viverra dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lobortis dolor leo, eleifend feugiat nibh placerat non. Nam ligula diam, venenatis at feugiat eget, auctor ac odio. Cras ut tristique nibh, nec rutrum neque. Nunc lorem enim, ultrices eget nisl pharetra, ornare hendrerit lacus. Maecenas volutpat tincidunt purus, vitae sagittis arcu maximus in.</p>

<div>
<ul>
<li>Sed ut metus mollis, efficitur ante quis, commodo lectus.
<li> Integer ut risus a ipsum fermentum rhoncus.
<li>In porttitor ante nec dui interdum, vel faucibus nulla finibus.
<li>Nullam venenatis dui vitae massa euismod dapibus.
</ul>Vivamus ac sem eget nibh tempus ornare ut nec mauris.
</div>

<p> Αυτός είναι ένας απλός <a href="https://el.lipsum.com/">σύνδεσμος</a>, ενώ αυτός ένας άλλος <a href="https://el.lipsum.com/">σύνδεσμος</a> </p>

</body>
Δημοσιεύτηκε στισ

Άσκηση για την κατανόηση class και id στην HTML

Σας δίνεται ο παρακάτω κώδικας HTML που εμφανίζει κάποιες πληροφορίες από την Βικιπαιδεία.

Να κάνετε τις κατάλληλες αλλαγές στον κώδικα και να προσθέσετε τον κώδικα CSS ώστε:

  1. Οι εικόνες να εμφανίζονται στο πλάι του κειμένου, αριστερά και δεξιά εναλλάξ.
  2. Όλες οι εικόνες να έχουν άσπρη κορνίζα 10px με χρωματιστό πλαίσιο.
  3. Η πρώτη παράγραφος (“Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια”) να εμφανίζεται με μικρότερα, πλάγια γράμματα.
  4. Οι παράγραφοι και οι επικεφαλίδες να έχουν αριστερό περιθώριο 20px.

Μπορείτε να χρησιμοποιήσετε κάποιο από τα ακόλουθα εργαλεία δοκιμής κώδικα:

<h1>Πρωτεύοντα</h1>
 <p>Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια</p>
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Olive_baboon1.jpg/300px-Olive_baboon1.jpg">
 <p>Πρωτεύον ονομάζεται κάθε μέλος της βιολογικής τάξης Πρωτεύοντα (Primates), της ομάδας που περιλαμβάνει τους προσιμιίδες (στους οποίους συγκαταλέγονται οι λεμούριοι, οι λόρις, οι γαλάγοι και οι τάρσιοι) και τους σιμιίδες (μαϊμούδες και πίθηκοι). Με εξαίρεση τους ανθρώπους, οι οποίοι κατοικούν σε όλες τις ηπείρους της Γης, τα περισσότερα πρωτεύοντα ζουν σε τροπικές ή υποτροπικές περιοχές της Αμερικής, της Αφρικής και της Ασίας. Ορισμένα από τα πρωτεύοντα που έχουν εξαφανιστεί είναι ο Αρχαιοΐντρις (ένας λεμούριος μεγαλύτερος από τον ασημόρραχο γορίλα) και οι οικογένειες Παλαιοπροπιθηκίδες και Αρχαιολεμουρίδες. </p>
 <p>Τα πρωτεύοντα ποικίλουν σε μέγεθος, από τον λεμούριο ποντικό της Μαντάμ Μπερθ των 30 γραμμαρίων, μέχρι τον Ορεινό Γορίλα των 200 κιλών. Σύμφωνα με απολιθώματα που έχουν εντοπιστεί, πρόγονοι των πρωτευόντων πιθανότατα έζησαν 65 εκατομμύρια χρόνια πριν κατά την ύστερη Κρητιδική περίοδο. Το παλαιότερο γνωστό πρωτεύον βάσει των απολιθωμάτων που έχουν βρεθεί μέχρι σήμερα ήταν ο Πλησιαδάπης που έζησε 55-58 εκατομμύρια χρόνια πριν, κατά την ύστερη Παλαιόκαινο εποχή. Έρευνες πάνω στο μοριακό ρολόι, υποδεικνύουν πως ο διαχωρισμός των πρωτευόντων ίσως έγινε πολύ παλαιότερα, πιθανότατα κατά τη μέση-Κρητιδική, 85 εκατομμύρια χρόνια πριν. </p>
 <h2>Εξελικτική ιστορία</h2>
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Katta_Lemur_catta.jpg/170px-Katta_Lemur_catta.jpg">
 <p>Η τάξη των Πρωτευόντων είμαι τμήμα του κλάδου Ευαρχοντομυωξοί, ο οποίος ανήκει στον κλάδο Ευθήρια, μέρος της ομοταξίας των Θηλαστικών. Πρόσφατη μοριακή γενετική έρευνα στα πρωτεύοντα, τα δερμόπτερα και τις δενδρομυγαλές έδειξε πως τα δερμόπτερα συγγενεύουν περισσότερο με τα πρωτεύοντα απ' ό,τι με τις δενδρομυγαλές, παρόλο που τα τελευταία θεωρούνταν για ένα διάστημα στο παρελθόν μέλη των πρωτευόντων. Αυτές οι τρεις τάξεις σχηματίζουν τον κλάδο των Ευάρχοντων. Ο κλάδος ολοκληρώνεται με τους Μυωξούς (ο οποίος περιλαμβάνει τα Τρωκτικά και τα Λαγόμορφα) σχηματίζοντας τον κλάδο των Ευαρχοντομυωξών. Τα Ευάρχοντα και οι Ευαρχοντομυωξοί αποκαλούνται μερικές φορές υπερτάξεις. Πολλοί επιστήμονες θεωρούν τα δερμόπτερα υποτάξη των πρωτευόντων και αποκαλούν την υπόταξη με τα «πραγματικά» πρωτεύοντα ευπρωτεύοντα. </p>
 <h2>Εξέλιξη</h2>
 <p>Η εξελικτική πορεία των πρωτευόντων εκτιμάται πως άρχισε 65 εκατομμύρια χρόνια πριν, παρόλο που το παλαιότερο γνωστό πρωτεύον, ο Πλησιαδάπης, (π. 55–58 εκ. χρόνια πριν) έζησε κατά την Ύστερη Παλαιόκαινο. Άλλες έρευνες, όπως αυτές στο μοριακό ρολόι των πρωτευόντων, υποστηρίζουν πως ο κλάδος των πρωτευόντων εμφανίστηκε 85 εκατομμύρια χρόνια πριν, κατά τη Μέση Κρητιδική. </p>
 <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Primates-drawing.jpg/170px-Primates-drawing.jpg">
 <p>Σύμφωνα με τη σύγχρονη κλαδιστική, η τάξη των Πρωτευόντων είναι μονοφυλετική. Η υποτάξη Στρεψίρρινοι, πιστεύεται πως διαχωρίστηκε από την πρωτόγονη εξελικτική πορεία των Πρωτευόντων 63 εκατομμύρια χρόνια πριν, παρόλο που παλαιότερες χρονολογίες έχουν επίσης προταθεί. Από τις επτά οικογένειες των στρεψίρρινων, οι πέντε συσχετίζονται με τους λεμούριους, ενώ οι δύο οικογένειες που απομένουν περιλαμβάνουν τις λορισίδες και τους γαλάγους. Παλαιότερα συστήματα ταξινόμησης, τοποθετούσαν τους Λεπιλεμουρίδες στους Λεμουρίδες και τους Γαλαγίδες στους Λορισίδες, δημιουργώντας έτσι μία διαίρεση τρία-δύο των οικογενειών σε αντίθεση με τη διαίρεση πέντε-δύο που παρουσιάζεται εδώ. </p>
 <p>Κατά την Ηώκαινο, στις περισσότερες βόρειες ηπείρους κυριαρχούσαν δύο ομάδες, τα αδαπίμορφα και οι ομομυΐδες. Τα πρώτα θεωρούνται μέλη των Στρεψίρρινων, αλλά δεν έχουν κτενωτά δόντια (toothcomb) όπως οι σύγχρονοι λεμούριοι (πρόσφατες έρευνες ταξινομούν τον Darwinius masillae σε αυτή την ομάδα). Τα τελευταία συσχετίζονται στενά με τους τάρσιους, τις μαϊμούδες και τους πιθήκους. Δεν είναι ακόμα ξεκάθαρο πως συνδέονται αυτές οι δύο ομάδες με τα σωζόμενα πρωτεύοντα. Οι Ομομυΐδες εξαφανίστηκαν περίπου 30 εκατομμύρια χρόνια πριν, ενώ οι Αδαπίδες επιβίωσαν μέχρι περίπου 10 εκατομμύρια χρόνια πριν. </p>
 <h2>Υβρίδια</h2>
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tamarin_portrait_2_edit3.jpg/220px-Tamarin_portrait_2_edit3.jpg">
 <p>Αν και τα υβρίδια των πρωτευόντων εμφανίζονται συχνά σε αιχμαλωσία, υπάρχουν παραδείγματα υβριδισμού των πρωτευόντων και στη φύση. Ο υβριδισμός συμβαίνει όταν συμπίπτει το φάσμα δύο ειδών και προκύπτουν ζώνες υβριδισμού. Τα υβρίδια συνήθως δημιουργούνται όταν οι άνθρωποι τοποθετούν τα ζώα στους ζωολογικούς κήπους ή λόγω πιέσεων από το περιβάλλον όπως είναι το κυνήγι των αρπακτικών. Διαγενετικοί υβριδισμοί, δηλαδή υβρίδια διαφορετικών γενών, συναντώνται επίσης στη φύση. Παρόλο που ανήκουν σε γένη τα οποία είχαν διαχωριστεί εκατομμύρια χρόνια πριν, η διασταύρωση εξακολουθεί να είναι δυνατή μεταξύ των γελάδας και των μπαμπουίνων χαμαντρίας.</p>
Δημοσιεύτηκε στισ

Άσκηση CSS για τον Σχεδιασμό και Ανάπτυξη Ιστοτόπων

Σας δίνονται:

  1. ο κώδικας HTML που περιέχει κείμενο και μια εκόνα από μια σελίδα του σχολικού βιβλίου.
  2. ένα έγγραφο PDF που περιέχει τη σελίδα του βιβλίου: askisi_css_selides_bibliou

Να διαμορφώσετε το περιεχόμενο της ιστοσελίδας με τη βοήθεια της γλώσσας CSS, ώστε να είναι όμοιο στη μορφή με τη σελίδα του βιβλίου.

Μπορείτε να χρησιμοποιήσετε κάποιο από τα ακόλουθα εργαλεία δοκιμής κώδικα:

<body>
<p>Διαχείριση ιστοτόπου</p>
<p>1 Πρόσβαση στη διαχείριση</p>
<p>H διαχείριση του ιστοτόπου γίνεται μετά από την είσοδό μας στο διαχειριστικό περιβάλλον. Για την είσοδο στο διαχειριστικό περιβάλλον θα πρέπει να γνωρίζουμε το όνομα χρήστη-διαχειριστή και το αντίστοιχο συνθηματικό. Επίσης θα πρέπει να γνωρίζουμε και τη διεύθυνση της σελίδας διαχείρισης. Αυτή συνήθως βρίσκεται στη διεύθυνση: http://www.onoma-website.gr/wp-admin όπου το onoma-website.gr θα πρέπει να αντικατασταθεί από το πραγματικό όνομα (domain name) του ιστοτόπου σας. Αφού συλλέξουμε τα παραπάνω στοιχεία, τα βήματα για τη διαχείριση του ιστοτόπου σας είναι τα εξής:</p>
<ol>
<li>Ανοίξτε την ιστοσελίδα διαχείρισης του ιστοτόπου μέσω ενός φυλλομετρητή (web browser) - (Εικόνα 30)</li>
<li>Στη φόρμα εισόδου, που εμφανίζεται, χρησιμοποιήστε το όνομα χρήστη (username) και το συνθηματικό (password), που σας έχουν ήδη δοθεί και κάνετε Σύνδεση.</li>
</ol>
<img src="https://wp.w3schools.gr/wp-content/uploads/2017/11/capture.png">
<p>Εικόνα 30: Είσοδος στη διαχείριση</p>
<p>1.1 Πίνακας ελέγχου - Αρχική σελίδα διαχείρισης</p>
<p>Η πρώτη οθόνη, που συναντάτε με την είσοδό σας στο διαχειριστικό περιβάλλον, έχει την ακόλουθη μορφή:</p>
<p>115</p>
</body>
Δημοσιεύτηκε στισ

Μετασχηματισμός

Κάποτε ήταν ένα τετράγωνο
<div></div>

 
 
Είχε πλευρές 200 pixels και κόκκινο χρώμα
<div style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Το όνομά του ήταν demo
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Όταν του έκανες κλικ, πρασίνιζε
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.background="green";
}
</script>

<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>


 

 
 
Και δε βιαζόταν…
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.transition = "all 2s";
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>