- •Лабораторная работа №1 Утилиты для создания web-сайта. Что такое html. Теги. Создаем свой первый сайт.
- •Утилиты для создания web-сайта
- •Это заголовок Это подзаголовок
- •4. Создаем свой первый сайт
- •Лабораторная работа №2 Что мы уже знаем. Ещё немного html-тегов. Атрибуты.
- •1. Что мы уже знаем?
- •2. Ещё немного html-тэгов
- •1. Ссылки
- •3. Атрибуты
- •Лабораторная работа №3 Ссылки. Изображения.
- •2: Изображения
- •Лабораторная работа №4
- •1. Таблицы
- •2. Ещё о таблицах
- •Лабораторная работа №5 Внешний вид (css). Публикация страниц. Web-стандарты и проверка.
- •1. Внешний вид (css)
- •2. Публикация страниц
- •Последние замечания
Это заголовок Это подзаголовок
Примечание.
Регистр для ввода тэгов. Большинству браузеров безразлично, в каком регистре введены буквы тэгов. Ввод <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.
4. Создаем свой первый сайт
Откройте текстовый редактор Блокнот
HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.
Во-первых, необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>" в первой строке документа Блокнот.
Как вы уже знаете, <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>.
Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).
Документ должен выглядеть так:
<html>
<head>
</head>
<body>
</body>
</html>
Обратите внимание, как тэги структурированы по строкам (с помощью клавиши Enter) и какие сделаны отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, рекомендуем структурировать ваш HTML с помощью перевода строк и отступов.
Вы создали базовый шаблон для всех последующих HTML-документ.
Добавляем содержимое в web-сайт.
Как вы уже видели ранее, в HTML-документе есть две части: head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.
Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия – <title>:
<title>Моя первая web-страница</title>
Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".
Итак, мы хотим, чтобы на странице выводилось "Это моя первая страница.". Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:
<p> Это моя первая страница.</p>
Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.
Ваш HTML-документ должен теперь иметь такой вид:
<html>
<head>
<title>Моя первая страница </title>
</head>
<body>
<p>Это моя первая страница. </p>
</body>
</html>
Сохраните страницу:
В Блокноте выберите "Сохранить как..." в меню "Файл".
Выберите "Все файлы" в поле "Тип файла". Это очень важно - иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
Теперь сохраните ваш документ как "page1.html" (расширение ".html" указывает, что это HTML-документ.
Откройте сохраненный документ в вашем браузере. Вы увидеть страницу с текстом "Это моя первая страница.".
