Luyện nói tiếng Anh bằng Shadowing qua video: HTML Links and Navigation Explained | HTML for Beginners #5
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.
86 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
Welcome back to TechAura!
2
Imagine visiting a website and finding absolutely no clickable links.
3
You couldn't visit another page, open an article, or navigate to another website.
4
That would make browsing the internet pretty difficult, right?
5
Luckily, HTML gives us something called hyperlinks.
6
They're what make it possible to connect web pages together.
7
Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.
8
Let's get started.
9
Let's start with the basics.
10
A HTML link, also called a hyperlink, connects one web page to another resource.
11
That resource could be another web page, a website, a document, or even a specific section of the current page.
12
When you click a link, your browser follows its destination.
13
This is one of the most important features of the World Wide Web.
14
But how do we create one?
15
Let's find out!
16
To create a link in HTML, we use the A element.
17
A stands for anchor.
18
Here's a simple example.
19
We start with the opening A tag.
20
Inside it, we have something called an attribute.
21
It's called href.
22
href specifies where the link should take the user.
23
In this example, the destination is Google's website.
24
Then, between the opening and closing tags, we write the text that users can click.
25
Here, it's visit Google.
26
Finally, we close the A element.
27
Now, let's see the result.
28
And that's it, you've just created your first HTML hyperlink.
29
Let's take a closer look at href.
30
href is short for hypertext reference.
31
It tells the browser the destination of the link.
32
There are different ways to use it.
33
First, we have external links links.
34
These take users to another website.
35
For example, when someone clicks this link, the browser navigates to YouTube.
36
Next, we have internal links.
37
These take users to another page within your own website.
38
For example, this link points to a page called About HTML.
39
Notice that we don't need to write the complete website address when linking to a page in the same website.
40
The browser uses the relative path to find the destination.
41
Now, what if you want a link to open in a new browser tab instead of replacing the current page?
42
HTML provides an attribute called target.
43
When we use target with the value blank, the browser opens the destination in a new tab or window.
44
Here's an example.
45
We add target equals blank inside our anchor tag.
46
And that's all.
47
But there's one more detail worth knowing.
48
For external links that open in a new tab, adding rel equals no opener is a good security practice.
49
It prevents the newly opened page from accessing the original page through the browser's opener property.
50
So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.
51
Now, let's use everything we've learned to create something practical.
52
A navigation menu.
53
Most websites have a navigation menu at the top.
54
It helps visitors move between different sections or pages.
55
To create one, we use the nav element.
56
Nav represents a section of a web page containing navigation links.
57
Inside it, we add our anchor elements.
58
Let's create four links.
59
The home link, the about link, the services link, and the contact link.
60
Each link has its own destination.
61
And just like that, we've created a simple HTML navigation menu.
62
Now, you might be wondering why the menu doesn't look very beautiful.
63
That's because we're only using HTML.
64
We'll learn how to style navigation menus using CSS in a future lesson.
65
Here's another useful trick.
66
You can create a link that takes visitors directly to a specific section of the same web page.
67
We call this an anchor link.
68
First, we give an element a unique ID.
69
In this example, our heading has an ID called contact.
70
Then, we create a link using href with a hashtag followed by that ID.
71
When someone clicks the link, the browser navigates to the element with the matching ID.
72
This is especially useful for long articles, frequently asked questions, and table of contents sections.
73
Now it's your turn, let's test what you learned.
74
Your challenge is to create a simple navigation menu for your own website.
75
It must contain a home link, an about link, a contact link, one external link to Google,
76
and one link that takes visitors to a specific section of your web page.
77
Pause the video and try writing the code yourself.
78
Excellent!
79
You've just created your first navigation menu and learned how to connect different pages and sections.
80
You're making great progress!
81
And that's everything for Episode 5!
82
Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.
83
In our next episode, we'll discover how to add images to web pages using HTML.
84
Don't forget to subscribe to TechHora.
85
Keep learning, keep building, and stay curious.
86
See you in episode 6!
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
FOR YOU
Video gợi ý
B12
291 câu
HTML Tag Text Basics | HTML5 Element Text Tutorial
Daily ConversationUniversity Students
A28
103 câu
English Podcast - Level A1 - A2 | Your Future With English
Travel EnglishTeensDaily Conversation
B21
103 câu
you will never ask about pointers again after watching this video
Daily ConversationUniversity Students
B11
347 câu
React Native for Beginners tutorial
Daily ConversationUniversity Students
B11
92 câu
Understanding the Elements of Design | Graphic Design Basic
Daily ConversationUniversity Students
B11
371 câu
Learn 97% of Harvard's CS50 in 25 minutes
Daily ConversationUniversity Students
B26
24 câu
Usability Heuristic 3: User Control & Freedom
Daily ConversationUniversity StudentsWorking Adults
B21
22 câu
Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)
Daily ConversationUniversity Students
B2120 câu
LINUX isn't Hard Once You Understand This (File Directories)
Daily ConversationUniversity Students
B22
341 câu
How to Use WaniKani to Learn Kanji | Tutorial for Beginners
Daily ConversationUniversity Students
C11
466 câu
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Daily ConversationUniversity Students
B1119 câu
Links | HTML | Tutorial 8
Daily ConversationUniversity Students
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 “HTML Links and Navigation Explained”. Những từ được nhắc lại nhiều nhất trong bài: link, page, create, website, Html. Video này có 86 câu và 824 từ để luyện shadowing. Phần lời nói dài 5:20. Người nói nói với tốc độ tự nhiên, khoảng 154 từ mỗi phút, gần với hội thoại hằng ngày. Chỉ 79% số từ nằm trong 3.000 từ tiếng Anh thông dụng nhất, nên từ vựng khá khó.
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 |
|---|---|---|
| menu danh từ | /ˈmɛn.juː/ | thực đơn |
| navigation danh từ | /nævɪˈɡeɪʃən/ | sự điều hướng, sự đi biển |
| destination danh từ | /dɛstɪˈneɪʃən/ | điểm đến, đích |
| element danh từ | /ˈɛləmənt/ | yếu tố |
| anchor danh từ | /ˈæŋ.kəː/ | neo, mỏ neo |
| connect động từ | /kəˈnɛkt/ | nối |
| visitor danh từ | /ˈvɪzɪtɚ/ | khách |
| attribute danh từ | /ˈæt.ɹɪˌbjut/ | định ngữ |
| resource danh từ | /ɹɪˈzɔːs/ | tài nguyên |
| blank danh từ | /ˈblæŋk/ | mẫu in |
| relative danh từ | /ˈɹɛl.ə.tɪv/ | họ hàng, người thân |
| lesson danh từ | /ˈlɛs.ən/ | bài, bài học |
| curious tính từ | /ˈkjʊɹ.i.əs/ | tò mò |
| discover động từ | /dɪˈskʌvə/ | phát hiện, phát kiến |
| subscribe động từ | /səbˈskɹaɪb/ | đăng kí |
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 | you've just created · we've learned · we've created |
| Tương lai với “will” will + động từ — quyết định, lời hứa hoặc dự đoán | you'll learn · We'll learn · we'll discover |
| Thì hiện tại tiếp diễn am/is/are + -ing — việc đang diễn ra lúc nói hoặc quanh thời điểm này | we're only using · You're making |
| Bắt buộc: must / have to / need to nói rằng một việc là cần thiết | need to write · must contain |
Phát âm cần chú ý
Người nói dùng 14 dạng rút gọn, ví dụ don't, we'll, we've. Hãy nói theo dạng ngắn đúng như bạn nghe.
- Âm “sh” và “zh”: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
- Từ dài — đặt trọng âm cho đúng: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/
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/, connect /kəˈnɛkt/, blank /ˈblæŋk/, hyperlink /ˈhaɪpə(ɹ)ˌlɪŋk/, hypertext /ˈhaɪpəɹˌtɛkst/
- Âm /æ/ — mở miệng rộng hơn âm “e”: navigation /nævɪˈɡeɪʃən/, anchor /ˈæŋ.kəː/, navigate /ˈnæv.ɪ.ɡeɪt/, attribute /ˈæt.ɹɪˌbjut/, blank /ˈblæŋk/
- Phụ âm cuối — bật rõ âm cuối của từ: element /ˈɛləmənt/, navigate /ˈnæv.ɪ.ɡeɪt/, connect /kəˈnɛkt/, attribute /ˈæt.ɹɪˌbjut/, resource /ɹɪˈzɔːs/
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ư menu, navigation, destination.
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ữ.