Аккуратный HTML


Оглавление (нажмите, чтобы открыть):

Аккуратный HTML

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

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

Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу отличную параллель. Возьмите музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний. Он нажимает кнопку и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкатня&raquo. Искусство и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Operу и NN он даже не знает, которые предъявляют особые требования к оформлению кода страницы.

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

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

* Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img).
* Атрибуты всегда записывайте в кавычки (напр., align=»right»), что придаст вашему коду аккуратность и совместимость с языком XML.
* Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. w .
* Есть тэги, для которых необязательно ставить тэг закрывающий. Но я рекомендую все-таки ставить их в любом случае. Во-первых, так легче ориентироваться в коде, а во-вторых, для полной совместимости со всеми браузерами и их версиями (смотрели свой сайт под Netscape 1.0?).

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

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

Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке». Не повторяйте ошибок таких сайтостроителей, верстайте аккуратно и красиво, выделяйте структуру кода, и всегда помните, что язык HTML — основа сайта.

Аккуратный HTML

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

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

Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу отличную параллель. Возьмите музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний. Он нажимает кнопку, и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкатня». Искусство и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper’у и NN он даже не знает, которые предъявляют особые требования к оформлению кода страницы.

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

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

  • Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img).
  • Атрибуты всегда записывайте в кавычки (напр., align=»right»), что придаст вашему коду аккуратность и совместимость с языком XML.
  • Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. w .
  • Есть тэги, для которых необязательно ставить тэг закрывающий. Но я рекомендую все-таки ставить их в любом случае. Во-первых, так легче ориентироваться в коде, а во-вторых, для полной совместимости со всеми браузерами и их версиями (смотрели свой сайт под Netscape 1.0?).
  • Недопустимы ненужные комментарии, которые часто оставляют «программы-клепалки». А вот свои собственные всегда пишите, они вам облегчат нахождение нужного фрагмента кода страницы.
  • Старайтесь не оставлять стили в страничке. Выводите их в отдельный файл — так проще что-либо поменять и код страницы уменьшится (иногда очень заметно).
  • У каждого символа есть своя так называемая подстановка. Например, для тире это — (—), а для кавычек « («) и » (»). В любом справочнике по HTML вы найдете список таких символов и их подстановок. Всегда используйте их, иначе могут возникнуть проблемы с их корректным отображением.

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

Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке». Не повторяйте ошибок таких сайтостроителей, верстайте аккуратно и красиво, выделяйте структуру кода, и всегда помните, что язык HTML — основа сайта.

Создание аккуратного индикатора загрузки с использованием CSS

24 января 2020 | Опубликовано в css | Нет комментариев »

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

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

Итак, как создать такой индикатор?

С помощью псевдоэлементов ::before и ::after родительского и дочернего блоков создадим первые четыре полосы. После этого используем свойство тени блока без размытия на всех четырех полосах для создания оставшихся четырех полос. И будем вращать весь элемент с помощью временной функции steps(8), создавая анимацию.

Как и у легко настраиваемого круглого индикатора загрузки, изменение размера шрифта меняет размер всего элемента, так как все размеры заданы в единицах измерения ems. Также есть обходной путь в виде текста, чтобы индикатор загрузки могли использовать и программы, читающих с экрана. Этот индикатор работает в браузерах Chrome, Opera, Firefox, Safari и Internet Explorer от версии 10. Он должен работать без потери функциональности, но без анимаций и в браузере Internet Explorer версии 9.

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

Вот как выглядит наш индикатор:

Код HTML

Код CSS

Надеемся, Вам понравился этот урок и он Вам пригодится.

Красивое оформление HTML/CSS кода

Зачем красиво оформлять HTML/CSS код в процессе верстки сайта и так ли это важно? Ведь заказчик не видит изнаночную сторону сайта?

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

Красивое оформление HTML

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

Правила оформления HTML кода

1) Соблюдение отступов для вложенных элементов.

Каждый вложенный элемент, отделяем четырьмя (или двумя) пробелами от его родителя, относительно левого края редактора кода. Тег div является вложенным элементом относительно тега section.

В свою очередь теги h1 и p, являются вложенными элементами в тег div и выравниваются относительно этого тега div, не создавая лесенки.

Заголовок

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

Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и ставить перед ним пробелы.

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

2) Выравнивание тегов по одной линии.

Теги не должны хаотично плясать туда-сюда на странице редактора. Так писать не нужно.

3) Написание комментариев


Когда в разметке, идет подряд много закрывающих тегов div, то ставьте комментарий (название класса) рядом с закрывающим тегом div. Тогда вам не придется гадать, какой именно класс закрывает div.

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

Красивое оформление CSS

Где ставить пробелы?

Между названием селектора и открывающей фигурной скобкой.

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

После запятой ставить пробел.

font-family: ‘PT Sans Narrow’, sans-serif;

Правила в селекторе пишем на одном уровне с четырьмя (или двумя) пробелами относительно названия этого селектора.

.header <
padding-top: 20px;
font-size: 15px;
background-color: #333333;
>

Каждый новый селектор отделять одной строкой.

.nav_link <
margin: 0;
padding: 0;
list-style: none;
>

Писать комментарии перед началом стилей каждого блока.

/* Section */
.section <
padding: 30px 0;
>

.section_title <
margin-bottom: 20px;
padding-bottom: 0;
>

.section_img <
background-color: #f8f8f8;
>

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

Как не нужно писать стили

Не пишите свойства в одну строку. В таком стиле оформления кода очень тяжело ориентироваться.

Заключение

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (https://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: https://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Шаблон сайта на чистом HTML

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

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

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

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

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

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

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

    Разделим весь процесс на три части.

    1. Создание директории сайта на своём компьютере.

    2. Создание сайта.

    3. Перевод сайта с нашего компа на хостинг, то есть в интернет.


    Создание директории сайта на своём компьютере

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

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

    Затем приступим ко второму пункту, самому творческому.

    Создание шаблона сайта

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

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

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

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

    Но и до сих пор, табличная структура не устарела и с успехом применяется.

    Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.

    Итак, вот такой сайт, с минимальным оформлением.

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

    Название сайта (организации)

    Описание сайта

    Страница

    Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте.
    Этот сайт первый, который я разработал самостоятельно, а до этого умел только входить в интернет.

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

    Общая информация

    Текст общей информации

    Подвал

    !—В ячейке строки создаём ещё одну таблицу для шапки сайта.
    Оформление:
    border=»1″ — двойная рамка толщиной в 1px
    background=»images/168.png» — картинка в шапке сайта, если требуется.
    Адрес картинки вы должны вставить свой.
    bgcolor=»#7FFFD4″ — фоновый цвет в шапке, если нет картинки.
    cellpadding=»10″ — отступ содержимого от рамки не менее 10px.
    style=»width:100%; border-radius:5px;» — добавляем «резиновость»
    и закругляем уголки рамки— >
    table
    border =» 1 »
    background =» images/168.png »
    bgcolor =» #7FFFD4 »
    cellpadding =» 10 »
    style =» width:100%; border-radius:5px; «>
    !—Создаём строку таблицы— >
    tr >
    !—Создаём столбец таблицы— >
    th >
    !—Содержание ячейки столбца— >
    h1 >Название сайта (организации) /h1 >
    h3 >Описание сайта /h3 >
    !—Закрываем таблицу— >
    /th >
    /tr >
    /table >

    !—В этой же ячейке контейнера создаём ещё одну таблицу
    для основного контента.
    Оформление как и в предыдущей таблице— >

    table
    border =» 1 »
    bgcolor =» #e6e6fa »
    cellpadding =» 10 »
    style =» width:100%; border-radius:5px; «>
    !—Создаём строку— >
    tr >
    !—Создаём ячейку
    Оформление:
    rowspan=»2″ — объединяем две ячейки в одну.
    Число объединяемых ячеек по числу ячеек в сайдбаре.
    style=»width:80%» — основной контент занимает 80% всей площади,
    оставшиеся 20% для сайдбара— >
    td
    rowspan =» 2 »
    style =» width:80% «>
    h2 >Страница /h2 >
    !—Начинаем абзац с красной строки— >
    p style = «text-indent:20px «>
    Здравствуйте уважаемые будущие веб-мастера!
    Мне 55 лет и я рад приветствовать Вас на своём сайте.
    Этот сайт первый, который я разработал самостоятельно,
    а до этого умел только входить в интернет. /p >

    p style =» text-indent:20px «>Почему я решил его сделать?
    За те 3 месяца, пока разбирался в
    сайтостроении и создавал этот ресурс обнаружилось,
    что авторы руководств по созданию
    сайтов считают многие нюансы само собой разумеющимися
    и не обращают на них внимание
    А мне, учитывая возраст и «опыт», было не просто
    понять как раз эти нюансы, они отнимали больше всего
    времени. /p >
    !—Закрываем ячейку— >
    /td >

    !—Создаём ячейку сайдбара— >
    td bgcolor =» #e6e6fa «>
    h3 >Меню /h3 >
    !—Абзац для ссылки на страницу сайта— >
    p >
    !—Ссылка на страницу сайта— >
    a href =»»>
    !—Картинка маркера перед названием страницы— >
    img src =» https://trueimages.ru/img/00/06/f4fffdb5.png «>
    !—Название страницы
    style=»margin-left:5px;» — отступ названия от маркера— >
    span style =» margin-left:5px; «>Страница /span > /a >
    !—Закрываем абзац— >
    /p >
    p >
    a href =»»>
    img src =» https://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg «>
    span style =» margin-left:5px; «>Страница 1 /span ;> /a >
    /p >
    p >
    a href =»»>
    img src =» https://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg «>
    span style=»margin-left:5px;»>Страница 2 /span > /a >
    /p >
    !—Закрываем строку Меню— >
    /td >
    /tr >
    !—Создаём строку с дополнительной информацией— >
    tr >
    !—Ячейка с дополнительной информацией— >
    td
    bgcolor =» #e6e6fa »
    align =» center «>
    h3 >Общая информация /h3 >
    p >Текст общей информации /p >
    !—Закрываем ячейку с общей информацией
    и таблицу основного контента— >
    /td >
    /tr >
    /table >

    !—Создаём таблицу подвала— >
    table
    border =» 1 »
    bgcolor =» #7FFFD4 »
    height =» 100 »
    cellpadding =» 10 »
    style =» width:100%; border-radius:5px; «>
    !—Создаём строку.— >
    tr >
    !—Создаём столбец— >
    th >
    h3 >Подвал /h3 >
    !—Закрываем таблицу подвала. При желании в подвале можно
    сделать несколько строк и столбцов— >
    /th >
    /tr >
    /table >
    !—Закрываем таблицу контейнера— >
    /td >
    /tr >
    /table >
    /body >
    /html >

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

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

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

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

    Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта

    Размещение сайта в папках директории

    Все действия показаны в редакторе Notepad++. Если кто ещё не установил, то вот ссылка на инструкцию по установке: Установка Notepad++

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

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

    Открываем Notepad++, открываем «Новый документ», проверяем и если нужно исправляем кодировку на uft-8 (без БОМ), копируем код сайта с моей страницы, вставляем его в поле редактора.

    Затем выбираем «Файл — Сохранить как…» , в открывшемся поисковике находим созданную при создании директории сайта папку, допустим «website», в строке «Сохранить»(внизу окна поисковика) меняем название с «nev1» на «index.html», и сохраняем.

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

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

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

    Выбираем меню Запуск (верхняя строка панели редактора), и в нём Launch in Chrome.

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

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

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

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

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


    Теперь разберёмся с картинками. Изображения в моём шаблоне загружены через сервис trueimages.

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

    Как сделать картинку рассказано в статье Как сделать картинку для шапки в Paint(это для тех кто не знаком с фотошопом).

    А адреса у Вас буду выглядеть так: Для Главной (index.html) — images/имя рисунка.

    А на всех последующих страницах вместо images ставиться images1.

    Картинки маркеров на Главной прописываются так

    А на следующих страницах так опять вместо images — images1

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

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

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

    Адреса этих страниц определяются так. Когда Вы создадите страницу, сохраните её в папке content, выберете в Notepad++ меню Запуск, и откроете в своём браузере, то в адресной строке браузера как раз и будет нужный адрес.

    Вставляется он в виде ссылки перед текстом «Другая страница» (как пишутся ссылки читайте в статье Ссылки примерно вот так

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

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

    Перенос сайта со своего компьютера на виртуальный хостинг, то есть в интернет

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

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

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

    Я рекомендую Вам хостинг Бегет. Это один из, если не самый лучший хостинг провайдер России.

    Евгений Попов даже запустил проект «Хостинг-Нинзя», по выявлению лучшего хостера, и заключающийся в опросе пользователей.

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

    Цена хостинг + домен = 1120 руб. в год. Первый месяц(целый месяц!) — тестовый, то есть вначале покупается только домен за 120 руб в год, и только через месяц, если Вам понравилось, оплачиваются услуги хостинга.

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

    А это уже встречается не часто, даже за более солидные деньги.

    Расскажу пару запоминающихся случаев. Как то раз я набрав адрес своей админки, в ответ получил, не помню уж какую, ошибку. Представляете моё состояние?

    Был сайт, и нет его. Позвонил в техподдержку хостинга, и через час выяснилось, что плагин BulletProf Security, после обновления, возможно и при моём неумелом участии, наштамповал новых файлов .htaccess, и закрыл тем самым всякий доступ на сайт.

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

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

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

    В каком ещё хостинге Вам окажут такую помощь. Да ни в каком. Нет таких больше.

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

    Читайте там до абзаца «А вот теперь тот способ переноса сайта…». Дальше расписан перевод сайта с Денвера, и Вам это не нужно.

    Когда сайт зарегистрирован, проходим в панель управления хостинга.

    Здесь нас интересует раздел Файловый менеджер, так как именно при его помощи мы сейчас перенесём всё, что сделано у нас на компьютере, в интернет.

    Итак, открываем менеджер, и дважды щёлкаем по строке с доменным именем вашего сайта.

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

    Открываем папку public.html и щёлкнув по разделу Новая папка, создаём там две папки images и content. В папке content — папку images1. Короче, всё так-же, как на компьютере.

    Затем находим Загрузить файлы, и щёлкнув по нему, откроем окно загрузки

    Здесь заходим в Выбрать, и, в открывшемся поисковике, находим файлы и папки созданные на нашем компе, в директории website.

    Первым делом выбираем файл index.html, и загружаем его на хост, нажав Загрузить в меню окна загрузки.

    Затем точно таким-же образом загружаем файлы из папок images, images1, и content в одноимённые, созданные на хостинге.

    Адреса страниц при этом изменятся так как в них добавиться доменное имя сайта, примерно так:

    Для главной — Доменное имя/index.html
    Для страниц — Доменное имя/content/straniza.html

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

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

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

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


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

    В открывшемся окне, в поле Кодовое значение, проставляем 644 и жмём Изменить(что такое 644 и другие права доступа можно узнать в интернете)

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

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

    Да, ещё о том, как сделать этот сайт побольше.

    Для этого в директории сайта в папке content создаются несколько папок для рубрик, каждая со своей папкой images.

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

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

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

    Одесса, старый еврейский дворик, раннее утро. Из окна высовывается еврейка и орет соседкам из разных окон: – Розочка, ты моего Абрама не видела?
    — Да нет, конечно!
    — Римма, мой Абраша у тебя?
    — Та чё б он у меня был?!
    — Рахиль, Абрама не встречала?
    — Та не видела, а что случилось?
    — Да сказал, что пойдет по шлюхам – и до сих пор нет его!
    — А что мы шлюхи?
    — А что, спросить нельзя?

    Создаем аккуратную контактную форму на HTML5

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

    Мы будем использовать jQuery и Modernizr, чтобы помочь со старыми браузерами, и PHP на стороне сервера для проверки ввода.

    Шаг 1: Начало работы

    Для начала нам нужно настроить наш каталог и файлы. Для начала я настоятельно рекомендую HTML5 boilerplate. Это действительно хорошая отправная точка для любого проекта HTML5 и сэкономит вам много времени. Для этого урока я выбрал «BOILERPLATE CUSTOM».

    Для получения дополнительной информации о HTML5 boilerplate ознакомьтесь с этим руководством на Nettuts+.

    После загрузки и распаковки удалите все, кроме index.html и папок css и js . Я также добавил папку с именем img и файл PHP с именем process.php . Мы будем использовать папку img для хранения изображений для нашей формы и process.php для обработки всей серверной логики для контактной формы. Вот как выглядит моя структура каталогов:

    Это все, что нам нужно для начала! Шаблон HTML5 включает в себя потрясающий набор CSS с разумными настройками по умолчанию и включает все библиотеки JS (jQuery & Modernizr), которые мы собираемся использовать сегодня. Все наши JS-файлы и CSS-файлы были подключены в index файле. Теперь пришло время перейти к разметке.

    Шаг 2: Форма

    Откройте index.html и удалите все внутри элемента #container . Мы поместим нашу контактную форму внутри этого div :

    Это весь HTML-код, который нам понадобится для нашей формы. Давайте посмотрим на каждый отдельный раздел:

    ul#errors и p#success будут контейнерами наших сообщений об ошибках и успехах. Мы будем скрывать их по умолчанию с помощью CSS и отображать их с помощью JavaScript или PHP после отправки формы. Для ввода имени наше единственное требование — чтобы оно было заполнено.

    В HTML5 мы делаем это путем добавления атрибута ‘required’ . Это заставит браузер проверить, что в этом поле есть что-то, прежде чем разрешить отправку формы. Поле электронной почты аналогично — обязательное, но также мы хотим убедиться, что введенный текст это адрес электронной почты. Для этого мы указываем тип поля ввода — электронная почта, который является новым в HTML5. Хотя телефон не является обязательным полем, мы используем для этого HTML5 тип поля ввода — tel.

    Запрос (Enquiry) — это стандартный элемент select , а сообщение — обычный textarea — здесь нет ничего нового. Для textarea мы установим обязательный атрибут, чтобы убедиться, что пользователь вводит некоторый текст.

    В HTML5 есть новый атрибут для текстовых областей, называемый maxlength . Да, вы уже догадались, это позволяет нам установить максимальное количество символов, которое мы можем написать в текстовой области. По какой-то причине те, кто создал спецификацию HTML5, не думали, что нам понадобится атрибут minlength (как мы делаем сейчас), и для этого нет атрибута. Таким образом, в качестве временного атрибута minlength мы собираемся использовать еще один новый атрибут HTML5, называемый пользовательским атрибутом data. По сути, это любое имя атрибута с префиксом «data-». В нашем случае мы выбрали data-minlength. Это позволяет нам создавать собственные атрибуты.

    Еще одна вещь, на которую стоит обратить внимание, — это то, что мы устанавливаем атрибут placeholder для всех элементов ввода (кроме телефона) и текстовой области. Это новый атрибут HTML5 для элемента input. Когда форма отображается в первый раз, на входе появляется текст-заполнитель, обычно другого цвета. Затем, когда вы фокусируете ввод, текст заполнителя исчезает. Если вы ушли из поля, не заполнив его, текст заполнителя будет добавлен обратно. Это довольно крутой эффект, и он может предоставить пользователю немного больше информации о том, что ему нужно сделать. Ранее это должно было быть сделано с помощью JavaScript.

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

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

    Шаг 3: Стилизация формы

    Вот наша форма, выглядит не очень.

    В данный момент она выглядит не слишком хорошо, и она не делает нашу блестящую новизну HTML5 видимой, поэтому давайте добавим немного CSS. Откройте файл style.css . Файл уже содержит некоторые стили по умолчанию, которые помогут нам сделать нашу форму кросс-браузерной. Прокрутите вниз и найдите комментарий, говорящий:

    Сразу после этого вставьте следующий CSS:

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

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

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

    Это даст нам хороший эффект при нажатии, когда кнопка отправки активна.

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

    Это нормализует внешний вид текста-заполнителя на полях ввода и текстовых областях. Здесь мы делаем его светло-серым и выделяем его курсивом. Это даст нам одинаковое отображение во всех браузерах, кроме Opera, которая не поддерживает стилизацию placeholder. IE просто не поддерживает атрибут placeholder. Полная остановка. Мы будем использовать JavaScript, чтобы обойти это. Вы можете узнать больше о стилизации HTML5-форм с помощью CSS (2.1 + 3) здесь.

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

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

    Шаг 4: Подготовка к проверке на стороне сервера

    Давайте погружаться. Откройте файл process.php и вставьте следующее:

    Мы говорим здесь: выполнять следующий код только тогда, когда метод запроса — это POST . По умолчанию, если форма отправляется в сценарий PHP, входные значения формы хранятся в суперглобальном массиве с именем $_POST . Если ничего не пришло, $_POST не будет массивом, оператор if будет равен false и наш код не будет запущен.

    Как только мы установим, что это запрос POST , мы можем начать логику обработки формы. Первое, что нам нужно сделать, это установить две переменные:

    • $formok: логическое значение, которое мы можем проверить, чтобы убедиться, что форма валидная или мы не в конце скрипта.
    • $errors: массив, который мы будем использовать для хранения всех ошибок в форме, так как мы проверяем ее.

    После этого мы устанавливаем некоторые общие данные для отправки формы:

    • $ipaddress: IP-адрес пользователя, он может быть полезен для внесения в черный список спама, перекрестных ссылок на аналитические данные и т. д.
    • $date: дата отправки формы. Мы используем функцию date для генерации даты в британском формате.
    • $time: время отправки формы. Мы используем функцию date, чтобы сгенерировать время.


    Мы могли бы объединить дату и время, если бы хотели:

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

    Шаг 5: Проверка данных $_POST

    Мы собираемся проверить каждую переменную в отдельности, чтобы убедиться, что их значение является корректным. Если это не так, мы установим для переменной $formok значение false и сохраним сообщение об ошибке в массиве $errors . Мы начнем с поля имени.

    Здесь мы просто проверяем, что $name на самом деле имеет значение. Если это не так, это означает, что пользователь не ввел имя. Мы используем функцию empty() , чтобы проверить это. Скобки [] после $errors является аналого для array_push (который используется для добавления элемента в конец массива). Далее мы проверим адрес электронной почты:

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

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

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

    Шаг 6: Что делать дальше.

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

    Это логика, которую мы будем использовать для отправки сообщения (вставьте это после того, как мы выполнили нашу проверку):

    Чтобы отправить сообщение, мы будем использовать функцию mail() . Нам нужно будет передать этой функции четыре параметра: to, subject, message и headers.

    • to: Это будет адрес электронной почты, на который вы хотите отправить детали формы.
    • subject: это будет тема письма.
    • message: это будет содержание письма. Мы храним это в переменной $emailbody . Это HTML-строка, содержащая результаты нашей формы. Там, где вы видите фигурные скобки с именами наших переменных, они будут заменены на значения переменных при запуске этого скрипта. Это называется заменой переменных. Подстановка такого рода работает только в том случае, если строка заключена в кавычки DOUBLE, а не SINGLE.
    • headers: Это используется для передачи дополнительной информации почтовому клиенту, чтобы он знал, как отсылать электронную почту. Мы храним наши заголовки в переменной $headers и предоставляем дополнительную информацию о том, от кого получено электронное письмо и какой тип содержимого оно содержит.

    Примечание. Не забудьте изменить адрес электронной почты from в заголовках и адрес электронной почты to в функции mail .

    Это должно привести к подобному письму:

    Если вы работаете на сервере Windows, вам может потребоваться вставить эту строку кода (перед объявлением переменной $headers ), чтобы заставить работать функцию mail:

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

    Мы будем хранить наши данные в ассоциативном массиве. Этот массив имеет три элемента:

    • posts_form_data: это будет массив, содержащий данные формы, которые были отправлены в сценарий.
    • form_ok: здесь мы будем хранить переменную $formok , и эта переменная будет проверена на странице формы, чтобы показать пользователю соответствующее сообщение.
    • errors: мы будем хранить переменную $errors . Эта переменная будет использоваться, если переменная $formok равна false.

    Последнее, что нам нужно сделать, — это перенаправить пользователя обратно на страницу формы вместе с нашим массивом $returndata . Как только мы будем перенаправлены обратно на страницу формы, мы потеряем нашу переменную $returndata ; поэтому, чтобы сделать эти данные постоянными, мы временно сохраним их в сессии.

    Еще одна вещь, которую мы должны иметь в виду, в конечном варианте, если в браузере пользователя включен JavaScript, мы хотим отправить форму через AJAX. Это будет означать, что мы хотим, чтобы наш AJAX-запрос был размещен в том же месте, что и отправка формы, когда JavaScript отключен. Поскольку форма уже была бы проверена на стороне клиента, она пройдет через всю проверку на стороне сервера, и подробности будут отправлены нам по электронной почте. Если форма невалидна, она никогда не будет отправлена (так как проверка браузера/JavaScript предотвратит это). Это означает, что с помощью запроса AJAX у нас нет причин для перенаправления или установки каких-либо переменных сессии. В заключительной части этого скрипта мы проверим, был ли текущий запрос к process.php запросом AJAX или нет, и, если это так, установите переменные сессии и перенаправьте.

    Чтобы проверить, был ли это AJAX-запрос, мы ищем переменную $_SERVER[‘HTTP_X_REQUESTED_WITH’] . Как и суперглобальный массив $_POST , есть еще один, называемый $_SERVER . Этот массив содержит информацию о сервере и среде выполнения. Обратитесь сюда для получения более подробной информации.

    Затем мы вызываем session_start() , чтобы дать нам доступ к сессии, и устанавливаем переменную $_SESSION[‘cf_returndata’] для зеркального отображения $returndata . На странице формы мы теперь сможем получить доступ к этой переменной.

    Чтобы перенаправить обратно на форму, мы используем функцию header() . Мы говорим ему перенаправить нас на последнюю страницу, с которой мы пришли, используя переменную: $_SERVER[‘HTTP_REFERER’] .

    В целом вы должны иметь в итоге это:

    Все, что нужно для обработки отправки нашей формы, сделано и уместилось менее чем в 90 строках PHP! Все, что нам нужно сделать сейчас, это обновить пользователя и предоставить либо сообщение об успехе, либо сообщение об ошибке. Вы можете сохранить process.php сейчас.

    Шаг 7: Обновим интерфейс

    Теперь, когда мы обработали данные формы и вернулись на страницу, нам нужно сообщить пользователю о том, что произошло. Это означает доступ к переменной сессии, которую мы установили в process.php , и выяснение того, какой ответ дать. Поскольку эта страница теперь должна использовать PHP, нам нужно изменить расширение файла index.html на .php (index.html = index.php). Не волнуйтесь, это не должно нарушать того, что мы уже сделали.

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

    Запуск сессии до того, как какой-либо контент будет отправлен в браузер, должен предотвратить возникновение ошибок типа «cannot send session cookie — headers already sent by. ». Ниже элемента H2 формы добавляем в этот фрагмент PHP:

    Мы устанавливаем две переменные в значения по умолчанию. Подробнее об этом позже . Затем мы проверяем, установлена ли $_SESSION[‘cf_returndata’] . Затем мы устанавливаем $cf (сокращение от контактной формы) равным нашей переменной сессии. Это просто для того, чтобы нам не печатать $_SESSION . каждый раз, когда мы хотим получить доступ к этим данным. Последняя переменная $sr (если не считать ответа сервера) имеет значение true . Это переменная, которую мы будем проверять, чтобы увидеть, отсылали ли мы ранее нашу форму. Следующее, что мы хотим сделать, это отобразить сообщение об ошибке или успехе в верхней части формы. Заменим это:

    По умолчанию сообщения не отображаются вообще, потому что в CSS мы установили ‘ display: none ‘. Внутри атрибута класса сообщений мы используем PHP, чтобы добавить к ним класс ‘visible’ , если они должны быть показаны. Этот класс устанавливает ‘display’ в ‘block’ .

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

    • a) ответ сервера равен true и
    • b) что форма была невалидная

    По сути, если мы отправили форму, $sr будет равно true , а если форма была невалидной, $cf[‘form_ok’] будет равно false . Таким образом, класс visible будет выведен, но PHP и сообщение будут показаны, и наоборот для сообщения об успехе. Внутри скобок мы проверяем значения двух переменных. Мы проверяем, что $sr равно true , а (&&) $cf[‘fomr_ok’] равно false . Мы используем такое выражение для проверки этих значений. Вы также можете написать это так, если хотите:

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

    Сначала мы проверяем, что у нас есть массив ошибок в $cf и что он содержит хотя бы одну ошибку. Операторы if и foreach могут немного отличаться от того, что вы видели раньше. Это называется Альтернативным Синтаксисом. Мы использовали альтернативный синтаксис здесь просто для того, чтобы сделать его немного более читаемым при смешивании с HTML. Вы можете использовать обычный синтаксис, хотя, все зависит от предпочтений.

    Это все, что нам нужно, чтобы показать пользователю ответ на отправку формы. Чтобы проверить это, отключите JavaScript и отправьте форму. Помните, что браузер будет проверять форму, так как мы используем новые элементы HTML5. Чтобы быть уверенным, что мой PHP работает, я тестирую в IE8. Да, верно, IE иногда пригодится .

    Если вы отправите невалидную форму, вы должны получить это:

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

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

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

    Как и в случае с сообщениями об успехе и ошибках, мы проверяем, равно ли значение $sr true , а значение $cf[‘form_ok’] равно false , и если так и есть, мы записываем сохраненное значение в сессию для этого поля формы. Это делается с помощью тернарного оператора.

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


    Наконец, последнее, что мы собираемся сделать, это unset эту переменную сессии после того, как мы получили от нее наши данные. Вы не обязаны делать это, все сводится к предпочтениям. Если удалить ее сейчас, когда страница обновляется с помощью кнопки обновления (не отправка формы), сообщение об ошибке/успехе не будет отображаться. Если вы не удалили ее, пользователь может заполнить контактную форму, поискать информацию в Интернете, вернуться к форме, и сообщение об ошибке/успехе все равно будет отображаться. Мне это не нравится, поэтому я собираюсь предотвратить это, поместив эту строку PHP сразу после закрывающих тегов формы:

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

    Не забывайте session_start() в верхней части страницы! Теперь у нас есть полнофункциональная контактная форма.

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

    Это все прекрасно и здорово, но мы можем сделать еще один шаг вперед. Мы можем использовать JavaScript, чтобы реализовать функции, которых нет в браузере (встроенная проверка, поддержка атрибутов HTML5 и т. д.). Мы даже можем использовать JavaScript для отображения наших сообщений об ошибке/успехе и отправить форму с использованием AJAX.

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

    Шаг 8: Что такое полифилл?

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

    В нашем случае мы ожидаем, что браузер будет поддерживать новые типы полей ввода и атрибуты HTML5, которые мы использовали. Firefox, Chrome, Opera и Safari имеют довольно хорошую встроенную поддержку для них. IE6 — 9 вообще не поддерживает их. Типично. Честно говоря, это довольно шокирующее, что IE9 не имеет поддержки этих вещей, он был выпущен в начале этого года. В любом случае, откладывая IE в сторону (я мог бы продолжать бесконечно), первые две вещи, которые мы собираемся дополнить, — это autofocus и атрибут placeholder .

    Мы будем использовать jQuery, чтобы помочь нам с нашим JavaScript. Мы будем использовать его в первую очередь для обработки нашего AJAX-запроса, анимации и обхода и манипуляции с DOM. Вы можете обойтись без его использования, но вам придется написать значительное количество кода. Его размер не слишком велик, поэтому я могу смириться с загрузкой файла такого размера. Я, вероятно, как и вы, предпочел бы написать меньше кода.

    Мы также будем использовать библиотеку JavaScript Modernizr, чтобы помочь нам с обнаружением функций. Это уже включено как часть нашего шаблона HTML5, поэтому нам не нужно ничего делать, чтобы запустить Modernizr!

    Перейдите в каталог js и откройте скрипт script.js . Нам не нужно беспокоиться о подключении этого файла, jQuery или Modernizr, к index.php , так как он уже был предоставлен нам для HTML5 boilerplate, который мы использовали. Удалите все в этом файле и вставьте следующее:

    Весь наш код будет внутри блока $(function()< >) . Это будет означать, что наш код будет выполнен, как только страница загрузится. Также любые переменные или функции, которые мы объявляем внутри этого блока, не будут мешать любому другому коду снаружи. Затем мы кешируем некоторые элементы DOM, так как к ним мы будем обращаться довольно часто. Кэшировать их более эффективно, чем запрашивать их каждый раз, когда вы хотите их использовать. Вот объяснение того, что является каждой переменной:

    • form: Элемент контактной формы.
    • formElements: Все элементы ввода и текстовые области в форме, кроме кнопки отправки. Это будет просто массив элементов.
    • formSubmitButton: Кнопка отправки формы.
    • errorNotice: Уведомление об ошибке — неупорядоченный элемент списка.
    • successNotice: Сообщение об успехе — элемент абзаца.
    • loading: Элемент прогресса загрузки. Он отобразит ‘загрузочный’ GIF, когда форма будет отправлена после проверки.
    • errorMessages: Это объект, содержащий некоторый текст для наших сообщений об ошибках. Они используются более одного раза, поэтому мы создаем их здесь. Вы заметите, что некоторые сообщения не читаются правильно. Мы будем динамически добавлять их позже, когда перейдем к проверке формы.

    После этого мы используем функцию jQuery, которая называется each() , для перебора массива formElements . Пока мы выполняем итерации по элементам формы, мы хотим выполнить обнаружение объектов для атрибута placeholder, и если у элемента есть этот атрибут, но он не поддерживается браузером, применим наш polyfill. Вот polyfill для атрибута placeholder:

    Здесь мы используем Modernizr, чтобы определить, есть ли у нас поддержка атрибута placeholder. Modernizer — это объект, input — это свойство этого объекта, а placeholder — это свойство поля ввода (отсюда и все точки). Это значение будет либо true , либо false . Мы проверяем, является ли оно false (браузер не поддерживает атрибут placeholder); если это так, мы реализуем наш полифилл. Первое, что мы делаем, это объявляем переменную, которая будет содержать текст placeholder-а, назначенный элементу. Даже если браузер не поддерживает атрибут placeholder, мы все равно можем получить доступ к этому атрибуту. Для этого мы используем функцию с именем getAttribute() . Ключевое слово ‘this’ относится к текущему элементу DOM, который мы повторяем в цикле.

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

    1. Мы заключаем ключевое слово ‘this’ в функцию jQuery ($()) , поэтому имеем доступ к некоторым удобным функциям DOM jQuery.
    2. Мы добавляем класс ‘ placeholder-text ‘ к элементу. Это сделает текст placeholder-ов элементов, которые мы собираемся починить, похожим на остальные браузеры. Мы уже установили правило для этого в CSS.
    3. Мы устанавливаем значение по умолчанию в значение атрибута placeholder для поля ввода. Это покажет текст placeholder в поле ввода, когда страница загружена.
    4. Мы привязываем событие фокуса, которое проверит, совпадает ли текст атрибута placeholder со значением входных данных. Если это так, тогда для значения ввода ничего не задано, что очищает ввод, и мы удаляем класс ‘ placeholder-text ‘, чтобы текст являлся текстом ввода по умолчанию.
    5. Мы привязываем событие blur, которое проверит, равно ли значение ввода пустоте. Если это так, мы заполняем ввод текстом-placeholder и повторно применяем ‘placeholder-text’ .

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

    Далее мы добавим атрибут autofocus . Это очень просто:

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

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

    Шаг 9: Проверка формы, стили Polyfill

    Мы связываем событие click с кнопкой отправки формы (хранится в переменной formSubmitButton ). Когда это событие сработает, мы проверим форму. Обычно в JavaScript мы делаем это для события submit формы, но поскольку новые браузеры используют свои собственные встроенные средства проверки, событие submit формы никогда не запускается. Браузер будет отображать свои собственные сообщения об ошибках, но они крайне противоречивы во всех браузерах, и в настоящее время нет способа их стилизовать. Отображение нашего собственного сообщения об ошибке обеспечит согласованность, а также покажет для браузеров, которые не поддерживают новые методы проверки. Чтобы браузеры не отображали свои сообщения об ошибках по умолчанию, мы возвращаем false в конце этой функции. Вот объяснение того, для чего нужны переменные, установленные вверху:

    • formok: Это будет отслеживать правильность формы.
    • errors: Это массив, который будет содержать сообщения об ошибках.

    Это похоже на валидацию PHP, которую мы написали ранее!

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

    • name: Имя текущего элемента.
    • nameUC: Имя текущего элемента с заглавной буквой. ucfirst() — это пользовательский метод строкового объекта, который мы напишем позже.
    • value: Значение текущего элемента.
    • placeholderText: Текст placeholder-а текущего элемента.
    • type: Тип текущего элемента.
    • isRequired: Установлен ли у текущего элемента обязательный атрибут или нет.
    • minLength: Значение data-minlength текущего элемента (если применимо).

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

    В HTML5 элементы формы имеют новое свойство, называемое validity . Здесь хранятся все данные проверки для этого элемента. В Firebug это выглядит так:

    Как вы можете видеть, у этого объекта есть множество свойств, которые дают нам немного больше информации о том, в чем проблема. Значения свойств являются либо false либо false . На этом скриншоте я попытался отправить форму без имени и зарегистрировал свойство validity для ввода имени в консоли ( console.log(this.validity) ). Это показывает, что значение отсутствовало ( valueMissing = true ).

    Наш код для проверки элементов HTML5:

    Мы проверяем, имеет ли этот элемент формы свойство validity, и, если оно есть, мы проверяем свойство valid объекта validity , чтобы убедиться, что это поле в порядке. Если он невалиден (я использую сокращение. для проверки на false ), мы устанавливаем formok в false и выполняем некоторые тесты, чтобы увидеть, в чем проблема.

    Если значение отсутствует (вызвано обязательными полями), мы добавляем сообщение об ошибке в массив ошибок, который мы установили ранее. Для этого мы используем метод push() объекта массива. Сообщение об ошибке будет состоять из имени элемента (первая буква в верхнем регистре), соединенного с требуемым сообщением об ошибке, которое мы установили ранее в нашем скрипте.

    Если значение этого поля формы не пропущено, мы хотим определить, были ли введены правильные данные. Единственное поле ввода в нашей форме, который нуждается в проверке, это поле электронной почты. Имея это в виду, в elseif части нашего кода мы проверяем, равно ли свойство typeMismatch объекта validity true и является ли тип этого поля ввода действительно электронной почтой. Если это так, мы добавляем сообщение об ошибке электронной почты в наш массив ошибок.

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

    Это будет проверять наши входные данные HTML5, но теперь нам нужно ориентироваться на браузеры, которые не поддерживают API проверки форм JavaScript. Если API проверки формы JavaScript не поддерживается браузером, приведенный выше код никогда не будет выполнен и будет пропущен.

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

    Во-первых, мы проверяем, является ли это поле обязательным (определяется атрибутом required ). Затем мы используем Modernizr, чтобы проверить, поддерживается ли атрибут required браузером. Если нет, нам нужно вручную проверить значение элемента и сравнить его с атрибутом placeholder. Если они одинаковые, то, очевидно, это поле формы не заполнено, поэтому мы делаем четыре вещи:

    1. Мы фокусируем ввод (как это делает браузер при использовании его собственной проверки)
    2. Мы устанавливаем переменную formok в false , так как форма невалидна.
    3. Мы добавляем сообщение об ошибке в наш массив ошибок.
    4. Мы возвращаем false , этим выходим из цикла и сразу переходим к следующему фрагменту кода вне цикла.

    Затем мы собираемся проверить, является ли это поле ввода полем электронной почты, и, если это так, был ли введен действительный адрес электронной почты.

    Это делается почти так же, как и раньше. Мы видим, действительно ли это поле электронной почты, а затем используем Modernizr, чтобы проверить, поддерживается ли поле электронной почты. Если это не так, мы пишем наш код, который проверяет, является ли она действительной или нет. Для этого полифилла мы используем регулярные выражения, чтобы проверить, является ли электронная почта действительной или нет. Мы создаем регулярное выражение в переменной emailRegEx , а затем используем метод test() объекта регулярного выражения, чтобы проверить, соответствует ли значение поля ввода регулярному выражению.


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

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

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

    Нам не нужно использовать Modernizr здесь. Вместо этого все, что нам нужно сделать, это проверить, что у этого элемента установлена минимальная длина, и, если это так, убедиться, что его длина больше, чем его установленная минимальная длина. Length является свойством всех строковых объектов в JavaScript и возвращает количество символов в строке. Мы используем parseInt() для преобразования minLength в целое число, чтобы сравнить его со значением value.length . minLength было получено из атрибута data-minlength . Это значение извлекается в виде строки, поэтому, чтобы предотвратить возможные ошибки в будущем (сравнение строк с числами и т. д.), мы конвертируем его в целое число.

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

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

    Шаг 11: Почти там .

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

    Функция showNotice будет принимать два аргумента.

    • Тип сообщения для отображения
    • Данные для отображения в сообщении.

    Если типом является ‘error’ , мы скрываем сообщение об успешном завершении, перебираем данные (которые должны быть массивом) и добавляем элементы списка к уведомлениям об ошибках UL . Затем мы показываем уведомление об ошибке с помощью функции jQuery show() . Поскольку весь наш код содержится в одном и том же блоке, мы имеем доступ к переменным, установленным вне этой функции ( successNotice и errorNotice ). Если мы хотим показать сообщение об успехе, мы просто скрываем сообщение об ошибке и отображаем сообщение об успехе.

    О функции ucfirst() — я добавляю эту функцию в прототип строкового объекта.

    «Прототип — это объект, от которого другие объекты наследуют свойства».

    Это означает, что все строковые объекты будут наследовать нашу функцию ucfirst() . Вот почему ранее мы использовали name.ucfirst() . name является строкой, и поскольку наш метод находится в прототипе, он доступен для использования.

    Мы получаем первый символ ( charAt(0) ), делаем его заглавным ( toUpperCase() ), а затем возвращаем его с остальной частью строки минус первый символ ( slice(1) ). charAt, toUpperCase и slice являются методами строкового объекта. Вы можете прочитать больше об объекте-прототипе здесь или здесь.

    Теперь, когда у нас разобраны разные функции, мы можем сосредоточиться на логике обработки формы. Мы вернулись к работе внутри логики formSubmitButton.bind .

    Мы начнем с логики, когда форма невалидна. Следующий код должен быть помещен внутри оператора if :

    Первый фрагмент кода просто анимирует «* указывает на обязательность поля». Это не обязательно; это просто фича, которая дает пользователю немного больше обратной связи — что проблема, по сути, возникла. Мы используем функцию jQuery animate() для анимации свойства CSS margin-left поля элемента. После этого мы будем вызывать нашу функцию showNotice() . Мы хотим показать сообщение об ошибке, поэтому мы передаем ‘error’ в качестве первого аргумента, а затем массив ошибок, в котором мы храним наши сообщения об ошибках проверки формы.

    Если форма валидна, мы должны отправить ее через AJAX.

    Во-первых, мы раскрываем наш ‘загрузочный’ gif , чтобы указать, что форма что-то делает. Затем мы используем функцию jQuery ajax() для отправки формы в process.php . Для url и type мы используем функцию jQuery attr() , чтобы получить эти атрибуты. Для данных мы используем функцию jQuery serialize() . Если запрос AJAX был успешным, мы вызываем нашу функцию showNotice() и передаем ей ‘ success ‘ в качестве первого аргумента. Это отображает наше сообщение об успехе. Последнее, что мы делаем, это сбрасываем форму (очищаем поля формы) и скрываем gif загрузки. Все, о JavaScript теперь позаботились! Поздравляю! Вы должны были закончить с файлом script.js , должно быть похоже на это:

    Заключение

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

    Итак, куда вы идете дальше? Этот пример может быть расширен до гораздо большей формы, и весь код, который вы написали, будет работать без нареканий. Вы даже можете добавить свою собственную проверку для таких вещей, как поле ввода телефона или атрибут maxlength !

    Спасибо за чтение, и я надеюсь, что вам понравился этот урок!

    Верстаем сайт на HTML5 и CSS3. Часть 1

    Дата публикации: 2011-03-29

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

    Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    Также скачайте исходники себе на компьютер!

    Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

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

    Верстка на HTML5 — разработка быстрее, а код гибче

    Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

    Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

    А вот как это было раньше:

    Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

    Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

    В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

    Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

    Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

    Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

    Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

    Fictive Company Blog


    a blog showcasing the übercoolness of HTML5 & CSS3

    Элемент Header

    Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

    Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

    Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

    Элемент Hgroup

    Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

    Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

    Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

    Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как «Untitled Section» (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как «Navigation» (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

    Элемент Nav

    Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

    Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    Таблица содержания (TOC) в длинном документе;

    Нумерованные ссылки типа «предыдущий/следующий» и

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

    Элемент Article

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

    Sample Post 1

    Curabitur ut congue hac, diam turpis[…]

    Вот определение W3C для элемента article:

    Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

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

    Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

    Элемент Footer

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

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

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

    Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

    Элемент Section

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

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

    Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

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

    Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

    Элемент Aside

    Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

    Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

    Последнее слово

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

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

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


    Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Аккуратный HTML

    Любая работа должна быть создана аккуратно и красиво. Особенно если ее могут увидеть много людей. А это напрямую касается разработки сайтов, и в частности некоторых технологий, используемых при этом — HTML и CSS. Просматривая страницы в Интернете мы, как правило, не смотрим в код HTML. Да и зачем это нужно обычному пользователю? Но часто бывает важно взглянуть на код, чтобы составить некоторое впечатление о создателях этого веб-сайта. Код HTML, это как зеркало умений, возможностей и желаний разработчика сайта.

    Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу отличную параллель. Возьмите музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний. Он нажимает кнопку и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкатня». Искусство и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper’у и NN он даже не знает, которые предъявляют свои требования к оформлению кода страницы.

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

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

    • Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img).
    • Атрибуты всегда записывайте в кавычки (напр., align=»right»), что придаст вашему коду аккуратность и совместимость с языком XML.
    • Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. w .
    • Есть тэги (напр.,
    • ,

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

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

    Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке». Не стоит так безответственно подходить к HTML, ведь он основа сайта.

    Аккуратный HTML

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

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

    Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу отличную параллель. Возьмите музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний. Он нажимает кнопку и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкатня&raquo. Искусство и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper’у и NN он даже не знает, которые предъявляют особые требования к оформлению кода страницы.

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

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

    • Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img).
    • Атрибуты всегда записывайте в кавычки (напр., align=»right»), что придаст вашему коду аккуратность и совместимость с языком XML.
    • Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. w .
    • Есть тэги (напр.,
    • ,

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

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

    Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке». Не повторяйте ошибок таких сайтостроителей, верстайте аккуратно и красиво, выделяйте структуру кода, и всегда помните, что язык HTML — основа сайта.

    Успешность сайта Аккуратный HTML

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

    Особенно это важно, когда создаёшь сайт по заказу. Страницы сайта, написанные на HTML, должны быть понятны не только автору, но и людям, которые в дальнейшем будут с этим кодом работать.Просматривая страницы сайта нас, как правило, не интересует сам код HTML. Да и зачем это нужно нам как обыкновенным пользователям? Но часто бывает важно взглянуть на «внутренности», чтобы составить некоторое впечатление о создателях этого веб-сайта. Код HTML, это как зеркало, что может разработчик сайта и его умение справляться с поставленной задачей.

    Заглянув туда можно получить информацию, как сделана страничка какой-либо специализированной программой или человеком, его умом и знаниями. Программа ведь глупая засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper’у и Firefox он даже не знает, которые предъявляют особые требования к оформлению кода страницы.

  • Не пишите тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в сайтах написано строчными буквами (table, body, img).
  • Атрибуты всегда записывайте в кавычки (напр., align=»right»), что придаст вашему коду аккуратность и совместимость с языком XML.
    Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. w .
  • Есть тэги, для которых необязательно ставить тэг закрывающий. Но я настоятельно рекомендую все-таки ставить их в любом случае. Во-первых, так легче ориентироваться в коде, а во-вторых, для полной совместимости со всеми браузерами и их версиями (смотрели свой сайт под Firefox?).
  • Недопустимы ненужные комментарии, которые часто оставляют специализированные программы создания сайтов. А вот свои собственные всегда пишите, они вам облегчат нахождение нужного фрагмента кода страницы.
  • Пытайтесь, если возможно, не оставлять стили в страничке. Выводите их в отдельный файл — так проще что-либо поменять и код страницы уменьшится (иногда очень заметно). Тоже и относится к JavaScript.
  • У каждого символа есть своя так называемая подстановка.В любом справочнике по HTML вы найдете список таких символов и их подстановок. Всегда используйте их, иначе могут возникнуть проблемы с их корректным отображением.
  • Перед тем, как представлять сайт заказчику, посмотрите корректно ли он отображается в Opera и Firefox, если код корректный всё должно практически одинаково выглядеть. Помните, маленькая неточность и сайт будет в этих браузерах отображаться «криво».

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

    Автор: Климов Александр

    Почти всегда целью создания сайта является получение прибыли, которая в свою очередь, зависит от его внешнего вида. Статистика говорит, что около 94% людей, при выборе товара, сначала обращают внимание на упаковку, а потом уже на её содержимое. И если эта упаковка не привлекательная и безвкусная, мало кто обратит на нее внимание, и, соответственно, товар не будет пользоваться спросом.
    В случае с интернет, “упаковкой” выступает ваш сайт, а “товаром” — его контент. Если сайт выглядит непривлекательно, то каким бы ценным и нужным не было его содержимое, люди будут обходить его стороной. Наша задача — сделать ваш сайт привлекательным и удобным, чтобы люди чувствовали себя уютно и комфортно, чтоб они возвращались к вам еще и еще. Соответствие между ценой и качеством вас, несомненно, порадуют.
    .
    Мы делаем сайты для бизнеса, а не красочную картинку, которая увешена тяжеловесными флэшами и огромными фотографиями.
    Пользователя, когда он попадает на абсолютно любой сайт, прежде всего интересует информация, затем, как реализовать на этом сайте полученную информацию, чтобы было удобно и просто (юзабилити), подбор цветовой гаммы, расположение блоков на странице и многое другое.

    Перед тем, как заказывать создание сайта, рекомендуем прочесть статью А зачем мне (нам) сайт? или Что нужно знать заказчику сайта
    Да и вообще, обратите внимание на раздел Статьи о продвижении сайта и бизнеса там вы найдёте ответы на многие вопросы.

    Мастер Йода рекомендует:  В Иннополисе открыли тестовую зону сети 5G
  • Добавить комментарий