Коды для сайта html дизайн: Шаблон сайта на чистом HTML. Готовый код сайта

Содержание

Фиксированная ширина, три колонки | htmlbook.ru

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

Рис. 1. Трехколоночный макет

Общий каркас определяется с помощью слоя с именем container, он задает ширину и выравнивание макета. Внутри располагаются колонки, причем их порядок в коде такой: левая (назовем ее nav), правая (aside), центральная (content). Построение слоев показано в примере 1.

Пример 1. Колонки в коде

<div>
 <div>Левая колонка</div>
 <div>Правая колонка</div>
 <div>Центральная колонка</div>
</div>

Положение слоев формируется через стили: для левой колонки устанавливается ширина (width) и выравнивание по левому краю (float: left), для правой колонки — ширина и выравнивание по правому краю (float: right), для центральной — отступ слева и справа на ширину левой и правой колонки (пример 2).

Пример 2. Стиль для создания колонок

#container {
 width: 900px; /* Ширина макета */
 margin: 0 auto; /* Выравнивание по центру */
}
#nav {
 width: 200px; /* Ширина левой колонки */
 float: left;
}
#aside {
 width: 300px; /* Ширина правой колонки */
 float: right;
}
#content {
 margin: 0 300px 0 200px; /* Отступ на ширину левой и правой колонки*/
}

Полный код страницы с учетом этого стиля представлен в примере 3.

Пример 3. Трехколоночный макет

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Трехколоночный макет</title>
  <style type="text/css">
   body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #D7E1F2; /* Цвет фона */
    color: #ffe; /* Цвет текста */
   }
   a { color: #008BCE; /* Цвет ссылок */ }
   #container {
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    background: #FCE600; /* Цвет колонок */
   }
   #header { 
    font-size: 2. 2em; /* Размер текста */
    text-align: center; /* Выравнивание по центру */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона шапки */
   }
   #nav, #aside {
    float: left; width: 110px; padding: 5px;
   }
   #content {
    background: #54B948;
    margin: 0 120px; /* Ширина колонок */
    padding: 10px;
   }
   #aside {
    float: right; color: #000;
   }
   h3 { margin: 0 0 1em; }
   #footer { 
    clear: both; /* Отменяем действие float */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона подвала */
   }
  </style>
 </head>
 <body>
  <div>
   <div>Исторический турнир</div>
   <div>
    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>
   </div>
   <div>
    <h4>Статистика</h4>
    <p>одиннадцать человек дошли до финала;</p>
    <p>один человек правильно указал в каком стиле писал Диего Веласкес;</p>
    <p>только один человек знал, кто изобрел пароход;</p>
   </div> 
   <div> 
   <h3>Опрос общественного мнения показал</h3>
    <ul>
     <li>что пароход изобретен: Петром I, А.  Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма 
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий 
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал 
     и Цезарь;</li>
    </ul>
   </div>
   <div>&copy; Влад Мержевич</div>
  </div>
 </body>
</html>

У данной реализации есть несколько особенностей:

  • колонки имеют разную высоту, но за счет применения фона создается иллюзия одинаковой высоты у всех трех колонок;
  • у левой и правой колонки одинаковый цвет фона, он устанавливается свойством background для слоя container;
  • вид колонок сохраняется только в случае, когда высота центральной колонки больше остальных. Если это условие нарушить, пропадет эффект колонок (рис. 2), в остальном макет при этом отображается корректно.

Рис. 2. Правая колонка выше остальных

Резиновая ширина, навигация слева | htmlbook.ru

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

Рис. 1. Макет с резиновой шириной

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 24%; /* Отступ слева */
}

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

Окончательный вариант создания макета приведен в примере 2.

Пример 2. Макет с двумя колонками

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Байки из склепа</title>
  <style>
   body {
    font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   h2 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h3 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #header { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 20%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 25%; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   #footer { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: left; /* Отменяем действие float */
   }
  </style>
 </head>
 <body>
  <div><h2>Байки из склепа</h2></div>
  <div>
    <p><a href="b_all. html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
  </div>
  <div>
    <h3>Алтарь демона </h3>
    <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как 
       планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» 
       смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо 
       сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. 
       Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые 
       испытали взрослые ночью при луне.</p>
    <p>Тем не менее, оказался один человек, на которого работа произвела большое 
       впечатление, — сторож лагеря.  Днём он подошёл к автору «алтаря».</p>
    <p>— Ваша работа? - начал сторож, кивая в сторону площади.<br />
       — А что такое? <br />
       — Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные нарисованы..., 
       а у вас всё же дети маленькие, они испугаться могут...</p>
  </div>
  <div>&copy; Влад Мержевич</div>
 </body>
</html>

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

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

Локальный веб-сервер | htmlbook.ru

Современный сайт представляет собой не просто набор HTML-документов, но и включает в себя множество технологий, в том числе серверных, таких как: SSI (Server-Side Includes, включения на стороне сервера), PHP (PHP: Hypertext Preprocessor, PHP: препроцессор гипертекста), базы данных и многое другое. Для ознакомления и изучения этих технологий ошибкой будет использовать посещаемый рабочий сайт в Интернете, поэтому имеет смысл установить необходимый комплект программ на локальный компьютер и тестировать все на нем.

Наиболее популярной связкой таких программ является веб-сервер Apache, язык программирования PHP, система управления базами данных MySQL, оболочка для администрирования баз данных PhpMyAdmin, шаблонизатор Smarty.

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

В дальнейшем будут рассмотрены программы для домашнего компьютера с операционной системой Windows.

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

Веб-сервер

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

http://www.apache.org

PHP

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

http://www.php.net

MySQL

Система управления базами данных.

http://www.mysql.com

PhpMyAdmin

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

http://www.phpmyadmin.net

Smarty

Мощная система шаблонов для PHP. Использует свой собственный язык, который сочетает HTML и специальные теги Smarty. Шаблоны нужны для разделения программного кода и представления документа или по-другому, для отделения логики от содержания.

http://www.smarty.net

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

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

410+ Характеристики Html Шаблоны

Особенности шаблонов веб-сайтов

Наши Шаблоны веб-сайтов с функциями предоставляют множество лучших бесплатных шаблонов на выбор, а премиальные темы и дополнительные плагины для многоцелевых HTML-шаблонов скоро появятся в наших демонстрационных макетах. Если у вас нет навыков программирования, воспользуйтесь нашими административными шаблонами WordPress для бизнеса, чтобы создать эффективный бизнес-сайт поисковой системы или интернет-магазин недвижимости. Наши дизайнеры и разработчики создали 100% адаптивный конструктор веб-сайтов, доступ к которому осуществляется через панель администратора. Войдя в него, вы увидите последнюю версию шаблонов html5, основанную на bootstrap 4, конструкторе страниц wpbakery, который вы можете использовать при создании своего веб-сайта электронной коммерции, и нет необходимости в квалифицированном персонале.

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

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

30 красивых и бесплатных HTML и CSS шаблонов для Ваших новых проектов и сайтов

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

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

Если Вы не найдёте в этой подборке подходящий шаблон, тогда обязательно посмотрите прошлые подборки:

Классный HTML и CSS шаблон для сайта — Beauty Class

Демо ι Скачать

Замечательны и минималистический CSS шаблон — Good-natured

Демо ι Скачать

Классный HTML и CSS шаблон с красивой шапкой сайта — Rock Castle

Демо ι Скачать

Тёмный шаблон на HTML — Wood Working

Демо ι Скачать

Очень красивый светлый шаблон на CSS — Designa

Демо ι Скачать

Классный HTML шаблон со слайдером — Folder

Демо ι Страница загрузки

Шаблон для ресторанов на HTML — BookStore

Демо ι Скачать

Бесплатный CSS шаблон с классной каруселью — Carousel

Демо ι Скачать

HTML и CSS шаблон для Вашего сайта в голубых тонах — Sailing

Демо ι Скачать

Замечательный шаблон с классным слайдером — Glossy Box

Демо ι Скачать

Клёвый тёмный HTML шаблон с классным слайдером картинок — Liquid

Демо ι Скачать

Музыкальный CSS шаблон для сайта — Musical Instruments

Демо ι Скачать

Не плохой шаблон для Вашего сайта в тёмных тонах — Darkside

Демо ι Скачать

Красивый CSS шаблон для сайта в голубых тонах — Medical Clinic

Демо ι Скачать

Красивый HTML шаблон в тёмных тонах — Erasure

Демо ι Скачать

Отличный шаблон на сайт с HTML и CSS — BeSmart

Демо ι Скачать

Замечательный блоговый шаблон на CSS — Free Software

Демо ι Скачать

Бесплатный тёмный CSS шаблон для сайта — Buzz

Демо ι Скачать

Мини шаблон для сайта — Mini Two

Демо ι Скачать

HTML шаблон с аккордеоном изображений — Accordion

Демо ι Скачать

Замечательный CSS блоговый шаблон для сайта — Briefcase

Демо ι Скачать

Минималистический CSS и HTML шаблон — Light Gray

Демо ι Скачать

Шаблон для зоопарков — Zoo

Демо ι Скачать

Классный и тёмный CSS шаблон — Dark Pro

Демо ι Скачать

Замечательный CSS шаблон в серых тонах — Calliope

Демо ι Скачать

Классный шаблон для блогов  — Xtreme

Демо ι Скачать

Шаблон с классной шапкой сайта — Halcyonic

Демо ι Скачать

CSS шаблон для сайта в голубом оформлении — Indication

Демо ι Скачать

Ещё один блоговый шаблон — Elegant Blue

Демо ι Скачать

HTML шаблон с красивым меню — Design Company

Демо ι Скачать

Красивый шаблон-визитка — Cardex

Демо ι Скачать

коды HTML веб дизайн Создание веб страниц сайтов html codes web design

коды HTML веб дизайн Создание веб страниц сайтов html codes web design

web design

Создание веб страниц, сайтов

на языке HTML

коды HTML

Документ HTML

Структура:

<html>

<head>

<title> Название документа</title>

<meta http-equiv=»content-type» content=»text/html; charset=utf-8″ />

</head>

<body>

Здесь помещается содержимое документа

</body>

</html>

Начало HTML документа

Заголовок

 

Кодировка документа*

Конец заголовка

Начало тела документа

 

Конец тела документа

Конец HTML документа

 
* Пожалуйста, если Вы где-то сейчас еще увидите такую кодировку документа


<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=windows-1251″ />
не используйте ее для создания новых сайтов — устарело (

Вот, собственно и всё. То есть это все те теги (левая колонка таблицы ) HTML, без которых никак нельзя обойтись. Здесь можно было бы предложить Вам скопировать эту колонку и в два приема перенести ее в отдельный файл, но для особо ленивых просто даю ссылку на то, что Вы сами могли бы запросто получить. Мой первый HTML файл Открыли ? На белом фоне черным цветом шрифтом times new roman (если у Вас что-то другое, то Вы, мягко говоря, продвинутый юзер компа, но тоже — читайте дальше) Вы читаете то, что напечатали в теле документа, а то, что напечатали между тегами title , Вам видите или увидите потом в адрестной строке браузера — зависит от браузера и его настроек.  Из меню файл (нажмите кнопку alt — и будет Вам счастье вверху экрана, а если не будет, то просто правой кнопкой мыши) выберите команду сохранить как… Сохраните веб-страницу на жестком диске (Вашего компьютера). Откройте сохраненный файл два раза. Один раз также, как вы открываете все файлы, второй раз с помощью команды открыть с помощью… из контекстного меню (если у Вас есть правая кнопка мыши, щелкните ею по файлу — контекстное меню Ваше). Короче, Вам нужно открыть наш с Вами файл уже с Вашего компа в Блокнот

. (Скажу по секрету: в старой версии оперы очень удобно редактировать html файлы по команде CTRL+U и др., сегодня стоит сразу освоить Notepad++)

Перед Вами с Блокноте HTML код нашей веб-страницы. Рассмотрим его внимательно. Первое, что мы сделаем — удалим теги, которые появились в результате копирования документа из интернет. Например, <META content=»……» name=GENERATOR>. И все-все теги, которые мы пока не понимаем. Тег <!DOCTYPE ……..»> — тип документа можно оставить, но хорошие хостинги генерируют правильный тип документа по умолчанию. Короче, вернемся к типу документа, если у Вас будут проблемы…

Удалили? Из меню Файл задайте команду Сохранить.

Дальше — Вместо слов Название документа напечатайте его действительное название (Например, Теги HTML ) , а вместо Здесь помещается содержимое документа разместите свою информацию. Из меню Файл задайте команду Сохранить. В Блокноте точно нет автосохранения, поэтому чаще сохраняйтесь сами. Перейдите на веб-страницу (наш файл html). Любым способом обновите веб-страницу: из меню задайте команду Обновить)) или воспользуйтесь соответствующей кнопкой в браузере или F5 . На экране появилось то, что Вы напечатали между тегами body, а то, что Вы напечатали между тегами title появилось (должно) в строке заголовка браузера.

Тех, кому уже все понятно, отошлю сразу к отличному html-редактору онлайн. 

или этому редактору, если предыдущий начинает просить деньги: бесплатный редактор — тоже, естественно, онлайн.

Те, кому совершенно нечего делать, продолжаем здесь.

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

Итак, Вы не сторонник классического черно-белого сочетания цветов, которые мы получили потому, что именно они, также как и times new roman, должны быть заданы по умолчанию на Вашем комьютере. Давайте все поменяем. Цвет фона документа задается атрибутом в теге <body> — обратите внимание, без косой черты! Все атрибуты задаются только в открывающих (начальных) тегах. <body bgcolor=red>. Добавьте атрибут bgcolor в тег body, сохраните файл, перейдите на веб-страницу, обновите ее и посмотрите, что получилось. Если Вам не нравится красный фон — red, можно задать любой другой по английски : green, blue, yellow. Если Вас не устраивают стандартные цвета, то можно задать любой цвет, указав его номер от черного bgcolor=000000 до белого bgcolor=ffffff . Цвет текста документа давайте зададим в тегах <font></font>. В теге <font> зададим атрибут color <font color=white>. После него идет непосредственно текст, который вы хотите выделить белым цветом. Причем, чтобы разбить текст на абзацы, можно использовать тег <p> , закрывать его желательно, но не обязательно. А вот тег <font> лучше закрыть, т.е. в конце текста, выделяемого заданным цветом поставить тег </font>. Кроме абзацев вам также могут понадобиться выделение курсивом <i> Ваш текст </i> ,выделение жирным шрифтом <b> Ваш текст </b> или подчеркивание <u> Ваш текст </u> . Если Вы хотите поменять размер шрифта, то в тег <font> добавьте атрибут size. Например, <font color=white size=2> Ваш текст </font>. Что еще Вам может понадобиться на первых порах : теги <center></center>. Заключенный в них текст будет размещаться по центру. По умолчанию текст располагается по левом краю, а соответствующие теги — <left></left>. Свой текст Вы, возможно, захотите проиллюстрировать картинками. Для этого используются тег <img >. Этот тег закрывать не надо. В атрибуте src этого тега указывается URL (см. словарь) изображения (картинки). Что-то вроде <img src=http://maryna1111.narod.ru/Image8.gif>

А вот это уже и гиперссылка задана на эту картинку. По поводу гиперссылок читайте здесь. Теги для гиперссылок . В начальном теге задается атрибут href=»адрес URL». Почему у нас ссылки получаются синего цвета нашего любимого шрифта и размера — а потому что мы не задали свои в теге body , а используем то, что есть по умолчанию. Давайте поменяем хотя бы цвет <body bgcolor=red alink=black link=black vlink=black>. Почему сразу три? Это цвета активных ссылок, непосещенных ссылок и посещенных ссылок соответственно.

Вот что мы имеем :

<html>

<head>

<title> Теги HTML Коды HTML Создание веб-страниц на языке HTML

</title>

<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=windows-1251″>

</head>

<body bgcolor=red alink=black link=black vlink=black>

<font color=white size=2>

<center>

<i>Ваш текст </i>

<b>Ваш текст </b>

<u>Ваш текст </u>

</center>

<p>

<i><b>Ваш текст </i><u>Ваш текст </u></b>

Ваш текст

<center>

<p>

<img src=http://maryna1111. narod.ru/Image8.gif>

<p>

<p>

<p>

<p>

<a href=index.html>

на главную страницу сайта Web design

</a>

</center>

</font>

</body>

</html>

вот вы и создали веб страницу на языке HTML, посмотрите : web-design &copyМоё (до горизонтальной белой черты:) — <hr color=whitesmoke> — пришлось еще ссылок добавить со временем — это связано с вопросами раскрутки сайтов, до которых мы так еще и не добрались… так, кое-что между строк…)

Что дальше

? Покупаете любой справочник веб мастера, в котором есть теги HTML, и читаете. Есть профессионалы, которые утверждают, что «коды HTML надо учить — иначе, какой может быть веб дизайн без этих самых кодов». Не говоря уже о том, что наизусть учить принято обычно Пушкина, а не коды. (тем более, что кодов много, а Пушкин один) — бросим так вскользь, сославшись между прочим и на лучшую русскую книгу о веб-дизайне В. Кирсанова, где он этого так не написал, но я себе на своем бесплатном сайте, где  резюмирую свои безвозмездные ответы на вопросы друзей и знакомых — чтобы язык не отсох — позволю высказаться, не ставя целью кого-то обидеть, а только лишь разбавить скучное изложение технических знаний тупым юмором: «Дорогие господа профессионалы HTML-кодировщики, Java -скриптчики, Перловцы и все-все-все, команды и коды, как и русский язык, может выучить каждый, а вот рисовать веб-странички, так же как и писать стихи — это искусство со всеми вытекающими. Искусство же лучше смотреть живьем в художественном салоне- магазине подарки — картины лучших московских художников! Адрес на сайте http://gift-shop.narod.ru. Извините за оптимизированный для поисковиков web design,

: )

Переходите к отличному html-редактору онлайн.

или этому редактору, если предыдущий начинает просить деньги: бесплатный редактор — тоже, естественно, онлайн.

P.S. А если профессиональным веб дизайн е р а м тяжело на большом экране читать текст, не разбитый на колонки, то отправьте их на курсы «Компьютер для начинающих», а сами воспользуйтесь свойствами «окна».

P.P.S. А вот и любезно присланный профессионалами линк, где можно проверить свой класс в HTML кодировке: скопируйте или впечатайте свой адрес (URL) и нажмите кнопку Check. Только не хватайтесь сразу за сердце! И потом тоже не хватайтесь…

(… Устарел — удалила! Жду, когда пришлют новый).

P.P.P.S. (Вопрос) Почему же не надо хвататься за сердце? (Ответ) Вот давайте проверим первый из созданных нами только что файлов Мой первый HTML файл. Видите — сколько ошибок? А мы ведь еще и не начинали писать HTML коды… Ах, мы с Вами учимся создавать веб странички на бесплатном хостинге — и все ошибки, что сейчас обнаружил КАКОЙ-ТО «чекер», это «ошибки» кодировки рекламы от б/хостинга ( в правом верхнем углу)… Я бы лично не отважилась сообщить Яндексу (а раньше это был он) о том, что в его кодах есть ошибки … Юкозу же сообщать нет смысла — они бесплатно отвечают за деньги

P.P.P.P.S. А вот и онлайн справочник по кодам html Мне нра!

P.P.P.P.P.S. Друзья — любители халявы! Я все-таки нашла неплохой бесплатный хостинг без рекламы, где на форуме познакомилась с подвижником, создавшим хостинг дома. На оный хостинг я и переехала с другими своими некоммерческими сайтами уже несколько лет назад.  Вот перетащить этот сайт с юкоза никак не отважусь…  ВНИМАНИЕ! За рекомендациями по размещению сайтов на отличном платном хостинге — больше не обращайтесь: Агава сдохла почила в бозе — теперь сама ищу хороших платный хостинг. 

Px6.S. Внимание! Для SEO форматирования сегодня нужно пользоваться тегами strong и em вместо b и i соответственно, и тег <font> уже давно рекомендуют не использовать.  Впрочем, отличный хтмл редактор, упомянутый выше, автоматически исправит (должен) все устаревшие теги, приведенные в примере, на современные.  

<a href=»http://u6100.98.spylog.com/cnt?cid=610098&f=3&p=1″ target=»_blank»>
<img src=»http://u6100.98.spylog.com/cnt?cid=610098&p=1″ alt=’SpyLOG’ border=’0′ width=88 height=31 >
</a>

<div><img src=»//mc.yandex.ru/watch/9632908″ alt=»» /></div>

ПОЖАЛУЙСТА, ПРИ КОПИРОВАНИИ ИНФОРМАЦИИ НЕ ЗАБЫВАЙТЕ ДАВАТЬ ССЫЛКУ НА САЙТ АВТОРА )
Вернуться к содержанию практического пособия по созданию сайтов с абсолютного нуля
На главную страницу сайта модный веб дизайн web design

Copyright &copy

Как разработать дизайн и код персонального веб-сайта / Хабр

Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.

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

Зачем проектировать самостоятельно?

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

1. Выделяться из общей массы

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

2. Практикуйтесь в своем мастерстве

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

3. Повышение производительности приложений

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

4. Развивать профессиональные навыки

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

5. Это может быть весело

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

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

Создание каркаса модели

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

Структура веб-сайта

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

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

Применяйте визуальный дизайн

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

Реализация макета

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

Добавление разделов и содержимого хранилища

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

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

Обновление графики

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

Добавьте цвет

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

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

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

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

Уточнение

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

— Выглядит тесновато?

  • Увеличьте отступы и поля

— Трудно читать текст?

  • Выберите более четкий шрифт или увеличьте его размер
  • Увеличьте цветовой контраст между фоном и передним планом

— Трудно разобрать содержимое?

  • Добавьте заголовки с более крупным шрифтом
  • Добавьте больше интервалов между заголовками и абзацами

— Выглядит небрежно или непоследовательно?

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

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

Создание HTML–структуры

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

Стилизуйте его с помощью CSS


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

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

Расположение секций и элементов

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

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

Добавьте визуальные стили

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

Сделайте его отзывчивым

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

Когда ваш проект реализован, все готово! Теперь вы можете решить, что хотите с ним делать.

Следующие шаги

  • Теперь, когда сайт спроектирован и закодирован, вы можете добавлять контент и размещать его.
  • Вы можете продолжать использовать его в качестве учебного проекта, создав внутренний модуль или добавив дизайн к внешнему модулю.
  • Продолжайте тренироваться, совершенствуйтесь. Для комфортной разработки может потребоваться время. Я надеюсь, что это руководство стало шагом в правильном направлении.

Заключение

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

99 лучших бесплатных HTML-шаблонов, чтобы сделать ваш сайт сияющим

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

Перед тем, как запустить веб-сайт, вам нужно выяснить, как вы собираетесь его создавать. В этом списке 99 лучших бесплатных HTML-шаблонов веб-сайтов с открытым исходным кодом, которые могут помочь. Прежде чем мы перейдем к списку, позвольте нам вернуться в более простые времена. 1990-е гг. Энтузиасты старой школы HTML называют это «старыми добрыми временами».«Единственный способ создать веб-сайт — это передать его самому с помощью замечательных сайтов с открытым исходным кодом, таких как HTML-лакомства (которые, на удивление, все еще существуют).

Это было задолго до того, как бурный рост таких решений, как WordPress, Wix, Weebly и Joomla, позволил любому старому чудаку установить профессиональный веб-сайт в несколько кликов.

В настоящее время обычным явлением является использование CMS (системы управления контентом), такой как WordPress, или службы создания веб-сайтов, такой как Squarespace, не задумываясь.Это отличные решения для создания сайтов высокого качества, но не всегда лучший вариант. Для людей, которым нужен простой и легкий веб-сайт, CMS может оказаться излишним. Создание простого сайта с использованием шаблона HTML / CSS может сразу предложить несколько преимуществ.

  • Скорость — использование CMS может потребовать значительных ресурсов, что приведет к увеличению времени загрузки страницы.
  • More Control — вы можете получить сайт, который выглядит так же хорошо, как и сайт WordPress, и на нем будет проще изменить все до пикселя, не преодолевая темные туннели сложной архитектуры CMS.
  • Безопасность — это факт, что хакеры и спамеры нацелены на популярные установки CMS, потому что это проще. Использование HTML-шаблона не означает, что вы в полной безопасности, но вы можете быть менее уязвимы для хакеров, нацеленных на хорошо известные дыры в безопасности.

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

Business

  1. Asperion HTML5 — чистый, минималистичный шаблон, предназначенный для предприятий, занимающихся ИТ.
  2. Bio Farming — достойный шаблон, созданный для устойчивого ведения сельского хозяйства. Элементы и дизайн расположены так же, как стандартная целевая страница для дизайнерского агентства.
  3. Blue Skies — этот веб-сайт фиксированной ширины подходит для ведения блога или бизнеса.
  4. Bootstrap Restaurant — все, что вам нужно для сайта ресторана, включая бронирование, карту, онлайн-заказы и слайдеры для демонстрации пунктов меню.
  5. Кафе — включает высококачественные изображения, интересную типографику и функции для мобильных устройств, такие как гамбургер-меню.
  6. Corporate Bizz — полноценный шаблон серьезного корпоративного сайта в темной цветовой гамме.
  7. Crossfit — крутая современная тема для любой ниши, связанной с фитнесом. Он отзывчивый и готов к просмотру на мобильных устройствах.
  8. Экологический бренд — минималистичный и отлично подходит для любой профессиональной организации.
  9. Home Property — это для профессионалов в сфере недвижимости. Он может быть для компании или служить справочником.
  10. HTML5 Streets — отличный вариант для простого бизнес-сайта.Строительство было бы хорошей нишей для этого.
  11. HTML5 Вода — фон и цветовая гамма изображения напоминают морские пейзажи. Это было бы неплохо для дайв-сайта или всего, что связано с водными видами спорта.
  12. HTML 919 — классический 5-страничный полноразмерный веб-сайт с заголовком, телом, нижним колонтитулом, дополнительным заголовком и текстурированным фоном.
  13. Кожа и кофе — 5-страничный шаблон для кафе. Он использует фейдер изображений jQuery и может похвастаться богатой цветовой схемой.
  14. Медицина — Подходит для медицинских работников.
  15. Natural Paper Co — оттенки коричневого придают этому месту практичную атмосферу. Дизайн хорошо организован и эффективен.
  16. Nautica 05 Dark — его легко изменить и проверить. Включены четыре макета.
  17. Органическая ферма — есть клиент, которому нужен веб-сайт органической фермы? Вот идеальный шаблон для этого.
  18. Шаблон Parallax — созданный с использованием HTML / CSS / JS, этот шаблон полезен для малого бизнеса и стартапов.
  19. Six Dark — цветовая гамма вдохнула жизнь в этот простой, чистый шаблон.
  20. The Tree Hills — созданный для дизайнеров, этот шаблон сайта имеет освежающую цветовую схему и профессиональный, но творческий вид.
  21. Web 2.0 — проверьте это, если вы ищете простой статический веб-сайт для бизнеса. Здесь нет ничего необычного или нового, но это надежный шаблон.
  22. Wind Power — еще один шаблон для устойчивого бизнеса от Studio7Designs. Ему более пяти лет, но он все еще отлично работает.

Художественный / Креативный

  1. Классный макет — это не весь веб-сайт, но вполне может быть.Этот шаблон имеет пятисекционный макет с чередующейся анимацией. Он отлично подходит для демонстрации изображений.
  2. Forty — действительно простая, но потрясающая тема материального дизайна для фотографов.
  3. Helios — еще одна халява от HTML5up.net, Helios отлично подходит для фотографов.
  4. Nautica — демонстрация создана для свадебного фотографа. Это просто, причудливо и стильно.
  5. The Piano — это шаблон на музыкальную тему, идеально подходящий для учителя фортепиано.
  6. Чистый CSS Parallax — этот шаблон подойдет, если у вас есть качественные изображения.У него четыре секции параллакса.
  7. Sigma — эта сетка изображений в стиле метро состоит из нескольких столбцов и адаптивного лайтбокса. Если у вас много изображений, вы можете эффективно использовать Sigma.

Одиночная страница

  1. BIWAS — это похоже на многие другие веб-сайты ИТ-бизнеса. На этой целевой странице есть разделы с параллаксом, многоуровневые таблицы цен, контактная форма и выдвижное меню.
  2. Coloi — если вам нужно создать сайт для веб-сервиса, компания Coloi идеально подойдет.
  3. Creative Winter — этот простой полноразмерный веб-сайт с параллаксом — хороший одностраничный сайт для креативщиков.
  4. Fancy Mobile Flat — плоский дизайн в ярких пастельных тонах и липкий заголовок.
  5. Fractal — очень простой шаблон, который можно использовать как отправную точку для собственных идей.
  6. Оттенки серого — цветовая схема оттенков серого имеет очень драматический эффект. Это одно из моих любимых. Дизайн очень сложный, и он, естественно, фокусирует ваше внимание на содержании.
  7. Jasmin — очень минималистичный и чистый сайт. Это простой и понятный сайт, удобный для мобильных устройств с красивой CSS-анимацией.
  8. Landing Page — одна из самых чистых целевых страниц для фрилансеров и дизайнеров. Как и хороший дизайн, он простой, функциональный и приятный.
  9. Металлический слайдер — как следует из названия, вы получаете металлический слайдер. На этом пейджере есть интерактивные скользящие панели, на которых отображается ваш контент.
  10. Моделирование — это чистый и модный сайт.
  11. Персональный веб-сайт — если вы дизайнер / творческий человек, этот веб-сайт обязательно произведет впечатление. Он очень чистый и имеет впечатляющую анимацию.
  12. Rex — на этой целевой странице есть все необходимое, что вы можете настроить.
  13. rLAKPm — современный одностраничный сайт для стартапов и разработчиков. В нем используются анимированные эффекты и цветовые схемы, соответствующие материальному дизайну.
  14. Simple Life — чистый одностраничный шаблон, который дает вам все основы для ведения блога или бизнеса. Навигационное меню перенесет вас в разные разделы страницы.
  15. Spa Gardenia — этот длинный одностраничный шаблон может работать для оздоровительных курортов, парикмахерских или любой другой целевой страницы.
  16. Стильное портфолио — хорошее начало портфолио, основанного на материальном дизайне.

Блог / Персональный сайт

  1. Агентство — хорошо для любого небольшого агентства или бизнеса. Этот хорошо продуманный полноразмерный сайт привлекает внимание к центру страницы.
  2. Художественное портфолио — это хорошее портфолио для самых разных творческих профессионалов.
  3. Аудио — аудиофилам тоже нужны сайты. Это отлично подходит для любого аудиотехника, программиста, даже учителя музыки.
  4. Bokeh — эта гибкая тема использует много красного цвета и имеет встроенное раскрывающееся навигационное меню в верхней части страницы. Он ориентирован на дизайнеров.
  5. CLJxH — минимальный одностраничный шаблон с параллаксной прокруткой по одному фоновому изображению. Это хороший выбор для тех, кто хочет простого присутствия в Интернете.
  6. Творческое портфолио — нет ничего проще. Этот портфель избавляет от лишнего жира. Он дает посетителям информацию о том, кто, что и где, без каких-либо изысков.
  7. Gamer Template — это полноформатный сайт для игрового блога.Он простой, но выглядит современно.
  8. Я Тим — автор шаблона — веб-дизайнер. Этот шаблон является целевой страницей для его услуг. Его могут использовать все фрилансеры.
  9. Kaptain Kitty — здесь используются принципы материального дизайна для создания успокаивающего эффекта для посетителей. Он отлично подходит для личного блога или портфолио.
  10. Блог о дизайне материалов — в этом блоге используются самые современные тенденции веб-дизайна для создания хорошего блога. Это очень крутой шаблон с макетами в виде карточек, которые вы можете увидеть в Twitter или Facebook.
  11. OnePager — как следует из названия, одностраничный шаблон, но предназначен для портфолио и бизнес-сайтов.
  12. Photo_Dark — этот темный шаблон создает настроение для демонстрации ярких фотографий.
  13. Веб-сайт с прокруткой — этот сайт с параллакс-прокруткой jQuery имеет красивые изображения и настроен как диорама. Он отлично подходит для мероприятия, рассказа или даже портфолио.
  14. Simple Style_7 — этот четкий шаблон станет хорошим портфолио для человека, который очень организован и точен.
  15. Тим Роберт-Фицджеральд — это чрезвычайно простое портфолио для всех. Он чистый, сфокусированный и требует совсем немного, чтобы сделать его своим.
  16. Видеоблог — это шаблон видеоблога, написанный в 2013 году. Цветовая гамма и графический дизайн приятны и естественны.
  17. Ваше портфолио дизайна — в этом шаблоне есть раздел портфолио и боковая панель, которые помогут вам продемонстрировать свою работу.

Электронная торговля

  1. Bazaar — этот плоский адаптивный веб-сайт впечатляет! Исходные файлы включают файлы Photoshop.
  2. Best Store — этот шаблон интернет-магазина предназначен для продажи высококачественных товаров. Это стильно, профессионально и красиво оформлено.
  3. The Big Store — бесплатный шаблон, который поможет вам создать продуктовый интернет-магазин. Управляйте пользователями, демонстрируйте продукты и принимайте платежи.
  4. Blue Clean — все в названии. Этот использует разные оттенки синего и очень чистый. Используйте его, чтобы открыть магазин по продаже технических товаров.
  5. Bootstrap Shop — это готовый интернет-магазин.Он современный, и в нем есть готовая тележка для покупок.
  6. Магазин занавесей — это двухколонный макет в темной цветовой гамме. Добавьте корзину, и у вас будет полноценный магазин.
  7. Digi Shop — Этот современный интернет-магазин идеально подходит для продажи широкого ассортимента товаров.
  8. FooseShoes — продавать женские туфли или что-то в этом роде.
  9. Свободный стиль — много пустого пространства и множество чистых сеток помогают продемонстрировать фотографии продуктов.
  10. Мебель — ползунки, пустое пространство и хорошо организованные решетки придают этому мебельному магазину ощущение домашнего уюта.
  11. Продуктовый магазин — продавайте все, что связано с едой в Интернете с помощью этого драгоценного камня.
  12. Home Shoppe — красивый интернет-магазин по продаже всевозможных товаров.
  13. H Shape — этот красочный плоский дизайн включает в себя такие товары для фитнеса, как одежда, активная одежда и тренировочное снаряжение.
  14. IWear —Этот магазин очков выполнен в винтажном стиле.
  15. Leoshop — этот плоский шаблон электронной коммерции может помочь вам создать сайт высокого уровня, такой как Amazon или Snapdeal.
  16. Markito — магазин плоских футболок, который вы можете настроить и сделать своими руками.
  17. New Shop — еще один плоский адаптивный шаблон, построенный на бутстрапе. Этот шаблон актуален и готов к продаже.
  18. Перепродажа — перепродажа позволяет легко создать сайт, где люди могут покупать и продавать подержанные товары.
  19. Продать все что угодно — этот шаблон из 4 колонок очень отзывчивый и довольно впечатляющий. Это хороший выбор для продажи одежды или чего-нибудь еще.
  20. ShopList — приятные функции включают уникальный слайдер, страницы товаров, превью изображений и корзину.
  21. Smart Sale — этот сайт приятно просматривать и имеет несколько интересных элементов материального дизайна.Идеально подходит для любого типа магазина.
  22. Smart Store — этот шаблон имеет уникальную сетку по сравнению с большинством других в этом списке и действительно привлекательную цветовую схему.
  23. Surf Company — нужно создать сайт для серф-компании? Вы можете начать работу с этим шаблоном.
  24. Женская мода — здесь есть все необходимое для работы шикарного модного бутика в Интернете. Адаптируйте его к вашим потребностям, чтобы он соответствовал вашим целям.
  25. Youth Fashion — сайт корзины модных товаров.Запустите интернет-магазин, просто добавьте свой контент и настройте платежный шлюз.

Журнал / новостной блог

  1. Colormag — простой и удобный для чтения шаблон журнала со свежей цветовой гаммой.
  2. Cyber ​​Tech — всеобъемлющий веб-шаблон для журнала или блога о любых технологиях.
  3. Daily Newspaper — продемонстрируйте свой контент с помощью удобочитаемой типографики и чистого макета.
  4. Magazine — навигационное меню в стиле вкладок, разделы во всю ширину и чистый графический дизайн делают Magazine достойным внимания.
  5. MagExpress — это потрясающий журнал, который хорошо подойдет для новостей или образа жизни.
  6. News Aggregate — извлеките лучший контент с помощью этого агрегированного шаблона. Создайте сайт наподобие Alltop.com.
  7. Газета — интересная газетная тема, гибкая и легко настраиваемая.
  8. Organic Design — еще один сайт фиксированной ширины, созданный для экологически чистого бизнеса.
  9. Pixabella04 — у этого есть блог, несколько макетов, коробочный макет и боковые панели.
  10. Тема № 4 — простой макет фиксированной ширины с четким ощущением.Это хорошо для технического блога.
  11. Wine Social — отличный сайт для винодельни, пивоварни или любого другого предприятия по производству напитков.
  12. Желтый блог — этот блог профессионально оформлен и красив. Если вы ищете альтернативу WordPress, это разумный выбор.

Создайте собственный сайт

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

Фрэнк Мораес (Frank Moraes) — редактор и писатель на HTML.com и других ботанических сайтах.

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

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

Метод проб и ошибок — ваш друг

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

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

Постарайтесь сосредоточиться на изучении одного языка за раз.

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

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

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

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

Изучение концепции не означает, что вы ее понимаете.

«Я слышу и забываю. Я вижу и помню. Я знаю и понимаю ». — Конфуций

Когда вы были в классе математики, были ли у вас моменты, когда вы полностью понимали, что говорит учитель, но затем, когда вас попросили реализовать эту концепцию, вы оказались совершенно беспомощными?

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

Будьте терпеливы

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

13 интересных приемов для HTML

Будьте Тони Хоуком в HTML с помощью этих хитрых трюков

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

Благодаря HTML, CSS3 и JavaScript в вашем распоряжении множество простых инструментов, которые сделают ваш веб-сайт или блог привлекательным, удобным и современным.HTML5 внес огромный вклад в создание великолепных веб-сайтов, которые создаются каждый день.

Немного интуиции, сочувствия и тестирования, а также несколько интересных трюков с HTML тоже помогут вам в этом!

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

1. Табличка

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

2. Изображения карты

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

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

внутри

.

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

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

Вот пример кода:

  

Семь континентов

& # 10148; Нажмите на точки на изображении, чтобы перейти к разделу континентов
<рисунок>
Карта мира

Африка

Наши представительства в Африке

Азия

Наши представительства в Азии

Европа

Наши представительства в Европе.

Южная Америка

Наши представительства в Южной Америке.

Северная Америка

Наши представительства в Северной Америке:

Антарктида

Наши местоположения в Антарктиде.

Австралия

Наши офисы в Австралии.

Сопутствующий код CSS может быть:

  body {
    font-family: "старый стиль книжника";
}
:цель {
    цвет: светло-желтый;
    фон: индийский красный;
}
h4,
h2 {
    цвет: индийский красный;
}
img {
    граница: 3 пикселя, пунктирная, красная;
}
тело {
    сброс счетчика: srl;
}
h4 :: before {
    счетчик-инкремент: srl;
    содержание: counter (srl) ".";
}  

3.Разрешить посетителям изменять цвет фона или текста

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

Вот код, который вам понадобится:

   & nbsp; & nbsp; Цвет фона


& nbsp; & nbsp; Цвет текста

4.Добавить метаданные

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

Не забудьте оптимизировать остальной контент вашего веб-сайта, чтобы пользователи поисковых систем могли легко вас найти. Специалисты по SEO в Freelancer могут помочь вам с вашими внутренними потребностями в SEO и поисковом маркетинге (SEM).

Между тем код для добавления меты прост:

  

  

5.Скрыть поле

Воины Reddit указали на этот пример «программного ужаса», в котором поле для внутреннего использования является видимым для публики.

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

Вот как это работает:

  



     Моя страница 





    


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

Изучите HTML, сделав этот супер простой веб-сайт

Вы хотите знать, как создать веб-сайт, но не знаете, какой HTML-код использовать? Следуйте этому руководству, чтобы создать свой первый базовый веб-сайт на HTML с примерами исходного кода!

Мы рассмотрим 3 вещи:

  1. что такое HTML
  2. базовый синтаксис HTML,
  3. и как сделать локальный сайт на своем компьютере.

Замечу: этот пост предназначен для начинающих, которые никогда раньше не работали с HTML.

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

Пытаетесь изучить HTML и CSS?
Я настоятельно рекомендую книгу Джона Дакетта «HTML и CSS», а также продолжение «JavaScript и jQuery» для начинающих.Книги красиво оформлены и легко для понимания объясняют основные темы. Посмотрите их на Amazon!

Что такое HTML?

Итак, что такое HTML? HTML означает язык разметки гипертекста.

Это способ отображения информации на веб-страницах в вашем браузере.

Следует помнить, что HTML сам по себе не является языком программирования. Это язык разметки. Такие языки программирования, как PHP или Java, используют такие вещи, как логика и условия для управления контентом.

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

Загрузка HTML-файла в ваш браузер

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

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

Для создания HTML-файла:

  1. Зайдите на рабочий стол или куда хотите поместить файл.
  2. Затем щелкните правой кнопкой мыши и выберите «Новый» и «Текстовый документ». Убедитесь, что имя файла читается как index.html и не заканчивается на .txt.
    (Если по какой-то причине вы не видите расширение файла, щелкните вкладку «Просмотр» и убедитесь, что установлен флажок «Расширения имени файла».)
  3. Когда у вас все готово, откройте его в браузере.
  4. Если слева есть значок Chrome или другого браузера, это означает, что вы можете дважды щелкнуть, чтобы открыть его автоматически.Если этого не произошло, щелкните правой кнопкой мыши, затем выберите «Открыть с помощью» и выберите свой любимый браузер.
  5. В браузере все будет выглядеть пустым, и это нормально, потому что в файле еще ничего нет.

Редактирование файла

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

Чтобы отредактировать HTML-файл, откройте его в редакторе кода. Щелкните файл правой кнопкой мыши и выберите «Открыть с помощью» и редактор, либо у некоторых редакторов будет быстрая ссылка в меню.

Я использую Visual Studio Code, но вы можете использовать и другие программы, например:

Теперь, когда индексный файл открыт и в браузере, и в редакторе, мы приступим к написанию кода!

HTML-теги

Давайте посмотрим на некоторые основные функции HTML.

HTML состоит из тегов.

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

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

Вот один пример действия тега:

  Это мой самый первый веб-сайт, и я  очень взволнован !!!!!   

Вы можете видеть слова «чрезвычайно взволнован» в этих тегах — «b» — жирный шрифт.

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

Хорошо! Вы только что написали HTML. Уже чувствуете волнение?

Анатомия HTML-тега

Давайте еще раз взглянем на тег.

Тег перед фразой называется открывающим тегом

И тег после фразы — это закрывающий тег . Вы можете видеть, что закрывающий тег имеет косую черту перед буквой «b».

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

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

Довольно круто, а? Одна из причин, по которой я так люблю создавать веб-сайты, заключается в том, что это почти похоже на волшебство — иметь возможность отображать объекты в вашем браузере.

Базовая структура HTML-документа

Итак, эта строка текста, которую мы написали, работает, потому что мы сохранили файл как файл HTML, который может распознать ваш браузер.

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

Doctype и HTML-теги

Самый первый тег, который вам понадобится, — это тег doctype.Это не совсем HTML-тег, но он сообщает браузеру, что это документ HTML5.

Вот как это выглядит:

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

Другие типы документа, которые использовались в прошлом, — это HTML 4 или XHTML. Но сейчас HTML 5 — единственный используемый тип документа.

После doctype у вас есть тег HTML. Он сообщает веб-браузеру, что все внутри него — HTML:

.

  

 
  

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

Голова и части корпуса

Внутри основного тега HTML ваш контент обычно разделен на две части: заголовок и тело.

Вот как это будет выглядеть в коде:

  

   

   
   

   
  

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

Тег тела — это основное содержимое веб-страницы. Все, что вы видите на странице, обычно находится в теге body. Итак, нам нужно переместить то предложение, которое мы сделали в начале, в тело.

Вот как это должно выглядеть:

  
   Это мой самый первый веб-сайт, и я  очень взволнован !!!!!! 
  

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

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

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

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

Метки базовой головки

Мета-теги

Первый тег, который должен быть у вас в голове, — это этот метатег.Это устанавливает кодировку символов.

    

UTF-8 — это тип кодировки Unicode, используемый практически на всех веб-сайтах по всему миру. Нам нужна кодировка, потому что нам нужно переводить буквы, числа и символы, которые мы используем, в байты, используемые компьютерами.

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

Следующий метатег, который должен быть на всех веб-сайтах, — это тег области просмотра:

    

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

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

Например, у мобильного телефона разрешение или размер экрана намного меньше, чем у портативного компьютера. Это позволит изменять размер веб-сайта в зависимости от того, что использует пользователь.

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

Заголовок

Помимо метатегов, одним из наиболее важных тегов является тег заголовка:

   Мой первый сайт   

Как вы, наверное, догадались, это устанавливает заголовок веб-страницы. Если на веб-сайте есть разные страницы, каждая страница может иметь свой собственный заголовок.

После добавления всех этих тегов в код тег заголовка должен выглядеть так:

  
   
   
    Мой первый веб-сайт 
  

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

Основные теги кузова

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

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

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

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

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

Теги заголовка

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

до

.

Тег

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

Мы собираемся добавить на нашу веб-страницу тег

. Внутри тега мы поместим заголовок веб-страницы «Мой первый веб-сайт».

Мы также добавим субтитры с помощью тега

с содержанием: «Игровая площадка HTML».

И просто для удовольствия, давайте добавим остальные теги H до

.

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

  
   

Мой первый веб-сайт

Площадка для игры в HTML

Площадка для игры в HTML

Площадка для игры в HTML
Площадка для игры в HTML
Площадка для игры в HTML

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

Вы можете видеть, как размер шрифта постепенно уменьшается с

до

.

Большинство веб-сайтов не используют все теги H. Обычно они используют

для заголовка,

для субтитров и

иногда для заголовков разделов. Довольно редко используются значения от

до

.

Пункт

Следующий тег, который мы рассмотрим, — это абзац или тег

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

.

Мы собираемся сделать абзац с текстом-заполнителем.

Один из самых простых способов найти текст-заполнитель — это поискать в Google « lorem ipsum . ”Это тот сайт, который я использую довольно часто.

Lorem ipsum текст — это бессмысленные латинские слова, которые используются в публикации и дизайне для заполнения текста при работе над макетом.

Итак, мы скопируем этот абзац сюда и поместим его в наш код внутри тега

.Сделаем и второй абзац. Мы скопируем еще немного текста и поместим его во второй тег

.

  

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nullam facilisis arcu vel mollis finibus. Nunc facilisis vel nisl lacinia cursus. Cras Suscipit augue sed volutpat tincidunt. Aenean dictum tincidunt urna, quis eleifend quam mattis eu. Целочисленный sollicitudin, nisl faucibus aliquam ullamcorper, metus sapien scelerisque lorem, at ornare dui orci non orci.Целое число tempus conctetur metus, vitae blandit nibh aliquam nec. Pellentesque vestibulum arcu eget ante sollicitudin, id accumsan dui molestie. Suspendisse Vehicleula semper dui id congue. Suspendisse sed velit сидеть amet velit luctus varius. Ut condimentum tincidunt consquat. Sed eu ligula non magna scelerisque auctor.

Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, сидеть амет семпер мучитель.Nunc rhoncus non arcu in scelerisque. Donec magna mauris, congue ac dignissim rutrum, tincidunt quis leo. Maecenas dictum orci in magna iaculis, in elementum felis viverra. Энеан сядет, амет сапиен одио. Донецкое молесье est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt lorem et, facilisis enim. Praesent id felis sit amet quam dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.

В браузере это будет выглядеть так:

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

Разрыв строки

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

Давайте возьмем еще текст lorem ipsum и поместим его в наш редактор.

Теперь нужно отметить, что HTML не разбивает строки автоматически.

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

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

Вы даже можете добавить несколько разрывов строк, чтобы добавить больше места в вашем контенте.

  Fusce sit amet rutrum lacus. 




Sed efficitur laoreet nisl, ac faucibus velit hendrerit sit amet. Phasellus ac orci eget nisi porta accumsan a eget ex.Нам лациния dolor at mi tristique rhoncus. Mecenas nisl est, roncus id cursus. non, tempor a neque.

Пустые элементы не требуют закрывающего тега

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

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

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

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

Теги стиля

Следующий набор тегов, который мы рассмотрим, — это теги стиля. Эти теги добавляют стили к тексту.

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

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

Давайте рассмотрим каждый из тегов стиля:

  • Тег делает текст полужирным .
  • Тег делает текст курсивом .
  • Тег делает текст подчеркнутым.
  • Тег (выделенный) обычно интерпретируется в браузерах как курсив .
  • И тег обычно представляет собой полужирный текст .

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

   Sed efficitur laoreet nisl,  
ac faucibus velit hendrerit sit amet.
Phasellus ac orci eget nisi porta accumsan a eget ex.
Nam lacinia dolor at mi tristique rhoncus.
Maecenas nisl est, rhoncus id cursus non, tempor a neque.

А вот как этот код будет выглядеть в браузере:

Горизонтальная линейка

Тег горизонтальной линейки создаст горизонтальную линию на вашей веб-странице, которая будет проходить полностью.

Вы пишете так:


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

  ...
 Maecenas nisl est, rhoncus id cursus non, tempor a neque. 

Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. Donec eget lacinia elit. Suspendisse Commodo Justo at lorem molestie, vitae tempus enim laoreet. ...

Содержимое до тега


будет над линией, а содержимое под ним будет под строкой, например:

Якорное звено

Ссылки — это один из основных способов передвижения по Интернету.

Тег ссылки записывается как тег . Это означает «якорь», потому что ссылка соединяет два веб-сайта, как якорь лодки соединяет лодку с тем, к чему она привязана.

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

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

Атрибуты

Используемый атрибут — href . Это сокращение от гипертекстовой ссылки . А значение — это URL-адрес целевого веб-сайта.

Например, если вы хотите создать ссылку на главную страницу Google, вы должны использовать URL-адрес https://www.google.com/.

URL-адрес

означает Universal Resource Locator , и он действует как адрес, который дает вам местоположение веб-страницы или файла, который вы хотите загрузить.

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

По умолчанию ссылка будет открываться на той же странице. Если вы хотите, чтобы ссылка открывалась на новой странице, установите для цели значение «_blank».

Вот демонстрация якорной ссылки:

   Sed in lacus a augue rutrum   

Изображения

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

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

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

Давайте найдем изображение в Интернете для использования в этом примере. Одно действительно полезное место, куда я иду для тестовых изображений, — это https: // placeholder.com /.

Мы возьмем URL-адрес изображения с Placeholder.com и поместим его в источник изображения, которое мы создаем:

    

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

  
  

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

    

Это будет выглядеть так:

Списки

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

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

Для создания списка вы будете использовать тег списка —

    или

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

      Составим неупорядоченный список разных фруктов.

      Сделаем наш тег

        для списка.

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

      • .

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

          
        • яблоки
        • апельсины
        • ананасы
        • манго
        • драконий фрукт

        А вот как это выглядит.

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

          , вот как это будет выглядеть.

          Вложенные списки

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

          Итак, в теге apple

        1. я добавлю новый тег
            под текстом «яблоко».

            Затем мы добавим несколько разных сортов яблок — Golden Delicious, Gala, Granny Smith.

              
            • яблоки
              • золотой вкусный
              • бабушка смит
              • гала
            • апельсины
            • ананасы
            • манго
            • драконий фрукт

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

            Вложенность и отступ

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

            Дочерние и родительские элементы

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

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

            Как видите, в списке фруктов я сделал отступ для основных пунктов списка (яблоки, апельсины и манго). А потом для типов яблок я сделал еще больший отступ.

            Отступы делают код читаемым для людей

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

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

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

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

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

            Стол

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

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

            Построение стола

            Для начала нам понадобится тег

            .Все остальное в таблице будет внутри этого тега.

            Внутри таблицы у нас будут строки таблицы, ячейки таблицы и заголовки таблиц для заголовков столбцов.

            Затем мы добавим в первую строку таблицы, используя тег

            .

              <таблица>
               

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

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

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

              <таблица>
               
                   Месяц 
                   Аренда 
                   Утилиты 
                   Продовольственные товары 
                   Питание вне дома 
                   Развлечения 
               
              

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

            для табличных данных.

            Хорошо. Допустим, наша ежемесячная арендная плата составляет 1500 долларов? Затем мы получили 150 долларов на коммунальные услуги, 350 долларов на продукты, 100 долларов на питание вне дома и 50 долларов на развлечения.

              <таблица>
               
                   Месяц 
                   Аренда 
                   Утилиты 
                   Продовольственные товары 
                   Питание вне дома 
                   Развлечения 
               
               
                   август 
                   1500 долларов 
                   150 
                   350 долларов 
                   100 
                   50 долларов 
               
              

            Посмотрим, как это выглядит.А вот и наша таблица:

            Стилизация таблицы

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

            Сначала мы можем добавить строки в таблицу, установив атрибут border в тег таблицы. Установим границу толщиной 1 пиксель. Если вы используете большее число, рамка вокруг стола станет шире. Однако границы между ячейками таблицы по умолчанию всегда имеют ширину 1 пиксель.

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

            Другой атрибут, который вы можете изменить, — , интервал между ячейками . Это контролирует количество пространства между ячейками. Лично мне нравится отсутствие промежутка между ячейками, поэтому оставим его равным 0.

              

            Вот как выглядит таблица с этими атрибутами стиля:

            Лучшие практики для таблиц

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

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

              
            Месяц Аренда Утилиты Питание вне дома Развлечения
            август 1500 долларов 150 350 долларов 100 50 долларов

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

            Ячейки таблицы могут занимать несколько столбцов / строк

            Однако можно сделать так, чтобы ячейка таблицы занимала несколько столбцов. Допустим, мы хотели разбить Утилиты, чтобы иметь два типа данных: один для воды и один для электричества. Итак, мы скажем, что электричество стоит 100 долларов, а вода — 50 долларов.

            Для этого мы фактически создадим дополнительную ячейку в данных и настроим количество утилит. У нас сначала электричество за 100 долларов, а затем вода за 50 долларов.

              
            Месяц Аренда Утилиты Продовольственные товары Питание вне дома Развлечения
            август 1500 долларов 100 50 долларов 350 долларов 100 50 долларов

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

            Атрибут Colspan

            Мы хотим, чтобы ячейка заголовка Utilities была выше ячейки 100 и 50 долларов.

            Для этого мы добавим атрибут с именем colspan , то есть диапазон столбцов, в ячейку заголовка Utilities. И установите его на 2.

               Утилиты   

            В результате ячейка «Утилиты» будет занимать 2 столбца вместо одного.

            И вот мы! Выглядит очень организованно, не правда ли?

            Атрибут Rowspan

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

            Допустим, у нас есть данные за июнь, июль и август, и мы хотели обозначить их как «Осень».

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

            Чтобы создать ячейку для осени, я хочу, чтобы она располагалась слева от месяцев, начиная с июня. Итак, в июньском ряду я создам новую ячейку до июня и добавлю в нее «Осень». Затем я установлю диапазон строк этой ячейки равным 3, чтобы он охватывал июнь, июль и август.

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

              
            Месяц Аренда Утилиты Продовольственные товары Питание вне дома Развлечения
            Осень июнь 1500 долларов 100 долларов 50 долларов 350 долларов 100 50 долларов
            июль 1500 долларов 100 50 долларов 350 долларов 100 50 долларов
            август 1500 долларов 100 50 долларов 350 долларов 100 50 долларов

            Вот как выглядит финальный стол!

            Таблицы использовались для макетов сайта

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

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

            Когда-то это было очень удобно. В настоящее время столы используются нечасто. Единственное распространенное исключение, которое я могу придумать, — это электронные письма HTML, потому что некоторые старые почтовые системы не могут использовать много CSS, поэтому кодирование, подобное тому, что было в 1999 году, к сожалению, является единственным вариантом.

            Заключение

            Вот и все — вы создали базовый веб-сайт на HTML.

            Если вы заинтересованы в изучении HTML и веб-разработки, я бы порекомендовал для начала использовать некоторые из следующих ресурсов:

            • freeCodeCamp — бесплатный онлайн-курс для начинающих по программированию, организованный некоммерческой организацией. Многие выпускники устроились на постоянную работу в области веб-разработки.
            • Bootcamp для веб-разработчиков от Colt Steele — полный онлайн-учебный курс для веб-разработчиков и пользователей Udemy, проводимый бывшим инструктором учебного курса по программированию.

            Если вам понравился этот пост, пожалуйста, оставьте комментарий ниже или поделитесь им с друзьями!

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

            Глава 1. Создание вашей первой страницы

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

            Технически веб-страница — это особый тип документа, написанный на компьютерном языке, который называется HTML (сокращенно от языка гипертекстовой разметки).Веб-страницы написаны для веб-браузеров — таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров есть простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать.

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

            HTML: язык Интернета

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

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

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

            Примечание

            Стандарт HTML не имеет никакого отношения к тому, как веб-браузер извлекает страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (протокол передачи гипертекста), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет.Если использовать аналогию с телефонным разговором, то телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, являются документами HTML.

            Взлом Открытие файла HTML

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

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

            Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу).Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не понадобится ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.

            Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование.Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.

            Тип используемого текстового редактора зависит от операционной системы вашего компьютера:

            • Если у вас компьютер Windows, вы используете простой редактор Notepad. Переходим к следующему разделу.

            • Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

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

            1. Выберите TextEdit Настройки .

              Откроется окно с вкладками параметров TextEdit (рис. 1-2).

              Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).

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

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

            3. Нажмите «Открыть и сохранить» и включите первую опцию «Отображать файлы HTML как HTML-код вместо форматированного текста».

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

            4. Закройте окно настроек, а затем закройте TextEdit .

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

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

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

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

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

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

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

            В следующем списке описаны самые популярные браузеры на сегодняшний день:

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

              Загрузите с помощью Google Chrome на www.google.com/chrome.

            • Internet Explorer — это самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

              Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.

              Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы изучаете и как подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Текущую статистику использования браузера см. Http: // tinyurl.com / stats-browsers.)

            • Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox.

              Попробуйте Firefox на www.mozilla.org / firefox.

            • Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия ведет себя немного иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.

              Откройте Safari по адресу www.apple.com/safari.

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

              Ознакомьтесь с Opera на сайте www.opera.com.

            Учебное пособие: создание файла HTML

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

            Совет

            Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

            Готовы начать? Вот что нужно сделать:

            1. Запустите текстовый редактор .

              На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.

              На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

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

            2. Начните писать свой HTML-код .

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

               

              United Popsicle Workers Union

              Мы боремся за ваши права.

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

            3. Когда вы закончите свою веб-страницу, выберите Файл Сохранить .

              При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5).

              Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.

            4. Выберите место для сохранения файла и дайте ему имя popsicles.htm .

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

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

              Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.

              Примечание

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

            5. При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .

              Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» в нижней части окна «Сохранить как».

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

            6. Нажмите «Сохранить», чтобы сделать его официальным .

              Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или расширение .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).

            7. Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .

              Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.

              Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).

            8. По окончании редактирования закройте текстовый редактор .

              В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

            Подсказка

            Вот уловка, которая поможет вам быстро открывать файлы HTML. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть HTML-файл одним махом.

            Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).

            Просмотр HTML действующей веб-страницы

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

            Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

            Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

            Подсказка

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

            Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого в верхней части страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.

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

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

            Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код — это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.

            Например, один простой тег — это тег , который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:

             Этот текст не полужирный.  Этот текст выделен жирным шрифтом. 

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

            Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так вместо этого <. Таким образом, конечный тег для полужирного шрифта - . Вот пример:

             Не жирный шрифт.  Обратите внимание!  Теперь мы вернулись к нормальной жизни. 

            Какой браузер отображает как:

            Это не выделено жирным шрифтом. Обратите внимание! Теперь мы вернулись к нормальной жизни.

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

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

            Примечание

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

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

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

            Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент .

            Примечание

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

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

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

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

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

            Примечание

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

            На рис. 1-8 показаны два типа элементов в перспективе.

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

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

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

             Это word  выделено полужирным шрифтом и курсивом. 

            Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:

            Это слово имеет полужирное и курсивное форматирование.

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

             Это word  выделено курсивом и полужирным шрифтом.

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

             Это word  выделено курсивом и полужирным шрифтом. 

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

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

            Note

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

            Общие сведения о документах HTML

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

            Определение типа документа

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

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

            Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете на этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).

            Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

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

            В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:

              

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

            Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

              

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

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

            Примечание

            В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).

            Теперь вы готовы заполнить остальную часть веб-страницы.

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

            Этот элемент охватывает все (кроме документа) на вашей веб-странице.

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

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

            Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:

             
            
            
            ...
            
            
            ...
            
             

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

            Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code> <body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> </p> <p> </code>, который представляет абзац. </p> <p> Вот элементы, которые вам нужно добавить: </p> <dl> <dt> <code> <title> </code> </dt> <dd> <p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы. </p> </dd> <dt> <code> </p> <p> </code> </dt> <dd> <p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.</p> </dd> </dl> <p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом): </p> <pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

            Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).

            Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

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

            Учебное пособие: создание полного HTML-документа

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

            Подсказка

            Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

            Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

            1. Запустите текстовый редактор .

              Это Блокнот или TextEdit.

            2. Введите скелет HTML в новый файл .

              Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

               
              
              
              
              
              
               

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

            3. Добавьте заголовок в раздел раздел .

              Добавьте элемент </code> в новую строку между открывающим тегом <code> <head> </code> и закрывающим тегом <code> </head> </code>: </p> <pre> <strong> <code> <title> Hire Me!

            4. Добавьте свой контент в раздел .

              Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:

               
              
              
                  Найми меня!   
              
              
                 

              Меня зовут Ли Пак.Наймите меня в свою компанию, потому что мой рабочий номер с легкостью .

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

            5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

              Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

            Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

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

            Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:

             
            
            
             Наймите меня! 
            
            
            

            Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мирными офицерами.

            Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

            Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере.

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

            Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона.

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

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

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

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

              . Другими словами, каждый элемент списка (

            • ) должен находиться в элементе списка (
                ).

            Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

             
            
            
             Наймите меня! 
            
            
               

            Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .

            Мои навыки включают:

            • Быстрый набор текста (почти 12 слов в минуту).
            • Невероятная заточка карандашей.
            • Изобретательское оправдание.
            • Ведение переговоров с мирными офицерами.

            Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

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

            Рисунок 1-14 анализирует документ HTML с помощью модели дерева . Древовидная модель - это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы становятся более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.

            Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code> <body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами контейнера». </p> <p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу: </p> <pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

            я Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума .

            Мои навыки:

            • Быстрый набор текста (почти 12 слов в минуту).
            • Невероятная заточка карандашей.
            • Изобретательность поиск оправданий.
            • Ведение переговоров с мирными офицерами.

            Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки.

            Где все картинки?

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

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

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

            Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаются файлы изображений JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

              Lee Park Portrait  

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

            Однако есть очевидная разница между элементом
            и элементом . Хотя является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибутов , дополнительные части информации, которые появляются после имени элемента, но перед закрывающим символом>.

            Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (часть информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять желаемое изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака.

            Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

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

             
            
            
             Наймите меня! 
            
            
            

            Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Lee Park Portrait

            Мои навыки включают:

            • Быстрый набор текста (почти 12 слов в минуту).
            • Невероятная заточка карандашей.
            • Изобретательное придумывание оправданий.
            • Ведение переговоров с мирными офицерами.

            На рис. 1-15 показано, где именно заканчивается изображение.

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

            Note

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

            10 самых важных элементов (и еще несколько)

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

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

            Примечание

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

            Некоторые элементы, такие как элемент

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

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

            Таблица 1-1. Базовые блочные элементы.

            ЭЛЕМЕНТ

            НАИМЕНОВАНИЕ

            ТИП ЭЛЕМЕНТА

            ОПИСАНИЕ

            Контейнер

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

            ,

            ,

            ,

            ,

            ,

            Заголовок

            Контейнер

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

            дает самый большой заголовок. К тому времени, когда вы дойдете до

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

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


            Горизонтальная линия (или горизонтальная линия на языке HTML)

            Автономный

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

              ,

            Неупорядоченный список, элемент списка

            Контейнер

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

              на

                , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

            Таблица 1-2. Основные встроенные элементы.

            3

            3

            Полужирный и курсив

            ЭЛЕМЕНТ

            ИМЯ

            ТИП

            ОПИСАНИЕ

            ОПИСАНИЕ

            Контейнер

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


            разрыв строки

            Автономный

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

            Изображение

            Автономный

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

            Якорь

            Контейнер

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

            Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

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

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

             
            
            
               Наймите меня! 
            
            
              

            Наймите меня!

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

            Незаменимые навыки

            Мои навыки включают:

            • Быстрый набор текста (почти 12 слов в минуту).
            • Невероятная заточка карандашей.
            • Изобретательное придумывание оправданий.
            • Ведение переговоров с мирными офицерами.

            А еще я знаю HTML!

            Предыдущий опыт работы

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

            • 2008-2009 - работал машинисткой в ​​ Flying Fingers
            • 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
            • 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство

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

            Проверка страниц на наличие ошибок

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

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

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

            Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

            • Отсутствуют обязательные элементы (например, элемент ).</p> </li> <li> <p> Начальный тег контейнера без соответствующего конечного тега. </p> </li> <li> <p> Неправильно вложенные теги. </p> </li> <li> <p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>). </p> </li> <li> <p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code> <head> </code>). </p> </li> </ul> <p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставленный организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом руководстве (Учебное пособие: создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как обязательные элементы <code> <html> </code>, <code> <head> </code> и <code> <body> </code>.</p> <p> После того, как вы решите, что вы хотите проверить, выполните следующие действия: </p> <ol type="1"> <li> <p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML). </p> <p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»). </p> </li> <li> <p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17). </p> <p> Валидатор W3C предоставляет вам три варианта, представленные тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p> <p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую. </li> <li> <p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>. </p> <p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html). </p> <p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее. </p> <p> <strong> Проверка прямым вводом </strong> позволяет проверять любую разметку — вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию — скопировать разметку из текстового редактора и вставить ее в поле. </p> <p> Перед тем, как продолжить, вы можете щелкнуть Дополнительные параметры в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p> </li> <li> <p> <strong> Нажмите кнопку Проверить </strong>. </p> <p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18). </p> <p> Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p> </li> </ol> <p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code> <title> </code>. Во-вторых, он закрывает элемент <code> </p> <li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, замените <code> </li> <p> </b> </code> на <code> </b> </li> <p> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить его, чтобы браузеры могли отображать его правильно.</p> <h2><span class="ez-toc-section" id="%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%BF%D0%BE_%D1%8D%D0%BB%D0%B5%D0%BA%D1%82%D1%80%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%87%D1%82%D0%B5_%D0%B2_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B5_HTML_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D1%81_%D0%BD%D1%83%D0%BB%D1%8F"></span> Руководство по электронной почте в формате HTML: создание шаблонов с нуля <span class="ez-toc-section-end"></span></h2> <p> Если вы создавали веб-сайты достаточно долго, чтобы помнить славные дни GeoCities и Angelfire, вы, вероятно, создали свои первые веб-сайты, используя таблицы для макетов. Создание электронного письма в формате HTML сегодня вернет вас в те бурные времена, хотя и с меньшим использованием тега </p> <hr> <p>. </p> <p> Поставьте закладку в этом разделе, потому что вам захочется возвращаться к ней каждый раз, когда вы начинаете создавать новый шаблон электронной почты.Мы расскажем о советах и ​​приемах, которые позволят достичь хороших результатов для как можно большего числа ваших или ваших клиентов читателей. </p> <p> Единственный клиент, который все еще нуждается в таблицах HTML, — это Outlook для рабочего стола Windows, поэтому, пока он не станет устаревшим, вам нужно будет понимать, как почтовые клиенты обрабатывают таблицы, даже если это просто откат к макетам таблиц для Outlook. </p> <p> Но сначала важно знать, кому вы отправляете. </p> <h4><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B8%D1%82%D0%B5_%D0%B7%D1%80%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%B2%D1%8B%D1%87%D0%BA%D0%B8_%D0%B2%D0%B0%D1%88%D0%B5%D0%B9_%D0%B0%D1%83%D0%B4%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B8"></span> Определите зрительские привычки вашей аудитории.<span class="ez-toc-section-end"></span></h4> <p> Первый шаг в создании успешного электронного письма в формате HTML — это знать, как его будут читать. Если, например, все подписчики будут читать вашу электронную почту в своей корпоративной электронной почте Outlook, это может указать вам на использование открытого текста. </p> <p> В большинстве случаев используется несколько почтовых клиентов, но есть несколько способов выяснить это. Campaign Monitor публикует некоторую общую статистику использования почтового клиента, которая дает общий обзор, хотя и с некоторыми ограничениями. Или вы можете заглянуть на сайт электронной почты Litmus Market Share.</p> <p> Однако нет гарантии, что они отражают вашу аудиторию. Campaign Monitor и ряд других поставщиков услуг электронной почты предоставят вам отчет по каждой кампании, в котором будет указан почтовый клиент для каждого подписчика, если таковой имеется. </p> <p> В этих отчетах вы ищете наименьший общий знаменатель. Если, например, 30% используют Lotus Notes 7, вам необходимо убедиться, что вы специально протестировали этот клиент перед отправкой. Определенная версия почтового клиента может быть актуальной — Outlook 2003 доставит вам гораздо меньше головной боли, чем Outlook 2007, а в некоторых случаях в вашем списке может использоваться только одна версия.</p> <p> Если вы никогда раньше не попадали в этот список, возможно, вам просто нужно протестировать каждого клиента, которого вы можете найти, и сделать некоторые обоснованные предположения о том, с какой аудиторией вы имеете дело. Скорее всего, они будут использовать мобильные телефоны для чтения электронной почты или заблокировать корпоративные серверы? Возможно, все они используют адреса Outlook.com и Yahoo, которые, по крайней мере, легко проверить. Что бы вы ни знали о своей аудитории, сделайте себе заметки о том, какие почтовые клиенты вы хотите проверять больше всего при каждой отправке.</p> <p> Следует помнить, что за последние несколько лет количество получателей, читающих электронную почту на своих мобильных устройствах, выросло до 50% времени. На некоторых рынках более 70% электронных писем читаются с мобильных устройств. Убедитесь, что ваши электронные письма реагируют на запросы, и это улучшит качество обслуживания клиентов, особенно с учетом того, что потребление мобильной электронной почты продолжает расти. </p> <h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D0%BE%D0%B6%D0%B8%D1%82%D0%B5%D1%81%D1%8C_%D0%BD%D0%B0_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_-_%D0%B8_%D0%BD%D0%B5_%D1%82%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%BD%D0%B0_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5"></span> Положитесь на таблицы — и не только на данные. <span class="ez-toc-section-end"></span></h4> <p> Самый важный принцип для электронных писем в формате HTML состоит в том, что макет CSS просто не работает.Основные почтовые клиенты либо не предлагают никакой поддержки, либо искажают ее множеством разочаровывающих способов. </p> <p> Использование CSS вместо таблиц было боевым кличем войны веб-стандартов, но кодирование электронных писем HTML означает поднять белый флаг и уступить. Если только вы не создаете чрезвычайно простое электронное письмо или вся ваша аудитория не использует более современное чтение электронной почты инструмент, он вернулся ко всем тегам <code> </p> <table> </code>. </p> <p> Gmail, Outlook, Lotus Notes и, без сомнения, многие другие имеют большие проблемы с плавающими элементами и даже крайне ненадежны с полями и отступами.Вам нужно создать несколько структурных HTML-таблиц, чтобы в конечном итоге получить электронное письмо, которое хотя бы хорошо держится. </p> <p> Есть и некоторые проблемы с использованием таблиц, о чем на собственном опыте узнали многие дизайнеры. Вот несколько советов по работе с таблицами в электронном письме. </p> <h5><span class="ez-toc-section" id="1_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D0%B5_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83_%D0%B2_%D0%BA%D0%B0%D0%B6%D0%B4%D0%BE%D0%B9_%D1%8F%D1%87%D0%B5%D0%B9%D0%BA%D0%B5_%D0%B0_%D0%BD%D0%B5_%D0%B2_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B5"></span> 1. Установите ширину в каждой ячейке, а не в таблице. <span class="ez-toc-section-end"></span></h5> <p> Комбинация ширины таблицы, ширины ячеек, полей и отступов HTML, а также полей и отступов CSS может быть хаотичной. Упростите свой код и свою жизнь, установив только для каждой ячейки: </p> <pre> <code> <table cellspacing = "0" cellpadding = "0" border = "0"> <tr> <td> </td> <td> </td> </tr> </table> </code> </pre> <p> Почтовые клиенты ненадежны, когда дело доходит до определения правильной ширины ячейки, поэтому безопаснее всего указать ее явно.Ширина в пикселях является наиболее надежной, так как использование процентов может дать вам несколько дурацких результатов, особенно при использовании вложенных таблиц. </p> <p> Чтобы задать заполнение ячеек, либо задайте его один раз для всей таблицы с помощью параметра <code> cellpadding </code>, либо используйте CSS для задания заполнения в отдельных ячейках. Их смешивание может вызвать проблемы, и этого лучше избегать. </p> <h5><span class="ez-toc-section" id="2_%D0%92%D0%BB%D0%BE%D0%B6%D0%B8%D1%82%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D0%B4%D0%BB%D1%8F_%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D0%BC%D0%B5%D1%80%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F"></span> 2. Вложите таблицы для равномерного размещения. <span class="ez-toc-section-end"></span></h5> <p> Даже если поля и отступы поддерживаются большинством почтовых клиентов, результаты будут несовместимыми.Если для вас важен интервал, попробуйте вместо этого вложить таблицы в основную таблицу. Это старая школа, но проверенная временем. </p> <h5><span class="ez-toc-section" id="3_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D0%B5_%D1%86%D0%B2%D0%B5%D1%82_%D1%84%D0%BE%D0%BD%D0%B0_%D0%BD%D0%B0_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%BD%D0%BE%D0%BC_%D1%81%D1%82%D0%BE%D0%BB%D0%B5"></span> 3. Установите цвет фона на контейнерном столе. <span class="ez-toc-section-end"></span></h5> <p> Некоторые почтовые клиенты игнорируют фон тега <code> <body> </code> или тот, который задан в вашей таблице стилей. Наличие обертки вокруг всего вашего контента и установка для нее атрибута <code> bgcolor </code> поможет обойти эту проблему. </p> <h5><span class="ez-toc-section" id="4_%D0%9F%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D1%8B_%D0%B8%D0%BC%D0%B5%D1%8E%D1%82_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"></span> 4. Пробелы имеют значение. <span class="ez-toc-section-end"></span></h5> <p> Теоретически пробелы в файлах HTML следует игнорировать.Но на практике это может вызвать всевозможные причуды отрисовки, особенно если у вас есть пробелы между ячейками таблицы. Возьмите за привычку удалять любые пробелы между закрывающим тегом одной ячейки и открывающим тегом следующей, чтобы избежать неприглядных пробелов и проблем с макетом. </p> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5_%D0%B2%D1%81%D1%82%D1%80%D0%BE%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_CSS"></span> Используйте встроенный CSS. <span class="ez-toc-section-end"></span></h4> <p> Здесь пригодится C для <em> каскадного </em> в CSS. Применение стиля в строке дает ему приоритет над удаленными стилями (такими как стили клиента веб-почты), а также работает с почтовыми клиентами, которые удаляют CSS из заголовка или внешних файлов CSS.</p> <p> В настоящее время единственным крупным почтовым клиентом, который удаляет все другие типы CSS, встроенные теги </p> <style> в заголовок или тело и внешние связанные таблицы стилей, является приложение Gmail с адресами не в Gmail (обычно называемое GANGA). </p> <p> Gmail не поддерживает внешние таблицы стилей или тег <code> </p> <style> </code> в теле письма. Он также удаляет любой CSS в вашем блоке <code> </p> <style> </code> или встроенном стиле <code> style = </code>. Другие почтовые клиенты также часто неверно интерпретируют недопустимый CSS.Для спокойствия вам следует запустить свой CSS через валидатор, такой как W3C. </p> <p> Вот быстрое напоминание на случай, если вы какое-то время не использовали встроенный CSS (или когда-либо, если вы начали веб-дизайн после 2000 года). </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D1%82%D1%80%D0%BE%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_CSS_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D1%8B"></span> Встроенный CSS: основы <span class="ez-toc-section-end"></span></h5> <p> Стиль, примененный к элементам <code> p </code> в отдельной таблице стилей или в заголовке вашей HTML-страницы, может выглядеть следующим образом: </p> <pre> <code> п { высота строки: 1.5em; маржа: 0px 0px 10px 0px; } </code> </pre> <p> Эти стили будут применяться ко всем абзацам на вашей странице, но если стиль исключен, абзацы будут иметь стили в соответствии со стилями по умолчанию, используемыми почтовым клиентом, или собственной таблицей стилей веб-клиента.</p> <p> Применение стиля в строке означает стилизацию каждого отдельного элемента <code> p </code> во всем вашем контенте: </p> <pre> <code> <p> Lorem </p> </code> </pre> <p> Вы добьетесь более стабильных результатов, если примените стили таким образом для каждого элемента в своем электронном письме HTML. </p> <p> Когда вы начнете это делать, вы быстро поймете, что повторять одни и те же стили снова и снова в HTML-коде утомительно (как раньше были теги <code> <font> </code>). К счастью для нас, есть несколько способов сэкономить время при применении встроенных стилей для писем: </p> <ul> <li> Не вставляйте стили, пока не закончите кодирование.Разработайте весь дизайн с помощью тега <code><br /> <style> </code> в своей голове, и только после того, как вы внесете окончательные корректировки, вы можете применять их по очереди. Это избавляет от необходимости возвращаться и редактировать 20 экземпляров одного и того же стиля. </li> <li> Воспользуйтесь почтовой службой или инструментом, который автоматически встроит ваш CSS за вас. Например, в Campaign Monitor есть инструменты для извлечения стилей из заголовка или внешнего файла и автоматического применения каждого стиля к соответствующим элементам в строке при импорте кампании.</li> </ul> <p> Есть несколько инструментов, которые берут HTML-страницу и таблицу стилей, а затем выводят вашу страницу со встроенным CSS. Вы можете использовать CSS Inliner Campaign Monitor или другой наш любимый Premailer, который также даст вам полезные советы по поводу неподдерживаемого CSS. </p> <p> Есть определенные стили, которые плохо работают встраиваемых - вы не можете указать: состояния наведения для ссылок, например. Как правило, стоит держать стили в голове, а также в соответствии - дополнительный размер загрузки перевешивается преимуществом охвата всех ваших баз.</p> <h4><span class="ez-toc-section" id="%D0%9D%D0%B5_%D0%BF%D0%BE%D0%BB%D0%B0%D0%B3%D0%B0%D0%B9%D1%82%D0%B5%D1%81%D1%8C_%D0%BD%D0%B0_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B2_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B5_HTML"></span> Не полагайтесь на изображения в шаблоне HTML. <span class="ez-toc-section-end"></span></h4> <p> Вы помните термин веб-дизайнера <em>, нарезанный </em>? Это было тогда, когда веб-сайты создавались путем создания изображения размером со страницу и разрезания его на небольшие разделы, которые затем собирались в таблицы и помещались на страницу. </p> <p> Нарезка раньше была очень распространенным методом устранения несоответствий в браузере. К сожалению, тот же метод живет в инструментах многих дизайнеров электронной почты, и даже крупнейшие компании рассылают электронные письма в формате HTML, которые представляют собой не более чем набор изображений.</p> <p> Хотя это, безусловно, сокращает время, затрачиваемое на разработку электронной почты, на этом преимущества заканчиваются. В отличие от веб-браузеров, почтовые клиенты обычно блокируют загрузку изображений до тех пор, пока читатель не нажмет специальную кнопку или ссылку, как показано на изображении ниже. </p> <p> Рисунок 4.1. Электронное письмо со ссылкой «отображать изображения в этом письме» </p> <p> Исследования, проведенные за последние несколько лет, показали, что значительный процент (по некоторым оценкам до 40%) получателей электронной почты вообще никогда не разрешает использование изображений. Добавьте к этому всех людей, которые не понимают, что они могут показывать изображения, и у вас будет огромная группа получателей, которые не увидят ваш логотип или изображение заголовка, а тем более остальную часть вашего электронного письма, если оно полностью основано на изображениях.</p> <p> Настройки блокировки изображений по умолчанию для различных почтовых клиентов показаны в таблице ниже. Мы объясним, что означает последний столбец (<em> Trusted Sender img display </em>), в следующем разделе. А пока обратите внимание на второй столбец: он показывает, отображаются ли изображения по умолчанию в каждом из клиентов. </p> <h5><span class="ez-toc-section" id="%D0%91%D0%BB%D0%BE%D0%BA%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E_%D0%B2_%D0%BF%D0%BE%D1%87%D1%82%D0%BE%D0%B2%D1%8B%D1%85_%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D0%B0%D1%85"></span> Блокировка изображений по умолчанию в почтовых клиентах <span class="ez-toc-section-end"></span></h5> <table cellspacing="0" cellpadding="0"> <thead/> <tbody> <tr> <td> Yahoo Mail </td> <td> Есть </td> <td> № </td> </tr> <tr> <td> Yahoo Mail Beta </td> <td> Есть </td> <td> Есть </td> </tr> <tr> <td> Почта Windows Live </td> <td> № </td> <td> Есть </td> </tr> <tr> <td> Gmail </td> <td> № </td> <td> Есть </td> </tr> <tr> <td> Outlook.com </td> <td> Есть </td> <td> Есть </td> </tr> <tr> <td> Веб-сайт AOL </td> <td> Есть </td> <td> Есть </td> </tr> <tr> <td> Apple Mail </td> <td> Есть </td> <td> № </td> </tr> <tr> <td> Тандерберд </td> <td> Есть </td> <td> Есть </td> </tr> <tr> <td> Outlook 2007 </td> <td> № </td> <td> Есть </td> </tr> <tr> <td> Outlook 2003 </td> <td> № </td> <td> Есть </td> </tr> <tr> <td> Outlook Express </td> <td> Есть </td> <td> № </td> </tr> <tr> <td> Eudora </td> <td> Есть </td> <td> № </td> </tr> <tr> <td> Антураж </td> <td> Есть </td> <td> № </td> </tr> <tr> <td> Настольный компьютер AOL </td> <td> № </td> <td> Есть </td> </tr> </tbody> </table> <p> Если вы точно не знаете, что ваша аудитория читает электронную почту только в Apple Mail, например, вам нужно предположить, что приличное количество людей не увидит ваши изображения (поскольку ряд популярных клиентов, включая Gmail, Outlook .com, Outlook 2019 и Почта Windows 10 по умолчанию блокируют изображения). Так что этот красивый информационный бюллетень будет отображаться просто как кучка пустых квадратов. </p> <p> Вы можете себе представить, какое влияние окажет на успех вашей кампании! Итак, какая альтернатива? На самом деле есть несколько способов обойти блокировку изображений. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B2%D0%B5%D1%82%D1%8B_%D0%BF%D0%BE_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%BF%D0%BE_%D0%B7%D0%B0%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%D0%BC"></span> Советы по навигации по заблокированным изображениям <span class="ez-toc-section-end"></span></h5> <h5><span class="ez-toc-section" id="1_%D0%A1%D1%82%D0%B0%D0%BD%D1%8C%D1%82%D0%B5_%D0%B8%D0%B7%D0%B2%D0%B5%D1%81%D1%82%D0%BD%D1%8B%D0%BC_%D0%BE%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D0%B5%D0%BB%D0%B5%D0%BC"></span> 1. Станьте известным отправителем. <span class="ez-toc-section-end"></span></h5> <p> Большинство почтовых клиентов позволяют получателям автоматически отображать изображения, когда сообщение отправлено известным отправителем (отправители появляются в белых списках, списках контактов или адресных книгах).Последний столбец в приведенной выше таблице показывает, какие клиенты позволят получателям отменять настройку блокировки изображений для доверенных отправителей. </p> <p> Вы можете предложить своим подписчикам добавить адрес отправителя, который вы используете, в свой белый список. Прямо в форме регистрации вы можете разместить заметку с просьбой сделать это. Или, что еще лучше, включите инструкции по внесению в белый список или добавлению адреса к их контактам в электронное письмо с подтверждением подписки или ваше первое приветственное письмо. Это гарантирует, что изображения будут отображаться, а также повысит вашу доставляемость.</p> <p> В ваших реальных email-кампаниях вы можете сделать то же самое. Чтобы быть более полезным, разместите на своем сайте страницу с инструкциями о том, как добавить адрес в белый список для различных почтовых клиентов, и ссылку на него. </p> <h5><span class="ez-toc-section" id="2_%D0%96%D0%B8%D0%B2%D0%B8%D1%82%D0%B5_%D0%B1%D0%B5%D0%B7_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9"></span> 2. Живите без изображений. <span class="ez-toc-section-end"></span></h5> <p> Всегда найдутся люди, которые - случайно или случайно - никогда не включат изображения для ваших кампаний, поэтому при разработке необходимо это учитывать. Следуйте нескольким простым рекомендациям, чтобы улучшить свои результаты: </p> <p> <strong> Не используйте изображение в качестве первого элемента в письме.</strong> Помните, что многие почтовые клиенты будут использовать маленькое окно предварительного просмотра, и если единственный подходящий элемент - это неотображаемое изображение, электронное письмо также может быть пустым. Вместо этого не забудьте начать тело письма с некоторого текста предзаголовка, чтобы обеспечить надлежащий предварительный просмотр и привлечь больше открытий. </p> <p> <strong> Используйте атрибуты alt. </strong> Так же, как и для веб-сайта, убедитесь, что у каждого изображения есть полезные атрибуты alt. В некоторых случаях они появляются, когда изображение заблокировано, и могут обеспечить хорошую резервную копию.Они не всегда отображаются или могут отображаться не полностью. Вы можете увидеть, как обычные почтовые клиенты будут обрабатывать атрибуты alt, в таблице ниже. </p> <h5><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B0_%D0%BF%D0%BE%D1%87%D1%82%D0%BE%D0%B2%D1%8B%D0%BC_%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D0%BE%D0%BC"></span> Поддержка альтернативного атрибута почтовым клиентом <span class="ez-toc-section-end"></span></h5> <table cellspacing="0" cellpadding="0"> <thead/> <tbody> <tr> <td> Yahoo Mail </td> <td> № </td> </tr> <tr> <td> Yahoo Mail Beta </td> <td> Есть </td> </tr> <tr> <td> Почта Windows Live </td> <td> № </td> </tr> <tr> <td> Gmail </td> <td> Иногда </td> </tr> <tr> <td> Outlook.com </td> <td> № </td> </tr> <tr> <td> Apple Mail </td> <td> № </td> </tr> <tr> <td> Тандерберд </td> <td> Есть </td> </tr> <tr> <td> Outlook 2007 </td> <td> Сорт </td> </tr> <tr> <td> Outlook 2003 </td> <td> Есть </td> </tr> <tr> <td> Outlook Express </td> <td> Есть </td> </tr> <tr> <td> Eudora </td> <td> Сорт </td> </tr> <tr> <td> Outlook Mac </td> <td> Иногда </td> </tr> </tbody> </table> <p> <strong> Используйте подписи для важных изображений.</strong> Если у вас есть изображение, которое содержит важный контент (а не является декоративным элементом), используйте текстовый заголовок для его описания. Таким образом, даже если изображение не отображается и даже если не отображается замещающий текст, читатели будут иметь доступ к сообщению. </p> <p> <strong> Всегда есть текст и изображения. </strong> Если у вас есть баланс HTML-текста и некоторых изображений, то электронное письмо будет полезно даже без изображений. Если электронное письмо полностью состоит из заблокированных изображений, оно будет пустой тратой времени и может потребовать отказа от подписки.</p> <p> <strong> Подумайте, нужны ли вам изображения вообще. </strong> Иногда изображения необходимы. В качестве отличного примера см. Информационный бюллетень FontShop, в котором отображаются образцы новых шрифтов. Без изображений это намного менее полезно, поэтому их определенно стоит включить. Аудитория FontShop также с большей вероятностью будет постоянно отображать изображения и использовать более прогрессивные почтовые клиенты. </p> <p> Однако в некоторых случаях изображения не нужны. Считайте транзакционное электронное письмо подтверждением заказа.Он должен быть четким и доступным для сканирования, но изображения не должны содержать жизненно важного содержания. </p> <p> Используйте узнаваемый логотип для тех, кто его увидит, но не полагайтесь на изображения, чтобы донести до вас свою точку зрения. Убедитесь, что часть процесса отправки вашей кампании - это просмотр электронного письма без загруженных изображений, чтобы увидеть, как его увидят некоторые ваши получатели. </p> <p> <strong> Уговорите клиентов, которым нужны электронные письма с полным изображением. </strong> Веб-дизайнеры часто говорят, что они лично знают, что лучше не отправлять чисто графические сообщения электронной почты, но их клиенты хотят, чтобы все выглядело идеально.Дело в том, что работа дизайнеров заключается в том, чтобы показать клиентам, почему это плохая идея. Покажите им, как будет выглядеть их электронное письмо без изображений, и спросите их: «Вы бы пролистали эту пустую страницу?» </p> <p> Напомните им, что, возможно, 30% людей увидят именно это, что может равняться сотням или тысячам людей, которые могут выбросить электронное письмо (или отказаться от подписки) и никогда не утруждать себя загрузкой этих изображений. </p> <h4><span class="ez-toc-section" id="%D0%95%D1%89%D0%B5_%D0%BE%D0%B4%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D1%87%D0%B8%D0%BD%D0%B0_%D0%B8%D0%B7%D0%B1%D0%B5%D0%B3%D0%B0%D1%82%D1%8C_%D1%8D%D0%BB%D0%B5%D0%BA%D1%82%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D1%85_%D0%BF%D0%B8%D1%81%D0%B5%D0%BC_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%89%D0%B8%D1%85_%D0%B2%D1%81%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Еще одна причина избегать электронных писем, содержащих все изображения <span class="ez-toc-section-end"></span></h4> <p> Да! Спам-фильтры часто используют соотношение изображений и текста в качестве флага, чтобы определить, является ли электронное письмо законным.Электронные письма, содержащие все изображения, с большей вероятностью будут помечены как спам, чем электронные письма со смешанным содержанием. </p> <h2><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%81%D0%BE%D0%B2%D0%B5%D1%82_%D0%BF%D0%BE_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8E_%D0%B2%D0%B0%D1%88%D0%B5%D0%B3%D0%BE_%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B3%D0%BE_%D1%81%D0%B0%D0%B9%D1%82%D0%B0"></span> Базовый веб-дизайн | совет по созданию вашего первого сайта <span class="ez-toc-section-end"></span></h2> <p> Путь // www.yourhtmlsource.com → Мой первый сайт → БАЗОВЫЙ ВЕБ-ДИЗАЙН </p> <hr/> <p> Простое изучение всех HTML-тегов - не способ стать хорошим веб-дизайнером. Это может сделать кто угодно, а они до сих пор выводят мусор. В этом руководстве я дам вам самые важные советы в общих областях, чтобы вы встали на верный путь к созданию отличных сайтов.Повсюду есть множество ссылок на другие руководства. </p> <p> Навигация по странице: <br /> Проверить источник<br /> | Код руки<br /> | Изучите CSS<br /> | Презентация<br /> | Цвета<br /> | Упражнение на сдержанность<br /> | Базовое продвижение<br /> | Фундаментальная оптимизация<br /> | Золотое правило </p> <p> Эта страница последний раз обновлялась 21.08.2012 </p> <hr/> <p> </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%B8%D1%82%D1%8C_%D0%B8%D1%81%D1%82%D0%BE%D1%87%D0%BD%D0%B8%D0%BA"></span> Проверить источник <span class="ez-toc-section-end"></span></h3> <p> Просмотр исходного кода <strong> других сайтов </strong> - отличный способ подобрать методы и приемы HTML. В браузере нажмите <em> <u> V </u> iew | Sour <u> c </u> e </em> на любой странице, и код, который его создал, будет открыт (откройте в Блокноте для лучшего чтения) для вашего удовольствия от просмотра.Найдите в коде соответствующий раздел для того, что вам понравилось, и посмотрите, как это было создано. Затем вы можете вырезать <strong> фрагментов кода и вставить </strong> из кода страницы в свои собственные. Так можно многому себя научить, хотя это никогда не бывает так просто, как просто сесть с кока-колой и хорошо почитать HTML-код ... </p> <p> А теперь необходимые предупреждения: будьте осторожны при обучении на плохо написанном коде. Есть много сайтов с ужасным кодом, которые вы, возможно, читаете, поэтому постарайтесь не усвоить их вредные привычки.Получение сегментов кода и тому подобного - это нормально, но не нужно брать дизайн, скрипты, графику или что-то такое, что, похоже, потребовало много работы. Я видел, как люди копируют дизайн HTML Source, и это очень раздражает. Просто нет. </p> <p> После того, как вы собрали свой код, следующим важным шагом будет <strong> проверить его </strong>, чтобы убедиться, что он будет работать во всех браузерах без проблем. Вы можете быть удивлены. На сайте W3C есть хороший (хотя и суровый) онлайн-валидатор HTML. </p> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%B4_%D1%80%D1%83%D0%BA%D0%B8"></span> Код руки <span class="ez-toc-section-end"></span></h3> <p> Если вы не вырветесь из менталитета пользователя WYSIWYG, вы всегда будете ограничены в том, что вы можете создать.Слишком много новичков сразу переходят к FrontPage или DreamWeaver и никогда не учатся программировать и разрабатывать <em> на самом деле </em>. Когда что-то идет не так, у них нет навыков, необходимых для исправления ошибок, которые оставили им редакторы, и они сдаются. </p> <p> <strong> Ручное кодирование в текстовом редакторе </strong> (например, Notepad ++, TextMate, TopStyle или даже надежный NotePad) означает, что вы знаете свой код намного лучше и можете находить проблемы и редактировать более мелкие вещи. <strong> у вас гораздо лучший контроль над своим дизайном </strong>.Вы ближе к своему коду и можете легче использовать такие вещи, как CSS. Визуальные редакторы также выводят очень раздутый код с множеством ненужных тегов шрифтов, абзацев и т. Д. Ваши страницы будут загружаться быстрее, если вы <strong> эффективно закодируете </strong> в текстовом редакторе. </p> <p> Это никогда не то, что хочет делать тот, кто использовал редактор WYSIWYG, так как на первый взгляд это выглядит гораздо более медленным и трудоемким способом создания страниц. Вам придется преодолеть этот барьер - со временем вы полюбите преимущества ручного программирования.</p> <h3><span class="ez-toc-section" id="%D0%98%D0%B7%D1%83%D1%87%D0%B8%D1%82%D1%8C_CSS"></span> Изучить CSS <span class="ez-toc-section-end"></span></h3> <p> CSS, или каскадные таблицы стилей, - самая важная разработка в мире веб-мастеров за последние несколько лет. Они позволяют вам изменить внешний вид всего вашего сайта, редактируя один файл, а также позволяют форматировать и создавать ваши страницы, чтобы они выглядели намного лучше. </p> <p> Если вы умеете хорошо использовать HTML, CSS не должен быть большим шагом вперед. Таблицы стилей не только являются отличным дополнительным навыком для вас, но и будут необходимы для создания страниц в следующие несколько лет.Разберитесь с ними как можно скорее; ознакомьтесь с введением в таблицы стилей. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F"></span> Презентация <span class="ez-toc-section-end"></span></h3> <p> Вам необходимо <strong> структурировать вашу страницу на блоки </strong>, используя таблицы, слои или фреймы. Имейте четко определенную навигацию, контент и дополнительные поля - люди будут знать, где искать определенные части вашей страницы. Не размещайте <em> </em> элементов страницы друг на друге на всем протяжении страницы - это требует большой прокрутки, что не нравится интернет-аудитории.Чтобы уменьшить это, <strong> максимально использует горизонтальное пространство экрана </strong>, выравнивая навигационные ссылки и вставляя изображения сбоку, чтобы контент перемещался рядом с ним. </p> <p> Ограничьте выбор шрифта <strong> </strong> двумя или тремя для всего сайта. Типографы всегда ссылаются на ужасные ошибки, сделанные на раннем этапе, когда текстовые процессоры вошли в массовое использование несколько лет назад. Журналы и другие публикации печатались с десятками шрифтов, используемых на каждой странице, только потому, что дизайнеры <em> могли </em>.Это привело к тому, что страницы выглядели как большой беспорядок. Вам следует использовать очень мало шрифтов, чтобы избежать такой же участи. </p> <p> Придерживайтесь шрифта без засечек для основного контента, поскольку текст в этом семействе шрифтов легче читать с экрана компьютера, чем шрифты с засечками. Размер основного текста должен быть от 2 до 3 (от 10 до 12 пунктов). Также помните, что вы должны использовать общие шрифты, которые у всех будут на своем компьютере (можно найти в руководстве по шрифтам), чтобы они видели ту же страницу, что и вы. </p> <h3><span class="ez-toc-section" id="%D0%A6%D0%B2%D0%B5%D1%82%D0%B0"></span> Цвета <span class="ez-toc-section-end"></span></h3> <p> Я уже говорил о важности использования светлых цветов <strong> </strong> в руководстве по <body>, но я хотел бы повторить его здесь.На яркие основные цвета очень неудобно смотреть, а в Интернете, где вы все время смотрите на освещенный монитор, этого очень важно избегать. Пастельные оттенки не утомляют глаза, да и вообще выглядят более стильно. </p> <p> Взгляните на такие сайты, как »Yahoo и» Amazon, два самых популярных сайта в Интернете, и посмотрите, что они делают. Крупные цветные блоки прорисовываются мягкими оттенками. Осталось <strong> пустого пространства </strong> для визуального облегчения.Эти сайты были созданы на основе обширных опросов пользователей Интернета, чтобы они знали, что делают. </p> <p> При выборе цветовой схемы выберите один <strong> или два основных цвета </strong>. Они будут использоваться для заполнения основных блоков вашей страницы. Наряду с этим выберите еще три или четыре цвета, которые хорошо сочетаются с вашими основными цветами - много экспериментируйте с ними. Помимо любых разовых элементов или графики, это должны быть единственные цвета, которые вы используете в своем макете. Все они должны быть из веб-палитры.</p> <p> Убедитесь, что между вашим фоном и текстом </strong> цветов хороший контраст <strong>. В большинстве мест делайте основной текст черным. Области, представляющие наибольший интерес на вашей странице, должны быть выделены <strong>, </strong> с небольшим экземпляром яркого цвета, но убедитесь, что он никогда не берет верх. </p> <h3><span class="ez-toc-section" id="%D0%9E%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B8%D1%82%D0%B5%D0%BB%D1%8C_%D0%B4%D0%BB%D1%8F_%D1%83%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9"></span> Ограничитель для упражнений <span class="ez-toc-section-end"></span></h3> <p> Вы можете быть немного взволнованы блестящими спецэффектами, достижимыми с помощью таких вещей, как Java-апплеты, JavaScript и Flash, но вы должны понять, что читатели редко впечатляются великолепной, но сложной в использовании системой.</p> <p> <strong> Простота работает лучше всего </strong>. Базовая система навигации на основе текста предпочтительнее, чем система, построенная с переворачиванием изображений. Переход прямо на домашнюю страницу с богатым содержанием предпочтительнее бессмысленной и эффектной Flash-заставки или заставки. Фоновые звуки и тому подобное начинают раздражать после одного раза. Прокрутка текста и множественные GIF-анимации - отличительная черта дизайнера-любителя, и они ужасны. Если и есть что-то, что показывают многие исследования юзабилити, так это то, что читатели находят многие спецэффекты довольно неприятными и раздражающими.Более простые сайты всегда процветают. </p> <p> Когда ваш сайт будет готов к работе в Интернете, вы можете начать отправлять свои страницы в поисковые системы. Это вызывает большое замешательство и боль у большинства новичков - бедняги не могут понять, почему поисковые системы не добавляют их сайт. Прочтите это: <em> обычно занимает не менее 4 недель </em>, чтобы ваш сайт появился, если только это. Тебе может повезти, тебе может очень не повезти, но это все, к чему все сводится. Если по прошествии двух месяцев вы все еще не появились в их индексе, вам следует повторно отправить свой сайт.Это ужасно утомительное время ожидания, но пока двигатели не начнут работать быстрее, так и будет. </p> <p> Пока вы ждете, ищите другие возможности для привлечения читателей. Найдите <strong> каталогов </strong> сайтов, похожих на ваш собственный. Обычно они принимают заявки и добавляют сайты в течение нескольких дней. Это отличное место, чтобы привлечь <strong> целевых посетителей </strong>. Узнайте, как написать рекламный текст с расширенным набором ключевых слов для описания. Если вы действительно уверены в качестве своего сайта, отправьте »Dmoz (Открытый каталог) и - Господи -» Yahoo.Однако для двух последних сайтов помните, что содержание вашего сайта является самым важным, поэтому убедитесь, что у вас его много. Попадание в любой из них обычно является быстрым шагом в большинстве поисковых систем. </p> <p> Держитесь подальше от таких вещей, как бесплатные страницы и веб-сайты для отправки, которые обещают разместить ваш сайт в сотнях каталогов. Все это притворство. </p> <p> Добавьте теги <meta> перед отправкой в ​​поисковые системы. Прочтите «Продвижение 101», чтобы узнать об основах выбора ключевых слов.Самое главное - это »Google. Google достаточно надежно индексирует новые сайты, в то время как вы можете бесконечно ждать появления других и по-прежнему не получать с них посетителей. </p> <p> Еще одна ошибка новичков заключается в том, что их ожидания слишком завышены. Начинающим сайтам должно быть повезло, и они получают в среднем 30-40 посещений в день; И даже тогда это зависит от популярности вашей темы. Не расстраивайтесь из-за небольшого количества просмотров вначале, веб-сайты со временем начинают расти. Счастливые посетители будут ссылаться на ваш сайт, а люди будут переходить по этим ссылкам и станут постоянными посетителями.То есть, если у вас хороший сайт. </p> <p> Также: ссылка на исходный код HTML! Вот и продвижение по службе ... </p> <h3><span class="ez-toc-section" id="%D0%A4%D1%83%D0%BD%D0%B4%D0%B0%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F"></span> Фундаментальная оптимизация <span class="ez-toc-section-end"></span></h3> <p> Я уверен, что вы все знаете о необходимости оптимизации - Интернет часто очень медленный. Веб-сайт, который не загружается быстро, редко читается. Люди становятся более нетерпеливыми, и теперь, когда есть такой большой выбор, если ваш сайт не дает читателям быстро то, что они ищут, вас никогда не услышат. Вы можете узнать все об этом в разделе оптимизации, а пока вот некоторые из самых основных идей, которых вы должны придерживаться при кодировании веб-страниц: </p> <ul> <li> Используйте только несколько маленьких изображений на каждой странице.Если вы собираетесь использовать большие изображения, используйте только одно или два изображения на странице или используйте миниатюры. Всегда используйте атрибуты высоты, ширины и высоты. </li> <li> Не используйте анимированные GIF-файлы, если статический сделал бы ту же работу. Анимация часто отвлекает от элементов страницы. </li> <li> Максимально оптимизируйте графику. Это менее сложный процесс, чем вы думаете. </li> <li> Не учитывайте большинство мультимедийных эффектов. </li> <li> Разделите длинные страницы на несколько меньших. </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%97%D0%BE%D0%BB%D0%BE%D1%82%D0%BE%D0%B5_%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE"></span> Золотое правило <span class="ez-toc-section-end"></span></h3> <p> И одно понятие, которое подытожит отношение, которое вам понадобится, чтобы стать хорошим веб-дизайнером? <br /> <em> Будьте готовы учиться и совершенствоваться.</em> <br /> Вы никогда не создадите идеальный дизайн сайта, как никогда не сможете создать идеальную картину - вашу работу всегда можно улучшить. Принимайте критику своей работы (какой бы сложной она ни была) и работайте над решением проблем, с которыми сталкиваетесь вы и другие люди. Обновляйте свой сайт как можно больше и меняйте его дизайн каждые несколько месяцев. Заботьтесь о качестве своей работы. Продолжать изучать новые техники и быть в курсе последних событий в мире веб-дизайна; посмотрите на хорошо оформленные сайты и выберите из них элементы, которые вам нравятся; ответьте на вашу электронную почту; слушать хорошую музыку; зарисовывать идеи; и, прежде всего, получайте от этого удовольствие.</p> <hr/> <h3><span class="ez-toc-section" id="%D0%98%D1%82%D0%B0%D0%BA_%D1%87%D1%82%D0%BE_%D0%B4%D0%B0%D0%BB%D1%8C%D1%88%D0%B5"></span> Итак, что дальше? <span class="ez-toc-section-end"></span></h3> <p> Хорошо, хотите еще? Итак, продолжайте через HTML Source! Взгляните на Полный указатель, и вот еще пара других базовых руководств для вас: </p> <p> .</p> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/dizajn/kody-dlya-sajta-html-dizajn-shablon-sajta-na-chistom-html-gotovyj-kod-sajta.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='671' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> <nav class="navigation post-navigation" role="navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/piton-zapis-v-fajl-fajly-rabota-s-fajlami-python-3-dlya-nachinayushhih-i-chajnikov.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">Питон запись в файл: Файлы. Работа с файлами. | Python 3 для начинающих и чайников</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/dobavit-organizacziyu-gugl-karty-sorry-this-page-cant-be-found.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Добавить организацию гугл карты: Sorry, this page can’t be found.</span></a></div></div> </nav></article> </div> </div> <div class="col-md-4 col-lg-4"> <aside id="secondary" class="widget-area"> <section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a> </li> <li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">Верстка</a> </li> <li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Дизайн</a> </li> <li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для начинающих</a> </li> <li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">Обучение</a> </li> <li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">Примеры</a> </li> <li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Шаблон</a> </li> </ul> </section></aside><!-- #secondary --> </div> </div> </main> </div> <section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"> <div class="container-fluid px-md-5"> <footer class="fansee-business-footer-wrapper-inner footer-widget"> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> </footer> </div> <div class="fansee-business-copyright"> <div class="container-fluid"> <div class="fansee-business-copyright-inner"> <div class="fansee-business-copy-right"> <div class="pr-0"> 2021 © Все права защищены. </div> </div> <div class="fansee-business-social-menu"> <ul class="fansee-business-demo-social-menu"> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> </ul> </div> </div> </div> </div> </section> <div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .post-nav-links, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://jumper.su/wp-content/plugins/pagination/css/nav-style.css?ver=5.7' type='text/css' media='all' /> <script type='text/javascript' src='https://jumper.su/wp-includes/js/comment-reply.min.js?ver=5.7' id='comment-reply-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.3.0' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://jumper.su/wp-includes/js/wp-embed.min.js?ver=5.7' id='wp-embed-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='js-cookie-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.17-1617043686' id='ez-toc-js-js'></script> </body> </html>