
HTML λίστες - εικονες
Presentation
•
Computers
•
8th Grade
•
Practice Problem
•
Medium
Katerina Melissourgou
Used 28+ times
FREE Resource
9 Slides • 17 Questions
1
Μια μικρή επανάληψη
2
3
Multiple Choice
Κοιτάξτε τον παρακάτω κώδικα και προβλέψτε πώς θα εμφανίζονται οι επικεφαλίδες.
<h3> Eggs </h3>
<h1> Bacon </h1>
<h6> Waffles </h6>
4
Multiple Choice
HTML
<!DOCTYPE html>
<html>
<body>
<h2>My First Heading</h2>
<p>My first paragraph.</p>
</body>
</html>
Σύμφωνα με αυτό τον παραπάνω κώδικα τι κάνει η εντολή <!DOCTYPE html>
Δηλώνει ότι το έγγραφο είναι JavaScript.
Δηλώνει τη συμβατότητα του προγράμματος περιήγησης του εγγράφου.
Δηλώνει την έκδοση html που χρησιμοποιείται.
Καθορίζει την κωδικοποίηση χαρακτήρων για το έγγραφο HTML.
5
Multiple Choice
Ποια από τις παρακάτω ετικέτες δηλώνει ιστοσελίδα HTML 5
<DOCTYPE HTML>
<!DOCTYPE HTML>
<!HTML5>
<DOCTYPE !HTML5>
6
Multiple Choice
Η ετικέτα που χρησιμοποιείται για την έναρξη μιας νέας γραμμής είναι
br
hr
7
Html λίστες
Html εικόνες
8
Υπάρχουν δύο τύποι λιστών στην HTML,
οι ταξινομημένες <ol> και οι μη ταξινομημένες λίστες <ul>.
Μια μη ταξινομημένη λίστα είναι απλώς ένα σύνολο στοιχείων με κουκκίδες.
Κάθε στοιχείο στη λίστα επισημαίνεται με μια ετικέτα <li>.
Το <li> είναι θυγατρικό στοιχείο, που σημαίνει ότι εισέρχεται μέσα στο γονικό του στοιχείο, την ταξινομημένη <ol> ή την μη ταξινομημένη λίστα (<ul>) αντίστοιχα.
9
10
11
Multiple Choice
Ποια από αυτές τις ετικέτες δημιουργεί μια μη ταξινομημένη λίστα
<li>
<ol>
<ul>
<item>
12
Multiple Choice
Ποια από τις παρακάτω ετικέτες χρησιμοποιείται κατά τη δημιουργία λιστών με αρίθμηση και κουκκίδες;
<li>
<ol>
<ul>
<item>
13
Multiple Choice
Τι τύπος λίστας είναι ?
Ταξινομημένη
Μη ταξινομημένη
14
Multiple Choice
Ποια είναι η σωστή ετικέτα HTML για να ξεκινήσετε μια ταξινομημένη λίστα;
<list>
<or>
<ol>
<ordered>
15
Οι ιστοσελίδες περιέχουν εικόνες
16
Η ετικέτα <img>
Η ετικέτα <img> στην HTML χρησιμοποιείται για την ενσωμάτωση μιας εικόνας σε μια ιστοσελίδα.
Οι εικόνες δεν εισάγονται τεχνικά σε μια ιστοσελίδα.
Οι εικόνες συνδέονται με ιστοσελίδες.
Η ετικέτα <img> δημιουργεί ένα κενό χώρο για την αναφερόμενη εικόνα και δεν έχει tag κλεισίματος.
Και έχει δύο απαιτούμενα χαρακτηριστικά:
src - Το οποίο καθορίζει τη διαδρομή προς την εικόνα
alt - Το οποίο καθορίζει ένα εναλλακτικό κείμενο για την εικόνα
17
Multiple Choice
src - Καθορίζει τη διαδρομή προς την εικόνα
ΣΩΣΤΟ
ΛΑΘΟΣ
18
Multiple Choice
alt - Καθορίζει μια εναλλακτική εικόνα σε περίπτωση που η εικόνα δεν μπορεί να διαβαστεί
ΣΩΣΤΟ
ΛΑΘΟΣ
19
Multiple Choice
Το <img> tag είναι κενό, περιέχει μόνο χαρακτηριστικά και δεν έχει tag κλεισίματος.
ΣΩΣΤΟ
ΛΑΘΟΣ
20
Multiple Choice
Καθορίστε ένα εναλλακτικό κείμενο για την εικόνα.
Το εναλλακτικό κείμενο πρέπει να λέει "Smiley".
Το εναλλακτικό κείμενο είναι χρήσιμο όταν δεν είναι δυνατή η εμφάνιση της εικόνας
<img src="smiley.gif" alt="Smiley">
<img src="smiley.gif" text="Smiley">
21
Multiple Choice
Γιατί πρέπει να χρησιμοποιείται το χαρακτηριστικό alt σε ένα στοιχείο εικόνας HTML;
Για να βρείτε μια εναλλακτική εικόνα εάν αυτή που θέλετε δεν λειτουργεί
Για να στείλετε το χρήστη σε άλλη ιστοσελίδα όπου μπορεί να βρει τη σωστή εικόνα
Είναι μια σύντομη περιγραφή μιας εικόνας εάν για κάποιο λόγο ο χρήστης δεν μπορεί να δει την εικόνα
22
Multiple Choice
Ποια ετικέτα πρέπει να χρησιμοποιηθεί για να συμπεριλάβει την ακόλουθη εικόνα: cat.jpeg;
<img src="cats.jpg" alt="cat"/>
<img src="cat.jpeg" alt="cat"/>
<img src="cat.JPG" alt="cat"/>
23
Multiple Choice
Τι πρέπει να αλλάξω σχετικά με αυτήν την ετικέτα για να αλλάξω την εικόνα που θα εμφανίζεται;
<img src="cat.jpeg" alt="cat jumping"/>
cat.jpeg
cat jumping
24
Fill in the Blanks
Τι λείπει από αυτήν την ετικέτα εικόνας;
<img="cat.jpeg" alt="cat"/>
Type answer...
25
Μέγεθος εικόνας - πλάτος και ύψος
Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό style για να καθορίσετε το πλάτος και το ύψος μιας εικόνας.
<img src="img_girl.jpg" alt="εδώ ειναι μια εικόνα" style="width:500px;height:600px;">
ή
απλά τα χαρακτηριστικά width και height
<img src="img_girl.jpg" alt="εδώ ειναι μια εικόνα" width="500" height="600">
26
Fill in the Blanks
Συμπληρώστε την παρακάτω ετικέτα για να εισάγεις μια εικόνα με όνομα school.jpg και διαστάσεις 320 Χ 240 px. (Η εικόνα βρίσκεται στον ίδιο φάκελο με την ιστοσελίδα)
<___ ___= _________ width= _____ ______="240">
Type answer...
Μια μικρή επανάληψη
Show answer
Auto Play
Slide 1 / 26
SLIDE
Similar Resources on Wayground
22 questions
PE SMART Goals
Presentation
•
7th - 8th Grade
22 questions
Matter and Energy Day 3
Presentation
•
8th Grade
22 questions
Algebra 1 Fall Final Review
Presentation
•
9th Grade
19 questions
One Step Inequalities
Presentation
•
8th Grade
19 questions
Berpikir Komputasi
Presentation
•
8th Grade
19 questions
reflections
Presentation
•
7th - 8th Grade
20 questions
PowerPoint Exercise
Presentation
•
8th - 9th Grade
21 questions
SELECT MEASURING INSTRUMENTS
Presentation
•
7th Grade
Popular Resources on Wayground
10 questions
Safety Day 2026 – Student Review
Quiz
•
9th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
12 questions
Map Skills
Quiz
•
3rd Grade
22 questions
Continents and Oceans
Quiz
•
5th Grade
15 questions
Rounding Decimals
Quiz
•
5th Grade