Άρθρα

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

Άσκηση 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>
Δημοσιεύτηκε στισ

Βασικός κώδικας html

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
<style>
body {font-size:14px;}
</style>
</head>
<body>
<h1>Τελικά, ποιο θα είναι το μέλλον στην εξέλιξη της μπαταρίας;</h1>
<p>Σταματημό δεν έχουν οι έρευνες για την δημιουργία ασφαλέστερων και αποδοτικότερων μπαταριών, χωρίς αυτό να σημαίνει ότι όλες βασίζονται στην ίδια φιλοσοφία. Κάποιες, μάλιστα, είναι εντελώς αντίθετες και ένα από τα χαρακτηριστικά παραδείγματα είναι οι δύο πρόσφατες έρευνες των MIT και Harvard.</p>
<p>Ξεκινώντας από την πρώτη, η ομάδα του MIT θεωρεί ότι η λύση θα δοθεί με μπαταρίες ιόντων λιθίου που δεν θα περιλαμβάνουν υγρούς ηλεκτρολύτες, έτσι ώστε να βρίσκονται εξολοκλήρου σε στερεά κατάσταση και να προσφέρουν μεγαλύτερη χωρητικότητα, σταθερότητα και απόδοση.</p>
</body>
</html>

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

Άσκηση για την κατανόηση της γλώσσας CSS – Γ’ ΓΡΑΦ-ΗΛΝ

Ακολουθήστε τα παρακάτω βήματα:

  1. Μπείτε στoν πίνακα ελέγχου του ιστότοπου που έχετε στο wp.w3schools.gr.
  2. Εάν δεν έχετε φτιάξει κανένα άρθρο ακόμα, δημιουργήστε ένα νέο άρθρο και βάλτε του μερικές παραγράφους τυχαίου κειμένου.
  3. Ανοίξτε τον ιστότοπό σας σε μία δεύτερη καρτέλα, από το μενού στην κορυφή της σελίδας.
  4. Στον πίνακα ελέγχου, επιλέξτε το μενού Εμφάνιση >> Custom CSS. Στη σελίδα που θα ανοίξει, μπορείτε να προσθέσετε κώδικα CSS.
  5. Γράψτε τον κανόνα body {font-family:cursive;} και αποθηκεύστε τις αλλαγές.
  6. Γυρίστε στη σελίδα σας και πατήστε “ανανέωση”. Τι συνέβη; Χρησιμοποιήστε τα εργαλεία διαχείρισης του φυλλομετρητή (browser) που ανοίγουν με το F12 για να εντοπίσετε τον κώδικα που μόλις προσθέσατε στη σελίδα.
  7. Κάντε το ίδιο για τους 3 παρακάτω κανόνες:
  • div#content {background-color: yellow;}
  • div {border: 1px solid #0000FF;}
  • p {
    padding-left: 30px;
    color: #FF0000;
    background-color: rgba(50,10,90,0.7);
    }
Δημοσιεύτηκε στισ

Διαγώνισμα Α’ τετραμήνου στο μάθημα Εφαρμογές Πληροφορικής

Να φτιάξετε μια εφαρμογή στο App Inventor, με τα παρακάτω βήματα:

  1. Δημιουργήστε ένα νέο Project με το όνομα pet.
  2. Τοποθετήστε στην οθόνη μια εικόνα ενός ζώου. Από κάτω της βάλτε ένα κουμπί.
  3. Προγραμματίστε την εφαρμογή έτσι ώστε όταν πατάμε το κουμπί, το ζώο να κάνει ένα θόρυβο.
  4. Προσθέστε ένα δεύτερο κουμπί, που όταν το πατάμε, το ζώο θα κάνει άλλο ήχο και θα αλλάζει εικόνα.
  5. Κάθε φορά που θα πατιέται το πρώτο ή το δεύτερο κουμπί, θα εμφανίζεται η αντίστοιχη εικόνα και θα παίζει ο αντίστοιχος ήχος.