Шаг 1. Основные понятия
Чтобы разговаривать на одном языке, а также для лучшего понимания темы, вначале следует обговорить термины, которые будут использоваться в тексте. Этот шаг при желании можно пропустить, а затем вернуться к нему еще раз, если вы встречаете слово, которое вам не понятно.
ВЯ нецензурно выразился,а система автоматически заблокировала.-страница
ВЯ нецензурно выразился,а система автоматически заблокировала.-страницей называется сетевой документ, открываемый в браузере. Обычно вЯ нецензурно выразился,а система автоматически заблокировала.-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, вЯ нецензурно выразился,а система автоматически заблокировала.-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.
Сайт (интернет-ресурс)
Cайт — это набор отдельных вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, которые связаны между собой ссылками и единым оформлением.
HTML (HyperText Markup Language, язык разметки гипертекста)
HTML — это система верстки вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.
HTML-документ
Обычный текстовый файл, который может содержать в сЯ нецензурно выразился,а система автоматически заблокировала.е текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
Браузер
Браузером называется программа для просмотра вЯ нецензурно выразился,а система автоматически заблокировала.-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создание ссылок на другие вЯ нецензурно выразился,а система автоматически заблокировала.-страницы и т.д.
Наиболее популярны следующие браузеры: Internet Explorer, Firefox, Mozilla, Netscape, Opera.
Тег
Тег — это специальный символ разметки, который применяется для вставки различных элементов на вЯ нецензурно выразился,а система автоматически заблокировала.-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Контейнер
Контейнером называется парный тег, внутри которого могут располагаться другие теги. Контейнер трЯ нецензурно выразился,а система автоматически заблокировала.ует закрывающего тега, обозначаемого </тег>. Таким образом, контейнер состоит из открывающего тега (<тег>) и закрывающего (</тег>).
Ссылки (гиперссылки)
Ссылки являются основой сетевых документов и позволяют переходить с одной вЯ нецензурно выразился,а система автоматически заблокировала.-страницы на другую. Особенность их состоит в том, что сама ссылка может указывать не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.
CSS (Cascading Style Sheets, каскадные таблицы стилей)
CSS или стили — это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым, позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу.
Редактор вЯ нецензурно выразился,а система автоматически заблокировала.-страниц
Хотя HTML-документ представляет собой обычный текстовый файл и его можно править в любом текстовом редакторе, для этой цели лучше использовать специализированные программы, которые называются редакторами вЯ нецензурно выразился,а система автоматически заблокировала.-страниц. Такие программы по своему подходу делятся на WYSIWYG-редакторы и HTML-редакторы.
WYSIWYG (What You See Is What You Get; Что видишь, то и получишь)
Визуальный редактор, в котором элементы отображаются так, как они впоследствии будут показаны в браузере.
HTML-редактор
Редактор, предназначенный для добавления и изменения кода HTML. В отличие от обычных текстовых редакторов здесь существует подсветка синтаксиса, проверка правильности кода, удобное добавление и редактирование параметров тегов, и многое другое.
Кодировка
Чтобы русскоязычные символы корректно отображались в браузере, их необходимо указывать в определенной кодировке. Браузер понимает, какая кодировка используется в документе, если определенным образом настроен вЯ нецензурно выразился,а система автоматически заблокировала.-сервер или внутри вЯ нецензурно выразился,а система автоматически заблокировала.-страницы добавлен соответствующий параметр.
ВЯ нецензурно выразился,а система автоматически заблокировала.-сервер
ВЯ нецензурно выразился,а система автоматически заблокировала.-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными вЯ нецензурно выразился,а система автоматически заблокировала.-серверами являются Apache и Internet Information Server (IIS).
Шаг 2. Создание HTML-документа
Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания вЯ нецензурно выразился,а система автоматически заблокировала.-страницы подойдет любой текстовый редактор, например «Блокнот» (Notepad), который входит в комплект Windows. Большинство авторов так и советуют — используйте Блокнот, говорят они и точка. Но мы заявляем — забудьте об этой программе, она не предназначена для создания и редактирования HTML-кода. Существует целый класс HTML-редакторов специально «заточенных» для создания отдельных вЯ нецензурно выразился,а система автоматически заблокировала.-страниц и сайтов целиком. Если ваша цель — написание нЯ нецензурно выразился,а система автоматически заблокировала.ольшого HTML-кода, то разницы нет, в каком редакторе его писать. Но если вы хотите серьезно и эффективно подойти к созданию сайта, воспользуйтесь редакторами, которые помогут вам в этом. «Эффективно» в данном случае означает достижение трЯ нецензурно выразился,а система автоматически заблокировала.уемого результата с наименьшими затратами. Сюда входит время, затраченное на написание корректного кода, исправление ошибок, тестирование и т.д.
Далее все манипуляции с HTML будем производить в HTML-редакторе Nvu. Его достоинства следующие.
Эта программа бесплатная для использования, скачать последнюю версию можно с сайта http://nvu.mozilla.ru.
Программа грамотно русифицирована, также имеется справка и документация на русском языке.
Это визуальный редактор, работа в нем напоминает работу в текстовом редакторе, и результат виден сразу же, как он будет отображаться в окне браузера.
Можно переключаться между несколькими режимами редактирования – визуальным, кодом HTML и режимом отображения тегов.
Встроенный менеджер сайта дает возможность управлять множеством HTML-документов и отслеживать их изменения.
Легко добавлять и менять популярные элементы вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, такие как: формы, таблицы, изображения.
Работа с шаблонами позволяет модифицировать дизайн в одном месте, в то время как он автоматически применяется к множеству документов.
Nvu построена на открытом коде. Это означает динамичное развитие программы, добавление новых возможностей, появление тем и расширений.
Имеется мощный встроенный редактор CSS с предварительным просмотром результата.
Есть возможность использования стилей вместо параметров тегов.
Код HTML и CSS формируется в соответствии с существующими стандартами и спецификациями.
После запуска программы минимальный первоначальный код будет создан автоматически. На рис. 2.1 показан вид программы Nvu в режиме редактирования HTML-кода.
Поскольку первоначально документ не содержит в сЯ нецензурно выразился,а система автоматически заблокировала.е нашего текста, а только служЯ нецензурно выразился,а система автоматически заблокировала.ную информацию, текст перед просмотром результата следует добавить. Для этого используется место между тегами <body> и </body>. В примере 2.1 показан код после того, как в него вставлен подходящий текст.
Пример 2.1. Код HTML с текстом
Флоринда Доннер, "Сон ведьмы"
</body>
</html>
Теперь надо сохранить файл в определенном месте, чтобы мы его могли просмотреть в браузере. Хотя в Nvu и встроен предварительный просмотр результата, он предназначен лишь для предварительной оценки результата, ведь пользователи будут смотреть нашу вЯ нецензурно выразился,а система автоматически заблокировала.-страницу именно в браузере.
Нажимаем на кнопку Сохранить () на панели инструментов Nvu или используем комбинацию клавиш <Ctrl>+<S>. После чего появляется окно, где просят ввести заголовок страницы. Это текст, который будет отображаться в заголовке окна браузера. В коде HTML заголовок указывается между тегами <title> и </title>, но поскольку мы ничего там не указали, Nvu автоматически запрашивает нужный текст (рис. 2.2).
Теперь осталось только указать место, куда сохранить наш файл (например, C:\www\) и задать его имя. По умолчанию имя файла совпадает с введенным заголовком, но можно указать любое другое подходящее. Заметьте, что расширение у файла должно быть html, именно по нему операционная система определяет, что имеет дело с HTML-документом.
Замечание 1
Хотя файлы можно называть как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При создании сайта и его размещении в Интернете, используйте в именах файлов только латинские символы без пробелов и в нижнем регистре (маленькими буквами, значит).
Замечание 2
Обычно к файлу добавляется расширение html. Вы также можете повстречать расширение и htm. Разницы между такими формами написания нет, однако заметим, что расширение html встречается чаще, его и будем придерживаться в дальнейшем.
Чтобы посмотреть результат в браузере, можно пойти двумя путями.
Перейти в папку, куда мы сохранили наш файл, и щелкнуть по нему. В этом случае откроется браузер установленный по умолчанию и документ в нем будет загружен автоматически.
Запустить браузер самостоятельно и выбрать пункт меню Файл > Открыть (<Ctrl>+<O>), после чего указать путь к файлу. Можно также написать полный путь к файлу в адресной строке браузера.
Смотрим, что получилось (рис. 2.3).
тог выглядит совсем не так, как ожидалось. Переносов строк нет, все отображается сплошным текстом. Чтобы понять, почему это произошло, следует знать особенности HTML.
Шаг 3. Особенности HTML
Прежде чем редактировать код вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
Любое количество пробелов идущих подряд, на вЯ нецензурно выразился,а система автоматически заблокировала.-странице отображается как один
Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. В качестве образца возьмем один текст и напишем его в коде HTML по-разному (пример 3.1).
Пример 3.1. Способы написания текста в коде HTML
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором. </p>
Несмотря на разное написание, отображаться эти строки будут одинаково.
Замечание 1
Исключением из этого правила является тег PRE, внутри которого любое число пробелов отображается именно так, как оно указано в коде.
Замечание 2
Обычно символы табуляции в коде HTML применяются для того, чтобы установить отступ слева, таким образом выровнять теги «лесенкой» и создать «красивый» удобочитаемый код. Помните при этом, что пользователи редко заглядывают в исходный код документа, им это просто не надо, зато каждый символ табуляции или пробела увеличивает ненужный объем файла. А это в итоге влияет на скорость загрузки и отображения документа.
Нет расстановки переносов в тексте
HTML не поддерживает расстановку переносов в словах, как это делают текстовые редакторы. Это условие несущественно, пока не используется выравнивание текста по ширине. В этом случае, блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.
Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон». В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на вЯ нецензурно выразился,а система автоматически заблокировала.-странице подобное слово будет отображаться целиком, без переносов.
Текст занимает ширину окна браузера
Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.
Шаг 4. Структура HTML-кода
Если открыть любую вЯ нецензурно выразился,а система автоматически заблокировала.-страницу, то она будет содержать в сЯ нецензурно выразился,а система автоматически заблокировала.е типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке.
Пример 4.1. Исходный код вЯ нецензурно выразился,а система автоматически заблокировала.-страницы
Далее разберем отдельные строки нашего кода.
01. !DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов !DOCTYPE, они различаются в зависимости от версии HTML, на которую ориентированы (пример 4.2).
Пример 4.2. Допустимые DTD
HTML 3.2 (предыдущая версия HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Строгий HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Переходный HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 при использовании фреймов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML трЯ нецензурно выразился,а система автоматически заблокировала.ует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.
Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить.
Замечание
Часто можно встретить код HTML вообще без использования !DOCTYPE, вЯ нецензурно выразился,а система автоматически заблокировала.-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании !DOCTYPE и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа.
02. Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
03. Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.
04. Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1.
05. Тег <title> определяет заголовок вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.1).
06. Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
07. Тело документа <body> предназначено для размещения тегов и содержательной части.
08. Внутри контейнера <body> могут размещаться практически любые элементы вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, в частности, тег <br>, как показано в примере 4.1, создает перенос строки.
09. Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
10. Последним элементом в коде идет закрывающий тег </html>.
Шаг 5. Теги HTML
Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, и применяются теги. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>
Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри сЯ нецензурно выразился,а система автоматически заблокировала.я другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.
Далее описаны некоторые рекомендации, которые относятся к тегам.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
Для параметров тегов используются значения по умолчанию
Когда для тега не добавлен какой-либо допустимый параметр, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на вЯ нецензурно выразился,а система автоматически заблокировала.-странице, проверьте, возможно, следует явно указать значения некоторых параметров.
Переносы строк
Внутри тега между его параметрами допустимо ставить перенос строк. В примере 5.1 показана одна и та же строка, но оформленная разными способами.
Пример 5.1. Переносы строк в коде тега
<img src="/images/title2.gif" alt="Вид заголовка в браузере Internet Explorer" width="438" height="118">
<img src="/images/title2.gif"
alt="Вид заголовка в браузере Internet Explorer"
width="438"
height="118">
Замечание
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Параметры тегов и кавычки
Согласно спецификации HTML все параметры тегов следует брать в двойные или одинарные кавычки. Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 5.2).
Пример 5.2. Использование кавычек в параметрах тегов
<img src="/images/title2.gif" alt="Вид заголовка" width="438" height="118">
<img src="/images/title2.gif" alt=Вид заголовка width="438" height="118">
В данном примере первая строка написана правильно, со всеми кавычками, а во второй у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово.
Неизвестные теги и параметры
Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет воспроизводить текст так, словно тега и не было.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, метатеги должны находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не трЯ нецензурно выразился,а система автоматически заблокировала.уется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <BR> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Порядок параметров в тегах
Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет.
Шаг 6. Работа с текстом
Для изменения вида текста существует достаточно большое количество различных тегов. Это и немудрено, ведь текст самый популярный вид информации.
Абзацы
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует нЯ нецензурно выразился,а система автоматически заблокировала.ольшой вертикальный отступ, называемый отбивкой.
Синтаксис создания абзацев следующий.
<p>Абзац 1</p>
<p>Абзац 2</p>
Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.
Замечание
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На вЯ нецензурно выразился,а система автоматически заблокировала.-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
На рис. 6.1 показано, как создать новый абзац в программе Nvu. После добавления первого абзаца, остальные будут формироваться автоматически при нажатии на кнопку <Enter>.
В примере 6.1 показано применение абзацев для создания отступов между строк.
Пример 6.1. Использование абзацев
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение абзацев</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель. </p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век... </p>
<p>Во всём - его неспешный ход, его кромешный бег. </p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель. </p>
<p>По двадцать пять недель в туман уходит счёт векам. </p>
<p>Летит мой звонкий балаган куда-то к облакам. </p>
<p><i>М. Щербаков</i></p>
</body>
</html>
Переносы строк
В отличие от абзаца, тег переноса строки <BR> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте. Синтаксис следующий.
Lorem ipsum<br> dolor sit amet...
Замечание
Строка «Lorem ipsum dolor sit amet...» является канонической «рыбой», иными словами это текст, вставляемый на вЯ нецензурно выразился,а система автоматически заблокировала.-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах.
Для создания переноса строки в Nvu, используйте сочетание клавиш <Shift>+<Enter>. Также можно выбрать из списка «Обычный текст» (рис. 6.1) и установить перенос уже клавишей <Enter>.
Заголовки
Заголовки выполняют важную функцию на вЯ нецензурно выразился,а система автоматически заблокировала.-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.
Синтаксис создания заголовков следующий.
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
Как правило, на вЯ нецензурно выразился,а система автоматически заблокировала.-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
На рис. 6.2 показано, как установить трЯ нецензурно выразился,а система автоматически заблокировала.уемый заголовок для текста в редакторе Nvu.
В примере 6.2 показано одновременное применение различных заголовков.
Пример 6.2. Использование заголовков
Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и полужирное начертание. Из-за этого термины «полужирный» и «жирный» слились воедино, поэтому правильно применять то или иное слово для обозначения одного и того же начертания. Синтаксис следующий.
<b>Жирное начертание шрифта</b>
Для создания полужирного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<B>.
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Синтаксис следующий.
<i>Курсивное начертание шрифта</i>
Для создания курсивного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<I>.
Верхний индекс
Воспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис следующий.
<sup>Верхний индекс</sup>
Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Верхний индекс, как показано на рис. 6.3.
Через это же меню можно установить и другие виды начертания текста.
Нижний индекс
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис следующий.
<sub>Нижний индекс</sub>
Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс.
Чтобы разговаривать на одном языке, а также для лучшего понимания темы, вначале следует обговорить термины, которые будут использоваться в тексте. Этот шаг при желании можно пропустить, а затем вернуться к нему еще раз, если вы встречаете слово, которое вам не понятно.
ВЯ нецензурно выразился,а система автоматически заблокировала.-страница
ВЯ нецензурно выразился,а система автоматически заблокировала.-страницей называется сетевой документ, открываемый в браузере. Обычно вЯ нецензурно выразился,а система автоматически заблокировала.-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, вЯ нецензурно выразился,а система автоматически заблокировала.-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.
Сайт (интернет-ресурс)
Cайт — это набор отдельных вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, которые связаны между собой ссылками и единым оформлением.
HTML (HyperText Markup Language, язык разметки гипертекста)
HTML — это система верстки вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.
HTML-документ
Обычный текстовый файл, который может содержать в сЯ нецензурно выразился,а система автоматически заблокировала.е текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
Браузер
Браузером называется программа для просмотра вЯ нецензурно выразился,а система автоматически заблокировала.-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создание ссылок на другие вЯ нецензурно выразился,а система автоматически заблокировала.-страницы и т.д.
Наиболее популярны следующие браузеры: Internet Explorer, Firefox, Mozilla, Netscape, Opera.
Тег
Тег — это специальный символ разметки, который применяется для вставки различных элементов на вЯ нецензурно выразился,а система автоматически заблокировала.-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Контейнер
Контейнером называется парный тег, внутри которого могут располагаться другие теги. Контейнер трЯ нецензурно выразился,а система автоматически заблокировала.ует закрывающего тега, обозначаемого </тег>. Таким образом, контейнер состоит из открывающего тега (<тег>) и закрывающего (</тег>).
Ссылки (гиперссылки)
Ссылки являются основой сетевых документов и позволяют переходить с одной вЯ нецензурно выразился,а система автоматически заблокировала.-страницы на другую. Особенность их состоит в том, что сама ссылка может указывать не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.
CSS (Cascading Style Sheets, каскадные таблицы стилей)
CSS или стили — это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым, позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу.
Редактор вЯ нецензурно выразился,а система автоматически заблокировала.-страниц
Хотя HTML-документ представляет собой обычный текстовый файл и его можно править в любом текстовом редакторе, для этой цели лучше использовать специализированные программы, которые называются редакторами вЯ нецензурно выразился,а система автоматически заблокировала.-страниц. Такие программы по своему подходу делятся на WYSIWYG-редакторы и HTML-редакторы.
WYSIWYG (What You See Is What You Get; Что видишь, то и получишь)
Визуальный редактор, в котором элементы отображаются так, как они впоследствии будут показаны в браузере.
HTML-редактор
Редактор, предназначенный для добавления и изменения кода HTML. В отличие от обычных текстовых редакторов здесь существует подсветка синтаксиса, проверка правильности кода, удобное добавление и редактирование параметров тегов, и многое другое.
Кодировка
Чтобы русскоязычные символы корректно отображались в браузере, их необходимо указывать в определенной кодировке. Браузер понимает, какая кодировка используется в документе, если определенным образом настроен вЯ нецензурно выразился,а система автоматически заблокировала.-сервер или внутри вЯ нецензурно выразился,а система автоматически заблокировала.-страницы добавлен соответствующий параметр.
ВЯ нецензурно выразился,а система автоматически заблокировала.-сервер
ВЯ нецензурно выразился,а система автоматически заблокировала.-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными вЯ нецензурно выразился,а система автоматически заблокировала.-серверами являются Apache и Internet Information Server (IIS).
Шаг 2. Создание HTML-документа
Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания вЯ нецензурно выразился,а система автоматически заблокировала.-страницы подойдет любой текстовый редактор, например «Блокнот» (Notepad), который входит в комплект Windows. Большинство авторов так и советуют — используйте Блокнот, говорят они и точка. Но мы заявляем — забудьте об этой программе, она не предназначена для создания и редактирования HTML-кода. Существует целый класс HTML-редакторов специально «заточенных» для создания отдельных вЯ нецензурно выразился,а система автоматически заблокировала.-страниц и сайтов целиком. Если ваша цель — написание нЯ нецензурно выразился,а система автоматически заблокировала.ольшого HTML-кода, то разницы нет, в каком редакторе его писать. Но если вы хотите серьезно и эффективно подойти к созданию сайта, воспользуйтесь редакторами, которые помогут вам в этом. «Эффективно» в данном случае означает достижение трЯ нецензурно выразился,а система автоматически заблокировала.уемого результата с наименьшими затратами. Сюда входит время, затраченное на написание корректного кода, исправление ошибок, тестирование и т.д.
Далее все манипуляции с HTML будем производить в HTML-редакторе Nvu. Его достоинства следующие.
Эта программа бесплатная для использования, скачать последнюю версию можно с сайта http://nvu.mozilla.ru.
Программа грамотно русифицирована, также имеется справка и документация на русском языке.
Это визуальный редактор, работа в нем напоминает работу в текстовом редакторе, и результат виден сразу же, как он будет отображаться в окне браузера.
Можно переключаться между несколькими режимами редактирования – визуальным, кодом HTML и режимом отображения тегов.
Встроенный менеджер сайта дает возможность управлять множеством HTML-документов и отслеживать их изменения.
Легко добавлять и менять популярные элементы вЯ нецензурно выразился,а система автоматически заблокировала.-страниц, такие как: формы, таблицы, изображения.
Работа с шаблонами позволяет модифицировать дизайн в одном месте, в то время как он автоматически применяется к множеству документов.
Nvu построена на открытом коде. Это означает динамичное развитие программы, добавление новых возможностей, появление тем и расширений.
Имеется мощный встроенный редактор CSS с предварительным просмотром результата.
Есть возможность использования стилей вместо параметров тегов.
Код HTML и CSS формируется в соответствии с существующими стандартами и спецификациями.
После запуска программы минимальный первоначальный код будет создан автоматически. На рис. 2.1 показан вид программы Nvu в режиме редактирования HTML-кода.
Поскольку первоначально документ не содержит в сЯ нецензурно выразился,а система автоматически заблокировала.е нашего текста, а только служЯ нецензурно выразился,а система автоматически заблокировала.ную информацию, текст перед просмотром результата следует добавить. Для этого используется место между тегами <body> и </body>. В примере 2.1 показан код после того, как в него вставлен подходящий текст.
Пример 2.1. Код HTML с текстом
- Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=Windows-1251"
http-equiv="content-type">
<title></title>
</head>
<body>
Флоринда Доннер, "Сон ведьмы"
</body>
</html>
Теперь надо сохранить файл в определенном месте, чтобы мы его могли просмотреть в браузере. Хотя в Nvu и встроен предварительный просмотр результата, он предназначен лишь для предварительной оценки результата, ведь пользователи будут смотреть нашу вЯ нецензурно выразился,а система автоматически заблокировала.-страницу именно в браузере.
Нажимаем на кнопку Сохранить () на панели инструментов Nvu или используем комбинацию клавиш <Ctrl>+<S>. После чего появляется окно, где просят ввести заголовок страницы. Это текст, который будет отображаться в заголовке окна браузера. В коде HTML заголовок указывается между тегами <title> и </title>, но поскольку мы ничего там не указали, Nvu автоматически запрашивает нужный текст (рис. 2.2).
Теперь осталось только указать место, куда сохранить наш файл (например, C:\www\) и задать его имя. По умолчанию имя файла совпадает с введенным заголовком, но можно указать любое другое подходящее. Заметьте, что расширение у файла должно быть html, именно по нему операционная система определяет, что имеет дело с HTML-документом.
Замечание 1
Хотя файлы можно называть как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При создании сайта и его размещении в Интернете, используйте в именах файлов только латинские символы без пробелов и в нижнем регистре (маленькими буквами, значит).
Замечание 2
Обычно к файлу добавляется расширение html. Вы также можете повстречать расширение и htm. Разницы между такими формами написания нет, однако заметим, что расширение html встречается чаще, его и будем придерживаться в дальнейшем.
Чтобы посмотреть результат в браузере, можно пойти двумя путями.
Перейти в папку, куда мы сохранили наш файл, и щелкнуть по нему. В этом случае откроется браузер установленный по умолчанию и документ в нем будет загружен автоматически.
Запустить браузер самостоятельно и выбрать пункт меню Файл > Открыть (<Ctrl>+<O>), после чего указать путь к файлу. Можно также написать полный путь к файлу в адресной строке браузера.
Смотрим, что получилось (рис. 2.3).
тог выглядит совсем не так, как ожидалось. Переносов строк нет, все отображается сплошным текстом. Чтобы понять, почему это произошло, следует знать особенности HTML.
Шаг 3. Особенности HTML
Прежде чем редактировать код вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
Любое количество пробелов идущих подряд, на вЯ нецензурно выразился,а система автоматически заблокировала.-странице отображается как один
Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. В качестве образца возьмем один текст и напишем его в коде HTML по-разному (пример 3.1).
Пример 3.1. Способы написания текста в коде HTML
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором. </p>
Несмотря на разное написание, отображаться эти строки будут одинаково.
Замечание 1
Исключением из этого правила является тег PRE, внутри которого любое число пробелов отображается именно так, как оно указано в коде.
Замечание 2
Обычно символы табуляции в коде HTML применяются для того, чтобы установить отступ слева, таким образом выровнять теги «лесенкой» и создать «красивый» удобочитаемый код. Помните при этом, что пользователи редко заглядывают в исходный код документа, им это просто не надо, зато каждый символ табуляции или пробела увеличивает ненужный объем файла. А это в итоге влияет на скорость загрузки и отображения документа.
Нет расстановки переносов в тексте
HTML не поддерживает расстановку переносов в словах, как это делают текстовые редакторы. Это условие несущественно, пока не используется выравнивание текста по ширине. В этом случае, блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.
Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон». В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на вЯ нецензурно выразился,а система автоматически заблокировала.-странице подобное слово будет отображаться целиком, без переносов.
Текст занимает ширину окна браузера
Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.
Шаг 4. Структура HTML-кода
Если открыть любую вЯ нецензурно выразился,а система автоматически заблокировала.-страницу, то она будет содержать в сЯ нецензурно выразился,а система автоматически заблокировала.е типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке.
Пример 4.1. Исходный код вЯ нецензурно выразился,а система автоматически заблокировала.-страницы
- Код:
01. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02. <html>
03. <head>
04. <meta content="text/html; charset=Windows-1251" http-equiv="content-type">
05. <title>Вторая страница</title>
06. </head>
07. <body>
08. <br>
09. </body>
10. </html>
Далее разберем отдельные строки нашего кода.
01. !DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов !DOCTYPE, они различаются в зависимости от версии HTML, на которую ориентированы (пример 4.2).
Пример 4.2. Допустимые DTD
HTML 3.2 (предыдущая версия HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Строгий HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Переходный HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 при использовании фреймов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML трЯ нецензурно выразился,а система автоматически заблокировала.ует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.
Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить.
Замечание
Часто можно встретить код HTML вообще без использования !DOCTYPE, вЯ нецензурно выразился,а система автоматически заблокировала.-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании !DOCTYPE и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа.
02. Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
03. Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.
04. Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1.
05. Тег <title> определяет заголовок вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.1).
06. Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
07. Тело документа <body> предназначено для размещения тегов и содержательной части.
08. Внутри контейнера <body> могут размещаться практически любые элементы вЯ нецензурно выразился,а система автоматически заблокировала.-страницы, в частности, тег <br>, как показано в примере 4.1, создает перенос строки.
09. Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
10. Последним элементом в коде идет закрывающий тег </html>.
Шаг 5. Теги HTML
Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, и применяются теги. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>
Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри сЯ нецензурно выразился,а система автоматически заблокировала.я другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.
Далее описаны некоторые рекомендации, которые относятся к тегам.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
Для параметров тегов используются значения по умолчанию
Когда для тега не добавлен какой-либо допустимый параметр, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на вЯ нецензурно выразился,а система автоматически заблокировала.-странице, проверьте, возможно, следует явно указать значения некоторых параметров.
Переносы строк
Внутри тега между его параметрами допустимо ставить перенос строк. В примере 5.1 показана одна и та же строка, но оформленная разными способами.
Пример 5.1. Переносы строк в коде тега
<img src="/images/title2.gif" alt="Вид заголовка в браузере Internet Explorer" width="438" height="118">
<img src="/images/title2.gif"
alt="Вид заголовка в браузере Internet Explorer"
width="438"
height="118">
Замечание
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Параметры тегов и кавычки
Согласно спецификации HTML все параметры тегов следует брать в двойные или одинарные кавычки. Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 5.2).
Пример 5.2. Использование кавычек в параметрах тегов
<img src="/images/title2.gif" alt="Вид заголовка" width="438" height="118">
<img src="/images/title2.gif" alt=Вид заголовка width="438" height="118">
В данном примере первая строка написана правильно, со всеми кавычками, а во второй у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово.
Неизвестные теги и параметры
Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет воспроизводить текст так, словно тега и не было.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, метатеги должны находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не трЯ нецензурно выразился,а система автоматически заблокировала.уется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <BR> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Порядок параметров в тегах
Порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет.
Шаг 6. Работа с текстом
Для изменения вида текста существует достаточно большое количество различных тегов. Это и немудрено, ведь текст самый популярный вид информации.
Абзацы
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует нЯ нецензурно выразился,а система автоматически заблокировала.ольшой вертикальный отступ, называемый отбивкой.
Синтаксис создания абзацев следующий.
<p>Абзац 1</p>
<p>Абзац 2</p>
Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.
Замечание
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На вЯ нецензурно выразился,а система автоматически заблокировала.-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
На рис. 6.1 показано, как создать новый абзац в программе Nvu. После добавления первого абзаца, остальные будут формироваться автоматически при нажатии на кнопку <Enter>.
В примере 6.1 показано применение абзацев для создания отступов между строк.
Пример 6.1. Использование абзацев
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение абзацев</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель. </p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век... </p>
<p>Во всём - его неспешный ход, его кромешный бег. </p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель. </p>
<p>По двадцать пять недель в туман уходит счёт векам. </p>
<p>Летит мой звонкий балаган куда-то к облакам. </p>
<p><i>М. Щербаков</i></p>
</body>
</html>
Переносы строк
В отличие от абзаца, тег переноса строки <BR> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте. Синтаксис следующий.
Lorem ipsum<br> dolor sit amet...
Замечание
Строка «Lorem ipsum dolor sit amet...» является канонической «рыбой», иными словами это текст, вставляемый на вЯ нецензурно выразился,а система автоматически заблокировала.-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах.
Для создания переноса строки в Nvu, используйте сочетание клавиш <Shift>+<Enter>. Также можно выбрать из списка «Обычный текст» (рис. 6.1) и установить перенос уже клавишей <Enter>.
Заголовки
Заголовки выполняют важную функцию на вЯ нецензурно выразился,а система автоматически заблокировала.-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.
Синтаксис создания заголовков следующий.
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
Как правило, на вЯ нецензурно выразился,а система автоматически заблокировала.-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
На рис. 6.2 показано, как установить трЯ нецензурно выразился,а система автоматически заблокировала.уемый заголовок для текста в редакторе Nvu.
В примере 6.2 показано одновременное применение различных заголовков.
Пример 6.2. Использование заголовков
- Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение заголовков</title>
</head>
<body>
<h1>Ускорение работы сайта</h1>
<h2>Часть 1</h2>
<p>Ускорение загрузки и сокращение кода вЯ нецензурно выразился,а система автоматически заблокировала.-страниц.</p>
<h2>Часть 2</h2>
<p>Сжатие графических файлов при сохранении их качества.</p>
<h2>Часть 3</h2>
<p>Ускорение запуска и выполнения скриптов на языке JavaScript.</p>
</body>
</html>
Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и полужирное начертание. Из-за этого термины «полужирный» и «жирный» слились воедино, поэтому правильно применять то или иное слово для обозначения одного и того же начертания. Синтаксис следующий.
<b>Жирное начертание шрифта</b>
Для создания полужирного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<B>.
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Синтаксис следующий.
<i>Курсивное начертание шрифта</i>
Для создания курсивного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<I>.
Верхний индекс
Воспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис следующий.
<sup>Верхний индекс</sup>
Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Верхний индекс, как показано на рис. 6.3.
Через это же меню можно установить и другие виды начертания текста.
Нижний индекс
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис следующий.
<sub>Нижний индекс</sub>
Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс.
Последний раз редактировалось: Виженер (Ср Фев 20, 2013 2:52 pm), всего редактировалось 3 раз(а)