ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Links | HTML | Tutorial 8

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

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

119 ประโยค

หากประโยคสั้นหรือยาวเกินไป กดที่ Edit เพื่อปรับแก้

Hey, welcome to Draft Academy.

My name is Mike.

In this tutorial, I want to talk to you about using links in HTML.

A link is one of the most popular HTML elements

and it's used to link your website to other websites on the internet.

So I could create a link that would bring my users to like google .com or facebook .com.

Or I could link to other pages on my website.

So if I wanted to build like a navigational list,

I could have links to the other pages of my website that users could click and then they go to those pages.

You can also link to files, things like images or PDFs.

And you can create those links.

And then users can look at those images or PDFs.

So I'm going to show you how to create a link,

we need to use a special HTML tag called a and after a we need to pass this tag some information,

we need to give it something called an href.

And the href is basically just where we want to link to.

So the easiest way to create a link would be to create like an external link.

So linking to a page that's not on our website.

Imagine we wanted to create a link that would go to like google .com.

Inside of this href, I can just type the address to google .com.

So I can say HTTPS colon forward slash forward slash.

And you need to make sure that you include this like HTTP or HTTPS part.

A lot of times when you will give someone a link like you won't include this, it would just be like www .whatever.

But when you're creating an href, and you're creating a link, you need to be very specific about where you want to go.

So you're going to need to include this part.

And then I can just type www .google .com.

So what we've effectively done is told this link attribute that we want it to link to this address, which is Google.

And now I'll close this and I can actually close off this entire tag.

So we can just make this closing a tag.

And now inside of here, I can put any text for this link.

So we could say, for example, Google's homepage.

Now, I also just want to point out that inside of these link tags, you can put more than just text.

So you don't have to just put text, you could actually put other HTML elements.

So I could put like a header one in here, for example.

So why don't we do that, we'll make this a header one.

And now when I refresh my page, you'll see that we have this big old link over here.

It's this big header one.

And when we click on it, it will link us to google .com.

So I'm going to click this.

And you'll see that we get transported over to Google's homepage, right?

So we're over here on Google.

So that's how you can create a link.

And basically, you can just go to any website that you want, come up here to the URL bar,

copy the URL, including this like HTTP or HTTPS part, throw it into the href of your link, and you'll be able to link there.

There's one other thing that we can do, though, one thing I want you to notice is when I click this link,

it navigates me away from the website.

So I click this, and all of a sudden, we're on Google.

In certain cases, though, you're not going to want users to navigate away from your website when they click a link, right?

In certain cases, you might want this to open up, for example, in a new tab.

And the way that you can do that is by giving this a tag another attribute.

So we can say, we want to say, target is equal to and now inside of these quotation marks,

we want to say, underscore blank.

Okay, so when you pass in this underscore blank value to this target attribute,

this is going to basically tell the browser to open up this link in a new tab.

So now when we open up Google, it's going to open up here in a new tab, and we still have our website open.

So that's one thing that you can do to make this better.

And so again, inside of this link, I can put any HTML elements that I want.

So I could put like an h1, maybe we wanted to like make this homepage bold, we could put a bold tag in here.

And you can really like get creative and like style these different links different ways you want to.

So don't be afraid to put HTML elements inside of these a tags, because it's definitely something that you're going to want to do.

Another thing that we can do is we can link to other pages on our website.

So I'm going to get rid of the text for that link, I'm also going to get rid of this target blank.

And if you look over here in my file explorer, like my little file tree,

you can see that in addition to this index dot HTML file, which is the file that we're using right now,

I also have this page two dot html and this page three dot html.

And these are both just like other web pages that are on my website.

So any given website is going to have a number of web pages, you might have like an about page,

a contact me page, if it's a blog, you might have a bunch of like blog articles,

you get the point, a lot of times you're going to have more than one html file for your website.

And we can actually link between those files.

And you can use this link attribute to do that so in here in this href, instead of linking to Google using this like absolute address,

I can link to those pages on my website using a relative URL.

So if I wanted to access this page two, for example, let's say that I wanted to link to page two,

because the page that I'm currently on and page two are in the same directory, I can just type out page two's name.

So down here, I can just say like, page two dot html.

And the browser will automatically know that we want to go here to page two.

So over here, I can just type page two.

And now in the browser, you'll see that we have a link to page two.

So when I click this, it'll bring me over here to page two.

And you'll notice that inside of page two, I've already set up a link inside of here.

So here in page two, I have another link, which is just linking me back to index .html.

And this is a way that we can create navigation on our site.

So now I'm over here in page two, and I can navigate back to the homepage.

So I can navigate between these two pages on my website.

I can also create another link to page three.

So let's do that right here below this page two, we'll make another link, link, this time to page three.

And one thing you want to notice is that page three is inside of this directory.

So page three is inside of a folder called der one, if I want to link to page three,

I can't just say page three dot html.

Because the browser is not going to know where this page three is supposed to be,

we have to tell it exactly where it is relative to the current file that we're on.

So I can say dir one forward slash page three.

And what this is going to say is, we want to go to directory one,

and we want to link to a page inside of directory one called page three dot html.

So now we should have a link to page three.

And you can see that showed up right here, I can click this, and it'll bring us to page three.

So that's a way that you can link to different pages on your website, you can also create links to files on your website.

So in our case, we just have this little cat picture.

And this is just kind of like a cute cat.

100

And we could actually link to this picture of the cat on our website.

101

So I'm gonna go over here into my index file.

102

And we can access this picture the same way that we've been accessing these HTML files.

103

So I can just say, instead of dir one, the cat pictures pictures at the same directory.

104

So I can just say cat, and it's a jpeg file.

105

So dot jpg.

106

And we can change this to cat.

107

And now I should have a link to this cat picture.

108

So I click this, it will bring me to this picture of the cat.

109

And I can look at the cat.

110

So that's kind of how you can link to external websites, other pages on your website, and files on your website.

111

So in addition to a jpeg, I can also link to like a PDF or a Word document

112

if i had it stored on my website it doesn't matter

113

and that's sort of the basics of using links in html hey thanks for watching

114

if you enjoyed the video please leave a like

115

and subscribe to draft academy to be the first to know

116

when we release new content also we're always looking to improve

117

so if you have any constructive criticism or questions

118

or anything leave a comment below finally if you're enjoying draft academy

119

and you want to help us grow head over to draftacademy .com forward slash contribute and invest in our future.

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

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

AI ให้คะแนนการออกเสียงให้คะแนนทุกประโยค

ฝึก IPAเชี่ยวชาญทุกเสียง

คำศัพท์สร้างคลังคำของคุณ

เกมคำศัพท์เล่นไปเรียนไป

สแกน QR

Download on theApp Store Get it onGoogle Play

FOR YOU

วิดีโอแนะนำ

291 ประโยค

How I Make Professional 3D Motion Graphics Videos with Omni 1.1 Flash in Google Flow

Daily ConversationUniversity Students

336 ประโยค

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Daily ConversationUniversity StudentsWorking Adults

341 ประโยค

How to Use WaniKani to Learn Kanji | Tutorial for Beginners

Daily ConversationUniversity Students

31 ประโยค

Academic Writing for 2026: How to Link Literature to Research Questions

Daily ConversationUniversity Students

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

คำที่ถูกพูดซ้ำบ่อยที่สุด: link, page, website, html, file วิดีโอนี้มี 119 ประโยค และ 1693 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 8:36 ผู้พูดพูดเร็ว ประมาณ 197 คำต่อนาที จึงมีการเชื่อมเสียงและลดเสียงค่อนข้างมาก 86% ของคำอยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ ส่วนที่เหลือควรดูไว้ก่อนเริ่มฝึก

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

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

คำศัพท์	คำอ่าน	ความหมาย
directory คำนาม	/dɪˈɹɛktəɹi/	ไดเรกทอรี
element คำนาม	/ˈɛləmənt/	ธาตุ
attribute คำนาม	/ˈæt.ɹɪˌbjut/	คุณลักษณะ, คุณสมบัติ
relative คำนาม	/ˈɹɛl.ə.tɪv/	ญาติ, ญาติพี่น้อง
sudden คำคุณศัพท์	/ˈsʌd.ən/	กะทันหัน
invest คำกริยา	/ɪnˈvɛst/	ลงทุน, ลงทุนลงแรง
navigation คำนาม	/nævɪˈɡeɪʃən/	การนำเครื่องบิน, การเดินเรือ
folder คำนาม	/ˈfoʊldɚ/	โฟลเดอร์
colon คำนาม	/ˈkoʊ.lən/	ทวิภาค

กริยาวลีที่คุณจะได้ยิน

คำศัพท์	ความหมาย
show up คำกริยา	โผล่

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

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

โครงสร้าง	ในวิดีโอ
Relative clauses who / which + อนุประโยค — ข้อมูลเพิ่มเติมเกี่ยวกับคนหรือสิ่งของ	address, which is · file, which is · link, which is
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบัน	we've effectively done · I've already set
ความเป็นไปได้ด้วย “might / may” might/may + กริยา — สิ่งที่เป็นไปได้แต่ไม่แน่นอน	might want · might have
คำแนะนำด้วย “should” should + กริยา — บอกสิ่งที่ควรทำ	should have

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

ผู้พูดใช้รูปย่อและรูปลดเสียง 39 ครั้ง เช่น I'm, you're, we're ให้พูดแบบสั้นตามที่ได้ยิน

เสียง “sh” และ “zh”: navigation /nævɪˈɡeɪʃən/, refresh /ɹɪˈfɹɛʃ/, quotation /kwoʊˈteɪʃn̩/
คำยาว — ลงเสียงหนักให้ถูกพยางค์: directory /dɪˈɹɛktəɹi/, navigation /nævɪˈɡeɪʃən/

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

เสียงท้ายคำ — ออกเสียงให้ครบ ไม่เปลี่ยนเป็นตัวสะกดแบบไทย: relative /ˈɹɛl.ə.tɪv/, tutorial /ˌtjuːˈtɔːɹɪəl/, constructive /kənˈstɹʌktɪv/, refresh /ɹɪˈfɹɛʃ/
/v/ — ไม่ใช่ /w/ ให้ฟันบนแตะริมฝีปากล่าง: navigate /ˈnæv.ɪ.ɡeɪt/, relative /ˈɹɛl.ə.tɪv/, invest /ɪnˈvɛst/, navigation /nævɪˈɡeɪʃən/, constructive /kənˈstɹʌktɪv/
/r/ กับ /l/ — แยกให้ชัด: relative /ˈɹɛl.ə.tɪv/, explorer /ɛkˈsplɔːɹə(ɹ)/, tutorial /ˌtjuːˈtɔːɹɪəl/

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

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

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

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

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

ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Links | HTML | Tutorial 8

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

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

HTML Tag Text Basics | HTML5 Element Text Tutorial

7 Ways to Make Studying Fun

you will never ask about pointers again after watching this video

Understanding the Elements of Design | Graphic Design Basic

React Native for Beginners tutorial

Learn 97% of Harvard's CS50 in 25 minutes

Blender Donut Tutorial Part 1 (2026)

Network Ports Explained

How I Make Professional 3D Motion Graphics Videos with Omni 1.1 Flash in Google Flow

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

How to Use WaniKani to Learn Kanji | Tutorial for Beginners

Academic Writing for 2026: How to Link Literature to Research Questions

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

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

กริยาวลีที่คุณจะได้ยิน

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

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

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

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