Привет, я новичок на Дзене – УПСG, или Умный Программист о Glavnom. И с сегодняшнего дня я хочу начать курс по Web-верстке, начнём с азов, а закончим версткой ГИГАНТОВ.
К вашему чтению, первый урок, а так как он вводной – хочу рассказать о том, как правильно создать документы для работы.
Первым делом главное правильно организовать систему папок и файлов:
1) Выделяем на проект место (или папку, которую мы не потеряем среди документов)
2) Создаем в выделенном месте папку с годом (у меня это будет 2020), а также папку Temp (для хранение временных файлов).
3) В папке с годом создаём уже наш проект (first)
4) Заходим в проект, и создаём 2 папки: первую с исходниками (Source), вторую – «Рабочую», с таким же названием как наш проект (first).
5) Заходим в папку «first», и создаём следующие папки:
5.1) css – для хранение каскадных таблиц стилей
5.2) js – для хранения наших скриптов
5.3) img – для хранения изображений
5.4) fonts – для подключения шрифтов
С ПАПКАМИ ОКОНЧЕНО. И ТЕПЕРЬ МЫ МОЖЕМ СОЗДАТЬ ПЕРВЫЙ HTML-ФАЙЛ – для этого, создаём обычный текстовый документ. Переименовываем его «index.html»
Почему именно index? Потому что все сервера в первую очередь открывают данный файл именно с таким названием.
Перенесем наш проект в редактор кода, я использую Sublime Text.
Сегодня мы попрактикуемся написать минимум кода, и с каждым уроком будем расширять свои знания и так же код.
Первое что надо сделать, это указать браузеру – с каким типом файла он будет работать: указываем командой,
Вторая строчка у нас будет, с указанием для браузера – на каком языке будет текст,
Третьей строчкой создаём «контейнер» <head> для наших важных данных, который закрывается, после ввода тех самых данных.
Bнутрь контейнера, я помещаю теги:
1) <title> Содержимое </title>, который отвечает за заголовок вкладки браузера, а также тег:
2) <meta> - данный тег отвечает, за кодировку используемую на странице. А также закрываю </head>.
Следующим шагом открываю <body> - «тело» страницы – видимая часть страницы, также закрываю тег </html>, и в теге body, можно написать наше первое приветствие, используя тег <h1>Содержимое</h1>.
К вашему вниманию: полный код страницы, а также результат выполнения.