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
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
Type answer...
Μια μικρή επανάληψη
Show answer
Auto Play
Slide 1 / 26
SLIDE
Similar Resources on Wayground
19 questions
Triangle Inequality Theorem
Presentation
•
7th - 8th Grade
22 questions
Piecewise & Step Functions
Presentation
•
8th Grade
19 questions
CAU TRUC RE NHANH
Presentation
•
8th Grade
22 questions
Numeri binari
Presentation
•
8th Grade
22 questions
Domain and Range of Quadratic Functions
Presentation
•
8th Grade
19 questions
3.1.5 KELEBIHAN STANDARD LIBRARY
Presentation
•
8th Grade
21 questions
Adjective Agreement - Mi insti
Presentation
•
7th - 8th Grade
19 questions
Compound Inequalities
Presentation
•
8th - 9th Grade
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Computers
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
44 questions
8th Grade Social Studies - Staar Review 2021
Quiz
•
8th Grade
20 questions
8th Grade Science STAAR Review
Quiz
•
8th Grade
8 questions
Amoeba Sister Asexual vs Sexual Reproduction
Interactive video
•
8th Grade
15 questions
Pythagorean Theorem Word Problems Quizizz
Quiz
•
8th Grade
29 questions
8th Grade Social Studies STAAR Review Part 2
Quiz
•
8th Grade