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

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

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

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

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

Канал: loftblog

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

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

Канал: JavaRush

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

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

Канал: JavaRush

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

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

Канал: JavaRush

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

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

Канал: loftblog

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

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

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

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

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

Канал: JavaRush

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

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

Канал: JavaRush

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

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

Канал: loftblog

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

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

Канал: JavaRush

cs50

cs50 на русском

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

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

14 лекция cs50

html

css

facebook

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

Week 7

00:00:02

[музыка]

00:00:11

[музыка]

00:00:18

Добро пожаловать в Гарвард на курс

00:00:22

[музыка]

00:00:24

cs50 Добро пожаловать это CS и мы

00:00:28

начинаем занятий если помните в

00:00:31

четвёртом задачнике был квест И вам

00:00:34

обещали отличные призы Если вы сможете

00:00:36

восстановить фотографии команды cs50

00:00:39

которая работает тут и в Нью хевене а

00:00:41

затем найти самих компьютерщиков Чем

00:00:43

больше тем лучше многие прислали

00:00:45

результаты и я решил что сейчас их вам

00:00:47

покажу А потом мы всё это разместим в

00:00:50

сети но мне хотелось бы обратить Ваше

00:00:53

внимание Вот на кого во-первых это Сэм

00:00:55

который на многих фоточка скажем так

00:00:57

позировал а Сегодня утром мы определили

00:01:00

лидера и это некта Кен который собрал на

00:01:03

фотографиях аж 24 компьютерщика а то и

00:01:06

больше если посчитать групповые фото Вот

00:01:10

здесь например Кен вместе с Мэри в Нью

00:01:12

хевене меж тем случай довольно

00:01:14

интересный кажется у нас такое впервые

00:01:17

Выяснилось что мне раньше не приходило в

00:01:20

голову отметить в задачнике что члены

00:01:22

нашей команды не могут претендовать на

00:01:24

призы А ведь Кен на самом деле один из

00:01:27

наших штатных фотографов а е кстати

00:01:30

говоря он мне сразу написал чтобы я

00:01:32

никуда не выкладывал эти фотографии как

00:01:35

По мне так это Потому что некоторые из

00:01:37

его фоток выглядят примерно так и тому

00:01:40

подобное Хотя Кен Конечно хотел бы чтобы

00:01:43

я его похвалил и рассказал какой он

00:01:45

профессионал своего дела И что Он даже

00:01:47

умеет делать фотографии с нормальным

00:01:49

фокусом и команду он тоже снимал но

00:01:52

хватит про Кена его мы отметили теперь

00:01:55

посмотрим на студентов которые прислали

00:01:57

свои фотографии Итак сегодня утром мы

00:02:00

было решили что победил Ленс с

00:02:03

пятнадцатью

00:02:04

фотографиями Вот например Ленс с колтон

00:02:07

сказом со мной с сэмом но совсем недавно

00:02:11

где-то 11:1 Я обнаружил ещё одно письмо

00:02:15

на конкурс от Бонни и там было написано

00:02:19

вот

00:02:20

что не буду врать Шлю вам письмо во

00:02:24

время занятий она прикрепила 14

00:02:28

фотографий на одну меньше чем НС но на

00:02:32

фотографиях Бони как выяснилось было по

00:02:35

несколько сотрудников cs50 без сама не

00:02:37

обошлось Так что мы решили поделить

00:02:39

победу между лесом и Бонни кроме

00:02:42

выделенного места на дропбокс которое мы

00:02:44

предоставим всем участникам для них и их

00:02:46

товарищей мы на грядущей неделе

00:02:48

организуем особый обед НС Бони мы вам

00:02:52

отдельно обо всём этом расскажем

00:02:54

Поздравляю с победой для остальных

00:02:56

напоминаю что в пятницу у нас общий обед

00:02:58

для курса CS в кембридже и Нью хевене

00:03:01

детали на сайте курса в соответствующем

00:03:03

разделе А теперь ближе к учёбе пара слов

00:03:06

о наших семинарах приближается момент

00:03:09

когда вам пора будет задуматься об

00:03:10

итоговом проекте более того Уже совсем

00:03:13

скоро Вам надо будет поделиться своими

00:03:15

первыми идеями по этому поводу по сути у

00:03:18

вас появится возможность вкратце

00:03:19

представить консультанту свою задумку

00:03:21

которую вы хотели бы воплотить в

00:03:23

итоговом проекте многие студенты

00:03:25

склоняются к проектам которые можно

00:03:26

реализовать в сети мы с вами Всего

00:03:28

неделю ими

00:03:30

и толком е не углуб в веб

00:03:31

программирование В общем не волнуйтесь

00:03:33

пока Если вдруг у вас вообще нет никаких

00:03:35

мыслей по этому поводу сама беседа с

00:03:37

консультантом может подтолкнуть вас к

00:03:39

идеям которые вы вместе и Обсудите А

00:03:41

чтобы помочь Вам и с идеями и в конечном

00:03:43

счёте с проектами CS по традиции

00:03:46

проводят специальные семинары там вы

00:03:48

сможете на выбор в виде лекции или

00:03:50

семинарского занятия познакомиться с

00:03:51

темами которые не входят в основной курс

00:03:54

но оказываются очень полезными в

00:03:55

подготовке финального проекта А вот

00:03:58

список разного ро сериало которые

00:04:00

команда CS разработала на этот год по

00:04:03

программированию для iOS Андройда для

00:04:05

разработки компьютерных игр разные

00:04:07

набора инструментов языков и технологий

00:04:09

Так что не забывайте заглядывать на сайт

00:04:11

cs50 А если Вы уже решили что вас

00:04:14

интересует то зарегистрируйтесь на сайте

00:04:16

в нужном разделе А мы потом разберёмся с

00:04:18

расписанием по дням местам и прочему

00:04:20

почти все занятия будут с трансляциями

00:04:22

Так что останутся записи на случае если

00:04:24

у вас не получится прийти А нам пора

00:04:27

переходить к лекции в прошлый раз Мы

00:04:29

закончили

00:04:30

если помните это своего рода сообщение в

00:04:32

виртуальном конверте которое передаётся

00:04:34

от одного роутера к другому между

00:04:36

браузером И веб-сервера вообще это

00:04:38

сообщение выглядело примерно так

00:04:41

довольно мудрёно сообщение которое

00:04:43

находится внутри конверта на листе

00:04:45

бумаги и в его первой строчке написано

00:04:48

буквально А Давайте проверим вашу память

00:04:50

Что означает СШ что он делает когда мы

00:04:54

отправляем запрос

00:04:56

сайту

00:04:58

по ког Заходите на сайт Вы ведь несете

00:05:02

целиком имя файла а просто вводите

00:05:03

facebook.com а потом жм Enter или

00:05:05

gmail.com Enter и так далее Что же

00:05:07

означает СШ Какой файл или Если точнее

00:05:13

страницу Да индекс дефолт ную страницу

00:05:16

если вы не

00:05:21

уточняемые или К папке входящее в почте

00:05:24

или к стартовый с новостями на сайте CNN

00:05:27

и так далее а сервер в ответ выт нечто

00:05:29

подобное Что значит что он понимает http

00:05:32

версии 11200 это код состояния который

00:05:35

мы едва ли когда-нибудь видим потому что

00:05:37

он говорит о том что всё работает запрос

00:05:39

принят и правильно обработан что до типа

00:05:42

содержимого такие ответы обычные но не

00:05:44

всегда приходят в форме текста это

00:05:46

касается в частности HTML о котором мы

00:05:48

сегодня и будем говорить сейчас я

00:05:50

собственно открою браузер я использую

00:05:53

Chrome но вы можете выбрать любой из них

00:05:55

хотя рекомендую всё-таки Chrome потому

00:05:57

что он очень удобен для разработчиков по

00:06:00

в нём много встроенных инструментов

00:06:01

которые упрощают работу с HTML и CSS Мы

00:06:04

про них сегодня как раз поговорим да и с

00:06:06

другими языками тоже Итак Я открываю

00:06:09

сначала нажимаю Ctrl левая или просто

00:06:11

правая кнопка мыши где-нибудь на

00:06:12

странице открываю просмотр кода элемента

00:06:15

сейчас немного поменяю настройки экрана

00:06:19

и передвинули Итак это режим просмотра

00:06:22

кода в Хроме своего рода встроенный

00:06:23

инструмент для отладки если пользуетесь

00:06:25

хромом у вас такой тоже есть с его

00:06:27

помощью можно увидеть как устро

00:06:29

страница изнутри давайте-ка так и

00:06:33

сделаем тут больше характеристик чем нам

00:06:36

сегодня нужно Посмотрите вот на эти

00:06:38

вкладки элементы сеть исходники Тайлан

00:06:41

ещё какие-то пока давайте-ка нажмём на

00:06:43

сеть Пожалуй на первый взгляд тут

00:06:45

перебор информации Так что если

00:06:47

Разрешите я её немного

00:06:51

упрощать Лок Я как-то случайно обнаружил

00:06:55

эту функцию она сохраняет всё что

00:06:57

происходило в браузере а теперь зайдём

00:07:00

на

00:07:02

http2

00:07:03

facebook.com Давайте уж и ww напишем

00:07:07

Enter Ну что ж по этому адресу многие из

00:07:11

вас заходили в Facebook первый в списке

00:07:13

А внизу Смотрите сколько всего произошло

00:07:16

оказывается Когда Вы заходите на

00:07:19

facebook.com вы отправляете не один http

00:07:22

запрос на самом деле при переходе на

00:07:24

Facebook разлетается 41 конверт в каждом

00:07:27

из которых отдельный запрос это всё

00:07:30

отражено тут за кулисами внизу экрана

00:07:33

видите мой браузер отправил 41

00:07:37

запрос он перекинул 861 КБ и почему-то

00:07:41

вдруг загрузка всей этой красоты заняла

00:07:44

аж 8 секунд для Фейсбука это надо

00:07:47

сказать довольно долго Но сейчас так уж

00:07:49

вышло А меня пока интересует разве что

00:07:52

наиболее частый запрос Так что давайте

00:07:54

этим сейчас и займёмся минутку

00:07:58

сориентируюсь

00:08:01

вот что нам нужно так что же я сделал

00:08:03

там слева тут вообще много чего

00:08:05

происходит но я выделил facebook.com А

00:08:07

теперь смотрите мотаю вниз ещё

00:08:10

Промальп сы заголовков Как видите chome

00:08:14

показывает мне по существу содержания

00:08:16

того запроса который я сделал формат

00:08:18

немного другой но вы можете заметить

00:08:20

знакомый нам Get ещё Посмотрите тут есть

00:08:22

хост facebook.com ть он же СШ файл

00:08:25

который я запросил если я прота обратно

00:08:28

наверх то мы увидим то Facebook вернул

00:08:30

мне собственно все заголовки так вот

00:08:32

внутри нашего виртуального конверта на

00:08:34

самом деле очень много пар ключ значения

00:08:36

слово двоеточие затем значение слово

00:08:38

двоеточие и значение это заголовки нам

00:08:41

пока нужно гораздо меньше меньше деталей

00:08:44

чем здесь указано Давайте посмотрим на

00:08:46

предпоследнюю строку вот тут сервер

00:08:48

Фейсбука действительно сообщает нам что

00:08:51

содержит текст

00:08:52

HTML получается что когда вы отправляете

00:08:55

запрос серверу на веб-страницу через

00:08:57

браузер сервер Ким конвертом внутри

00:09:00

которого текст или HTML Что обозначает

00:09:03

язык гипертекстовой разметки и это ещё

00:09:06

один язык о котором мы сегодня поговорим

00:09:09

люди и компьютеры используют его чтобы

00:09:11

создавать веб-страницы Давайте посмотрим

00:09:13

вернёмся на сайт facebook.com нажимаю на

00:09:16

Ctrl и левую кнопку Или просто правую

00:09:19

кнопку мыши А потом посмотреть Исходный

00:09:21

код страницы если вдруг вы используете

00:09:24

не Chrome то Internet Explorer Firefox

00:09:26

или Safari позволяют тоже самое просто

00:09:28

пункты могут называться по-другому А это

00:09:31

HTML код который написали Марк с

00:09:32

коллегами из Фейсбука в целом в этом

00:09:35

коде содержится та синие с белым

00:09:37

страница которую мы с вами видели минуту

00:09:39

назад кажется немного сложновато но

00:09:41

слева наверху мы с вами можем заметить

00:09:43

повторяющиеся элементы тут много

00:09:45

открытых угловых скобок и ключевое слово

00:09:48

HTML вот Одна из таких скобок и шапка

00:09:51

страницы сейчас я промотай вниз ещ и ещё

00:09:55

ниже чтобы показать вам ещ кое-что вот

00:09:58

тут справо видите фрагмент с открытой

00:10:01

ломаной скобкой и телом страницы в

00:10:03

прошлый раз если помните мы условились

00:10:05

что самая простая веб-страница которую

00:10:07

можно написать выглядит примерно так

00:10:09

открывающий тег HTML открывающий тег

00:10:12

шапки заголовка закрывающий тег

00:10:14

заголовка шапки открывающий тег тело

00:10:16

страницы текст закрыть тело закрыть HTML

00:10:19

Притормози на секунду этот код особенно

00:10:22

если вы никогда с ним не работали и не

00:10:24

очень понимаете что это всё такое

00:10:26

кажется приличным очень аккуратным

00:10:27

стилистически он неприятен много

00:10:30

отступов и белого пространства в коде

00:10:32

для Фейсбука всё не так так что же

00:10:34

Ребята в Фейсбуке пишут хуже чем

00:10:36

я но судя по всему за стили единиц из

00:10:41

пяти у них есть причина вынуждающая их

00:10:44

так халтурить хотят чтобы его было

00:10:46

просто читать они не хотят чтобы вам

00:10:48

было проще прочитать их код В каком-то

00:10:50

смысле Они специально его уродуют и

00:10:52

запутываются как минимум визуально чтобы

00:10:54

Myspace или ещ кто не решил содрать по

00:10:57

их стартовой страницы но при помо Хрома

00:11:00

или какой-нибудь программы мы можем

00:11:02

быстро ВС почистить Так что причина не

00:11:04

совсем в этом а в ЧМ Да промежутки это

00:11:08

данные да белые промежутки тоже данные и

00:11:11

что же

00:11:12

дальше данных больше то

00:11:16

компью да именно если много раз нажать

00:11:19

на клавишу табуляции или пробел то что

00:11:21

произойдет каждая клавиша переда данные

00:11:23

размером минимум в о

00:11:25

байт иго

00:11:27

тя в коде стартовой страницы Фейсбука

00:11:31

что получится у Фейсбука много

00:11:33

пользователей предположим что сегодня на

00:11:35

сайт соцсети зашли миллиард человек а

00:11:38

кто-то из разработчиков просто один раз

00:11:40

нажал на пробел лишний байт при

00:11:43

миллиарде запросов Насколько больше

00:11:45

данных Фейсбуку придётся отправлять

00:11:46

из-за того что кто-то поставил Один

00:11:49

лишний

00:11:51

пробел миллиард ФБУ придётся отправить

00:11:54

на миллиард байт или 1 гиб больше данных

00:11:57

изза просто такж нажа кем-то пробел один

00:12:00

пробел а если бы мы сейчас всё это

00:12:02

разнесли по строчкам оставили больше

00:12:03

белого пространства значков табуляции и

00:12:06

пробелов то потратили бы гигабайты а то

00:12:08

и терабайты места из-за этого при

00:12:10

разработке веб-страниц принято сжимать

00:12:12

код в объёме мы потом рассмотрим как это

00:12:15

делается А сегодня начнём писать код

00:12:17

который люди кстати могут легко читать

00:12:20

между тем мы сейчас снова откроем в

00:12:22

Хроме просмотр кода элемента в тот раз

00:12:24

мы зашли на вкладку сеть А если зайти во

00:12:28

вкладку

00:12:29

то можно увидеть ленью версию того же

00:12:31

HTML кода от Хрома вот он уже не такой

00:12:35

страшный совсем другое дело же теперь

00:12:38

уже можно понажимал

00:12:44

программу которая называется Text Edit

00:12:47

если помните это очень простая текстовая

00:12:49

программа примерно аналог Windows bln а

00:12:53

теперь напечатаю буквально следующее тип

00:12:55

документа HTML начальный г HTML конечный

00:12:59

тег HTML тут у нас шапка страницы

00:13:02

закрываем шапку страницы а заголовок

00:13:05

будет привет мир а тут внизу у нас тело

00:13:08

страницы закрываем тело

00:13:10

страницы

00:13:12

потом вот здесь привет мир чудесно вот

00:13:16

мы молниеносно написали веб-страницу

00:13:18

сохраню её у себя на рабочем столе как

00:13:20

Hello HTML мой Macbook возмутиться что я

00:13:23

не хочу сохранять текст как текстовый

00:13:24

файл переспроси не обозначит ли его к

00:13:27

Нет я настаиваю на HTML что удобно

00:13:29

теперь я просто двойным кликом на Привет

00:13:31

мир HTML открываю свою веб-страницу К

00:13:34

сожалению из 7 млрд людей на планете

00:13:37

зайти на страницу могу только я А почему

00:13:39

так

00:13:40

вышло Так она есть только на этом

00:13:43

макбуке Да так что сайт бесполезен ведь

00:13:45

ни один человек в аудитории Не говоря

00:13:47

уже об интернете зайти туда не может

00:13:49

Поэтому сегодня нам нужно ввести ещё

00:13:51

один элемент для этого я захожу на Cloud

00:13:54

это очевидный сервис предоставляющий

00:13:56

облако для нашего курса Благодаря ему у

00:13:58

нас У нас есть рабочее пространство

00:13:59

где-то в интернете то есть все наши

00:14:01

файлы доступны для определенной публики

00:14:04

Поехали дальше я сейчас возьму и создам

00:14:07

новый файл nc50

00:14:10

IDE сохраню его под названием Hello HTML

00:14:13

Чтобы не терять времени не буду заново

00:14:15

писать код просто скопирую его сюда и

00:14:18

сохраняю итак у меня есть файл под

00:14:21

названием Hello HTML но как же мне

00:14:23

вс-таки открыть его как веб-страницу

00:14:25

оказывается что в IDE есть не только тин

00:14:29

или отладчика вроде gdb и подобные

00:14:31

программы у нас есть полноценный

00:14:33

веб-сервер иначе говоря у каждого из вас

00:14:35

есть свой собственный сервер а цель

00:14:37

существования веб-сервера обслуживать

00:14:39

веб-страницы получать запросы от

00:14:41

браузеров и отвечать на них виртуальными

00:14:44

письмами с тем что я сейчас написал У

00:14:47

нас с вами есть бесплатный сервер с

00:14:49

открытым исходным кодом открытый код

00:14:52

такой который кто-то написал и по сути

00:14:54

разрешил Нам его просматривать скачивать

00:14:57

и даже изменять этот свободный

00:14:59

веб-сервер называется AP мы его

00:15:01

упростили все СФ IDE и назвали AP 50 и

00:15:05

теперь он умеет понимать следующее я

00:15:08

напишу например AP 50 ста а теперь

00:15:12

поставлю точку и вот мы получаем

00:15:14

какое-то очень мудрёно сообщение которое

00:15:16

требует размещения документа в home у

00:15:18

бунту чтобы это ни было с рабочее

00:15:20

пространство А у нас наконец появляется

00:15:22

веб-сервер AP 2 Если вкратце то я сейчас

00:15:26

нажал на кнопку и запустил веер доум в

00:15:29

интернет через tcp 80 С определённого

00:15:33

адреса А вот здесь в зависимости от

00:15:35

имени пользователя и ещё пары моментов

00:15:38

так вот если я жму

00:15:40

здесь. Harvard и так далее Обратите

00:15:43

внимание последние несколько недель вот

00:15:45

здесь в правом верхнем углу

00:15:47

cs50ide отражалось ваше имя

00:15:51

пользователя всё это время так выглядел

00:15:53

адрес по которому вы можете найти все

00:15:56

свои файлы в

00:15:57

сети но важно Это стало только сейчас

00:16:00

потому что раньше в си вам не нужно было

00:16:03

чтобы ваши программы работали в сети а

00:16:05

сегодня когда мы начинаем писать код для

00:16:07

веб-страниц мы посмотрим как сделать URL

00:16:10

адрес доступным для других пользователей

00:16:13

для начала нажму на этот URL список тут

00:16:15

довольно уродлив перечень файлов

00:16:18

каталога Но какой бросается в глаза

00:16:20

Hello HTML А всё потому что я сохранил

00:16:23

его в рабочей среде и Апачи сказал

00:16:26

искать его где-то в рабочей среде Дэвида

00:16:28

И ещё я разрешил всем желающим видеть

00:16:31

эти файлы и если я теперь нажму на Hello

00:16:34

HTML я увижу во вкладке именно этот файл

00:16:37

заметьте в cloud9 есть ещё кое-что

00:16:39

полезное в cs50 IDE есть вот

00:16:41

неожиданность есть адресная строка Это

00:16:44

потому что хоть мы и используем Chrome

00:16:46

для входа в csf IDE внутри неё у нас

00:16:50

своя собственная версия браузера чтобы

00:16:52

не усложнять лишний раз я сейчас просто

00:16:54

скопирую адрес а теперь возьму и открою

00:16:57

своё но в Google Хроме Итак никакой

00:17:00

магии никакой cs50 IDE я буквально

00:17:03

копирую и Вставляю J Harvard URL и жму

00:17:06

Enter И вот пожалуйста я как и

00:17:08

теоретически Любой человек с доступом к

00:17:10

интернету могу просматривать этот файл

00:17:12

если я дал на это разрешение А теперь

00:17:15

если ввести Hello HTML Вот она моя ни

00:17:18

разу не впечатляющая страница Давайте

00:17:20

проверим себя всё это ведь пока общие

00:17:23

слова сама система Мы ещё не приступили

00:17:25

собственно к написанию кодо

00:17:27

HTML спрашивайте может кому что

00:17:32

непонятно

00:17:35

дати страницы принадлежат CS принадлежат

00:17:39

ли эти страницы cs50 в каком смысле Ну

00:17:42

вот эти файлы все а Хороший вопрос Итак

00:17:45

нам принадлежит cs50.io мы приобрели это

00:17:47

доменное имя А когда вы входите в

00:17:49

систему cs50 IDE то получаете субдомен

00:17:52

скажем

00:17:54

ideon или

00:17:57

IDE S .io это уникальный адрес под нашим

00:18:01

именем домена для удобства в рамках

00:18:04

курса каждый из вас получил

00:18:05

индивидуальный адрес а чтобы упростить

00:18:07

всю эту историю мы приобрели домен более

00:18:10

высокого уровня

00:18:11

cs50.io и все находимся так сказать под

00:18:14

его колпаком через пару недель поговорим

00:18:16

подробнее или когда вам понадобятся

00:18:18

собственные имена доменов под проекты

00:18:21

всё это честно говоря несложно Ладно

00:18:23

теперь идём дальше я снова открываю се

00:18:25

свифте IDE Где сейчас находится мой

00:18:28

леньки файл Hello HTML хочу сделать

00:18:31

кое-что поинтереснее например Давайте

00:18:33

поступим вот так открываю pars HTML Я

00:18:37

подготовил этот файл заранее в начале

00:18:39

как всегда комментарии но в HTML они

00:18:42

выглядят немного иначе строках 3 и 14

00:18:45

можно увидеть синтаксис для начала и

00:18:47

завершения комментария с функциональной

00:18:49

точки зрения неважно что посередине это

00:18:52

просто комментарий Объяснение для

00:18:54

пользователя о том что тут к чему

00:18:56

загадка на внимательность мотая то какой

00:18:59

новый тег мы тут видим пока что мы

00:19:03

видели только открывающий тег HTML теги

00:19:05

шапки заголовка тело А что нового

00:19:07

появилось

00:19:08

да новое пи гпи или тег абзаца параграфа

00:19:13

тут я просто вставил какой-то текст на

00:19:14

латинском для демонстрации Мне нужно

00:19:16

было показать вам как в HTML могут

00:19:18

выглядеть абзацы текста Обратите

00:19:20

внимание начинает выстраивается некая

00:19:22

схема структура так сказать А теперь я

00:19:25

сделаю ещ кое-что Только сначала выключу

00:19:28

а теперь снова его запущу только внутри

00:19:30

нашего сегодняшнего исходного каталога

00:19:32

7м Так у меня будет доступ ко всему что

00:19:34

нужно если вернуться к перечню каталога

00:19:37

мы увидим тут список всех сегодняшних

00:19:39

файлов в следующем задачнике вы получите

00:19:41

руководство как такое делать Вот я

00:19:43

открывая parag HTML и если вы не умеете

00:19:47

ни говорить ни читать на латыне то

00:19:49

вполне можете принять это за язык

00:19:51

программирования Но вообще это три

00:19:53

абзаца текста с разметкой в HTML

00:19:56

Обратите внимание на отступы между ними

00:19:59

Возможно вы инстинктивно догадаетесь по

00:20:01

аналогии с обычным текстом Когда вы

00:20:03

работаете с отступами так чтобы убрать

00:20:06

их в коде достаточно стереть эти строки

00:20:09

а потом сохранить и если перезагрузить

00:20:12

Теперь смотрите Всё как будто слилось в

00:20:15

непрерывный текст HTML не самый

00:20:19

изощрённые делал ровно то что вы

00:20:21

прописали в коде и ничего больше так что

00:20:24

если вы не дали команду начать новый

00:20:26

абзац то вы его и не

00:20:28

на самом деле браузер будет делать Вот

00:20:30

что если даже вы несколько раз нажмёте

00:20:32

Enter а потом ещё и ещё раз чтобы

00:20:34

опустить текст вниз а потом сохраните и

00:20:37

загрузите снова пустое пространство

00:20:39

сожмётся и у вас опять останется отступ

00:20:42

размером в один только символ Итак это

00:20:45

был тег абзаца или г а что же за систему

00:20:48

мы тут обрисовали Похоже что в HTML Мы

00:20:51

везде начинаем с открывающего тега и

00:20:53

заканчиваем закрывающим тегом А что

00:20:56

такое тег это просто часть синтак

00:20:59

скобка открывается ключевое слово скобка

00:21:01

закрывается это и есть г начальный тег А

00:21:04

когда вы высказались в полной мере то

00:21:06

есть дописали абзац делаете ровно

00:21:08

противоположное Хотя в данном случае это

00:21:10

не значит сделать наоборот перед

00:21:12

названием того же тега здесь надо

00:21:13

поставить слш Вот так снова не очень

00:21:17

интересно да и сеть мы этими

00:21:18

манипуляциями более увлекательной не

00:21:20

делаем А как мне сделать эту штуку

00:21:22

побольше и пожирнее для этого в файле

00:21:25

heading HTML меня те H1 H2 H3 4 5 6 и

00:21:31

так далее ничего не понятно да но

00:21:33

давайте я открою одну папку и мы её

00:21:35

рассмотрим заголовки по умолчанию

00:21:38

браузеры предлагают и большой и жирный

00:21:41

шрифт разных размеров H1 большой H6

00:21:44

крошечный остальные между ними уже

00:21:47

интереснее Но это всё равно не тот

00:21:49

интернет который я знаю что если нам

00:21:52

нужно сделать какой-нибудь список вот

00:21:54

маркированный список из трёх домов в

00:21:56

гарварде как он сделан

00:22:00

Давайте глянем на list HTML тут нам

00:22:04

показывают что-то печальное но Давайте

00:22:06

разберёмся из того что вы увидели можно

00:22:08

понять что UL - это неупорядоченный

00:22:10

список не маркированный без номеров

00:22:13

бывает ещё упорядоченный список он

00:22:15

обозначается тегом ol А тут это значит

00:22:19

построить список он автоматически делает

00:22:21

перечнем что вам там надо И опять

00:22:24

отступы и пробелы - Это только для меня

00:22:27

браузеру но есть они или нет но если вы

00:22:30

даже слепили всё воедино напомню это

00:22:32

необязательно Но если бы вы сделали так

00:22:35

браузер вас всё равно бы понял теперь

00:22:37

нажму перезагрузку в браузере нажимаю и

00:22:40

снова ничего не происходит потому что он

00:22:43

делает только то что я ему сказал Ладно

00:22:45

так вот это всё просто текст Давайте

00:22:48

займёмся чем-нибудь поинтересней сейчас

00:22:50

Я

00:22:52

позаимствовал кода а потом перейду сюда

00:22:55

и создам новый Файлик Давайте назовём

00:23:01

мы с вами безобразно часто в этом году

00:23:04

припоминая не знаю даже это выходит само

00:23:07

собой но порой зашкаливает Ну и отлично

00:23:11

открою Google картинки и

00:23:16

снова если не знаете о чём речь

00:23:19

почитайте в Википедии про рикроллинг

00:23:21

Каждый раз когда нажимаете на ссылку

00:23:24

кто-то где-то

00:23:26

сме выберем картинку и откроем её Итак

00:23:30

вот фото из Google картинок и

00:23:32

предположим что эта картинка разошлась

00:23:34

по всему интернету это в свою очередь

00:23:36

значит что я вполне могу использовать её

00:23:38

на своей странице поэтому я беру и

00:23:40

копирую её URL теперь вернусь в Cloud де

00:23:44

и посмотрю что я могу сделать перед нами

00:23:46

обычная веб-страница это Рик ой Рик

00:23:52

Эли возвращаюсь в свой

00:23:54

браузер

00:23:56

перезагрузка любопытно Где же Рик

00:23:59

посмотрю что стряслось Так давайте вести

00:24:01

себя будто ничего не

00:24:03

произошло Вставляю сюда сейчас к этому

00:24:06

вернёмся Итак вот файлик. HTML Это

00:24:09

конечно не Рик Эли но вообще-то мы можем

00:24:12

сюда его

00:24:13

добавить вот он Рик эстли теперь Даю

00:24:16

команду показать мне изображение адрес

00:24:18

которого я скопировал кажется это

00:24:20

поздравление с днём рождения или что там

00:24:23

А теперь вот таким образом закрываю

00:24:26

тегли получилось объяснение но Обратите

00:24:29

внимание Я просто открыл скобку картинка

00:24:32

исходник и его атрибут URL тут длинный

00:24:36

Но в самом конце надо отметить Вот что я

00:24:39

поставил слэш и закрыл скобку вместо

00:24:41

того чтобы как обычно открыть скобку слш

00:24:45

картинка потом закрыть скобку Почему

00:24:48

Попробуйте угадать даже если совсем не

00:24:51

знакомы с

00:24:54

HTML Да она стоит в конце команды Почему

00:24:58

такой способ не кажется логичным Почему

00:25:00

не кажется что можно например закрыть

00:25:02

изображение ага Потому что в него ничего

00:25:05

неста Да если подумать не очень логично

00:25:08

начать изображение а потом закончить его

00:25:11

картинка либо есть либо нет нет смысла

00:25:13

оставлять место для чего-то внутри

00:25:15

картинки по правде это и невозможно Так

00:25:17

что синтаксис в этом случае сведётся к

00:25:19

тому чтобы поставить в открывающей или

00:25:22

начальном теге слш а затем

00:25:24

сохранить если теперь я перезагружу файл

00:25:28

то мы увидим уже Вполне себе результат А

00:25:30

ещё можно было добить пользователей

00:25:33

добавив сюда ссылку на YouTube кстати

00:25:35

Каждый раз когда вы переходили на

00:25:37

YouTube А давайте-ка я Кроль по доброй

00:25:40

воле крол Ну крол сейчас

00:25:46

перейду что ж кому-то это понравилось и

00:25:49

смотрите если вы решите поделиться

00:25:51

ссылкой то вот адрес который можно

00:25:54

вставить в Имей в копию жёсткого диска

00:25:56

задачник или слайд А теперь если я нажму

00:26:00

на прикрепить Вы наверное заметили эту

00:26:02

кнопку Мне нужно скопировать ссылку и

00:26:04

чтобы было лучше видно Вставляю её в

00:26:06

свой текстовый редактор именно это и

00:26:08

советовал кстати YouTube Так что если вы

00:26:10

зашли на YouTube и нашли видео которое

00:26:12

хотите вставить на свой страницу Вот как

00:26:14

это делается А вот ещё один тег для HTML

00:26:18

iframe или встроенный Фрей выглядит

00:26:20

посложнее чем остальные Дело в том что

00:26:23

тег изображение и iframe могут иметь так

00:26:25

называемые атрибуты

00:26:28

это ещё один элемент синтаксиса в HTML

00:26:31

кроме имени тега и его скобочек Вы

00:26:33

можете определить его свойства атрибуты

00:26:36

и так заставить его что-то делать

00:26:38

каждому атрибуту присваивается значение

00:26:41

приведу пример на Ютюбе мы можем выбрать

00:26:43

ширину видео в 420 пикселей и высоту в

00:26:47

315 Вот так это выглядит в HTML в

00:26:50

исходном коде указано вот эта длинная

00:26:52

ссылка на видео ещё тут есть граница

00:26:55

фрейма равная нулю то есть по всей

00:26:57

видимости границы вокруг него нет

00:26:59

разрешить полноэкранный режим видимо

00:27:01

значит что есть кнопка разворачивающийся

00:27:05

добавить Пафос моему файлу

00:27:08

rtl то я уберу отсюда картинку и вставлю

00:27:12

вот что

00:27:14

перезагружаю и вот смотрите

00:27:19

снова так Ну пожалуй хватит обещаю

00:27:21

Постараюсь больше это не включать Что ж

00:27:24

что полезного мы узнали да страница на

00:27:27

для примера были отвратные но сам HTML

00:27:30

совсем не сложен Это не язык

00:27:31

программирования в нём нет функций в нём

00:27:33

нет циклов и условий в нём нет всё что в

00:27:35

нём есть с десяток разных тегов с

00:27:37

атрибутами и без них что собственно

00:27:39

Здорово в HTML его вполне можно

00:27:42

осваивать своими силами если захочется

00:27:44

только надо понять общие принципы его

00:27:46

работы Что такое тег Что такое атрибут

00:27:49

как в конце концов с их помощью создать

00:27:51

веб-страницу всё остальное результат

00:27:53

изучения разных материалов по теме

00:27:55

поиска каких-то решений в Гугле или как

00:27:57

Вы видели просмотр исходных кодов

00:27:59

Фейсбука сайтов которые вам нравятся и

00:28:01

попыток разобраться как создатели

00:28:03

страниц добились нужного результата и

00:28:05

так мы можем вставлять картинки

00:28:07

собственно Мы только что это и делали

00:28:09

или Вот давайте покажу Это пример кода

00:28:11

если вам вдруг захочется увидеть

00:28:13

сердитого котика здесь у нас может быть

00:28:14

г картинки над ним комментарий и есть

00:28:17

ещё один вариант для тех кто из-за

00:28:19

зрения использует экранного диктора

00:28:21

скрин ридер может прочитать вам вслух

00:28:23

грампи слепому человеку который не видит

00:28:25

ни экран ни картинку компьютер може

00:28:27

словами сообщить что здесь изображено

00:28:29

источник этого файла

00:28:31

cjp Если бы я хотел сделать всё

00:28:33

по-умному то мог Вот как поступить

00:28:36

больше никакого рели обещаю будем вместо

00:28:39

него гуглить котиков открываю я Google

00:28:42

картинки и вот скажем изображение с моим

00:28:44

котом если я нажму Ctrl и левую или

00:28:47

просто правую кнопку мыши Грозный

00:28:50

какой сохраню Cat jp у себя на рабочем

00:28:54

столе теперь открою снова Cloud

00:28:59

Обратите внимание Я могу загружать сюда

00:29:01

локальные файлы теперь беру фа jp можно

00:29:05

просто перетащить его в Cloud 9 и вот

00:29:08

сейчас он начнёт возмущаться потому что

00:29:10

у нас уже был фа Cat jp но ничего

00:29:13

сложного в том чтобы взять картинку из

00:29:15

Фейсбука или фото хостинга какого и

00:29:17

перетащить её в Cloud 9 и также просто

00:29:20

поместить её на ваш личный сайт или

00:29:22

использовать в седьмом или восьмом

00:29:23

задачнике всё разберём и если вы решите

00:29:26

Взглянуть на кота Скажем разместил я Ту

00:29:29

самую фоточку то будет милашка всё-таки

00:29:32

увидите вы в итоге примерно такую

00:29:34

мордашку и так файлы на которые вы

00:29:36

ссылается на веб-странице могут быть

00:29:38

расположены на вашем аккаунте или на

00:29:40

любом другом сервере что мы и видели на

00:29:42

примере

00:29:43

Рика а где же ещё точнее что ещё тут

00:29:47

можно делать Давайте вот как знаете что

00:29:50

было бы неплохо все наши веб-страницы

00:29:52

пока были очень статины немного разм ску

00:29:56

я сейчас делаю свою собственную

00:29:57

поисковую машину чтобы создать свой

00:30:00

поиск мне придется заняться вот чем для

00:30:02

начала создам новый файл под названием

00:30:05

sech HTML у нас выложена заготовка Ой не

00:30:10

вставляйте ничего в окно терминала Итак

00:30:12

заготовка У нас есть онлайн Пора

00:30:14

приступать к делу и начну я вот с чего

00:30:17

начало файла под названием Search HTML

00:30:19

сохраню его в сегодняшнем исходном

00:30:21

каталоге

00:30:23

назову Хотя давайте сделаем лучшем

00:30:28

наш продукт теперь выберем например H1

00:30:31

CS Search а потом H2 Не

00:30:34

пропустите ну-ка вспомним Что такое H1 и

00:30:40

H2 Да большой жирный и не такой большой

00:30:43

но тоже жирный сейчас сохраню перейду

00:30:46

вот сюда и Давайте глянем на фай Search

00:30:51

HTML хорошо и теперь он

00:30:56

прямо

00:30:57

Так где тут

00:31:00

Что

00:31:02

стоп Дэвид

00:31:06

запутался А вот оно Дэвид затупил Ладно

00:31:10

Итак вот оно cs50 Search Не пропустите А

00:31:13

теперь Давайте вспомним что было на

00:31:15

прошлой неделе мы говорили о более

00:31:16

низком уровне механики http А тут у нас

00:31:19

HTML который по сути всего лишь язык

00:31:21

разметки То есть вы говорите браузеру

00:31:23

что делать и Можете даже собрать свой

00:31:25

поисковый движок вместо простого нашего

00:31:27

поисковика я покажу что делать с тегом

00:31:29

формы хочу нечто похожее на поле для

00:31:32

ввода данных это поле для данных надо

00:31:35

как-то назвать пусть будет Q задам тип

00:31:37

входных данных например текст в кавычках

00:31:40

поле для текста - это просто ячейка куда

00:31:42

вводят слова Так что пока в само это

00:31:45

поле нам вводить ничего не надо поэтому

00:31:47

я просто закрываю тег при помощи косой

00:31:50

черты в самом теге и снова тег inp

00:31:55

присвоил ему значение сабмит запросить

00:31:59

этот тег тоже закрываем теперь вернусь

00:32:01

сюда Как видите пока Получилось не очень

00:32:04

красиво но начало странички для поиска

00:32:06

успешно положено Хотя Давайте уберём

00:32:09

отсюда всякий мусор оказывается для тега

00:32:11

inp можно добавить ещё один атрибут

00:32:14

placeholder инструкция для заполнения к

00:32:16

примеру ключевое слово или точнее запрос

00:32:20

Вот видите причём едва Я начинаю

00:32:22

печатать серый текст исчезает Да вы

00:32:25

такое в сети уже видели

00:32:27

кнопка запросить мне тоже не по душе так

00:32:30

что присвою есть значение sech поиск

00:32:33

перезагружаю и вот Моя кнопка называется

00:32:36

поиск ещё мне пожалуй не очень нравится

00:32:38

логотип Так что откроем Google генератор

00:32:41

шрифта попробуем сделать поинтересней

00:32:44

собственно лого для cs50 sech кажется

00:32:47

Неплохо а теперь сохраним

00:32:50

как в чём

00:32:54

дело и что тут теперь

00:32:58

так Ага пропустил сохранить

00:33:01

как тупой

00:33:03

браузер сейчас возьмём и раз и навсегда

00:33:06

это исправим А блин Вот уже

00:33:11

лучше Итак Извините не мой день так

00:33:16

вроде миленько выйти из полного экрана А

00:33:19

теперь что и требовалось сохранить

00:33:21

картинку

00:33:22

logg теперь захожу в хватаю лоти его в

00:33:27

сегодняшний исходный каталог такой файл

00:33:29

уже существует Ну и ладно тогда тот

00:33:31

удалим Раз уж так а ещ вот здесь не

00:33:34

забыть поменять идём сюда и указываем

00:33:37

что исходник изображения у нас логов

00:33:40

закрываем А теперь обратно на страницу

00:33:42

поиска смотрится

00:33:45

неплохо Однако ничего полезного пока не

00:33:47

получилось Давайте попробуем поискать

00:33:49

кота нашей программ кой

00:33:53

кошки чрт она так просто не заработает

00:33:55

ВиДи хватает важного даже если вы не

00:33:59

сталкивались никогда с HTML очевидно что

00:34:02

после того как мы создали окно для ввода

00:34:04

текста разрешили вводить данные и

00:34:06

отправлять запрос чего-то не

00:34:09

хватает если мы всё же хотим чтобы поиск

00:34:11

работал

00:34:16

корректно Что нужно

00:34:18

сделать нам необходимо внутренняя база

00:34:21

данных или сама поисковая машина и вот

00:34:24

на это честно говоря уходит очень много

00:34:26

времени помните снова прошлую лекцию

00:34:28

Если вы заранее отключили мгновенный

00:34:31

поиск и ищете что-нибудь в Гугле то как

00:34:33

это происходит Давайте отключу у нас

00:34:36

будет как будто старая версия браузера и

00:34:38

поищу наконец котиков или ещё что

00:34:41

помните как будет выглядеть ur он

00:34:43

кажется мудрёный но здесь прячутся слш

00:34:46

поиск вопросительный знак Q равно коты и

00:34:49

по идее мне система должна выдать уйму

00:34:51

результатов А знаете что я сделаю я на

00:34:54

минуточку позам весь Google вернусь сюда

00:34:57

и добавлю тегу м атрибут Action то есть

00:35:01

действие или направление А тут напишу

00:35:03

буквально Google и провернуть всё это

00:35:05

можно методом Get что же такое экшн

00:35:09

название не самое удачное но действие на

00:35:11

самом деле указывает на своего

00:35:12

исполнителя то есть в случае с моим

00:35:14

поиском откуда будут браться результаты

00:35:17

если я вернусь к своей форме перезагружу

00:35:19

веб-страницу А теперь Введу в поиск

00:35:21

например

00:35:22

собаки смотрите Я использовал Google

00:35:25

если ре что-нибудь другое Не собак А

00:35:28

скажем

00:35:30

кошек тоже всё получится как из

00:35:36

cs50 наверное снова не так весело как

00:35:38

хотелось бы да но зато

00:35:40

работает Ну что же при этом происходит Я

00:35:43

по сути при помощи HTML научил свой

00:35:45

браузер получать входные данные и

00:35:47

отправлять их на удалённый сервер через

00:35:50

http мой браузер понимает http а потому

00:35:53

составляет URL Так что в итоге я

00:35:55

оказываюсь где надо смотрите Что будет

00:35:57

если я снова буду искать

00:36:00

собак нажимаю на Search поиск смотрите

00:36:03

URL поменялся как и должно быть на

00:36:05

google.com спои запрос равно собака а

00:36:08

всё потому что форма умеет благодаря

00:36:11

методу Get работать с адресом но на

00:36:14

нашей странице всё равно без слёз не

00:36:16

взглянешь так что Давайте попробуем ещё

00:36:18

вот такой синтаксис его называют

00:36:21

каскадным таблицами стилей пример

00:36:23

Давайте возьмём отсюда и попробуем

00:36:25

разобраться что тут как это CSS 0 HTML и

00:36:29

сейчас жизнь резко усложни К сожалению в

00:36:32

сети далеко не всё можно сделать

00:36:34

используя о HTML Поэтому чтобы красиво

00:36:37

оформить свою страницу к эстетической

00:36:38

стороне вопроса надо подойти иначе Итак

00:36:41

в теле странице у меня сейчас просто

00:36:44

div div - это division Что обозначает

00:36:47

просто раздел он похож на абзац но

00:36:50

семантика ди не сводится к абзацу

00:36:52

обычного текста видя браузер понимает

00:36:56

что она прямоугольная область страницы и

00:36:58

я планирую сделать с ней что-то

00:37:00

особенное начинается этот раздел в

00:37:02

двадцать первой строке угадайте как

00:37:04

повлияет двадцать первая строчка на

00:37:06

содержание всей

00:37:08

страницы выть по цент выровнять по

00:37:11

центру и всё Мы пока ещё не видели

00:37:13

способа выровнять текст по центру моя

00:37:15

поисковая машина в отличие от Гугла вся

00:37:17

смещена влево А в двадцать первой строке

00:37:19

я объясняю браузеру что ему нужно

00:37:21

создать раздел на странице иначе говоря

00:37:23

разместить на ней большой невидимый

00:37:24

прямоугольник так я представляю се

00:37:26

работу веб-странице и оформить её в

00:37:28

особом стиле внутри кавычек можно

00:37:30

увидеть тот самый второй язык о котором

00:37:32

я говорил каскадные таблица стиле CSS к

00:37:36

счастью Это тоже не язык

00:37:37

программирования он ограничен в

00:37:39

синтаксисе и в функционале и работает не

00:37:41

так как HTML который специализируется на

00:37:44

создании разметки и структуры страницы

00:37:47

CSS собственно нужен на последнем этапе

00:37:49

эстетического оформления тут речь идт о

00:37:51

размере цвете и размещении элементов на

00:37:54

вашей веб-странице тут используются пары

00:37:56

ключ значение свойству текст

00:37:59

выравнивание через двоеточие мы

00:38:00

присваиваем значение в данном случае по

00:38:03

центру а потом смотрите мы можем

00:38:06

распределить это всё мне нужно

00:38:08

расположить по центру только выделенную

00:38:10

часть Так что оформляю данные со строки

00:38:12

номер 21 и до соответствующей ей три

00:38:15

первой А что если я захочу сказать Это

00:38:17

Джон Гарвард Добро пожаловать на мою

00:38:19

страницу все права принадлежат Джону

00:38:22

Гарвард Мне нужно чтобы первая строка

00:38:24

была огромной 36 пикселей разме и ещё

00:38:28

мне надо сделать её буквы жирными а ниже

00:38:30

мне нужен текст поменьше под ним ещё

00:38:34

мельче

00:38:37

Извините день сегодня какой-то

00:38:40

провальный Итак как же этого добиться в

00:38:42

строке номер 22 тоже есть встроенный или

00:38:45

вложенный если хотите див тут есть свой

00:38:49

атрибут для стиля указываю рише размер

00:38:52

шрифта и выбираю жирный тут ниже размер

00:38:57

в 24 пикселя А в 8 строке 12 а теперь

00:39:02

Попробуйте глянуть человеческим глазом и

00:39:04

сказать какой текст будет

00:39:09

жирным Какие строки я выделю жирным

00:39:12

шрифтом только Джон Гарвард правильно

00:39:15

только в д второй строке написано что

00:39:17

этот раздел отдельный размер ему нужен

00:39:20

36 а текст будет жирный а дальше у нас

00:39:24

закрывающий конечный ке номер 24 и тут

00:39:28

браузер знает что дальше эти свойства не

00:39:31

применяются и Обратите внимание хоть в

00:39:34

ть второй строки и есть все эти атрибуты

00:39:36

стили и прочее в двадцать четвёртой в

00:39:39

закрывающей теге мы указываем только его

00:39:41

имя ни слово стиль ни прочее повторять

00:39:44

не надо в этих кавычках если я теперь

00:39:46

открою всё это в браузере наконец увидим

00:39:49

результат открываю файл он называется

00:39:51

CSS 0 пока всё ещё простенько но уже

00:39:55

интереснее к тому же у меня есть и

00:39:58

другие возможности рискую сотворить

00:40:00

нечто чудовищное но всё же покажу теле

00:40:03

странице я могу задать критерий BG или

00:40:06

цвет

00:40:07

фона Какой у вас любимый цвет

00:40:10

Кстати я там слышал зелёный Ну ладно

00:40:13

Итак

00:40:15

Перезагрузи и вот вам Зелёная страница

00:40:18

Ну что ж по-моему неплохо но чтобы стало

00:40:20

совсем уж Здорово я могу поиграть с

00:40:22

текстом и сделать его красным что

00:40:24

получится вот Хорошо смотрится как

00:40:27

по-вашему А если поколдовать тут внизу

00:40:30

вдруг вам захочется кого-нибудь позлить

00:40:32

или обмануть Ведь вы уже обманули их с

00:40:35

Гуглом позаимствовать его ключевые слова

00:40:38

так перегружая

00:40:42

и И куда же она делась А вот куда вот

00:40:46

так небольшое лирическое отступление

00:40:48

подробно будем обсуждать это через пару

00:40:50

недель когда дойдём до безопасности Но

00:40:52

если вы задействует ключевые слова то

00:40:53

неважно видны они людям или нет Google и

00:40:55

подоб ему всё равно могут их

00:40:57

распознавать но на скорую руку мы с

00:40:59

моргани какую-то гадость Хотя мои

00:41:01

творения во время учёбы выглядели

00:41:02

немногим лучше я искал перед занятием

00:41:05

старые версии своих веб-сайтов но

00:41:07

получались они неважным одну Я кстати

00:41:09

нашёл прямо перед занятием знаете бывает

00:41:12

и хуже Но вот Это была моя личная

00:41:14

страница 20 лет назад мне казалось

00:41:17

Ничего такого если я выс прошу у

00:41:18

человека Его имя прежде чем пущу на

00:41:21

сайт а потом я им показывал что-нибудь

00:41:24

не самое умное наверное к следующему

00:41:26

разу попробую ещё найти но пока Давайте

00:41:29

поговорим о структуре кода мы упомянули

00:41:31

стиль это наши страницы и всё что я

00:41:33

написал до этого с точки зрения стиля

00:41:35

довольно Понятно Но что насчёт структуры

00:41:38

В сегодняшней странице довольно много

00:41:40

лишнего смотрите цвет текста я упоминал

00:41:42

в нескольких местах также в паре мест

00:41:44

указан размер шрифта и толщина Да и

00:41:46

вообще я тут

00:41:49

объединяющую HTML с его тегами и

00:41:51

атрибутами а потом внезапно втисс в

00:41:53

кавычки что-то на другом языке который

00:41:55

мы сегодня определили как CSS А он как я

00:41:58

говорил представляет собой пары ключ

00:42:00

значений или свойство через двоеточие C

00:42:02

мы можем выносить часть кода за скобки

00:42:04

создавая заголовочные файлы Оказывается

00:42:06

это возможно и в HTML Вот первый шаг в

00:42:09

этом направлении Как видите это версия

00:42:12

css1 HTML представляет собой структурно

00:42:15

ту же страницу тут тоже куча разделов но

00:42:18

ещё одного обобщающего вокруг них нет а

00:42:22

трём разделам верхнему среднему и

00:42:24

нижнему мы присвоили уникальные имена

00:42:27

что неплохо потому что теперь мы можем в

00:42:29

любом месте ссылаться на

00:42:32

них где сейчас промотай

00:42:35

вверх пока что посмотрите какой тек мы

00:42:37

видим вверху страницы Каждый раз когда

00:42:39

смотрим на шапку кто

00:42:42

скажет погромче пока только заголовок но

00:42:45

по правде сказать Сюда можно вынести и

00:42:47

другие полезные вещи например так

00:42:49

называемый тек стиля только что мы

00:42:51

рассматривали атрибут стиля оказывается

00:42:53

для стиля есть тек его место как раз в

00:42:55

шапке смотрите что я буду делать внутри

00:42:58

тега стиля творится вот что в двадцатой

00:43:01

строке я буквально пишу название тега

00:43:03

над стилем которого хочу поработать

00:43:05

затем открываю фигурную скобку и

00:43:07

закрываю её похоже на C но опять же Это

00:43:10

не функция а элемент синтаксиса а затем

00:43:13

я конечно говорю браузеру чтобы он в

00:43:16

теле страницы располагал весь текст с

00:43:18

выравниванием по

00:43:20

центру А эта часть сообщает браузеру что

00:43:23

когда он видит элемент HTML

00:43:26

или тег с уникальным указателем вверх

00:43:30

указателем таким служит знак решётка то

00:43:32

нужно применить жирный шрифт тридцать

00:43:35

шестого размера или Эй браузер а у

00:43:37

элемента С указателем середина Размер

00:43:40

должен быть 24 пикселя А если видишь

00:43:42

указатель низ применяй двенадцатый В

00:43:45

итоге у нас должно получиться то же что

00:43:47

и раньше Если я открою css1 страница

00:43:51

будет выглядеть так же но мы уже на шаг

00:43:54

ближе к удачному дизайну структуры

00:43:56

теперь перейду обратно в css2 и посмотрю

00:43:59

что я ещё натворил теперь на странице

00:44:02

всё очень прозрачно по сути программка

00:44:04

влезает на одну страницу Какой новый тег

00:44:06

я тут ввёл

00:44:08

Подскажите ссылка не лучшее название для

00:44:11

тега Потому что это не ссылка в

00:44:13

привычном нам смысле И всё же он нас

00:44:15

отсылает к другому файлу Это нечто вроде

00:44:18

вставки с include C Так мы в HTML

00:44:21

сообщаем браузеру что нужно использовать

00:44:23

содержимое файла css2 CSS сходство для

00:44:27

меня между ними в том что это таблица

00:44:29

стилей собственно язык так и называется

00:44:31

CSS каскадная таблица стилей таблица

00:44:34

стилей - это обычный текстовый файл в

00:44:36

котором уйма разных свойств набор стилей

00:44:39

которые можно применить к странице так

00:44:41

Вот ссылка это Судя по всему на Второй

00:44:44

файл если я открою css2 CSS к слову Я

00:44:48

всего лишь скопировал и вставил всё это

00:44:49

файл может вам никогда Ещё не

00:44:52

приходилось ничем подобным заниматься но

00:44:54

Попробуйте влезть в шкуру ком

00:44:56

и догадаться чем такая структура удачнее

00:44:59

Итак мы вынесли за скобки свойства CSS

00:45:02

поместили их в отдельный файл Хотя как

00:45:04

вы помните 5 минут назад в первой версии

00:45:06

мы уже решили эту проблему стиль

00:45:08

страницы лучше не стал но В каком-то

00:45:10

смысле мы исправили недостатки структуры

00:45:12

кода Каким образом Да он более гибкий В

00:45:16

смысле более гибкий его так будет проще

00:45:19

исправлять Да если понадобится что-то

00:45:21

поменять Вам нужно будет вносить

00:45:22

изменения только в одном месте это

00:45:24

пригодится в седьмом задачнике

00:45:26

там нужно будет продумать сайт для

00:45:27

торговли акциями и страниц будет много и

00:45:30

это же катастрофа если в какой-то момент

00:45:32

вы решите что вам не так уж и нравится

00:45:34

размер шрифта надо сделать двадцать

00:45:35

восьмое вместо двадцать четвёртого вам

00:45:37

придётся глобально искать и заменять

00:45:39

значения во всём коде или прочесывать

00:45:41

все файлы сайта ради одной цифры но

00:45:43

теперь собрав все стили в одном месте

00:45:45

Вам и нужно-то только открыть один

00:45:46

текстовый файл в cs50 IDE или какой

00:45:49

другой программе изменить и сохранить и

00:45:51

все корректировки будут внесены где надо

00:45:53

в файле с расширением буде тоже самое

00:45:57

есть какие-нибудь вопросы по

00:46:00

синтаксису Ну что ж Мы вроде бы сделали

00:46:03

Всё кроме вставки непосредственно

00:46:04

гиперссылки для этого нужно делать

00:46:06

буквально вот что создадим ещё один

00:46:09

новый файл назову его Link HTML и

00:46:12

вставлю в сегодняшний код теперь открою

00:46:15

скобку docp HTML раз наткнулись то

00:46:18

Гляньте это надпись наверху Type со

00:46:21

странным восклицательным знаком он

00:46:23

встречается только тут просто запомните

00:46:25

так Это всего лишь означает что мы

00:46:27

используем HTML пятой версии в более

00:46:30

старых версиях языка нужно было

00:46:32

вставлять более длинные строки Итак Вот

00:46:35

пример под названием Link Ссылка тут мне

00:46:37

понадобится тело страницы а тут hrf

00:46:40

равно скажем http

00:46:43

www.disney.com

00:46:46

допустим это мой любимый сайт Итак вот

00:46:51

вполне безобидный удобный для

00:46:53

пользователей сайт если открыть список

00:46:55

директорий а в нём Link HTML то мы

00:46:58

увидим гипертекст Собственно отсюда и

00:47:01

взялась буква H в http протокол передачи

00:47:04

гипертекста текст нужен чтобы передавать

00:47:07

текст в котором есть гиперссылки на

00:47:09

другие ресурсы вот старые добрые всем

00:47:11

знакомая голубая ссылка нажатием на

00:47:14

которую я перейду на сайт

00:47:16

Диснея о смотрите что скоро выйдет на

00:47:19

экраны Итак что же нужно из всего этого

00:47:23

вынести когда понимаешь как это вотт мир

00:47:26

становится страшнее Зато яснее и

00:47:28

появляется ощущение что Вполне можешь

00:47:31

сам себя защитить в том смысле что

00:47:34

вероятно всем вам присылали такой спам

00:47:36

по электронной почте а порой бывает что

00:47:38

и во входящее просочится где кто-нибудь

00:47:41

просит Вас сменить пароль а то и

00:47:43

подтвердить данные вашего электронного

00:47:45

кошелька Ну или ещё что-то в этом роде и

00:47:48

вот допустим получаете вы письмо с

00:47:50

просьбой перейдите по ссылке и Поменяйте

00:47:54

пароль для шего

00:47:57

и вот если тут не добродушный ко а

00:48:00

что-нибудь вроде не ходи туда ко

00:48:03

Перезагрузи Помните за этим текстом

00:48:06

может быть что угодно Хотя по сути Это

00:48:09

просто слова почему бы мне не сделать

00:48:12

что-то совсем коварное например написать

00:48:15

адрес

00:48:19

PayPal

00:48:22

нажмите чтобы

00:48:24

поменять

00:48:26

пароль перезагрузка Выглядит вполне

00:48:29

правдоподобно Так ведь Хотя я-то конечно

00:48:32

не стал бы открывать письмо в котором

00:48:33

больше ничего нет но Обратите внимание

00:48:36

на это разделение тут написано

00:48:39

www.paypal.com а ещё вот с этой S Мы

00:48:43

точно знаем что ссылка безопасная теперь

00:48:46

у нас paypal.com

00:48:48

https если вы раньше так не делали то

00:48:51

привыкайте проверять вот эти маленькие

00:48:52

ссылочки тут на экране не очень хорошо

00:48:55

видно Да и не тут это не намного проще

00:48:57

но смотрите внизу в уголочке браузер сам

00:48:59

вам подсказывает что на самом деле вас

00:49:01

отправляет непонятно куда вместо сайта

00:49:03

кошелька Так и что же мы с вами тут

00:49:05

натворили все наши сегодняшние примеры

00:49:07

мы писали вручную и с использованием

00:49:09

точных статичных данных вообще интернет

00:49:11

становится убийственно скучным местом

00:49:13

Когда вы создаёте страницы с таким

00:49:14

неизменным содержанием Конечно все наши

00:49:16

любимые ресурсы будь то Gmail Twitter

00:49:18

или Facebook Да и любые другие динамичны

00:49:21

они меняются в зависимости от введённых

00:49:22

пользователем данных прямо как

00:49:24

результаты поиска в Гугле что в среду мы

00:49:28

распрощался с вами что мы это всё

00:49:30

усвоили и перейдём к введению в новый

00:49:32

язык программирования который называется

00:49:33

PHP как и он позволит нам создавать

00:49:36

программы которые сами по себе

00:49:37

вырабатывают выходные данные и будем мы

00:49:39

с вами учиться при помощи PHP создавать

00:49:41

динамические веб-страницы Подробности в

00:49:43

эту среду до

00:49:45

встречи переведено и озвучено студией

00:49:48

vert дайр по заказу Java

00:49:54

Rush

00:49:57

don't let Stop don't let Stop

00:50:00

[музыка]

00:50:06

Let don't

00:50:08

let

00:50:11

[музыка]

00:50:24

Make

00:50:28

[музыка]

00:50:53

[музыка]

00:50:54

H

00:51:07

[музыка]

00:51:18

[музыка]

00:51:24

-

00:51:34

Here

00:51:41

[музыка]

00:51:50

[музыка]

00:51:54

Now

00:51:56

[музыка]

00:52:04

[музыка]

00:52:24

дай

00:52:31

[музыка]

00:52:38

[музыка]

00:52:54

per

00:52:57

E

Описание:

Доп. материалы и задачи к лекции - 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 =)

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

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

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

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

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

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

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

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

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "14. CS50 на русском: Лекция #14 [Гарвард, Основы программирования, осень 2015 год]"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

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

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.