Создание Web-докyмeнтов и простейшей Web-страницы, изучение приемов форматирования, создание гиперссылок

  <Н1>Заголовок</Н1>

  <Р>Первый  абзац</Р>Второй абзац

  <Н2>Заголовок  второго уровня</Н2>

  Следствием  наличия специального тега, определяющего  абзац, является тот факт, что обычного символа конца строки, вводимого  по нажатию клавиши ENTER, для создания абзацного отступа недостаточно.

  Язык  HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).

  В качестве ограничителя абзацев может  также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задается атрибутами тега <HR>. 

  <HR ALIGN="RIGH” SIZE="10" WIDTH="50%">

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

  Гипертекстовые ссылки.

   Гипертекстовая ссылка (рис. 2) является фрагментом текста документа и потому задается текстовым элементом, определяемым при помощи парного тега <А>. Этот элемент содержит обязательный атрибут, который не может быть опущен. В  данном случае обязательным является атрибут HREF= (знак равенства показывает, что необходимо задать значение этого атрибута). 

  Рис. 2 На Web-странице гипертекстовые ссылки выделяются цветом и подчеркиванием 

  В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети (Web-узел, архив FTP и прочие). Например, открывающий тег ссылки может иметь вид <А HREF="http://www.site.com/index.htm">.

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

  При использовании относительного адреса в ссылке задается только относительный путь поиска для документа. В этом случае предполагается использование того же протокола и того же Web -узла, а ссылка рассматривается как внутренняя. Внутренняя ссылка сохраняет свою работоспособность в случае изменения адреса Web-узла как целого (например, в результате его переноса на другой сервер), поэтому при потенциальной возможности такого события следует отказываться от полного задания адресов в гиперссылках.

  Гиперссылки можно использовать для ссылки на мультимедийные файлы. Это удобно, так как в этом случае не приходится ждать загрузки мультимедийных файлов при работе с данной страницей. Если же требуется интегрирование объектов мультимедиа в Web -страницу, используют парный тег <OBJECT> или нестандартный непарный тег <EMBED>, который тоже поддерживается наиболее распространенными браузерами.

  Полный  формат гиперссылки включает возможность  ссылки на определенное место внутри страницы, так называемые внутренние ссылки. Но это можно сделать для страниц собственной разработки, пометив соответствующее место при помощи якоря. Якорь задается также при помощи парного тега <А>, но в роли обязательного выступает атрибут NAME=. Значение этого атрибута — произвольная последовательность латинских букв и цифр (пробелы недопустимы), рассматриваемая как имя якоря. Для ссылки вместо URL задается имя метки , к которой выполняется переход:

  <A HREF="#имя метки">текст ссылки</A>

  Символ  # означает, что ссылка указывается на метку, а не на внешний файл. Для создания конечной закладки ссылки применяется тег <А> с атрибутом NAME:

  <A name=”имя метки”>

      <! – текст элемента метки  -->       </A>

  Допустим, документ имеет несколько разделов, из названий которых составлен список (подобно оглавлению)

     <A href=”#глав1”>Глава 1. Безенчук и &laquo;нимфы&raquo;  </A><BR>

  Текст всего документа оформляется  обычным образом – с одним  отличием: заголовки глав снабжаются якорями, для которых заданы соответствующие  имена name:

    <H1>Часть первая. Старгородский лев</H1>

       <H2><A name=”глав1> Глава 1. Безенчук и &laquo;нимфы&raquo;  </A><H2>

           <! – текст элемента метки --> 

  Выполнение 

  Упражнение 1. Создание простейшей Web-страницы

  

  Запустила текстовый редактор Блокнот

  (Пуск  • Программы • Стандартные  • Блокнот). 
 
 
 
 
 

  Ввела следующий документ:

   <HTML>

  <HEAD>

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

  </HEAD>

  <BODY>

  Содержание

  документа

  </BODY>

  </HTML> 

  Сохранила этот документ под именем first.htm.

  

    
 

  Примечание. Перед сохранением убедилась, что сброшен флажок «Скрывать расширения для зарегистрированных типов файлов» в (Пуск • Настройка • Панель управления • Свойства папки • Вид). В противном случае редактор Блокнот автоматически может добавить в конец имени «ТХТ». 
 
 

  Запустила программу (Пуск > Программы • Internet Explorer).

  

 

  Дала команду Файл • Открыть. Щелкнула на кнопке «Обзор» и открыла файл first.htm.

  

      

  

  Посмотрела, как отображается этот файл — простейший корректный документ HTML..   
 
 
 
 
 

  Как отображаются слова  «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна. 

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

  

à

  При уменьшении ширины окна текст переносится  сообразно, т.е. не выходит за границы по горизонтали. Но если текст не помещается по вертикали, то появляется ползунок для прокрутки. 

  Вывод:   В этом упражнении я создала простейший документ HTML, познакомилась с особенностями форматирования документов HTML и их отображения при помощи браузера Internet Explorer. 
 
 
 

  Упражнение 2. Изучение приемов  форматирования абзацев 

  Открыла документ first.htm в программе Блокнот.

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

  Цвет  фона заменила <body bgcolor="Cornsilk">, добавив тег bgcolor.

  Ввела заголовок первого уровня, заключив его между тегами <Н1 > и </Н1 >. Ввела заголовок второго уровня, заключив его между тегами <Н2> и </Н2>. Добавила для обоих заголовков выравнивание по центру <тег align="center">, а текст h2 (название стихотворения) выделила курсивом <i></i>.  Изменила (стандартный – черный) цвет текста для автора и названия стихотворения.

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

  Ввела тег горизонтальной линейки <HR>, отчеркнув произведение.

  Заголовок документа изменила на «Н. Гумилев  – Жираф (1908)».

  Сохранила этот документ под именем paragraph.htm. 

  Запустила программу Internet Explorer {Пуск • Программы • Internet Explorer). Дала команду Файл • Открыть. Щелкнула на кнопке Обзор и открыла файл paragraph.htm.

  

  Посмотрела, как отображается этот файл. Установила соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране. 

  При теге нового абзаца <p> (а также заголовков, например) текст по умолчанию выравнивается по правой стороне. 
 
 
 
 
 

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

  Упражнение 3. Создание гиперссылок 

  Открыла документ first.htm в программе Блокнот.

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

  

  Ввела фразу: Текст до ссылки.

  Ввела тег: <A HREF= «first.htm»>.

  Ввела фразу: Ссылка.

  Ввела закрывающий тег </А>.

  Ввела фразу: Текст после ссылки.

  Сохранила документ под именем link.htm. 

  Примечание: Документ, на который производится ссылка (first.htm), должен находиться в одной директории с хранящимся link.htm

  

  Запустила программу Internet Explorer (Пуск • Программы • Internet Explorer).

  Дала команду Файл • Открыть. Щелкнула на кнопке Обзор и открыла файл link.htm.

  Убедилась в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием). 

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

  Щелкнула на кнопке «Назад» на панели инструментов, чтобы вернуться к предыдущей странице. Убедилась, что ссылка теперь считается «просмотренной» и отображается другим цветом. 

  Применила данный тег и для создания ссылок на внешние источники:

  

   

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

  Ответы  на контрольные вопросы  согласно варианту: 

  4. Где отображается  содержимое элемента BODY?

  Содержимое (основное содержание) данного элемента составляет тело документа. Грубо говоря, это то, что мы будем видеть на web-страничке, будь то сплошной текст или текст определенной структуры и формата, украшенный изображениями, сдобренный ссылками и снабженный таблицами. 

  7. Какие теги определяют  структуру документа  HTML, основные разделы документа HTML?