1 лекция

1. Проектирование и разработка веб-приложений

Преподаватель Королёв Владимир Олегович

2.

В программировании есть три
направления разработки
Frontend
Backend
Fullstack

3. Backend - разработчик

Занимается той частью кода, которую
не видно. Он работает с логикой программы
и информацией, которую сохраняют
пользователи, и делает так, что всё это
сохранилось, где нужно, а потом отобразилось,
где попросят.

4.

Языки используемые для backend:
C#
C
C++
PHP
Python
Pascal
и т.д.

5. Frontend - разработчик

Делает страницы и интерфейсы программ и
сайтов. Получает макет от дизайнера
и превращает его в готовую страницу —
расставляет на места все элементы
и проверяет, что всё тянется на разных
экранах, хорошо выглядит на смартфонах
и не разваливается, если изменить размер
окна. Это называется «вёрстка», а фронтендразработчиков часто называют
верстальщиками.

6.

Языки используемые для frontend:
HTML
CSS
JavaScript
TypeScript
React
Vue
и т.д.

7. Fullstack - разработчик

Fullstack-разработчик – это универсальный
солдат. Он сам создает веб-приложения, начиная
от проектирования структуры, заканчивая его
размещением на сервере. Обычно он не
разрабатывает крупные проекты: для этого
необходима плотная работа frontend- и backendкоманд. Часто он занимается небольшими
проектами для крупных компаний или фрилансом,
что дает свои плюсы: он не зависит ни от кого,
кроме заказчика. А если возникнет необходимость,
всегда можно переквалифицироваться в backendили frontend-разработчика.

8.

Языки используемые для fullstack:
Все языки программирования)))

9.

В fullstack-разработку часто приходят люди,
создающие собственные стартапы. Например,
WhatsApp был основан двумя разработчиками,
Яном Кумом и Брайаном Эктоном. Для создания
MVP (minimum viable product, минимально
жизнеспособный продукт) им пришлось освоить
fullstack-разработку. Поэтому часто это не
чистое программирование со строгой
методологией, а творчество, позволяющее
специалисту реализовывать свои идеи.

10. В данном полугодии мы познакомимся с Frontend разработкой

11. План на данное полугодие

1. Познакомиться с язык разметки HTML
2. Познакомиться с языком оформления CSS
3. Изучить язык программирования JavaScript
4. Научиться использовать данные языки на
веб-страницах

12. HTML (от английского HyperText Markup Language)

Это язык гипертекстовой разметки текста.
Он нужен, чтобы размещать на страницы
сайта элементы:
Текст;
Картинки;
Таблицы;
Видео.

13. Для чего нужен HTML?

1. Для разметки страниц сайта и размещении
элементов.
2. Для правильного индексирования информации на
сайте поисковыми системами.
* Индексация страниц сайта – это процесс
добавления страниц сайта в базу данных поисковых
систем таких как Google, Яндекс и другие.

14. HTML

Когда вы заходите на сайт, браузер
подгружает HTML-файл с информацией
о структуре и контенте веб-страницы.
HTML как бы выстраивает визуальный
фундамент сайта, но не «запускает» сайт
самостоятельно. Он всего лишь указывает, где
располагаются элементы, какой у них будет
базовый дизайн, откуда брать стили для
элементов и скрипты (которые обычно пишут
на JavaScript).

15. HTML

состоит из тегов — команд, которые
указывают
браузеру,
как
отображать
помещённый в них текст. Это и есть
элементы веб-страницы. У каждого тега есть
имя, которое заключается в угловые скобки
< и >.
Пример:
<p>Привет мир!</p>

16. Теги бывают парные и непарные

Парные состоят из двух тегов —
открывающего и закрывающего,
а непарные — из одного. При этом непарный
тег тоже можно закрывать, но это
необязательно.
Например, тег <img>, который позволяет
разместить картинку на сайте, — непарный:
Пример: <img scr=‘car.png‘ alt='photo of car'>

17. Атрибуты тегов

У каждого тега есть атрибуты. С их помощью
можно передавать элементам веб-страницы
дополнительные
данные:
размеры,
уникальный
id
элемента,
ссылки
на изображения и так далее.
Элемент <img> включает в себя два основных
атрибута — src и alt. Первый добавляет ссылку
на файл, а второй — подпись к картинке,
которая покажется, если файл не загрузится.

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

Тег <p> — парный, он всегда должен закрываться
тегом </p>. Парные теги применяются для разметки
блоков — элементов, в которые можно вкладывать
другие элементы (в том числе блоки). К ним относятся:
контейнеры (div);
абзацы;
заголовки;
списки;
таблицы.

19. Базовый документ HTML

20. <!DOCTYPE>

Элемент <!DOCTYPE> предназначен для указания типа текущего
документа. Это необходимо, чтобы браузер понимал, как следует
интерпретировать текущую веб-страницу, поскольку HTML
существует в нескольких версиях, кроме того, имеется XHTML
(EXtensible HyperText Markup Language, расширенный язык разметки
гипертекста), похожий на HTML, но различающийся с ним по
синтаксису. Чтобы браузер «не путался» и понимал, согласно какому
стандарту отображать веб-страницу необходимо в первой строке кода
задавать <!DOCTYPE>.

21.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии
языка, на которого ориентированы:
DOCTYPE
Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>
Для всех документов.

22.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии
языка, на которого ориентированы:
DOCTYPE
Описание
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
Документ написан на XHTML и содержит фреймы.
HTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Разработчики XHTML 1.1 предполагают, что он
постепенно вытеснит HTML. Никакого деления
на виды это определение не имеет, синтаксис
один и подчиняется четким правилам.

23. Тег <html>

Тег <html> является контейнером, который заключает в себе
все содержимое веб-страницы, включая теги <head> и <body>.
Открывающий и закрывающий теги <html> в документе
необязательны, но хороший стиль диктует непременное их
использование. Как правило, тег <html> идет в документе
вторым, после определения типа документа устанавливаемого
через элемент <!DOCTYPE>. Закрывающий тег <html> должен
всегда стоять в документе последним.

24. Основная структура документа

25. Базовый документ HTML

26. Тег <head>

Тег <head> предназначен для хранения других элементов,
цель которых — помочь браузеру в работе с данными.
Также внутри контейнера <head> находятся метатеги,
которые используются для хранения информации
предназначенной для браузеров и поисковых систем.
Например, механизмы поисковых систем обращаются к
метатегам для получения описания сайта, ключевых слов и
других данных.

27. Тег <body>

Тег <body> предназначен для хранения содержания
веб-страницы (контента), отображаемого в окне
браузера. Информацию, которую следует выводить в
документе, следует располагать именно внутри
контейнера <body>. К такой информации относится
текст, изображения, теги, скрипты JavaScript и т.д.

28. Базовая Структура страницы

29. Пример структуры сайта

30. Базовый документ HTML

31. Открытие страницы в браузере

32. Базовые теги

Тег
Описание
<!DOCTYPE>
показывает браузеру тип документа, сообщает его версию и язык
<html></html>
корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные
элементы помещаются внутри него
<head></head>
контейнер, в который помещаются метаданные документа, не видимые
пользователям, но считываемые поисковыми роботами: например, <title> или
<style>
<meta>
тег для оформления метаданных документа, используемых браузером для
обработки страницы, а поисковиками — для индексации.
<body></body>
тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите
внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько
атрибутов, позволяющих управлять цветами.
<header></header>
задает «шапку» сайта или раздела, в которой обычно располагается заголовок
<footer></footer>
задает «подвал» сайта или раздела, в которой обычно располагается заголовок
<article> </article>
задает содержание сайта вроде новости, статьи, записи блога, форума или др.
<section> </section>
Задаёт раздел документа, может применяться для блока новостей, контактной
информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит
заголовок. Допускается вкладывать один тег <section> внутрь другого.

33. Базовые теги

Тег
<main></main>
<aside> </aside>
Описание
тег main представляет основное содержимое веб-страницы. Он представляет
уникальный контент, в который не следует включать повторяющиеся на разных
веб-страницах элементы сайдбаров, навигационные ссылки, информацию о
копирайте, логотипы и тому подобное.
определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток
и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая
панель».

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

Тег
<h1></h1>......<h6></h6>
<b></b>
<strong></strong>
Описание
теги заголовков, от самого большого к самому
маленькому.
жирный текст без придания важности
выделенному фрагменту
расставление акцентов в тексте путём
выделения его фрагментов полужирным
начертанием.
<i></i>
выделение текста курсивом без придания
важности
<del></del>
зачёркивает текст, помечая его удалённы
<s></s>
отображает перечёркнутый текст
<ins></ins>
подчёркивает текст, визуально выделяя
внесённые изменени
<u>
подчёркивание без дополнительного
акцентирования внимания

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

Тег
Описание
<em></em>
расставление акцентов путём выделения
фрагментов текста курсивом
<mark></mark>
выделение частей текста жёлтым маркером
<p></p>
контейнер для абзаца
<cite></cite>
оформление цитат
<br>
переносит текст на другую строку без
создания абзаца
<pre></pre>
вывод неформатированного текста с
сохранением пробелов и особенностей
переносов
<ol></ol>
список с цифрами
<ul></ul>
список со значками
<li></li>
отметка каждого элемента перечня (цифра
или значок в зависимости от типа списка).

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

Тег
<a></a>
<code></code>
Описание
добавление гиперссылки в текст. Имеет
обязательный атрибут href, в котором
указывается ссылка или якорь. Внутри
контейнера помещается текст, при нажатии
на который происходит переход на другую
страницу или другое место на этой же
странице.
выделение фрагмента кода с помощью
шрифта monospace

37. Встраивание элементов

Тег
<img scr=“images/cat.png”/>
Описание
вставка изображения. Имеет атрибут src, который указывает на
адрес нужного файла. Есть и другие атрибуты
<picture></picture>
контейнер для расположения элемента <img> без <source>,
который даёт браузеру возможность самостоятельно выбрать
подходящую картинку.
<audio></audio>
вставка звукового контента
<video></video>
вставка видео
<source></source>
указывает местоположение файла для <video>, <audio> и
<picture>
<object></object>
контейнер, через который встраиваются мультимедийные
файлы. Для передачи параметров применяется тег <param>
<hr />
размещает на странице горизонтальную линию. Имеет
несколько атрибутов
<script></script>
определяет выполнение сценария на стороне посетителя сайта.
Может содержать сам скрипт или иметь ссылку на внешний
источник.

38. Работа с таблицами

Тег
Описание
<table></table>
размещает таблицу. Все остальные теги для форматирования
таблиц должны находиться внутри это контейнера.
<thead></thead>
определяет заголовок
<tbody></tbody>
отмечает тело таблицы
<td></td>
создаёт одну ячейку
<th></th>
указывает на заголовок ячейки
<tr>
создание одной строки
<tfoot></tfoot>
показывает нижний колонтитул
<caption></caption>
вставляет подпись. Указывается после тега <table>
<col>
позволяет указать ширину и другие параметры одной или
нескольких колонок

39. Создание форм и кнопок

Тег
<form></form>
Описание
создание форм на странице. С помощью HTML описывается
только внешний вид, для выполнения функций требуется
запуск соответствующих скриптов на сервере.
<button></button>
создаёт интерактивную кнопку. Внутри контейнера нужно
поместить текст или изображение
<option></option>
описывает каждый отдельный пункт меню
<input>
формирует поля для добавления пользовательских данных
<output>
выводит результаты вычислений, сделанных с помощью
скрипта
<label>
оформляет пометку для поля, созданного тегом <input>
<textarea></textarea>
создаёт большие поля для ввода текста

40. Основные правила

1. Текст не должен быть без тегов

41. Основные правила

2. В оформлении кода должна использоваться табуляция
* Табуляция – это простейшее средство
позиционирования текста.
Достаточно нажать клавишу «Tab» – и
текст отодвинется от края на
определённое расстояние.

42. Основные правила

3. На страницы сайта всегда должны быть теги:
DOCTYPE
html
head
body
header
footer
meta
title

43. Основные правила

4. Кодировка страницы должна быть обязательно указана:
<meta charset="utf8">
*Кодировка – это набор взаимосвязанных кодов и
соответствующего им графического отображения печатных
элементов на экране.

44. Пример страниц с разной кодировкой

Страница с кодировкой UTF8
Страница с кодировкой ASCII

45. Основные правила

5. Все теги пишутся в нижнем регистре (маленькими
буквами
Пример:
<head> </head>
<h1></h1>

46. Основные правила

6. Теги заголовков h1 и h2 указываем на страницы не более
количества их цифры в заголовке
h1 – указываем всего 1 раз на страницы
h2 – указываем не более 2-х раз на страницы

47. Основные правила

7. Главный файл html обязательно называем index
*Файл index является главным файлом входа на наш сайт.

48. Основные правила

8. Тег meta всегда указываем около первого тега
<head>, а тег title у закрывающего тега </head>

49. Сайт с документацией

htmlbook.ru