vp-freelance

7 лет назад

Хотите свой сайт, но не знаете с чего начать? Часть 4

Наш автор @moneygroup продолжает обучать нас основам создания сайта. И сегодня даст нам несколько уроков по написанию сайта с помощью языков программирования. Продолжаем наше обучение!

Для тех, кто пропустил начало и только присоединился к нам - предыдущие уроки от @moneygroup:
Урок 1
Урок 2
Урок 3

Lesson 4 или игра в матрёшки!

Что мы сегодня узнаем и чему научимся?

какие языки программирования нужны для написания сайта;
что такое скелет сайта и из чего он строится;
напишем код первого нашего сайта.

Просто о сложном

Итак, сайт, как мы уже знаем, это текстовые файлы, папки и картинки. Чтобы написать свой сайт, нужно владеть 3-4 языками программирования.

Мы начнём с вами с самых азов, так что сильно не пугайтесь, информацию сложнее таблицы умножения, я вам давать не буду.

Все термины и подача информации упрощены до не хочу, да простят меня программисты!
Но я пишу не для программистов, а для простых обывателей, которые хотят узнать чуточку больше о мире веб технологий.

О языках

HTML – язык разметки отвечает за расположение всех элементов на странице сайта;
CSS – язык стилей и оформления сайта, все расположения картинок цветов элементов, градиентов и прочего можно записать в таблицу стилей css;
JS – язык динамики, на этом языке написаны все спецэффекты сайта, эффект перелистывания картинок в галереи и другие все динамические действия;
PHP – язык вычислений, с помощью данного языка можно сделать чтобы сайт делал нужные нам вычисления, общался с базой данных и производил все необходимые расчёты (это мозг сайта).

Сегодня мы познакомимся с языком HTML и сделаем первую страничку сайта.

О скелете

Наш сайт должен иметь скелет, на котором всё будет держаться. Этот скелет называется язык разметки HTML. Он нужен, чтобы разделить всю информацию на странице сайта на контейнеры и блоки. Как видим, у каждого сайта есть свои контейнеры и блоки, расположенные в определённом порядке, для удобства пользователям работы с сайтом.

Все блоки или таблица представляет собой матрёшку, где в большей есть меньшая. Давайте рассмотрим пример такой матрёшки.

За синий цвет у нас отвечает тег html (со словом тег Вы уже знакомы, но эти теги нужно запоминать как пишутся и за что отвечают) это самая большая матрёшка. Дальше в ней расположено ещё 2 тега: head оранжевый цвет и body фиолетовый цвет. Ну а в теге body уже и располагаются все остальные теги div.

Большинство тегов имеет открывающий тег и закрывающий, начало действия и конец. Например, начало страницы сайта и кода обозначается тегом <html>, а конец кода и конец страницы нашего сайта будет тег </html>. И как видим разница только в знаке слеш /.Открывающий тег без знака / , а закрывающий с знаком /

Итак, давайте повторим:

Все теги начинаются и заканчиваются угловыми скобками <html> , закрывающий тег отличается наличием слеш </html>.

Дальше переходим к тегу <head>, в этом контейнере находятся ссылки на вспомогательные файлы и другие теги.

Например, может находится тег < title >, который отвечает за название страницы на вкладке браузера.

А так он выглядит в уже в коде сайта в браузере

Или так в блокноте Notepad++

Переходим к тегу <body> - это тело сайта. Вся информация которая расположена между тегами <body> и </body>отображается на странице сайта в браузере.

Я думаю достаточно теории, и пора переходить к практике, пока я Вас не запутал.

Для того чтобы написать свой первый сайт нам необходимо будет скачать бесплатную программу блокнот Notepad++ отсюда. Версию можете качать самую последнюю.

Когда скачали установщик, просто запускаем его и устанавливаем.

Открываем программу и сделаем некоторые настройки, выставим кодировку нашего будущего сайта, чтобы русский язык отображался корректно в браузере. Для этого вверху в меню выбираем пункт «Кодировки» - «Кодировки >» - «Кириллица» - «Windows-1251»

Далее нужно выставить «Синтаксис», это нужно для того чтобы программа понимала на каком языке мы пишем код и могла показывать нам ошибки и делать подсветку тегов. Для этого переходим в «Синтаксисы» - «HTML»

Теперь программа готова, переключаемся на английский язык и приступаем. Первым делом напишем тег <html> открывающий и закрывающий </html>

Я между ними отступил клавишей Enter, так как весь остальной код будет располагаться между этими тегами.

Дальше впишем шапку из тегов <head> и <title>,между которыми напишем «Мой первый сайт!»как на скриншоте.

Давайте сохраним наш сайт и посмотрим, что у нас вышло. Для этого слева вверху нажимаем «Файл» - «Сохранить как…» и в появившемся окне выбираем путь куда сохранить, в моём случае на рабочий стол, пишем имя файла «index» (это стандартное имя исполняющего файла сайта) и нажимаем «Сохранить» .

Наш файл сохранился в виде файла браузера, который у Вас стоит по умолчанию. Чтобы запустить его просто нажмите 2 клика левой клавишей мыши. Если Вы хотите открыть его другим браузером, то нажимаем на нём правой клавишей мыши «Открыть с помощью» и выбираем нужный нам браузер.

И что же мы видим?

Мы видим, что сайт у нас чистый, а есть только название на вкладке браузера и то с ошибками))))

Возвращаемся в наш блокнот, а те кто закрыл уже блокнот, нажимаем на наш файл «index» правой клавишей мыши и «EditwithNotepad++»

И ищем нашу ошибку в коде. Так как мы знаем, что теги у нас парные, и если пара написана правильно, то она будет подсвечиваться. Давайте проверим все пары тегов нажав на них.

А вот тег <title> у нас не подсвечивается, когда нажимаем на него, по причине, что забыли в закрывающем теге поставить слеш / . Исправляем и проверяем. Чтобы быстро сохранить наш файл просто нажимаем сочетание клавиш «Ctrl+S» или «Дискетку» на панели вверху в блокноте.

Теперь добавим тело сайта тег «body» и напишем приветствие как на картинке.

Для тех, у кого слабое зрение увеличить код можно зажав клавишу Ctrl и покрутить колёсико мыши, таким образом мы можем увеличить или уменьшить масштаб кода.

Сохраняем наш файл и открываем в браузере для просмотра результата. У Вас должно получиться так.

Повторение и задание

Итак, давайте повторим и закрепим материал.

скелет сайта - это язык разметки HTML, который состоит по большей части из парных тегов;
закрывающий тег имеет слеш / в отличии от открывающего;
редактируем свой сайт в программе Notepad++, а просматриваем результат в браузере;
нужно запомнить 4 тега :<html>,<head>,<title>,<body>!

В следующем уроке мы поработаем с Вами: