Заголовок страницы

Шаблон простого сайта на HTML

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

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

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

Короткий разбор

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

Доктайп помогает браузеру понять, как отображать страницу.

Тег, в котором мы показываем, что наша страница на русском языке.

Называем кодировку страницы — для русского языка подходит utf-8 .

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

Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про относительные ссылки.

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

Это шапка сайта — блок, который может повторяться на любой странице.

Это заголовки первого и второго уровня.

Это мой сайт
 
Первая секция
 

Семантический тег, в нём хранится основное содержимое страницы, которое относится только к этой странице.

Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.

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

Но может быть и о семантике, я пока не решил.
 

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

На этом всё, дорабатывайте шаблон по своему усмотрению. Например,

Удачи в обучении!

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Как выглядит красивый HTML-код

Крис Койер (Chris Coyier), автор CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код. В своей статье он показывает пример, который представлен в трех вариантах:

1. PNG-скриншот;
2. оригинал в PSD-формате;
3. текстовый вариант.

Ниже я хочу привести свой свободный перевод комментариев к скриншоту (читай — рекомендации по написанию HTML-кода):

1. HTML5 — веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.
2. DOCTYPE (тип документа) — HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.
3. Indentation (отступы) — в коде используются отступы (через табуляторы или пробелы), это помогает проследить иерархию кода, т.е. увидеть структуру родительских и дочерних тегов.
4. Charset (кодировка) — указывается до какого-либо содержимого страницы.
5. Title (заголовок) — заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (если это не главная), затем ставится разделитель, и после него идет название сайта.
6. CSS — используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается универсальный файл стилей.
7. Body (тег ) — к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки.
8. JavaScript — jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.
9. File Paths (пути к файлам) — для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы, т.е. использованы в RSS-потоках.
10. Image Attributes (параметры изображений) — изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.
11. Main Content First (главный контент — в самом начале) — главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.
12. Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы) — используются теги , , , , и т.д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег , используемый ранее.
13. Hierarchy (иерархия) — используются теги заголовков … , которые показывают иерархию содержимого страницы.
14. Appropriate Descriptive Tags (семантически правильные теги) — списки оформлены в HTML как списки в зависимости от их содержимого: либо нумерованные
    , либо ненумерованные (
    ), либо списки определений ( ).
    1. Common Content Included (подключение повторяемого содержимого) — повторяемые части страниц подключаются на стороне сервера, неважно какой метод, CMS или язык программирования при этом используется.
    2. Semantic Classes (семантические классы) — используются семантически правильные названия классов и идентификаторов, они должны описывать содержимое тега. Например, класс column гораздо лучше, чем left .
    3. Classes (классы) — используются и для любых других элементов, которым необходимо применить такое же оформление.
    4. IDs (идентификаторы) — применяются только к какому-то одному элементу в пределах страницы.
    5. Dynamic Elements (динамические элементы) — элементы, которые должны быть динамическими, являются динамическими.
    6. Characters Encoded (символы закодированы) — если это специальные HTML-символы, то они закодированы.
    7. Free From Styling (независимость от стилей) — контент на странице должен быть доступен независимо от того, применяются к элементу стили или нет (извините, я не совсем понял этот пункт при переводе — прим. Dimox).
    8. Comments (комментарии) — прокомментированы те участки кода, которые при его изучении могут быть не сразу очевидны для понимания.
    9. Valid (валидность) — код должен быть валидным в соответствии со стандартами: теги закрыты, используются обязательные параметры, нет запрещенных элементов и т.д.

    P.S. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.

    Смотрите также

    Комментарии (58)

    Жаль только, что «костыли» для IE портят картину. Насчет , я думаю, тоже не все согласятся.
    А под Free From Styling, наверное, имеется в виду то, что страница будет отображена корректно вне зависимости от того, какие стили подключаются, например, можно же сделать несколько CSS, один для десктопа, один — для мобильных устройств типа iPhone, и при этом HTML менять не придется вовсе.

    1. HTML5.
    2. DOCTYPE
    Можно, но поддержка в браузерах ограничена. Но лично я — только за. 3. Indentation (отступы) — в коде
    Нет. Код должен быть в одну строку. 4. Charset (кодировка) — указывается
    Нет. Чарсет указывается в HTTP-заголовке сервером. 5. Title (заголовок) — заголовок сайта прост и понятен.
    Это да. Причем сначала именно именно название страницы. 6. CSS — используется только один файл стилей
    +100500 Только один файл. 7. Body (тег ) — к нему добавлен идентификатор
    Не обязательно. 8. JavaScript — jQuery
    Не обязательно. Могу поспорить, кто там самый красивый. 9. File Paths (пути к файлам) —
    Полные пути к изображениям. Может быть и так. 10. Image Attributes (параметры изображений) —
    +100500 Маст хэв. 11. Main Content First (главный контент — в самом начале) —
    Да. 12. Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы)
    Можно, но для IE придётся ставить довольно большой костыль. 13. Hierarchy (иерархия) — используются теги заголовков …,
    Да. 14. Appropriate Descriptive Tags (семантически правильные теги)
    Да. 15. Common Content Included (подключение повторяемого содержимого)
    А как иначе-то? Никто, я думаю, не пишет отдельно два (три и т.д.) облака тегов. Оно всегда одно подключается на разных стр. 16. Semantic Classes (семантические классы) —
    Да. Сам пользуюсь недавно, года 3, но не раз оценил удобство при разработке. 17. Classes (классы) —
    Разумеется да. 18. IDs (идентификаторы) — применяются только к какому-то одному элементу
    Разумеется да. Иначе быть не может. Это же ID. А валидность? А javascript? 19. Dynamic Elements (динамические элементы)
    Непонятно, о чем идёт речь. 20. Characters Encoded (символы закодированы) — если это специальные HTML-символы, то они закодированы.
    Бред. В utf-8 все символы можно писать текстом, как они есть, без извращений типа & # x00e4; или & # 0228;. К тому же такие символы не индексируются и занимают больше байт! 🙂 21. Free From Styling (независимость от стилей) —
    Да, сайт должен быть юзабельным с откл. стилями. Меня, к примеру, раздражает тёмный фон и белые буквы, я на таких сайтах сразу отключаю CSS. 22. Comments (комментарии) — закомментированы те участки кода
    Только на стадии разработки. В production use никаких каментов и отступов, всё в одну строку. 23. Valid (валидность) — код должен быть валидным
    +100500 Маст хэв.

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

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

    Источник