Три «слоя» веб-дизайна: структурный слой, слой представления, слой поведения.
Современный веб-дизайн можно представить как состоящий из 3 разных «слоев».
Документ с разметкой (X)HTML является структурным слоем. Он создаёт основу, на которой могут формироваться остальные слои.
После создания структуры документа, Вы можете добавлять информацию из таблицы стилей CSS, чтобы управлять дизайном содержимого. Это называют слоем представления.
И третий слой поведения подключает сценарии JavaScript, которые придают странице интерактивность.
1 899 0
Быстрое знакомство с HTML-разметкой.

Как функционирует HTML-код и как с ним обращаются браузеры.

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

Во-первых, вы заметите, что текст внутри скобок (например, ) не отображается на странице в браузере. Показано только содержимое элемента, а разметка скрыта. Теги указывают на имя HTML- элемента — обычно сокращенное, такое как h1 для heading level 1 (заголовок 1 уровня) или em для emphasized text (акцентированный текст).
823 0
Допустимые в веб-строительстве имена файлов.

Присваивая имена файлам, придерживайтесь следующих правил и соглашений:
1. Используйте соответствующие суффиксы. Файлы HTML должны заканчиваться расширением .html (некоторые серверы допускают использование расширения .htm). Файлы с расширением .php, .cgi, .xml, .tpl пока не для нас.
2. Графические файлы для веб-страниц должны быть помечены в соответствии со своим форматом: .jpg, .gif или .png, (старый формат .jpeg также приемлем).
3. Никогда не используйте пробелы в именах файлов. Чтобы визуально отделить слова, используйте символ подчеркивания или тире. Например, sakov_biografija.html или sakov-biografija.html.
Кстати, мои наблюдения: поисковые системы лучше и быстрее цитируют...
6 221 0
Требования к верстке сайта. Макеты, таблицы, страницы.

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

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

2. Верстка должна точно соответствовать дизайн-макету.
645 0
Трудный ручной путь верстки HTML-кода.

Имеет право жить метод обучения разметке HTML-документов — по старинке, вручную. Это, пожалуй, лучший способ по-настоящему понять, как работает разметка, набивая её собственными руками, по одному тегу за раз, а затем открыть страницу в браузере. Чтобы развить умение правильной разметки документа, не требуется много времени.
753 0
Базовая структура документа HTML5. Упрощенный каркас страницы.

Ниже показан рекомендуемый упрощенный каркас документа на языке HTML5.

<!DOCTYPE html>
<html>

<head>
<meta charset="windows-1251">
<title>Название темы страницы</title>
</head>

<body>
Содержимое страницы - контент.
</body>

</html>


Я говорю «рекомендуемый» потому, что единственным обязательным элементом в HTML является тег title. Я рекомендую, особенно новичкам, четко организовать документы с помощью надлежащей структурной разметки. И если вы верстаете страницы, используя XHTML, все перечисленные ниже элементы, кроме тега meta, обязательно должны присутствовать, чтобы код был верным. Разберём вышеуказанный код страницы.
675 0
Анатомия веб-страницы.

Мы все знакомы с тем, как веб-страницы выглядят в окне браузера, но что происходит «за кадром»?
На рисунках при полном просмотре публикации вы увидите, как простая веб-страница отображается в браузере и как выглядит её код. Хотя веб-страницу можно рассматривать как единый документ, фактически она состоит из отдельных файлов: HTML-документа (страница.html), таблицы стилей (style.css) и разных изображений типа imade.jpg и image2.png. Всеми компонентами управляет HTML-документ.