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


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

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

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

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

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

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

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

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

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

О языках

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

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

О скелете

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

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

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

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

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

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

 Дальше переходим к тегу

, в этом контейнере находятся ссылки на вспомогательные файлы и другие теги.</p>
<p> Например, может находится тег < title >, который отвечает за название страницы на вкладке браузера.</p>
<p></p>
<p> А так он выглядит в уже в коде сайта в браузере </p>
<p></p>
<p> Или так в блокноте Notepad++</p>
<p></p>
<p> Переходим к тегу - это тело сайта. Вся информация которая расположена между тегами и 
отображается на странице сайта в браузере.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • над тегами форматирования текста;
  • тегами добавления медиа файлов;
  • теги ссылок и банеров.

 Всем спасибо! Помните, что только практика сделала из обезьяны программиста!

Вам будут интересные следующие посты нашего сообщества:

30 second exposure 30 second exposure
30 second exposure 30 second exposure

30 second exposure

30 second exposure

Контакты для приема работа:

• telegram: @galinak777
• почта: vp1freelance@gmail.com

30 second exposure


Comments 2


Биток все колбасит, не могу посчитать, хватит на машину или нет

18.11.2017 10:04
0