Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
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>!

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

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

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

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

30 second exposure30 second exposure
30 second exposure30 second exposure

30 second exposure

30 second exposure

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

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

30 second exposure

0
24.121 GOLOS
На Golos с August 2017
Комментарии (2)
Сортировать по:
Сначала старые