ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Head Tag in HTML | An HTML5 Head Element Tutorial

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

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

135 ประโยค

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

Hello and welcome.

Hi, I'm Dave.

This tutorial is part of a beginners HTML series.

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.

There are links to these tools, starter code files, and all resources in the description below.

Let's move on to what else might go inside of our head element.

And remember, everything inside of the head element is not seen on the web page.

And with that said, I've dragged the Visual Studio Code window to a little smaller size on the left

and Chrome to a little smaller size on the right.

But I'm just going to expand

Visual Studio Code for now

because anything we change inside of the head element will not be seen on the web page anyway.

So I'll click the expand button and we'll just see our code.

Now I had mentioned that we could store more metadata inside of the head element

And that is definitely some of what we see.

So let's add a couple of typical

Meta tags that have metadata that you would commonly see

The first being for the author of the page

So we'll say name the attribute name is equal to author

because that's what type of meta tag this will be

And then we'll have a content attribute

and this is where you can put your name I'll put my name for now since I'm the author of the page.

And then let's add another meta tag.

And let's give it a name as well.

And here we'll put a description.

This will describe the web page in a little bit more detail than possibly the title would.

So here we can put more of a sentence.

And once again, we need the content attribute to do that.

Let's say this page contains all the things I am learning how,

if I could spell how, to, and it looks like I'm extending the page.

So in Visual Studio Code, I'm going to press

Alt -Z in Windows to make sure the text continues to wrap

and then I'll say all the things I am or I am learning how to create as I learn HTML.

There we go.

Now after that of course you still need to close the meta tag

and control s to save and again I got the words to wrap.

Let's go to the view menu.

If you scroll all the way down you can see word wrap is alt z.

It may be something different if you're on Mac or Linux

so you might want to check the view menu under word wrap

if you want your words to wrap

and not just extend forever to the right here

now we've added more description about our page now this information could be picked up in a search engine

or some other service that wants to learn more about our web page however let's go ahead

and put something in the head where we will notice the change when we go back to the browser.

And that is to add what is called a fav icon.

And we can do that with a link element.

Let me use lowercase once again.

And inside of the link element, we'll have several attributes.

One is the REL, which stands for relate or relation.

How does this relate to the web page?

And here we're going to provide an icon.

After that, we need an href.

This refers back to HTML that stands for hypertext.

This is a hypertext reference.

So we're referencing a resource.

And here we're going to reference a file that I have now put inside of our folder that is called HTML5 .png.

And if I click the file explorer over here, you can see I've now added an image file that's a .png file,

HTML5 .png and you can download this image from the resources.

And you can see it's a small little icon for the HTML5 logo.

So I'll close that.

I'm going to click the file browser to have that disappear again.

So we see this.

Now we have one more attribute to add, and that is the type.

What type of resource is this?

And here we'll say image slash x dash icon.

And now we can save this and I'm going to go ahead and minimize the code window.

And now if we look at our web page in the browser, notice we have an icon up here.

My first web page now has our little fav icon beside the title.

And that's what we added here in the head by adding the fav icon with a link element.

Now we won't add any more here today, but this is the same area where we would link to CSS files

and even JavaScript files and other resources that we pull in from the web.

So the head is a very important part of the page, even though we don't see.

the content of the head inside the body of the page.

And I said we wouldn't link to anything else here today, but since we do have this default CSS to make our page a dark mode,

if you added this, and once again, this was optional, if you prefer the white page with dark text, you didn't need to add this,

and we had this style element here to hold the CSS in the head, but that's not usually where you would find it for a page.

So let's go ahead and do that.

I'll expand Visual Studio Code again, click the file explorer

and over here inside the file tree I want to create a new file

I'm going to call this main .css

and I have an empty css file all we need to do now is go back to the index

select the css

that we put here for the html in the body not the style tags just select the css

that's between the style tags I'm going to press ctrl x to cut

it out of the page go to the CSS file and control V to paste it into the CSS file.

Control S to save that file.

Now back in the HTML, I'm going to remove the style element, and I'm going to add another link.

And here for the rel, not ref, but rel, we have a style sheet.

Because we're adding a CSS style sheet, our href will now point to our CSS,

main .css specifically, and our type, which isn't actually required anymore.

But since we have it, let's go ahead and add text slash CSS.

But our browser should know what it is, even if we didn't add that at this point,

because that's really the only type of style sheet there is, is a CSS.

Now that we've made these changes, let's save the file.

And let's go ahead and click the button again to make our code shrink back down and look at our page.

We can reload just to make sure it has reloaded and everything looks the same.

That's because we are pulling in our code.

I'm going to go ahead and hide the file tree here.

100

We are pulling in our CSS code using our link tag inside of the head element.

101

Now, finally, I'm going to create an error on purpose by deleting the

102

greater than symbol at the end of this link tag and saving the file with control S.

103

Now, why would I create an error on purpose

104

because we want to validate our file again

105

and this will let us know that yes we've got the right file

106

and we expect one error there you don't of course have to create an error on purpose

107

but that's what i'm doing to make sure i'm selecting the correct file out of the correct lesson folder

108

because i'm in lesson two now you might be working on the same file

109

we started with there's the css file

110

and the image file i'll select the index .html and check

111

and i should have at least one if not more errors

112

because of that yes that created several errors on the page just by leaving out

113

that one closing greater than symbol for the link text now if i save again

114

visual studio code formats our code correctly instead of trying to pull the closing

115

head tag up here and i'm going to go ahead

116

and reload or re -upload the file to check it so we choose index .html.

117

Now I'll click check and document checking completed.

118

No errors or warnings to show.

119

So just by missing one little thing in our page, we could have a whole list of errors.

120

So follow the prompts from Visual Studio Code.

121

Notice how if I leave that out here in my theme, this turns red or pink.

122

It doesn't look quite right.

123

Visual Studio Code wants to format it differently if I save the file

124

and it pulls that up here instead of putting the closing tag.

125

There's several cues to show you that you have an error in the file.

126

And so follow those prompts in Visual Studio Code.

127

And then remember to always validate your page.

128

And we always do that at validator .w3 .org.

129

I'll get rid of everything at the end of that.

130

And here you can pull it up.

131

And then we choose file upload.

132

Remember to keep striving for progress over perfection and a little progress every day will go a very long way.

133

Please give this video a like if it's helped you and thank you for watching and subscribing.

134

You're helping my channel grow.

135

Have a great day and let's write more code together very soon.

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

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

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

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

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

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

สแกน QR

Download on theApp Store Get it onGoogle Play

ช่องเดียวกัน

Introduction to HTML | An HTML5 Tutorial for Beginners

Daily ConversationWorking Adults

FOR YOU

วิดีโอแนะนำ

132 ประโยค

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

บทเรียนฝึกพูดนี้ใช้วิดีโอ “Head Tag in HTML” เป็นสื่อ คำที่ถูกพูดซ้ำบ่อยที่สุด: file, page, code, css, html วิดีโอนี้มี 135 ประโยค และ 1645 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 9:26 ผู้พูดพูดด้วยความเร็วเป็นธรรมชาติ ประมาณ 175 คำต่อนาที ใกล้เคียงกับบทสนทนาในชีวิตประจำวัน 84% ของคำอยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ ส่วนที่เหลือควรดูไว้ก่อนเริ่มฝึก

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

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

คำศัพท์	คำอ่าน	ความหมาย
element คำนาม	/ˈɛləmənt/	ธาตุ
icon คำนาม	/ˈaɪ.kɑn/	รูปเคารพ
resource คำนาม	/ɹɪˈzɔːs/	ทรัพยากร
wrap คำกริยา	/ɹæp/	ห่อ
attribute คำนาม	/ˈæt.ɹɪˌbjut/	คุณลักษณะ, คุณสมบัติ
select คำกริยา	/sɪˈlɛkt/	คัดเลือก
sheet คำนาม	/ʃit/	แผ่น
expand คำกริยา	/ɪkˈspænd/	ขยาย
lesson คำนาม	/ˈlɛs.ən/	บทเรียน
symbol คำนาม	/ˈsɪmbəl/	สัญลักษณ์
menu คำนาม	/ˈmɛn.juː/	เมนู
upload คำกริยา	/ˈʌpˌloʊd/	อัปโหลด
folder คำนาม	/ˈfoʊldɚ/	โฟลเดอร์
server คำนาม	/ˈsɝvɚ/	เซิร์ฟเวอร์
relation คำนาม	/ɹɪˈleɪʃ(ə)n/	ความสัมพันธ์

ประโยคที่ควรฝึกพูดซ้ำ

ประโยคสั้น ๆ ที่สมบูรณ์จากวิดีโอ ซึ่งนำไปใช้ในบทสนทนาประจำวันได้:

Let's go to the view menu.
That's because we are pulling in our code.
You're helping my channel grow.

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

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

โครงสร้าง	ในวิดีโอ
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบัน	I've dragged · we've added · have now put
Passive voice be + กริยาช่อง 3 — เน้นสิ่งที่เกิดขึ้น ไม่ใช่ผู้กระทำ	is not seen · will not be seen · could be picked
ความเป็นไปได้ด้วย “might / may” might/may + กริยา — สิ่งที่เป็นไปได้แต่ไม่แน่นอน	might go · may be · might want
ขั้นกว่า -er than / more … than — เปรียบเทียบสองสิ่ง	more detail than · greater than

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

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

เสียง “sh” และ “zh”: sheet /ʃit/, extension /ɪkˈstɛnʃən/, relation /ɹɪˈleɪʃ(ə)n/, dash /ˈdæʃ/, perfection /pɚˈfɛk.ʃən/
คำยาว — ลงเสียงหนักให้ถูกพยางค์: differently /ˈdɪf.ə.ɹənt.li/, metadata /ˈmɛt.əˌdeɪ.tə/

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

เสียงท้ายคำ — ออกเสียงให้ครบ ไม่เปลี่ยนเป็นตัวสะกดแบบไทย: resource /ɹɪˈzɔːs/, symbol /ˈsɪmbəl/, spell /spɛl/, dash /ˈdæʃ/, optional /ˈɑp.ʃə.nəl/
/v/ — ไม่ใช่ /w/ ให้ฟันบนแตะริมฝีปากล่าง: server /ˈsɝvɚ/, strive /ˈstɹaɪv/, validate /ˈvæl.ɪ.deɪt/
/z/ — เสียงก้อง ไม่ใช่ /s/: resource /ɹɪˈzɔːs/, browser /ˈbɹaʊ.zəɹ/, minimize /ˈmɪn.ɪˌmaɪz/

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

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

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

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

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

ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: Head Tag in HTML | An HTML5 Head Element Tutorial

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

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

Introduction to HTML | An HTML5 Tutorial for Beginners

Video

Blender Donut Tutorial Part 1 (2026)

Ancient Greek Lesson 1: The Greek Alphabet

How I’d Learn Coding in 2026 (Without Wasting Years)

Science in English #3 | The Periodic Table

you will never ask about pointers again after watching this video

How to start a new sketchbook | First page and beyond!

Use these CSS features instead of JavaScript

TS 97 Quick Start Video

The easy way to keep your repos tidy.