Технические средства реализации информационных процессов

HTML и CSS

ВЕБ-СТРАНИЦА ШАГ ЗА ШАГОМ

На прошлом занятии мы рассмотрели HTML-документ. Сегодня мы будем поэтапно изучать как создавать веб страницу. В основном имеется пять основных шагов создания веб-страницы.

Шаг 1: Начальное наполнение страницы контентом. В качестве отправной точки мы добавим текстовый контент и посмотрим, что с ним делают браузеры.

Шаг 2: Задание структуры документа. Вы познакомитесь с синтаксисом HTML-элементов и элементами, которые задают структуру документа.

Шаг 3: Определение элементов текста. Вы опишете содержимое, используя соответствующие элементы текста, и узнаете, как правильно применять HTML-элементы.

Шаг 4: Добавление изображений. Добавляя изображение на страницу, вы узнаете об атрибутах и пустых элементах.

Шаг 5: Изменение внешнего вида страницы с помощью CSS. Это упражнение сформирует представление о том, как, используя каскадные таблицы стилей, оформить содержимое страницы.

СТРУКТУРА HTML-ЭЛЕМЕНТА

АБЗАЦЫ

Абзацы (параграфы) - это самые первичные элементы текстового документа. Вы указываете абзац с помощью элемента р, вставляя открывающий тег <р> в начале и закрывающий тег в конце, как показано в следующем примере.

<р>В шрифтах семейства Serif имеются небольшие засечки на концах букв. В общем случае шрифты семейства Serif могут повысить удобочитаемость больших объемов текста.

Заголовки

HTML-элементы 

до

 представляют собой 6 уровней заголовков секций. 

 это наибольший заголовок и

 наименьший.

32 пикселя

24 пикселя

19 пикселя

16 пикселя

13 пикселя

11 пикселя

ГОРИЗОНТАЛЬНАЯ ЛИНИЯ

Тег 

---

 используется в HTML для вывода горизонтальной линии - разделителя. Построенная с помощью тега 

---

 горизонтальная линия в HTML 5 имеет семантический смысл и выступает в роли тематического разделителя.

Некий текст на странице.

---

Текст, который по смыслу отделен от текста выше.

СПИСКИ

Для человека естественно составлять списки, а язык HTML предоставляет элементы для разметки трех типов:

1. Маркированный список. Набор пунктов, очередность которых неважна.

2. Нумерованный список. Перечень, в котором последовательность элементов имеет значение.

3. Список определений. Состоит из пар «имя/значение», в том числе терминов и определений.

МАРКИРОВАННЫЕ СПИСКИ

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

• Coffee
• Tea
• Milk

НУМЕРОВАННЫЕ СПИСКИ

Нумерованные или упорядоченные списки предназначены для элементов, которые следуют в определенном порядке, например пошаговые инструкции. Они функционируют так же, как и описанные ранее маркированные списки, за исключением того, что определены с помощью элемента

.

1. Coffee
2. Tea
3. Milk

СПИСКИ ОПРЕДЕЛЕНИЙ

Списки определений используются для формирования любого типа пар «имя/значение», таких как термины и их значения, вопросы и ответы, прочие виды понятий и связанной с ними информации. Этот формат немного отличается от двух других типов. Весь список размечен с помощью элемента

. Его содержимое - это несколько элементов

, обозначающих имена, и

, обозначающих соответствующие им значения. Ниже представлен пример списка определений

Фотонабор

Гарнитуры шрифтов хранятся на пленке, а затем проецируются на фотобумагу. Линзы регулируют размер печати.

ЦИТАТЫ

Для создания цитат в языке HTML используются два элемента: блочный элемент 

 и строчный элемент . Тег 

 используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.

Элемент  используется для коротких цитат, являющихся частью текущего абзаца. Как правило, браузеры заключают содержимое элемента  в кавычки. Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня.

АТРИБУТЫ

Атрибут align не поддерживается в HTML5. Определяет выравнивание текста в абзаце. Используйте CSS вместо данного атрибута.

Названия атрибутов	Значение
align	left, right, center, justify

<р align = ‘center’>В шрифтах семейства Serif имеются небольшие засечки на концах букв. В общем случае шрифты семейства Serif могут повысить удобочитаемость больших объемов текста.