シャドーイング練習: 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です。話す速さは1分あたり約171語で、日常会話に近い自然なペースです。単語の84%は英語の頻出3,000語に含まれます。残りは練習の前に確認しておきましょう。

この動画の重要語彙

動画に出てくる覚えておきたい単語15語を、発音と意味つきで紹介します。

単語	発音	意味
element 名詞	/ˈɛləmənt/	要素, エレメント
server 名詞	/ˈsɝvɚ/	サーバー
extension 名詞	/ɪkˈstɛnʃən/	拡張, 拡大
folder 名詞	/ˈfoʊldɚ/	フォルダ
icon 名詞	/ˈaɪ.kɑn/	聖像, イコン
install 動詞	/ɪnˈstɔl/	導入する, インストールする
tutorial 名詞	/ˌtjuːˈtɔːɹɪəl/	学習用, チュートリアル
explorer 名詞	/ɛkˈsplɔːɹə(ɹ)/	探検家
attribute 名詞	/ˈæt.ɹɪˌbjut/	性質
refer 動詞	/ɹɪˈfɜː/	問い合わせる
dash 名詞	/ˈdæʃ/	長点
upload 動詞	/ˈʌpˌloʊd/	アップロードする
pasta 名詞	/ˈpɑ.stə/	パスタ
format 名詞	/ˈfɔːɹ.mæt/	書式, フォーマット
lesson 名詞	/ˈlɛs.ən/	授業, 学科

動画に出てくる句動詞

単語	発音	意味
go ahead 動詞	/ˌɡoʊ əˈhɛd/	どうぞお先に
go back 動詞		戻る, 帰る
pull up 動詞	/ˌpʊl ˈʌp/	引き上げる

繰り返し練習したい文

動画に出てくる短く完結した文です。日常会話でそのまま使えます。

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/

日本語話者が苦手な音：

/r/ と /l/ の区別 — /l/ は舌先を歯茎につけ、/r/ はどこにもつけない: tutorial /ˌtjuːˈtɔːɹɪəl/, explorer /ɛkˈsplɔːɹə(ɹ)/, declaration /ˌdɛk.ləˈɹeɪ.ʃən/, necessarily /ˌnɛs.əˈsɛɹ.ə.li/, shortly /ˈʃɔɹtli/
/v/ — /b/ にならないように、上の歯を下唇に当てる: server /ˈsɝvɚ/, validation /ˌvæl.əˈdeɪ.ʃən/, strive /ˈstɹaɪv/, visually /ˈvɪzju.əli/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
/f/ — 「フ」ではなく、上の歯と下唇で出す: folder /ˈfoʊldɚ/, refer /ɹɪˈfɜː/, format /ˈfɔːɹ.mæt/, default /dɪˈfɔlt/, paragraph /ˈpæɹəɡɹæf/

この動画での練習方法

まず声を出さずに動画を最後まで聞き、知らない単語をメモします。
まず0.75倍速で一文ずつシャドーイングし、慣れてきたら通常の速度に戻します。
自分の声を録音して元の音声と比べます。element, server, extensionなどの単語に特に注意しましょう。

シャドーイングとは？英語上達に効果的な理由

シャドーイング（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