ΣΧΕΔΙΑΣΜΟΣ - ΑΝΑΠΤΥΞΗ ΙΣΤΟΣΕΛΙΔΩΝ
ΜΟΥΡΑΤΙΔΟΥ-ΠΕΡΠΕΡΗΣ
Θεματικές Ενότητες
Στα πλαίσια διερεύνησης της ανάγκης για αλλαγές και ανανέωση στην ιστοσελίδα του ΙΕΚ Σίνδου καλείστε να υλοποιήσετε ερωτηματολόγιο το οποίο θα χρησιμοποιήσετε για τη συλλογή των απόψεων ενός ικανοποιητικού δείγματος χρηστών της ιστοσελίδας. Παράλληλα προετοιμάστε λίγες ερωτήσεις με βάση το παραπάνω μέσω των οποίων θα μπορέσουν να προκύψουν ποιοτικά συμπεράσματα με χρήση των εργαλείων συνέντευξης. Συγκεντρώστε τα αποτελέσματα και παρουσιάστε τα παραθέτοντας και τη δική σας εμπειρία χρήσης. Για τα παραπάνω το τμήμα θα χωριστεί σε δύο μεγάλες ομάδες.
Δημιουργώντας μια απλή ιστοσελίδα σε html:
Αντιγράφουμε το παρακάτω σε έναν επεξεργαστή κειμένου (σημειωματάριο) και αποθηκεύουμε ως mypage.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p>
</body>
</html>
Πειραματιζόμαστε με τα παρακάτω:
Εισαγωγή link:
<a href="https://www.google.com">μηχανή αναζήτησης</a>
Εισαγωγή εικόνας:
<img src="image.jpg" alt="my image" width="104" height="142">
Μορφοποίηση παραγράφου:
<p style="color:red;">Η δεύτερη παράγραφος.</p>
Εισάγοντας έξτρα πληροφορία για ένα αντικείμενο – το πεδίο τίτλος εμφανίζεται στην οθόνη όταν με το ποντίκι κινηθούμε πάνω από το αντικείμενο:
<p title="3d paragraf"> Η τρίτη παράγραφος.</p>
Εισάγοντας πεδία CSS σε μια ιστοσελίδα HTML:
Δημιουργήστε το παρακάτω αρχείο mypage1.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
h2{
background-color: green;
color: #ff6347;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p> /* Εισαγωγή σχολίων */
</body>
</html>
Εισαγωγή εικόνας ως background:
Δημιουργήστε το παρακάτω αρχείο mypage2.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<head>
<style>
body
{
background-image: url("img_tree1.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p>
</body>
</html>
Ημερολόγιο
Ανακοινώσεις
- - Δεν υπάρχουν ανακοινώσεις -
