Luyện nói tiếng Anh bằng Shadowing qua video: Introduction to HTML | An HTML5 Tutorial for Beginners
Chọn chế độ luyện tập
Mỗi chế độ mở một phòng luyện tập toàn màn hình.
267 câu
Nếu các câu quá ngắn hoặc quá dài, hãy bấm Edit để chỉnh sửa.
1
hello and welcome hi i'm dave this tutorial series is for you
Xin chào và chào mừng các bạn, tôi là Dave, loạt bài hướng dẫn này là dành cho các bạn.
2
if you are just beginning your journey towards learning web development
3
or maybe you're looking for an html resource to share with
4
a friend who is just beginning their journey towards learning web development
5
or you may be looking for a refresher course
6
because you previously learned html but it has been a few semesters or even years since you looked at it.
7
Or maybe you have another reason that I haven't even thought of.
8
No matter.
9
You're welcome, and I hope I help you on your journey.
10
Throughout the tutorial, I will mention some references and tools, and I will provide links to everything I mention in the description below.
11
Let's get started learning HTML.
12
What is HTML?
13
HTML is an acronym that stands for Hypertext Markup Language.
14
And Hypertext Markup Language is the most basic building block of the web.
15
It defines the meaning and structure of web content.
16
And Hypertext refers to links that connect web pages to each other, and that can be within a single website or from one website to another.
17
Overall, HTML uses markup to annotate text, images, and other content for display in a web browser.
18
And you can see an example of some of these markup elements here.
19
But before we begin creating a web page and using these markup elements, we need to get the necessary tools.
20
So let's start with a web browser.
21
If you don't have one, or if you're curious what I will be using in this series, I'll be using the Google Chrome browser,
22
and you can download that at google .com slash chrome.
23
So if you don't have that and want to use that, go ahead and download and install now and then come back to the tutorial.
24
Also, I will be using an extension,
25
and we go to chrome .google .com slash web store to get extensions for the Chrome browser
26
and there if you want to use the extension
27
that i'm going to use it's called dark new tab
28
and you can press enter to search for that
29
and once you've completed your search you'll see dark new tab offered by keller
30
which is the one that i have added
31
and you can see added here i'll click on that
và bạn có thể thấy phần đã được thêm vào ở đây, tôi sẽ nhấp vào đó
32
and once you're inside the page for dark new tab
33
you should have an install button here since i already have it installed
34
this is now a remove button for me what this does is
35
when you open a new tab in the browser it uses a dark page instead of a light page
36
and I use dark mode whenever possible so I prefer that.
37
If you see me open a new tab in this development series you'll probably see a dark tab like this one.
38
From there we need to get a code editor
39
and the industry standard right now and what I prefer to use is Visual Studio Code.
40
Again you can use other code editors to write your HTML code.
41
But if you go to code .visualstudio .com, you'll be able to download
42
Visual Studio Code for free.
43
And there you can download for Windows if you're on Windows like I am, or you can click other platforms.
44
And it's also available for Linux and Mac OS.
45
So now would be a good time to go ahead and download
46
Visual Studio Code and install your code editor and go ahead and open that up and then come back to the video.
47
Okay I am now assuming you have installed
48
Visual Studio Code and have opened it up and you may see something like this or you may see a welcome screen.
49
What you need to do is create a folder on your computer and we will put our files inside that folder.
50
So if I go to the file menu
51
and choose open folder you can see once this pops up what folder I am in, the HTML course folder in Windows,
52
and then I've created an 01 underscore lesson folder.
53
So if I highlight that and select the folder, I am now inside that folder and ready to create my first HTML file.
54
So if you see the file tree over here on the left, and it's currently empty, if you don't click this icon in the top left,
55
which is the file explorer, and that will hide or show this file explorer we're going to create the plus button
56
or click the plus button here for new file
57
and create a new file now we'll type index .html as that is always the file name
58
that is expected to launch a website
59
and you always want to keep your file names lower case
60
and with no spaces now windows will not complain
61
if you put a space or use upper or lower case however
62
when we host our files on a web server a web server will differentiate many times
63
and that can cause problems
64
so the naming convention is to always use lowercase no spaces you can use hyphens dashes
65
and then end each file in dot html
66
Okay, we have an empty index .html file.
67
Let's create our first HTML element.
68
And as you might guess, the first HTML element we'll create is HTML.
69
So if we type HTML, all lowercase, and press tab in Visual Studio Code, it creates the tags.
70
And by tags, that is often interchanged as a word with element.
71
However, the element consists of the starting and ending tag
72
and everything in between
73
but here we might just be referring to the starting also called the opening tag
74
or the ending also called the closing tag
75
so we refer to html tags but every page starts
76
and ends with the html opening and closing tags and everything else on the page goes between those tags.
77
After creating our HTML element, HTML pages have two main areas, and one area contains data that is not seen on the page,
78
but is considered to be metadata about the page, and that is the head area.
79
So just type head, not header, but head, and press tab, and now we have our head element,
80
and we will put metadata about the page inside this area.
81
But the next area is the page that every
82
or is the part of the page that everybody sees in the browser
83
and that is held within the body element so type body
và phần đó được chứa trong phần tử body nên hãy gõ body
84
and press tab and now we have our two major sections of our page
và nhấn phím tab, bây giờ chúng ta đã có hai phần chính của trang.
85
that are both inside of the html element we have a head section
đều nằm bên trong phần tử HTML, chúng ta có phần đầu trang.
86
and a body section now inside the head we'll just put one piece of metadata today
và phần nội dung chính bây giờ nằm trong phần đầu, hôm nay chúng ta sẽ chỉ thêm một đoạn siêu dữ liệu thôi
87
and it really won't start with the word meta we'll come back to
và thực sự nó sẽ không bắt đầu bằng từ meta mà chúng ta sẽ quay lại thảo luận sau.
88
that word in the future we're going to create a title element
từ đó trong tương lai chúng ta sẽ tạo ra một phần tử tiêu đề
89
and give our page a title let's just call this my first web page
và đặt tiêu đề cho trang của chúng ta, hãy gọi đây là trang web đầu tiên của tôi
90
and this will stay inside of the html document now i just pressed ctrl s
và cái này sẽ được lưu vào trong tài liệu HTML, bây giờ tôi vừa nhấn Ctrl S
91
which saved the document you otherwise would see a dot up here by the index .html So I saved that,
điều đó đã lưu tài liệu, nếu không bạn sẽ thấy một dấu chấm ở đây bên cạnh tệp index.html. Vậy là tôi đã lưu nó rồi.
92
and I am using an auto -formatter.
và tôi đang sử dụng một công cụ tự động định dạng.
93
Visual Studio Code may or may not do that for you when you save your file.
Visual Studio Code có thể tự động thực hiện việc đó khi bạn lưu tệp, cũng có thể không.
94
If you want that, you can go to the extension icon over here and search for a Prettier extension.
Nếu bạn muốn vậy, bạn có thể nhấp vào biểu tượng tiện ích ở đây và tìm kiếm tiện ích mở rộng Prettier.
95
And I'm not sure if mine is enabled or I'm using something else right now.
Và tôi không chắc là tính năng của tôi đã được bật hay tôi đang sử dụng một thứ khác ngay bây giờ.
96
We'll have to check.
Chúng tôi sẽ phải kiểm tra lại.
97
Now, mine is disabled, but I do recommend this one.
Bây giờ cái của tôi đã bị vô hiệu hóa, nhưng tôi vẫn khuyên dùng cái này.
98
Prettier is a code formatter that will auto -format your code, but Visual Studio Code may do some of that as well.
Prettier là một công cụ định dạng mã nguồn tự động, nhưng Visual Studio Code cũng có thể thực hiện một số tác vụ định dạng đó.
99
But if you want to use Prettier, go ahead and click
Nhưng nếu bạn muốn dùng Prettier thì cứ nhấn vào đi nhé.
100
Install, and you can use that as well.
101
So I'll close out that Prettier tab, go back to the File Explorer here,
Vậy tôi sẽ đóng tab Prettier đó, quay lại với File Explorer ở đây,
102
so we see our index .html on the left instead of the extensions.
vì vậy chúng ta thấy tệp index.html của mình ở bên trái thay vì các phần mở rộng.
103
And now we can see our HTML is formatted in a very easy to read manner.
Và bây giờ chúng ta có thể thấy mã HTML của mình được định dạng theo cách rất dễ đọc.
104
We have our HTML element, and then the head element, and then the body element, and they're separated by spaces.
Chúng ta có phần tử HTML, sau đó là phần tử head, rồi đến phần tử body, và chúng được ngăn cách bởi dấu cách.
105
Very easy to read.
Rất dễ đọc.
106
And we have a title inside of the head.
Và chúng ta có một tiêu đề bên trong thẻ head.
107
Again, the title will not be seen inside of the browser in the body of the page,
Một lần nữa, tiêu đề sẽ không hiển thị trong phần nội dung của trang trong trình duyệt.
108
but I will show you very shortly where we do see it.
nhưng tôi sẽ cho các bạn thấy ngay sau đây nơi chúng ta thực sự nhận thấy điều đó.
109
Inside of the body element, though, let's put an H1 element which stands for a heading
Tuy nhiên, bên trong phần tử body, hãy đặt một phần tử H1, viết tắt của tiêu đề chính.
110
and it is the biggest heading we could put you only put one h1 element per page
và đây là thẻ tiêu đề lớn nhất mà chúng ta có thể sử dụng, bạn chỉ nên đặt một thẻ h1 cho mỗi trang.
111
and that should be saying what your page is about it doesn't necessarily have to be the same text
và đó là phần mô tả nội dung trang của bạn, không nhất thiết phải là cùng một đoạn văn bản.
112
that is in the title
điều đó nằm trong tiêu đề
113
but here we're just going to put hello world as is
nhưng ở đây chúng ta sẽ giữ nguyên dòng "hello world" như cũ.
114
the tradition for creating your first file in any language you're learning and so we have hello world on the page,
truyền thống là tạo ra tệp đầu tiên bằng bất kỳ ngôn ngữ lập trình nào bạn đang học, và vì vậy chúng ta có chương trình "Hello World" trên trang.
115
and we have my first web page in the head section.
và chúng ta có trang web đầu tiên của tôi trong phần head.
116
Let's add one more element in the body of the page.
Chúng ta hãy thêm một phần tử nữa vào phần thân của trang.
117
And this is a paragraph element that starts and ends just with the letter P.
Và đây là một phần tử đoạn văn bắt đầu và kết thúc chỉ bằng chữ cái P.
118
But notice each of our tags, of course, start with this less than, and then end with a greater than.
Nhưng hãy chú ý rằng tất cả các thẻ của chúng ta, tất nhiên, đều bắt đầu bằng dấu nhỏ hơn và kết thúc bằng dấu lớn hơn.
119
And then the ending tag, you'll notice, has a slash.
Và sau đó, bạn sẽ nhận thấy thẻ kết thúc có một dấu gạch chéo.
120
But all we have to do in Visual Studio code is type P and press tab and it creates both for us.
Nhưng tất cả những gì chúng ta cần làm trong Visual Studio Code là gõ chữ P rồi nhấn phím Tab, và nó sẽ tự động tạo cả hai cho chúng ta.
121
So we're going to put some text inside of our paragraph
Vì vậy, chúng ta sẽ đặt một số văn bản vào bên trong đoạn văn của mình.
122
and here we'll just put this is my first web page with a period to end the sentence and save.
và ở đây chúng ta sẽ chỉ đặt đây là trang web đầu tiên của tôi với một dấu chấm để kết thúc câu rồi lưu lại.
123
Once again I'm pressing ctrl s on the keyboard to save.
Một lần nữa tôi nhấn phím Ctrl S trên bàn phím để lưu lại.
124
You can go to the file menu
Bạn có thể vào menu tệp.
125
and from there you can also choose save but you'll notice the shortcut is ctrl and the letter s.
và từ đó bạn cũng có thể chọn lưu, nhưng bạn sẽ thấy phím tắt là ctrl và chữ cái s.
126
We're almost ready to view our web page, but before we do, remember the extensions we went to?
Chúng ta gần như đã sẵn sàng để xem trang web của mình, nhưng trước khi làm vậy, hãy nhớ về các tiện ích mở rộng mà chúng ta đã cài đặt.
127
I want to show you just a few if you want your Visual Studio code to look like mine.
Tôi muốn chỉ cho bạn một vài cài đặt nếu bạn muốn giao diện Visual Studio Code của mình trông giống của tôi.
128
One thing to draw your attention to is when I created an index .html file,
Một điều cần lưu ý là khi tôi tạo tệp index.html,
129
i have the little icon for html5 beside it you may not have that but if we click on extensions
Bên cạnh đó tôi có biểu tượng nhỏ của HTML5, có thể bạn không có cái đó nhưng nếu chúng ta nhấp vào phần tiện ích mở rộng
130
and then we can delete prettier
và sau đó chúng ta có thể xóa Prettier
131
that i searched for before type vs code dash icons there you'll find the extension
tôi đã tìm kiếm trước đó trong VS Code với từ khóa "dash icons", và bạn sẽ tìm thấy tiện ích mở rộng đó ở đó.
132
that will add that to your vs code as well
điều đó cũng sẽ thêm tính năng đó vào VS Code của bạn
133
so you can install i already have it installed
vậy bạn có thể cài đặt đi, tôi đã cài sẵn rồi
134
so mine says uninstall and that will add icons as you create files
trên máy của tôi thì ghi là gỡ cài đặt, và thao tác đó sẽ thêm các biểu tượng khi bạn tạo tệp mới
135
and it might add the icon up here as well in the tab
và nó cũng có thể thêm biểu tượng ở đây trong thanh tab
136
and that's how you see the icon here beside my index .html in the file explorer
và đó là cách bạn thấy biểu tượng ở đây bên cạnh tệp index.html của tôi trong trình quản lý tệp
137
so visually it helps you see what type of file you're working with quickly without even reading everything after
về mặt trực quan, nó giúp bạn nhanh chóng nhận biết loại tệp mà bạn đang làm việc mà không cần phải đọc toàn bộ nội dung sau đó.
138
that extension let's go ahead and click the extensions icon again
tiện ích đó, bây giờ chúng ta hãy nhấp vào biểu tượng tiện ích một lần nữa
139
and then search for github theme i am using a specific theme which i prefer dark mode in everything that I do.
sau đó hãy tìm kiếm chủ đề GitHub, tôi đang sử dụng một chủ đề cụ thể mà tôi thích chế độ tối cho mọi thứ tôi làm.
140
So I am using the GitHub theme extension and it has light and dark themes.
Tôi đang sử dụng tiện ích mở rộng chủ đề GitHub và nó có cả chủ đề sáng và chủ đề tối.
141
I believe I'm using the default dark theme.
Tôi tin rằng mình đang sử dụng chủ đề tối mặc định.
142
This might be bright for a second, but I'll click set color theme.
Màn hình có thể sẽ sáng lên trong giây lát, nhưng tôi sẽ nhấn vào nút đặt chủ đề màu sắc.
143
And yes, it switched back to light, but I choose GitHub dark default, and then yours will look much like mine.
Và đúng là nó đã chuyển lại về chế độ sáng, nhưng tôi chọn chế độ tối mặc định của GitHub, và sau đó giao diện của bạn sẽ trông giống hệt của tôi.
144
Now these previous extensions have been optional, but one that I say is a must for you to install is called Live Server.
Trước đây các tiện ích mở rộng này đều là tùy chọn, nhưng có một tiện ích mà tôi khuyên bạn nhất định phải cài đặt, đó là Live Server.
145
So let's pull up
Vậy thì hãy mở ra xem nào.
146
Live Server by Ritwick Day.
Live Server của Ritwick Dey.
147
I'll click on that.
Tôi sẽ nhấp vào đó.
148
And you want to install
Và bạn muốn cài đặt
149
Live Server because it's going to help us view our web pages.
Live Server vì tiện ích này sẽ giúp chúng ta xem trước các trang web của mình.
150
So go ahead and install Live Server.
Vậy thì hãy tiến hành cài đặt Live Server đi.
151
And after you have it installed, we'll go ahead and take a look at the web page we've created.
Sau khi bạn cài đặt xong, chúng ta sẽ tiếp tục xem trang web mà chúng ta đã tạo.
152
Okay, with that installed, I'm going to close
Được rồi, sau khi cài đặt xong, tôi sẽ đóng lại.
153
that tab i'll come back to the file explorer here to show the file
Tôi sẽ quay lại trình quản lý tệp ở tab đó để hiển thị tệp.
154
and now if you have live server installed you should be able to right click
và bây giờ nếu bạn đã cài đặt Live Server, bạn sẽ có thể nhấp chuột phải
155
and open with live server
và mở bằng Live Server
156
and once we choose open with live server it opens our browser
và khi chúng ta chọn mở bằng Live Server, trình duyệt của chúng ta sẽ được mở ra.
157
and we can see our web page it says hello world
và chúng ta có thể thấy trang web của mình hiển thị dòng chữ hello world
158
this is my first web page in addition in the tab at the top it says my first web page so
Đây là trang web đầu tiên của tôi, ngoài ra thì trên tab ở đầu trang cũng hiển thị dòng chữ "trang web đầu tiên của tôi".
159
that is where the title goes at the very top of the browser in the tab
đó là nơi tiêu đề được đặt ở vị trí trên cùng của trình duyệt, trong tab trình duyệt.
160
now this is very bright and i have mentioned
bây giờ cái này rất sáng và tôi đã đề cập rồi
161
that i prefer dark mode so let's go back to visual studio code
vì tôi thích chế độ tối nên hãy quay lại với Visual Studio Code nhé
162
and i'm just going to paste in some quick styling
và tôi chỉ sẽ dán một vài đoạn định dạng nhanh vào thôi
163
that is actually css once again this is optional
đó thực ra lại là CSS, một lần nữa thì cái này là tùy chọn
164
but it will save my eyes and possibly yours as we work through this tutorial
nhưng nó sẽ giúp tôi đỡ mỏi mắt và có thể là cả bạn nữa khi chúng ta thực hiện qua hướng dẫn này.
165
so once we're back in visual studio code just underneath the title in the head section
vậy là sau khi chúng ta quay trở lại Visual Studio Code, ngay bên dưới tiêu đề trong phần head
166
I'm going to paste this in I'll quickly describe it I put in a style element
Tôi sẽ dán cái này vào, tôi sẽ mô tả nhanh nó thôi, tôi đã đặt vào một phần tử kiểu.
167
and that allows me to put in some quick CSS
và điều đó cho phép tôi chèn một đoạn CSS nhanh vào
168
and I changed the font size to make it just a little larger
và tôi đã thay đổi kích thước chữ để nó lớn hơn một chút
169
and then I changed the background color to a dark color
và sau đó tôi đã đổi màu nền thành một màu tối
170
and I changed the font color to an off -white color called white smoke
và tôi đã đổi màu chữ thành một màu trắng nhạt gọi là trắng khói.
171
and that's all I did we're not really learning CSS here, but this will save our eyes going forward if you want to make these changes.
và đó là tất cả những gì tôi đã làm, chúng ta không thực sự học CSS ở đây, nhưng điều này sẽ giúp chúng ta dễ nhìn hơn về sau nếu bạn muốn thực hiện những thay đổi này.
172
If you prefer the white with dark text, that is fine too.
Nếu bạn thích nền trắng với chữ tối thì cũng được.
173
But now that I've saved this, the beauty of live server is that it automatically reloads our page for us in the browser.
Nhưng bây giờ tôi đã lưu cái này rồi, ưu điểm của Live Server là nó tự động tải lại trang của chúng ta trên trình duyệt.
174
So let's go back to the browser and look at our update.
Vậy hãy quay lại trình duyệt và xem bản cập nhật của chúng ta.
175
And now you can see our webpage is in dark mode and we have a little bit larger text here as well.
Và bây giờ bạn có thể thấy trang web của chúng ta đang ở chế độ tối và chúng ta cũng có chữ lớn hơn một chút ở đây.
176
It did not change our title from the head because that just goes into the tab of the browser.
Nó không thay đổi tiêu đề của chúng ta trong phần đầu trang vì phần đó chỉ hiển thị trên tab của trình duyệt thôi.
177
Also notice the address.
Cũng hãy để ý đến địa chỉ.
178
This is an IP address and then we have a colon and this is a port number.
Đây là một địa chỉ IP, sau đó chúng ta có một dấu hai chấm và đây là số cổng.
179
But this is on your own computer.
Nhưng việc này diễn ra trên máy tính của bạn.
180
This is not on mine.
181
I can't go onto the web and see your page that we just created.
182
We haven't loaded it to the web.
183
It is just running on your computer.
184
But this is the way to view web pages as we create them, which creates your own local server.
185
It's what's called a dev environment and that is preferred.
186
What you don't want to do in Chrome is try to open a file like you would in Word
187
or some other document browser, or even Visual Studio Code, how we open files.
188
That's not how you want to view a web page.
189
You want to use a development server, and that's what we're doing with live server in Visual Studio Code.
190
Now, if you ever want to stop the server, down here in the bottom, you can see the port number 5500,
191
and it says click to close server so i can just click
192
that it says disposing and now we have a go live button
193
which you can also use you can also right click on your document
194
and choose stop or open with live server now we would once again since we stopped
195
that we would need to open with live server to have a live web page
196
that responds to changes we make
197
and notice how it opened a new tab here instead of our old tab our old tab.
198
server for that page closed so we close that out
199
and now we're using this one
200
because this is going to show our most recent changes
201
now after we've created a web page how do we know
202
if we have errors or not well that's where a validation service comes into play
203
and this is the w3c markup validation service w3c stands for the worldwide web consortium
204
that really makes the standards for the web overall what we
205
want to do to check our page is click file upload
206
because remember our web page is really not on the web
207
it's just on our computer your web page is on your computer
208
and mine is on my computer so let's click file upload
209
and from here we're going to choose the file on the computer
210
and we get a browse window and now i'm going to click
211
html tutorials and then i have an html course folder
212
and then the zero lesson one folder that we just created
213
and there is the index .html file we've been working with so i'll click open
214
and now that it's here we can click check
215
and we're going to get some errors and we'll go over those okay now
216
that we have checked our page we have got a warning
217
and a couple of errors
218
so there are things
219
we need to fix in our html file let's address these
220
in order with the first warning says consider adding a lang
221
attribute to the html start tag to declare the language of the document
222
so that is something we should do now we're going to go to the html tag
223
and we can add what is called an attribute
224
and this is the lang attribute and i'm going to set it equal to E -N, which is the abbreviation for English in general.
225
You can supply a dialect like this, dash U -S, or I believe the other would be G -B, but I don't usually do that.
226
So I'm just putting E -N for English.
227
You might have another language you prefer to put there, and you can find a list of those at the MDM network as well.
228
And that's the page where we were looking for the definition of HTML at the beginning of this tutorial.
229
So I will link to MDN, the Mozilla Developer Network, in the description.
230
Now that we've added the language attribute, let's go look at the other errors we had and see what else we need to fix.
231
It says the character encoding was not declared.
232
So we also need to handle that.
233
Let's go back to Visual Studio Code.
234
And now inside the head, there is an element called meta.
Và bây giờ, bên trong thẻ head có một phần tử gọi là meta.
235
Earlier I said the head stores metadata.
236
Let me keep it all lowercase here.
237
And here we can set what is called the character set attribute inside of a meta element.
238
And from here, I'll put UTF -8, which is the standard for all web pages that I have worked on.
239
There are other character sets, but this is the typical value you would see in there.
240
So I'm going to save this.
241
And in the future, we'll cover more meta tag values that we'll have inside of the head.
242
Now let's go back and look at that last error that we got from the validation service.
243
And that said start tag seen without seeing a doc type first expected
244
and it shows you exactly what it wants doc type HTML.
245
And that is a document type declaration
246
that should be on the very first line of your page
247
so let's go back to our html file go to the very top
248
and we'll press return and we'll paste in exactly what they had there
249
so you see once again it starts with the less than
250
and the greater than symbol but this is not really an html element
251
or tag this is just a doc type declaration that you should have in every html file at the very beginning.
252
So now I'll put that in and save as well.
253
Let's look at the validator first and let's choose the file again.
254
And now I've selected the index .html to upload with our changes and we'll click check.
255
Document checking completed.
256
No errors or warnings.
257
So our document is just fine.
258
Let's go to the tab with our page, and let's reload the page.
259
And once we reloaded, everything looked great.
260
So we've got
261
Hello World, this is my first web page, and we still have my first web page in the tab at the top for the title,
262
and we have passed all validation checks.
263
Remember to keep striving for progress over perfection, and a little progress every day will go a very long way.
264
Please give this video a like if it's helped you.
265
And thank you for watching and subscribing.
266
You're helping my channel grow.
267
Have a great day, and let's write more code together very soon.
Tải Ứng Dụng
Mọi thứ bạn cần để nói trôi chảy
Chấm điểm AIChấm từng câu nói
Luyện IPAThành thạo mọi âm
Từ vựngMở rộng vốn từ
Game Từ vựngHọc qua chơi
Cùng kênh
FOR YOU
Video gợi ý
A124
12 câu
Beginner English Introduction
Daily ConversationWorking Adults
B21
191 câu
I Rebuilt My Entire Website in Astro… Was It Worth It?
Daily ConversationWorking Adults
A21
6 câu
Trying Something New? just ask google
Daily ConversationWorking Adults
B12
52 câu
The Complete Beginners Guide to Adobe Photoshop | FREE Course | Course overview & breakdown
Daily ConversationWorking Adults
C13
81 câu
Everything You Need to Know About DNS: Crash Course System Design #4
Daily ConversationUniversity StudentsWorking Adults
B21
132 câu
Video
Daily ConversationUniversity StudentsWorking Adults
B11
140 câu
تعلم القراءة باللغة الانجليزية كورس القراءة المستوى الثاني 7
Daily ConversationWorking Adults
B21
80 câu
Python3 For Pentesting - Introduction
Daily ConversationUniversity StudentsWorking Adults
C13
285 câu
8 New CSS, JS and HTML Features You Should Know
Daily ConversationWorking Adults
B2172 câu
How to Create Your Own HABIT TRACKER | Step-by-Step Tutorial for Beginners | Google Sheets
Daily ConversationWorking Adults
B21
117 câu
The Easiest Way to Build Websites
Daily ConversationWorking Adults
B22
57 câu
Basic Engineering tools
Daily ConversationWorking Adults
Từ vựng và ghi chú luyện nói cho bài học này
Bài luyện nói này dựa trên video “Introduction to HTML”. Những từ được nhắc lại nhiều nhất trong bài: page, html, web, file, code. Video này có 267 câu và 3459 từ để luyện shadowing. Phần lời nói dài 20:15. Người nói nói với tốc độ tự nhiên, khoảng 171 từ mỗi phút, gần với hội thoại hằng ngày. 84% số từ nằm trong 3.000 từ tiếng Anh thông dụng nhất; phần còn lại nên xem trước khi luyện.
Từ vựng quan trọng trong video
15 từ đáng học trong video, kèm phiên âm và nghĩa:
| Từ | Phiên âm | Nghĩa |
|---|---|---|
| element danh từ | /ˈɛləmənt/ | yếu tố |
| server danh từ | /ˈsɝvɚ/ | trình chủ, máy chủ |
| extension danh từ | /ɪkˈstɛnʃən/ | sự mở rộng |
| folder danh từ | /ˈfoʊldɚ/ | bìa hồ sơ |
| icon danh từ | /ˈaɪ.kɑn/ | biểu tượng |
| install động từ | /ɪnˈstɔl/ | cài đặt |
| attribute danh từ | /ˈæt.ɹɪˌbjut/ | định ngữ |
| dash danh từ | /ˈdæʃ/ | dấu gạch ngang |
| upload động từ | /ˈʌpˌloʊd/ | tải lên |
| pasta danh từ | /ˈpɑ.stə/ | mì ống |
| format danh từ | /ˈfɔːɹ.mæt/ | khổ (sách, giấy, bìa) |
| lesson danh từ | /ˈlɛs.ən/ | bài, bài học |
| select động từ | /sɪˈlɛkt/ | lựa |
| default danh từ | /dɪˈfɔlt/ | mặc định |
| menu danh từ | /ˈmɛn.juː/ | thực đơn |
Cụm động từ bạn sẽ nghe
| Từ | Nghĩa |
|---|---|
| go back động từ | trở lại |
Những câu đáng luyện lại
Các câu ngắn, trọn ý trong video mà bạn có thể dùng lại khi giao tiếp hằng ngày:
- I believe I'm using the default dark theme.
- We haven't loaded it to the web.
- You're helping my channel grow.
Ngữ pháp trong video
Những cấu trúc người nói dùng nhiều nhất, kèm đúng cụm từ trong video:
| Cấu trúc | Trong video |
|---|---|
| Thì hiện tại hoàn thành have/has + quá khứ phân từ — việc đã xảy ra nhưng còn liên quan đến hiện tại | has been · haven't even thought · you've completed |
| Câu bị động be + quá khứ phân từ — nhấn vào việc xảy ra, không phải người làm | is expected · is often interchanged · is not seen |
| Khả năng với “might / may” might/may + động từ — điều có thể xảy ra nhưng không chắc | may be · may see · might guess |
| Lời khuyên với “should” should + động từ — nói điều nên làm | should have · should be · should do |
Phát âm cần chú ý
Người nói dùng 82 dạng rút gọn, ví dụ I'm, we'll, we're. Hãy nói theo dạng ngắn đúng như bạn nghe.
- Âm “sh” và “zh”: extension /ɪkˈstɛnʃən/, validation /ˌvæl.əˈdeɪ.ʃən/, dash /ˈdæʃ/, declaration /ˌdɛk.ləˈɹeɪ.ʃən/, optional /ˈɑp.ʃə.nəl/
- Từ dài — đặt trọng âm cho đúng: validation /ˌvæl.əˈdeɪ.ʃən/, declaration /ˌdɛk.ləˈɹeɪ.ʃən/, automobile /ˈɔː.tə.məˌbil/, necessarily /ˌnɛs.əˈsɛɹ.ə.li/, consortium /kənˈsɔː.ti.əm/
Những âm người Việt thường gặp khó:
- Cụm phụ âm cuối — đọc đủ từng âm, đừng nuốt âm cuối: element /ˈɛləmənt/, installed /ɪnˈstɔːld/, select /sɪˈlɛkt/, default /dɪˈfɔlt/, font /fɑnt/
- Âm /æ/ — mở miệng rộng hơn âm “e”: tag /tæɡ/, attribute /ˈæt.ɹɪˌbjut/, validation /ˌvæl.əˈdeɪ.ʃən/, dash /ˈdæʃ/, format /ˈfɔːɹ.mæt/
- Phụ âm cuối — bật rõ âm cuối của từ: element /ˈɛləmənt/, tag /tæɡ/, installed /ɪnˈstɔːld/, attribute /ˈæt.ɹɪˌbjut/, dash /ˈdæʃ/
Cách luyện với video này
- Nghe hết video một lần, chưa cần nói, và ghi lại những từ bạn chưa biết.
- Bắt đầu ở tốc độ 0,75×, nói đuổi từng câu, rồi quay lại tốc độ bình thường khi đã quen.
- Ghi âm giọng mình rồi so với bản gốc, chú ý các từ như element, server, extension.
Phương Pháp Shadowing Là Gì?
Shadowing là kỹ thuật học ngôn ngữ có cơ sở khoa học, ban đầu được phát triển cho chương trình đào tạo phiên dịch viên chuyên nghiệp và được phổ biến rộng rãi bởi nhà đa ngôn ngữ học Dr. Alexander Arguelles. Nguyên lý cốt lõi đơn giản nhưng cực kỳ hiệu quả: bạn nghe tiếng Anh của người bản xứ và lặp lại to ngay lập tức — như một "cái bóng" (shadow) đuổi theo người nói với độ trễ chỉ 1–2 giây. Khác với luyện ngữ pháp hay học từ vựng bị động, Shadowing buộc não bộ và cơ miệng phải đồng thời xử lý và tái tạo ngôn ngữ thực tế. Các nghiên cứu khoa học xác nhận phương pháp này cải thiện đáng kể phát âm, ngữ điệu, nhịp điệu, nối âm, kỹ năng nghe và độ lưu loát khi nói — đặc biệt hiệu quả cho người luyện IELTS Speaking và muốn giao tiếp tiếng Anh tự nhiên như người bản ngữ.