Что такое каркас HTML веб страницы или как создать сайт на языке программирования HTML

Здравствуйте, уважаемые читатели!

В этой статье мы с вами разберемся, что такое HTML верстка, что такое каркас HTML и как можно создать сайт на данном языке программирования. Читайте далее подробнее… Для начала разберемся: из чего же состоит любой сайт.

А состоит он из тегов – команд, которые говорят браузеру и компьютеру выполнить то или иное действие. По сути, компьютер – тупица ещё тот: пока не прикажешь – не сделает (хуже Орка из книг Толкиена).

Теги бывают:

  1. Парные (например, html, body, head и другие)
  2. Непарные (например, br)

Отличаются они друг от друга тем, что парные нужно закрывать, ограничивая их действие (закрытие происходит путём прописывания тега со знаком слэш: например, </html>), а непарные этого не требуют.

Сам по себе сайт напоминает живой организм. У него есть голова и тело (см. рис.):

chto-takoe-karkas-html-1

В «голове» сайта мы указываем информацию для поисковых систем и браузера, а в «теле» – то что увидит человек. Для подробного изучения языка программирования, рекомендую почитать «Учебник HTML» одного вебмастера.

Вводный курс по основам HTML окончен и приступим к творчеству

Для работы нам понадобятся следующее:

  • Текстовый редактор (Программа «Блокнот» находится в меню пуск в разделе «стандартные») или используйте классный редактор – notepad++;
  • Графический редактор (Paint наше всё), ну или фотошоп, его я использую всегда;
  • Калькулятор (те же «стандартные»);
  • Браузер (надо же как-то тестить то, что получится в процессе работы);

Первым делом создаём папку, в которой будут храниться страницы сайта и необходимые нам картинки.

После этого открываем блокнот и нажимаем «Файл» => «сохранить как».

В выскочившем окне выбираем тип файла «все файлы», а в пробеле «имя» пишем «index.html» (остальные страницы можешь называть как угодно с помощью латинских букв и цифр, вроде, “your_name.html”, но корневую называют index – традиция такая):

chto-takoe-karkas-html-2

Продолжаем работу в блокноте.

Сразу прописываем следующее:

chto-takoe-karkas-html-3

Это полный скелет сайта. Теперь нажмите «ctrl+s» (горячие клавиши функции «сохранение»). После этого ты сможешь в любой момент нажать на файл «index.html» и проверить качество работы.

В тайтле пишем название сайта и добавляем meta-теги (те самые теги для поисковика):

chto-takoe-karkas-html-4

  • Description-описание сайта. Краткое, буквально несколько строк
  • Keywords-ключевые слова, по которым этот сайт найдёт поисковик
  • Author- понятно и так – автор сайта

Примечание: не забывай закрывать парные теги, иначе будет выходить неведомая фигня:

chto-takoe-karkas-html-5

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

Оформление HTML

Вариантов решения есть два:

  • Использовать цвет заливки в качестве фона;
  • Использовать готовый фон;

Советую использовать первый вариант, так как есть шанс получить по рукам от хозяина той или иной картинки.

Открываем paint, нажимаем на «изменение цветов»:

chto-takoe-karkas-html-6

Выбираем базовый цвет и изменяем с помощью бегунков:

chto-takoe-karkas-html-7

После того как найдёшь понравившийся цвет – открой калькулятор. Там нажми «вид»=> «Программист»

Дальнейшие твои действия будут выглядеть так:

  1. Скопировал значение цвета:chto-takoe-karkas-html-8
  2. Вставил его в калькулятор:chto-takoe-karkas-html-9
  3. Перевела в шестнадцатеричную систему (перенеси флажок с dec на hex):chto-takoe-karkas-html-10
  4. Записал на бумажке и перешел к следующему.

В итоге у тебя получится что-то вроде: «Красный – 2E; Зелёный – E2; Синий – E)

Эти значения тебе нужно вставить в тег <bgcolor =” #RRGGBB”>, где “RR” это красный, GG – зелёный, а BB, соответственно, синий.

Таким же образом можно выбрать цвет текста на странице и вписать его тегом <TEXT=”#RRGGBB”> (“#000000” – чёрный цвет)

В блокноте мы получаем это (три буквы “SSS” чтобы проверить цвет шрифта)…

ak-sozdat-sozdat-sajt-na-html-11

А в браузере это (не забудь нажать «Ctrl+S» в блокноте перед тем как обновить страницу):ak-sozdat-sozdat-sajt-na-html-12

Этап реального программирования HTML верстки

Теперь нам предстоит наполнить сайт контентом.

Многие странички, как и наша, состоят, по сути, из таблицы с данными.

Например, мой сайт в «мозгах» компьютера выглядит так:

ak-sozdat-sozdat-sajt-na-html-13

А в реальности – так…

ak-sozdat-sozdat-sajt-na-html-114

Таблица создаётся парным тегом <table>. Для того, чтобы он не показывал её, нужно добавить border=”000000”:

ak-sozdat-sozdat-sajt-na-html-15

Новая строчка таблицы добавляется парным тегом <tr>, а новая ячейка-парным <td>.

  1. Поместим шапку на её законном месте
  2. Сначала узнаем, каковы её высота (height) и ширина(width)
  3. Нажми на неё правой кнопкой мыши «свойства» => «подробно»
  4. Там будут указаны необходимые нам показатели в пикселях

Создадим строчку(<tr></tr>), ячейки в строчке(<td></td>), и прикрепляем картинку указывая известные данные:

ak-sozdat-sozdat-sajt-na-html-16

На сайте увидим это:

ak-sozdat-sozdat-sajt-na-html-17

Таким же макаром вписываем текст и гиперссылки на другие страницы.

В итоге получаем что-то вроде этого в коде:

ak-sozdat-sozdat-sajt-na-html-19

И этого на сайте.

Похожим способом делаем остальные страницы (всего их должно быть пять: одна корневая, которая index, и четыре с ней связанных), не забывая вставлять взаимные гиперссылки.

Теги, которые тебе могут понадобиться:

  • <b>Жирный текст</b>
  • <i>курсив</i>
  • <u>подчёркивание</u>
  • <br>абзац (непарный тег)

На этом пока все. Пускай, это будет первая часть HTML верстки и создание сайта не затянется у вас на долго, так как я скоро напишу вторую часть, и вы создадите новый сайт, а также изучите язык программирования HTML.

Для того, чтобы не пропустить новую статью, подписывайтесь на обновления моего блога, нажав здесь. До встречи в новой статье!

С уважением, Алексей Кобзарев

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *