Вход / Регистрация
Вход
Warning: [Trying to access array offset on value of type null] в файле /var/www/school-php.com/public_html/modules/courses/lesson.php на линии 295
Урок 1: Начинаем изучать HTML, теги, атрибуты тегов и их свойства
План:
- Верстка и её предназначение
- Использование .html и .css файлов
- Верстка как способ общения с поисковиками
Дополнение к уроку:
Информацию как создать новый сайт Вы можете увидеть в дополнении к предыдущему уроку. Там же есть архив, необходимый распаковать в корень сайта (базовые файлы проекта). Если Вы пропустили, то качайте: пакет файлов.
Конечно я сторонник того, чтобы вы начиная с первого урока тренировались гуглить и умели ввести "css жирный текст" и получить тут же ответ как это делается, ведь умение гуглить правильно = 50% мастерства! Но для первого старта я всё же дам несколько полезных CSS свойств на каждый день:
Если Вы скачаете архив и поместите его в корень сайта, то у Вас всё будет работать без проблем. Но расширяя Ваши знания и экспериментируя с новым кодом рано или поздно Вы увидите, что свойства CSS не работают. Тут я соберу распространённые ошибки новичков.
1) Если Вы работаете с сайтом test1.ru, то в адресной строке браузера должно быть написано именно "test1.ru", ошибкой будет писать localhost/test1.ru, так как в данном случае сайтом выступает localhost, а test1.ru будет его поддиректорией. Допустим Вы захотели создать несколько папок для разных уроков, тогда создавайте отдельные сайты test1.ru , test2.ru , test3.ru. И не забудьте, что каждый из сайтов необходимо регистрировать в настройках Domain в Open Server!
2) Чтобы убедиться, что CSS файл браузер видит и подгружает, то открываем консоль F12 , выбираем вкладку Network и обновляем страницу. В колонке `status` мы увидим ответ кодом, 200 - это значит, что браузер подключил файл корректно, 404 - файл не найдет, он либо удалён, либо лежит в другой папке.
Помимо того, что мы убедимся, что файл загружается корректно, мы так же обновим файл до последней версии. Запомните, браузер кэширует (ЗАПОМИНАЕТ) старую версию файла по своим собственным алгоритмам, обновить страницу с открытой консолью и установленной галочкой "disable cache" заставит сбросить весь свой кэш для данной страницы и загрузить файлы по новой. О том, как обновлять кэш у пользователей Вашего сайта будет рассказано в следующих уроках, а вот пока Вы работаете локально, то Вы просто обязаны сидеть с включенной вкладкой Network и установленной галочкой "disable cache" всегда на своем сайте (на других сайтах не надо).
3) Если всё же Файл обновился, ответ 200, но стили не применяются, то тут могут быть 2 проблемы. Невнимательность - Вы работаете с сайтом test1.ru, а в браузере открыли test2.ru, и вторая более распространённая - Вы допустили ошибку в CSS файле. За счёт особенности CSS стили будут подгружаться сверху вниз и до той строчки, в которой возникнет ошибка, на том месте обработка стилей остановится. Тут поможет банальное решение - очистить файл и прописать 1 любое свойство и убедиться, что оно работает. Далее возвращая код по кусочкам можно найти строчку, в которой была ошибка.
4) Если ответ 404, а файл Вы создали сами, ручками, то переименуйте его и пропишите заново. Дело в том, что русская и английская буквы "с" визуально одинаковые и Вы могли ошибиться при наборе имени файла. В офисах даже существуют подобные шутники, которые своим коллегам переименовывают файл и выносят мозг :) А так, эта ошибка на столько редкая, что вряд ли у Вас именно она, но я на всякий случай её записал, мало ли что.
Хочу заметить, что я постарался указать распространённые на сегодня ошибки, с которыми может столкнуться каждый из учеников. Ошибок может быть и больше, так что если вдруг что, то пишите смело в скайп и я помогу!
Базовые CSS свойства на каждый день
Конечно я сторонник того, чтобы вы начиная с первого урока тренировались гуглить и умели ввести "css жирный текст" и получить тут же ответ как это делается, ведь умение гуглить правильно = 50% мастерства! Но для первого старта я всё же дам несколько полезных CSS свойств на каждый день:
.class {
color: red; /* красный цвет */
color: #009900; /* Цвет в формате RGB (Red, Green, Blue). Я указал 99 для зеленого. */
font-size:20px; /* Размер шрифта в пикселях */
font-weight:bold; /* Текст жирным */
font-weight:normal; /* Текст не жирный (абзацы по умолчанию не жирные, а вот заголовки - жирные) */
font-style: normal; /* Текст не курсивом (по умолчанию почти все теги не курсивом) */
font-style: italic; /* Текст курсивом */
text-decoration: underline; /* Добавляем нижнее подчеркивание тексту */
text-decoration: none; /* Убираем декорации тексту включая нижнее подчеркивание. Обычно ссылки имеют нижнее подчеркивание по умолчанию */
text-decoration: line-through; /* Зачеркиваем текст */
border-bottom: 1px solid green; /* указываем блоку рамки снизу, почти как decoration с возможностью указать другой цвет и толщину, но есть отличия */
text-transform:uppercase; /* Весь текст в верхнем регистре. Тоже самое, что писать большими буквами */
letter-spacing:2px; /* отступы между буквами */
word-spacing:7px; /* отступы между словами */
font-family: Comic Sans MS; /* Особые шрифты. Доступный список из 10-15 шрифтов, остальные надо подключать особым способом! */
}CSS файл не работает, CSS файл не подключается. Решение проблемы:
Если Вы скачаете архив и поместите его в корень сайта, то у Вас всё будет работать без проблем. Но расширяя Ваши знания и экспериментируя с новым кодом рано или поздно Вы увидите, что свойства CSS не работают. Тут я соберу распространённые ошибки новичков.
1) Если Вы работаете с сайтом test1.ru, то в адресной строке браузера должно быть написано именно "test1.ru", ошибкой будет писать localhost/test1.ru, так как в данном случае сайтом выступает localhost, а test1.ru будет его поддиректорией. Допустим Вы захотели создать несколько папок для разных уроков, тогда создавайте отдельные сайты test1.ru , test2.ru , test3.ru. И не забудьте, что каждый из сайтов необходимо регистрировать в настройках Domain в Open Server!
2) Чтобы убедиться, что CSS файл браузер видит и подгружает, то открываем консоль F12 , выбираем вкладку Network и обновляем страницу. В колонке `status` мы увидим ответ кодом, 200 - это значит, что браузер подключил файл корректно, 404 - файл не найдет, он либо удалён, либо лежит в другой папке.
Помимо того, что мы убедимся, что файл загружается корректно, мы так же обновим файл до последней версии. Запомните, браузер кэширует (ЗАПОМИНАЕТ) старую версию файла по своим собственным алгоритмам, обновить страницу с открытой консолью и установленной галочкой "disable cache" заставит сбросить весь свой кэш для данной страницы и загрузить файлы по новой. О том, как обновлять кэш у пользователей Вашего сайта будет рассказано в следующих уроках, а вот пока Вы работаете локально, то Вы просто обязаны сидеть с включенной вкладкой Network и установленной галочкой "disable cache" всегда на своем сайте (на других сайтах не надо).
3) Если всё же Файл обновился, ответ 200, но стили не применяются, то тут могут быть 2 проблемы. Невнимательность - Вы работаете с сайтом test1.ru, а в браузере открыли test2.ru, и вторая более распространённая - Вы допустили ошибку в CSS файле. За счёт особенности CSS стили будут подгружаться сверху вниз и до той строчки, в которой возникнет ошибка, на том месте обработка стилей остановится. Тут поможет банальное решение - очистить файл и прописать 1 любое свойство и убедиться, что оно работает. Далее возвращая код по кусочкам можно найти строчку, в которой была ошибка.
4) Если ответ 404, а файл Вы создали сами, ручками, то переименуйте его и пропишите заново. Дело в том, что русская и английская буквы "с" визуально одинаковые и Вы могли ошибиться при наборе имени файла. В офисах даже существуют подобные шутники, которые своим коллегам переименовывают файл и выносят мозг :) А так, эта ошибка на столько редкая, что вряд ли у Вас именно она, но я на всякий случай её записал, мало ли что.
Хочу заметить, что я постарался указать распространённые на сегодня ошибки, с которыми может столкнуться каждый из учеников. Ошибок может быть и больше, так что если вдруг что, то пишите смело в скайп и я помогу!
Под каждым уроком есть 10 тестов, которые помогут Вам закрепить пройденный материал.
Один из тестов будет развивать Вашу логику и интеллект!
Чтобы получить доступ к тестам - авторизируйтесь!
Один из тестов будет развивать Вашу логику и интеллект!
Чтобы получить доступ к тестам - авторизируйтесь!
|
|