Урок 2. Создание первой HTML страницы.

Понедельник, 8 августа 2011 г.
Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 413
Подписаться на комментарии по RSS

Мы знаем, что Вам уже не терпится начать создание первой страницы, но позвольте еще раз уточнить пару технических моментов.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются ">" (правой угловой скобкой). Существует открывающий и закрывающий тэг (исключения бывают, но редко). Закрывающий тэг, отличается от открывающего, наличием косого слэша перед текстом внутри угловых скобок. В качестве примера приведём такой фрагмент кода:

<title>Заголовок документа</title>

В данном примере тэг <title> сообщает браузеру об использовании формата заголовка, а </title>, о завершении текста заголовка. Здесь используется тэг заголовка. Рассмотрите его подробней: в начале, открывающий тэг <title>, затем сам текст заголовка, и </title> - закрывающий тэг. Это стандарт написания кода и так следует делать всегда!!!

Бывают и исключения. Например, тэги (тэг абзаца), (тэг перехода на новую строку). Эти тэги не требуют закрытия, и их использование придаёт тексту лучшую читаемость и структуроёмкость!

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<TITLE>Заголовок документа</TITLE>

Очень важно!!! Дополнительные пробелы, символы табуляции и возврата, добавленные в исходный текст HTML будут проигнорированы браузером при интерпретации документа! Эту проблему можно обойти, а каким образом, Вы узнаете из следующих уроков. Помните? Изучаем последовательно и по порядку! И только так мы достигнем желаемого результата!!!

На этом всё. Теперь момент истины!

Приступаем к созданию первой HTML страницы!

Итак! Откройте «Блокнот» (мы будем работать в нём, а Вы, по желанию, можете использовать любой редактор). Кто не знает где это, вот путь: Пуск -> Все программы -> Стандартные -> Блокнот.

Теперь давайте попробуем прописать в нём такой код:

<html>
<head>
<meta http-eguiv=”Content-Type” content=”text/html;charset=windows-1251”>
<title>Заголовок документа</title>
</head>
<body>
<font face=”Verdana,Sans-serif” size=”2” color=”#000000”>
<br>Название раздела</br>
<p>Ваш текст</p>
</font>
</body>
</html>

А сейчас давайте в подробностях разберём наш код.

1 и 12 строки – это, как Вы уже знаете, начало и конец всего HTML документа.

Далее в строках 2 и 5 мы прописали заголовочную часть документа, в которой указали наш заголовок документа в строке 4, и, обратите внимание на то, что в коде, в строке 3, появился новый, еще не знакомый Вам элемент!

<meta http-eguiv=”Content-Type” content=”text/html;charset=windows-1251">

Это один из возможных вариантов мета тэгов, которые мы вспоминали в первой статье. Давайте остановимся на этом моменте и рассмотрим мета тэги подробнее.

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

Синтаксис:

<META NAME = имя элемента метаинформации CONTENT = содержимое информации>

или

<META HTTP-EQUIV = имя элемента метаинформации CONTENT = содержимое информации>

Подробнее варианты мета тэгов мы будем рассматривать в следующих уроках, а сейчас поговорим о нашем, конкретном, мета тэге в строке 3:

<meta http-eguiv=”Content-Type” content=”text/html;charset=windows-1251">

В данном примере meta http-eguiv=”Content-Type” определяет тип документа и его кодировку, т.е. для того, чтобы браузер мог правильно отобразить содержимое страницы и для определения поисковой машиной языка, на котором написана страница content=”text/html; chartes=windows-1251” дословно можно перевести, как «содержимое страницы=”вид содержимого текст/формат страницы html; кодировка страници=Кирилица windows”. Следует обратить внимание на то, что перечисление отдельных параметров разделяется символом « ; », а всё перечисление содержимого обрамляется в двойные кавычки « “ » « ” ».

Следуем дальше. 6 и 11 строки – уже знакомый Вам тэг <body> </body>, в который, как Вы помните, мы заключаем то содержимое нашей страницы, которое пользователь увидит в браузере. Рассмотрим подробнее содержимое этого тэга.

В строках 8 и 9 нашего кода находятся так же знакомые для Вас тэги и . Как Вы помните, обозначает переход на новую строку, а абзац. Отсюда следует, что в нашем примере Название раздела Ваш текстмы говорим браузеру, что перед и после «Названия раздела» необходимо добавить пустую строку, а «Ваш текст» необходимо вывести с абзаца. С этим всё понятно, но мы думаем, Вы уже заметили, что 8 и 9 строки заключены в 7 и 10:

<font face=”Verdana,Sans-serif” size=”2” color=”#000000”>
<br>Название раздела</br>
<p>Ваш текст</p>
</font>

Что же означает этот тэг ? Таким образом, мы задаем параметры текста, который в него заключен! Т.е. мы говорим, что «Название раздела» и «Ваш текст» имеют определённый шрифт, размер и цвет. Если дословно, то: Выбранный шрифт текста=” Verdana,Sans-serif”(причём шрифт Вы можете задавать любой) размер=”2” цвет=“черный” (размер и цвет Вы так же можете выбрать любой).

Теперь, когда мы разобрались с кодом, давайте откроем Вашу первую страницу в браузере! Для этого файл «Блокнота» необходимо сохранить в формате HTML. Что Вам необходимо сделать:

1. Создайте папку в любой удобной для вас директории и дайте ей имя, допустим «Тест». В этой папке будут храниться Ваши HTML документы, изображения и прочее.

2. Вернитесь к окну блокнота. В верхнем меню выберите Файл -> Сохранить как

3. В появившемся окне выберите Вашу папку «Тест» и в пункте «Имя файла» введите

название Вашего файла и его формат html, например «test1.html»

4. Щелкните по кнопке кнопке «Сохранить», но не закрывайте блокнот! Просто сверните его.

5. Далее открываем нашу папку «Тест», в ней Вы увидите наш файл test1.html.

Теперь откройте его, щелкнув по документу два раза правой кнопкой мыши.

После этого у Вас откроется окно браузера, установленное по умолчанию (у нас это браузер Орега). Что же мы видим в этом окне?

Теперь наглядно видно, что делает со страницей каждый тэг. «Заголовок документа» у нас находится в названии новой вкладки, так же у нас есть «Название раздела» и «Ваш текст», причем «Название раздела» выделено пустыми строками перед и после, как мы и хотели, а «Ваш текст» вывелся просто с абзаца.

Поздравляем! Вы начали создание своей первой страницы и уже видны результаты Ваших трудов!!!

В качестве практики предлагаем Вам подредактировать код. Попробуйте изменять его так, чтоб цвет, шрифт и размер текста на странице изменялись. Причём не обязательно каждый раз открывать файл заново, изменяйте код в блокноте, сохраняйте изменения Файл -> Сохранить и, просто обновляйте окно в браузере!!!

Для этого мы приведем вам примеры нескольких видов шрифтов и палитру веб цветов.

Чёрный - #000000

Тёмно-бордовый – #800000

Зелёный – #008000

Оливковый – #808000

Тёмно-синий – #000080

Пурпурный – #800080

Бирюзовый – #008080

Серебряный – #C0C0C0

Красный – #FF0000

Жёлтый – #FFFF00

Белый - #FFFFFF

Варианты шрифтов: Avenir, FF Kava, Times New Roman, Bree, FF Trixie, Centro Sans pro.

Удачных Вам экспериментов! До встречи на следующем уроке!

Поделиться...

Урок 1. Знакомство с HTML. Теория.

Еще записи по теме

Комментариев: 4

2011-09-14 в 17:16:43 | perfy

Довольно неплохой обзорный урок, предназначенный для тех, кто в этом деле абсолютный новчок, никакой воды - все хорошо, последовательно и понятно объяснено
2011-09-14 в 21:18:19 | Irina

Второй урок уже интереснее, началась практика. Вобщем всё понятно, но для таких "дремучих чайноков" как я, делаю подсказку - когда будете запоминать набранное в Блокноте, не бойтесь, когда Вас спросят про кодировку, я поставила UTF-8. Если я не права, то надеюсь, что Алёна меня поправит, но у меня всё сработало.
2011-09-14 в 21:19:39 | Irina

Ошибочка: не чайноков, а ЧАЙНИКОВ
2011-09-30 в 20:53:55 | axper4ik

Очень хорошо написано, а главное — понятно.

Можно сказать "Hello World!" через html.

Оставьте свой комментарий!

Не регистрировать/аноним

Ваше имя

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Зарегистрирован или новая регистрация

E-mail
Пароль

Если вы уже зарегистрированы как комментатор, укажите пароль и свой действующий email.

Ваш комментарий

Введите нижние символы

Защита от спама: введите только нижние символы

(обязательно)

Опрос

**Оказался ли для Вас полезным наш сайт?**
Всего достаточно! Даже очень! (19) 59.38%

Хотелось бы больше готовых решений... (10) 31.25%

Можно бы было более подробно объяснять учебный материал... (3) 9.38%

Всего проголосовало: 32 чел
Архивы голосований