Наш автор @moneygroup продолжает обучать нас основам создания сайта. И сегодня даст нам несколько уроков по написанию сайта с помощью языков программирования. Продолжаем наше обучение!
Для тех, кто пропустил начало и только присоединился к нам - предыдущие уроки от @moneygroup:
Урок 1
Урок 2
Урок 3
Что мы сегодня узнаем и чему научимся?
- какие языки программирования нужны для написания сайта;
- что такое скелет сайта и из чего он строится;
- напишем код первого нашего сайта.
Просто о сложном
Итак, сайт, как мы уже знаем, это текстовые файлы, папки и картинки. Чтобы написать свой сайт, нужно владеть 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>!
В следующем уроке мы поработаем с Вами:
- над тегами форматирования текста;
- тегами добавления медиа файлов;
- теги ссылок и банеров.
Всем спасибо! Помните, что только практика сделала из обезьяны программиста!
Вам будут интересные следующие посты нашего сообщества:
 |  |
|---|---|
 |  |
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
francisgrey, natalia, polyideic, vasilisapor2, vika-teplo, shenanigan, polojayigor, propoker, marina-spring, moneygroup
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
dobryj.kit теперь стал Делегатом! Ваш голос важен для всего сообщества!!!
Поддержите нас: