#web #beginners
Меня часто спрашивают что-то вроде: "Слушай, с чего начать программировать сайты?". И вот, что я обычно отвечаю...
Не нужно откладывать! Не нужно говорить: "Блин, начну завтра". Возьми, и начни сейчас!
1. Редактор
Скачай себе удобный редактор, например, Sublime Text 3 (ссылка) - [легкий, быстрый, стильный], Atom (ссылка) - [весит чуть побольше, чуть менее шустрый, больше возможностей], или может скачать IDE, которая поможет тебе в разработке различными подсказками и в принципе упростит работу. Пост про скачивание и настройку лицензии IDE будет чуть позже.
2. Азы
Напиши свой первый сайт. Для этого нажми комбинацию клавиш Ctrl + S, и впиши любое название. В конце должно быть .html, иначе ничего не получится! Потом напиши в редакторе html, и нажми клавишу Tab. Редактор сам построит базовую структуру страницы. Есть такая вещь, как теги. Это что-то вроде разделов. Есть теги, которые нужно закрывать, а есть - нет. Пример закрывающегося тега: <html></html>. Пример незакрывающегося тега: <img src="img.jpeg">. Вернемся к структуре, которую построил редактор.
<!DOCTYPE html> - Определяет тип документа. В нашем случае - классический html, без указания версии. Этого вполне достаточно.
Теги <html></html> - Ограничивают страницу. Это словно границы тетрадного листа - за них выходить нельзя. Вернее, можно, но только с использованием сторонних языков программирования, например, PHP.
В тегах <head></head> указывается заголовок страницы (теги <title></title>), различные настройки отображения (например, кодировка документа, его размер, обложка при отправке в соц.сети и др.). чаще всего именно здесь подключаются внешние файлы со стилями и скрипты.
<body></body> - "Тело" нашего сайта. Это то - что отображается пользователю, когда он заходит на сайт. Внутри него мы будем создавать элементы, которые будет видеть пользователь
3. Текст на странице
Давайте создадим заголовок. Для этого в "теле" сайта создадим тег <h1></h1>, в котором напишем любой текст. Если хотите сделать это проще, можете просто написать h1, и нажать Tab. Это работает практически с любым тегом. Так же, поэкспериментируй с цифрой, и посмотри, что меняется на странице после ее изменения. Когда код готов, нажми Ctrl + S, и запусти сохраненный документ (найти его можно в папке, которую ты указал раньше).
Добавим параграф текста. Делается это тегом <p></p>. Как это выглядит:
Только что ты создал свой первый сайт. Если это не оправдало твои ожидания, то я хочу сразу тебе сказать, что постепенно, мы с тобой научимся создавать красивые сайты, с разными шрифтами, анимациями и красивым дизайном. Чтобы не пропускать уроки - подпишись на блог, и канал в телеграм. Если остались вопросы, задавай их в комментариях, или в лс в телеграм (ссылка в канале). Спасибо за прочтение :)
В следующем уроке: мы стилизуем текст, добавим ему свой шрифт, изменим фон страницы, научимся выравнивать элементы. До встречи!