Дорожная карта для начинающих: Сначала сеть, затем HTML и CSS Сессия ориентирована на новичков, в первую очередь на изучение основных сетевых принципов, а затем HTML и CSS. Для создания файлов, установки инструментов и управления простым рабочим пространством требуется базовая компьютерная грамотность. Участники приходят с разнообразным опытом, часто преследуя практические цели, такие как повышение квалификации или получение прибыли от веб-проектов.
Интернет: Сеть подключенных компьютеров Интернет - это глобальная сеть, состоящая из взаимосвязанных элементов, а не отдельное место. Веб-сайт - это набор документов, хранящихся на другом компьютере в любой точке мира. При правильном подключении этот компьютер становится сервером, который может доставлять эти документы посетителям.
Запрос–ответ: Как страница попадает в браузер Для просмотра веб-сайта браузер отправляет запрос по сети на сервер. Сервер находит запрошенный документ и возвращает его в качестве ответа. Браузер преобразует полученный документ в веб-страницу.
Адреса имеют значение: Доступ к компьютерам по IP Для доступа к любому конкретному компьютеру необходимо знать его адрес, IP-адрес. Пользователи редко вводят необработанные IP-адреса в браузерах, за исключением таких задач, как настройка маршрутизатора. Вместо этого люди полагаются на URL-адреса и доменные имена, которые соответствуют этим числовым адресам.
Домены и URL-адреса: удобные для пользователя имена для компьютеров Ввод доменного имени напрямую не подключает к компьютеру; имя должно быть преобразовано в IP-адрес. Домены делают навигацию запоминающейся, но при этом указывают на правильный сервер. Система, которая выполняет этот перевод, называется DNS.
Разрешение DNS: от имени к цифровому адресу DNS работает как постоянно обновляемая таблица, связывающая каждый домен с его IP-адресом. Браузер отправляет домен в DNS и получает в ответ соответствующий IP-адрес. Используя этот IP, он связывается с сервером, чтобы запросить нужную страницу.
DNS вашего провайдера: почему поиск имен работает дома В домашних условиях интернет-провайдер предоставляет DNS-серверы и автоматически направляет туда запросы по именам. Даже без ручных настроек провайдер перенаправляет запросы на распознаватель, который знает, где найти записи домена. Именно так работает разрешение имен в обычной домашней сети.
Localhost и файл Hosts: Сопоставление имен вручную Файл hosts предоставляет небольшую карту локальных имен на вашем компьютере. Он может привязывать любое имя к IP-адресу, в то время как 127.0.0.1 определяет ваш собственный компьютер как localhost. Это может привести к блокировке или перенаправлению доменов для вас самих, а также к тому, что небольшие вредоносные программы используют этот трюк для отправки пользователей на обманчивые сайты‑двойники.
Зачем серверам нужны статические IP-адреса Динамические IP-адреса меняются со временем, в то время как статические IP-адреса остаются неизменными. Серверам требуются статические адреса, чтобы записи DNS оставались действительными и посетители постоянно попадали на нужный компьютер. Изменение адреса сервера нарушило бы доступ и разрешение имен.
Веб-серверы: Программы, обслуживающие документы Веб-серверная программа прослушивает запросы и возвращает файлы, хранящиеся на компьютере. В статическом режиме она просто находит готовый HTML-документ и отправляет его обратно. В результате получаются классические, быстро загружающиеся страницы, подготовленные заранее.
Динамическая генерация с использованием PHP и баз данных При динамической настройке сервер перенаправляет запросы программе, такой как интерпретатор PHP, которая может запускать код и запрашивать базу данных. Код вставляет необходимые значения — например, текущее время или текст статьи — и выводит HTML. Браузер никогда не получает сам PHP, только HTML, который он генерирует.
Почему доминируют динамические сайты Большинство страниц имеют общую структуру — верхний колонтитул, меню, боковые панели, нижний колонтитул, — в то время как меняется только основное содержимое. Статическое дублирование во многих файлах замедляет обслуживание и приводит к ошибкам. Динамическая сборка вставляет новое содержимое в единый шаблон, сохраняя общий макет в одном месте.
Проблема со статичным новостным сайтом Для статического создания сайта со 100 новостями требуется примерно 101 HTML-файл. Общие элементы, такие как номер телефона в заголовке, повторяются в каждом файле, поэтому глобальные правки должны выполняться повсеместно. По мере роста сайта это дублирование становится серьезной проблемой при обслуживании.
Динамичный рабочий процесс: Один шаблон, много страниц Динамический сайт хранит статьи в виде строк в базе данных. Главная страница считывает их и выводит ссылки; URL-адрес статьи, такой как page.php?id=5, указывает, какую запись следует отобразить. Интерпретатор извлекает эту запись и вставляет ее в область содержимого шаблона.
Практические преимущества динамики Централизованные шаблоны сокращают количество файлов и упрощают глобальные правки. Добавление контента через панель администратора мгновенно обновляет объявления и создает страницы статей по запросу. Даже такие константы, как номера телефонов, лучше всего сохранять в базе данных один раз для повторного использования на всем сайте.
Статика по-прежнему имеет значение: структура, презентация и красота Статические технологии остаются основополагающими. HTML обеспечивает структуру, а CSS - визуальный дизайн, формируя каркас, необходимый каждой странице. JavaScript добавляет слайдеры, анимацию и интерактивные элементы без перезагрузки; динамический код сам по себе будет выглядеть как обычный текст без оформления.
Объем курса и роли в команде В программе обучения особое внимание уделяется HTML и CSS для создания профессиональных статических макетов. Навыки работы с серверной частью, такие как PHP, могут быть добавлены позже и подключены к этим макетам или CMS. Знание JavaScript повышает возможности трудоустройства и доходы специалистов по верстке.
От идеи до спецификации и дизайна Клиент приносит идею в студию через менеджера проекта, который переводит ее в техническую спецификацию. Спецификация выравнивает ожидания и уменьшает недопонимание между бизнес- и техническими ролями. Команда работает, руководствуясь четким планом, основанным на этом документе.
Результаты проектирования: Макеты, PSD-файлы и слои Сначала дизайнеры отправляют макет изображения на утверждение, а затем многоуровневый PSD-файл для производства. Слои разделяют части интерфейса, так что определенные элементы можно редактировать или переключать, не перерисовывая все заново. Такая структура обеспечивает точное выделение ресурсов для кодирования.
От макета до рабочего сайта Разработчики разметки разделяют ресурсы, создают HTML-структуру и стилизуют ее с помощью CSS, чтобы ссылки и кнопки работали. Программисты подключают панель администратора и базу данных, чтобы контент поступал в центральную область динамически. Готовый сайт сочетает в себе статическую презентацию, динамический контент и усовершенствования JavaScript; адаптивный макет может быть показан кратко, а админ написан программистом.
Подготовьте необходимые инструменты для веб-разработки Установите редактор кода и приготовьтесь к практической работе. Подойдет любой редактор кода, даже обычный Notepad, но избегайте Microsoft Word, поскольку он портит код. Для просмотра и тестирования результатов требуется современный браузер. После ознакомления с основами начинается практическая часть по HTML.
Выберите современный, обновленный браузер Используйте современные браузеры Chrome, Firefox, Edge, Opera или аналогичные; устаревшие версии вызывают проблемы. Старый Internet Explorer практически не поддерживается, за исключением последних версий. Начните с одного браузера, чтобы сэкономить время и не беспокоиться о проблемах в разных браузерах. Инструменты разработчика внутри браузера помогают проверять элементы и поведение.
Разберитесь с набором инструментов: Редактор, отладчик, локальный сервер Редактор пишет код, браузер отображает его, а devtools позволяет анализировать структуру и поведение. Программисты часто также устанавливают локальный веб-сервер, который интерпретирует серверный код и возвращает HTML. Поначалу дизайнеры могут работать только с редактором и браузером. Используйте простые инструменты и сосредоточьтесь на достижении видимых результатов.
PHP - мифы и реальность Жалобы на PHP поступают из-за его устаревшей версии 4, которая противоречит здравым принципам программирования. Современный PHP быстр, удобен и хорошо подходит для веб-разработки. По сравнению со многими языками, он доступен, оставаясь при этом производительным. В этом курсе сначала сосредоточьтесь на HTML и CSS, прежде чем добавлять серверный код.
Быстрый путь к первому заработку Примерно через месяц изучения HTML и CSS становится возможной простая работа на фрилансе. Статичные сайты в несколько страниц уже приносят результаты для клиентов, содержание которых меняется редко. Начальная работа может быть простой, но она работает и приносит прибыль. Практика укрепляет уверенность в собеседованиях и крупных проектах.
HTML - это гипертекстовая разметка HTML - это язык разметки, который структурирует гипертекстовые документы. Гипертекст означает, что один документ может ссылаться на другой и мгновенно открывать его. Теги - это основной механизм, который создает структуру. Эти теги определяют, как содержимое сегментируется и связывается.
Контейнеры и инструкции по установке Парные теги действуют как контейнеры с четким началом и концом, которые охватывают область текста. Одиночные теги - это точечные инструкции, применяемые в одном месте документа. Используйте контейнеры для обозначения разделов, таких как заголовки или выделенные диапазоны, а одиночные теги - для таких действий, как разрывы строк или горизонтальные правила. Понимание этого различия важнее, чем запоминание синтаксиса.
Создайте первый HTML-файл Создайте папку, которая будет служить корневой папкой сайта, и сохраните в ней файл с именем index.html. Убедитесь, что файл имеет расширение .html и открывается в браузере при двойном щелчке. Подсветка синтаксиса в редакторе и значок браузера подтверждают правильность сохранения. С этого момента изменения содержимого становятся видны при обновлении.
Записывайте, сохраняйте, обновляйте Введите простой заголовок, например H1, и сохраните файл. Обновите вкладку браузера, чтобы увидеть обновленные выходные данные. Полагайтесь на индикатор сохранения в редакторе и не оставляйте несохраненные изменения. Этот цикл формирует привычку к немедленной обратной связи.
Установите кодировку в UTF‑8 При несовпадении кодировок в браузере появляются непонятные символы. Добавьте тег meta charset и используйте UTF‑8 без спецификации в качестве стандарта сайта. Если настройки Windows по умолчанию вызывают проблемы, временно задайте CP‑1251 в мета-теге, а затем измените кодировку файла в редакторе. После сохранения обновите файл, чтобы проверить чистоту текста.
Предпочитайте семантическую разметку стилизованным тегам Современный HTML рассматривает теги, выделенные жирным шрифтом и курсивом, как семантические маркеры, а не команды визуального форматирования. Используйте их для обозначения смысла, а не внешнего вида. Визуальный стиль относится к CSS, который будет добавлен позже. При создании разметки уделяйте особое внимание структуре и замыслу.
Всегда закрывайте парные теги Для парных тегов, если забыть о закрывающем теге, все, что следует за ним, превращается в один и тот же контейнер. Браузеры стараются быть снисходительными и отображать что-либо, но результат получается неверным, например, вся страница превращается в заголовок. Явно закрывайте контейнеры, чтобы ограничить их эффект. Эта привычка предотвращает незначительные ошибки в макете и доступности.
Одиночные теги без самозакрывающихся косых черт Используйте BR для переносов строк и HR для горизонтальных правил, когда это необходимо. В HTML5 для одиночных тегов не требуется косая черта в конце. Только для парных тегов нужны явные закрывающие теги. Пишите одиночные теги просто и используйте их целенаправленно.
Атрибуты Определяют детали Атрибуты содержатся в открывающем теге и имеют вид name="значение" или name="стоимость". Для тега IMG требуется обязательный атрибут src, указывающий на изображение. Поместите файл изображения в папку сайта и укажите относительный путь к нему или используйте абсолютный URL. Дважды проверьте пути и кавычки, чтобы избежать поломки значков.
Безопасное изменение размера изображений Ширину и высоту можно задать в качестве атрибутов, но правильный размер должен быть в CSS. При изменении размера в данном случае задайте только ширину, чтобы сохранить пропорции. Не устанавливайте ширину и высоту одновременно, если не известен точный размер. Сведите разметку к минимуму и отложите представление стилей на потом.
Создайте каркас документа Начните с doctype для последней версии HTML, затем поместите все в HTML-тег. Внутри разместите HEAD для таких параметров, как meta и TITLE, и BODY для видимого содержимого. Переместите теги конфигурации в HEAD, а content - в BODY, чтобы сохранить четкость ролей. Эта структура является основой, которая повторно используется на каждой странице.
Структура и тип документа влияют на рендеринг и SEO Поисковые системы и старые браузеры полагаются на правильную структуру для корректного анализа страниц. Без современного doctype браузеры, такие как IE8/IE9, работают плохо. HEAD предназначен для настройки, а не для визуального заголовка. Правильная структура предотвращает проблемы с отображением и улучшает индексацию.
Рекомендации и план обучения Используйте официальные HTML-ссылки для поиска тегов и атрибутов по мере необходимости. Даже профессионалы используют только часть всех элементов. CSS будет представлен примерно с третьего урока. Для тех, кто чувствует себя готовым, доступно дополнительное видео о семантических тегах.
Домашнее задание: Страница из простого макета Создайте страницу, похожую на предоставленный макет, используя только указанные теги. Поместите изображение сверху, три ссылки рядом, еще одно изображение и текст и добавьте линии и пробелы с помощью HR и BR. Не используйте CSS, таблицы или слои; сосредоточьтесь на простом HTML. Отправьте в группу ВКОНТАКТЕ два скриншота: слева - код, справа - результат рендеринга, или поделитесь ссылкой на хостинг, если таковая имеется.
Расписание, материалы и поддержка Занятия проходят по понедельникам, средам и пятницам. Материалы и ссылки рассылаются по электронной почте и размещаются в группе ВКонтакте с возможностью публикации на YouTube. Задавайте вопросы и обсуждайте задания в ВКонтакте в перерывах между занятиями. Подведите итоги, отдохните и возвращайтесь готовыми к следующей практике.