Обо всём мне близком и далёком

Лучше скажи мало,
но хорошо. Козьма Прутков

Как я самостоятельно создавал этот сайт.

Принимаясь за дело, соберись с духом. Козьма Прутков

Теги форматирования текста

Первые пробы

Моя самая первая страничка
Несколько тегов форматирования текста
Фон странички
Блок <div>

Знак привлечения внимания Большая часть тегов HTML являются парными. Первый (открывающий) тег указывает, что браузеру нужно неким образом (например, в виде абзаца, таблицы, блока) выделить текст, следующий за этим тегом. Второй тег (закрывающий), который отличается от первого наличием косой черты (/) перед его именем, отмечает конец выделенного фрагмента текста.

Web-браузер, встречая в тексте тег, выделяет в своём окне прямоугольную область для вывода содержания (текста, таблицы, рисунка, фотографии...), заключенного внутри этого тега. Эту прямоугольную область Web-браузер может "украсить" (залив её цветом, нарисовав рамку вокруг неё, изменив размер и цвет шрифта и прочее), если тегам задать стили оформления с помощью инструмента, расширяющего возможности языка HTML, который кратко называется CSS (Cascading Style Sheets - каскадные таблицы стилей).

Я добавил два тега для форматирования содержательной части страницы: тег форматирования заголовка<h1> и тег форматирования абзаца (параграфа) <p> и указал стили style их оформления, и текст моей первой страницы в Notepad++ стал таким:

<html>
    <head>
       <title> Моя первая страница сайта </title>
    </head>
    <body>
       <h1> Вот что я задумал сделать: </h1>
          <p style = "font-style: italic;"> 1. Сначала наверху страницы я помещу красиво оформленное название нашего садоводства (чердак страницы);</p>
          <p style ="background-color: silver; font-weight: bold; text-decoration: underline;"> 2. Ниже горизонтальное меню для перехода на страницы главных разделов сайта;</p>
          <p style ="background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';"> 3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа от вертикального меню само содержание страницы, ради чего она и создавалась;</p>
          <p style ="background-color: silver; width: 250px; color: red;"> 4. Ещё ниже - нижнее меню, и наконец,</p>
          <p style = "background-color: silver; width: 300px; margin-left: 200px; padding: 30px;">5. В самом низу опять же <span style ="font-weight: bold; font-style: italic; color: green;"> красиво </span> оформленный "подвал".</p>
    </body>
</html>

Я сохранил этот текст в том же файле make_site_how.html в папке I make site, в меню Notepad++ выбрал пункт Запуск, а в выпавшем меню пункт Launch in Firefox. И на экране в окне браузера появилась моя первая страничка, изменённая тегами форматирования текста.

Красота! Итак, что я сделал:

Тегу <body> я не задал стиля, и браузер применил параметры по умолчанию: выделил прямоугольную область с белым фоном, совпадающую по размеру с окном браузера, текст выводит чёрным цветом.

Тегом <h1> я выделил заголовок моего текста. Этот тег задаёт самый большой размер шрифта в заголовке, а тег <h6> задаёт самый маленький размер шрифта в заголовке. Тег заголовка находится внутри тега <body>, поэтому тег <body>является родительским по отношению к дочернему тегу заголовка <h1>. Дочерние теги по умолчанию наследуют свойства родителя, поэтому фон прямоугольной области, выделенной под заголовок тоже белый, ширина области совпадает с шириной области, выделенной под тег <body>, шрифт чёрного цвета.

Теги <p> и </p> позволили мне разделить текст на абзацы. Эти теги отделяют абзацы друг от друга пустой строкой.

Весь текст в первом абзаце я захотел сделать курсивным. Поэтому в открывающем теге <p> я указал (определил) стиль шрифта в абзаце, который будет выведен на экран в окне браузера <p style = "font-style: italic;">.

Знак привлечения внимания Выражение после знака равенства, заключённое в кавычки, называется определением стиля. Определение стиля встраивается в любой тег с помощью параметра style. Параметр style могут иметь все теги. Определение стиля содержит как минимум один атрибут и его значение. Атрибут от его значения отделяется двоеточием. Если атрибутов несколько, то после значения атрибута ставится точка с запятой.

Этот первый абзац, заданный тегом <p>, также наследует свойства родителя <body>: ширина области под абзац совпадает с шириной области выделенной под тег <body>, фон области - белый, шрифт чёрный. Но атрибут font-style: italic, заданный в стиле тега <p>, отменяет родительское свойство и браузер для вывода на экран использует стиль заданный в дочернем теге.

Второму абзацу я задал следующий стиль: <p style ="background-color: silver; font-weight: bold; text-decoration: underline;">. Здесь в определении стиля три атрибута: background-color: со значением для фона абзаца silver; (серый), font-weight: его значение для шрифта - bold; (полужирный) и text-decoration: со значением underline; (подчеркнуть текст).

В определении стиля третьего абзаца <p style ="background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';"> четыре атрибута, которые задают фон абзаца background-color: pink; (розовый), поля вокруг текста padding: 30px; величиной в 30px, размер шрифта (15pt) и семейство шрифтов Arial.

В стиле четвёртого абзаца три атрибута: background-color: silver; - фон абзаца серый, width: 250px; - ширина абзаца 250px, и color: red; - цвет текста красный. Вместо названия цвета можно задать любой цвет цифрами в шестнадцатеричном коде. Для каждой составляющей цвета (красного, зелёного и синего) задаётся значение в пределах от 00 до FF. Эти значения объединяем в одно число и перед ним ставим символ "#". Красному цвету соответствует число #FF0000.

Пятому абзацу я дал стиль: фон абзаца - background-color: silver;, ширина абзаца - width: 300px;, расстояние от левой границы области, выделенной под родительский тег <body> до левой границы прямоугольной области, выделенной под абзац - margin-left: 200px; 200px, поля вокруг текста в абзаце - padding: 30px; 30px. Кроме того, задав стиль тегу <span> я выделил жирным шрифтом, курсивом и зелёным цветом только одно слово: "красиво" - <span style ="font-weight: bold; font-style: italic; color: green;"> (а можно выделить даже одну букву!).

Фон страницы.

Сайт основан в августе 2012 - 2024 г. © Все права на материалы сайта принадлежат Правлению садоводческого некоммерческого товарищества «Садовое».
Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
Плагиат не преследуется!