Чертёж первый: Голова, тело, заголовок…

  • Для создания чертежа, или кода (web-мастера — люди довольно странные и обычные чертежи называют кодом ), нашего домика-сайта нам понадобится рабочая площадка — папка, в которую будут помещаться все файлы (мы люди «подкованные» и прекрасно понимаем, что Интернет — это виртуальный мир, а значит всё, что в нём существует, располагается в файлах):
    • в своей домашней папке создай папку с именем my_site;
    • открой её и в ней создай текстовый документ, которому дай имя index.html (создаются и папка, и документ одинаково: Правка → Создать → Папку... или Текстовый файл... ).
  • Щёлкни по файлу index.html правой кнопкой мыши и выбери команду Открыть в → FireFox Web Browser.

Мы создали файл с расширением .html, а такое расширение сообщает операционной системе , что файл является web-страничкой и открывать её надо в специальной программе – браузере (или броузере, решай сам, как должно звучать слово Browser), том самом мастере, который умеет читать html-чертежи и строить по ним домики.

  • В открывшемся окне браузера ты видишь пустую страницу. И, думаю, это тебя не удивляет — мы ведь ещё ничего и не «начертили».
  • Откроем наш файл для редактирования:
    • щёлкни правой кнопкой мыши по файлу index.html и в открывшемся контекстном меню выбери команду Открыть в → Другое приложение...;
    • в открывшемся окне в разделе Служебные выбери приложение Kate;
    • отметь переключатель Запомнить связь с приложением для этого файла:



    • нажми кнопку ОК;
    • в окне Выбор сеанса нажми кнопку Новый сеанс — наш файл открылся в редакторе Kate.
  • Наконец-то можно написать первые строчки кода:
    • <HTML>
<HEAD>
</HEAD>
<BODY>
 	Здравствуйте! Меня зовут Вася!
</BODY>
</HTML>

Как видишь, html-код состоит из особых слов — тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл:

<HTML> — начало html-документа;

<HEAD> — начало «головной» части — в ней записывается служебная информация;

</HEAD> — конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов);

<BODY> и </BODY> — начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички).

Текст, который не является тегами, просто отображается на страничке.

  • Посмотрим, что же мы сотворили:
    • сохрани изменения в документе — Файл → Save (Сохранить);
    • перейди в окно браузера и обнови страничку, нажав кнопку Обновить текущую страницу :


    Замечание. Если вместо внятного текста ты увидел совершенно непонятные кракозябры:

    значит, браузер неправильно распознал кодировку. Выполни команду Вид → Кодировка → Юникод (UTF-8):


  • Впечатляет? Скорее всего, не очень. Мелковато, черновато-серовато, никакого оформления, глаз не радует, душу не греет. Будем исправлять:
    • прежде всего в головную часть добавим данные о заголовке нашей странички — тег <TITLE>:
      • <TITLE>Моя домашняя страничка</TITLE>
    • затем оформим текст как заголовок, используя теги <H1>, <H2>,… <H6> (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с <H1> — самого крупного и заканчивая <H6> — самым мелким. Поэкспериментируй и подбери наиболее подходящий для твоей странички размер заголовка):
      • <H2>Здравствуйте! Меня зовут Вася!</H2>
    • продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, ты волен его изменить по своему усмотрению). В результате получаем такой (или почти такой) код:
      • <HTML>
<HEAD>
 	<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY>
 	<H2>Здравствуйте! Меня зовут Вася!</H2>
 	Я учусь в 9 классе 11 школы города Иркутска.
 	Я люблю информатику, рисовать и своих 
 	четвероногих и пернатых друзей.
 	А друзья мои — это синичка Клава, кошка Дуся
 	и щенок Погромыч.
</BODY>
</HTML>
  • Сохрани файл и обнови его в браузере. Теперь лучше?

Возможно, твоё внимание привлёк такой факт — несмотря на то, что текст в коде разделён на абзацы, браузер его выводит одной строкой, за исключением заголовка (но это и неудивительно, даже самый «глупый» браузер должен знать, что заголовок — это отдельный абзац). Более того, при изменении величины окна браузера текст «подстраивается» под его ширину, перенося неуместившиеся слова на новую строчку.

А как быть, если необходимо начать новую строку именно в этом месте, а не там, где закончится ширина окна браузера? Для этого служат два тега: тег <BR> начинает новую строку, а тег <P> — новый абзац. Отличаются они тем, что тег <P> не только начинает выводить текст с новой строки, но и добавляет перед этой строкой межстрочный интервал значительной ширины. Кроме этого, в теге <P> можно задать дополнительное форматирование, но об этом чуть позже.

Замечание: для тега <P> закрывающий тег </P> необязателен, а у <BR> его и вовсе нет.

  • Поэкспериментируй на своей страничке, вставляя теги <P> и <BR> в самые разные места текста, а затем приведи страничку к цивильному виду, правильно разделив текст на абзацы.
  • И в заключение выделим имена горячо любимых друзей, используя теги <B> </B> — полужирное начертание и <I> </I> — курсив. И наш первый «чертёж» принимает такой вид:
    • <HTML>
<HEAD>
 	<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY>
 	<H2>Здравствуйте! Меня зовут Вася!</H2>
 	<P>Я учусь в 9 классе 11 школы города Иркутска.
 	<P>Я люблю информатику, рисовать и своих 
 	четвероногих и пернатых друзей.
 	<P>А друзья мои — это <I>синичка <B>Клава</B>,
 	кошка <B>Дуся</B> и щенок <B>Погромыч</B></I>.
</BODY>
</HTML>

И в заключение заметим, что теги можно вкладывать друг в друга, как это сделано в последнем абзаце — внутрь тега <I> вложено три тега <B>.


Следующий урок