ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: HTML Links and Navigation Explained | HTML for Beginners #5

เลือกโหมดฝึก

แต่ละโหมดจะเปิดห้องฝึกแบบเต็มจอ

86 ประโยค
หากประโยคสั้นหรือยาวเกินไป กดที่ Edit เพื่อปรับแก้
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!

ดาวน์โหลดแอป

ทุกอย่างที่ต้องใช้เพื่อพูดได้คล่อง

AI ให้คะแนนการออกเสียงให้คะแนนทุกประโยค
ฝึก IPAเชี่ยวชาญทุกเสียง
คำศัพท์สร้างคลังคำของคุณ
เกมคำศัพท์เล่นไปเรียนไป
สแกน QR
สแกน QR
Download on theApp StoreGet it onGoogle Play
FOR YOU

วิดีโอแนะนำ

HTML Tag Text Basics | HTML5 Element Text TutorialB1
2
291 ประโยค

HTML Tag Text Basics | HTML5 Element Text Tutorial

Daily ConversationUniversity Students
A1 English Listening Practice - The InternetA1
428
76 ประโยค

A1 English Listening Practice - The Internet

American AccentKidsTravel EnglishTeens
you will never ask about pointers again after watching this videoB2
1
103 ประโยค

you will never ask about pointers again after watching this video

Daily ConversationUniversity Students
React Native for Beginners tutorialB1
1
347 ประโยค

React Native for Beginners tutorial

Daily ConversationUniversity Students
Understanding the Elements of Design | Graphic Design BasicB1
1
92 ประโยค

Understanding the Elements of Design | Graphic Design Basic

Daily ConversationUniversity Students
Learn 97% of Harvard's CS50 in 25 minutesB1
1
371 ประโยค

Learn 97% of Harvard's CS50 in 25 minutes

Daily ConversationUniversity Students
Usability Heuristic 3: User Control & FreedomB2
6
24 ประโยค

Usability Heuristic 3: User Control & Freedom

Daily ConversationUniversity StudentsWorking Adults
Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)B2
1
22 ประโยค

Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)

Daily ConversationUniversity Students
LINUX isn't Hard Once You Understand This (File Directories)B2
120 ประโยค

LINUX isn't Hard Once You Understand This (File Directories)

Daily ConversationUniversity Students
DejaVue #E001 - The Need for Server-Side Rendering (SSR)C1
1
466 ประโยค

DejaVue #E001 - The Need for Server-Side Rendering (SSR)

Daily ConversationUniversity Students
Links | HTML | Tutorial 8B1
119 ประโยค

Links | HTML | Tutorial 8

Daily ConversationUniversity Students
Anatomy & Physiology: The Ultimate Beginner's Guide | Dr. Bee's TutorialsC1
117 ประโยค

Anatomy & Physiology: The Ultimate Beginner's Guide | Dr. Bee's Tutorials

Daily ConversationUniversity Students

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

บทเรียนฝึกพูดนี้ใช้วิดีโอ “HTML Links and Navigation Explained” เป็นสื่อ คำที่ถูกพูดซ้ำบ่อยที่สุด: link, page, create, website, Html วิดีโอนี้มี 86 ประโยค และ 824 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 5:20 ผู้พูดพูดด้วยความเร็วเป็นธรรมชาติ ประมาณ 154 คำต่อนาที ใกล้เคียงกับบทสนทนาในชีวิตประจำวัน มีเพียง 79% ของคำที่อยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ คำศัพท์จึงค่อนข้างยาก

คำศัพท์สำคัญในวิดีโอนี้

คำที่ควรเรียนรู้ 14 คำจากวิดีโอ พร้อมคำอ่านและความหมาย:

คำศัพท์คำอ่านความหมาย
menu คำนาม/ˈmɛn.juː/เมนู
navigation คำนาม/nævɪˈɡeɪʃən/การนำเครื่องบิน, การเดินเรือ
destination คำนาม/dɛstɪˈneɪʃən/จุดหมาย, จุดหมายปลายทาง
element คำนาม/ˈɛləmənt/ธาตุ
anchor คำนาม/ˈæŋ.kəː/สมอ
connect คำกริยา/kəˈnɛkt/เชื่อม, ต่อ
attribute คำนาม/ˈæt.ɹɪˌbjut/คุณลักษณะ, คุณสมบัติ
resource คำนาม/ɹɪˈzɔːs/ทรัพยากร
relative คำนาม/ˈɹɛl.ə.tɪv/ญาติ, ญาติพี่น้อง
lesson คำนาม/ˈlɛs.ən/บทเรียน
discover คำกริยา/dɪˈskʌvə/ค้นพบ
specify คำกริยา/ˈspɛs.əˌfaɪ/ระบุ
hashtag คำนาม/ˈhæʃˌtæɡ/แฮชแท็ก
hyperlink คำนาม/ˈhaɪpə(ɹ)ˌlɪŋk/ไฮเปอร์ลิงก์, ลิงก์

ไวยากรณ์ในวิดีโอนี้

โครงสร้างที่ผู้พูดใช้บ่อยที่สุด พร้อมคำพูดจริงจากวิดีโอ:

โครงสร้างในวิดีโอ
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบันyou've just created · we've learned · we've created
อนาคตด้วย “will” will + กริยา — การตัดสินใจ คำสัญญา หรือการคาดการณ์you'll learn · We'll learn · we'll discover
Present continuous am/is/are + -ing — สิ่งที่กำลังเกิดขึ้นตอนนี้หรือช่วงนี้we're only using · You're making
ความจำเป็น: must / have to / need to บอกว่าสิ่งใดจำเป็นต้องทำneed to write · must contain

การออกเสียงที่ควรระวัง

ผู้พูดใช้รูปย่อและรูปลดเสียง 14 ครั้ง เช่น don't, we'll, we've ให้พูดแบบสั้นตามที่ได้ยิน

  • เสียง “sh” และ “zh”: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
  • คำยาว — ลงเสียงหนักให้ถูกพยางค์: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/

เสียงที่คนไทยมักออกเสียงยาก:

  • เสียงท้ายคำ — ออกเสียงให้ครบ ไม่เปลี่ยนเป็นตัวสะกดแบบไทย: resource /ɹɪˈzɔːs/, practical /ˈpɹæk.tɪ.kəl/, relative /ˈɹɛl.ə.tɪv/, curious /ˈkjʊɹ.i.əs/, pause /pɔːz/
  • /v/ — ไม่ใช่ /w/ ให้ฟันบนแตะริมฝีปากล่าง: navigation /nævɪˈɡeɪʃən/, navigate /ˈnæv.ɪ.ɡeɪt/, visitor /ˈvɪzɪtɚ/, relative /ˈɹɛl.ə.tɪv/, discover /dɪˈskʌvə/
  • /z/ — เสียงก้อง ไม่ใช่ /s/: browser /ˈbɹaʊ.zəɹ/, visitor /ˈvɪzɪtɚ/, resource /ɹɪˈzɔːs/, pause /pɔːz/, browse /bɹaʊz/

วิธีฝึกกับวิดีโอนี้

  1. ฟังวิดีโอให้จบหนึ่งรอบโดยยังไม่ต้องพูด แล้วจดคำที่ยังไม่รู้จัก
  2. เริ่มที่ความเร็ว 0.75× พูดตามทีละประโยค แล้วกลับไปใช้ความเร็วปกติเมื่อเริ่มคล่อง
  3. อัดเสียงตัวเองแล้วเทียบกับต้นฉบับ โดยสังเกตคำอย่าง menu, navigation, destination เป็นพิเศษ

เทคนิค Shadowing คืออะไร?

Shadowing เป็นเทคนิคการเรียนรู้ภาษาที่ได้รับการรับรองทางวิทยาศาสตร์ พัฒนาขึ้นสำหรับการฝึกนักแปลมืออาชีพ วิธีการนี้เรียบง่ายแต่ทรงพลัง: คุณฟังเสียงภาษาอังกฤษจากเจ้าของภาษาและพูดตามทันที — เหมือนเงาที่ตามผู้พูดด้วยช่วงเวลาห่าง 1-2 วินาที การวิจัยแสดงว่าเทคนิคนี้ปรับปรุงความแม่นยำในการออกเสียง ทำนองเสียง จังหวะ การเชื่อมเสียง การฟังเข้าใจ และความคล่องแคล่วในการพูดได้อย่างมีนัยสำคัญ

เทคนิค shadowing: อ่านคู่มือฉบับเต็มทีละขั้นตอน →