Download Subtitles and Closed Captions (CC) from YouTube

Enter the URL of the YouTube video to download subtitles in many different formats and languages.

05 - Web Design - Adding media like Images Audio and Video to your website - CSS and HTML with English subtitles   Complain

hello and welcome to this exciting

tutorial today we are learning how to

add media to your website so let's check

it out this is a website we're creating

homepage this page shows you the images

this one audio and this one a video so

let's dive in and create this awesome

website so let's fire up notepad and

I'll paste some text here this is the

opening style tag the closing style tag

opening body closing body so by the way

if you don't understand any of this

please watch my HTML videos and so that

we're on the same page so let me create

a div opening div and closing div div

tag here now this deal will represent

the header on top here okay

so let's save this file let's go to the

desktop let's create a folder called web

for no particular reason and our home

page you'll be tight at home dot HTML

make sure you save it as all files and

save okay so this is the header let's

give it an ID of header like that and we

are good to go now inside this header we

have buttons so we used Eve's as well to

create these buttons so let's give this

diva class of button which we haven't

created yet we're here to create and

let's type home inside there so let's

see what we've done so far let me go to

the desktop here's our folder let's open

it and let's open our website so as you

can see it as the text of home there

okay so let's add some more interesting

stuff so let's say let's add a style to

the body let's add a style to the header

okay let's add more styles called button

okay so let me put a dot here so as you

can see I've put a dot here because it's

a class button is a class I've put a

hash here because header is an ID and I

haven't put anything here because body

is actually a tag so let's continue from

there so in the body I wanted

civic font of font-family Maradona

like that okay then I want the font size

to be thirty thirteen pixels like that

okay let's go to the header the header I

want the background color to be a

specific RGB value maroon like so to do

that I'll go to paint I have opened an

image in paint so I'll use the color

picker here to select the color that I

want so it shows up here but I go to

edit colors to see what creates what

values create this color so let me go

back and say I've seen 255 and I've seen

72 and I've seen 38 there

so let's minimize these okay if i

refresh and i see that color showing up

right there so let's make it more

interesting let's go back to header let

me give the header a height of 75 pixels

okay let me say the color is RGB white

so the text in there will all be white

so let me refresh that and see and there

we go

so let's go to the button now let's

create the button now the button

I wanted a specific background color

I'll go back to paint and choose this

blue right here so let's see what's

making the blue the colors are 0 and 184

and 215 like that so let me see if I got

it right when i refresh

I see the button but it's going all the

way to the end which I don't actually

want so I'll add specific width to it

over 100 pixels okay then I wanted to go

all the way down so I'll give it a

height a specific height of 100% okay

like that then I want the text to be

aligned in the center so what I would do

is I'll say

text-align:center like that so let me

just move that backward like that and

when I review that the text is at the

center but it's you at the top I want it

a bit lower so to do that what I'll do

is I'll go to add a break on the text

itself just before the text I add two

breaks so it goes a bit down and there

we are so I like that button so far so

let me create more buttons let me just

copy the same one come down here and

paste I need about three more buttons so

let me do that okay so let me name them

something else to fit the second one is


the other one is audio and the last one

is video audio limit with a capital

letter there okay so when i refresh i

see the buttons here but they're going

down instead of going this way because

they are not floating in this case so

let me go back to button and make them

float so they float to the left like

that and once I do that you can see them

right here but I want lines in between

here so I can see where each button ends

so to do that I'll add a border to the

button border solid line of one pixel

and white color so I'll just copy that

white there and paste it there so when i

refresh now or nothing happens why is

that border okay I don't need to specify

color here I just need to write RGB so

let me refresh and there we have it

pretty awesome so now if you notice each

button that I click turns to blue like

that so let's make that happen now we on

the home page so let's make the home

page happen so let me create another

class for this I'll say button

underscore clicked like that so I want a

specific background color on this one

because that's the only difference I

want is the background color so I'll go

back to paint and choose this dark blue

here so let me see what values it has 52

47 88 so 50

- 40 47 88 okay let me minimize that and

if i refresh nothing happens so what we

supposed to do now we have two classes

here now the good thing about classes is

that you can add two classes in one so I

just need to leave a space and say

button clicked let me maximize this so

now what's happening is this button is

one classy to use and they need to

combine the styles for button clicked as

well so let's see the effect we get and

you see the home page has turned to a

different color but these buttons are

not clickable yet so let's make them

clickable right now by adding an a tag

around them so I'll add opening a tied

here closing a tag now inside the a tag

let me give it an H ref so it knows

where to find where to go and it clicked

this one is called a home dot HTML

because this button will lead us to the

home page okay so if I do that and

refresh you see that this one changes

the others are not clickable but the

problem now is that is it there's a

decoration on the text because now it

has become a link so to avoid that let's

tell it to remove all decorations from

the from links so let me just say a

meaning all links okay text decoration

will be none so if i refresh now it

still doesn't work so let me just

specify that in the body

so what this means is all links all

links in the body will follow these

rules in here I can type IMG instead and

you domain or images and the body will

follow this so for now or I can say div

same thing so now let's type a and

refresh that actually worked

but the text color is still different so

let's do something like color let me

just copy this white over here and paste

it here let's see if that works and

voila we have it so the text is like

that it could actually work by just

adding a alone like that

I think it works the same way yeah

exactly so moving on now let's add this

linking system to all the other buttons

simply by copying this a tag and paste

it here there and there and closing them

at the end there and there but we want

them all to lead to other pages so let's

do that let me type image that HTML

let me type audio that HTML and let me

type video that HTML now these files

don't exist yet we will create them so

don't worry but now when we refresh we

see that all buttons are clickable but

they lead to files that are not found so

pretty cool for now now let's add some

content below here so to do that let me

just add a break tag over here okay and

let's go lower now instead of me typing

texts what I did was go to Google and

typed lorem ipsum and it gives me this

lauren lorem ipsum dot-com so what is

lorem ipsum is just dummy text text that

is useless which you can use to put on

your website for clients to see how text

will look like instead of you having to

type everything you just go to this site

and copy the text it's free and paste it

here so let me do that let me paste the

text here and when i refresh I see the

text down here so it looks more like a

web site but I need this to be the

heading so I'll give it an edge

h2 tag opening and closing h2 tag so

when i refresh the page you see it like

that much better so let's type in

something more reasonable like welcome

welcome visitors and refresh and much

better so now that we're done with page

1 let's create the rest of the pages

okay like image for example so how do we

do that we just open a new text document

let's go to the home page here and copy

all the text in here because everything

will look pretty much the same and then

let's save this as a different file so

let's save this one as image dot HTML

make sure we save as all files and save

so just like that we've created the

image if i refresh the image file you

see it but it looks exactly like the

home page though so let's make it

different to start with we need to show

that this button is clicked so how do we

do that we go to the image file and

let's remove this button clicked from

the home we put it on the image and so

if we refresh now you see it move to the

other side

so let's add an image over here by now

we pretty much know how to add images so

we say IMG SRC for source and then we

close the tag so this image is called

image door to jpg okay now before we do

that actually we need to have our images

and media right in the same folder as

our website so let's go here and copy

some of this stuff I put an operative

video called birthday mp4 and an mp3

code birthday and an image code image so

let me copy these media files and paste

them here like that so now that they're

in the same folder they will be found so

let's go to image it's image the JPEG

like that so let's refresh the page and

see what happens and there we are pretty

nice but the text is down here I want

the text to be on this side so we don't

lose this space so what we do let's

create another

the class called media so let's do that

media class so this one what I want I

want the items to float to the left okay

I want a width of 50% okay and I want a

margin around this item of 10 pixels

okay so now I need to tell it to use

these things on the image by saying

class is equal to media so that's the

media class right there and if i refresh

the page and you see the text over there

there's a nice image over here

everything looking awesome

so if I click on home takes me to home I

click on image it takes me here so now

let's make the audio version so the same

way let's open a new document let's copy

everything from the image page let's

paste it here save this file as audio

dot HTML let's make sure we select all

files and save so here the first thing

we should change is the button clicked

let's move it to audio this time okay

let's type something else here instead

of welcome visitors let's say audio in

this case alright

so let's remove the image because we

don't need it there so let me see what

happens now there we go and it's audio

and by the way on video on image we can

type the same thing there if you want to

so let's add an audio thingy there so

how do we add an audio control we just

say audio opening tag and audio closing

tag like that now this doesn't describe

anything so we need a source source this

should be a tag sorry and then we add

the source attribute and the closing tag

like that so the name of the our song is

called birthday dot mp3 okay and then we

tell it what type of file this is this

is a audio / MPEG like that that's this

is called the name type okay so that's

the name type right

there so let's see what happens when we

do that nothing why the audio is loaded

here but it's invisible so why is it

invisible because you can't see any

control so we go to the audio tag leave

some space and type controls so it

includes the controls in there otherwise

sometimes you may want to play audio

without anyone seeing what's seeing an

actual audio control so you do it that

way so let me refresh but this time I

see an audio controller like that ok so

let me show you how this would work

without an audio audio controls if I

remove the controls and just say

autoplay instead this thing will play

automatically but I won't see anything

like that so instead I want to see the

controls like that so I just click play

and the song plays so let's give it the

class that we want the class is equal to

media and then let's add some text on

top here let's say this song title is

title birthday door just like that

that's cool enough let's add a break tag

to give it another line so we see the

title there and this song and everything

looks awesome if we click play it plays

so moving on to video let's open a new

documents go back to audio select

everything and paste in there let's save

this guy as a video dot HTML ok save us

all files as usual so now how do we add

video let me just type some more text

here to make it different ok so it's

exactly the same as audio only that you

type something else here like video so

but let's make sure we change this

button clicked as well before we forget

to reflect what we want so let me change

this audio to video

and down here I change it to video as

well everything remains the same only

that this becomes mp4 and here instead

of MPEG we say video got / mp4 like that

so let's see what that does

let's reflect and there you are it's

that simple now you can play this video

without problems let me change the text

here to video it's nice and clean so

let's play so everything works just fine

I can skip to whatever point I want in

time very awesome images audio video now

some cool things to note about the video

control and the audio control is this

you can add some stuff here for example

contraction controls here these controls

we added if I remove controls for

example and refresh the page you'll find

that the video shows without any

controls there ok so in the same way we

can add something like auto play now

what this does is at the moment someone

opens your page the video plays

automatically like this ok so if that's

not what you want you can remove it you

can also add another attribute code loop

this means when the video gets to the

end you to start again so let's refresh

and play it so you see at the end it'll

start again like that so that's how the

loop works there's also another one

called muted so to play without sound

sometimes this is what you want well my

battery is going low like that

ok that's pretty awesome so you can

combine all these together without

problems muted loop auto play and it's

going to be just fine like that ok now

one more thing you can add to your video

thing is called the poster

now this poster shows an image before

someone plays the video like this or let

me remove the autoplay because that

messes everything up so I've added the

image on our website so you see instead

of showing the video it shows an image

instead sometimes you may want to do

this to add a more attractive image to

your stuff so so far so good that's it

for today I hope you've learned

something new please like comment and

subscribe subscribe so you don't miss

any future videos and it's goodbye I


Download Subtitles Download Video Download Audio

↑ Return to Top ↑ - contextual dictionary