Введение
Предлагаю создать сайт для ресторана "КРАСНЫЙ ПЕЛИКАН"
Для кодирования и выполнения упражнений курса вам понадобятся:
- редактор кода (Visual Studio Code ) для записи файлов кода,
- но также и современный веб-браузер (Chrome, Safari, Firefox или Edge), чтобы увидеть результаты того, что вы кодируете, в реальном времени.
Перейдите сюда, чтобы установить Visual Studio Code. Это бесплатно.
Понимание роли HTML
HTML (язык гипертекстовой разметки) появился в 1991 году, когда была запущена сеть. Его роль заключается в управлении и организации контента. Поэтому именно в HTML вы будете писать то, что должно отображаться на странице: текст, ссылки, изображения...
Вы вполне можете создать сайт только в HTML, но…
но этот будет не очень красивым, потому что информация будет отображаться «сырой» и без какого-либо форматирования. Вот почему язык CSS всегда дополняет его.
Понимание роли CSS
Роль CSS (каскадных таблиц стилей, также называемых таблицами стилей) заключается в управлении внешним видом веб-страницы (макетом, расположением, оформлением, цветами, размером текста и т. д.). Этот язык дополнил HTML в 1996 году и до сих пор является основой веб-стиля.
Как видите, сайт выглядит намного лучше с CSS. Слой CSS позволяет вам увидеть веб-сайт в его полном графическом формате. Для работы CSS нужна база в HTML. Вот почему мы сначала научимся кодировать в HTML, прежде чем позаботимся о стилях в CSS. Поэтому ваши первые страницы поначалу будут не самыми эстетичными, но это нормально, и это не продлится долго.
Понимание роли навигатора
Роли HTML и CSS дополняют друг друга. Но затем веб-браузер делает всю остальную работу: читает код HTML и CSS, чтобы отобразить визуальный результат на экране. Если в вашем коде CSS написано «Заголовки красные», браузер отобразит заголовки красным цветом. Поэтому роль навигатора очень важна!
Может показаться, что это не так, но браузер — чрезвычайно сложная программа. Действительно, понимание кода HTML и CSS — непростая задача. Разные браузеры не всегда одинаково отображают один и тот же сайт! К этому придется привыкнуть и завести привычку регулярно проверять, правильно ли работает ваш сайт в наиболее часто используемых браузерах. Сегодня вы учитесь разрабатывать в почти волшебной среде: все браузеры, которые вы используете, включают особенно сложные инструменты разработки, в частности инструмент для проверки веб-страницы. Действительно, просмотр веб-страницы позволяет очень легко получить доступ к HTML и CSS и вносить изменения в режиме реального времени. Для этого просто щелкните правой кнопкой мыши на любой странице и Исследовать элемент.
Способ доступа к исследователю может различаться в зависимости от используемого вами браузера. На этой странице вы найдете список различных способов сделать это. Из Chrome, щелкнув правой кнопкой мыши, вы можете проверить HTML и CSS веб-сайта.
Щелкнув правой кнопкой мыши, исследователь отображается в Chrome.
Итак, вы начинаете лучше понимать структуру страницы? Идеально ! Потому что мы собираемся перейти прямо к сути вопроса, создав нашу первую HTML-страницу!