Всем привет!
Что же, давайте разбираться что такое веб-страницы и как они устроены. Для начала можно попробовать найти на просторах сети какую нибудь веб-страницу на HTML, я нашел одну такую:
Я пользуюсь браузером Opera (ни в коем разе не хочу заниматься рекламой, прошу меня простить!) и в нем есть одна замечательная функция - просмотр исходного кода веб-страниц:
При открытии исходного кода получаем следующее:
Заметили, что часть текста представлена в виде элементов типа <бла-бла-бла>? Конструкции, которые заключены в квадратные скобки называются тэгами. Это своеобразные команды браузеру о том, что и как нужно отображать. Тэги могут быть одинарные, когда в текст вставляется какая-то одиночная конструкция (картинка, пробел, знак переноса строки и т. д.) или двойными, например <i>...</i>. В таком случае, закрывающий тэг пишется со слэшем (знак "/") в начале. Двойной тэг распространяет свое действие только на тот участок текста, который заключен внутри него.
Давайте, собственно, приступим к обучению.Что нам будет необходимо?
1. Текстовый редактор. Подойдет любой самый простой. Существует масса различных специализированных программ с подсветкой синтаксиса кода, с различными помощниками, но лично я предпочитаю старый добрый "Блокнот". Ну не знаю почему душа у меня к нему лежит! Только скажу сразу: текстовые процессоры, такие как Microsoft Word и ему подобные использовать не нужно! Все дело в том, что при сохранении файла почти все текстовые процессоры не позволяют выбрать кодировку текста, в которой будет сохраняться текст, а для HTML предпочтительнее устанавливать UTF-8). В противном случае, в дальнейшем, при заливке готового сайта на сервер можно столкнуться с такой проблемой, что веб-страницы будут отображаться не корректно.
2. Браузер. Нужен будет для проверки готового результата. Подойдет любой.
Давайте создадим на диске отдельную папку для нашего будущего сайта, в ней создадим пустой текстовый файл и переименуем его в index.htm:П
Всплывет окошко с предупреждением, что мы собираемся изменить расширение файла - соглашаемся. Мы создали свою первую веб-страницу, но она пуста. Откроем ее при помощи "Блокнота" и начнем писать код.
Вначале - пару слов о правильной структуре HTML-документа. Общий вид кода должен выглядеть так:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Даdайте разбираться по порядку. В этом коде есть три двойных тэга - <html>, <head> и <body>, причем два последних вложены в первый.
<html></html> - он указывает браузеру, что перед ним HTML-документ, и "распознать" его нужно соответствующим образом. В ряде случаев в этот тэг добавляют атрибуты, но сейчас мы это опустим.
Атрибуты - это дополнительные параметры тэга. Для примера:
<font>...</font> - тэг позволяющий работать с текстом
<font size="5">...</font> - у тэга появился атрибут size со значением "5" - изменяет размер текста (более подробно это изучим далее).
У тэга может быть и несколько атрибутов, в таком случае они разделяются пробелом, например:
<font size="5" align="center" color="red">...</font>
Идем дальше - <head>...</head> - те кто знает английский уже понял - это заголовок. Внутри этого тэга размещают служебную информацию о веб-документе.
И, наконец, <body>...</body> - тело HTML-документа, здесь располагается текст.
Попробуем сделать первую страницу со следующим содержимым:
<html>
<head>
<title>Моя первая HTML-страница</title>
</head>
<body>
Всем привет! Это моя первая HTML-страница!
</body>
</html>
Сохраним файл, откроем в браузере и посмотрим, что у нас получилось:
А теперь задачка посложнее: нам нужно написать стих. Для примера возьмем нашего классика А. С. Пушкина:
Я помню чудное мгновенье:
Передо мной явилась ты,
Как мимолетное виденье,
Как гений чистой красоты.
Пишем код:
<html>
<head>
<title>Стих</title>
</head>
<body>
Я помню чудное мгновенье:
Передо мной явилась ты,
Как мимолетное виденье,
Как гений чистой красоты.
</body>
</html>
Сохраняем, смотрим что получилось:
Почему так произошло? Разберем на следующем занятии.
Всем спасибо за внимание!
