Frontend Разработка
Автор
Почему я это делаю?
О чем курс?
Как все устроено?
Верстает? Это как?
Требования к верстке
Основы разметки HTML
HTML
Тэги
Парные теги
С чего начинается страница?
А проще можно?
Кодировка
Основные теги
Форматирование текста
Гиперссылки
Форматирование страницы
Графические элементы
 На небе только и разговоров, что о море и о закате…
Таблицы
Формы
Валидация страницы
HTML Validator для браузера Firefox
Инструменты разработки
Соглашение о кодировании
Структура проекта
Оценки
7.32M
Категория: ИнтернетИнтернет

Frontend. Разработка

1. Frontend Разработка

Лекция 1
Сокольников Алексей | 2016

2. Автор

Волгатех, ПС [2009 – 2014]
Разработчик сайтов гостиниц [2011-2012]
Full Stack разработчик iSpring Cloud, iSpring Learn [с 2012]
Аспирант кафедры ИВС [с 2014]
Сокольников Алексей | 2016

3. Почему я это делаю?

• Я хочу работать в команде с профессионалами
• Мощнее команда – интереснее задачи
• Личное развитие
3/46
Сокольников Алексей | 2016

4. О чем курс?

• HTML, CSS
• JavaScript
• HTML5 & CSS3
• Bootstrap 3
• JQuery
• Angular JS
4/46
Сокольников Алексей | 2016

5. Как все устроено?

• Web-дизайнер делает макет
• Frontend-разработчик верстает страничку
• Backend-разработчик реализует серверную
часть
Сокольников Алексей | 2016

6. Верстает? Это как?

• Что такое верстка веб-страниц?
• Чем отличается от полиграфической?
• В чем интерес?
Сокольников Алексей | 2016

7. Требования к верстке

• Попиксельное соответствие
• Кросс-браузерность
• Адаптивность
Сокольников Алексей | 2016

8. Основы разметки HTML

• Введение HTML
• Что такое теги?
• Стандарты, DOCTYPE, кодировки
• Основные теги
• Форматирование кода
8/46
Сокольников Алексей | 2016

9. HTML

• Автор: Тим Бернерс-Ли 1986г.
• Браузеры
• Теговый язык
9/46
Сокольников Алексей | 2016

10. Тэги

<тег атрибут1="значение" атрибут2="значение“/>
<тег атрибут1="значение" атрибут2="значение">...</тег>
Сокольников Алексей | 2016

11. Парные теги

11/46

12. С чего начинается страница?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN "
"http://www.w3.org/TR/html4/strict.dtd">
Сокольников Алексей | 2016

13. А проще можно?

<!DOCTYPE html>
Сокольников Алексей | 2016

14.

14/46

15. Кодировка

<head>
<meta charset="utf-8">
<title>Проставлять кодировки очень важно!</title>
</head>
Сокольников Алексей | 2016

16. Основные теги

<html></html>
<head></head>
<body></body>
Сокольников Алексей | 2016

17.

<!DOCTYPE HTML>
<html>
<head>
<title>Тег BODY</title>
<meta charset="utf-8">
</head>
<body>
<p>Я изучил тег Body, но не знаю P</p>
</body>
</html>
17/46

18. Форматирование текста

<h1></h1>
<b></b>
<i></i>
Сокольников Алексей | 2016

19. Гиперссылки

<a href="vk.com"
title="Вконтакте">...</a>
Сокольников Алексей | 2016

20. Форматирование страницы

<p></p>
<ol></ol>
<ul></ul>
<li></li>
<div></div>
Сокольников Алексей | 2016

21.

<!DOCTYPE HTML>
<html>
<head>
<title>Тег P</title>
<meta charset="utf-8">
</head>
<body>
<p>Я изучил тег P</p>
</body>
</html>
21/46

22.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>Почистить зубы</li>
<li>Умыться</li>
<li>Выучить HTML</li>
</ol>
</body>
</html>
22/46

23.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег UL</title>
</head>
<body>
<ul>
<li>Кто проживает на дне океана?</li>
<li>Мокрая губка, малыш без изъяна</li>
</ul>
</body>
</html>
23/46

24.

<div></div>
Сокольников Алексей | 2016

25. Графические элементы

<img src="sea.jpg" alt="Мое Море“ />
Сокольников Алексей | 2016

26.  На небе только и разговоров, что о море и о закате…

На небе только и разговоров, что о море и о
закате…
26/46

27. Таблицы

<table></table>
<tr></tr>
<td></td>
<th></th>
Сокольников Алексей | 2016

28.

<table>
<tr>
<th>Заголовок</th>
</tr>
<tr>
<td>Ячейка</td>
</tr>
</table>
28/46

29. Формы

<form></form>
<input/>
<textarea></textarea>
<select></select>
Сокольников Алексей | 2016

30.

30/46

31.

<form action="URL"> ... </form>
31/46

32.

<input type="button|checkbox|file|hidden|image |
password|radio|reset|submit|text“/>
32/46

33.

33/46

34.

Вопросы?

35. Валидация страницы

• http://validator.w3.org
• HTML Validator для браузера Firefox
Сокольников Алексей | 2016

36.

36/46

37.

37/46

38.

39. HTML Validator для браузера Firefox

40. Инструменты разработки

• Notepad ++
• Adobe Photoshop, Gimp
• Расширения: Pixel Perfect, Gridify
Сокольников Алексей | 2016

41.

41/46

42.

42/46

43. Соглашение о кодировании

• Именование файлов
• Соглашения по HTML
• Соглашения по CSS
43/46

44. Структура проекта

44/46

45. Оценки

• Каждая лабораторная 10 баллов
• Коэффициенты: 1.2, 1.0, 0.8, 0.6
• 90%, 75%, 60%
45/46

46.

Вопросы?
English     Русский Правила