Shadowing Practice: Introduction to HTML | An HTML5 Tutorial for Beginners - Learn English Speaking with Video

Elige un modo de práctica

Cada modo abre una sala de práctica a pantalla completa.

267 oraciones

Si las oraciones son demasiado cortas o largas, haz clic en Editar para ajustarlas.

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.

Descargar app

Todo lo que necesitas para hablar con fluidez

Pronunciación con IAEvalúa cada oración

Práctica de IPADomina cada sonido

VocabularioConstruye tu banco de palabras

Juego de vocabularioAprende mientras juegas

Escanea el QR

Download on theApp Store Get it onGoogle Play

FOR YOU

Recomendar Video

12 oraciones

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

Daily ConversationWorking Adults

81 oraciones

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

Daily ConversationUniversity StudentsWorking Adults

132 oraciones

Video

Daily ConversationUniversity StudentsWorking Adults

140 oraciones

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

Daily ConversationWorking Adults

80 oraciones

Python3 For Pentesting - Introduction

Daily ConversationUniversity StudentsWorking Adults

285 oraciones

8 New CSS, JS and HTML Features You Should Know

Daily ConversationWorking Adults

172 oraciones

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

Daily ConversationWorking Adults

117 oraciones

The Easiest Way to Build Websites

Daily ConversationWorking Adults

57 oraciones

Vocabulario y notas de pronunciación para esta lección

Esta lección de conversación se basa en el vídeo “Introduction to HTML”. Las palabras que más se repiten: page, html, web, file, code. Este vídeo tiene 267 frases y 3459 palabras para practicar shadowing. La parte hablada dura 20:15. El hablante habla a un ritmo natural de unas 171 palabras por minuto, cercano a una conversación cotidiana. El 84 % de las palabras está entre las 3.000 más comunes del inglés; conviene repasar el resto antes de empezar.

Vocabulario clave de este vídeo

15 palabras del vídeo que vale la pena aprender, con su pronunciación y significado:

Palabra	Pronunciación	Significado
element sustantivo	/ˈɛləmənt/	elemento
server sustantivo	/ˈsɝvɚ/	servidor
extension sustantivo	/ɪkˈstɛnʃən/	extensión, extendimiento
folder sustantivo	/ˈfoʊldɚ/	carpeta, fólder
icon sustantivo	/ˈaɪ.kɑn/	icono, ícono
install verbo	/ɪnˈstɔl/	instalar
tag sustantivo	/tæɡ/	etiqueta, marbete
tutorial sustantivo	/ˌtjuːˈtɔːɹɪəl/	tutoría, tutorial
chrome verbo	/kɹoʊm/	cromar
explorer sustantivo	/ɛkˈsplɔːɹə(ɹ)/	explorador, exploradora
attribute sustantivo	/ˈæt.ɹɪˌbjut/	atributo
meta adjetivo	/ˈmɛtə/	metaconceptual
validation sustantivo	/ˌvæl.əˈdeɪ.ʃən/	validación, convalidación
refer verbo	/ɹɪˈfɜː/	referir, remitir
dash sustantivo	/ˈdæʃ/	raya

Phrasal verbs que vas a escuchar

Palabra	Pronunciación	Significado
go ahead verbo	/ˌɡoʊ əˈhɛd/	venga, adelante
go over verbo		sentar, pasar
pop up verbo		aparecerse

Frases que vale la pena repetir

Frases cortas y completas del vídeo que puedes reutilizar en la conversación diaria:

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

Gramática en este vídeo

Las estructuras que más usa el hablante, con las palabras exactas del vídeo:

Estructura	En el vídeo
Present perfect have/has + participio pasado — una acción pasada que sigue importando ahora	has been · haven't even thought · you've completed
Voz pasiva be + participio pasado — importa lo que ocurre, no quién lo hace	is expected · is often interchanged · is not seen
Posibilidad con “might / may” might/may + verbo — algo posible pero no seguro	may be · may see · might guess
Consejo con “should” should + verbo — decir qué es buena idea	should have · should be · should do

Pronunciación a tener en cuenta

El hablante usa 82 contracciones y formas reducidas, como I'm, we'll, we're. Dilas en su forma corta, tal como las oyes.

Los sonidos de “sh” y “zh”: extension /ɪkˈstɛnʃən/, validation /ˌvæl.əˈdeɪ.ʃən/, dash /ˈdæʃ/, declaration /ˌdɛk.ləˈɹeɪ.ʃən/, optional /ˈɑp.ʃə.nəl/
Palabras largas — cuida el acento: 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/

Sonidos difíciles para hispanohablantes:

/v/ — no es /b/: los dientes tocan el labio inferior: server /ˈsɝvɚ/, validation /ˌvæl.əˈdeɪ.ʃən/, strive /ˈstɹaɪv/, visually /ˈvɪzju.əli/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
/z/ — sonora, no /s/: browser /ˈbɹaʊ.zəɹ/, resource /ɹɪˈzɔːs/, visually /ˈvɪzju.əli/, browse /bɹaʊz/, dispose /dɪsˈpoʊz/
/h/ — una aspiración suave, no la “j”: highlight /ˈhaɪˌlaɪt/, header /ˈhɛdɚ/, hyphen /ˈhaɪ̯.f(ə̯)n̩/

Cómo practicar con este vídeo

Escucha el vídeo entero una vez sin hablar y anota las palabras que no conoces.
Empieza a velocidad 0,75×, haz shadowing frase por frase y vuelve a la velocidad normal cuando te resulte fácil.
Grábate y compara con el original, prestando atención a palabras como element, server, extension.

¿Qué es la Técnica de Shadowing?

Shadowing es una técnica de aprendizaje de idiomas respaldada por la ciencia, desarrollada originalmente para la formación de intérpretes profesionales y popularizada por el políglota Dr. Alexander Arguelles. El método es simple pero poderoso: escuchas audio en inglés nativo y lo repites en voz alta de inmediato, como una sombra que sigue al hablante con solo 1-2 segundos de retraso. A diferencia de la escucha pasiva o los ejercicios de gramática, el shadowing obliga a tu cerebro y músculos de la boca a procesar y reproducir simultáneamente patrones de habla reales. Las investigaciones muestran que mejora significativamente la precisión de la pronunciación, la entonación, el ritmo, el habla conectada, la comprensión auditiva y la fluidez al hablar, convirtiéndola en una de las metodologías más efectivas para la preparación del IELTS Speaking y la comunicación en inglés en el mundo real.

Técnica de shadowing: lee la guía completa paso a paso →

Shadowing Practice: Introduction to HTML | An HTML5 Tutorial for Beginners - Learn English Speaking with Video

Elige un modo de práctica

Descargar app

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

Vocabulario y notas de pronunciación para esta lección

Vocabulario clave de este vídeo

Phrasal verbs que vas a escuchar

Frases que vale la pena repetir

Gramática en este vídeo

Pronunciación a tener en cuenta

Cómo practicar con este vídeo

¿Qué es la Técnica de Shadowing?