Как написать сайт на html пошаговая инструкция: Sozdanie Sajtov Kak Sozdat Sajt Html V Bloknote %23I

Содержание

пошаговая инструкция, технология и рекомендации

и многие другие.

Элементы идентифицируются с помощью угловых скобок , окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа ; например,

.

Закрывающий тег отмечает конец элемента. Он состоит из символа ; например,

.

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег и закрывающий тег . Что находится между этими двумя тегами будет содержимым ссылки.

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

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь — мы расшифруем всё по ходу.

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , ,

и .

Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.

Внутри элемент

определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.

Всё видимое содержимое веб-страницы будет находиться в элементе

. Структура типичного HTML-документа выглядит следующим образом: Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы

и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент включает в себя заголовок через элемент

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

и вложены и сдвинуты внутри элемента . Структура отступов для элементов продолжается с новыми добавленными элементами внутри и .

Самозакрывающиеся элементы

В предыдущем примере элемент был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. является одним из таких элементов. Содержимое элемента в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:

Приведённая структура, сделанная с помощью объявления типа документа и элементов ,

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

Валидация кода

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

На практике

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


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

Основные термины CSS

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

Селекторы

При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы

P { … }

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам

P { color: …; font-size: …; }

Значения

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

И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.

P { color: orange; font-size: 16px; }

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

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

Знание нескольких основных терминов и общего синтаксиса CSS — это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.

Работа с селекторами

Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы

мы должны использовать селектор div . Следующий код показывает селектор типа для элементов , а также соответствующий HTML.

Div { … }

Классы

Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы

и

Awesome { … }

Идентификаторы

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.

Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .

#shayhowe { … }

Дополнительные селекторы

Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.

Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.

Подключение CSS

Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента

нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.

Другие варианты добавления CSS

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

Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

Внутри элемента

применяется элемент , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент

указывает на внешний стилевой файл.

Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени — это решение вы должны будете сделать на основе того, что лучше для вашего сайта.

Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.

На практике

Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.

  1. Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
  2. Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
  3. Просматривая файл index.html в браузере мы можем видеть, что элементы

    Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.

    /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: «»; content: none; } table { border-collapse: collapse; border-spacing: 0; }

  4. Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент в , сразу после элемента .
  5. Поскольку мы указываем на стили через элемент добавьте атрибут rel со значением stylesheet .
  6. Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .

    Styles Conference

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

  • Разница между HTML и CSS.
  • Знакомство с элементами HTML, тегами и атрибутами.
  • Настройка структуры вашей первой веб-страницы.
  • Знакомство с селекторами CSS, свойствами и значениями.
  • Работа с селекторами CSS.
  • Указатель на CSS из HTML.
  • Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

  • Common HTML terms via Scripting Master
  • CSS Terms & Definitions via Impressive Webs
  • CSS Tools: Reset CSS via Eric Meyer

Рекомендуем также

Loading…

Свежие статьи

Популярные статьи

Создание сайта html в блокноте с нуля – Блог opengs.ru

Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
  4. Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

Структура html документа

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок страницы для браузера</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
 </head>
 <body>
  <h2>Заголовок страницы</h2>
  <!-- Комментарий -->
  <p>Абзац.</p>
   
 </body>
</html>

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

<head>...</head>

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

<body>...</body>

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

{module 110}

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
    </div>
</body>
</html>

И добавь в style.css такой код:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

<!-- Шапка сайта -->
    <div>
    <a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
    <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
</div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
    </div>
</body>
</html>

И добавляем в файл css строки:

/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

<!-- Шапка сайта -->
            <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>

Этот код:

<!-- Верхнее меню сайта -->
    <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
    </div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
    </div>
</body>
</html>

А в файл style.css:

/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта -->
<div>
......
</div>

Добавляем следующее:

<!-- Левое меню и Контент -->
            <div>
             
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
        <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
  
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                  
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
  
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
  
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
  
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
  
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
           
        </div>
             
        <!-- Левое меню - левый блок блок -->
        <div>
            <div>
                <div></div>
                <div>
                <ul>
                <li><a href="#">Кофе Айриш</a></li>
                <li><a href="#">Кофе Американо</a></li>
                <li><a href="#">Кофе Глясе</a></li>
                <li><a href="#">Кофе Диппио</a></li>
                <li><a href="#">Кофе Капучино</a></li>
                <li><a href="#">Кофе Кон Панна</a></li>
                <li><a href="#">Кофе Коретто</a></li>
                <li><a href="#">Кофе Латте</a></li>
                <li><a href="#">Кофе Лунго</a></li>
                </ul>
                </div>
            <div></div>
            </div>
              
        </div>
          
        </div>
          
    </div>
</body>
</html>

И в конец файла css копируем:

/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->
<div>
...
</div>

Вставляем:

<div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>
         
        <div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
        </div>
        <div></div>
         
    </div>
</body>
</html>

В файл css добавляем код в самый низ:

/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
 
/*Шапка сайта*/
#head-site {height:70px;}
li.none-bg {background:none!important;}
.telefon {float:right;}
 
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
 
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
 
/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
 
/*Левое меню - левый блок*/
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
 
 
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

 

Другие страницы сайта и ссылки меню

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

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

  • o-nas.html – О нас
  • assortiment.html – Ассортимент
  • otzivi.html – Отзывы
  • zabronirovat-stolik.html – Забронировать столик
  • nashi-klienty.html – Наши клиенты
  • kontakty.html – Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html – Кофе Айриш
  • kofe-amerikano.html – Кофе Американо
  • kofe-glyase.html – Кофе Глясе
  • kofe-dippio.html – Кофе Диппио
  • kofe-kapuchino.html – Кофе Капучино
  • kofe-kon-panna.html – Кофе Кон Панна
  • kofe-koretto.html – Кофе Коретто
  • kofe-latte.html – Кофе Латте
  • kofe-lungo.html – Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="/o-nas.html">О нас</a></li>
            <li><a href="/assortiment.html">Ассортимент</a></li>
            <li><a href="/otzivi.html">otzivi.html</a></li>
            <li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>
            <li><a href="/nashi-klienty.html">Наши клиенты</a></li>
            <li><a href="/kontakty.html">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>
                    <li><a href="/kofe-amerikano.html">Кофе Американо</a></li>
                    <li><a href="/kofe-glyase.html">Кофе Глясе</a></li>
                    <li><a href="/kofe-dippio.html">Кофе Диппио</a></li>
                    <li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>
                    <li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>
                    <li><a href="/kofe-koretto.html">Кофе Коретто</a></li>
                    <li><a href="/kofe-latte.html">Кофе Латте</a></li>
                    <li><a href="/kofe-lungo.html">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>
        <div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div></div>
         
    </div>
</body>
</html>

Теперь жми “Сохранить” потом “Файл > Сохранить как” и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

Создание веб-сайта. Курс молодого бойца / Хабр

Как-то меня попросили провести небольшой семинар в лицее, где я когда-то учился, по созданию веб-сайта. В процессе написания речи я подумал, что она может вылиться в материал, который, возможно, будет полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую на истину в первой инстанции и всё изложенное носит чисто личностный взгляд на работу с дизайном и кодом. Статья даёт поверхностный взгляд на понятия и средства, которые, на мой взгляд, могут стать неплохим стартом для того, кто готов идти дальше.


Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:


Данный этап можно разделить на несколько подэтапов:

  • Создание идеи
  • Разработка структуры проекта
  • Проработка макета проекта

Создание идеи

На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.

Разработка структуры проекта

Когда мы определились с темой проекта, подобрали необходимый материал, следующим этапом будет разработка структуры проекта. Структура проекта подразумевает под собой разделы сайта, в соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. На данном этапе можно классифицировать материал по темам и разделам.

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Основные элементы страницы

Зачастую основными элементами страницы являются:

содержащий блок (wrapper, container)

,

логотип

,

навигация

,

контент

,

футер (нижний колонтитул)

,

свободное пространство

(по сути свободное пространство — это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, наш проект не будет выглядеть как нагромождение блоков).

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Навигация

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

Контент – это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет


Фиксированный макет

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:


Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

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

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

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

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

Полезные ссылки и материалы:


Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

  • Навигация в левом столбце

  • Навигация в правом столбце

  • Навигация в трёх столбцах

  • Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне.

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

После создания макета проекта можно переходить непосредственно к созданию дизайн-макета. На данном этапе начать стоит с определения цветовой гаммы проекта.

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:

  • Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

  • Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

  • COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

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

Элементы Call to Action

Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

Данное понятие применяется чаще при дизайне главных страниц, страниц акций и пр., где необходимо подтолкнуть пользователя к тому или иному действию: подписка, покупка и пр. Если перевести данный акроним на русский, то мы получим следующие понятия:

  • Привлечение внимания
  • Интерес
  • Желание
  • Действие

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

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

Схема просмотра страницы

Довольно часто встречается Z-схема просмотра страницы. В соответствии с этим элементы страницы обычно располагают следующим образом: логотип слева вверху, меню справа вверху, информационные блоки, картинки слева внизу, кнопка с призывом к действию справа внизу.

Визуальные направляющие

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

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

Тот же эффект продемонстрирован на втором изображении с наложенной тепловой картой: в первом случае нас привлекает в основном прямой взгляд ребенка (прямо в глаза), во втором случае направление взгляда ребенка и его поза невольно обращают взгляд пользователя на блок справа.

Фрэймворки

Стоит так же отметить, что иногда, при разработке дизайна страницы, используют фрэймворки

Bootstrap

,

Foundation

,

Material Design Lite

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

Использование данных библиотек может в значительной мере сэкономить время при разработке проекта (дизайне, вёрстке), правда в то же время может сделать ваш сайт похожим на другие, если использовать элементы дизайна фрэймворков как есть. На основе каждого фрэймворка можно найти огромное количество платных и бесплатных тем и страниц, а так же разработать свои.


Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)

Трэнды

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

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

Скевоморфизм уже продолжительное время уступает свои позиции плоскому дизайну. Данное понятие означает наделение интерактивных элементов качествами реальных. Например, оформление страницы с книгами в виде книжной полки, оформление кнопки на подобии настоящей с соответствующей имитацией нажатия, использование реальных текстур и пр. Данный принцип активно использовался при создании страниц буквально пару лет назад, но затем тенденции сменились и на первый план вышел плоский дизайн (Flat, Material).

Плоский дизайн

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

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:


От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Обзоры текстовых редакторов:


Структура проекта

Под структурой проекта понимается хранение файлов проекта в его директории. Часто приходится видеть, когда все файлы «свалены» вместе, названия файлам даны «капсом», цифрами или русскими буквами и пр. Во-первых, это банальное неуважение к тому, кто будет работать с вашим проектом далее, во-вторых, чем больше будет ваш проект, тем больше будет становиться файлов и, в конце концов, вы просто запутаетесь, что к чему относится и что нужно, а что нет.

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

Итак, определившись с редактором кода, структурой мы можем приступать к разработке. Прежде всего стоит отметить, что вёрстка страницы делается поэтапно: сначала пишется HTML-структура (HTML-код), затем добавляются стили, а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:


Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (

https://github.com/afarkas/html5shiv

), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (

https://modernizr.com/

) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

На этапе написания HTML мы, как бы, создаём скелет страницы, её абстрактную модель при помощи тэгов (языка разметки HTML). Стоит отметить, что структуру может быть проще написать, если у нас есть прототип, составленный на первом этапе или же, если мы сами, глядя на дизайн-макет, на бумаге схематично разрисовали себе все блоки страницы.

При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

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

БЭМ

и расшифровывается, как

Блок Элемент Модификатор

.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций.

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход

SMACSS

(расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

  • К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
  • К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
  • К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
  • Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
  • Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

  • Макет: .l- или .layout-
  • Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.
  • Состояния имеют префикс .is-, например .is-hidden {}
  • Уровень Темы именуется подобно модулям.

При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле.

Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался

reset.css

, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css


Normalize.css

наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

Почему это важно? Во-первых, вы не делаете лишнюю работу, во-вторых, вам не нужно потом среди 10000 строк искать нужное правило и, наконец, чем больше строк кода, тем больше размер файла, а большие по объему файлы медленнее передаются по сети, что в свою очередь может быть причиной долгой загрузки, а излишняя специфичность причиной долгой отрисовки вашей страницы.

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

Возвращаясь к Mobile First, стоит сказать, что при работе в данной концепции написание стилей стоит начинать с мобильной версии, а затем с помощью медиа запросов добавлять правила, которые будут работать на других разрешениях. Зачастую, при расширении правил от мобильной версии к десктопной, приходится писать гораздо меньше кода, чем при работе наоборот: от десктопной версии к мобильной.

Полезные ссылки и материалы:


Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.

Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат):

http://jsbin.com/

.

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

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

Статьи с рекомендациями по написанию JS, HTML и CSS:


Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (

http://emmet.io/

). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка

.block>ul.list>li.list__item*3

, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка

w:100px+h:150px+bgc:#ff0

раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

Благодаря данным средствам писать код становится быстрее и приятнее, так как вы меньше времени тратите на написания закрывающих блоков, переходам по строчкам, а так же уменьшается возможность, касательно html, не закрыть тот или иной элемент разметки. В плане CSS, например, становится легче работать с браузерными префиксами, так как одна строчка с CSS3 свойством может быть раскрыта в несколько с добавлением необходимых префиксов.

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (

http://jade-lang.com/

). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (

https://nodejs.org/en/

,

http://nodejs.ru/

).

Командная строка

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (

http://sass-lang.com

/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь:

http://sass-lang.com/install

.

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку:

http://www.initializr.com/

. Опять-таки, принцип прост: зачем тратить время на написание одних и тех же строк или на проделывание одних и тех же манипуляций, если мы сразу можем сосредоточиться непосредственно на работе с проектом.

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния.

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

Надеюсь, что все описанные вещи будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.

4. Создание простой страницы: (обзор HTML)

Глава 4. Создание простой страницы: (обзор HTML)

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

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

Вот что я хочу, чтобы вы вынесли из этой главы:

  • Почувствуйте, как работает разметка, включая понимание элементов и атрибутов.

  • Узнайте, как браузеры интерпретируют HTML-документы.

  • Изучите базовую структуру документа HTML.

  • Получите первое представление о таблице стилей в действии.

На данном этапе не беспокойтесь об изучении конкретных текстовых элементов или правил таблиц стилей; мы вернемся к ним в следующих главах.А пока просто обратите внимание на процесс, общую структуру документа и новую терминологию.

Вы познакомились с HTML-документом в главе 2, но теперь вам предстоит создать его самостоятельно и поэкспериментировать с ним в браузере. Демонстрация в этой главе состоит из пяти шагов, которые охватывают основы создания страниц.

  • Шаг 1: Начните с содержимого.  В качестве отправной точки мы напишем необработанный текстовый контент и посмотрим, что с ним сделают браузеры.

  • Шаг 2: Задайте структуру документа.  Вы узнаете о синтаксисе HTML-элементов и элементах, определяющих структуру документа.

  • Шаг 3: Определение текстовых элементов.  Вы опишете контент, используя соответствующие текстовые элементы, и узнаете, как правильно использовать HTML.

  • Шаг 4: Добавьте изображение.  Добавив изображение на страницу, вы узнаете об атрибутах и ​​пустых элементах.

  • Шаг 5: Измените внешний вид страницы с помощью таблицы стилей.  В этом упражнении вы познакомитесь с форматированием контента с помощью каскадных таблиц стилей.

К тому времени, как мы закончим, вы напишете исходный документ для страницы, показанной на рис. 4-1. Это не очень красиво, но нужно с чего-то начинать.

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

Прежде чем мы начнем, запустите текстовый редактор

В этой главе и на протяжении всей книги мы будем писать HTML-документы вручную, поэтому первое, что нам нужно сделать, это запустить текстовый редактор. Для этих целей подойдет текстовый редактор, поставляемый с вашей операционной системой, например Блокнот (Windows) или TextEdit (Macintosh).Другие текстовые редакторы подходят, если вы можете сохранять текстовые файлы с расширением .html . Если у вас есть WYSIWYG-инструмент для веб-разработки, такой как Dreamweaver, пока отложите его. Я хочу, чтобы вы почувствовали, как вручную размечать документ (см. врезку HTML «Трудный путь»).

В этом разделе показано, как открывать новые документы в Блокноте и TextEdit. Даже если вы использовали эти программы раньше, просмотрите некоторые специальные настройки, которые сделают упражнения более плавными.Мы начнем с Блокнота; Пользователи Mac могут идти вперед.

Рис. 4-1. В этой главе мы шаг за шагом напишем исходный документ для этой страницы.

Создание нового документа в Блокноте (Windows)

Ниже приведены шаги по созданию нового документа в Блокноте в Windows 7 (рис. 4-2):

  1. Аксессуары). 1

  2. Щелкните Блокнот, чтобы открыть новое окно документа, и вы готовы начать печатать.2

  3. Далее мы сделаем расширения видимыми. Этот шаг не требуется для создания HTML-документов, но он поможет сделать типы файлов более понятными с первого взгляда. Выберите «Параметры папки…» в меню «Инструменты» 3 и перейдите на вкладку «Вид». 4. Найдите «Скрыть расширения для известных типов файлов» и снимите этот флажок. 5 Нажмите OK, чтобы сохранить настройку, и теперь расширения файлов будут видны.

Примечание

В Windows 7 нажмите клавишу ALT, чтобы открыть меню для доступа к инструментам и параметрам папки.В Windows Vista он помечен как «Папка и параметры поиска».

Рис. 4-2. Создание нового документа в Блокноте.

Создание нового документа в TextEdit (Mac OS X)

По умолчанию TextEdit создает документы с форматированным текстом, то есть документы со скрытыми инструкциями по форматированию стиля для выделения текста жирным шрифтом, установки размера шрифта и т. д. . Вы можете сказать, что TextEdit находится в режиме форматированного текста, когда у него есть панель инструментов форматирования в верхней части окна (в режиме обычного текста ее нет).HTML-документы должны быть текстовыми документами, поэтому нам нужно изменить формат, как показано в этом примере (рис. 4-3).

  1. Используйте Finder, чтобы найти в папке Applications TextEdit. Найдя его, дважды щелкните имя или значок, чтобы запустить приложение.

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

  3. Откройте диалоговое окно «Настройки» в меню «Редактирование текста».

  4. Необходимо настроить три параметра:

    На вкладке «Новый документ» выберите «Обычный текст».

    На вкладке «Открыть и сохранить» выберите «Игнорировать команды форматированного текста в файлах HTML» и отключите «Добавлять расширения «.txt» к обычным текстовым файлам».

  5. Когда вы закончите, нажмите красную кнопку в верхнем левом углу.

  6. Когда вы создаете новый документ, меню форматирования больше не будет, и вы сможете сохранить свой текст как HTML-документ.Вы всегда можете преобразовать документ обратно в форматированный текст, выбрав «Формат» → «Создать форматированный текст», если вы не используете TextEdit для HTML.

Рис. 4-3. Запуск TextEdit и выбор настроек обычного текста в настройках.

Шаг 1. Начните с содержимого

Теперь, когда у нас есть новый документ, пора печатать. Веб-страница всегда начинается с контента, поэтому мы начнем нашу демонстрацию именно с этого. Упражнение 4-1 | Ввод содержимого позволяет ввести необработанное текстовое содержимое и сохранить документ в новой папке.

Наш контент выглядит не очень хорошо (рис. 4-5). Весь текст слился воедино — в исходном документе он выглядел иначе. Здесь есть пара вещей, которым нужно научиться. Первое, что бросается в глаза, это то, что браузер игнорирует разрывы строк в исходном документе. На боковой панели «Что браузеры игнорируют» указана другая информация в источнике, которая не отображается в окне браузера.

Во-вторых, мы видим, что недостаточно просто ввести какой-либо контент и назвать документ .html .Хотя браузер может отображать текст из файла, мы не указали структуру содержимого. Вот где вступает в дело HTML. Мы будем использовать разметку для добавления структуры: сначала к самому HTML-документу (этап 2), затем к содержимому страницы (шаг 3). Как только браузер узнает структуру содержимого, он может отображать страницу более осмысленно.

Шаг 2. Задайте структуру документа

Наш контент сохранен в документе .html — теперь мы готовы приступить к его разметке.

Представляем…HTML-элементы

В главе 2 вы видели примеры HTML-элементов с открывающим тегом (например,

для абзаца) и закрывающим тегом ( ). Прежде чем мы начнем добавлять теги в наш документ, давайте рассмотрим анатомию элемента HTML (его синтаксис ) и закрепим некоторые важные термины. Общий элемент контейнера помечен на рис. 4-6.

Элемент состоит как из содержимого, так и из его разметки.

Рис. 4-6. Части элемента контейнера HTML.

Элементы идентифицируются тегами в текстовом источнике. Тег состоит из имени элемента (обычно это аббревиатура более длинного описательного имени) в угловых скобках ( < > ). Браузер знает, что любой текст в скобках скрыт и не отображается в окне браузера.

Имя элемента появляется в открывающем теге (также называемом начальным тегом ) и снова в закрывающем теге (или конце ) , которому предшествует косая черта ( 30 / ).Закрывающий тег работает как выключатель для элемента. Будьте осторожны, чтобы не использовать подобный символ обратной косой черты в конечных тегах (см. совет Знакомство с элементами HTML).

Теги, добавленные к содержимому, называются разметкой . Важно отметить, что элемент состоит как из содержимого , так и его разметки (начальный и конечный теги). Однако не все элементы имеют содержание. Некоторые пусты по определению, например элемент img , используемый для добавления изображения на страницу.Мы поговорим о пустых элементах чуть позже в этой главе.

И последнее… заглавные буквы. В HTML использование заглавных букв в именах элементов не имеет значения. Таким образом, , и — все они одинаковы для браузера. Однако в XHTML (более строгая версия HTML) все имена элементов должны быть строчными, чтобы они были действительными. Многим веб-разработчикам понравилась упорядоченность более строгих правил разметки XHTML, и они придерживаются всех строчных букв, как я буду делать в этой книге.

Подсказка

Косая черта и обратная косая черта

HTML-теги и URL-адреса используют символ косой черты (/). Символ косой черты находится под вопросительным знаком (?) на стандартной клавиатуре QWERTY.

Косую черту легко спутать с обратной косой чертой (\), которая находится под чертой (|). Клавиша обратной косой черты не будет работать в тегах или URL-адресах, поэтому будьте осторожны и не используйте ее.

На рис. 4-7 показан рекомендуемый минимальный скелет документа HTML5.Я говорю «рекомендуется», потому что единственный элемент, который является обязательным в HTML, — это title . Но я считаю, что лучше, особенно для начинающих, явно организовывать документы с соответствующей структурной разметкой. И если вы пишете в более строгом XHTML, все следующие элементы, кроме meta , должны быть включены, чтобы быть действительными. Давайте посмотрим, что происходит на рис. 4-7.

  1. Не хочу путать, но первая строка в примере вообще не элемент; это объявление типа документа (также называемое объявлением DOCTYPE ), которое идентифицирует этот документ как документ HTML5.Я могу многое сказать об объявлениях DOCTYPE в главе 10, но для этого обсуждения достаточно сказать, что их включение позволяет современным браузерам понять, что они должны интерпретировать документ так, как он написан в соответствии со спецификацией HTML5.

  2. Весь документ содержится в элементе html . Элемент html называется корневым элементом , поскольку он содержит все элементы документа и не может содержаться ни в каком другом элементе.Он используется как для документов HTML, так и для документов XHTML.

  3. Внутри элемента html документ делится на заголовок и тело . Элемент head содержит описательную информацию о самом документе, такую ​​как его заголовок, используемые таблицы стилей, скрипты и другие типы «мета» информации.

  4. Элементы meta внутри элемента head предоставляют информацию о самом документе.Мета-элемент может использоваться для предоставления всех видов информации, но в этом случае он определяет кодировку символов (стандартизированный набор букв, цифр и символов), используемую в документе. Я не хочу вдаваться в подробности прямо сейчас, но знаю, что есть много веских причин для указания кодировки в каждом документе, поэтому я включил ее как часть минимальной структуры документа.

    Примечание

    До HTML5 синтаксис для указания набора символов с помощью метаэлемента был немного более сложным.Если вы пишете свои документы в HTML 4.01 или XHTML 1.0, ваш элемент meta должен выглядеть так:

      http-equiv="content-type" content="text/html;charset =UTF-8"  > 
  5. Также в head есть обязательный элемент title . Согласно спецификации HTML каждый документ должен содержать описательный заголовок.

  6. Наконец, элемент body содержит все, что мы хотим отобразить в окне браузера.

Рис. 4-7. Минимальная структура HTML-документа.

Готовы ли вы добавить некоторую структуру на домашнюю страницу бистро Black Goose? Откройте документ index.html и перейдите к Упражнению 4-2 | Добавление базовой структуры.

После структурирования документа мало что изменилось, за исключением того, что браузер теперь отображает заголовок документа в верхней панели или на вкладке. Если бы кто-то добавил эту страницу в закладки, этот заголовок также был бы добавлен в его список закладок или избранного (см. врезку «Не забудьте хороший заголовок»).Но содержимое по-прежнему работает вместе, потому что мы не дали браузеру никаких указаний о том, как оно должно быть структурировано. Мы позаботимся об этом дальше.

Шаг 3. Определение текстовых элементов

Имея за плечами небольшой опыт разметки, не составит труда добавить разметку, определяющую заголовки и подзаголовки ( h2 и h3 9 ) , абзацы ( p ) и выделенный текст ( em ) к нашему содержимому, как мы сделаем в упражнении 4-3 | Определение текстовых элементов.Однако, прежде чем мы начнем, я хочу поговорить о том, что мы делаем и чего не делаем при разметке контента с помощью HTML.

Знакомство с... семантической разметкой

Целью HTML является придание смысла и структуры содержимому. Это , а не предназначено для предоставления инструкций о том, как должен выглядеть контент (его представление).

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

Помимо придания смысла содержанию, разметка определяет структуру документа.То, как элементы следуют друг за другом или вложены друг в друга, создает отношения между элементами. Вы можете думать об этом как о схеме (ее техническое название — DOM , для Объектная модель документа ). Базовая иерархия документов важна, потому что она дает браузерам подсказки о том, как обращаться с содержимым. Это также основа, на которой мы добавляем инструкции по презентации с таблицами стилей и поведением с помощью JavaScript. Подробнее о структуре документа мы поговорим в части III, когда будем обсуждать каскадные таблицы стилей, и в части IV в обзоре JavaScript.

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

Ладно, хватит лекций. Пришло время поработать над содержанием в упражнении 4-3 | Определение текстовых элементов.

Теперь мы кое-что получили. Теперь, когда элементы правильно идентифицированы, браузер может отображать текст более осмысленно. Следует отметить несколько важных моментов в отношении того, что происходит на рис. 4-9.

Блочные и строчные элементы

Хотя это может показаться констатацией очевидного, стоит отметить, что элементы заголовков и абзацев начинаются с новых строк и не идут вместе, как раньше.Это связано с тем, что по умолчанию заголовки и абзацы отображаются как блочных элементов . Браузеры обрабатывают блочные элементы так, как будто они находятся в маленьких прямоугольных коробках, сложенных на странице. Каждый элемент блока начинается с новой строки, и по умолчанию сверху и снизу от всего элемента также обычно добавляется некоторое пространство. На рисунке 4-10 края блочных элементов обведены красным.

Рисунок 4-10. Контуры показывают структуру элементов домашней страницы.

Напротив, посмотрите на текст, который мы выделили как подчеркнутый ( em ).Он не начинает новую строку, а остается в потоке абзаца. Это потому, что элемент em является встроенным элементом . Строчные элементы не начинают новые строки; они просто плывут по течению. На рисунке 4-10 встроенный элемент em обведен голубым.

Еще одна вещь, которую вы заметите на размеченной странице на рис. 4-9 и рис. 4-10, заключается в том, что браузер пытается придать странице некоторую визуальную иерархию, делая заголовок первого уровня самым большим и жирным. вещь на странице, с заголовками второго уровня немного меньше, и так далее.

Как браузер определяет, как должен выглядеть h2 ? Он использует таблицу стилей! Все браузеры имеют свои собственные встроенные таблицы стилей (называемые в спецификации таблицами стилей пользовательского агента ), которые описывают отображение элементов по умолчанию. Отображение по умолчанию одинаково в разных браузерах (например, h2 всегда большие и полужирные), но есть некоторые варианты (длинные кавычки могут быть с отступом или без).

Если вы считаете, что h2 слишком большой и неуклюжий для отображения в браузере, просто измените его с помощью правила таблицы стилей.Не поддавайтесь желанию разметить заголовок другим элементом, чтобы он выглядел лучше, например, используя h4 вместо h2 , чтобы он не был таким большим. До повсеместной поддержки таблиц стилей элементами злоупотребляли именно таким образом. Теперь, когда есть таблицы стилей для управления дизайном, вы всегда должны выбирать элементы, основываясь на том, насколько точно они описывают контент, и не беспокойтесь о рендеринге браузера по умолчанию.

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

Что интересного в веб-странице без изображения? В упражнении 4-4 | Добавляя изображение, мы добавим изображение на страницу с помощью элемента img . Изображения будут обсуждаться более подробно в главе 7, а сейчас это дает нам возможность представить еще два основных понятия разметки: пустые элементы и атрибуты.

До сих пор почти все элементы, которые мы использовали на домашней странице Black Goose Bistro, следовали синтаксису, показанному на рис. 4-6: часть текстового содержимого, окруженная начальным и конечным тегами.

Однако несколько элементов не имеют текстового содержимого, поскольку они используются для предоставления простой директивы. Говорят, что эти элементы пусты . Элемент изображения ( img ) является примером такого элемента; он говорит браузеру получить файл изображения с сервера и вставить его в это место в потоке текста. Другие пустые элементы включают разрыв строки ( br ), тематические разрывы ( hr ) и элементы, предоставляющие информацию о документе, но не влияющие на его отображаемое содержимое, например метаданные . элемент, который мы использовали ранее.

На рис. 4-11 показан очень простой синтаксис пустого элемента (сравните с рис. 4-6). Если вы пишете документ XHTML, синтаксис немного отличается (см. врезку Пустые элементы в XHTML).

Рис. 4-11. Пустая структура элемента.

Вернемся к добавлению изображения с пустым элементом img . Очевидно, что тег сам по себе не очень полезен — нет способа узнать, какое изображение использовать. Вот где появляются атрибуты. Атрибуты — это инструкции, уточняющие или изменяющие элемент. Для элемента img требуется атрибут src (сокращение от «источник»), который указывает местоположение (URL) файла изображения.

Рисунок 4-12. Элемент img с атрибутами.

Синтаксис атрибута следующий:

  attributename="value"  

Атрибуты идут после имени элемента, разделенного пробелом.В непустых элементах атрибуты идут только в открывающем теге:

  attributename="value"  >
 attributename="value"  >Content 

Вы также можете поместить более одного атрибута в элемент в любом порядке. Просто держите их разделенными пробелами.

  attribute1="value" attribute2="value"  > 

Чтобы взглянуть на это с другой стороны, на рис. 4-12 показан элемент img с помеченными необходимыми атрибутами.

Вот что вам нужно знать об атрибутах:

  • Атрибуты идут после имени элемента только в открывающем теге, а не в конце тега.

  • К элементу может быть применено несколько атрибутов, разделенных пробелами в открывающем теге. Их порядок не важен.

  • Большинство атрибутов принимают значения, следующие за знаком равенства (=). В HTML некоторые значения атрибутов могут быть сокращены до отдельных описательных слов — например, атрибут checked , который устанавливает флажок при загрузке формы.Однако в XHTML все атрибуты должны иметь явные значения ( checked="checked" ). Вы можете услышать, что этот тип атрибута называется логическим атрибутом , потому что он описывает функцию, которая либо включена, либо выключена.

  • Значение может быть числом, словом, строкой текста, URL-адресом или измерением, в зависимости от назначения атрибута. В этой книге вы встретите примеры всего этого.

  • Некоторые значения не обязательно заключать в кавычки в HTML, но XHTML требует их.Многим разработчикам нравится согласованность и аккуратность кавычек даже при создании HTML. Допустимы одинарные или двойные кавычки, если они используются последовательно; однако двойные кавычки являются общепринятым. Обратите внимание, что кавычки в файлах HTML должны быть прямыми («»), а не изогнутыми («»).

  • Некоторые атрибуты являются обязательными, например атрибуты src и alt в элементе img .

  • Имена атрибутов, доступные для каждого элемента, определены в спецификациях HTML; другими словами, вы не можете создать атрибут для элемента.

Теперь вы должны быть более чем готовы попробовать свои силы в добавлении элемента img с его атрибутами на страницу Black Goose Bistro в следующем упражнении. Мы также добавим несколько разрывов строк.

Шаг 5. Изменение внешнего вида с помощью таблицы стилей

В зависимости от содержания и цели вашего веб-сайта вы можете решить, что отображение вашего документа в браузере по умолчанию является вполне адекватным.Тем не менее, я думаю, что хотел бы немного приукрасить домашнюю страницу бистро Black Goose, чтобы произвести хорошее первое впечатление на потенциальных посетителей. «Приведение в порядок» — это просто мой способ сказать, что я хотел бы изменить его представление, которое является работой каскадных таблиц стилей (CSS).

В упражнении 4-5 | Добавляя таблицу стилей, мы изменим внешний вид текстовых элементов и фон страницы, используя некоторые простые правила таблицы стилей. Не беспокойтесь о том, чтобы понять их все прямо сейчас; мы рассмотрим CSS более подробно в части III.Но я хочу, по крайней мере, дать вам представление о том, что значит добавить «слой» представления к структуре, которую мы создали с помощью нашей разметки.

Мы закончили со страницей бистро Black Goose. Вы не только написали свою первую веб-страницу с таблицей стилей, но также узнали об элементах, атрибутах, пустых элементах, блочных и встроенных элементах, базовой структуре HTML-документа и правильном использовании разметки. путь. Неплохо для одной главы!

Предыдущая демонстрация прошла гладко, но при вводе HTML-разметки вручную легко ошибиться в мелочах.К сожалению, один пропущенный символ может испортить целую страницу. Я намеренно разорву свою страницу, чтобы мы могли видеть, что происходит.

Что делать, если я забыл ввести косую черту ( / ) в закрывающем теге выделения ( )? Если не на своем месте всего один символ (рис. 4-16), остальная часть документа отображается выделенным (курсивом) текстом. Это потому, что без этой косой черты ничто не говорит браузеру «выключить» выделенное форматирование, поэтому он просто продолжает работать.

Примечание

Пропуск косой черты в закрывающем теге (или даже пропуск самого закрывающего тега) для блочных элементов, таких как заголовки или абзацы, может быть не таким драматичным. Браузеры интерпретируют начало нового блочного элемента как завершение предыдущего блочного элемента.

Я исправил косую черту, но на этот раз давайте посмотрим, что произошло бы, если бы я случайно опустил скобку в конце первого тега

(рис. 4-17).

Видите, как отсутствует заголовок? Это потому, что без закрывающей скобки тега браузер предполагает, что весь следующий текст — вплоть до следующей закрывающей скобки ( > ), который он находит, — является частью открывающего тега

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

Рис. 4-16. Когда косая черта опущена, браузер не знает, когда заканчивается элемент, как в этом примере.

Делать ошибки в своих первых HTML-документах и ​​исправлять их — отличный способ учиться. Если вы отлично пишете свои первые страницы, я бы порекомендовал повозиться с кодом, как у меня здесь, чтобы посмотреть, как браузер реагирует на различные изменения. Это может быть чрезвычайно полезно при устранении неполадок со страницами позже. Я перечислил некоторые распространенные проблемы на боковой панели Возникли проблемы? Обратите внимание, что эти проблемы не характерны для начинающих. Такие мелочи постоянно идут не так, даже у профессионалов.

Рис. 4-17.Отсутствие концевой скобки делает весь последующий контент частью тега, и поэтому он не отображается.

Проверка документов

Один из способов, с помощью которого профессиональные веб-разработчики обнаруживают ошибки в разметке, заключается в проверке документов. Что это обозначает? Чтобы подтвердить документ, нужно проверить вашу разметку, чтобы убедиться, что вы соблюдаете все правила любой версии HTML, которую вы используете (их несколько, как мы обсудим в главе 10).Документы, не содержащие ошибок, считаются действительными. Настоятельно рекомендуется проверять документы, особенно для профессиональных сайтов. Действительные документы более согласованы в различных браузерах, они отображаются быстрее и более доступны.

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

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

  • Включение объявления DOCTYPE. Без него валидатор не знает, какую версию HTML или XHTML проверять.

  • Указание кодировки символов документа.

  • Включение необходимых правил и атрибутов.

  • Нестандартные элементы.

  • Несоответствие тегов.

  • Ошибки вложения.

  • Опечатки и другие мелкие ошибки.

Разработчики используют ряд полезных инструментов для проверки и исправления ошибок в документах HTML. W3C предлагает бесплатный онлайн-валидатор на валидаторе .w3.org . Для документов HTML5 используйте онлайн-валидатор, расположенный по адресу html5.validator.nu . Инструменты разработчика браузера, такие как подключаемый модуль Firebug для Firefox или встроенные инструменты разработчика в Safari и Chrome, также имеют валидаторы, поэтому вы можете проверять свою работу на лету. Если вы используете Dreamweaver для создания своих сайтов, в него также встроен валидатор.

Самое время убедиться, что вы понимаете основы разметки. Используйте то, что вы узнали из этой главы, чтобы ответить на следующие вопросы.Ответы в Приложении A.

  1. В чем разница между тегом и элементом?

  2. Запишите рекомендуемую минимальную структуру документа HTML5.

  3. Укажите, является ли каждое из этих имен файлов приемлемым именем для веб-документа, обведя «Да» или «Нет». Если это неприемлемо, укажите причину.

    а. Sunflower.html

    Да

    Нет

    b. index.doc

    Да

    Нет

    c. домашняя страница кулинарии.html

    Да

    Нет

    d. Song_Lyrics.html

    Да

    Нет

    e. games/rubix.html

    Да

    Нет

    ф. %whatever.html

    Да

    Нет

  4. Все следующие примеры разметки неверны. Опишите, что не так с каждым из них, а затем напишите это правильно. Поздравляем! "file.html">

  5. Это новый абзац<\p>

  • Как бы вы разметили этот комментарий в документе HTML, чтобы он не отображался в окно браузера?

     Список продуктов начинается здесь 
  • Обзор элементов: структура документа

    В этой главе представлены элементы, определяющие структуру документа.Остальные элементы, представленные в упражнениях, будут рассмотрены более подробно в следующих главах.

    71

    . Корневой элемент, который содержит все другие элементы 90007171

    . Корневой элемент, который содержит все другие элементы 9000717191

    . Укладчик, который содержит все другие элементы 9000

    171771

    .

    Предоставляет информацию о документе

    Element

    Описание

    тела

    Идентифицирует тело документа, который содержит содержание

    голова

    Определяет руководитель документа, который содержит информацию о документе

    HTML

    Корневой элемент, который содержит все другие элементы

    77191

    . Корневой элемент, который содержит все другие элементы 9000

    title

    Дает название странице

    Веб-сайт — это просто набор веб-страниц.Веб-страница или веб-документы, написанные на языке HTML (язык гипертекстовой разметки) . Эти веб-страницы можно просматривать с помощью любого веб-браузера и Интернета.

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

    Программа HTML или страница могут быть созданы многими HTML или текстовыми редакторами. Эти редакторы представляют собой программное обеспечение, которое помогает нам писать наш код с помощью простого пользовательского интерфейса. Сегодня мы увидим, как создать html или веб-страницу с помощью редактора Блокнота.

    Редактор Блокнота

    — это встроенный текстовый редактор в Windows Computers. Вы также можете найти похожие редакторы в операционных системах Mac и Linux.

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


    Создание простой HTML-страницы с помощью редактора Блокнота

    Выполните четыре шага ниже, чтобы создать свою первую веб-страницу с помощью Блокнота.

    Шаг 1. Откройте Блокнот (Windows)

    Windows 8 или более поздняя версия:
    Откройте начальный экран и выполните поиск (введите «Блокнот»)

    Windows 7 или более ранняя версия Windows:
    Откройте «Пуск» > «Программы» > «Стандартные» > «Блокнот»


    Шаг 2. Создайте новый документ

    Перейдите в меню Блокнота: Файл > Создать

    Будет открыт новый пустой документ, и здесь вы сможете начать писать свою первую HTML-программу.


    Шаг 3. Напишите HTML-код или программу

    Напишите код HTML. Если вы еще ничего не знаете об HTML, прочтите несколько глав в разделе «Учебники по HTML».

    Напишите свой собственный код HTML или просто скопируйте следующую простую программу HTML в блокнот.

      
    
    <тело>
     
     

    Мой первый заголовок

    Мой первый абзац.


    Шаг 4. Сохраните HTML-страницу

    Перейдите в меню Блокнота: Файл > Сохранить (или используйте сочетание клавиш CTRL + S)

    Вас попросят сохранить файл на вашем компьютере.Дайте ему имя с расширением .html и сохраните его (например, program.html)

    .

    Примечание. HTML-страницу следует сохранять с расширением .html с осторожностью.


    Шаг 5. Просмотр страницы HTML с помощью браузера

    Веб-браузеры — это программы или программное обеспечение, которые используются для просмотра веб-страниц/веб-сайтов. Вы можете найти Internet Explorer по умолчанию, если используете компьютер с Windows. Вы также можете загрузить другие популярные веб-браузеры, такие как Google Chrome или Firefox.Используйте любой из них.

    Теперь просто откройте сохраненный файл HTML в любом браузере:
    Дважды щелкните файл или щелкните файл правой кнопкой мыши и выберите параметр «Открыть с помощью», чтобы выбрать другой браузер.

    Ваш HTML-файл будет открыт в веб-браузере, и он покажет вывод на основе вашей HTML-программы.

    Поздравляем, если вы смогли запустить свою первую HTML-программу.

    Теперь вы можете узнать больше о тегах HTML и создать больше веб-страниц в формате HTML.Используя эти HTML-страницы, вы также можете легко создать свой собственный веб-сайт.


    Узнайте больше на похожие темы:

    Учебники
    Контент не найден.
    Вопросы и ответы для интервью
    Контент не найден.

    Как написать код сайта с нуля! 5 простых шагов

    Какие существуют типы языков программирования?

    Языки программирования для веб-сайтов делятся на две основные категории: интерфейс и серверная часть. Язык, используемый для программирования веб-страницы для внешнего интерфейса, — это HTML, CSS и JavaScript.

    Языки внешнего интерфейса включают:

    • Язык гипертекстовой разметки (HTML) — этот язык используется для форматирования веб-страниц и организации элементов на веб-странице.Он состоит из открывающих и закрывающих тегов, каждый из которых выполняет определенную задачу. Например, тег title используется для написания заголовка веб-страницы в адресной строке.
    • Каскадные таблицы стилей (CSS) . Как следует из названия, CSS используется для оформления веб-страниц. Например, вы можете использовать CSS для определения шрифта веб-сайта, размера шрифта, цветов и т. д. CSS можно записать в один файл и повторно использовать снова и снова для многочисленных элементов на веб-странице.
    • JavaScript (JS) — JavaScript используется для того, чтобы сделать веб-сайты более интерактивными.Допустим, вы создали кнопку и хотите, чтобы она отображала сообщение при нажатии. Вы можете использовать JavaScript для написания этой функциональности.

    Базовые языки

    Серверная часть может быть закодирована на любом языке, поддерживающем веб-разработку. Вы можете использовать JavaScript на стороне сервера, используя NodeJS, Python, Ruby или PHP. Одной из наиболее часто используемых программ для разработки веб-сайтов является PHP. В этом руководстве мы сосредоточимся на PHP как на языке сценариев.

    PHP:

    PHP означает препроцессор гипертекста.В отличие от интерфейсных технологий, которые выполняются в веб-браузере, PHP выполняется на веб-сервере. Он обычно используется для выполнения таких действий, как регистрация пользователей, аутентификация пользователей, отправка электронных писем и т. д.

    В этом уроке вы узнаете:

    Как написать код для веб-сайта — полное руководство для начинающих

    В этом подробном руководстве мы научим вас, как создать веб-сайт с нуля и написать весь код самостоятельно, или вы можете использовать существующую платформу, такую ​​как WordPress или Joomla и т. д.

    В этом полном руководстве мы рассмотрим следующие темы.

    • Создание с нуля Vs. с помощью системы управления контентом
    • Создание веб-сайта с нуля с использованием фреймворка (PHP MVC Framework)
    • Создание веб-сайта с помощью системы управления контентом (WordPress)

    Основная концепция HTML

    Документ HTML — это текстовый файл, содержащий теги и элементы HTML и обычно заканчивающийся расширением .html.

    HTML также может быть встроен в файлы с другими расширениями языка сценариев, такие как *.php, *.jsp или *.asp.

    Веб-браузеры анализируют HTML-документы для отображения веб-страниц. Вы можете просмотреть HTML-код, из которого состоит веб-страница, в веб-браузере.

    Вот шаги, которые помогут вам создать сайт:

    Шаг 1) Щелкните правой кнопкой мыши веб-страницу, чтобы отобразить всплывающее меню.

    Шаг 2) Выберите Просмотреть источник страницы.

    Шаг 3) HTML-код будет отображаться в виде обычного текста, и вы сможете увидеть HTML-теги и элементы, из которых состоит страница.

    Вы также можете увидеть некоторые CSS и JavaScript, встроенные или включенные в виде отдельных внешних файлов.

    Функция веб-браузера заключается в переводе HTML-документа в удобочитаемый формат. Браузер также обрабатывает JavaScript, включенный в веб-страницу.

    Понимание структуры документа HTML.

    Предположим, вы уже создали документ Word. В этом случае понять структуру HTML-документа будет для вас довольно легко.В документе Word у вас будет заголовок документа, оглавление, по которому можно щелкнуть, разделы содержимого, отформатированные по-разному, и нижний колонтитул. Структура HTML-документа более или менее такая же, как и у Word-документа, который мы только что описали.

    Все документы HTML заключены в тег HTML. Внутри тега HTML у вас будут другие теги, такие как head и body. Тег header содержит другие теги, например, title для отображения заголовка страницы. Он также включает ссылки на внешние файлы для стилей CSS, JavaScript и метаданных.Тег body содержит элементы, составляющие веб-страницу. Элементами внутри тега body могут быть div, таблицы, списки и т. д.

     
    
    <голова>
        <мета-кодировка="utf-8">
        Как создать сайт для начинающих
        
        
        
    
    <тело>
         

    Добро пожаловать на мою первую веб-страницу

    Объяснение:

    • определяет тип документа HTML
    • … определяет HTML-тег с языковым атрибутом, указывающим язык веб-сайта.
    • В этом простом примере язык веб-сайта английский. Внутри открывающего и закрывающего тега HTML у нас будут такие теги, как head и body, которые, в свою очередь, заключают в себе другие теги и элементы.
    • … определяет тег заголовка, содержащий метаданные.
    • определяет тело, содержащее содержимое веб-сайта.

    Знакомство с селекторами CSS

    Селекторы CSS выбирают элементы на веб-странице, которые вы хотите отформатировать на основе определенных правил CSS.

    Селекторы CSS

    делятся на пять основных категорий, а именно:

    • Простые селекторы: Эти селекторы используются для выбора элементов на основе таких атрибутов, как идентификатор, имя или класс.
    • Комбинатор CSS : Как следует из названия, этот тип селектора выбирает элемент на основе комбинации связанных элементов. Например, вы можете использовать этот метод для выбора только тех элементов абзаца, которые находятся внутри элементов div.
    • Псевдоклассы CSS : Эти селекторы работают на основе состояния элемента. Например, наведите курсор на гиперссылку. Вы можете изменить цвет фона, чтобы показать пользователю, куда он в данный момент указывает. Поэтому, когда пользователь отводит указатель мыши от гиперссылки, форматирование автоматически удаляется.
    • Псевдоэлементы CSS : Этот селектор используется для выбора определенных частей элемента. Например, вы можете использовать селектор псевдоэлементов, чтобы увеличить первую букву первого слова в каждом абзаце и оставить остальные буквы нетронутыми.
    • Атрибут CSS : этот селектор работает на основе атрибутов, примененных к элементам, или определенных значений атрибутов. Например, вы можете использовать селектор атрибутов CSS, чтобы отформатировать все кнопки HTML на зеленый цвет фона, который содержит значение атрибута «отправить.«Это применит зеленый цвет фона к кнопкам, у которых установлено значение атрибута для отправки.

    Создание таблицы стилей CSS

    В этом разделе будет создан простой документ стиля CSS, который выполняет простые стили, определяя следующие правила стиля.

    • Центрировать текст на основе класса center: Это правило центрирует текст и меняет цвет текста на красный.
    • Форматирование текста на основе идентификатора элемента: Мы создадим правило стиля для заголовка идентификатора, которое изменит цвет на оранжевый, сделает толщину шрифта полужирным и изменит регистр текста на верхний регистр.
    • Форматировать текст на основе элемента заголовка номер 2: Это правило устанавливает синий цвет текста заголовка и устанавливает размер шрифта 60 пикселей.

    Следующий код определяет документ CSS с указанными выше правилами.

     .центр {
        выравнивание текста: по центру;
        красный цвет;
    }
    #заглавие {
        оранжевый цвет;
        преобразование текста: верхний регистр;
        вес шрифта: полужирный;
    }
    h3 {
        размер шрифта: 60px;
        цвет синий;
    }
     

    Объясняет:

    • .center {…} — определяет центр правила класса, который выравнивает текст по центру и меняет цвет шрифта.
    • #title {…} — определяет правило заголовка, которое меняет цвет шрифта, переводит все буквы в верхний регистр и изменяет толщину шрифта на полужирный.
    • h3 {…} — определяет правила, которые будут применяться ко всем элементам h4. Размер шрифта будет установлен на 60 пикселей, а цвет шрифта будет обновлен до синего.

    Загрузка/установка Bootstrap

    Bootstrap — это CSS-фреймворк с большим количеством стилей, которые вы можете начать использовать прямо сейчас.Он содержит стили для макетов и элементов форматирования.

    Вы можете написать свои стили CSS, которые настраивают параметры по умолчанию для CSS-фреймворка начальной загрузки. Для этого вы можете загрузить Bootstrap непосредственно с официального сайта или включить его в свой HTML-документ из сети доставки контента (CDN).

    Кроме того, вы можете использовать инструмент управления пакетами, такой как Node Package Manager (NPM), для установки Bootstrap, но он предназначен для опытных веб-разработчиков. Чтобы загрузить Bootstrap, вы можете щелкнуть эту ссылку здесь и использовать его в своем проекте, как и любой другой файл CSS и JavaScript.

    Мы узнаем, как его использовать, в разделе ниже, когда будем рассматривать создание вашей первой веб-страницы.

    Роль HTML и CSS

    Роль HTML заключается в обеспечении структуры веб-страниц. Веб-браузеры используют эту структуру для отображения пользователям презентабельного контента. Во-вторых, пауки поисковых систем используют структуру HTML для навигации по веб-странице и ее индексации.

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

    Общие термины HTML

    Теперь давайте рассмотрим некоторые общие термины HTML, с которыми вы должны быть знакомы как веб-разработчик.

    Серийный номер Срок Описание
    1 Элемент Элементы — это ключевые слова, которые используются для определения определенных структур и содержимого веб-страницы. Например, элемент h4 используется для определения структуры заголовка. Другие примеры элементов включают абзацы (p), якоря (a) и контейнеры (div) и т. д.
    2 Тег Теги — это метки, обозначающие начало и конец элемента.Теги включают ключевые слова элементов в угловых скобках. Например,

    Абзац

    — это тег абзаца, где

    — открывающий тег, а

    — закрывающий тег.
    3 Атрибут Атрибуты — это свойства элементов, предоставляющие дополнительную информацию. Например, мы можем использовать атрибут id, чтобы дать уникальное имя элементу. Идентификатор можно использовать в CSS или JavaScript.
    4 Гиперссылка Гиперссылка — это интерактивная ссылка, которая открывает новую веб-страницу.Вы можете создать его с помощью элемента привязки.
    5 Головка Тег head содержит информацию, скрытую от пользователя, но полезную для веб-браузера и поисковых систем.
    6 Корпус Тег body содержит информацию, видимую пользователю в веб-браузере.
    7 Нижний колонтитул Тег нижнего колонтитула содержит информацию, которая отображается в разделе нижнего колонтитула веб-страницы.
    8 Комментарий Комментарии используются для документирования и объяснения HTML-кода, и они игнорируются браузером при анализе HTML-документа.
    9 Отдел Div — это элемент-контейнер, который используется для создания макетов.
    10 Товарная позиция Тег заголовка используется для создания заголовков HTML.
    11 Разрыв строки Этот элемент используется для создания нового разрыва строки.
    12 Ссылки Ссылки используются для включения других файлов, таких как внешние файлы CSS, в документы HTML.
    13 Метаданные Тег метаданных предоставляет дополнительную информацию о веб-странице, наиболее полезную для роботов поисковых систем.
    14 Список Тег списка используется для создания списка. Список может быть как упорядоченным, так и неупорядоченным.
    15 Пункт Элемент абзаца используется для отображения текстовых данных в формате абзаца
    16 Стол Этот элемент используется для создания таблицы
    17 Титул Как следует из названия, он используется для установки заголовка веб-страницы.
    18 Форма Тег формы используется для создания форм, которые мы можем использовать для ввода данных от пользователей.
    19 Сценарий Тег script ссылается на внешний код JavaScript или встроенный код JavaScript в документе HTML.
    20 АЯКС AJAX означает асинхронный JavaScript и XML. Это технология, используемая для обновления определенных частей веб-страницы без перезагрузки всей страницы.

    Понимание общих терминов CSS

    Ниже приведены некоторые общие термины CSS, с которыми вы должны быть знакомы.

    ..
    Серийный номер Срок Описание
    1 Селектор Это относится к CSS, ответственному за выбор элементов HTML-документа, которые мы хотим отформатировать.
    2 Свойства Свойства относятся к атрибуту элемента, для которого мы хотим установить значение.
    3 Значения Как следует из названия, мы присваиваем значение свойству в целях стилизации.
    4 Комментарий Комментарии используются для документирования и объяснения кода CSS
    5 Набор правил Относится к полному разделу кода CSS, состоящему из селектора, скобки объявления, свойств и соответствующих значений.
    6 Декларация Это относится к одной строке кода в документе CSS
    7 Блок объявлений Это относится к разделу CSS, который определяет правила стиля.Оно заключено в фигурные скобки.
    8 Ключевое слово Это зарезервированное слово, имеющее особое значение в CSS. Например, слово auto имеет особое значение, следовательно, является ключевым словом
    9 Селектор атрибутов Селектор выбирает элемент на основе значения атрибута.
    10 Универсальный селектор Этот селектор используется для сопоставления любых элементов в заданном контексте.Контекст обычно применяется к родительскому элементу, такому как список, чтобы все элементы в списке могли наследовать стиль родительского элемента
    11 Селектор идентификаторов Этот селектор делает выбор на основе идентификатора элемента.
    12 Селектор класса Этот селектор делает выбор на основе значения или значений атрибута класса.
    13 Селектор типа элемента Этот селектор основан на типе элемента, используемого в документе HTML.

    HTML-редакторы

    Редактор HTML — это программа, которая используется для написания и редактирования HTML-кода. Вы можете использовать любой текстовый редактор для написания HTML-кода, но HTML-редакторы имеют множество встроенных функций, облегчающих написание кода.

    Давайте рассмотрим некоторые популярные варианты:

    Код Visual Studio:

    Visual Studio Code — кроссплатформенный редактор кода, разработанный Microsoft. Вы можете использовать Visual Studio Code для редактирования кода для многих языков, включая HTML, CSS, JavaScript и PHP.Visual Studio Code бесплатен и работает на Windows, Mac и Linux.

    Возвышенный текст:

    Sublime Text — это кроссплатформенный редактор кода, который также можно использовать для написания и редактирования кода HTML, CSS, JavaScript и PHP. Это коммерческий продукт, и вам необходимо его приобрести. Вы также можете использовать его бесплатно в незарегистрированном режиме.

    Блокнот++

    Notepad++ — это легкий редактор кода, который также поддерживает множество языков. В отличие от Visual Studio Code и Sublime Text, Notepad++ не является кроссплатформенным.Он работает только на платформе Microsoft Windows.

    IDE NetBeans

    NetBeans — это интегрированная среда разработки (IDE), предлагающая больше возможностей, чем обычный редактор кода. NetBeans является бесплатным и кроссплатформенным.

    Создание вашей первой веб-страницы

    Давайте теперь создадим простую веб-страницу. Здесь мы создали простой HTML-документ и применили некоторые стили с помощью Bootstrap CSS. У нас также будет нажимаемая кнопка, которая будет отображать простое сообщение с использованием JavaScript.

    Вот шаги, которые помогут вам научиться создавать сайт с нуля:

    Шаг 1) Откройте ваш любимый текстовый редактор.

    Здесь мы открываем блокнот.

    Шаг 2) Создайте новый файл.

    с именем index.html.

    Шаг 3) Добавьте следующий код:

    в файл index.html.

     
    
    
    <голова>
        <мета-кодировка="utf-8">
        
    
        <ссылка href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            целостность="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
        Моя первая веб-страница
        <скрипт>
        функция displayMessage () {
            document.getElementById("сообщение").innerHTML = "Привет из JavaScript!";
        }
        
    
    <тело>
        <дел>
             

    Мое веб-приложение!

    Ваше сообщение появится здесь.

    Объяснение:

    • определяет тип документа.
    • … определяет тег заголовка, который содержит метаданные, невидимые для пользователей.
    • Заголовок также содержит тег скрипта, содержащий код JavaScript, отображающий приветственное сообщение.
    • Мы также загружаем Bootstrap CSS из сети CDN.
    • определяет содержимое нашей страницы: заголовок, абзац и кнопку, к которым применяются некоторые стили из Bootstrap CSS.

    Создание с нуля Vs. с помощью системы управления контентом

    Создание сайта с нуля требует навыков и соответствующих знаний. Это также занимает больше времени и может стоить больших денег.

    С другой стороны, вам не нужно быть опытным программистом, чтобы создать свой веб-сайт с помощью системы управления контентом, такой как WordPress.Системы управления контентом похожи на такие приложения, как Microsoft Word.

    С помощью системы управления контентом вы сосредотачиваетесь на создании страниц, написании контента и публикации контента, точно так же, как создаете документы в словах и распечатываете их на принтере.

    В следующей таблице сравниваются два популярных метода создания веб-сайтов.

    Серийный номер Pro/Con Создание с нуля Использование системы управления контентом
    1 Время Требуется много времени. Занимает мало времени. Его можно создать менее чем за 24 часа.
    2 Стоимость Нанять квалифицированного программиста может быть дорого. Вы можете сделать это сами или нанять кого-то, кто создаст его для вас.
    4 Навыки Требуется опытный и квалифицированный программист Требуется меньше навыков. Для этого нужно иметь компьютерную грамотность.
    5 Безопасность Хакеры не могут легко найти слабые места в коде для использования. Хакеры могут легко найти слабые места в коде и использовать их. Регулярные обновления важны по соображениям безопасности.
    6 Скорость Как правило, быстрее, потому что во время выполнения загружаются только те функции, которые необходимы. Работает медленнее, потому что система управления контентом представляет собой решение общего назначения, которое может загружать функции, которые вам не обязательно нужны.
    7 Техническое обслуживание Простота обслуживания, поскольку обновления выполняются только при необходимости Требуется дополнительная работа, так как вам необходимо регулярно обновлять CMS из соображений безопасности.
    8 Поисковая оптимизация (SEO) Требуется дополнительная работа, и программисту нужно напомнить, потому что большинство программистов не являются экспертами по поисковой оптимизации Большинство систем управления контентом уже поставляются с инструментами SEO. Дополнительные функции можно легко добавить с помощью плагинов.

    Использование платформы (PHP MVC Framework)

    В этом разделе мы рассмотрим, как мы можем создать наш веб-сайт с нуля. Каждый веб-сайт должен использовать внешние технологии, такие как язык гипертекстовой разметки (HTML), JavaScript и каскадные таблицы стилей (CSS).

    Серверная часть имеет больше возможностей для языков программирования. Вы можете использовать PHP, Python, Ruby, JavaScript и т. д. PHP — один из самых распространенных. В этом разделе мы поговорим о технологиях PHP.

    Вы можете использовать PHP, поскольку это медленный процесс, поэтому даже программистам, которые создают веб-сайты с нуля, необходимо использовать среду разработки. Наиболее популярным является фреймворк Model-View-Controller (MVC). Примеры фреймворков PHP MVC включают Laravel, CodeIgniter, Cake PHP, Symfony и т. д.

    Платформы

    MVC предоставляют следующие возможности:

    • Встроенная возможность подключения базы данных к библиотекам: Это экономит время на написание кода для безопасного подключения к базе данных для записи и извлечения данных.
    • Встроенные модули аутентификации: Это экономит ваше время на написание кода, который потребует от пользователей входа и выхода из сайта, если это необходимо.
    • Структурированный код: Шаблон проектирования MVC отделяет бизнес-логику от представления. Это позволяет легко иметь программиста, который может работать над серверной частью, и веб-дизайнера, который работает над разработкой внешнего интерфейса.
    • Пакеты: Это наборы библиотек, которые выполняют очень специфические задачи.Например, вы можете использовать или загрузить пакет для добавления таких функций, как;
      • Добавление функции комментирования Disqus на ваш сайт
      • Вызов API
      • Интеграция платежного шлюза.

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

    Например, вы можете приобрести HTML-шаблон, в котором используется блейд-шаблон — механизм шаблонов, встроенный в инфраструктуру Laravel MVC.

    Создание веб-сайта с использованием системы управления контентом (WordPress)

    В этом разделе мы рассмотрим, как можно создать сайт с помощью WordPress:

    Загрузка WordPress

    Вы можете скачать WordPress с официального сайта и запустить его на своем локальном компьютере, если у вас установлен веб-сервер и PHP.Однако, если у вас уже есть учетная запись хостинга, вы можете установить WordPress прямо из cPanel.

    Начало работы с WordPress

    После того, как вы установили WordPress, вы можете приступить к созданию своего веб-сайта.

    Веб-хостинг:

    Прежде чем начать, вам необходимо иметь доменное имя и учетную запись веб-хостинга. В учетной записи веб-хостинга должен быть установлен PHP и MySQL в качестве механизма базы данных. Вы можете воспользоваться услугами Bluehost, Godaddy или разместить на WP Engine, который специализируется на предоставлении управляемого хостинга WordPress.

    Установка:

    У большинства хостинг-провайдеров в административной панели есть специальные скрипты, позволяющие установить WordPress. Если ваш хостинг-провайдер использует cPanel, вы сможете установить WordPress, щелкнув значок WordPress, как показано на изображении ниже:

    .

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

    Настройки:

    Раздел настроек позволяет вам настроить такие вещи, как имя сайта, постоянные ссылки URL, часовой пояс, может ли кто-либо зарегистрироваться на вашем сайте и т. д.

    Шаблон:

    Шаблоны позволяют нам увидеть, как выглядит наш сайт. WordPress поставляется с бесплатными встроенными шаблонами, которые вы можете использовать прямо сейчас. Вы также можете скачать шаблоны, созданные другими. Помимо бесплатных шаблонов, вы также можете приобрести шаблоны премиум-класса на таких торговых площадках, как ThemeForest.

    Плагины:

    Плагины

    позволяют расширить функциональность WordPress. Например, вы можете использовать плагин, чтобы ваши клиенты могли платить вам через PayPal с вашего сайта.Вы также можете использовать плагины, чтобы заставить пользователей использовать безопасные соединения (HTTPS) или создавать карты сайта.

    Создатели сайтов:

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

    Давайте посмотрим на некоторые из самых популярных веб-конструкторов:

    Астра

    Astra — это быстрая, легкая и настраиваемая тема WordPress.Он поставляется с начальными шаблонами, которые вы можете использовать для быстрого создания своих сайтов. Он имеет как бесплатные, так и премиальные стартовые шаблоны.

    Элементор:

    Elementor — это конструктор веб-сайтов для WordPress с функцией перетаскивания, которым пользуются более 5 миллионов пользователей. Elementor предлагает как бесплатные, так и премиальные функции.

    Строитель бобров:

    Beaver Builder — это простой в использовании конструктор веб-сайтов для WordPress с функцией перетаскивания, который позволяет быстро создавать профессионально выглядящие веб-сайты.

    Альтернативы WordPress

    WordPress — не единственная система управления контентом, которую вы можете использовать для создания своего веб-сайта. Вы также можете посмотреть на альтернативы, такие как

    • Joomla: Joomla — это система управления контентом с открытым исходным кодом, которую можно использовать для публикации контента, дискуссионных форумов, приложений электронной коммерции и т. д. Она использует PHP в качестве языка программирования и MySQL в качестве механизма базы данных.
    • Drupal: Это система управления веб-контентом, которая может создавать личные блоги, корпоративные веб-сайты или управление знаниями для делового сотрудничества.Drupal написан на PHP и JavaScript.
    • MODX: Это система управления контентом с открытым исходным кодом, написанная на PHP. И использует MySQL в качестве механизма базы данных. Его можно использовать как в Интернете, так и в интранете.
    • Постоянный контакт : это конструктор веб-сайтов с функциями перетаскивания. Его можно использовать для создания базовых веб-сайтов и магазинов электронной коммерции.

    Сводка:

    • Веб-сайты создаются с использованием компьютерного кода.
    • Компьютерный код — это удобочитаемые инструкции, которые предписывают компьютеру выполнить определенную задачу.
    • Веб-сайты можно создавать либо с нуля, либо с использованием существующей платформы, такой как WordPress.
    • Создание веб-сайта с нуля занимает больше времени по сравнению с созданием с помощью платформы.
    • Создание веб-сайта с нуля более гибко по сравнению с использованием существующей платформы.
    • Языки программирования, используемые для создания веб-сайтов, — это HTML, CSS, JavaScript и языки сценариев для серверной части, такие как PHP, Python, Ruby и т. д.
    • WordPress — это система управления контентом, которую можно использовать для очень быстрого создания веб-сайтов.
    • WordPress поддерживает плагины, такие как Astra, Elementor или Beaver Builder и т. д., чтобы обеспечить функции перетаскивания веб-сайтов.
    • Фреймворки
    • MVC, такие как Laravel или CodeIgniter, можно использовать для ускорения разработки веб-сайтов с нуля.

    Learn HTML — бесплатное интерактивное руководство по HTML

    \n», «namespace»: «learn-html.org», «full_url»: «https://www.Learn-html.org», «contact_email»: «[email protected]», «support_email»: «[email protected]», «logo»: «/static/img/logos/learn-html .org.png», «share_logo»: «/static/img/share-logos/learn-html.org.png», «favicon»: «/static/img/favicons/learn-html.org.ico», «styled_domain»: «learn-html.org», «sender»: «learn-html.org «, «courses»: [{«advertiser»: «Udemy», «category»: «Разработка», «image_url»: «https://udemy-images.udemy.com/course/480×270/437398_46c3_8.jpg», «link»: «https://click.linksynergy.com/link?id=2mhs2G02AJA&offerid=358574.437398&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fdesign-and-develop-a-killer-website-with-html5-and-css3%2F», «link_code «: «», «link_id»: «437398», «link_name»: «Создавайте адаптивные веб-сайты реального мира с помощью HTML5 и CSS3», «pixel_url»: «https://ad.linksynergy.com/fs-bin/show? id=2mhs2G02AJA&bids=358574.437398&type=2&subid=0», «retail_price»: 195.0}, {«рекламодатель»: «Udemy», «category»: «Разработка», «image_url»: «https://udemy-images.udemy .com/course/480×270/1302590_4889_4.jpg», «link»: «https://click.linksynergy.com/link?id=2mhs2G02AJA&offerid=358574.1302590&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fstep -by-step-html-and-css-course-for-beginners%2F», «link_code»: «», «link_id»: «1302590», «link_name»: «Пошаговый курс HTML и CSS для начинающих» , «pixel_url»: «https://ad.linksynergy.com/fs-bin/show?id=2mhs2G02AJA&bids=358574.1302590&type=2&subid=0», «retail_price»: 120,0}, {«рекламодатель»: «Udemy», «category»: «Разработка», «image_url»: «https://udemy-images.udemy.com/course/480×270/1252318_3965_2.jpg», «link»: «https://click.linksynergy.com/link?id=2mhs2G02AJA&offerid=358574.1252318&type=2&murl=https%3A%2F%2Fwww.udemy.com %2Fthe-complete-html-and-css-course-for-beginners%2F», «link_code»: «», «link_id»: «1252318», «link_name»: «Полный курс HTML и CSS для начинающих», «pixel_url»: «https://ad.linksynergy.com/fs-bin/show?id=2mhs2G02AJA&bids=358574.1252318&type=2&subid=0», «retail_price»: 85.0}, {«advertiser»: «Udemy», » category»: «Разработка», «image_url»: «https://udemy-images.udemy.com/course/480×270/80940_2664_8.jpg», «link»: «https://click.linksynergy.com/link?id=2mhs2G02AJA&offerid=358574.80940&type=2&murl=https%3A%2F%2Fwww.udemy.com %2Fbuild-website-scratch%2F», «link_code»: «», «link_id»: «80940», «link_name»: «Создавайте веб-сайты с нуля с помощью HTML и CSS», «pixel_url»: «https://ad .linksynergy.com/fs-bin/show?id=2mhs2G02AJA&bids=358574.80940&type=2&subid=0», «retail_price»: 145.0}, {«рекламодатель»: «Udemy», «category»: «Разработка», «image_url» : «https://udemy-images.udemy.com/course/480×270/365886_45be_3.jpg», «link»: «https://click.linksynergy.com/link?id=2mhs2G02AJA&offerid=358574.365886&type=2&murl=https%3A%2F%2Fwww.udemy.com %2Fcrash-course-html-and-css%2F», «link_code»: «», «link_id»: «365886», «link_name»: «Ускоренный курс веб-разработки на HTML5 и CSS3», «pixel_url»: » https://ad.linksynergy.com/fs-bin/show?id=2mhs2G02AJA&bids=358574.365886&type=2&subid=0″, «retail_price»: 40.0}], «language_code»: «en»}; var nextChapter = «/ru/»; var предыдущая глава = «/ru/»; var backChapter = «/ru/»; var tutorialData = {«text»: «\n

    Добро пожаловать в программу изучения HTML, самого простого способа изучения HTML и CSS.Learn HTML представляет собой интерактивный учебник, в котором\nпошагово объясняется, как создавать веб-сайты на HTML и CSS.

    \n

    Базовый учебник поможет вам создать страницу с использованием CSS-фреймворка Bootstrap.

    \n

    Усовершенствованные учебные пособия помогут вам узнать все, что нужно знать об HTML и CSS.

    \n

    Начало работы с HTML и CSS

    \n\n

    Элементы Bootstrap

    \n\n

    Расширенные учебные пособия по HTML

    \n\n

    Расширенные учебные пособия по CSS

    \n\n

    Учебные пособия по CSS для экспертов

    \n\n

    Ресурсы

    \n
      \n
    • Startboostrap.com — список бесплатных шаблонов начальной загрузки, с которых можно начать.
    • \n
    \n

    Учебные пособия по содействию

    \n

    Подробнее здесь: Учебные пособия по содействию

    «, «links»: [[«Hello, World!», «/en/Hello%2C_World%21»], [«Basic Элементы», «/ru/Basic_Elements»], [«Ссылки», «/ru/Ссылки»], [«Списки», «/ru/Списки»], [«Изображения», «/ru/Изображения»], [«Стили», «/ru/Стили»], [«Классы», «/ru/Классы»], [«Селекторы», «/ru/Селекторы»], [«Псевдоклассы», «/en/ Псевдоклассы»], [«Библиотеки пользовательского интерфейса», «/en/UI_Libraries»], [«Bootstrap», «/en/Bootstrap»], [«Макет сетки», «/en/Grid_Layout»], [«JavaScript «, «/en/JavaScript»], [«Цвета», «/en/Цвета»], [«Экран», «/en/Экран»], [«Коробчатая модель», «/en/Коробочная_модель»], [«Значки», «/ru/Значки»], [«Кнопки», «/ru/Кнопки»], [«Панель навигации», «/ru/Navigation_Bar»], [«Раскрывающиеся списки», «/en/Раскрывающиеся списки «], [«Подсказки», «/en/Подсказки»], [«Дизайн списка», «/ru/Дизайн_списка»], [«Дизайн таблицы», «/ru/Дизайн_таблицы»], [«Дизайн формы», «/en/Form_Design»], [«Форматирование текста», «/en/Text_Formatting»], [«Таблицы», «/en/Таблицы»], [«Iframes», «/en/Iframes»], [» Forms», «/en/Forms»], [«Canvas», «/en/Canvas»], [«SVG», «/en/SVG»], [«Видео», «/en/Video»], [«Аудио», «/en/Аудио»], [«Перетаскивание», «/en/Drag_and_Drop»], [«Локальное хранилище», «/en/Local_Storage»], [«Кэш приложения», «/ en/App_Cache»], [«Web Workers», «/en/Web_Workers»], [«Отправленные сервером события», «/en/Server-Sent_Events»], [«Высота и ширина», «/en/Height_and_Width «], [«Адаптивный веб-дизайн», «/en/Responsive_Web_Design»], [«Размер блока», «/en/Размер блока»], [«Контур», «/en/Контур»], [«Шрифты», «/en/Fonts»], [«Текстовые эффекты», «/en/Text_Effects»], [«Дизайн ссылок», «/en/Link_Design»], [«Позиция», «/en/Позиция»], [ «Отрицательные поля», «/en/Negative_Margins»], [«Переполнение», «/en/Переполнение»], [«Плавающее», «/en/Плавающее»], [«Выравнивание текста», «/en/Text_Alignment «], [«Непрозрачность», «/en/Непрозрачность»], [«Изображения границ», «/ru/Border_Images»], [«Фон», «/en/Фон»], [«Градиенты», «/ en/Gradients»], [«Shadows», «/en/Shadows»], [«Rounded Corners», «/en/Rounded_Corners»], [«Transforms», «/en/Transforms»], [«Transiti ons», «/en/Transitions»], [«Медиа-запросы», «/en/Media_Queries»], [«Расширенные селекторы», «/en/Advanced_Selectors»], [«Фильтры», «/en/Фильтры» ], [«Анимации», «/en/Анимации»], [«Просмотр», «/en/Просмотр»], [«Flexbox», «/en/Flexbox»], [«Столбцы», «/en/ Столбцы»], [«CSS-переменные», «/en/CSS_Variables»], [«3D-преобразования», «/en/3D_Transforms»], [«Входные псевдоклассы», «/en/Input_Псевдо-классы»], [«Псевдоэлементы», «/en/Псевдоэлементы»], [«Учебные пособия», «/en/Учебные_учебники»]], «page_title»: «», «code»: «\n\n\n \n Привет, мир!\n \n \n

    Привет, мир!

    \n \n

    Как вставлять изображения с помощью HTML – упрощенное руководство

    3 мин.read

    В какой-то момент каждый сталкивается с HTML. Если вы не знакомы с HTML, это не проблема. С его помощью вы по-прежнему можете легко вставлять изображения в запись блога или на веб-страницу. На самом деле, это не так уж и сложно, если вы понимаете несколько основных принципов. Вот руководство, которое поможет вам. Чтобы все упростить и избежать путаницы, я выделил HTML-теги цветом, чтобы вы могли их различать.

    Как вставить изображение с помощью HTML

    Каждый пользователь может пройти этот шаг разными путями, поэтому не удивляйтесь, если ваш маршрут будет отличаться от других.

    1. Загрузите изображение

    Это можно сделать с помощью службы хостинга изображений, службы FTP или службы хостинга блогов. Выберите то, что лучше всего подходит для вас.

    Начните вставку, загрузив изображение.

    2. Откройте документ HTML

    .

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

    3. Скопируйте и вставьте URL вашего изображения в тег IMG, добавьте к нему SRC

    Сначала определите, где вы хотите разместить изображение в HTML, и вставьте тег изображения, < img > .Затем возьмите загруженное изображение, скопируйте URL-адрес и поместите его в параметры img с префиксом src .

    Конечный результат этого шага должен выглядеть так:

    < img src=»(URL вашего изображения здесь)» >

    4. Добавьте атрибут alt и последние штрихи

    Это помогает определить, что означает изображение. Например, если это изображение зонтика на пляже, напишите тег alt, чтобы добавить что-то о пляжном зонтике.Будьте очень описательными, как будто вы описываете это кому-то, кто не может на это смотреть.

    HTML-атрибут alt важен.

    Как поместить изображение в каталог в HTML

    Если у вас есть веб-сайт и вы пытаетесь вставить изображение в каталог, процесс относительно прост. Вот как это делается в три простых шага:

    1. Скопируйте URL-адрес изображения, которое вы хотите вставить.
    2. Затем откройте файл index.html и вставьте его в код img.Пример: < img src=»(URL вашего изображения здесь)» >
    3. Сохраните файл HTML. В следующий раз, когда вы откроете его, вы увидите веб-страницу с только что добавленным изображением.
    Легко поместить изображение в каталог.

    Как связать изображение в HTML

    Для связывания изображения в HTML требуется еще несколько шагов, особенно если вы хотите изменить определенные атрибуты и детали. Вот полное пошаговое руководство, которое охватывает все, что вам нужно. Вы начнете с тега ссылки, который имеет вид < a > . href — это место, где вы разместите URL-адрес. Далее вам понадобится тег изображения < img > . Как указано выше, src — это место, куда вы будете включать файл изображения.

    Теперь, чтобы изменить атрибуты, вам нужно знать следующее. Во-первых, атрибут title имеет вид title = ”(your title)” . Затем установите атрибут alt , который подробно объясняет изображение. Наконец, установите высоту и ширину вашего изображения.Используйте код < img src=»(ваш заголовок)» alt=»Изображение» height=»(ваше изображение высотой)» width=»(ваше изображение ширина)» > .

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

    Введение в React — React

    В этом руководстве не предполагается наличие каких-либо знаний о React.

    Прежде чем мы начнем обучение

    В этом уроке мы создадим небольшую игру. У вас может возникнуть соблазн пропустить его, потому что вы не создаете игры, но дайте ему шанс. Методы, которые вы изучите в этом руководстве, имеют основополагающее значение для создания любого приложения React, и их освоение даст вам глубокое понимание React.

    Наконечник

    Этот учебник предназначен для тех, кто предпочитает учиться, выполняя . Если вы предпочитаете изучать концепции с нуля, ознакомьтесь с нашим пошаговым руководством. Вы можете обнаружить, что этот учебник и руководство дополняют друг друга.

    Учебник разделен на несколько разделов:

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

    Что мы строим?

    В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с помощью React.

    Здесь вы можете увидеть, что мы будем строить: Окончательный результат . Если код вам непонятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.

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

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

    Предпосылки

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

    Если вам нужно просмотреть JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript.В этом уроке мы используем стрелочные функции, классы, операторы let и const . Вы можете использовать Babel REPL, чтобы проверить, во что компилируется код ES6.

    Настройка для учебника

    Есть два способа выполнить это руководство: вы можете либо написать код в своем браузере, либо настроить локальную среду разработки на своем компьютере.

    Вариант настройки 1: запись кода в браузере

    Это самый быстрый способ начать работу!

    Сначала откройте этот Starter Code в новой вкладке.На новой вкладке должно отображаться пустое поле для игры в крестики-нолики и код React. В этом уроке мы будем редактировать код React.

    Теперь вы можете пропустить второй вариант настройки и перейти к разделу «Обзор», чтобы получить обзор React.

    Вариант установки 2: локальная среда разработки

    Это совершенно необязательно и не требуется для этого урока!


    Необязательно: Инструкции по локальному выполнению с использованием предпочитаемого текстового редактора

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

    1. Убедитесь, что у вас установлена ​​последняя версия Node.js.
    2. Следуйте инструкциям по установке приложения Create React, чтобы создать новый проект.
      npx создать-реагировать-приложение мое-приложение  
    1. Удалить все файлы в папке src/ нового проекта

    Примечание:

    Не удаляйте всю папку src , только исходные файлы внутри нее. Мы заменим исходные файлы по умолчанию примерами для этого проекта на следующем шаге.

      cd мое приложение
    компакт-диск источник
    
    
    гм -ф *
    
    
    дель *
    
    
    кд ..  
    1. Добавьте файл с именем index.css в папку src/ с этим кодом CSS.
    2. Добавьте файл с именем index.js в папку src/ с этим кодом JS.
    3. Добавьте эти три строки в начало index.js в папке src/:
      импорт React из 'реагировать';
    импортировать ReactDOM из 'react-dom';
    импорт './index.css';  

    Теперь, если вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

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

    Помогите, я застрял!

    Если вы застряли, обратитесь к ресурсам поддержки сообщества. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если вы не получили ответ или если вы по-прежнему застряли, сообщите о проблеме, и мы поможем вам.

    Обзор

    Теперь, когда вы настроили, давайте рассмотрим React!

    Что такое реакция?

    React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

    React имеет несколько различных типов компонентов, но мы начнем с подклассов React.Component :

      класс ShoppingList расширяет React.Составная часть {
      оказывать() {
        возврат (
          

    Список покупок для {this.props.name}

    <ул>
  • Инстаграм
  • Ватсап
  • Окулус
  • ); } }

    Скоро мы доберемся до забавных XML-подобных тегов. Мы используем компоненты, чтобы сообщить React, что мы хотим видеть на экране. Когда наши данные изменяются, React будет эффективно обновлять и повторно отображать наши компоненты.

    Здесь ShoppingList — это класс компонента React или тип компонента React . Компонент принимает параметры, называемые props (сокращение от «properties»), и возвращает иерархию представлений для отображения с помощью метода render .

    Метод render возвращает описание того, что вы хотите видеть на экране. React берет описание и отображает результат. В частности, render возвращает элемент React , который представляет собой упрощенное описание того, что нужно визуализировать.Большинство разработчиков React используют специальный синтаксис под названием «JSX», который упрощает написание этих структур. Синтаксис

    преобразуется во время сборки в React.createElement('div') . Пример выше эквивалентен:

      return React.createElement('div', {className: 'список покупок'},
      React.createElement('h2', ),
      React.createElement('ul', )
    );  

    См. полную расширенную версию.

    Если вам интересно, createElement() более подробно описан в справочнике по API, но мы не будем использовать его в этом руководстве.Вместо этого мы будем продолжать использовать JSX.

    JSX обладает всеми возможностями JavaScript. Вы можете поместить любых выражений JavaScript в фигурные скобки внутри JSX. Каждый элемент React — это объект JavaScript, который вы можете хранить в переменной или передавать в своей программе.

    Компонент ShoppingList выше отображает только встроенные компоненты DOM, такие как

    и
  • . Но вы также можете создавать и отображать собственные компоненты React.Например, теперь мы можем обратиться ко всему списку покупок, написав . Каждый компонент React инкапсулирован и может работать независимо; это позволяет создавать сложные пользовательские интерфейсы из простых компонентов.

    Проверка стартера Код

    Если вы собираетесь работать с учебным пособием в браузере, откройте этот код в новой вкладке: Стартовый код . Если вы собираетесь работать над учебником локально, вместо этого откройте src/index.js в папке вашего проекта (вы уже трогали этот файл во время установки).

    Этот стартовый код является основой того, что мы строим. Мы предоставили стили CSS, чтобы вам нужно было сосредоточиться только на изучении React и программировании игры в крестики-нолики.

    Изучив код, вы заметите, что у нас есть три компонента React:

    Компонент Square отображает одну <кнопку> , а Board отображает 9 квадратов. Компонент Game отображает доску со значениями-заполнителями, которые мы изменим позже.В настоящее время нет интерактивных компонентов.

    Передача данных через свойства

    Чтобы намочить ноги, давайте попробуем передать некоторые данные из нашего компонента Board в наш компонент Square.

    Мы настоятельно рекомендуем вводить код вручную во время работы с учебным пособием и не использовать копирование/вставку. Это поможет вам развить мышечную память и более глубокое понимание.

    В методе Board renderSquare измените код, чтобы передать реквизит с именем value в Square:

      class Board расширяет React.Составная часть {
      визуализировать квадрат (я) {
        вернуть <Квадратное значение={i}/>; }
    }  

    Изменить метод Square render , чтобы отобразить это значение, заменив {/* TODO */} на {this.props.value} :

      класс Square расширяет React.Component {
      оказывать() {
        возврат (
          <кнопка className="квадрат">
            {this.props.value} 
        );
      }
    }  

    До:

    После: Вы должны увидеть число в каждом квадрате в отрендеренном выводе.

    Посмотреть полный код на этом этапе

    Поздравляем! Вы только что «передали реквизит» из родительского компонента Board в дочерний компонент Square. Передача реквизита — это то, как информация передается в приложениях React от родителей к детям.

    Создание интерактивного компонента

    Давайте заполним компонент Square знаком «X», когда щелкнем по нему. Во-первых, измените тег кнопки, возвращаемый функцией render() компонента Square, на этот:

      класс Square расширяет React.Составная часть {
      оказывать() {
        возврат (
          

    Если вы сейчас нажмете на квадрат, вы должны увидеть «щелчок» в консоли devtools вашего браузера.

    Примечание

    Чтобы не вводить текст и избежать запутанного поведения this , мы будем использовать синтаксис стрелочной функции для обработчиков событий здесь и далее:

      класс Square расширяет React.Составная часть {
     оказывать() {
       возврат (
         

    Обратите внимание, что с onClick={() => console.log('click')} мы передаем функцию в качестве реквизита onClick . React будет вызывать эту функцию только после клика. Забыть () => и написать onClick={console.log('click')} — распространенная ошибка, которая будет срабатывать каждый раз при повторном рендеринге компонента.

    В качестве следующего шага мы хотим, чтобы компонент Square «запомнил», что по нему щелкнули, и заполним его отметкой «X». Чтобы «запомнить» вещи, компоненты используют состояние .

    Компоненты React могут иметь состояние, установив this.state в своих конструкторах. this.state следует рассматривать как приватное для компонента React, в котором он определен. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии Square.

    Сначала мы добавим в класс конструктор для инициализации состояния:

      класс Square расширяет React.Component {
      конструктор (реквизит) { супер (реквизит); this.state = {значение: null,}; }
      оказывать() {
        возврат (
          

    Примечание

    В классах JavaScript необходимо всегда вызывать super при определении конструктора подкласса.Все классы компонентов React, имеющие конструктор , должны начинаться с вызова super(props) .

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

    • Замените this.props.value на this.state.value внутри тега
    • Замените обработчик события onClick={...} на onClick={() => this.setState({value: 'X'})} .
    • Поместите реквизиты className и onClick в отдельные строки для лучшей читабельности.

    После этих изменений тег ); } }

    Вызывая this.setState из обработчика onClick в методе Square render , мы сообщаем React повторно отображать этот Square всякий раз, когда нажимается его ); } }

    При щелчке по Square вызывается функция onClick , предоставляемая Board. Вот обзор того, как это достигается:

    1. Свойство onClick во встроенном компоненте DOM
    2. Когда кнопка нажата, React вызовет обработчик события onClick , который определен в методе Square render() .
    3. Этот обработчик события вызывает this.props.onClick() . Правление определило опору Square onClick .
    4. Поскольку Board передал onClick={() => this.handleClick(i)} в Square, Square вызывает handleClick(i) Board при нажатии.
    5. Мы еще не определили метод handleClick() , поэтому наш код дает сбой.Если вы сейчас щелкнете квадрат, вы должны увидеть красный экран с ошибкой, говорящий что-то вроде «this.handleClick не является функцией».

    Примечание

    Атрибут onClick элемента DOM

    Когда мы пытаемся щелкнуть квадрат, мы должны получить сообщение об ошибке, потому что мы еще не определили handleClick . Теперь мы добавим handleClick в класс Board:

    .
      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).заполнить (нулевой),
        };
      }
    
      handleClick(i) { const squares = this.state.squares.slice(); квадраты [i] = 'X'; this.setState({квадраты: квадраты}); }
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок: X';
    
        возврат (
          <дел>
            
    {status}
    {это.визуализировать квадрат (0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
  • ); } }

    Посмотреть полный код на этом этапе

    После этих изменений мы снова можем нажимать на квадраты, чтобы заполнять их, как и раньше.Однако теперь состояние хранится в компоненте Board, а не в отдельных компонентах Square. Когда состояние Board изменяется, компоненты Square автоматически перерисовываются. Сохранение состояния всех квадратов компонента Board позволит ему определить победителя в будущем.

    Поскольку компоненты Square больше не сохраняют состояние, компоненты Square получают значения от компонента Board и сообщают компоненту Board при нажатии. В терминах React компоненты Square теперь являются контролируемыми компонентами .Правление имеет над ними полный контроль.

    Обратите внимание, как в handleClick мы вызываем .slice() для создания копии массива из квадратов для изменения вместо изменения существующего массива. Мы объясним, почему мы создаем копию массива квадратов в следующем разделе.

    Почему важна неизменность

    В предыдущем примере кода мы предложили создать копию массива квадратов с помощью метода slice() вместо изменения существующего массива.Теперь мы обсудим неизменность и почему важно изучить неизменность.

    Обычно существует два подхода к изменению данных. Первый подход состоит в том, чтобы изменить данные путем прямого изменения значений данных. Второй подход заключается в замене данных новой копией с желаемыми изменениями.

    Изменение данных с мутацией
      var player = {счет: 1, имя: 'Джефф'};
    игрок.счет = 2;
      
    Изменение данных без мутации
      var player = {счет: 1, имя: 'Джефф'};
    
    вар новый игрок = объект.назначить ({}, игрок, {счет: 2});
    
    
    
      

    Конечный результат тот же, но без мутации (или изменения базовых данных) напрямую мы получаем несколько преимуществ, описанных ниже.

    Сложные функции становятся простыми

    Неизменяемость значительно упрощает реализацию сложных функций. Позже в этом руководстве мы реализуем функцию «путешествия во времени», которая позволит нам просмотреть историю игры в крестики-нолики и «вернуться» к предыдущим ходам. Эта функциональность не специфична для игр — возможность отмены и повтора определенных действий является обычным требованием в приложениях.Избегая прямой мутации данных, мы можем сохранить предыдущие версии истории игры нетронутыми и использовать их позже.

    Обнаружение изменений

    Обнаружение изменений в изменяемых объектах затруднено, поскольку они изменяются напрямую. Это обнаружение требует, чтобы изменяемый объект сравнивался с предыдущими копиями самого себя, и чтобы было пройдено все дерево объектов.

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

    Определение момента повторного рендеринга в React

    Основное преимущество неизменяемости заключается в том, что она помогает создавать чистых компонентов в React. Неизменяемые данные могут легко определить, были ли внесены изменения, что помогает определить, когда компонент требует повторного рендеринга.

    Вы можете узнать больше о shouldComponentUpdate() и о том, как можно собрать чистых компонентов , прочитав Оптимизация производительности.

    Функциональные компоненты

    Теперь мы изменим Square на функциональный компонент .

    В React функциональные компоненты — это более простой способ написания компонентов, которые содержат только метод рендеринга и не имеют собственного состояния. Вместо того, чтобы определять класс, который расширяет React.Component , мы можем написать функцию, которая принимает props в качестве входных данных и возвращает то, что должно быть отрисовано. Функциональные компоненты менее утомительны в написании, чем классы, и многие компоненты могут быть выражены таким образом.

    Замените класс Square этой функцией:

      функция Квадрат(реквизит) {
      возврат (
        

    Мы изменили this.props на props оба раза, когда он появляется.

    Посмотреть полный код на этом этапе

    Примечание

    Когда мы преобразовали Square в функциональный компонент, мы также изменили onClick={() => this.props.onClick()} на более короткий onClick={props.onClick} (обратите внимание на отсутствие скобок на с обеих сторон ).

    По очереди

    Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: на доске нельзя отмечать буквы «О».

    По умолчанию первым ходом будет «X». Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board:

    .
      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).fill(null),
          xIsNext: правда, };
      }  

    Каждый раз, когда игрок перемещается, xIsNext (логическое значение) будет перевернуто, чтобы определить, какой игрок ходит следующим, и состояние игры будет сохранено.Мы обновим функцию handleClick платы, чтобы изменить значение xIsNext :

    .
      дескрипторClick(i) {
        константные квадраты = this.state.squares.slice();
        квадраты[i] = this.state.xIsNext ? «Х»: «О»; это.setState({
          квадраты: квадраты,
          xIsNext: !this.state.xIsNext, });
      }  

    С этим изменением «X» и «O» могут меняться. Попробуй это!

    Давайте также изменим текст «статуса» в рендере Board , чтобы он отображал, какой игрок имеет следующий ход:

      рендеринг () {
        const status = 'Следующий игрок:' + (this.состояние.xIsNext ? «Х»: «О»);
        возврат (
            

    После применения этих изменений у вас должен быть этот компонент Board:

      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).fill(null),
          xIsNext: правда, };
      }
    
      дескрипторклик(я) {
        константные квадраты = this.state.squares.slice(); квадраты[i] = this.state.xIsNext ? «Х»: «О»; this.setState({ квадраты: квадраты, xIsNext: !this.состояние.xIsNext, }); }
    
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок:' + (this.state.xIsNext ? 'X' : 'O');
        возврат (
          <дел>
            
    {status}
    {это.renderSquare(0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.рендерквадрат(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); } }

    Посмотреть полный код на этом этапе

    Объявление победителя

    Теперь, когда мы показываем ход следующего игрока, мы должны также показать, когда игра выиграна и ходов больше нет.Скопируйте эту вспомогательную функцию и вставьте ее в конец файла:

    .
      функция calculateWinner(квадраты) {
      постоянные строки = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ];
      for (пусть я = 0; я  

    Учитывая массив из 9 квадратов, эта функция проверит победителя и вернет 'X' , 'O' или null в зависимости от ситуации.

    Мы вызовем calculateWinner(squares) в функции Board render , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить такой текст, как «Победитель: X» или «Победитель: O». Мы заменим объявление статуса в функции Board render на этот код:

      рендеринг () {
        константный победитель = вычислить победителя (это.состояние.квадраты); пусть статус; если (победитель) { статус = 'Победитель:' + победитель; } else { status = 'Следующий игрок: ' + (this.состояние.xIsNext ? «Х»: «О»); }
        возврат (
            

    Теперь мы можем изменить функцию handleClick Board так, чтобы она возвращалась раньше, игнорируя щелчок, если кто-то выиграл игру или если квадрат уже заполнен:

      дескрипторClick(i) {
        константные квадраты = this.state.squares.slice();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) { return; } квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          квадраты: квадраты,
          xIsNext: !это.состояние.xIsNext,
        });
      }  

    Посмотреть полный код на этом этапе

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

    Добавление путешествий во времени

    В качестве последнего упражнения давайте сделаем возможным «вернуться назад во времени» к предыдущим ходам в игре.

    Сохранение истории ходов

    Если бы мы мутировали массив квадратов , реализовать путешествие во времени было бы очень сложно.

    Однако мы использовали slice() для создания новой копии массива квадратов после каждого перемещения и обрабатывали его как неизменяемый. Это позволит нам хранить каждую прошлую версию массива квадратов и перемещаться между уже произошедшими поворотами.

    Мы будем хранить последние квадратов массивов в другом массиве с именем history . Массив history представляет все состояния доски, от первого до последнего хода, и имеет следующую форму:

      история = [
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, нуль, нуль,
          нуль, нуль, нуль,
        ]
      },
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, 'X', ноль,
          нуль, нуль, нуль,
        ]
      },
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, 'X', ноль,
          ноль, нуль, 'О',
        ]
      },
      
    ]  

    Теперь нам нужно решить, какой компонент должен владеть историей состояния.

    Поднятие состояния, снова

    Нам нужно, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему потребуется доступ к истории , поэтому мы поместим состояние истории в компонент Game верхнего уровня.

    Помещение состояния history в компонент Game позволяет удалить состояние квадратов из его дочернего компонента Board. Точно так же, как мы «подняли состояние» из компонента Square в компонент Board, мы теперь поднимаем его из Board в компонент Game верхнего уровня.Это дает компоненту Game полный контроль над данными Board и позволяет ему рендерить предыдущие ходы из истории .

    Сначала мы настроим начальное состояние компонента Game в его конструкторе:

      класс Game расширяет React.Component {
      конструктор (реквизит) { супер (реквизит); this.state = { история: [{ квадраты: Array(9).fill(null), }], xIsNext: true, }; }
      оказывать() {
        возврат (
          
    <Доска />
    <дел>{} <ол>{}
    ); } }

    Затем компонент Board получит квадратов и onClick реквизита из компонента Game.Поскольку теперь у нас есть один обработчик кликов в Board для многих квадратов, нам нужно передать местоположение каждого квадрата в обработчик onClick , чтобы указать, какой квадрат был нажат. Вот необходимые шаги для преобразования компонента Board:

    • Удалить конструктор в Board.
    • Замените this.state.squares[i] на this.props.squares[i] в Board renderSquare .
    • Замените this.handleClick(i) на this.props.onClick(i) в Board renderSquare .

    Компонент Board теперь выглядит так:

      класс Board расширяет React.Component {
      дескрипторклик(я) {
        константные квадраты = this.state.squares.slice();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          квадраты: квадраты,
          xIsNext: !this.state.xIsNext,
        });
      }
    
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение = {это.props.squares[i]} onClick={() => this.props.onClick(i)} />
        );
      }
    
      оказывать() {
        константный победитель = вычислить победителя (это.состояние.квадраты);
        пусть статус;
        если (победитель) {
          статус = 'Победитель: ' + победитель;
        } еще {
          status = 'Следующий игрок: ' + (this.state.xIsNext ? 'X' : 'O');
        }
    
        возврат (
          <дел>
            
    {status}
    {это.renderSquare(0)} {это.renderSquare(1)} {это.визуализировать квадрат (2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); } }

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

      рендеринг () {
        постоянная история = это.гос.история; постоянный текущий = история[история.длина - 1]; константный победитель = вычислить победителя (current.squares); пусть статус; если (победитель) { статус = 'Победитель:' + победитель; } else { status = 'Следующий игрок: ' + (this.state.xIsNext ? 'X' : 'O'); }
        возврат (
          
    this.handleClick(i)} />
    {status}
      {}
    ); }

    Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода Board render .После рефакторинга функция Board render выглядит так:

      render() { return ( 
    {this.renderSquare(0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.рендерквадрат(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); }

    Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game. Нам также необходимо изменить handleClick , поскольку состояние компонента Game имеет другую структуру. В методе Game handleClick мы объединяем новые записи истории с историей .

      дескрипторClick(i) {
        постоянная история = это.гос.история; постоянный текущий = история[история.длина - 1]; константные квадраты = текущие.квадраты.срез(); если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          история: history.concat([{ квадраты: квадраты, }]), xIsNext: !this.state.xIsNext,
        });
      }  

    Примечание

    В отличие от метода массива push() , с которым вы, возможно, более знакомы, метод concat() не изменяет исходный массив, поэтому мы предпочитаем его.

    На данный момент компоненту Board нужны только методы renderSquare и render . Состояние игры и метод handleClick должны находиться в компоненте Game.

    Посмотреть полный код на этом этапе

    Отображение прошлых ходов

    Поскольку мы записываем историю игры в крестики-нолики, теперь мы можем показать ее игроку в виде списка прошлых ходов.

    Ранее мы узнали, что элементы React — это первоклассные объекты JavaScript; мы можем передать их в наших приложениях.Чтобы отобразить несколько элементов в React, мы можем использовать массив элементов React.

    В JavaScript массивы имеют метод map() , который обычно используется для сопоставления данных с другими данными, например:

      константные числа = [1, 2, 3];
    const удвоился = числа.карта (х => х * 2);  

    Используя метод map , мы можем сопоставить нашу историю ходов с элементами React, представляющими кнопки на экране, и отобразить список кнопок, чтобы «перепрыгнуть» к прошлым ходам.

    Давайте отобразим карту по истории в игре рендеринг метод:

      рендеринг () {
        const history = this.state.history;
        постоянный текущий = история[история.длина - 1];
        константный победитель = вычислить победителя (current.squares);
    
        const move = history.map((step, move) => { const desc = move ? 'Перейти к ходу #' + move : 'Перейти к началу игры'; return ( 
  • );}); пусть статус; если (победитель) { статус = 'Победитель: ' + победитель; } еще { status = 'Следующий игрок: ' + (this.состояние.xIsNext ? «Х»: «О»); } возврат (
    <Доска квадраты={текущие.квадраты} onClick={(i) => this.handleClick(i)} />
    {статус
      {перемещает
    ); }

    Посмотреть полный код на этом этапе

    Когда мы повторяем массив history , переменная step ссылается на текущее значение элемента history , а move ссылается на текущий индекс элемента history .Нас интересует только , переместить здесь, следовательно, шаг не назначается ничему.

    Для каждого хода в истории игры в крестики-нолики мы создаем элемент списка

  • , который содержит кнопку
  • ); });

    Посмотреть полный код на этом этапе

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

    Сначала добавьте stepNumber: 0 к начальному состоянию конструктора Game :

      класс Game расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          история: [{
            квадраты: Массив(9).fill(null),
          }],
          stepNumber: 0, xIsNext: правда,
        };
      }  

    Далее мы определим метод jumpTo в игре, чтобы обновить этот stepNumber .Мы также устанавливаем xIsNext в значение true, если число, на которое мы меняем stepNumber , четное:

      дескрипторClick(i) {
        
      }
    
      jumpTo(шаг) { this.setState({ stepNumber: шаг, xIsNext: (шаг % 2) === 0, }); }
      оказывать() {
        
      }  

    Обратите внимание, что в методе jumpTo мы не обновили свойство истории состояния. Это связано с тем, что обновления состояния объединяются или, проще говоря, React будет обновлять только свойства, упомянутые в методе setState , оставляя оставшееся состояние как есть.Для получения дополнительной информации см. документацию .

    Теперь мы внесем несколько изменений в метод Game handleClick , который срабатывает, когда вы щелкаете по квадрату.

    Добавленное нами состояние stepNumber отражает ход, отображаемый пользователю сейчас. После того, как мы сделаем новый ход, нам нужно обновить stepNumber , добавив stepNumber: history.length как часть аргумента this.setState . Это гарантирует, что мы не застрянем, показывая один и тот же ход после того, как был сделан новый.

    Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся назад во времени», а затем сделаем новый ход из этой точки, мы отбросим всю «будущую» историю, которая сейчас была бы неверной.

      дескрипторClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1); постоянный текущий = история[история.длина - 1];
        const квадраты = текущие квадраты.кусочек();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          история: history.concat([{
            квадраты: квадраты
          }]),
          stepNumber: history.length, xIsNext: !this.state.xIsNext,
        });
      }  

    Наконец, мы изменим метод рендеринга компонента Game, чтобы он всегда отображал последний ход, а отображал текущий выбранный ход в соответствии с stepNumber :

    .
      рендеринг () {
        постоянная история = это.гос.история;
        const current = history[this.state.stepNumber]; константный победитель = вычислить победителя (current.squares);
    
          

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

    Посмотреть полный код на этом этапе

    Подведение итогов

    Поздравляем! Вы создали игру в крестики-нолики, которая:

    • Позволяет играть в крестики-нолики,
    • Указывает, когда игрок выиграл игру,
    • Сохраняет историю игры по ходу игры,
    • Позволяет игрокам просматривать историю игры и просматривать предыдущие версии игрового поля.

    Отличная работа! Мы надеемся, что теперь вы чувствуете, что хорошо понимаете, как работает React.

    Проверьте окончательный результат здесь: Окончательный результат .

    Если у вас есть дополнительное время или вы хотите попрактиковаться в своих новых навыках React, вот несколько идей по улучшению игры в крестики-нолики, которые перечислены в порядке возрастания сложности:

    1. Показать расположение для каждого хода в формате (столбец, строка) в списке истории ходов.
    2. Выделить жирным текущий выбранный элемент в списке перемещения.
    3. Перепишите доску, чтобы использовать две петли для создания квадратов вместо их жесткого кодирования.
    4. Добавьте кнопку-переключатель, которая позволяет сортировать ходы в порядке возрастания или убывания.
    5. Когда кто-то выигрывает, выделите три квадрата, которые привели к выигрышу.
    6. Когда никто не выигрывает, отображать сообщение о ничьей.

    В этом руководстве мы коснулись концепций React, включая элементы, компоненты, свойства и состояние. Для более подробного объяснения каждой из этих тем ознакомьтесь с остальной документацией.Чтобы узнать больше об определении компонентов, ознакомьтесь со справочником API React.Component .

    Как написать контент для веб-сайта за 9 шагов

    Как написать контент для веб-сайта — один из самых больших вопросов, с которыми сталкиваются начинающие контент-маркетологи. Возможно, вы смотрите на свои заметки и задаетесь вопросом, как вы собираетесь превратить все это в эффективный и красивый веб-текст.

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

    Быстрые ссылки: как написать контент для веб-сайта?

    Готовы прыгнуть? Вот так!

    Шаг 1. Определите цель содержимого веб-сайта

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

    Содержимое веб-сайта продает продукт? Предназначено ли это для привлечения новых клиентов? Создает ли он трафик для поддержки рекламы и спонсорства? Как только вы узнаете основную цель контента веб-сайта, который вы создаете, у вас будет больше возможностей для написания текста, который поможет достичь этой цели.

    Но прежде чем вы напишете хотя бы одно слово контента для веб-сайта, узнайте, для кого вы его пишете.

    Шаг 2. Исследование аудитории

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

    • Их уровень знаний. Если вы планируете общаться с экспертами на своем веб-сайте, вы будете использовать другой язык, чем если бы вы говорили с новичками.
    • То, что они действительно хотят знать. Это ключ к написанию эффективного контента для веб-сайта, потому что, если вы сможете ответить на их вопросы лучше, чем кто-либо другой, у вас будет больше шансов завоевать их как клиента.
    • Как они попадут на страницу. Понимание того, откуда приходят ваши пользователи или что они могут искать, попадая на вашу страницу, поможет вам определить, как вы позиционируете свой контент.
    • Их интересы. Знание того, что интересует вашу аудиторию помимо целевой страницы, которую вы создаете, может помочь вам узнать, какие элементы добавить к контенту вашего веб-сайта, чтобы поддерживать их интерес к вашему сайту.

    Как вы изучаете свою аудиторию?

    Существует несколько способов исследования аудитории вашего сайта.Alexa предлагает несколько полезных инструментов для этого. Например, Audience Overlap показывает вам другие сайты, которые ваши посетители могут посетить. Интересы аудитории также показывают вам темы, которые могут их заинтересовать.

    Другие способы исследования вашей аудитории включают в себя прямые вопросы, просмотр действий, которые они совершают на вашем веб-сайте, в вашей аналитической программе и поиск общих черт среди ваших лучших клиентов.

    Изучение ваших конкурентов также даст важную информацию.

    Шаг 3: Изучите конкурирующие веб-сайты

    Хорошее написание содержания веб-сайта зависит от всестороннего взгляда на конкурентную среду. Сравнение вашего сайта с сайтами ваших конкурентов дает важную информацию, которая повлияет на копию сайта, которую вы пишете. Вот почему:

    • Ваши посетители также посещают сайты ваших конкурентов. Узнайте, что они там читают, чтобы вы могли занять свою позицию или предложить что-то другое — лучшее — на своем веб-сайте.
    • Это поможет вам определить отраслевые тенденции в содержании веб-сайтов.Вы сможете замечать стратегические сдвиги или новые тактики, которые пробуют конкуренты, на ранней стадии, а не узнавать об этом последними.
    • Вы можете использовать данные конкурентов для оценки своей производительности. Получите представление о трафике, обратных ссылках и ключевых словах, по которым ранжируются сайты ваших конкурентов, чтобы вы могли ставить реалистичные цели для ежемесячной оценки.
    •  Это может вдохновить на создание новых тем для контента. Вы будете благодарны за то, что у вас под рукой будет источник идей.

    Эта ознакомительная фаза поможет вам оценить ваши возможности, прежде чем писать.

    Как вы исследуете конкурентов?

    Alexa предлагает несколько полезных инструментов конкурентного анализа. Чтобы найти хороший список конкурентов, используйте инструмент Audience Overlap. Получив этот список, проанализируйте конкурирующие веб-сайты различными способами.

    Например, вы можете найти ключевые слова, по которым ваши конкуренты получают трафик, с помощью матрицы ключевых слов конкурентов. С помощью этой информации вы можете определить, насколько конкурентоспособна ваша отрасль с точки зрения SEO. Это поможет вам определить свой подход к содержанию вашего веб-сайта.Потратьте некоторое время на посещение каждого из ведущих конкурирующих сайтов, чтобы понять их стиль, темы и отличия.

    Одно замечание: на данном этапе вы рассматриваете конкурирующие веб-сайты в целом. Позже вы также посмотрите на отдельные страницы, которые конкурируют с веб-страницами, которые вы пишете.

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

    Шаг 4. Спланируйте, как контент будет сочетаться друг с другом на вашем веб-сайте

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

    Если вы переделываете веб-сайт или создаете новый, вам может пригодиться создание каркаса. Это может быть так же просто, как набросать список страниц и тем, которые они будут освещать.

    Продумать:

    • Какие страницы вам понадобятся и назначение каждой
    • Как люди будут переходить на каждую страницу

    Контент веб-сайтов бывает разных форм и размеров. От подробного контента и постов в блогах до аннотаций на боковой панели и описаний продуктов — текст подготавливается и отображается различными способами для разных целей.

    Связанный: 3 совета, которые помогут улучшить ваши статьи с инструкциями

    Шаг 5. Напишите содержимое для каждой страницы

    Теперь пришло время углубиться в этапы написания текстов для ваших веб-страниц. Начните с понимания цели страницы, которую вы собираетесь написать.

    Определите назначение страницы.

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

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

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

    • Переходы: страница, предназначенная для перехода пользователя на другую веб-страницу
    • Генерация потенциальных клиентов: страница, предназначенная для того, чтобы пользователь мог ввести свою информацию в форму подписки
    • Покупка: страница, предназначенная для того, чтобы побудить пользователя совершить покупку

    Сообщения в блогах также являются контентом веб-сайта, но их цель обычно заключается в обучении и повышении узнаваемости бренда.Это страницы с отметками времени, часто связанные с чем-то актуальным, своевременным, сезонным или заслуживающим внимания, тогда как целевые страницы обычно являются вечнозелеными страницами.

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

    Найдите лучшее ключевое слово для страницы.

    Ключевое слово — это основной термин, который поисковые системы должны ассоциировать с вашей страницей.Еще до того, как вы начнете писать, определите лучшее ключевое слово для таргетинга.

    Как найти лучшее ключевое слово?

    Чтобы определить лучшее ключевое слово для своей страницы, используйте инструмент Alexa Keyword Difficulty.

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

    Фильтры сложности ключевых слов Alexa в действии для ключевой фразы «календарь контента».

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

    Если вы хотите узнать больше о выборе ключевых слов, ознакомьтесь с Шпаргалкой по оптимизации ключевых слов для лучшего SEO.После того, как вы пройдете поиск ключевых слов и выберете свое основное ключевое слово, читайте дальше, чтобы узнать больше о том, как писать контент для веб-сайта.

    Исследование популярных и конкурирующих страниц.

    С какими страницами будет конкурировать ваша страница? Если вы знаете это, вы можете найти возможности для создания лучшей страницы.

    Один из способов сделать это — просто ввести целевое ключевое слово в Google и посмотреть, какие сайты в настоящее время отображаются на первой странице результатов. Пройдите их один за другим и обратите внимание на:

    • Длина содержимого страницы
    • Темы, затронутые на страницах
    • Как они форматируют информацию (в виде списков или абзацев?)

    Вы также можете использовать инструмент Alexa Content Exploration, чтобы узнать, какие страницы в вашем пространстве популярны в социальных сетях.Поиск страниц, которые находят отклик у людей в Твиттере, например, может дать вам ценные подсказки о том, о чем люди хотят читать.

    Самый популярный контент в Твиттере по термину «ювелирные изделия с бриллиантами», найденный с помощью инструмента Alexa Content Exploration.

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

    Напишите план и соберите ресурсы.

    Чтобы написать хороший контент для веб-сайта, начните с плана.

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

    Затем создайте свой первый черновик копии веб-страницы.

    Запись копии страницы.

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

    • Знайте свою цель, прежде чем начать. Ранее в этом посте мы говорили об определении цели вашей страницы.Помните об этой цели, когда пишете. Создавайте весь свой контент с намерением побудить аудиторию совершить желаемое действие.
    • Используйте перевернутую пирамиду. Это означает предоставление читателю самой важной информации в начале и менее важной информации ближе к концу. Стиль перевернутой пирамиды подходит для того, как люди читают в Интернете.
    • Сосредоточьтесь на преимуществах, а не на функциях. Когда вы выделяете продукты, услуги, поощрения или предложения, покажите читателю, что это значит для него.Вместо того, чтобы перечислять функции, объясните, как каждая функция приносит пользу читателю. Например, не говорите о системе передач велосипеда; говорить о способности велосипеда обеспечить плавную езду.
    • Объясните трансформацию. Дайте читателю представление о том, как продукт, услуга, поощрение или предложение изменят его ситуацию. Объясните, на что похожа их жизнь до и после того, как они начнут действовать, и расскажите читателю, как их жизнь улучшится, когда они сделают следующий шаг.
    • Будьте кратки и ясны. Используйте короткие предложения и фразы. Избегайте сложных формулировок, которые отпугивают читателей, и вырезайте любую ненужную или витиеватую информацию. Старайтесь говорить только то, что читатель должен знать.
    • Избегайте модных словечек и жаргона. Не путайте и не теряйте читателей, используя высокоуровневую терминологию, которую они не понимают. Пишите на том же языке, на котором говорит ваша аудитория.
    • Используйте маркеры и форматирование. Помогите читателям найти самые важные моменты в тексте, разбив его на части.Выделите основные моменты, используя маркеры, полужирный шрифт, курсив и различные стили и размеры шрифта. Большинство читателей просматривают текст, поэтому убедитесь, что ключевые моменты выделяются.
    • Говорите напрямую со считывателем. Копирование более эффективно, если оно направлено прямо на вашу аудиторию. Используйте тот же язык, который вы использовали бы, чтобы говорить с вашим читателем лично. Используйте такие слова, как «вы» и «ваш», и, когда это уместно, включайте такие слова, как «нас» и «мы».
    • Отклонение от правил грамматики – если это звучит естественно. Хотя вы не хотите, чтобы ваша копия содержала вопиющие грамматические ошибки, вы можете отклоняться от строгих академических правил письма. Если звучит более естественно закончить предложение предлогом или использовать неполное предложение, нарушайте правила. Но нарушайте правила только в том случае, если это добавляет тексту ясности и естественного звучания. Не раздвигайте границы настолько, чтобы ваш текст выглядел неотшлифованным и неряшливым.

    Обратите особое внимание на то, как вы завершите страницу.

    Завершите страницу сильным призывом к действию.

    Когда вы научитесь писать контент для веб-сайта, вам нужно подумать о том, как вы можете побудить читателя совершить действие на странице. Чтобы инициировать эту деятельность, используйте четкий призыв к действию в конце каждой страницы. Используйте эти советы, чтобы точно сказать читателю, что вы от него хотите и почему он должен действовать.

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

    • Приложите доказательство. Покажите читателям, почему они могут вам доверять. Подкрепите свои заявления, включив отзывы, статистику, данные и упоминания в социальных сетях, которые обеспечивают доказательства и поддержку.
    • Преодоление возражений. Поставьте себя на место вашей аудитории и представьте, какие возражения удерживают их от действий. Решите эти проблемы и предоставьте такие варианты, как бесплатные пробные версии и гарантии возврата денег, чтобы аудитория не могла сопротивляться вашему предложению.
    • Используйте слова действия. Не позволяйте вашей аудитории ничуть не смущаться, когда они доходят до конца вашей страницы. Включите призыв к действию, в котором используются слова действия (начать, нажать здесь, зарегистрироваться, позвонить, заполнить и т. д.), которые точно сообщают им, что им нужно сделать, чтобы сделать следующий шаг.

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

    Пересмотрите свой заголовок.

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

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

    Заголовки для контента веб-сайта должны быть:

    • Очистить: Каламбуры или остроумные заголовки могут иногда работать для сообщений в блогах или социальных сетях, но избегайте их использования для заголовков целевых страниц.Всегда переходите к делу и четко объясняйте, о чем страница.
    • Релевантно: Заголовок должен соответствовать содержимому страницы, призыву к действию и ссылке, которая привела пользователя на страницу. Сопоставьте заголовки с языком призыва к действию, объявления или рекламной акции, которая привела аудиторию на страницу. Затем убедитесь, что остальная часть текста и призыв к действию соответствуют основному заголовку страницы.
    • Ориентация на желание: Используйте свой заголовок как возможность рассказать о действии, которое вы хотите, чтобы пользователи выполнили, когда они получили то, что им нужно на вашей странице.В заголовке представьте основное решение, выгоду или результат, который даст действие.

    Заголовки — отличное место, где можно сосредоточить свои усилия, поскольку правильный заголовок может существенно повлиять на эффективность страницы. Узнайте больше здесь: 12 советов по написанию заголовков, перед которыми не могут устоять читатели (и поисковые системы).

    Шаг 6. Добавление некопируемых элементов страницы

    Руководство по написанию содержания веб-сайта включает в себя больше, чем просто текст. Чтобы создать надежные целевые страницы с высокой конверсией и другой контент веб-сайта, обратите внимание на некопируемые элементы на странице.Вставьте визуальные эффекты, которые показывают концепции (вместо того, чтобы полагаться на слова для их описания).

    Вы можете разбить страницу и привлечь внимание читателя к важной информации, используя:

    • Изображения
    • Кнопки
    • Текстовые выноски
    • Иконки
    • Пробел
    • Гифки
    • Диаграммы и графики
    • Видео
    • Разрывы строк
    • Вариации фоновых цветов и изображений

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

    Шаг 7. Внесите изменения

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

    В этот момент вы, вероятно, найдете возможность:

    • Исправьте опечатки
    • Улучшить выбор слабых слов
    • Переписать неясные разделы
    • Усилить заголовок
    • Ссылка на другой контент на вашем сайте

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

    Шаг 8. Оптимизация страницы для SEO

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

    Естественно используйте основное ключевое слово во всем контенте.

    После того, как вы напишете свой контент, просмотрите его еще раз и убедитесь, что вы использовали свое ключевое слово во всем тексте.Плотность ключевых слов около 1-2% идеальна, так как этого достаточно, чтобы сообщить поисковым системам, о чем страница, не набивая страницу слишком большим количеством использований одного и того же слова, что может негативно повлиять на вашу способность ранжироваться в поисковых системах.

    Помимо использования ключевого слова в основном тексте, также используйте его в следующих элементах SEO-контента:

    • Название страницы (заголовок, который виден на странице)
    • Хотя бы один подзаголовок (копия в формате h3, h4, h5 и т.)
    • Тег заголовка (заголовок страницы из 50-60 символов, встроенный в код страницы)
    • Мета-описание (резюме страницы длиной 150-160 символов, встроенное в код страницы)
    • Альтернативные теги изображения (текст, который описывает изображение и появляется, если изображение не загружается должным образом)

    Ссылка на новую страницу с других страниц вашего сайта.

    Помогите как пользователям, так и поисковым системам найти ваш новый контент веб-сайта, ссылаясь на него с других страниц вашего сайта.Ссылки на сайте помогают аудитории найти то, что им нужно, а также посылают сигналы поисковым системам, сообщая им, о чем страница и что она имеет ценность. Кроме того, когда это естественно, создавайте ссылки на целевые страницы, используя якорный текст, который включает основное ключевое слово страницы.

    Дважды проверьте элементы SEO на странице.

    Даже если вы оптимизируете свою страницу, можно легко упустить возможности или совершить ошибки. Чтобы проверить SEO на странице и убедиться, что вы правильно оптимизируете страницу, используйте Alexa’s On-Page SEO Checker.Инструмент сканирует вашу страницу и предоставляет подробную информацию об ошибках и инструкции по устранению ошибок.

    Введите URL-адрес своей страницы и основное ключевое слово в средство проверки SEO на странице.

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

    Шаг 9. Запланируйте обновление содержимого позже

    Если вы учитесь писать контент для веб-сайта, вы можете быть удивлены, узнав, что ваша работа на самом деле только начинается.Важно поддерживать актуальность содержимого вашего сайта, и сейчас самое время спланировать, как вы будете обновлять его позже.

    Рассмотрите возможность A/B-тестирования содержимого целевой страницы на вашем веб-сайте.

    Особенно при написании целевых целевых страниц вам следует протестировать различные версии вашей страницы, чтобы увидеть, какая из них обеспечивает наибольшее количество конверсий (процент пользователей, которые выполняют желаемое действие на странице).

    Создайте версии своей страницы с различными вариантами:

    • Заголовки
    • Подзаголовки
    • Призывы к действию
    • Цвета пуговиц
    • Изображения
    • Макеты
    • Характеристики

    Затем проведите A/B-тестирование своих страниц, чтобы увидеть, какая из них больше привлекает пользователей и дает наилучшие результаты.

    Дополнительные советы по написанию контента для веб-сайта

    Следуя описанным выше шагам, вы научитесь создавать контент для веб-сайтов, который будет привлекать читателей и поисковые системы, увеличивать продажи и обеспечивать, чтобы каждая страница делала все возможное для развития вашего бизнеса.

    Чтобы узнать больше о том, как писать контент для веб-сайта, ознакомьтесь с несколькими другими сообщениями в нашем блоге:

    Советы по SEO для блога: контрольный список для написания оптимизированных для SEO постов

    Что такое контент-маркетинг?

    Создайте больше общего контента с помощью этого контрольного списка и 7 полезных инструментов

    И, наконец, не забудьте подписаться на бесплатную 14-дневную пробную версию нашего расширенного плана; это дает вам доступ ко всем инструментам, упомянутым здесь, и многим другим, которые помогут вам улучшить возможности ваших веб-страниц.

    Добавить комментарий

    Ваш адрес email не будет опубликован.