HTML-шаблоны
HTML и CSSXSLTJavaScriptИзображенияСофтEtc
В последнее время мне все чаще попадаются сайты, HTML-содержимое которых я бы назвал безликим. Например, встречая конструкции вида <div class=h3></div>, я не могу логически объяснить их появление. Чем не угодил <h3></h3> разработчику?
Да, конечно, при современном уровне развития CSS можно обойтись парочкой тегов. Можно даже устроить конкурс на самый куцый HTML у меня вышло 10 тегов для сайта с полной функциональностью. А раз так, то потребность в них все-таки есть. И существуют спецификации, в которых они перечислены. А их осмысленное использование, как минимум, позволит старым браузерам или устройствам, не умеющим работать с CSS, подать информацию в приемлемом виде. Не многие сайты могут похвастаться версиями оформления для КПК или для людей, имеющих ограничения по здоровью.
А что же это даст разработчикам? Скорее всего, CSS-правила станут более компактными.
Можно еще пофантазировать на счет более интеллектуальных поисковых систем, но это тема для отдельной статьи. Поэтому вернемся к нашим тегам.
Перепробовав множество вариантов использования тех или иных тегов, я выработал устойчивые комбинации, которые позволяют унифицировать создание сайтов и, как следствие, сокращать срок разработки при сохранении уровня качества.
Расскажу о некоторых из них. Начнем с таблиц. Их можно разделить на два типа: макетные и таблицы с данными.
Макетные таблицыИспользуются для графического разнесения информационных блоков.
01 02 03 04 05 06 07 08 09 10 | <table>
<tr valign="top">
<td>
...
</td>
<td align="right">
...
</td>
</tr>
</table> |
01 02 03 04 05 06 07 | <table border="1">
<tr valign="top">
<td>
. |
..
</td>
</tr>
</table>В обоих вариантах нет указания атрибутов cellpadding и cellspacing, эти свойства таблицы можно задать в CSS (для версии без CSS их значения по умолчанию достаточно малы, ими можно пренебречь). Но если все же хочется их задать явно, то можно применять атрибут cellpadding, а вот отличное от нуля значение атрибута cellspacing использовать не стоит (для IE изменить его с помощью CSS не удастся).
Тем не менее, атрибуты align, valign, width
height (последние два только для макетной таблицы) рекомендуется оставить, иначе разбивка в версии без CSS может сильно отличаться от задуманной.Макетная таблица со всеми элементами помечается отдельным классом. Это позволяет создавать версии для отображения на других устройствах вывода (КПК, принтер). Выделение классом внутренних элементов таблицы необходимо для предотвращения появления чрезмерно запутанного кода в CSS.
У таблицы с данными достаточно указать соответствующий класс. Атрибут border нужен для того, чтобы в версии без CSS у пользователя не возникло вопросов о типе данных, представленных этим элементом.
А как же стандарты W3C? Большинство из этих атрибутов deprecated. Но это не значит, что они ошибочны. И я не вижу ничего криминального в их осмысленном использовании, особенно если все эти свойства будут явно заданы в CSS (причем необязательно с теми же значениями).
НавигацияНавигация это, по сути, список ссылок. Поэтому хочется использовать элемент <ul></ul>.
01 02 03 04 05 06 07 08 09 10 11 | <ul>
<li><a href="#">item 1</a></li>
<li>
<a href="#">item 2</a>
<ul>
<li><a href="#">item 2 1</a></li>
<li><b>item 2 2</b></li>
</ul>
</li>
<li><a href="#">item 3</a></li>
</ul> |
Такого HTML-кода чаще всего вполне достаточно для формирования CSS-правил на любой вкус.
Правило замены текущей ссылки на <b></b> позволяет нам использовать этот элемент для оформления, а в версии сайта без CSS выделяет его из списка ссылок.
Списки новостей или статей те же списки. Но с одной маленькой особенностью: у элементов такого списка есть нечто общее, а именно дата. Поэтому предлагается следующая HTML-конструкция:
01 02 03 04 05 06 07 | <dl>
<dt>02.10.05</dt>
<dd>новость 3</dd>
<dd>новость 2</dd>
<dt>01.10.05</dt>
<dd>новость 1</dd>
</dl> |
При необходимости элементам можно добавлять классы: title, summary и т. п.
Текстовые блокиВсе, что можно здесь сказать: не забывайте о наличии в HTML осмысленных текстовых блоков. Используйте их. Элемент параграфа, как минимум, компактнее элемента слоя на 4 символа 😉
От простогоИ в завершении постараюсь выделить основные этапы, на которые я разбиваю верстку.
| 1. | Не смотрим на дизайн, верстаем блоки информации в порядке их логического расположения (шапка, навигация, контент, футер). |
| 2. | Доводим верстку до приемлемого отображения. |
| 3. | Расставляем классы и айдишки (атрибуты class и id), пишем CSS. |
| 4. | Добавляем HTML-элементы, которых не хватает для оформления. |
| 5. | Добиваем CSS. |
| 6. | Делаем версии стилей для печати и КПК. |
В результате получается примерно следующий код (в том или ином виде вы можете найти его в проектах, в которых я принимал участие):
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<head>
<title>О компании «Компания»</title>
<link rel="stylesheet" type="text/css" href="/global/main. |
css" />
<link rel="stylesheet" type="text/css" href="/global/main-handheld.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="/global/main-print.css" media="print" />
</head>
<body>
<div>
<div>
<b>
<img src="/global/logo.gif" alt="Компания" />
</b>
</div>
<div>
<ul>
<li><b>О компании</b></li>
<li><a href="/news/">Новости</a></li>
<li><a href="/search/">Поиск и карта сайта</a></li>
</ul>
</div>
<div>
<h2>О компании</h2>
<p>Это крупнейшая компания.</p>
</div>
<div>
<p>© 2006 Компания</p>
</div>
</div>
</body>
</html>Вариант с использованием таблиц:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <html>
<head>
<title>О компании «Компания»</title>
<link rel="stylesheet" type="text/css" href="/global/main. |
css" />
<link rel="stylesheet" type="text/css" href="/global/main-handheld.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="/global/main-print.css" media="print" />
</head>
<body>
<table>
<tr valign="top">
<td colspan="2">
<b>
<img src="/global/logo.gif" alt="Компания" />
</b>
</td>
</tr>
<tr valign="top">
<td>
<ul>
<li><b>О компании</b></li>
<li><a href="/news/">Новости</a></li>
<li><a href="/search/">Поиск и карта сайта</a></li>
</ul>
</td>
<td>
<h2>О компании</h2>
<p>Это крупнейшая компания.
</p>
</td>
</tr>
<tr valign="top">
<td colspan="2">
<p>© 2006 Компания</p>
</td>
</tr>
</table>
</body>
</html>css — HTML-шаблоны игнорируют подключение таблицы стилей
Изучаю Django. Есть базовый шаблон basic.html в папке templates/bboard/layout:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<link rel='stylesheet' type='text/css' href='{% static "bboard/style.css" %}'>
<title>{% block title %}Главная{% endblock %} - Доска Объявлений</title>
</head>
<body>
<header>
<h2>Объявления</h2>
</header>
<nav>
<a href='{% url "index" %}'>Главная</a>
<a href='{% url "add" %}'>Добавить</a>
{% for rubric in rubrics %}
<a href='{% url "by_rubric" rubric.
pk %}'>{{rubric.name}}</a>
{% endfor %}
</nav>
<section>
{% block content %}
{% endblock %}
</section>
</body>
</html>
pk %}'>{{rubric.name}}</a>
{% endfor %}
</nav>
<section>
{% block content %}
{% endblock %}
</section>
</body>
</html>
От него идет три производных шаблона в папке templates\bboard: 1)index.html
{% extends 'bboard/layout/basic.html' %}
{% block content %}
{% for bb in bbs %}
<div>
<h2>{{bb.title}}</h2>
<p>{{bb.content}}</p>
<p><a href='{% url "by_rubric" bb.rubric.pk %}'>{{bb.rubric.name}}</a></p>
<p>{{bb.published|date:'Y.m.d H:i:s'}}</p>
</div>
{% endfor %}
{% endblock %}
2)by_rubric.html
{% extends 'bboard/layout/basic.html' %}
{% block title %}{{current_rubric.name}}{% endblock %}
{% block content %}
<h2>Объявления</h2>
<h3>Рубрика: {{current_rubric.name}}</h3>
{% for bb in bbs %}
<div>
<h3>{{bb.title}}</h3>
<p>{{bb. content}}</p>
<p><a href='{% url "by_rubric" bb.rubric.pk %}'>{{bb.rubric.name}}</a></p>
<p>{{bb.published|date:'d.m.Y H:i:s'}}</p>
</div>
{% endfor %}
{% endblock %}
content}}</p>
<p><a href='{% url "by_rubric" bb.rubric.pk %}'>{{bb.rubric.name}}</a></p>
<p>{{bb.published|date:'d.m.Y H:i:s'}}</p>
</div>
{% endfor %}
{% endblock %}
3)create.html
{% extends 'bboard/layout/basic.html' %}
{% block title %}Добавление объявления{% endblock %}
{% block content %}
<h2>Добавление объявления</h2>
<div>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type='submit' value='Добавить'>
</form>
</div>
{% endblock %}
В базовом шаблоне есть тег с подключением таблицы стилей: <link rel='stylesheet' type='text/css' href='{% static "bboard/style.css" %}'> . Проблема в том, что это никак не влияет на вид веб-страницы, будто я и не подключал таблицу стилей, шаблон просто его игнорирует.Более того, я даже специально писал тег link с ошибками, но это никак не влияло на результат, будто его просто нет.
Так же я писал шаблон index.html с нуля, без наследования, и вставлял туда тег link, но результата также не было.
Вот код style.css:
header h2 {
font-size: 40pt;
text-transform: uppercase;
text-align: center;
background: url("bg.jpg") left/auto 100% no-repeat;
}
nav {
font-size: 16pt;
width: 150px;
float: left;
}
nav a {
display: block;
margin: 10px 0px;
}
section {
margin-left: 170px;
}
Шаблон таблицы HTML5 | Скоропортящаяся пресса
Хороший дизайнер знает, что таблицы следует использовать не для разметки, а для отображения столбцов и строк данных. HTML позволяет создавать хорошо структурированные, хорошо отформатированные таблицы, но они используются достаточно редко, чтобы сделать запоминание всех различных элементов и атрибутов довольно трудоемким и утомительным. Итак, чтобы упростить задачу, вот чистый HTML 5 шаблон для ускорения разработки вашего следующего проекта.
.
Связанный: Начальный шаблон HTML5 и базовые шаблоны HTML-документов.
- Обновление , 9 июня: Вот абсолютно базовый ванильный шаблон для любого языка разметки.
- Обновление , 9 июня: Вот лучший шаблон для HTML 5. Для HTML 4.01 или любого другого XHTML -flavor используйте следующий шаблон:
<таблица dir="ltr" border="1" summary="назначение/структура речевого вывода">Здесь мы назначаем заголовок ячейкам установив атрибут области действия. Имя Сторона Роль <тело> Дарт Вейдер Темный Ситх Оби-Ван Кеноби Свет Джедай Гридо Юг Отморозок
Ааа, у меня мурашки по коже от одного взгляда на это.
Этот код можно использовать с любым языком разметки, будь то HTML 5, HTML 4.1 или любой вариант XHTML . Вот как этот базовый шаблон выглядит на текущей веб-странице 1 (с использованием других данных и с удаленными стилями):
| Язык | Акроним | Назначение |
|---|---|---|
| Каскадные таблицы стилей | УСБ | Презентация |
| Язык гипертекстовой разметки | HTML | Структура |
| JavaScript | ДЖС | Поведение |
Обратите внимание, что в этой разметке таблицы с 3 столбцами и 3 строками для установки заголовков столбцов используется атрибут Scope .
Вы также можете использовать атрибут заголовков следующим образом:
| Имя | Сторона | Роль | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Гридо | Юг | Подонок |
). Также включены все три формата значения ширины: пиксели, проценты и относительная через п* . Удобно, когда все в одном месте и готово к работе. Хорошие времена 🙂Чистые, точные, хорошо структурированные данные Любой может ввести несколько Сообщите мне, можно ли что-нибудь улучшить с помощью этого шаблона таблицы. Я был бы рад опубликовать дополнительные примеры, если они вообще полезны. Благодаря вкладу Рича Кларка, вот лучший шаблон для использования специально для HTML 5: Обратите внимание, насколько стало чище после удаления всех атрибутов. Потому что иногда это все, что вам нужно. Спасибо Елене за идею. Благодаря удивительным возможностям CSS3 даже самую простую таблицу можно превратить в блестящее произведение искусства, отображающее данные максимально четко и лаконично. Nice 🙂 ссылка на разметку кода Об авторе Джефф Старр = веб-разработчик. Если есть только одна вещь, которую вы должны знать о кодировании электронной почты, так это то, что таблицы правят днем. Забудьте эту старую чушь о «разделении структуры, представления и поведения», которой вы научились в веб-дизайне, основанном на стандартах. В отличие от современного веб-дизайна элемент Для более точного управления HTML попробуйте вложить Есть веская причина; вы должны предоставить таблицу, которая будет служить избыточным элементом , так как некоторые почтовые клиенты удаляют этот элемент при отображении электронной почты. Текущие рекомендации диктуют, что электронные письма должны иметь ширину около 600 пикселей , и мы обнаружили, что 800 пикселей — это рабочий верхний предел. Многие почтовые клиенты теперь имеют окна «предварительного просмотра», в которых электронное письмо отображается без необходимости для пользователя «открывать» его по-настоящему. К сожалению, эти окна предварительного просмотра, как правило, довольно маленькие. Этот диапазон 600–800 пикселей хорошо вписывается в эти крошечные окна. Хотя большая часть стилей в HTML, основанном на стандартах, выполняется с помощью CSS, бывают случаи, когда стилизация с помощью HTML-атрибутов работает лучше для электронной почты. Атрибуты выше, border , cellpadding , Cellspacing , width , align и valign поддерживаются во всех почтовых клиентах, что делает их идеальными для настроить некоторые базовые стили, прежде чем вы начнете CSS. Только потому, что вы вынуждены писать код, лучше подходящий для сети 1998 не значит, что все плохо. Каким бы архаичным ни было использование таблиц для создания электронной почты, новые методы, такие как адаптивный веб-дизайн, находят свое применение в электронной почте в формате HTML. При написании кода старайтесь, чтобы каждое электронное письмо было отзывчивым; вы можете сделать это, установив только одну фиксированную ширину в электронном письме: |
Например, 
Вот еще несколько ресурсов по скоропортящейся прессе, которые могут помочь вам в разметке:
Что ж, у нас все еще есть 
Специалист по безопасности. WordPress Бафф.
dtd">
<голова>
<название>
<стиль>
<тело>
Вторая таблица — emailContainer , в данном случае — это место, где вы можете установить эту ширину:
Поскольку некоторые крупные почтовые клиенты работают на устаревших механизмах рендеринга, они, как правило, лучше понимают атрибуты: