С О З Д А Н И Е

Сайтов в Пензе

Урок 1. Что такое HTML в современном сайте

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

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

  • Лендинг. Простые одностраничные сайты, которые в основном применяются для раскрутки товара или услуги компании.
  • Корпоративный сайт. Это сайт, который рассказывает о деятельности компании и иногда предлагает список оказываемых услуг.
  • Интернет магазин. Тут не стоит объяснять, ведь интернет-магазином, наверно, уже пользовался каждый из нас.

Что же может объединять все эти категории сайтов? Всё очень просто. На самом деле, любой сайт делается путём написания тегов и скриптов. Тегами мы расставляем все объекты на нужные места, а скриптами мы управляем этой информацией. Ниже на примере, мы покажем, очень простой пример и разберём его:

 
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Новый сайт</title>
  5. </head>
  6. <body>
  7. <h1>Привет мир!</h1>
  8. </body>
  9. </html>

Уже стало страшно? Не волнуйтесь, ведь сейчас мы разберём каждую строчку этого кода. Цифрами слева показан номер строки. На них мы будем ссылаться, если нам будет трудно ориентироваться в коде дальше. А все остальное это разметка нашего HTML документа. Теги — то основные элементы, применяемые для отображения гипертекста. Одни теги могут быть оставаться открытыми (между тегами не будет других тегов), а другие необходимо закрывать (между тегами будет много других вложенных тегов).

Сначала необходимо показать какой тип документа будет отображаться в браузере. Для этого мы первой строкой объявляем тег html. В конце документа в строке номер 9 мы его закрываем, так как этот тег, внутри которого мы будем еще добавлять информацию. Теперь мы рассказали браузеру то, какой тип документа будет использоваться далее, теперь объявим заголовки. В нашем случае HTML.

Тег head отправляет особо важные информационные данные о сайте. Это могут быть: название всего документа, описание документа, перечисление ключевых слов, какие внешние скрипты надо подключить и т.д. В примере мы передаём два паратмера: в теге meta в параметрах (или атрибутах) мы указываем кодировку документа (в примере указан UTF-8) и в теге title мы указываем название всего документа, который будет отображаться во вкладке браузера. В нашем случае мы больше не передаём информационные данные в заголовке документа и закрывает тег head.

Мы подошли к самому главному тегу body, внутри которого происходит вся магия по созданию сайтов. Внутрь этого тега добавляется вся информация, которая будет отображаться на экране монитора: тексты, картинки, формы, видео и прочий контент. В примере мы добавили заголовок первого уровня h1 с текстом Привет мир. Подробнее о заголовках мы разберем в следующих уроках. Запомните, что основная работа по дизайну и наполнению сайтов происходит внутри тега body.

Скопируйте исходный код и попробуйте поменять информацию внутри тегов title и h1 в тестовой среде, которая находится ниже и посмотрите готовые результаты, чтобы лучше понять, что вы меняете и что происходит после изменений. Для этого необходимо перейти по ссылке Edit in JSFiddle в виджете тестовой среды.

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

Text.ru - 100.00%


Другие уроки

Информация

  • Дата : 19.11.2019 14:03
  • Категория : Веб-дизайн
  • Просмотров : 848
8