Лабораторные работы (практикум) по HTML, CSS, PHP, MySQL. Материал разработан специально для ресурса www.studentam-in.ru на котором Вы можете найти бесплатные учебные материалы и получить качественные образовательные услуги: китайский и английский перевод; репетиторство; заказ курсовых, контрольных; создание презентации, баннера, контента, сайта и многое другое.
Лабораторные работы (практикум) по HTML, CSS, PHP, MySQL. Материал разработан специально для ресурса www.studentam-in.ru на котором Вы можете найти бесплатные учебные материалы и получить качественные образовательные услуги: китайский и английский перевод; репетиторство; заказ курсовых, контрольных; создание презентации, баннера, контента, сайта и многое другое.
Что такое CSS?
Что такое каскадность?
Как подключаются стили?
Блочная модель.
Правила и селекторы.
Наследование правил CSS.
Как вычисляется вес правил?
Кроссбраузерность.
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
Web-программирование
Лекция #3. Введение в языки разметки web-страниц
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Лекция 5. MapReduce в Hadoop (алгоритмы)Technopark
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Лекция 3. Распределённая файловая система HDFSTechnopark
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
Лекция 1. Введение в Big Data и MapReduceTechnopark
Техносфера Mail.ru Group, МГУ им. М.В. Ломоносова.
Курс "Методы распределенной обработки больших объемов данных в Hadoop"
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9rPxMIgPri9YnOpvyDAL9HD
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"Technopark
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №10 "Нереляционное решение в области баз данных — NoSQL". Лектор - Станислав Ступников.
Вводная часть посвящена определению и истории развития концепции NoSQL. Даются характеристики, рассказывается о способах использования. Рассматриваются виды NoSQL БД, теоретические основы NoSQL, а в конце лекции обсуждаются недостатки NoSQL-решений, а также проводится сравнение разных NoSQL-решений.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...Technopark
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №10 "Нереляционное решение в области баз данных — NoSQL". Лектор - Станислав Ступников.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №9 "Безопасность баз данных". Лектор - Павел Щербинин.
Открывается лекция рассказом о резервном копировании (о логических и физических резервных копиях, о выборе данных для копирования). Затем определяется терминология для обсуждения дальнейших вопросов. После этого рассматриваются основы учётных записей: таблицы доступа, привилегии, виды записей. Обсуждаются SQL-injection, список смежных вершин (Adjacency Set), вложенное множество (Nested Set), материализованный путь (Materialized Path) и комбинированный подход.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
СУБД 2013 Лекция №8 "Конфигурирование базы данных"Technopark
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №8 "Конфигурирование базы данных". Лектор - Павел Щербинин.
Сначала объясняются основы конфигурирования и общие принципы настройки. Далее рассказывается об области видимости, о настройке использования памяти, обсуждается размер блока ключей key_cache_block_size. Рассматривается устройство и использование кэша InnoDB, а также кэшей потоков и таблиц. Затем говорится об особенностях ввода/вывода в InnoDB. Далее рассказывается о табличном пространстве, оптимизации файловой сортировки, переменных состояния. Финальная часть лекции посвящена репликации: настройка, синхронизация, топология, планирование пропускной способности, администрирование и обслуживание, проблемы и их решения.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"Technopark
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №7 "Оптимизация запросов и индексирование". Лектор - Павел Щербинин.
Вначале рассказывается об оптимизации доступа к данным, о декомпозиции соединения и состоянии запроса. Далее идёт большой блок, посвящённый оптимизатору запросов (изменение порядка соединения, применение алгебраических правил эквивалентности, оптимизации COUNT(), MIN(), MAX(), вычисление и свертка константных выражений, покрывающие индексы, оптимизация подзапросов, раннее завершение, сравнение по списку IN() и распространение равенства). Затем последовательно рассматриваются такие вещи, как соединение (JOIN) в MySQL, оптимизатор сортировки, коррелированные подзапросы, слияние и непоследовательный просмотр индексов, функции SELECT & UPDATE, COUNT(). После этого рассказывается об оптимизации запросов с помощью JOIN, GROUP BY, DISTINCT и LIMIT со смещением. В конце лекции даётся информация о кэшировании запросов, объединённых таблицах и секционировании.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №5 "Определение узких мест". Лектор - Павел Щербинин.
Вначале рассказывается о подсистемах хранения: MyISAM, InnoDB, Memory, о критериях выбора подсистем хранения, приводятся практические примеры. Затем обсуждается тема индексирования (B-tree, хеш-индексы) и EXPLAIN (столбцы id, table, possible_keys, key, key_len).
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
Технопарк Mail.ru Group, МГТУ им. Н.Э. Баумана. Курс "Базы данных".
Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-запросы". Лектор - Павел Щербинин.
Лекция открывается рассказом о том, что такое профилирование запроса, каковы его этапы выполнения в MySQL. Рассказывается о том, как планировать запрос, как осуществляется протоколирование запросов, как собирается статистика. Объясняются основы индексирования, подробно обсуждаются стратегии индексирования для достижения высокой производительности: изоляция столбца, кластерные индексы (преимущества и недостатки), размещение данных в MyISAM и InnoDB, покрывающие индексы. Далее затрагивается тема нормализации и денормализации, а также таблиц счётчиков. В завершении рассказывается о версионировании схемы БД: о методах инкрементных изменений, идемпотентных изменений, уподобления структуры БД исходному коду.
Видео лекции курса https://www.youtube.com/playlist?list=PLrCZzMib1e9obOz5K695ugYuiOOCBciEi
2. 1986 – SGML. Логическое описание структуры
1989 – 1991 – Тим Бернерс Ли создал HTML.
Для тех. документации. Без мультимедиа.
Война браузеров. HTML 1.0 так и не создали.
1994 – Создание W3C.
1995 – HTML 2.0 объявлен как стандарт.
1997 – HTML 4.0
1999 – HTML 4.01
Сейчас – HTML 5
5. Вольности HTML
1) Произвольный регистр: <BR> == <br>
2) Атрибуты без скобок: color=red
3) Сокращенные атрибуты: disabled
4) Непарные тэги: <p> вместо <p></p>
5) Перестановки тэгов: <b><i></b></i>
6. XHTML
1) только нижний регистр тэгов
2) атрибуты со скобоками: color=”red”
3) атрибуты – без сокращений:
disabled=”disabled”
4) Тэги всегда парные: <p></p>
5) Строгая вложенность: <i><b></b></i>
6) id вместо name
7) Необходим DOCTYPE
7. DOCTYPE
Определяет тип разметки содержимого – DTD.
Влияет на отображение страницы браузером.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
8. DOCTYPE
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 5.0
<!DOCTYPE html>
10. Тэги заголовков
<title> - отображается в заголовке окна.
<meta> - информация для user-agentов.
<meta name="description" content="Сайт об HTML
и создании сайтов">
<meta name="generator" content="WordPress3.3.1"
/>
… либо замена HTTP заголовков
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
11. Блочные тэги
<h1> - <h6> - различные уровни заголовков
<p> - разбиение текста на параграфы
<hr> - горизонтальная линия
<pre> - блок преформатированного кода,
например исходный код программы
<blockquote> - цитирование длинного блока
текста
<div> - абстрактный блочный контейнер
17. Ссылки в HTML
Ссылки:
<a href=”URL” target=”blank” rel=”nofollow”>
<img src=”nice.jpg”>
</a>
Поведение браузера зависит от протокола URL.
http(s), ftp – переход по ссылке
mailto – запуск почтовой программы
javascript – запуст JS скрипта, указанного в URL
Якоря: <a name=”chapter1”>Глава 1</a>
18. Формы в HTML
<form method=”post” action=”/add/”
enctype="multipart/form-data”>
<input name=”image” type=”file”>
<input name=”id” type=”hidden” value=”3”>
<input name=”nick” type=”text”>
<input type=”submit” value=”Отправить”>
<button>Все равно отправить</button>
</form>
19. Элементы управления
<input> - текстовое поле, checkbox, radiobutton,
скрытое поле, ввод пароля, кнопка отпраки.
<select>, <option> - выпадающий селектор,
множественный выбор
<textarea> - многострочное текстовое поле.
21. CSS - Cascading Style Sheets
Как описать оформление страницы ?
1) XML – логическая разметка данных
2) HTML – набор тэгов + семантика +
минимальные возможности стилизации
3) <em>, <strong>, <font> - неудобно.
Решение
Отделить оформление от структуры –
использовать отдельный язык для стилей.
22. Основы синтаксиса
/* some real css */
.mid-play {padding:13px 0px 0px 13px;}
p.inner-play a {color:#3c3c3c; text-decoration:
underline; }
.big-top {background-
image:url(/img/pc/220_130_top.gif);}
/* комментарии */
cелектор { имя_стиля1: значение1;
имя_стиля2: значение2; … }
23. Какие бывают стили ?
width, height – размеры элемента
margin, padding – границы и отступы
display, visibility – режим отображения
top, left, right, bottom – расположение
Background – фон элемента
font – управление шрифтом
text-align – выравнивание текста
И т.д: http://htmlbook.ru/css
24. Базовые селекторы
1) Универсальный селектор
* { margin: 0px; padding: 0px; border: 0px; }
2) Имена тэгов
p { margin-top: 10px; }
3) Имена классов (с точки)
.btn { border: solid 1px gray; }
4) id тэгов
#userpic { padding: 10px }
26. Псевдоклассы
a:visited – посещенная ссылка
a:link – непосещенная ссылка
div:hover – элемент при наведении мыши
input:focus – элемент при полчении фокуса
li:first-child – выбирает первого потомка среди
множества элементов
* One
* Two
* Three
28. Наследование
Перенос стилей на вложенные элементы
body { color: darkgray; font-family: Arial; }
p { font-size: 110% }
<body>
<p> Привет, <a href=”/”>Мир</a> </p>
</body>
Не все стили наследуются !
29. Где могут быть определы стили?
1) Стили браузера
2) Стили пользователя
3) Стили автора
3.1) Во внешнем файле
<link rel="stylesheet" href="/style.css" />
3.2) В html документе
<style></style>
3.3) Встроенные в элемент
<div style=”display: none”></div>
30. Приоритеты стилей (автора)
1) Специфичность – вычисление баллов
id – 100
классы и псевдоклассы – 10
тэги и псевдо элеметы – 1
ul.info ol + li → 13 баллов
li.red.level → 21 балл
2) Встроенный стиль: специфичность = 1000
3) Расположение в коде: послдений стиль
4) .inone { display: none !important }
31. Типы элементов. display
1) display: none – элемент невидим, не занимает места (vs
visibility: hidden)
2) display: block – элемент занимает максимальную ширину,
начинается с новой строки, учитывает width, height. div,
h1-h6, p – блочные.
3) display: inline – элемент занимает минимальную ширину, и
не прерывает строку, игнорирует width, height. span, img,
a – строчные.
4) display: table-cell – как ячейка таблицы: в строку,
игнорирует margin, учитывает width, height, разрешает
vertical-align.
35. position
1) static – обычное расположение
2) absolute – относительно начала документа
(страницы)
3) fixed – относительно окна браузера
4) relative – относительно родительского
элемента (который должен быть
relative/absolute)
top/right/bottom/left – отступы, могут быть
отрицательными