Download "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: 2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]Next video: Основы Программирования - #5 - Арифметические и логические выражения

Основы Программирования - #5 - Арифметические и логические выражения

Основы Программирования - #5 - Арифметические и логические выражения

Channel: loftblog

2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]

2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]

18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

7. CS50 на русском: Лекция #7 [Гарвард, Основы программирования, осень 2015 год]

7. CS50 на русском: Лекция #7 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

Основы Программирования - #10 - События

Основы Программирования - #10 - События

Channel: loftblog

Объектно ориентированное программирование в Python за 10 минут!

Объектно ориентированное программирование в Python за 10 минут!

Channel: Хауди Хо™ - Просто о мире IT!

8. CS50 на русском: Лекция #8 [Гарвард, Основы программирования, осень 2015 год]

8. CS50 на русском: Лекция #8 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

22. CS50 на русском: Лекция #22 [Гарвард, Основы программирования, осень 2015 год]

22. CS50 на русском: Лекция #22 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

Основы Программирования - #12 - Баги

Основы Программирования - #12 - Баги

Channel: loftblog

15. CS50 на русском: Лекция #15 [Гарвард, Основы программирования, осень 2015 год]

15. CS50 на русском: Лекция #15 [Гарвард, Основы программирования, осень 2015 год]

Channel: JavaRush

cs50

cs50 на русском

основы программирования

введение в программирование

14 лекция cs50

html

css

facebook

гарвардский курс по программированию

Week 7

00:00:02

[music]

00:00:11

[music]

00:00:18

Welcome to Harvard for the course

00:00:22

[music]

00:00:24

cs50 Welcome this is CS and we are

00:00:28

starting classes if you remember in the

00:00:31

fourth problem book there was a quest And you were

00:00:34

promised great prizes If you can

00:00:36

restore photos of the cs50 team

00:00:39

that works here and in New Haven and

00:00:41

then find the computer scientists themselves. The

00:00:43

more the better, many sent the

00:00:45

results and I decided that now I will show them to you.

00:00:47

And then we will post it all on the

00:00:50

network, but I would like to draw your

00:00:53

attention. First of all, this is Sam,

00:00:55

who, let’s say, posed in many photos

00:00:57

and This morning we identified

00:01:00

the leader and this is someone named Ken, who gathered

00:01:03

as many as 24 computer scientists in the photographs, or even

00:01:06

more if you count group photos.

00:01:10

Here, for example, Ken together with Mary in New

00:01:12

Haven, meanwhile, the case is quite

00:01:14

interesting, it seems like this is our first time. It

00:01:17

turned out that I had never it occurred to

00:01:20

me to note in the problem book that members of

00:01:22

our team cannot qualify for

00:01:24

prizes. But Ken is actually one of

00:01:27

our staff photographers, and by the

00:01:30

way, he immediately wrote to me

00:01:32

not to post these photos anywhere. As

00:01:35

for me, this is because some of

00:01:37

his photos look something like this and the

00:01:40

like Although Ken, of course, would like

00:01:43

me to praise him and tell him what a

00:01:45

professional he is in his field And that He even

00:01:47

knows how to take photographs with normal

00:01:49

focus and he also took pictures of the team, but

00:01:52

enough about Ken, we noted him, now

00:01:55

let’s look at the students who sent

00:01:57

their photos So this morning we

00:02:00

decided that Lance won with

00:02:03

fifteen

00:02:04

photos. For example, Lance with Colton

00:02:07

tale with me and Sam, but just recently

00:02:11

around 11:1 I found another letter

00:02:15

for the competition from Bonnie and this was written there

00:02:20

I won’t lie, I’m sending you a letter

00:02:24

during class, she attached 14

00:02:28

photos, one less than NS, but in

00:02:32

Bonnie’s photos, as it turned out, there were

00:02:35

several cs50 employees each,

00:02:37

so we decided to divide the

00:02:39

victory between the forest and Bonnie, in addition to the

00:02:42

allocated space for the dropbox, which we

00:02:44

we will provide all participants for them and their

00:02:46

comrades we

00:02:48

will organize a special lunch next week NS Boni we

00:02:52

will tell you all about it separately

00:02:54

Congratulations on the victory for the rest

00:02:56

I remind you that on Friday we have a general lunch

00:02:58

for the CS course in Cambridge and New Haven

00:03:01

details on the course website in corresponding

00:03:03

section And now, closer to studying, a few words

00:03:06

about our seminars. The moment is approaching

00:03:09

when it’s time for you to think about the

00:03:10

final project; moreover, very

00:03:13

soon you will need to share your

00:03:15

first ideas on this matter; in fact,

00:03:18

you will have the opportunity to briefly

00:03:19

present to the consultant your idea

00:03:21

that you would like to implement in the

00:03:23

final project, many students

00:03:25

are inclined towards projects that can be

00:03:26

implemented on the Internet, you and I have only been with

00:03:28

them for a week

00:03:30

and haven’t really delved into web

00:03:31

programming. In general, don’t worry for

00:03:33

now. If suddenly you don’t have any

00:03:35

thoughts about this at all, the conversation with

00:03:37

the consultant itself can push you to

00:03:39

ideas that you and you will discuss together. And

00:03:41

to help you with ideas and,

00:03:43

ultimately, with CS projects, they traditionally

00:03:46

hold special seminars where you

00:03:48

can choose, in the form of a lecture or

00:03:50

seminar, to get acquainted with

00:03:51

topics that are not included in the main course

00:03:54

but turn out to be very useful in

00:03:55

preparing the final project But here is

00:03:58

a list of various ro-serials that the

00:04:00

CS team has developed for this year for

00:04:03

programming for iOS Android for

00:04:05

developing computer games different

00:04:07

sets of tools languages and technologies

00:04:09

So do not forget to look at the

00:04:11

cs50 website And if you have already decided that you If

00:04:14

you're interested, register on the website

00:04:16

in the required section And then we'll figure out the

00:04:18

schedule by day, place, etc.,

00:04:20

almost all classes will be broadcast

00:04:22

So there will be recordings left in case

00:04:24

you can't come And it's time for us to

00:04:27

move on to the lecture last time We're

00:04:29

done

00:04:30

if you remember this is a kind of message in a

00:04:32

virtual envelope that is transmitted

00:04:34

from one router to another between the

00:04:36

browser and the web server in general, this

00:04:38

message looked something like this, a

00:04:41

rather sophisticated message that is

00:04:43

located inside the envelope on a piece of

00:04:45

paper and in its first line it is written

00:04:48

literally A Let's test your memory

00:04:50

What does it mean SSH what does it do when we

00:04:54

send a request to the

00:04:56

site

00:04:58

by when? Go to the site You carry the

00:05:02

entire file name and just enter

00:05:03

facebook.com and then press Enter or

00:05:05

gmail.com Enter and so on What does

00:05:07

SSH mean What file or More precisely

00:05:13

page Yes index default page

00:05:16

if you are not

00:05:21

specified or To the inbox folder in the mail

00:05:24

or to the start folder with news on the CNN website

00:05:27

and so on and the server responds with something

00:05:29

like this. What does it mean that it understands http

00:05:32

version 11200, this is a status code that

00:05:35

we hardly ever see because

00:05:37

it says that everything is working, the request

00:05:39

has been accepted and processed correctly, that up to the

00:05:42

content type, such responses are normal but do not

00:05:44

always come in the form of text, this

00:05:46

applies in particular to HTML, which we

00:05:48

will talk about today, I’ll

00:05:50

actually open the browser, I use

00:05:53

Chrome, but you you can choose any of them,

00:05:55

although I still recommend Chrome

00:05:57

because it is very convenient for developers and

00:06:00

it has a lot of built-in tools

00:06:01

that make working with HTML and CSS easier. We’ll

00:06:04

talk about them today and

00:06:06

other languages too. So I open it

00:06:09

first by pressing Ctrl left or just

00:06:11

right mouse button somewhere on the

00:06:12

page I open the view of the element’s code

00:06:15

now I’ll change the screen settings a little

00:06:19

and move it So this is the code view mode

00:06:22

in Chrome, a kind of built-in

00:06:23

debugging tool if you use

00:06:25

Chrome, you also have one, with its

00:06:27

help you can see how it works

00:06:29

page from the inside, let's

00:06:33

do this here with more characteristics than we

00:06:36

need today Look at these

00:06:38

tabs elements network sources Taylan

00:06:41

some more for now let's click on the

00:06:43

network Perhaps at first glance there is

00:06:45

too much information here So if you

00:06:47

allow me to simplify it a little

00:06:51

Lock I somehow accidentally discovered

00:06:55

this function, it saves everything that

00:06:57

happened in the browser and now let's go

00:07:00

to

00:07:02

http2

00:07:03

facebook.com Let's write ww

00:07:07

Enter Well, at this address many of

00:07:11

you went to Facebook first in the list

00:07:13

And below See how much there is happened

00:07:16

it turns out When you go to

00:07:19

facebook.com you send more than one http

00:07:22

request, in fact, when you go to

00:07:24

Facebook, 41 envelopes fly apart in each

00:07:27

of which is a separate request, this is all

00:07:30

reflected here behind the scenes at the bottom of the screen,

00:07:33

you see my browser sent 41

00:07:37

requests, it transferred 861 KB and for some reason,

00:07:41

suddenly loading all this beauty took

00:07:44

as much as 8 seconds for Facebook, this must be said for

00:07:47

quite a long time But now it just

00:07:49

happened And for now I’m only interested in the

00:07:52

most frequent request So let’s do

00:07:54

this now and take a minute

00:07:58

to figure out

00:08:01

what we need so what do I I did

00:08:03

there on the left, there’s actually a lot

00:08:05

going on here, but I highlighted facebook.com And

00:08:07

now look, I’m scrolling down some more

00:08:10

Heading slips As you can see, chome

00:08:14

shows me essentially the contents of

00:08:16

the request that I made, the format is

00:08:18

a little different, but you can see the one

00:08:20

familiar to us Get more Look here

00:08:22

host facebook.com is also the ssh file

00:08:25

that I requested if I send it back

00:08:28

to the top then we will see that Facebook returned

00:08:30

to me all the headers, so

00:08:32

inside our virtual envelope there are

00:08:34

actually a lot of pairs key value

00:08:36

word colon then the value word

00:08:38

colon and the value this headers we

00:08:41

still need much less less details

00:08:44

than indicated here Let's look at the

00:08:46

penultimate line here the

00:08:48

Facebook server actually tells us what the

00:08:52

HTML text contains, it turns out that when you send a

00:08:55

request to the server for a web page through

00:08:57

the browser, the Kim server has an envelope inside

00:09:00

which is text or HTML What does it mean

00:09:03

hypertext markup language and this is

00:09:06

another language that we will talk about today,

00:09:09

people and computers use it to

00:09:11

create web pages. Let's see, let's

00:09:13

go back to the facebook.com website, click on

00:09:16

Ctrl and the left button Or just the right

00:09:19

mouse button And then look at the Source

00:09:21

code of the page if suddenly you are

00:09:24

not using Chrome, then Internet Explorer Firefox

00:09:26

or Safari allow the same thing, it’s just that

00:09:28

the items can be called differently And this is the

00:09:31

HTML code that Mark and

00:09:32

his colleagues from Facebook wrote, in general, this

00:09:35

code contains that blue and white

00:09:37

page that we saw a minute

00:09:39

ago, it seems a little complicated, but

00:09:41

at the top left we can see

00:09:43

repeating elements, there are a lot of

00:09:45

open angle brackets and the

00:09:48

HTML keyword here. One of these brackets and the

00:09:51

page header, now I’ll scroll down even

00:09:55

lower to show you something else,

00:09:58

here on the right you see a fragment with open

00:10:01

broken bracket and page body

00:10:03

last time if you remember we agreed

00:10:05

that the simplest web page you

00:10:07

can write looks something like this

00:10:09

opening tag HTML opening

00:10:12

heading header tag closing

00:10:14

heading header tag opening tag

00:10:16

page body text close body close HTML

00:10:19

Slow down this code for a second especially

00:10:22

if you’ve never worked with it and don’t

00:10:24

really understand what it all

00:10:26

seems decent, very neat

00:10:27

stylistically, it’s unpleasant, there’s a lot of

00:10:30

indentation and white space in the code

00:10:32

for Facebook, it’s all wrong, so what? The

00:10:34

guys on Facebook write worse than

00:10:36

me, but apparently for styles of units out of

00:10:41

five they have a reason forcing them to

00:10:44

hack it so much they want it to be

00:10:46

easy to read they don’t want it to be

00:10:48

easier for you to read their code In a

00:10:50

sense they deliberately spoil it and get

00:10:52

confused at least visually so that

00:10:54

Myspace or someone else doesn’t decide to rip it off according to

00:10:57

their start page, but with the help of Chrome

00:11:00

or some program we can

00:11:02

quickly clean the sun. So the reason is not

00:11:04

exactly this, but the World Cup. Yes, the gaps are

00:11:08

data, and the white gaps are also data, and

00:11:11

what’s

00:11:12

next to the data, then the

00:11:16

computer, yes, exactly if many times press the

00:11:19

tab key or space bar what

00:11:21

will happen each key transfers data

00:11:23

of at least a

00:11:25

byte in size

00:11:27

in the code of the Facebook start page

00:11:31

what will happen Facebook has many

00:11:33

users suppose that today a

00:11:35

billion people visited the social network site and

00:11:38

one of the developers just

00:11:40

clicked once an extra byte per space for a

00:11:43

billion requests How much more

00:11:45

data will Facebook have to send

00:11:46

due to the fact that someone put One

00:11:49

extra

00:11:51

space a billion FBU will have to send a

00:11:54

billion bytes or 1 GB more data

00:11:57

due to someone simply pressing the space one

00:12:00

space what if we have now broken it all down line

00:12:02

by line, left more

00:12:03

white space for tabs and

00:12:06

spaces, we would have wasted gigabytes or

00:12:08

even terabytes of space because of this, when

00:12:10

developing web pages, it is customary to compress the

00:12:12

code in volume, we will then look at how this is

00:12:15

done. And today we will start writing the code

00:12:17

that By the way, people can easily read,

00:12:20

meanwhile, we will now open the

00:12:22

element code view again in Chrome. At that time

00:12:24

we went to the network tab. And if you go to

00:12:28

the tab,

00:12:29

you can see a lazy version of the same

00:12:31

HTML code from Chrome, but it’s not so

00:12:35

scary anymore, it’s a completely different matter

00:12:38

Now you can press a

00:12:44

program called Text Edit,

00:12:47

if you remember, this is a very simple text

00:12:49

program approximately analogous to Windows bln and

00:12:53

now I will literally print the following

00:12:55

document type HTML initial g HTML end

00:12:59

tag HTML here we have the page header

00:13:02

close the page header and the title

00:13:05

will be hello world and here below we have the body of the

00:13:08

page close the body of the

00:13:10

page

00:13:12

then here hello world wonderful here

00:13:16

we have written a web page with lightning speed I

00:13:18

will save it on my desktop as

00:13:20

Hello HTML my Macbook is indignant that I do

00:13:23

n’t want to save the text as a text

00:13:24

file ask again if it will be marked as

00:13:27

No I I insist on HTML, which is convenient,

00:13:29

now I just double-click on Hello

00:13:31

world HTML and open my web page.

00:13:34

Unfortunately, out of 7 billion people on the planet,

00:13:37

only I can go to the page. Why

00:13:40

did this happen? It’s only available on this

00:13:43

MacBook. So, the site is useless, after all

00:13:45

not a single person in the audience, not to mention the

00:13:47

Internet, can go there.

00:13:49

Therefore, today we need to introduce

00:13:51

one more element for this. I go to Cloud,

00:13:54

this is an obvious service that provides a

00:13:56

cloud for our course. Thanks to it,

00:13:58

we have a workspace

00:13:59

somewhere on the Internet. that is, all our

00:14:01

files are available to a certain public

00:14:04

Let's move on, I'll now take and create a

00:14:07

new nc50

00:14:10

IDE file, I'll save it called Hello HTML

00:14:13

In order not to waste time, I won't

00:14:15

write the code again, I'll just copy it here and

00:14:18

save it, so I have a file

00:14:21

called Hello HTML but how can I

00:14:23

still open it as a web page? It turns

00:14:25

out that the IDE has not only a tin

00:14:29

or a debugger like gdb and similar

00:14:31

programs, we have a full-fledged

00:14:33

web server, in other words, each of you

00:14:35

has your own server and the purpose of

00:14:37

existence of the web is servers to serve

00:14:39

web pages, receive requests from

00:14:41

browsers and respond to them with virtual

00:14:44

letters with what I just wrote. You

00:14:47

and I have a free

00:14:49

open source server, open code

00:14:52

that someone wrote and essentially

00:14:54

allowed us to view it, download it

00:14:57

and even change this free

00:14:59

web server is called AP, we

00:15:01

simplified it all SF IDE and called it AP 50 and

00:15:05

now it can understand the following, I

00:15:08

’ll write for example AP 50 hundred and now

00:15:12

I’ll put an end to it and now we get

00:15:14

some very tricky message that

00:15:16

requires placing the document in home at

00:15:18

the rebellion, whatever it is with the

00:15:20

workspace And we finally have a

00:15:22

web server AP 2 In short, I just

00:15:26

clicked on the button and launched the fan home to the

00:15:29

Internet via tcp 80 From a certain

00:15:33

address And here, depending on the

00:15:35

username and a couple more moments

00:15:38

so if I press

00:15:40

here. Harvard and so on Please

00:15:43

note that for the last few weeks,

00:15:45

here in the upper right corner of

00:15:47

cs50ide your username has been reflected

00:15:51

all this time, this is what

00:15:53

the address looked like where you can find all

00:15:56

your files on

00:15:57

the network, but it’s important This only happened now

00:16:00

because before you didn’t need C was

00:16:03

to make your programs work on the network and

00:16:05

today when we start writing code for

00:16:07

web pages we will look at how to make the

00:16:10

URL accessible to other users

00:16:13

first I will click on this URL the list here is a

00:16:15

rather ugly list of

00:16:18

directory files But what catches the eye

00:16:20

Hello HTML That's all because I saved

00:16:23

it in the work environment and Apache said

00:16:26

to look for it somewhere in David's work environment

00:16:28

And I also allowed everyone to see

00:16:31

these files and if I now click on Hello

00:16:34

HTML I will see this exact file in the tab,

00:16:37

note in cloud9 there is something else -what

00:16:39

is useful in the cs50 IDE is,

00:16:41

surprise, there is an address bar. This is

00:16:44

because even though we use Chrome

00:16:46

to log into the csf IDE, inside it we have

00:16:50

our own version of the browser, so as

00:16:52

not to complicate it once again, I’ll just

00:16:54

copy the address and now I’ll take it and open

00:16:57

my own but in Google Chrome So, no

00:17:00

magic, no cs50 IDE, I literally

00:17:03

copy and paste the J Harvard URL and press

00:17:06

Enter And here you go, just like

00:17:08

in theory, anyone with access to

00:17:10

the Internet can view this file

00:17:12

if I gave permission to do so And now

00:17:15

if you enter Hello HTML Here it’s my

00:17:18

never impressive page Let’s

00:17:20

check ourselves all this is still general

00:17:23

words the system itself We haven’t started

00:17:25

actually writing the

00:17:27

HTML code yet ask if anyone

00:17:32

doesn’t understand

00:17:35

what the pages belong to CS do

00:17:39

these pages belong to cs50 in what sense Well,

00:17:42

these files are all a Good question So

00:17:45

we own cs50.io we purchased this

00:17:47

domain name And when you log into the

00:17:49

cs50 IDE you get a subdomain

00:17:52

say

00:17:54

ideon or

00:17:57

IDE S .io this is a unique address under our

00:18:01

domain name for convenience as part of the

00:18:04

course each of you received an

00:18:05

individual address and to simplify

00:18:07

this whole story, we purchased a higher-level domain

00:18:11

cs50.io and we are all under

00:18:14

its hood, so to speak, in a couple of weeks we’ll talk

00:18:16

in more detail or when you need your

00:18:18

own domain names for projects,

00:18:21

all this is honestly not difficult Okay,

00:18:23

now let’s move on, I’ll open it again in

00:18:25

Swift IDE Where is my

00:18:28

lazy file now Hello HTML I want to do

00:18:31

something more interesting for example Let's

00:18:33

do it like this I open pars HTML I

00:18:37

prepared this file in advance at the beginning

00:18:39

as always comments but in HTML they

00:18:42

look a little different lines 3 and 14

00:18:45

you can see the syntax for the beginning and

00:18:47

at the end of the comment, from a functional

00:18:49

point of view, it doesn’t matter that in the middle it’s

00:18:52

just a comment Explanation for

00:18:54

the user about what’s the point of the

00:18:56

riddle on attentiveness, what

00:18:59

new tag we see here so far we’ve

00:19:03

only seen the opening tag HTML

00:19:05

header tags body And what’s new

00:19:08

and what’s new pi gpi or paragraph paragraph tag

00:19:13

here I just inserted some text in

00:19:14

Latin for demonstration I needed to

00:19:16

show you how

00:19:18

paragraphs of text can look like in HTML Please

00:19:20

note that a certain

00:19:22

scheme of structure is starting to build, so to speak And now I

00:19:25

will do something else Just turn it off first

00:19:28

and now I’ll launch it again only inside

00:19:30

our today’s source directory

00:19:32

7m So I will have access to everything I

00:19:34

need if we return to the directory list

00:19:37

we will see here a list of all today’s

00:19:39

files in the next problem book you will receive a

00:19:41

guide on how to do this Here I am

00:19:43

opening parag HTML and if you If you don’t know how to

00:19:47

speak or read Latin, you

00:19:49

may well mistake it for a

00:19:51

programming language. But in general, these are three

00:19:53

paragraphs of text with markup in HTML.

00:19:56

Pay attention to the indentations between them.

00:19:59

Perhaps you will instinctively guess by

00:20:01

analogy with ordinary text. When you

00:20:03

work with indentations so as to remove

00:20:06

them in the code it is enough to erase these lines

00:20:09

and then save and if you reload

00:20:12

Now look Everything seems to have merged into

00:20:15

continuous text HTML is not the most

00:20:19

sophisticated did exactly what you

00:20:21

wrote in the code and nothing more so

00:20:24

if you did not give the command to start a new

00:20:26

paragraph then you and not

00:20:28

really what the browser will do. This is

00:20:30

what even if you press Enter several times

00:20:32

and then again and again to

00:20:34

move the text down and then save and

00:20:37

load again the empty space

00:20:39

will shrink and you will again have an indent

00:20:42

of only one character So this

00:20:45

was the tag paragraph or g and what kind of system have

00:20:48

we outlined here? It seems that in HTML We

00:20:51

start everywhere with an opening tag and

00:20:53

end with a closing tag. And what

00:20:56

is a tag? It’s just part of the syntax. The

00:20:59

parenthesis opens with the keyword. The parenthesis

00:21:01

closes. to the

00:21:04

fullest extent, that

00:21:06

is, you have added a paragraph, you do exactly

00:21:08

the opposite. Although in this case this does

00:21:10

not mean doing the opposite before the

00:21:12

name of the same tag, here you need

00:21:13

to put an ssh. So again, it’s not very

00:21:17

interesting, and we do

00:21:18

n’t make the network more exciting with these manipulations.

00:21:20

How can I make this thing

00:21:22

bigger? and bolder for this in the

00:21:25

heading HTML file me those H1 H2 H3 4 5 6 and

00:21:31

so on nothing is clear yes but

00:21:33

let me open one folder and we will

00:21:35

look at the default headings

00:21:38

browsers offer both large and bold

00:21:41

fonts of different sizes H1 large H6

00:21:44

tiny the rest between them is already more

00:21:47

interesting But this is still not the

00:21:49

Internet that I know that if we

00:21:52

need to make some kind of list here is a

00:21:54

bulleted list of three houses in

00:21:56

Harvard how it is made

00:22:00

Let's look at the list HTML here they

00:22:04

show us something sad but Let's

00:22:06

figure it out From what you saw, you can

00:22:08

understand that UL is an unordered

00:22:10

list, not labeled without numbers,

00:22:13

there is also an ordered list, it

00:22:15

is indicated by the ol tag. And here it means

00:22:19

building a list, it automatically makes a

00:22:21

list of what you need there. And again,

00:22:24

indents and spaces - This is only for me

00:22:27

in the browser, but whether they exist or not, but

00:22:30

even if you put everything together, I’ll remind you that this is

00:22:32

not necessary. But if you did this,

00:22:35

the browser would still understand you. Now I

00:22:37

press restart in the browser and

00:22:40

again nothing happens because it

00:22:43

only does what I told it. Okay,

00:22:45

so this is all just text Let's

00:22:48

do something more interesting now

00:22:50

I

00:22:52

borrowed the code and then I'll go here

00:22:55

and create a new File Let's call you and I

00:23:01

ugly often this year

00:23:04

remembering I don't even know it comes out

00:23:07

naturally but sometimes it goes off scale Well, great,

00:23:11

I'll open Google images and

00:23:16

again, if you don’t know what we’re talking about,

00:23:19

read Wikipedia about rickrolling

00:23:21

Every time you click on a link from

00:23:24

someone somewhere,

00:23:26

let’s select a picture and open it So here’s a

00:23:30

photo from Google images and

00:23:32

let’s assume that this picture has spread

00:23:34

all over the Internet, this in turn

00:23:36

means that I can quite use it

00:23:38

on my page so I take and

00:23:40

copy its URL now I’ll go back to the Cloud

00:23:44

and see what I can do in front of us is a

00:23:46

regular web page this is Rick oh Rick

00:23:52

Eli I go back to my

00:23:54

browser

00:23:56

reboot curious Where is Rick

00:23:59

I’ll see what happened So let's

00:24:01

act like nothing

00:24:03

happened. I'm pasting it here now,

00:24:06

let's get back to this. So here's the file. HTML This is,

00:24:09

of course, not Rick Ely, but actually we can

00:24:13

add him here, here he is Rick Astley now I give

00:24:16

the command to show me the image the address of

00:24:18

which I copied, it seems like a happy

00:24:20

birthday greeting or whatever

00:24:23

And now this is how I close

00:24:26

the tags, I got an explanation but Pay

00:24:29

attention I just opened the bracket image

00:24:32

the source and its URL attribute is long here.

00:24:36

But at the very end it should be noted that I

00:24:39

put a slash and closed the bracket instead of

00:24:41

opening the bracket ssh image as usual and

00:24:45

then closing the bracket Why

00:24:48

Try to guess even if you are not at all

00:24:51

familiar with

00:24:54

HTML Yes it is stands at the end of the command Why does

00:24:58

n’t this method seem logical Why doesn’t it

00:25:00

seem that you can, for example, close

00:25:02

the image yeah Because there’s nothing in it

00:25:05

Yes, if you think about it, it’s not very logical to

00:25:08

start an image and then finish it, the

00:25:11

picture is either there or not, there’s no point in

00:25:13

leaving room for something inside

00:25:15

the picture, in truth, this is impossible.

00:25:17

So the syntax in this case will boil down to

00:25:19

putting ssh in the opening or

00:25:22

starting tag and then

00:25:24

saving it. If now I reload the file,

00:25:28

we will see quite the result. And you

00:25:30

could also finish off users by

00:25:33

adding a link to YouTube here by the way

00:25:35

Every time you went to

00:25:37

YouTube Come on, I'm Krol of my own free

00:25:40

will. Well, I'll

00:25:46

go to Krol now, well, someone liked it and

00:25:49

look, if you decide to share

00:25:51

the link, then here is the address that you can

00:25:54

paste into Have a problem book in a copy of your hard drive

00:25:56

or slide And now if I click

00:26:00

on attach You probably noticed this

00:26:02

button I need to copy the link and

00:26:04

to make it easier to see I paste it into

00:26:06

my text editor this is exactly what

00:26:08

YouTube advised by the way So if you

00:26:10

went to YouTube and found a video that

00:26:12

you want to paste on your page Here's how

00:26:14

it's done And here's another tag for HTML

00:26:18

iframe or built-in Frey that looks

00:26:20

more complicated than the others. The fact is that the

00:26:23

image tag and iframe can have so-

00:26:25

called attributes,

00:26:28

this is another syntax element in HTML

00:26:31

besides the tag name and its parentheses. You

00:26:33

can define its properties attributes

00:26:36

and so make it do something,

00:26:38

each attribute is assigned a value, I’ll

00:26:41

give an example on YouTube, we can choose a

00:26:43

video width of 420 pixels and a height of

00:26:47

315 This is how it looks in HTML in the

00:26:50

source code there is this long

00:26:52

link to the video and there is also a

00:26:55

frame border equal to zero, that is,

00:26:57

apparently there is no border around it,

00:26:59

allow full-screen mode, apparently it

00:27:01

means that there is a button that expands

00:27:05

to add Pathos to my

00:27:08

rtl file, then I will remove the picture from here and insert this,

00:27:14

reboot and look

00:27:19

again like this Well, perhaps that’s enough, I promise

00:27:21

I’ll try not to include this again What Well,

00:27:24

what useful things did we learn, yes, the

00:27:27

example page was disgusting, but HTML itself is

00:27:30

not at all complicated. It’s not a

00:27:31

programming language, it has no functions, it

00:27:33

doesn’t have loops and conditions, it doesn’t have everything that

00:27:35

it has, about a dozen different tags with

00:27:37

and without attributes. Actually,

00:27:39

it’s great in HTML, it’s quite possible to

00:27:42

master it on your own if you want, you

00:27:44

just need to understand the general principles of its

00:27:46

work. What is a tag? What is an attribute?

00:27:49

How, in the end, to create a web page with their help?

00:27:51

Everything else is the result of

00:27:53

studying various materials on the topic of

00:27:55

finding some solutions in Google or as

00:27:57

you have seen, viewing the source codes of

00:27:59

Facebook sites that you like and

00:28:01

trying to figure out how the creators of

00:28:03

the pages achieved the desired result and

00:28:05

so we can insert the

00:28:07

actual pictures. We just did this

00:28:09

or Let me show you This is an example of code

00:28:11

if you suddenly want to see an

00:28:13

angry cat here we may have a

00:28:14

picture above it, a comment, and there is

00:28:17

another option for those who, due to their

00:28:19

vision, use a screen reader; a

00:28:21

screen reader can read Grumpy out loud to you to a

00:28:23

blind person who does not see

00:28:25

either the screen or the picture; the computer can

00:28:27

tell you in words that the

00:28:29

source of this file is shown here

00:28:31

cjp If I wanted to do everything

00:28:33

smartly, I could. Here's how to do it no

00:28:36

more, I promise we'll

00:28:39

google cats instead, I open Google

00:28:42

images and let's say an image with my

00:28:44

cat if I press Ctrl and the left or

00:28:47

just right mouse button Terrible

00:28:50

which I'll save Cat jp on my

00:28:54

desktop now I’ll open Cloud again

00:28:59

Please note I can upload

00:29:01

local files here now I take fa jp you can

00:29:05

just drag it into Cloud 9 and

00:29:08

now he will start to be indignant because

00:29:10

we already had fa Cat jp but there’s nothing

00:29:13

complicated in that take a picture from

00:29:15

Facebook or a photo of some hosting and

00:29:17

drag it into Cloud 9 and also just

00:29:20

put it on your personal website or

00:29:22

use it in the seventh or eighth

00:29:23

problem book, we’ll sort everything out and if you decide

00:29:26

to Look at the cat Let’s say I posted that

00:29:29

same photo, it’ll be all cute-

00:29:32

in the end you will see something like this

00:29:34

little face, and so the files that you

00:29:36

link to on the web page can be

00:29:38

located on your account or on

00:29:40

any other server, which is what we saw in

00:29:43

Rick’s example, and where, even more precisely, what else

00:29:47

can you do here? Let’s do this you know what

00:29:50

would be nice all our web pages

00:29:52

while they were very statins are a bit sparse

00:29:56

I'm now making my own

00:29:57

search engine to create my own

00:30:00

search I'll have to do that's what

00:30:02

first I'll create a new file called

00:30:05

sech HTML we have a template posted Oh don't

00:30:10

insert anything in the terminal window So

00:30:12

the preparation We have online It’s time to get down

00:30:14

to business and I’ll start with this, the

00:30:17

beginning of a file called Search HTML

00:30:19

I’ll save it in today’s source

00:30:21

directory

00:30:23

I’ll name it Although let’s make

00:30:28

our product better now let’s select for example H1

00:30:31

CS Search and then H2 Don’t

00:30:34

miss it -let’s remember What are H1 and

00:30:40

H2 Yes, big fat and not so big

00:30:43

but also bold now I’ll save it and go

00:30:46

here and Let’s look at the Search

00:30:51

HTML file well and now it’s

00:30:56

straight

00:30:57

So where is it

00:31:00

What

00:31:02

stop David

00:31:06

got confused But here it is David got blunt Okay So here it is

00:31:10

it cs50 Search Don't miss it And

00:31:13

now Let's remember what happened

00:31:15

last week we talked about the

00:31:16

lower level of http mechanics And here we have

00:31:19

HTML which is essentially just a

00:31:21

markup language That is, you tell the browser

00:31:23

what to do and You can even build your own

00:31:25

search engine instead of a simple one of our

00:31:27

search engine, I’ll show you what to do with the

00:31:29

form tag, I want something similar to a

00:31:32

data entry field, this data field needs to be

00:31:35

called something, let it be Q, I’ll set the

00:31:37

input data type, for example, text in quotes, the

00:31:40

text field is just a cell where

00:31:42

words are entered. So for now

00:31:45

We don’t need to enter anything into this field itself, so

00:31:47

I just close the tag using a

00:31:50

slash in the tag itself and again the inp tag

00:31:55

assigned it the value submit request

00:31:59

this tag is also closed now I’ll come back

00:32:01

here As you can see so far It didn’t turn out very

00:32:04

nice, but the beginning of the search page

00:32:06

was successful supposed Although Let's remove

00:32:09

all the garbage from here, it turns out that for the

00:32:11

inp tag you can add another

00:32:14

placeholder attribute instructions to fill in, for

00:32:16

example, a keyword or, more precisely, a request. You

00:32:20

see, and as soon as I start

00:32:22

typing, the gray text disappears Yes, you’ve

00:32:25

already seen this on the Internet, the

00:32:27

request button doesn’t suit me either soul

00:32:30

so I assign it the value sech search I

00:32:33

reboot and now My button is called

00:32:36

search I also probably don’t really like

00:32:38

the logo So let’s open the Google

00:32:41

font generator and try to make the

00:32:44

actual logo for cs50 sech more interesting It seems

00:32:47

not bad, but now let’s save

00:32:50

what’s the

00:32:54

matter and what’s going on here now

00:32:58

Yeah, I missed saving

00:33:01

as a stupid

00:33:03

browser, now let's take it and fix it once and for all.

00:33:06

Damn, that's

00:33:11

better. So Sorry, not my day, it

00:33:16

seems nice to exit the full screen And

00:33:19

now that's what I needed to save the

00:33:21

image

00:33:22

logg, now I go to grab it and grab it in

00:33:27

today's source directory like this the file

00:33:29

already exists Well, okay, then

00:33:31

we’ll delete that one Since that’s the case and don’t

00:33:34

forget to change it here, go here and indicate

00:33:37

that the source of the image is closed in our logs

00:33:40

And now back to the

00:33:42

search page it looks

00:33:45

good However, nothing useful has

00:33:47

happened yet Let’s try to look for the

00:33:49

cat of our program Why the

00:33:53

hell won’t it work so easily

00:33:55

ViDi is missing something important even if you have

00:33:59

never encountered HTML, it is obvious that

00:34:02

after we created a text entry window we

00:34:04

were allowed to enter data and

00:34:06

send a request, something is

00:34:09

missing if we still want the search

00:34:11

to work

00:34:16

correctly What

00:34:18

we need to do is we need an internal

00:34:21

database or the search engine itself, and to be

00:34:24

honest, this takes a lot of

00:34:26

time, remember again the last lecture.

00:34:28

If you turned off instant search in advance

00:34:31

and are looking for something on Google, then how does

00:34:33

this happen? Let’s turn it off, it

00:34:36

will be as if old version of the browser and

00:34:38

I’ll finally look for cats or something else,

00:34:41

remember what ur will look like, it

00:34:43

seems tricky, but ssh search is hidden here,

00:34:46

question mark Q equals cats, and in

00:34:49

theory the system should give me a lot of

00:34:51

results. You know what I’ll do, I’ll

00:34:54

pose for a minute, all Google will come back here

00:34:57

and I’ll add an Action attribute to the tag, that is, an

00:35:01

action or direction. And here I’ll

00:35:03

literally write Google and you can do all this using the

00:35:05

Get method. What is an action? The

00:35:09

name is not the best, but the action

00:35:11

actually points to its

00:35:12

performer, that is, in the case of my

00:35:14

search, where will they come from? results

00:35:17

if I return to my form, reload the

00:35:19

web page And now I’ll enter into the search

00:35:21

for example

00:35:22

dogs, look I used Google

00:35:25

if it’s something else Not dogs Let’s say

00:35:30

cats, too, everything will turn out like from

00:35:36

cs50 probably again not as fun as

00:35:38

we would like, but then it

00:35:40

works Well, what happens? I

00:35:43

essentially used HTML to teach my

00:35:45

browser to receive input data and

00:35:47

send it to a remote server via

00:35:50

http, my browser understands http and therefore

00:35:53

compiles a URL. So in the end I

00:35:55

end up where I need to see what happens

00:35:57

if I do it again look for

00:36:00

dogs I click on Search search look

00:36:03

the URL has changed as it should be on

00:36:05

google.com your query equals dog and that’s

00:36:08

all because the form can

00:36:11

work with the address thanks to the Get method, but you

00:36:14

still can’t look at our page without tears

00:36:16

so Let’s try something

00:36:18

like this the syntax is called

00:36:21

cascading style sheets example

00:36:23

Let's take it from here and try to

00:36:25

figure out what it is like CSS 0 HTML and

00:36:29

now life is dramatically more complicated Unfortunately,

00:36:32

not everything on the Internet can be done

00:36:34

using HTML. Therefore, in order to beautifully

00:36:37

design your page, you

00:36:38

need to approach the aesthetic side of the issue differently So

00:36:41

in the body of the page I now just have a

00:36:44

div div - this is a division What does it mean? It’s

00:36:47

just a section, it’s similar to a paragraph, but the

00:36:50

semantics of di are not reduced to a paragraph of

00:36:52

ordinary text, seeing the browser understands

00:36:56

that it is a rectangular area of the page and

00:36:58

I plan to do something special with it,

00:37:00

this begins section in the

00:37:02

twenty-first line guess how the

00:37:04

twenty-first line will affect the

00:37:06

content of the entire

00:37:08

page howl in cents align in

00:37:11

the center and that’s it We haven’t yet seen

00:37:13

a way to align the text in the center my

00:37:15

search engine, unlike Google, is all

00:37:17

shifted to the left And in the twenty-first line

00:37:19

I explain the browser that it needs to

00:37:21

create a section on the page, in other words,

00:37:23

place a large invisible rectangle on it,

00:37:24

so I present all the

00:37:26

work to the web page and design it in a

00:37:28

special style inside the quotation marks, you can

00:37:30

see the very second language that

00:37:32

I was talking about cascading table style CSS

00:37:36

fortunately This is also it is not a

00:37:37

programming language, it is limited in

00:37:39

syntax and functionality and does not work

00:37:41

like HTML, which specializes in

00:37:44

creating the markup and structure of a page.

00:37:47

CSS is actually needed at the last stage of

00:37:49

aesthetic design, we are talking about the

00:37:51

size, color and placement of elements on

00:37:54

your web page, key pairs are used here

00:37:56

value to the property text

00:37:59

alignment through a colon we

00:38:00

assign the value in this case to the

00:38:03

center and then look we can

00:38:06

distribute it all I need to

00:38:08

center only the selected

00:38:10

part So I format the data from line

00:38:12

number 21 to the corresponding three

00:38:15

first What if I want to say This is

00:38:17

John Harvard Welcome to my

00:38:19

page all rights belong to John

00:38:22

Harvard I need the first line

00:38:24

to be a huge 36 pixels in size and

00:38:28

I also need to make its letters bold and below

00:38:30

I need smaller text under it even

00:38:34

smaller

00:38:37

Sorry today is a

00:38:40

bad day So how How to achieve this in

00:38:42

line number 22, there is also a built-in or

00:38:45

nested div if you want, there is an

00:38:49

attribute for the style, I indicate the rich

00:38:52

font size and select the bold one, here below the size

00:38:57

is 24 pixels And in line 8 12 and now

00:39:02

Try to look with the human eye and

00:39:04

tell what the text will be

00:39:09

bold Which lines will I highlight in bold

00:39:12

only John Harvard is correct

00:39:15

only in the second line it is written that

00:39:17

this section needs a separate size of

00:39:20

36 and the text will be bold and then we have the

00:39:24

closing final number 24 and then

00:39:28

the browser knows that these properties are not

00:39:31

applied further and Pay attention attention, at least in the

00:39:34

second line there are all these attributes

00:39:36

styles and so on in the twenty-fourth in

00:39:39

the closing tag we indicate only his

00:39:41

name, neither the word style nor anything else, there is

00:39:44

no need to repeat in these quotation marks if I now

00:39:46

open all this in the browser, finally we will see

00:39:49

the result I open the file he It's called

00:39:51

CSS 0, it's still simple, but it's already more

00:39:55

interesting, besides, I have

00:39:58

other possibilities, I risk creating

00:40:00

something monstrous, but I'll still show it to the body

00:40:03

page, I can set the BG criterion or the

00:40:07

background color. What's your favorite color?

00:40:10

By the way, I heard green there. Well, okay.

00:40:15

Reload and here you have the Green page

00:40:18

Well, in my opinion, it’s not bad, but to make it

00:40:20

really cool, I can play with the

00:40:22

text and make it red, which will turn

00:40:24

out like this Looks good

00:40:27

according to you And if you do some magic here below,

00:40:30

suddenly you want to annoy someone

00:40:32

or to deceive After all, you have already deceived them with

00:40:35

Google to borrow its keywords

00:40:38

so overloading

00:40:42

and And where did it go? But where is a

00:40:46

small lyrical digression?

00:40:48

We will discuss this in detail in a couple of

00:40:50

weeks when we get to safety But

00:40:52

if you use keywords, then

00:40:53

it doesn’t matter if they are visible to people or not, Google and the

00:40:55

like can still

00:40:57

recognize them, but in a hurry we

00:40:59

blink some kind of crap. Although my

00:41:01

creations during my studies looked

00:41:02

a little better, I looked for

00:41:05

old versions of my websites before class, but

00:41:07

they turned out to be unimportant; by the way, I

00:41:09

found it right before class, you know, it can be

00:41:12

worse, but this was my personal

00:41:14

page 20 years ago, it seemed to me that there was

00:41:17

nothing wrong if I asked a

00:41:18

person His name before I put it on the

00:41:21

site, and then I showed them something that was

00:41:24

n’t the smartest, I

00:41:26

’ll probably try again next time find but for now Let's

00:41:29

talk about the structure of the code we mentioned the

00:41:31

style these are our pages and everything that I

00:41:33

wrote before from the point of view of style is

00:41:35

quite clear But what about the structure There is

00:41:38

quite a lot of unnecessary stuff on today's page,

00:41:40

look at the color of the text I mentioned

00:41:42

in several places and it is indicated in a couple of places

00:41:44

font size and thickness Yes, and

00:41:46

in general, I’m here

00:41:49

combining HTML with its tags and

00:41:51

attributes and then suddenly I put in

00:41:53

quotes something in another language that

00:41:55

we today defined as CSS And it, as I

00:41:58

said, represents pairs of

00:42:00

value keys or properties separated by a colon C

00:42:02

we we can take part of the code out of brackets

00:42:04

by creating header files. It turns out that

00:42:06

this is also possible in HTML. This is the first step in

00:42:09

this direction. As you can see, this version of

00:42:12

css1 HTML is structurally the

00:42:15

same page, there are also a bunch of sections, but there

00:42:18

is no one more generalizing around them, and the

00:42:22

three sections are the upper middle and

00:42:24

we assigned unique names to the bottom one,

00:42:27

which is good because now we can

00:42:29

refer to

00:42:32

them anywhere now where now scroll

00:42:35

up for now look at what tech we

00:42:37

see at the top of the page Every time we

00:42:39

look at the header who

00:42:42

can say louder so far only the title but

00:42:45

to tell the truth You can put it here and

00:42:47

other useful things, for example, the so-

00:42:49

called style tech, we just

00:42:51

looked at the style attribute, it turns out that

00:42:53

for the style there is a tech, its place is just in

00:42:55

the header, look what I will do inside the

00:42:58

style tag, this is what is happening in the twentieth

00:43:01

line, I literally write the name of the tag

00:43:03

on the style of which I want to work

00:43:05

then I open the curly brace and

00:43:07

close it similar to C but again This is

00:43:10

not a function but a syntax element and then of

00:43:13

course I tell the browser to

00:43:16

place all the text in the body of the page with

00:43:20

center alignment And this part tells the browser that

00:43:23

when it sees an HTML element

00:43:26

or tag with a unique upward pointer,

00:43:30

such a pointer is a hash sign, then

00:43:32

you need to use a bold font of

00:43:35

size thirty-six or Hey browser, and the

00:43:37

element With a pointer has a middle size. The size

00:43:40

should be 24 pixels. And if you see a

00:43:42

bottom pointer, use a twelfth font. As

00:43:45

a result, we should get the same as

00:43:47

before If I’ll open css1, the page

00:43:51

will look the same, but we’re already one step

00:43:54

closer to a successful structure design.

00:43:56

Now I’ll go back to css2 and see

00:43:59

what else I’ve done. Now everything on the page is

00:44:02

very transparent; in fact, the program

00:44:04

fits onto one page. What new tag did

00:44:06

I introduce here?

00:44:08

Tell me the link not the best name for the

00:44:11

tag Because it is not a link in the

00:44:13

usual sense And yet it

00:44:15

refers us to another file It is something like an

00:44:18

insert with include C This is how we in HTML

00:44:21

tell the browser to use the

00:44:23

contents of the css2 CSS file, the similarity for

00:44:27

me between them is that that this is a

00:44:29

style sheet, the actual language is called

00:44:31

CSS, a cascading style sheet, a

00:44:34

style sheet is a regular text file in

00:44:36

which there are a lot of different properties, a set of styles

00:44:39

that can be applied to the page, so here is

00:44:41

the link, apparently to the Second

00:44:44

file if I open css2 CSS to the word I I

00:44:48

just copied and pasted this whole

00:44:49

file, maybe you’ve never

00:44:52

had to do anything like this before, but

00:44:54

try to get into someone’s skin

00:44:56

and guess why such a structure is more successful

00:44:59

So we took the CSS properties out of brackets and placed

00:45:02

them in a separate file Although, as

00:45:04

you remember 5 minutes ago in the first version,

00:45:06

we have already solved this problem, the style of the

00:45:08

page has not become better, but in a

00:45:10

sense, we have corrected the shortcomings of the

00:45:12

code structure. How Yes, it is more flexible In the

00:45:16

sense that it is more flexible, it will be easier

00:45:19

to correct Yes, if you need to

00:45:21

change something, you will only need to make

00:45:22

changes in one place this will come in

00:45:24

handy in the seventh problem book,

00:45:26

where you will need to think over a website for

00:45:27

trading stocks and there will be a lot of pages and

00:45:30

it will be a disaster if at some point

00:45:32

you decide that you don’t like the

00:45:34

font size so much you need to make it twenty-

00:45:35

eighth instead of twenty-fourth you

00:45:37

will have to globally search and replace

00:45:39

values throughout the code or comb

00:45:41

all site files for the sake of one number, but

00:45:43

now having collected all the styles in one place,

00:45:45

you only need to open one

00:45:46

text file in cs50 IDE or some

00:45:49

other program, change and save, and

00:45:51

all adjustments will be made there it is necessary

00:45:53

in a file with the extension it will be the same thing

00:45:57

there are any questions about

00:46:00

the syntax Well, we seem to have done

00:46:03

everything except inserting

00:46:04

the hyperlink directly, for this you need to do

00:46:06

literally this: let’s create another

00:46:09

new file, call it Link HTML and

00:46:12

paste it into today’s code, now open it

00:46:15

bracket docp HTML once we came across it,

00:46:18

look at this inscription at the top Type with a

00:46:21

strange exclamation mark, it

00:46:23

only appears here just remember

00:46:25

this This just means that we

00:46:27

are using HTML version 5 in

00:46:30

older versions of the language it was necessary to

00:46:32

insert longer lines So Here is an

00:46:35

example called Link Link here I

00:46:37

need the body of the page and here hrf

00:46:40

equals say http

00:46:43

www.disney.com

00:46:46

let's say this is my favorite site So here is a

00:46:51

completely harmless site convenient for

00:46:53

users if you open the list of

00:46:55

directories and in it Link HTML then we

00:46:58

will see hypertext Actually this is where the

00:47:01

letter H in http comes from hypertext transfer protocol

00:47:04

text is needed to transmit

00:47:07

text that contains hyperlinks to

00:47:09

other resources, here is the good old

00:47:11

familiar blue link, clicking on

00:47:14

which will take me to the

00:47:16

Disney website about look at what will be released soon

00:47:19

So what do you need to take out of all this

00:47:23

when you understand how it is here the world

00:47:26

is becoming scarier, but it is clearer and

00:47:28

there is a feeling that you can completely

00:47:31

protect yourself in the sense that

00:47:34

probably all of you have been sent such spam

00:47:36

by email, and sometimes it happens that it

00:47:38

leaks into your inbox where someone

00:47:41

asks you to change your password or even

00:47:43

confirm your email details

00:47:45

wallet Well, or something else like that, and

00:47:48

let’s say you receive a letter

00:47:50

asking you to follow the link and Change

00:47:54

the password for yours,

00:47:57

and if there is not a good-natured person here, but

00:48:00

something like that, don’t go there

00:48:03

Reboot Remember behind this text, there

00:48:06

may be something whatever Although in essence These are

00:48:09

just words, why don’t I do

00:48:12

something completely insidious, for example write a

00:48:19

PayPal address

00:48:22

click to

00:48:24

change the

00:48:26

password reboot Looks quite

00:48:29

plausible That’s right Although I certainly

00:48:32

wouldn’t open a letter in which there is

00:48:33

nothing else, but Pay attention

00:48:36

to this division is written here

00:48:39

www.paypal.com and also with this S We

00:48:43

know for sure that the link is safe now we

00:48:46

have paypal.com

00:48:48

https if you haven’t done this before then

00:48:51

get used to checking these little

00:48:52

links here on the screen are not very

00:48:55

visible Yes and not here it’s not much simpler,

00:48:57

but look in the corner below, the browser itself

00:48:59

tells you that in fact it

00:49:01

sends you to an unknown place instead of the

00:49:03

wallet website. So, what

00:49:05

have we done here? We wrote all our today’s examples

00:49:07

manually and using

00:49:09

accurate static data in general, the Internet

00:49:11

becomes a deadly boring place

00:49:13

When you create pages with such

00:49:14

unchanging content Of course, all our

00:49:16

favorite resources, be it Gmail Twitter

00:49:18

or Facebook And any others are dynamic,

00:49:21

they change depending on the

00:49:22

data entered by the user, just like

00:49:24

search results in Google that on Wednesday we

00:49:28

said goodbye to you that we

00:49:30

have learned all this and will move on to the introduction to a new

00:49:32

programming language called

00:49:33

PHP, as it will allow us to create

00:49:36

programs that themselves

00:49:37

produce output data, and we will

00:49:39

learn to create

00:49:41

dynamic web pages using PHP. Details in

00:49:43

this environment, see

00:49:45

you translated and voiced by studio

00:49:48

vert dire commissioned by Java

00:49:54

Rush

00:49:57

don't let Stop don't let Stop

00:50:00

[music]

00:50:06

Let don't

00:50:08

let

00:50:11

[music]

00:50:24

Make

00:50:28

[music]

00:50:53

[music]

00:50:54

H

00:51:07

[music]

00:51:18

[music]

00:51:24

-

00:51:34

Here

00:51:41

[music]

00:51:50

[ music]

00:51:54

Now

00:51:56

[music]

00:52:04

[music]

00:52:24

give

00:52:31

[music]

00:52:38

[music]

00:52:54

per

00:52:57

E

Description:

Доп. материалы и задачи к лекции - https://javarush.com/quests/lectures?quest=QUEST_HARVARD_CS50&level=7 Весь курс CS50 - https://javarush.com/quests/QUEST_HARVARD_CS50 14-я лекция легендарного гарвардского курса по основам программирования CS50 (введение в программирование) познакомит вас с HTML и работой web-сервера (Apache). Также в ходе лекции мы посмотрим, как реализована загрузка главной страницы Facebook и многое другое. В следующей лекции мы закончим с изучением HTML и CSS, после чего перейдем к изучению PHP =)

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.