Добавлен: 18.06.2023
Просмотров: 73
Скачиваний: 2
Происхождение языка HTML начинается с GML, стандарт которого был принят в 80-х годах прошлого века с названием SGML (Standard Generalized Markup Language – стандартный обобщенный язык разметки). Предложенный в 1974 году Чарльзом Голдфарбом, SGML представляет собой метаязык – систему для описания других языков. При всех своих возможностях он слишком сложен для большинства браузеров. Только спецификация SGML занимает свыше 500 страниц. Поэтому на основе SGML был создан HTML – специализированный, гораздо более простой язык. года сообществом WHATWG ведется разработка пятой версии HTML. Теги языка HTML представляют собой служебные слова языка, заключенные в треугольные скобки. Например, многие теги используются парами. Тогда различают открывающий и закрывающий тег. Например, закрывающий тег начинается с косой черты, за которой идет название открывающего тега. Внутри пары обычно располагается информация и другие теги. Поэтому парные теги называют контейнерами.
Так как HTML-документ может представлять собой целый набор файлов, то лучше всего поместить их все в отдельную папку. А файл-запуск назвать стандартным именем “index.html”, известным любому браузеру. После того как документ сохранен, его можно просмотреть в браузере. Браузер «понимает» и исполняет html-код. Через меню «Вид/Источник» можно снова вернуться к Блокноту с html-кодом, внести изменения, сохранить их в файле. Если в HTML коде содержатся ошибки, то браузер просто проигнорирует их и не выдаст Вам или посетителю страницы сообщений об ошибках. Это делает процедуру отладки более трудоемкой. Любой браузер “понимает” язык тегов. Веб-страница – это еще одно название HTML-документа. Оно дается тем документам, которые размещаются в сети Интернет. Набор веб-страниц, объединенных общей темой и гиперсвязями и расположенных на одном сервере, называют сайтом. Как правило, сайт содержит гиперссылки на другие сайты. Огромное множество взаимосвязанных веб-сайтов и составляют Всемирную паутину сети Интернет. Еще одно применение HTML-документы нашли в сфере разработки электронных мультимедийных учебников и обучающих программ. Одними из самых распространенных HTML-редакторов являются: Adobe Dreamweaver, Adobe Brackets.
Рис. 2.1. Пример кода HTML
2.3 CSS – таблицы стилей
Таблицы стилей предназначены в первую очередь для визуального оформления структурных элементов страницы. Структурные же элементы создают все те теги, которые рассматривались ранее. Правда некоторые теги (<FRON>, <B> и т.д.) из рассмотренных использовались для стилевого форматирования элементов, но в версии HTML 4.0 они считаются устаревшими и не рекомендуются для дальнейшего использования на вновь создаваемых страницах.
Каскадные таблицы стилей позволяют задать уже известным тегам авторский стиль оформления. Например, возможно всем заголовкам первого уровня придать зеленый цвет и больший размер или у всех элементов маркированного списка изменить маркер на красивое графическое изображение.
Таким образом, таблицы стилей снимают ограничения старых версий HTML на набор свойств тех или иных структурных элементов документа. Применение CSS начинается с помещения в раздел заголовка HTML-документа следующего тега.
<head>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
</head>
Существует несколько способов определения стиля элемента.
Способ 1. Атрибут style
Стиль задается непосредственно для какого-либо элемента в основном разделе документа с помощью параметра STYLE. Например:
<p style=”font-size: 20px; font-style: italic; color: blue”>
Здесь слово STYLE выступает в роли атрибута тега. Из примера видно, что значение параметра STYLE представляет собой последовательность свойств и их значений, разделенных точкой с запятой. Очередное свойство и его значение в этой последовательности разделяются двоеточием.
Способ 2. Таблица стилей с тегом <style>
Атрибут STYLE в предыдущем способе задает свойства только одного элемента, а с помощью тега <STYLE> можно задать свойства всех одноименных элементом. Контейнер <STYLE> размещается в заголовке <HEAD></HEAD>.
Таблица стилей может состоять из одного или нескольких правил, определяющих внешний вид описываемых элементов. Правило состоит из 2-х частей: селектора и описания.
Стиль для вложенных элементов P B будет использоваться браузером только тогда, когда элемент B окажется внутри элемента P. При этом свойство font-size будет унаследовано от предыдущего описания стиля тега B.
Последняя строка тега STYLE показывает, как можно одно описание свойства применить сразу к нескольким элементам, перечисленным через запятую.
Способ 3. Классы
Предыдущий способ позволяет присвоить любому элементу только один стиль. Иногда удобнее назначать для стилей имена и указывать их вместе с элементами. Такие универсальные стили называют классами.
При желании можно создать любое количество классов, каждый из которых будет иметь свой вариант форматирования для одного элемента.
Способ 4. Селекторы id и контекстные селекторы id
Этим способом можно создавать классы, связанные с нестандартными html-элементами, то есть элементами веб-разработчика.
С атрибутом id тесно связан структурный элемент <DIV> (от англ. Division – часть, раздел). Тег <DIV> не описывает базовых элементов html-документа, таких как заголовок, абзац, список, таблица и т.д. Он предназначен для описания какой-либо структуры, созданной самим дизайнером. Типичным примером такого элемента является навигационная панель имя такой структуре дает тоже разработчик через атрибут id. Таблица стилей используется для придания внешнего вида структурному элементу.
Рис. 2.2. Пример кода CSS
2.4 Эффективность сайта
Необходимо заботиться о читабельности страницы. Веб-дизайнер в процессе верстки постоянно держит перед глазами текст, так что почти выучивает его наизусть; к тому же содержимое текста ему обычно неинтересно, а зачастую и непонятно – Веб-дизайнер по специальности чаще всего является художником. Отсюда и возникают Веб-страницы, переливающиеся всеми цветами радуги, которые очень красиво смотрятся, но которые совершенно невозможно читать.
Не следует делать предположений о каких-либо параметрах экрана, на котором будет отображаться страничка и о браузере посетителя. Необходимо как можно меньше параметров указывать в абсолютных единицах (пикселах), если это не вызвано необходимостью – при другом разрешении экрана это приведет к выходу изображения за границу видимой области или к неполному использованию экранной площади.
Не следует навязывать без необходимости своих установок пользователю – тип, размер и цвет шрифта, а также цвет остальных элементов страницы должны остаться на усмотрение пользователя, чтобы не нарушать привычной ему обстановки и не вызывать проблем адаптации к привычкам. Что касается шрифта – если указать конкретный тип, то это часто приводит к проблемам русификации, если указанный шрифт оказался в другой кодировке или вообще нерусифицированным; конкретный размер затруднит чтение (обычно человек подбирает наиболее удобный для себя размер).
Не стоит делать широких полей слева и справа от текста – если пользователь любит узкий текст, он может сузить окно браузера, а вообще надо максимально полно задействовать экранное пространство.
Не указывать кодировку в тексте (заголовке) HTML-страницы – ее могут конвертировать как серверы, так и сами пользователи в приемлемую для чтения кодировку, а указание на кодировку в тексте HTML-страницы останется неизменным и будет затруднять ее чтение при несоответствии указанной и действительной кодировок.
Не надо использовать картинки там, где можно обойтись без них:
- обычно картинка занимает гораздо больше места, чем текст той же информативности, а значит, замедляется загрузка (по крайней мере старайтесь сделать файл с картинкой поменьше, выбирайте между gif и jpeg);
- картинка-ссылка без бордюра (BORDER=0) не выделяется так явно, как текст-ссылка, а с бордюром выглядит некрасиво;
- размер шрифта пользователь подбирает под свое зрение, расположение текста браузер подгоняет под экран и шрифт пользователя, а картинка всегда имеет фиксированный размер;
- движущаяся картинка забирает ресурсы процессора и отвлекает внимание посетителя от полезной информации;
- на случай, если у пользователя отключена загрузка картинок, картинки должны иметь подписи (ALT=«…»);
- если необходимо опубликовать большую картинку, не надо внедрять ее в информационную страницу – лучше поместить туда уменьшенную копию, а саму страницу загружать по желанию пользователя.
Размер информационных страниц надо подобрать таким, чтобы они загружались за приемлемое время, и чтобы переходы к следующей страницы были не слишком часты. Ориентировочно размер страницы (без учета картинок) для российских линий – 10 KB. Исключения возможны для страниц, составляющих единое целое, если предполагается, что пользователь готов сначала загрузить ее целиком, а потом читать – для них пределом можно считать 100 KB.
Размер и компоновка индексных (навигационных) страниц должны подбираться из предположения, что страница целиком уместится на экране, максимум – на двух экранах. Если это не соблюдается, навигационная страница обязательно должна иметь внутреннюю индексацию.
Не стоит злоупотреблять таблицами, по крайней мере, не делать их большими – таблицы начинают выводиться на экран только после того, как загрузятся целиком, а это создает ощущение медленности загрузки. Таблицы помогают красиво разместить информацию и эффективнее использовать экранное пространство, но не надо загонять все содержимое Веб-страницы в одну таблицу.
Не стоит полагаться на «наглядные» (WYSIWYG) редакторы HTML – именно они дают подавляющее большинство нарушений вышеизложенных принципов и делают страницы нечитабельными. Дело в том, что HTML как раз рассчитан на отображение на произвольном (в разумных пределах) устройстве, а при «наглядном» редактировании создается страница, которая красиво (по крайней мере с точки зрения ее создателя) выглядит на экране редактора, но никак не проверяется вид страницы при других характеристиках экрана: разрешении, количестве цветов, типе и размере шрифта. Часто встречаются такие недочеты в HTML-страницах, подготовленных «наглядными» редакторами:
- явное указание типа и размера шрифта;
- тэги перевода строки (<BR>) в тех местах, где происходил переход на новую строку при отображении в окне редактора – т.е. принудительное разбиение на строки;
- явное указание размеров таблиц в пикселях;
- выравнивание текста по горизонтали с помощью жестких пробелов ( ), а по вертикали – с помощью параграфов (<P>) или переводов строки (<BR>) – это, конечно, вина Веб-дизайнера, но провоцировала его именно «наглядность» редактирования;
- кодирование русского текста в виде &#число;, причем числа немного больше 1000; по-видимому, имеется в виду кодировка UniCode, а если OS не поддерживает UniCode, то пользователь не сможет прочитать страницу.
Помимо того, что «наглядные» редакторы могут сделать страницу, привязанную к характеристикам экрана, они часто внедряют в нее лишние тэги, делая ее гораздо больше (в худшем случае – раза в полтора), чем необходимо.
Нужно делать страницу так, чтобы HTML-текст был читабелен даже без браузера, в исходном виде – это облегчит последующее внесение исправлений и вылавливание ошибок.
Не стоит злоупотреблять фреймами – фрейм иногда облегчает навигацию по сайту, зато отнимает экранную площадь, на которой мог бы разместиться полезный текст. К тому же фрейм не позволяет определить URL страницы, заинтересовавшей посетителя – в строке «Location» всегда отображается URL фрейм-страницы, (и это почти логично – ведь на экране присутствуют несколько страниц; хотя можно было бы отображать URL активного фрейма, но авторы браузеров этого не сделали).
Ссылка со страницы, включенной во фрейм, на страницу другого сайта должна содержать указание загружать ее на полный экран (TARGET=_top), ибо показывать чужую страницу в своем фрейме – дурной тон.
Если дается ссылка на другой сайт, можно внедрить в страницу логотип того сайта или той страницы, с которой он берется; лучше не копировать картинку на свой сайт, а сделать ссылку (<IMG SRC=«…»>) прямо на тот сайт – это экономит место на диске, а если пользователь переходит по ссылке, то браузеру при загрузке той страницы не понадобится грузить ту же картинку из другого места. При тестировании создается впечатление, что локальная картинка грузится гораздо быстрее, чем картинка с того сервера; помните, что это относится только к локальной сети.
Не стоит злоупотреблять новомодными технологиями – Java, JavaScript, ActiveX, фреймами, включением звука: все это может не поддерживаться браузером и машиной посетителя (или может быть отключено), а без какой-либо части эффект от всей композиции окажется утерян.
С помощью программирования на разных языках можно по всякому издеваться над посетителем вплоть до того, что он не сможет уйти со страницы. Помните, что пользователь всегда может перезагрузить компьютер; на такую страницу он, скорее всего, никогда не вернется, а информацию, расположенную на странице, забудет в процессе борьбы с злобной программой.
3 Инструменты для разработки сайта
3.1 Онлайн-конструкторы
Для того, чтобы создать сайт быстро и качественно, можно воспользоваться готовыми конструкторами сайтов, которые рассчитаны на работу неподготовленного человека. Таким образом, этот человек сможет освоить создание сайта совершенно бесплатно и без проблем, оформить свой сайт и в дальнейшем поддерживать его.