Shadowing Practice: HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
149 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
1
Hello and welcome.
2
Hi, I'm Dave.
3
This tutorial is part of a beginners HTML series.
4
I'll be using the Chrome web browser, the Visual Studio Code editor, and the live server extension for Visual Studio Code to view the web page.
5
There are links to these tools, starter code files, and all resources in the description below.
6
Let's look at how to create lists on a web page.
7
Lists are very useful and are used in many places on the web.
8
So we have three different types of lists we're going to create today.
9
Ordered lists, unordered lists, and description lists.
10
Let's start out with recapping here.
11
We've got Visual Studio Code on the left, and I've got the head element collapsed.
12
So we had meta details inside of there.
13
We can collapse that by clicking on the arrow by the line
14
and you see between lines between four and 11 are now collapsed.
15
So we're working inside of the body element to add content to the page.
16
And this is Visual Studio Code and I'm running the live server extension.
17
You can see down here it says port 5500 click to close server.
18
If you've installed the live server extension it may say click to launch
19
or something like that which would actually launch your web page for you because that's how you want to view it
20
in a development environment you don't want to just go to file
21
and open the file in your browser you want to have
22
that live server running that simulates a web server
23
if you're not familiar with the live server extension you can click on the extensions logo here
24
and instead of searching for prettier
25
that i have in there you can search for live server
26
and you can install that live server extension by writwick day right here okay
27
so we've recapped all of
28
that here's the file tree with our files i'm going to hide
29
that by clicking the file explorer here
30
so we can see more of our code
31
and we will add lists to our web page today
32
so i'll scroll down to under the subtopic of my daily schedule
33
and notice how we had these line breaks
34
and spaces here well we're going to replace these
35
so I'm highlighting the first one and then I'm going to press ctrl D
36
that highlights the next one
37
and ctrl D again now it has highlighted all three of those
38
and instead of this line break I'm going to type LI
39
and press tab that adds a list item
40
but we haven't enclosed this in a list yet
41
and we definitely don't need the closing list items here
42
so once again ctrl D ctrl D so all three of these will be list items, but they need to be inside of a list too.
43
So let's make this an ordered list by starting out with an OL
44
and I'll press tab and we got the closing OL tag as well.
45
That stands for ordered list as you might expect.
46
And I'm going to actually put the OL down here after the paragraph tag, the closing paragraph tag, and I'm going to cut with control X
47
or you could retype if you want to
48
and I pasted the closing paragraph tag right after the end of let me tell you how.
49
So this is a shortened paragraph now and the list will not be inside of the paragraph.
50
Now we have our ordered list but it also needs closing li text.
51
So I'm going to type the less than symbol
52
and a slash in Visual Studio Code instantly filled in the closing the rest of what is needed there
53
and i'll do that again for the second one
54
and then i'll do that here for the last one
55
and notice we do have the abbreviation still nested inside of the list item here
56
so now i'm going to press ctrl s and save
57
and visual studio code reformatted that just a little for me
58
but look at our page now that we've added this list it's an ordered list and it is numbered
59
That means it's in order, numerical order, one, two, and three.
60
Notice these are not, this text is not enclosed inside of a paragraph element.
61
So it's not creating that extra space that a paragraph element does.
62
They're stacked right on top of each other.
63
There's still a little bit of space, but not like we have between our paragraphs.
64
So that is an ordered list.
65
We start out with the ordered list element,
66
and then the list items go inside it and each list item is starting and then ending with the LI.
67
Now let's scroll down and look at our vacation area.
68
It says I'm also planning a vacation and we've got a places I would like to visit area.
69
So after that, let's go ahead and add a UL, which as you might guess stands for unordered list.
70
And we'll go ahead and cut that closing tag.
71
And I want to put it after the address here at the bottom
72
so this will be our full list now we need to declare list items here
73
In this instance, I'm going to go ahead and keep the paragraph tags inside each list item.
74
So we created an LI there, and I'll use
75
Control -X to cut and close that first list item here for the first paragraph.
76
I'll do something similar here.
77
Got an LI, but the closing one is going to be in a different spot
78
because our list item can have these tags nested within it, just like we nested the paragraph here.
79
I'm going to go ahead and nest the paragraph and the address inside of the list item here.
80
And so now if I save and Visual Studio Code reformatted my code for me, but notice here's the beginning of the list item,
81
and we have the end way down here after the address.
82
So let's look at what this unordered list looks like on our page.
83
And you can see instead of numbers, it has dots.
84
It does have the extra space created by the paragraph tags
85
and the address element still has the content that it had before
86
and still formatted the same but notice our ordered list
87
and our unordered list are both indented compared to being over here flush to the left with everything else
88
we had like they were before
89
so similar in formatting from an ordered list to an unordered list
90
and also realize
91
that the really the only difference is the bullet point here in an unordered list versus the number in an ordered list.
92
The extra spaces were caused by the paragraph element inside of these unordered list items,
93
and we did not use a paragraph element on these ordered list items.
94
So the list itself and the list items did not create the extra space.
95
That was created by the paragraph elements.
96
Now let's scroll our page.
97
We've got enough content.
98
We need to make sure we're visiting in the very bottom here, we want to add more under place I want to avoid.
99
And I'm going to change that to places I want to avoid.
100
And let's go ahead and remove our paragraph that says anywhere cold, no way.
101
And let's add a description list here.
102
So a description list, as you might guess, starts with DL.
103
Now inside the description list, there are two different types of elements instead of just an
104
li like we had in our other lists for a list item we have a description term
105
and this description term could be the place we want to talk about
106
so let's say the north pole
107
and now for the description term we need to also have description details
108
so that's dd and here i can put i hear this is now let's go ahead
109
and put our strong emphasis back here
110
And I'll put cold and then our exclamation mark.
111
So we have put a strong emphasis on cold.
112
And now I'll create an extra line here just to space these apart.
113
Another DT.
114
I'll put the south pole.
115
And then DD for the details, description details.
116
And I'll say this is also cold.
117
And let's add one more description term and this will be mountaintops and DD for description details.
118
And these, if I spell these, these are also cold.
119
Now, if we save, let's scroll just a little bit more so we can see all of our content here.
120
You can see our description list has a different format than the ordered list and the unordered list.
121
Our description term is to the left, and then the description details are indented to the right.
122
But here is our full list of the North Pole, South Pole, and mountaintops.
123
We want to avoid all of these places when we go on our vacation.
124
With these new lists now added to our file, let's go ahead and create an error on purpose just to see
125
if we have an error in our page when we check it at our validator .w3 .org.
126
And here I'm going to choose file upload.
127
And I may have to switch folders.
128
Let's see.
129
No, I'm in the right one.
130
So I'll just choose index .3.
131
I think we're on lesson four and I forgot to change the file,
132
but I'll do that to make sure that the GitHub repo with all the source code is correct.
133
So let's go ahead and check this file
134
and yes we have some errors because we created one specifically let's see
135
if that's our only error as we have noted in the past one error can create a cascade
136
or a lot of errors so now I've formatted this correctly let's go ahead
137
and load our file back up so we'll choose file
138
We'll choose that index .html file again, and click check.
139
Now, everything is okay.
140
Document checking complete.
141
No errors or warnings to show.
142
So realize if you have an error, it could just be one small syntax error that creates a cascade of errors when we're checking.
143
But this is a great way to learn and, of course, look at the details of the code
144
and it's always a good idea to validate your code after
145
you write it to make sure you don't have any syntax errors.
146
Remember to keep striving for progress over perfection and a little progress every day will go a very long way.
147
Please give this video a like if it's helped you and thank you for watching and subscribing.
148
You're helping my channel grow.
149
Have a great day and let's write more code together very soon.
הורד אפליקציה
כל מה שאתה צריך כדי לדבר בשטף
הגיית AIציון לכל משפט
תרגול IPAשלוט בכל צליל
אוצר מיליםבנה את מאגר המילים שלך
משחק אוצר מיליםלמד תוך כדי משחק
אותו ערוץ
B11
React Native for Beginners tutorial
Daily ConversationUniversity Students
B12
HTML Tag Text Basics | HTML5 Element Text Tutorial
Daily ConversationUniversity Students
B17
Head Tag in HTML | An HTML5 Head Element Tutorial
Daily ConversationUniversity Students
A213
Introduction to HTML | An HTML5 Tutorial for Beginners
Daily ConversationWorking Adults
FOR YOU
המלץ על סרטון
B11
30 משפטים
Video
Daily ConversationUniversity Students
B11
371 משפטים
Learn 97% of Harvard's CS50 in 25 minutes
Daily ConversationUniversity Students
C11
199 משפטים
Stack Data Structure In STL | C++ Tutorial
Daily ConversationUniversity Students
C14
311 משפטים
Handy CSS layout patterns, and fun ways to elevate them
Daily ConversationUniversity StudentsWorking Adults
B22
65 משפטים
Getting to know myTimetable
Daily ConversationUniversity Students
B21
107 משפטים
Engineer's tool list
Daily ConversationUniversity StudentsWorking Adults
B22
341 משפטים
How to Use WaniKani to Learn Kanji | Tutorial for Beginners
Daily ConversationUniversity Students
B16
57 משפטים
Science in English #3 | The Periodic Table
Daily ConversationHigh School StudentsUniversity Students
B21
336 משפטים
Best NextJS Folder Structures | Beginner - Intermediate - Advanced
Daily ConversationUniversity StudentsWorking Adults
B21
460 משפטים
Blender Donut Tutorial Part 1 (2026)
Daily ConversationUniversity Students
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה B1 מבוסס על הסרטון “HTML Lists Tutorial”. המילים שחוזרות הכי הרבה: paragraph, item, description, code, file. בסרטון הזה יש 149 משפטים ו-1796 מילים לתרגול Shadowing. הדיבור נמשך 10:45. הדובר מדבר בקצב טבעי של כ-167 מילים בדקה, קרוב לשיחה יומיומית. 84% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.
אוצר מילים מרכזי בסרטון הזה
15 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| paragraph שם עצם | /ˈpæɹəɡɹæf/ | פִּיסְקָה \ פִּסְקָה |
| scroll שם עצם | /skɹoʊl/ | מגילה, מְגִלָּה |
| nest שם עצם | /nɛst/ | קֵן |
| pole שם עצם | /pəʊl/ | קוטב \ קֹטֶב |
| collapse פועל | /kəˈlæps/ | התמוטט, קרס |
| enclose פועל | /ɪnˈkloʊz/ | צרף |
| syntax שם עצם | /ˈsɪn.tæks/ | תַּחְבִּיר |
| emphasis שם עצם | /ˈɛmfəsɪs/ | דָּגֵשׁ |
| abbreviation שם עצם | /əˌbɹi.viˈeɪ.ʃn̩/ | רָאשֵׁי תֵּבוֹת, ראשי תיבות |
| shorten פועל | /ˈʃɔɹtn̩/ | קיצר |
| beginner שם עצם | /bəˈɡɪnɚ/ | מַתְחִיל, טִירוֹן |
| numerical שם תואר | /n(j)uːˈmɛɹ.ɪ.kəl/ | מִסְפָּרִי |
| folder שם עצם | /ˈfoʊldɚ/ | תִּיקִיָּה |
| explorer שם עצם | /ɛkˈsplɔːɹə(ɹ)/ | חוקר |
| perfection שם עצם | /pɚˈfɛk.ʃən/ | הִשׁתַלְמוּת |
Phrasal verbs שתשמעו
| מילה | משמעות |
|---|---|
| back up פועל | נָסוֹג |
משפטים שכדאי לחזור עליהם
משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:
- Let's start out with recapping here.
- I'll do something similar here.
- I'll put the south pole.
- No, I'm in the right one.
- You're helping my channel grow.
דקדוק בסרטון הזה
המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:
| מבנה | בסרטון |
|---|---|
| הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו | you've installed · we've recapped · has highlighted |
| סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה | are used · are now collapsed · is needed |
| אפשרות עם “might / may” might/may + verb — משהו שיכול לקרות, אך לא בטוח | may say · might expect · might guess |
| עתיד עם “going to” be going to + verb — תכנון לעתיד או משהו שנראה שעומד לקרות | we're going to create · i'm going to hide · we're going to replace |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-53 קיצורים וצורות מקוצרות, כמו I'm, I'll, we're. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: abbreviation /əˌbɹi.viˈeɪ.ʃn̩/, exclamation /ˌɛkskləˈmeɪʃn̩/, shorten /ˈʃɔɹtn̩/, flush /ˈflʌʃ/, perfection /pɚˈfɛk.ʃən/
- מילים ארוכות — שימו לב להטעמה: abbreviation /əˌbɹi.viˈeɪ.ʃn̩/, numerical /n(j)uːˈmɛɹ.ɪ.kəl/
צלילים שדוברי עברית מתקשים בהם:
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: paragraph /ˈpæɹəɡɹæf/, collapse /kəˈlæps/, cascade /kæsˈkeɪd/, recap /ɹiːˈkæp/, syntax /ˈsɪn.tæks/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: paragraph /ˈpæɹəɡɹæf/, scroll /skɹoʊl/, recap /ɹiːˈkæp/, browser /ˈbɹaʊ.zəɹ/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
- עיצור קולי בסוף מילה — /b/, /d/, /g/, /z/, /v/ בלי להפוך אותם לאטומים: cascade /kæsˈkeɪd/, enclose /ɪnˈkloʊz/, strive /ˈstɹaɪv/, upload /ˈʌpˌloʊd/, subscribe /səbˈskɹaɪb/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו paragraph, scroll, nest.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.