쉐도잉 연습: Introduction to HTML | An HTML5 Tutorial for Beginners - 영상으로 영어 말하기 배우기

연습 모드 선택

각 모드는 전체 화면 연습실로 열립니다.

267 문장

문장이 너무 짧거나 길면 Edit를 눌러 조정하세요.

hello and welcome hi i'm dave this tutorial series is for you

if you are just beginning your journey towards learning web development

or maybe you're looking for an html resource to share with

a friend who is just beginning their journey towards learning web development

or you may be looking for a refresher course

because you previously learned html but it has been a few semesters or even years since you looked at it.

Or maybe you have another reason that I haven't even thought of.

No matter.

You're welcome, and I hope I help you on your journey.

Throughout the tutorial, I will mention some references and tools, and I will provide links to everything I mention in the description below.

Let's get started learning HTML.

What is HTML?

HTML is an acronym that stands for Hypertext Markup Language.

And Hypertext Markup Language is the most basic building block of the web.

It defines the meaning and structure of web content.

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.

Overall, HTML uses markup to annotate text, images, and other content for display in a web browser.

And you can see an example of some of these markup elements here.

But before we begin creating a web page and using these markup elements, we need to get the necessary tools.

So let's start with a web browser.

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,

and you can download that at google .com slash chrome.

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.

Also, I will be using an extension,

and we go to chrome .google .com slash web store to get extensions for the Chrome browser

and there if you want to use the extension

that i'm going to use it's called dark new tab

and you can press enter to search for that

and once you've completed your search you'll see dark new tab offered by keller

which is the one that i have added

and you can see added here i'll click on that

and once you're inside the page for dark new tab

you should have an install button here since i already have it installed

this is now a remove button for me what this does is

when you open a new tab in the browser it uses a dark page instead of a light page

and I use dark mode whenever possible so I prefer that.

If you see me open a new tab in this development series you'll probably see a dark tab like this one.

From there we need to get a code editor

and the industry standard right now and what I prefer to use is Visual Studio Code.

Again you can use other code editors to write your HTML code.

But if you go to code .visualstudio .com, you'll be able to download

Visual Studio Code for free.

And there you can download for Windows if you're on Windows like I am, or you can click other platforms.

And it's also available for Linux and Mac OS.

So now would be a good time to go ahead and download

Visual Studio Code and install your code editor and go ahead and open that up and then come back to the video.

Okay I am now assuming you have installed

Visual Studio Code and have opened it up and you may see something like this or you may see a welcome screen.

What you need to do is create a folder on your computer and we will put our files inside that folder.

So if I go to the file menu

and choose open folder you can see once this pops up what folder I am in, the HTML course folder in Windows,

and then I've created an 01 underscore lesson folder.

So if I highlight that and select the folder, I am now inside that folder and ready to create my first HTML file.

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,

which is the file explorer, and that will hide or show this file explorer we're going to create the plus button

or click the plus button here for new file

and create a new file now we'll type index .html as that is always the file name

that is expected to launch a website

and you always want to keep your file names lower case

and with no spaces now windows will not complain

if you put a space or use upper or lower case however

when we host our files on a web server a web server will differentiate many times

and that can cause problems

so the naming convention is to always use lowercase no spaces you can use hyphens dashes

and then end each file in dot html

Okay, we have an empty index .html file.

Let's create our first HTML element.

And as you might guess, the first HTML element we'll create is HTML.

So if we type HTML, all lowercase, and press tab in Visual Studio Code, it creates the tags.

And by tags, that is often interchanged as a word with element.

However, the element consists of the starting and ending tag

and everything in between

but here we might just be referring to the starting also called the opening tag

or the ending also called the closing tag

so we refer to html tags but every page starts

and ends with the html opening and closing tags and everything else on the page goes between those tags.

After creating our HTML element, HTML pages have two main areas, and one area contains data that is not seen on the page,

but is considered to be metadata about the page, and that is the head area.

So just type head, not header, but head, and press tab, and now we have our head element,

and we will put metadata about the page inside this area.

But the next area is the page that every

or is the part of the page that everybody sees in the browser

and that is held within the body element so type body

and press tab and now we have our two major sections of our page

that are both inside of the html element we have a head section

and a body section now inside the head we'll just put one piece of metadata today

and it really won't start with the word meta we'll come back to

that word in the future we're going to create a title element

and give our page a title let's just call this my first web page

and this will stay inside of the html document now i just pressed ctrl s

which saved the document you otherwise would see a dot up here by the index .html So I saved that,

and I am using an auto -formatter.

Visual Studio Code may or may not do that for you when you save your file.

If you want that, you can go to the extension icon over here and search for a Prettier extension.

And I'm not sure if mine is enabled or I'm using something else right now.

We'll have to check.

Now, mine is disabled, but I do recommend this one.

Prettier is a code formatter that will auto -format your code, but Visual Studio Code may do some of that as well.

But if you want to use Prettier, go ahead and click

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,

102

so we see our index .html on the left instead of the extensions.

103

And now we can see our HTML is formatted in a very easy to read manner.

104

We have our HTML element, and then the head element, and then the body element, and they're separated by spaces.

105

Very easy to read.

106

And we have a title inside of the head.

107

Again, the title will not be seen inside of the browser in the body of the page,

108

but I will show you very shortly where we do see it.

109

Inside of the body element, though, let's put an H1 element which stands for a heading

110

and it is the biggest heading we could put you only put one h1 element per page

111

and that should be saying what your page is about it doesn't necessarily have to be the same text

112

that is in the title

113

but here we're just going to put hello world as is

114

the tradition for creating your first file in any language you're learning and so we have hello world on the page,

115

and we have my first web page in the head section.

116

Let's add one more element in the body of the page.

117

And this is a paragraph element that starts and ends just with the letter P.

118

But notice each of our tags, of course, start with this less than, and then end with a greater than.

119

And then the ending tag, you'll notice, has a slash.

120

But all we have to do in Visual Studio code is type P and press tab and it creates both for us.

121

So we're going to put some text inside of our paragraph

122

and here we'll just put this is my first web page with a period to end the sentence and save.

123

Once again I'm pressing ctrl s on the keyboard to save.

124

You can go to the file menu

125

and from there you can also choose save but you'll notice the shortcut is ctrl and the letter s.

126

We're almost ready to view our web page, but before we do, remember the extensions we went to?

127

I want to show you just a few if you want your Visual Studio code to look like mine.

128

One thing to draw your attention to is when I created an index .html file,

129

i have the little icon for html5 beside it you may not have that but if we click on extensions

130

and then we can delete prettier

131

that i searched for before type vs code dash icons there you'll find the extension

132

that will add that to your vs code as well

133

so you can install i already have it installed

134

so mine says uninstall and that will add icons as you create files

135

and it might add the icon up here as well in the tab

136

and that's how you see the icon here beside my index .html in the file explorer

137

so visually it helps you see what type of file you're working with quickly without even reading everything after

138

that extension let's go ahead and click the extensions icon again

139

and then search for github theme i am using a specific theme which i prefer dark mode in everything that I do.

140

So I am using the GitHub theme extension and it has light and dark themes.

141

I believe I'm using the default dark theme.

142

This might be bright for a second, but I'll click set color theme.

143

And yes, it switched back to light, but I choose GitHub dark default, and then yours will look much like mine.

144

Now these previous extensions have been optional, but one that I say is a must for you to install is called Live Server.

145

So let's pull up

146

Live Server by Ritwick Day.

147

I'll click on that.

148

And you want to install

149

Live Server because it's going to help us view our web pages.

150

So go ahead and install Live Server.

151

And after you have it installed, we'll go ahead and take a look at the web page we've created.

152

Okay, with that installed, I'm going to close

153

that tab i'll come back to the file explorer here to show the file

154

and now if you have live server installed you should be able to right click

155

and open with live server

156

and once we choose open with live server it opens our browser

157

and we can see our web page it says hello world

158

this is my first web page in addition in the tab at the top it says my first web page so

159

that is where the title goes at the very top of the browser in the tab

160

now this is very bright and i have mentioned

161

that i prefer dark mode so let's go back to visual studio code

162

and i'm just going to paste in some quick styling

163

that is actually css once again this is optional

164

but it will save my eyes and possibly yours as we work through this tutorial

165

so once we're back in visual studio code just underneath the title in the head section

166

I'm going to paste this in I'll quickly describe it I put in a style element

167

and that allows me to put in some quick CSS

168

and I changed the font size to make it just a little larger

169

and then I changed the background color to a dark color

170

and I changed the font color to an off -white color called white smoke

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.

172

If you prefer the white with dark text, that is fine too.

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.

174

So let's go back to the browser and look at our update.

175

And now you can see our webpage is in dark mode and we have a little bit larger text here as well.

176

It did not change our title from the head because that just goes into the tab of the browser.

177

Also notice the address.

178

This is an IP address and then we have a colon and this is a port number.

179

But this is on your own computer.

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.

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.

앱 다운로드

유창하게 말하는 데 필요한 모든 것

AI 발음 평가문장마다 점수 확인

IPA 발음 연습모든 소리 마스터

단어 학습나만의 단어장 만들기

단어 게임놀면서 외우기

QR 스캔

Download on theApp Store Get it onGoogle Play

FOR YOU

이 레슨의 어휘와 말하기 포인트

이 말하기 레슨은 영상 “Introduction to HTML”을(를) 바탕으로 합니다. 가장 자주 반복되는 단어는 다음과 같습니다: page, html, web, file, code. 이 영상에는 섀도잉할 문장 267개와 단어 3459개가 있습니다. 말하는 구간의 길이는 20:15입니다. 화자는 분당 약 171단어로, 일상 대화에 가까운 자연스러운 속도로 말합니다. 단어의 84%가 영어에서 가장 많이 쓰이는 3,000단어에 속합니다. 나머지는 연습 전에 미리 확인해 두세요.

이 영상의 핵심 어휘

영상에 나오는 익혀 둘 만한 단어 15개를 발음, 뜻과 함께 정리했습니다.

단어	발음	뜻
element 명사	/ˈɛləmənt/	요소
server 명사	/ˈsɝvɚ/	서버, 봉사기
folder 명사	/ˈfoʊldɚ/	서류철, 폴더
icon 명사	/ˈaɪ.kɑn/	이콘, 성상
install 동사	/ɪnˈstɔl/	설치하다, 깔다
tutorial 명사	/ˌtjuːˈtɔːɹɪəl/	지도, 지침
attribute 명사	/ˈæt.ɹɪˌbjut/	속성, 특질
refer 동사	/ɹɪˈfɜː/	언급하다
dash 명사	/ˈdæʃ/	줄표
upload 동사	/ˈʌpˌloʊd/	업로드하다, 올리다
pasta 명사	/ˈpɑ.stə/	파스타
format 명사	/ˈfɔːɹ.mæt/	포맷
lesson 명사	/ˈlɛs.ən/	수업, 과
select 동사	/sɪˈlɛkt/	고르다
default 명사	/dɪˈfɔlt/	디폴트

영상에 나오는 구동사

단어	뜻
go back 동사	돌아가다

따라 말해 볼 만한 문장

영상에 나오는 짧고 완결된 문장으로, 일상 대화에서 그대로 쓸 수 있습니다:

I believe I'm using the default dark theme.
We haven't loaded it to the web.
You're helping my channel grow.

이 영상의 문법

화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.

문형	영상 속 표현
현재완료 have/has + 과거분사 — 과거의 일이 지금도 관련이 있을 때	has been · haven't even thought · you've completed
수동태 be + 과거분사 — 누가 하는지보다 무슨 일이 일어나는지에 초점	is expected · is often interchanged · is not seen
“might / may” 가능성 might/may + 동사 — 가능하지만 확실하지 않은 일	may be · may see · might guess
“should” 조언 should + 동사 — 하는 것이 좋은 일을 말할 때	should have · should be · should do

주의할 발음

화자는 I'm, we'll, we're 같은 축약형과 약화된 형태를 82번 사용합니다. 들리는 대로 짧게 발음하세요.

“sh”와 “zh” 소리: extension /ɪkˈstɛnʃən/, validation /ˌvæl.əˈdeɪ.ʃən/, dash /ˈdæʃ/, declaration /ˌdɛk.ləˈɹeɪ.ʃən/, optional /ˈɑp.ʃə.nəl/
긴 단어 — 강세 위치에 주의: 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/

한국어 화자가 어려워하는 소리:

/f/ — ㅍ(/p/)으로 바꾸지 말고 윗니를 아랫입술에 대기: folder /ˈfoʊldɚ/, refer /ɹɪˈfɜː/, format /ˈfɔːɹ.mæt/, default /dɪˈfɔlt/, paragraph /ˈpæɹəɡɹæf/
/v/ — ㅂ(/b/)과 구별하기: server /ˈsɝvɚ/, validation /ˌvæl.əˈdeɪ.ʃən/, strive /ˈstɹaɪv/, visually /ˈvɪzju.əli/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
/z/ — ㅈ이 아니라 성대를 울리는 /s/: browser /ˈbɹaʊ.zəɹ/, resource /ɹɪˈzɔːs/, visually /ˈvɪzju.əli/, browse /bɹaʊz/, dispose /dɪsˈpoʊz/

이 영상으로 연습하는 방법

먼저 말하지 않고 영상을 끝까지 듣고 모르는 단어를 적어 둡니다.
0.75배속으로 한 문장씩 섀도잉을 시작하고, 익숙해지면 보통 속도로 돌아갑니다.
자신의 목소리를 녹음해 원본과 비교하고, element, server, folder 같은 단어에 특히 주의합니다.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

섀도잉 방법: 단계별 전체 가이드 읽기 →

쉐도잉 연습: Introduction to HTML | An HTML5 Tutorial for Beginners - 영상으로 영어 말하기 배우기

연습 모드 선택

앱 다운로드

추천 영상

Beginner English Introduction

I Rebuilt My Entire Website in Astro… Was It Worth It?

Trying Something New? just ask google

The Complete Beginners Guide to Adobe Photoshop | FREE Course | Course overview & breakdown

Everything You Need to Know About DNS: Crash Course System Design #4

Video

تعلم القراءة باللغة الانجليزية كورس القراءة المستوى الثاني 7

Python3 For Pentesting - Introduction

8 New CSS, JS and HTML Features You Should Know

How to Create Your Own HABIT TRACKER | Step-by-Step Tutorial for Beginners | Google Sheets

The Easiest Way to Build Websites

Basic Engineering tools