Основы HTML
Большинство браузеров имеют возможность изучения html-источника страниц, которые вы просматриваете. При просмотре источника вы увидите ряд тегов HTML (языка разметки гипертекста), окруженных угловыми скобками(<>), перемежаемыми с текстом.
Приведенные ниже действия используют HTML-теги для создания простой веб-страницы. В этих шагах вы введете обычный текст в файл в Блокнот, внесите несколько изменений, сохраните файл и перезагрузите страницу в браузере, чтобы увидеть изменения.
Создание HTML-файла
- Откройте Блокнот или любой обычный текстовый редактор.
- В меню «Файл» выберите «Создать«.
- Введите следующие строки:
Top HTML Tags HTML is swell. Life is good. Here's the big picture
- One programmer
- Ten SDKs
- Great Internet Apps
Make me an unordered list.
Это должно приступить к работе. Если на веб-странице отображается отличная функция, вы можете узнать, как она была создана, проверив источник HTML. Редакторы HTML, такие как Веб-страница Майкрософт, можно использовать для создания простых и расширенных страниц.
Вот весь HTML-источник для файла, который вы создали:
Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):
Блочная модель
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля ( padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы ( border ) и завершают блок отступы ( margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.
Рис. 3.2. Матрёшки
На деле ни одно из этих свойств не является обязательным, в том числе и контент, поэтому вы можете формировать любые блоки, содержащие комбинации свойств padding , border и margin или вообще обойтись без них.
Поля
Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей — создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.
Пример 3.1.Использование свойства padding
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Поля
Результат примера показан на рис. 3.3.
Рис. 3.3. Поля вокруг текста
Значения полей не могут быть отрицательными.
Границы
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.
Пример 3.2. Красная пунктирная линия
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Линия P.line
Результат данного примера показан на рис. 3.4.
Рис. 3.4. Линия возле текста
Расстояние от линии до текста регулируется значением padding .
Отступы
Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.
Для отступов характерны следующие особенности.
- Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
- Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
- Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
- Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.
В примере 3.3 показано схлопывание отступов и их прозрачность.
Пример 3.3. Использование отступов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Отступы .layer1, .layer2
Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.
Рис. 3.5. Отступы в элементе
На рисунке хорошо видно, что цвет, задаваемый через свойство background , не выходит за пределы границы элемента и не оказывает влияние на отступы.
Ширина блока
Ширина блока это комплексная величина и складывается из нескольких значений свойств:
- width — ширина контента, т.е. содержимого блока;
- padding-left и padding-right — поле слева и справа от контента;
- border-left и border-right — толщина границы слева и справа;
- margin-left и margin-right — отступ слева и справа.
Как уже упоминалось, какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 3.6 в виде чёрной пунктирной линии.
Рис. 3.6. Ширина блока
Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.
Допустим, для слоя написан следующий стиль.
width: 300px; /* Ширина контента */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */
Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.
Алгоритм блочной модели
Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам — не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.
Табл. 3.1. Поддержка браузерами свойства box-sizing
Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
8.0+
2.0+
7.0+
3.0+
1.0+
Свойство
box-sizing
-webkit-box-sizing
box-sizing
-webkit-box-sizing
-moz-box-sizing
Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).
Пример 3.4. Ширина блока
XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx
Ширина блока Ширина блока 100%
Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.
Вложенные слои
Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.
Пример 3.5. Вложенные слои
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ширина блока .wrap < width: 50%; /* Ширина */ >.wrap div Ширина слоя 100%
Результат данного примера показан на рис. 3.7.
Рис. 3.7. Ширина блока в процентах
Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.
Высота блока
На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента ( height ), полей ( padding ), границ ( border ) и отступов ( margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.
Рис. 3.8. Высота блока
Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока — это максимально доступная ширина контента, а для высоты блока — это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.
Пример 3.6. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота блока Высота слоя 100%
Результат данного примера показан на рис. 3.9.
Рис. 3.9. Высота блока в процентах
Для тега в примере родителем выступает тег , поэтому для него устанавливаем значение height равным 100%. В то же время на действуют те же правила, что и на , поэтому величина в процентах будет вычисляться не от высоты страницы, а от высоты контента. Так что для родителя , которым является тег , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты страницы.
Поскольку на высоту влияет значение полей, границ и отступов, в примере появится вертикальная полоса прокрутки. Избавиться от этого влияния можно теми же методами, что и для ширины, а именно, использовать свойство box-sizing , либо воспользоваться вложенными слоями.
С высотой связана ещё одна особенность — при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).
Рис. 3.10. Превышение размеров блока
Код, приводящий к подобному результату, приведен в примере 3.7.
Пример 3.7. Превышение размеров блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота блока div Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.
Охотничий участок льва может иметь длину и ширину до тридцати километров.
Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).
а. Значение auto
б. Значение hidden
Рис. 11. Использование свойства overflow
Фон
Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.
д. Safari, Chrome
Рис. 12. Отображение фона в браузере
В примере 3.8 показано, как создать код для получения подобной границы.
Пример 3.8. Фон и граница
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.
Оформляем html-страницу и форматируем текст.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза «Привет всем!», она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег следующие атрибуты — bgcolor=»blue» text=»yellow». Здесь bgcolor — атрибут, отвечающий за цвет фона страницы, а blue — его значение (в нашем случае — голубой, но можете сделать и красный — red, и зеленый — green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow — желтый.
Создаем текстовый веб-документ в Блокноте
Что хорошо, что плохо – познается в сравнении. Поэтому, мы сделаем «как неправильно», а затем разберемся «как правильно».
Неграмотный текстовый веб-документ документ
В программе Windows Блокнот напишите любой текст, например, «Мой сайт» (рис. 1).
Рис. 1. Создание в Блокноте текстового документа
Сохраните документ командой Файл-Сохранить Как и дайте этому документу название index.html (рис. 2). При этом задайте Тип файла: Все файлы (это важно) – рис. 2.
Рис. 2. Сохраняем документ на диск
Откройте сохраненный файл с помощью любого браузера и просмотрите на результат (рис. 3).
Рис. 3. Открываем сохраненный файл в браузере
Так создается простейший текстовый веб-документ для Интернет. Но, это будет не по правилам языка HTML, хотя и «как-бы все работает».
Чего не хватает нашему документу, для правильности и грамотности?
Разметка элементов языка HTML сопровождаются специальными скобками: открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. При этом, как правило, документ состоит из двух частей – заголовка и тела:
В заголовке , используя теги , можно прописать название документа.
Текстовая HTML-страница в программе Блокнот
Создадим в Блокноте текстовый файл (*.txt) и сохраним его с расширением *.html. Код документа такой:
Листинг 1. Простейший html — документ
Писать тегb можно в любом регистре (не важно большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху — вниз.
Теперь сохраняем, как это было показано ранее на рис. 2 и смотрим сохраненный файл в браузере (рис. 4):
Рис. 4. Вид в браузере простейшего HTML-документа, созданного в программе Блокнот
Итак, создать одностраничный текстовый веб-документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на *.html. Имя такого файла для главной страницы сайта принято писать, как index.html. Пока наш веб-документ еще не вполне корректен, например, мы пропустили запись . Как уже отмечалось во введении, это сокращение от «document type definition» — описание типа документа. Иначе говоря, DOCTYPE указывает тип документа (веб документ). Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу.
Пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой:
Это основное содержимое страницы.
Здесь тег уже был описан во введении. Так выглядит этот пример в браузере (рис. 5).
Рис. 5. Вид HTML документа с кодировкой символов
Задаем веб-странице русский язык
На рис. 6 показано, как в веб-документе задать русский язык
Рис. 6. Задаем русский язык
Далее рассматриваются основные теги, применимые к тексту документа.
Заголовки
В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:
это самый крупный текст для заголовка.
это самый мелкий текст для заголовка.
Весь текст внутри таких скобок считается заголовком.
Документ с использованием заголовков первого (H1) и второго (H2) уровней:
Заголовок первого уровня
Заголовок второго уровня
Абзацы
Абзац в MS Word – это текст между двумя Enter, то есть, нажали на клавишу Enter написали какой-то текст и снова нажали на клавишу Enter. Так получиться один абзац. При этом каждый абзац начинается с новой «красной» строки.
В HTML абзац создается с помощью тега
таким образом:
Это еще один абзац.
И еще один абзац.
Так код будет выглядеть в браузере (рис. 7):
Рис. 7. Пример текста из трех абзацев
Переход на новую строку
Разрыв строк, наподобие абзаца, можно задать записью вида
(этот тег задает переход на новую строку). При этом задавать закрывающие скобки нет необходимости. Такой одинокий тег часто называют «меткой». Но, если закрывающий тег задан, то это не считается ошибкой. Пример на рис. 8.
Рис. 8. Задано 4 перехода на новую строку
Этот код в браузере смотриться так (рис. 9):
Рис. 9. Два заголовка и четыре абзаца
Выравнивание текста
Выравнивание производится тегом . Можно выравнивать текст по центру, по левому (правому) краю, или по ширине:
текст
текст выровнен по центру.
текст
текст выровнен по левому краю.
текст
текст выровнен по правому краю.
Текст по центру
На рис. 10 приведено, как этот код выглядит в браузере.
Рис. 10. Выравнивание текста по центру и по правому краю
В тегах могут размещаться атрибуты — специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате: . Кавычки могут быть любыми — одинарными или двойными.
Цвет фона и текста
Цвет фона и текста определяется шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного (Red) цвета, вторая — для зеленого (Green), и третья пара — для синего (Blue) цвета. #00 — минимальная насыщенность, #FF — максимальная насыщенность цвета. Пример изменения насыщенности красного цвета показан (поясняется) на рис. 11.
Рис. 11. Насыщенность красного цвета слева #00, а справа — #FF
Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML, которая есть в Интернет (рис. 12). Как видно из таблицы красный цвет r=255, g=0, b=0 можно задать так: написать «red» или написать #FF0000 (максимальная насыщенность красного, и минимальная для остальных цветов). Таким образом, например, чтобы сделать цвет фона страницы серым, можно написать
Эти записи равноценны.
Рис. 12. Таблица для выбора нужного вам цвета
Задание параметров для шрифта
Для изменения параметров шрифта используется запись вида
Эта запись имеет такие дополнительные параметры:
COLOR=»#hhhhhh»
FACE=»имя_шрифта»
– семейство шрифта (arial, verdana, helvetica, sans-serif и другие).
Пример задания параметров для шрифта:
Здесь на сером фоне крупным шрифтом красного цвета и без засечек написаны цифры 12345 (рис. 13).
Рис. 13. Вид кода в браузере
На рис. 14 показан этот код в браузере.
Рис. 14. Пример задания параметров для шрифта
Задавайте размер шрифта в пикселах от 1 до 10 px и сохраняйте результат на диск правильно (рис. 15).
Рис. 15. Так сохраняем веб-документ в Блокноте на диск
Вопросы и задания
- Поясните каждую строчку данного кода:
Простой документ HTML5
Документ предназначен для просмотра в браузере
- Задаем (прказать):
- русский язык
- заголовки
- абзацы
- переход на новую строку
- выравнивание текста
- цвет фона и текста
- параметры для шрифта
- Создайте в Блокноте правильный (грамотный) одностраничный текстовый html-документ про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:
- Фон (BGCOLOR) — серый,
- Шрифт (COLOR) — синий,
- Текст выровнять (ALIGN) по центру,
- Размер шрифта (size) – 9,
- Семейство шрифта, то есть, его гарнитура (face) – ARIAL,
- Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша».
- Какое правильное название имени и расширения для сохраненного веб документа?
- В чем отличие заголовка документа от его названия ( от )?
- Как вы понимаете термин «атрибут текста»?