Как создать свой сайт? HTML4 и CSS2

Урок 1. Web-страница с изображениями и текстом

Прежде, чем приступить к изучению, скачайте необходимые материалы здесь.

В ходе изучения двух технологий HTML 4 и CSS 2 Вы создадите небольшой сайт под названием MyHouse.ru. Ниже приведены основные страницы сайта.

Уроки HTML и CSS

Уроки HTML и CSS

Уроки HTML и CSS

После изучения урока 1 Вы уже научитесь создавать полноценную web-страничку, как на рисунке 1.1.

Уроки HTML и CSS

Рисунок 1.1

1. Структура html-документа

Файлы html имеют расширение .htm или .html.
Содержат один тип управляющих конструкций - теги (tags) - также их называют "дескрипторы". Все теги заключены в угловые скобки < >.

Обычно теги парные: начальный и конечный теги. Начальный - < > , конечный </>. Парный тег называют еще контейнерный. Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный.

Структура html-документа выглядит следующим образом (рисунок 1.2).

Уроки HTML и CSS

Рисунок 1.2

Пояснения к листингу на рисунке 1.2

В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы. Более подробно мы к нему вернемся позже.

Весь HTML-документ заключен между парным тегом <html> и </html>. Это обязательный тег. Между тегами <head> и </head>> содержится заголовочная часть. В нее входит конструкция <title> и </title>. Это название при загрузке документа появляется в строке заголовка браузера (рисунок 1.3).

Уроки HTML и CSS

Рисунок 1.3

Запись <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> означает кодировку кириллицы, чтобы русские буквы корректно отображались в браузере. Если кодировку не прописывать, русские шрифты иногда могут отображаться следующим образом (рисунок 1.4)

Уроки HTML и CSS

Рисунок 1.4

Та же страничка после вставки кодировки (рисунок 1.5)

Уроки HTML и CSS

Рисунок 1.5

Для создания первого документа этой информации достаточно.

Практическое задание 1

  1. Создайте папку, назовите ее myhouse. Будет правильно и профессионально, если имена всех папок и файлов Вы будете создавать латинскими строчными буквами. Задавайте имена короткими и смысловыми.
  2. Наберите в Блокноте текст из листинга на рисунке 1.2. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более "продвинутым", например Notepad++ (скачать Notepad++ можно здесь). Код в листинге на рисунке 1.2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа. Конструкцию DOCTYPE скопируйте отсюда <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. Сохраните файл под именем shablon.html в папке myhouse, при этом в поле Тип файла установите All types (рисунок 1.6), иначе Ваша web-страничка потом не откроется в браузере.

    Уроки HTML и CSS

    Рисунок 1.6

  4. После сохранения запустите shablon.html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 1.7).

    Уроки HTML и CSS

    Рисунок 1.7

    Если у Вас не получился результат, как на рисунке выше, значит в коде скорей всего есть ошибка. Достатjчно одного неверного символа и web-страница не будет отображаться корректно. Еще раз сверьте код с листингом на рисунке 1.2. Также Вы можете скачать листинг (файл shablon.html) здесь.

  5. Внутри папки myhouse создайте папку public_html. Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).
  6. Сохраните файл shablon.html в папке public_html под новым именем main.html.
  7. Из папки CD/ html_css_1 откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main.html
  8. Скопируйте весь текст из файла text_main.txt и вставьте в файл main.html вместо фразы «Содержимое web-страницы». В теге <title> напишите слово «Главная». Вот так <title>Главная</title>.
  9. Сохраните изменения и просмотрите файл main.html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 1.8).

    Уроки HTML и CSS

    Рисунок 1.8

2. Форматирование web-страницы тегами HTML

Теги предназначены для форматирования текста web-страницы. Список тегов более подробно можно посмотреть в папке CD/Справочник HTML в справочнике html401_ru.chm (в верхнем меню пункт элементы).

Рассмотрим некоторые из тегов.

Элементы h1, h2, h3, h4, h5, h6

Структурирование тела документа выполняется внутри элемента <body> с помощью заголовков, задаваемых элементами h1, h2, h3, h4, h5, h6.

Элементы заголовков являются парными, поэтому должны имеет открывающий <h1> и закрывающий </h1> теги.

HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.

Действие этих шести тегов представлено на рисунках ниже. На одном рисунке исходный код (рисунок 1.9), на другом - вид в браузере (рисунок 1.10).

Листинг 2

Уроки HTML и CSS

Рисунок 1.9

Уроки HTML и CSS

Рисунок 1.10

Разделение текста на абзацы

Тег <p> задает начало абзаца и вставляет сверху абзаца расстояние - отступ для отделения этого абзаца от предыдущего. Парный тег можно опустить.

Принудительный разрыв строки

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

Практическое задание 2

  1. Отформатируйте заголовок "Каталог архитектурных проектов" с помощью тегов <h1> и </h1>.
  2. Отформатируйте заголовок "Проекты домов для Вашего будущего дома" с помощью тегов <h2> и </h2>.
  3. Отформатируйте заголовки "Проекты домов" и "Площади домов" с помощью тегов <h3> и </h3>.
  4. Основной текст разделите на абзацы с помощью тега <p>. Внутри первых двух абзацев используйте тег <br> для переноса строки. В результате Ваш код должен выглядеть следующим образом (рисунок 1.11).

    Уроки HTML и CSS

    Рисунок 1.11

  5. Просмотрите результат в браузере.

Маркированные и нумерованные списки

Средствами HTML можно создавать любые списки: нумерованные (цифровые и буквенные) и маркированные с разными типами маркеров.

Тег <ul>…</ul> формирует маркированный список.

Тег <ol>…</ol> формирует нумерованный список.

Отдельный элемент списка как в <ul>, так и в <ol> формируется с помощью тега <li> (непарный тег).

Практическое задание 3

  1. Создайте нумерованный список под заголовком "Проекты домов".
  2. Создайте маркированный список под заголовком "Площади домов". Ваш код будет выглядеть следующим образом (рисунок 1.12).

    Уроки HTML и CSS

    Рисунок 1.12

  3. Просмотрите страницу в браузере.

Списки можно вкладывать друг в друга, используя при этом различные маркеры.

Пример вложенного списка приведен на рис. 1.13

Практическое задание 4

  1. Реализуйте в новом файле код, приведенный на рисунке 1.13.
  2. Сохраните файл в папке myhouse под именем spisok_vlozh.html. Результат на рис. 1.13

Уроки HTML и CSS

Рисунок 1.13

Начертания шрифтов

Тег <b>…</b> - позволяет отобразить текст полужирным шрифтом.
Тег <i>…</i> - позволяет отобразить текст в курсивном начертании.
Тег <u>…</u> - отображает подчеркнутый текст.

Например:
В этом случае текст будет отображен <b><i>жирным курсивом</i></b>, но не подчеркнутым.
А в этом случае текст будет написан
<b><i><u>жирным подчеркнутым курсивом</u></i></b>.

Нижние и верхние индексы
Тег <sub> и </sub> позволяет опустить текст на полстроки ниже обычного текста.
Вот так нижний индекмс

Тег <sup> и </sup> позволяет поднять текст на полстроки выше обычного текста.
Вот так верхнийиндекс
Текст в индексе будет изображаться меньшим шрифтом, по сравнению с обычным текстом.

Практическое задание 5

  1. Отформатируйте в первом абзаце название myhouse.ru полужирным шрифтом (рисунок 1.14).

    Уроки HTML и CSS

    Рисунок 1.14

  2. Отформатируйте во втором абзаце фразу "Более 95% проектов" подчеркнутым курсивом (рисунок 1.15).

    Уроки HTML и CSS

    Рисунок 1.15

  3. Отформатируйте верхние индексы в тех местах, где используются квадратные метры (рисунок 1.16).

    Уроки HTML и CSS

    Рисунок 1.16

  4. Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 1.17).

    Уроки HTML и CSS

    Рисунок 1.17

3. Вставка изображений

Для вставки изображений используется тег <img>. Обязательным для этого тега является атрибут src (от английского SouRCe - источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.

Для вставки изображения используется команда <img src="Имя файла">

Например: <img src="image1.jpg" alt="Картинка">

Атрибут alt необходим для того, чтобы при просмотре web-страницы в режиме отключенных изображений, вместо отсутствующей картинки была надпись, которая прописана в атрибуте alt. Также alt-тексты рекомендуется использовать всегда, т.к. поисковые машины анализируют их как ключевые слова при поиске изображений.

Графические файлы могут быть в формате jpg, gif, png.

Практическое задание 6

  1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project_1.jpg и project_2.jpg из папки CD/ html_css_1. Код вставки изображений будет выглядеть следующим образом (рисунок 1.18).

    Уроки HTML и CSS

    Рисунок 1.18

  2. Просмотрите результат в браузере (рисунок 1.19).

Уроки HTML и CSS

Рисунок 1.19

В основном принцип использования тегов HTML должен быть понятен. Они используются по одному и тому же принципу: если тег контейнерный, то есть открывающий и закрывающий тег. Если тег одиночный, то закрывающего тега нет. Является ли тег контейнерным или одиночным Вы всегда можете посмотреть в спецификации html401_ru.chm в разделе элементы.

4. Адресация внутри сайта

Рассмотрим варианты адресации, когда в html-файле надо разместить изображения, которые могут находиться в разных папках сайта.

Существует два вида адресации:

Абсолютная адресация (с использованием названий дисков компьютера) не используется (рисунок 1.20)

Уроки HTML и CSS

Рисунок 1.20

Используется относительная адресация - адресация в пределах документа или совокупности документов на одном сервере. Чтобы сослаться на файл внутри сайта, нужно указать браузеру, какой путь он должен проделать, что бы прийти к нужному файлу.

Пример 1

Изображение расположено в одной папке с HTML-документом. То есть изображение и HTML-файл находятся на одном уровне в файловой системе и HTML-документ может сразу присоединить изображение. В этом случае вставка изображения в web-страницу будет выглядеть следующим образом.

<img src="pic.jpg">

Уроки HTML и CSS

Рисунок 1.21

Практическое задание 7

Реализуйте пример 1 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 2

Изображение pic.jpg находится в папке folder_1. HTML-документ расположен за пределами папки folder_1. Т.е. в файловой системе сайта HTML-документ расположен на один уровень выше, чем изображение (рисунок 1.21). Необходимо войти в папку folder_1, затем присоединить изображение

<img src="folder_1/pic.jpg">

Уроки HTML и CSS

Рисунок 1.22

Практическое задание 8

Реализуйте пример 2 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 3

Изображение pic.jpg находится в папке folder_1, которая в свою очередь лежит в папке folder_2. HTML-документ расположен за пределами этих папок (рисунок 1.22). Таким образом, HTML-документ расположен на два уровня выше, чем изображение. Необходимо:

<img src="folder_2/folder_1/pic.jpg">

Уроки HTML и CSS

Рисунок 1.23

Практическое задание 9

Реализуйте пример 3 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 4

HTML-документ находится в папке folder_1. Изображение находится за пределами папки folder_1. Т.е. HTML-документ расположен на один уровень ниже, чем изображение (рисунок 1.23). Необходимо выйти из папки folder_1, затем присоединить изображение. Выход из папки обозначается конструкцией ../ (две точки и слэш вправо).

<img src="../pic.jpg">

Уроки HTML и CSS

Рисунок 1.24

Практическое задание 10

Реализуйте пример 4 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 5

HTML-документ находится в папке folder_1, которая в свою очередь находится в папке folder_2. Изображение находится за пределами этих папок. Таким образом, HTML-документ расположен на два уровня ниже, чем изображение (рисунок 1.25). Необходимо:

Так как надо выйти два раза, то и конструкция ../ повторяется два раза.

<img src="../../pic.jpg">

Уроки HTML и CSS

Рисунок 1.25

Практическое задание 11

Реализуйте пример 5 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 6 (рисунок 1.26)

Необходимо:

<img src="../../folder_3/folder_4/pic.jpg">

Уроки HTML и CSS

Рисунок 1.26

Практическое задание 12

Реализуйте пример 6 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 7 (рисунок 1.27)

Необходимо:

Так как выйти надо три раза, то и конструкция ../ повторяется три раза.

<img src="../../../folder_4/pic.jpg">

Уроки HTML и CSS

Рисунок 1.27

Практическое задание 13

Реализуйте пример 7 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Таким образом, сколько раз надо выйти, столько раз ставим конструкцию ../, а если заходим, то перечисляем имена встречающихся на пути папок

Практическое задание 14

  1. Создайте html-документ и вставьте в него изображение, чтобы путь к изображению был следующим.

    <img src="../../../../../../folder_1/folder_2/folder_3/image.jpg">

  2. Разработайте собственный пример вставки изображения в html-документ, чтобы он содержал и выход из папок, и вход в папки. Пример должен отличаться от всех вышеприведенных примеров.

Проверь себя

В результате выполнения урока у Вас должны быть созданы следующеие файлы:

Результаты урока можно скачать здесь.