Add to collection(s) Add to saved
  1. Инженерия
  2. Веб-дизайн

Практическое занятие № 5. Разработка структуры HTML

advertisement 
Практическое занятие № 5.
Разработка структуры HTML-файла
Необходимо разработать структуру HTML-файла для представления информации об
элементах HTML (заодно повторяем, что было на лекциях). Полученный HTML-файл
представлен ниже. Привожу некоторые комментарии по полученной структуре.
 С помощью элемента section разделяем содержимое файла на три больших блока для
описания блочных, строчных и прозрачных элементов.
 Заголовки секций содержат небольшой графический файл с подсказкой, которая
отображается во всплывающем окне при наведении курсора на изображение. Текст
подсказки содержится в атрибуте title.
 Для описания каждого элемента также используется элемент section, принадлежащий
классу element.
 Все элементы section имеют атрибут id, который используется в ссылках.
 Элемент section, принадлежащий классу element, включает четыре элемента:
 элемент h3 для представления заголовка;
 элемент p, принадлежащий классу purpose, для представления описания;
 элемент div, принадлежащий классу attributes, для представления атрибутов;
 элемент pre для представления примеров использования (первый перевод строки
после тега pre не учитывается).
 Для представления атрибутов нельзя использовать элемент p, т.к. описание атрибутов
может содержать как обычные абзацы, так и список атрибутов, представленный
элементом ul. Поэтому эти составные части объединяются с помощью контейнера div.
 Для выделения имён элементов и атрибутов используются элементы span,
принадлежащие классам element и attribute.
 Открывающая и закрывающая угловые скобки в обязательном порядке заменяются
соответствующими именованными последовательностями символов. В противном случае
браузер будет интерпретировать элементы в примерах использования как части
структуры HTML-файла, а не как примеры кода.
 Элемент nav содержит набор ссылок, принадлежащих классам main и second. Разделение на
два класса необходимо, чтобы по-разному отформатировать ссылки на элементы section
разных уровней. Внутренние элементы div понадобятся при форматировании документа с
помощью таблиц стилей.
 Атрибуты title, одинаковые у элементов h2 и img, будут использоваться для вывода
подсказки для разных видов устройств.
<!doctype html>
<html lang = "ru-RU">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251">
<title> Элементы HTML </title>
</head>
<body>
<h1> Элементы HTML </h1>
<nav>
<div class = "ref">
<a href = "#block" class = "main"> Блочные элементы </a>
<a href = "#section" class = "second"> Элемент <span class = "element">section</span> </a>
<a href = "#article" class = "second"> Элемент <span class = "element">article</span> </a>
<a href = "#nav" class = "second"> Элемент <span class = "element">nav</span> </a>
<a href = "#li" class = "second"> Элемент <span class = "element">li</span> </a>
<a href = "#ul" class = "second"> Элемент <span class = "element">ul</span> </a>
</div>
<div class = "ref">
<a href = "#inline" class = "main"> Строчные элементы </a>
<a href = "#img" class = "second"> Элемент <span class = "element">img</span> </a>
<a href = "#br" class = "second"> Элемент <span class = "element">br</span> </a>
<a href = "#span" class = "second"> Элемент <span class = "element">span</span> </a>
</div>
<div class = "ref">
<a href = "#transparent" class = "main"> Прозрачные элементы </a>
<a href = "#a" class = "second"> Элемент <span class = "element">a</span> </a>
</div>
</nav>
<section id = "block" class = "main">
<h2 title = "Блочные элементы представляют собой прямоугольную область и всегда начинаются с
новой строки."> Блочные элементы <img src = "Tooltip.jpg" alt = "Tooltip" title = "Блочные
элементы представляют собой прямоугольную область и всегда начинаются с новой строки."></h2>
<section class = "element" id = "section">
<h3> Элемент <span class = "element">section</span> </h3>
<p class = "purpose"> Элемент <span class = "element">section</span> представляет
семантически объединённую часть документа, например, главу или раздел.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<section>
...
</section>
</pre>
</section>
<section class = "element" id = "article">
<h3> Элемент <span class = "element">article</span> </h3>
<p class = "purpose"> Элемент <span class = "element">article</span> представляет
независимую часть содержимого документа.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<article>
...
</article>
</pre>
</section>
<section class = "element" id = "nav">
<h3> Элемент <span class = "element">nav</span> </h3>
<p class = "purpose"> Элемент <span class = "element">nav</span> представляет часть вебстраницы, содержащую ссылки на части страницы или на другие страницы сайта.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<nav>
...
</nav>
</pre>
</section>
<section class = "element" id = "li">
<h3> Элемент <span class = "element">li</span> </h3>
<p class = "purpose"> Элемент <span class = "element">li</span> представляет элемент
нумерованного или маркированного списка.</p>
<div class = "attributes"> <p>Если элемент входит в нумерованный список, он может иметь
атрибут <span class = "attribute">value</span>, который задаёт номер элемента списка.</p>
</div>
<pre></pre>
</section>
<section class = "element" id = "ul">
<h3> Элемент <span class = "element">ul</span> </h3>
<p class = "purpose"> Элемент <span class = "element">ul</span> представляет маркированный
список. Элементы списка должны быть элементами <span class = "element">li</span>.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<ul>
<li> Элемент
<li> Элемент
<li> Элемент
<li> Элемент
<li> Элемент
</ul>
</pre>
</section>
1
2
3
4
5
</section>
<section id = "inline" class = "main">
<h2 title = "Строчные элементы представляют собой часть строки."> Строчные элементы <img src
= "Tooltip.jpg" alt = "Tooltip" title = "Строчные элементы представляют собой часть
строки."></h2>
<section class = "element" id = "img">
<h3> Элемент <span class = "element">img</span> </h3>
<p class = "purpose"> Элемент <span class = "element">img</span> представляет
изображение.</p>
<div class = "attributes"> <p>Элемент имеет следующие атрибуты:</p>
<ul>
<li> <span class = "attribute">src</span> – задаёт url-адрес изображения;
<li> <span class = "attribute">alt</span> – задаёт описание изображения, которое
отображается, если изображение не доступно или если в браузере отключены изображения;
<li> <span class = "attribute">width</span> и <span class = "attribute">height</span> –
задают ширину и высоту изображения, которые могут отличаться от реальных размеров
изображения.
</ul>
</div>
<pre>
<img src = "HTML.gif" alt = "HTML и CSS">
</pre>
</section>
<section class = "element" id = "br">
<h3> Элемент <span class = "element">br</span> </h3>
<p class = "purpose"> Элемент <span class = "element">br</span> представляет разрыв
строки.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<p> Строка 1 <br> Строка 2 </p>
</pre>
</section>
<section class = "element" id = "span">
<h3> Элемент <span class = "element">span</span> </h3>
<p class = "purpose"> Элемент <span class = "element">span</span> не имеет определённого
значения. Он используется для выделения части текста. Атрибут <span class =
"attribute">class</span> позволяет отнести выделение к тому или иному классу, а таблицы
стилей – задать способ выделения содержимого элемента.</p>
<div class = "attributes"> <p>Элемент не имеет атрибутов.</p> </div>
<pre>
<p>Атрибут <span class = "attribute">class</span> позволяет отнести выделение к
тому или иному классу, а таблицы стилей – задать способ выделения содержимого
элемента.</p>
</pre>
</section>
</section>
<section id = "transparent" class = "main">
<h2 title = "В зависимости от ситуации прозрачные элементы могут быть отнесены браузером как
к строчным, так и к блочным элементам, и будут отображаться соответствующим образом.">
Прозрачные элементы <img src = "Tooltip.jpg" alt = "Tooltip" title = "В зависимости от
ситуации прозрачные элементы могут быть отнесены браузером как к строчным, так и к блочным
элементам, и будут отображаться соответствующим образом."></h2>
<section class = "element" id = "a">
<h3> Элемент <span class = "element">a</span> </h3>
<p class = "purpose"> Элемент <span class = "element">a</span> представляет гиперссылку на
другую веб-страницу или на другую часть текущей страницы.</p>
<div class = "attributes"> <p>Элемент должен содержать атрибут <span class =
"attribute">href</span>, который задаёт url-адрес для перехода.</p> </div>
<pre>
<a
<a
<a
<a
href = "lection1.html">Лекция № 1. Алфавит и основные понятия языка C++</a>
href = "#l1_4">Типы данных языка C++</a>
href = "lection1.html#l1_4">Типы данных языка C++</a>
href = "index.html"><img src = "home.jpg" alt = "Home"></a>
</pre>
</section>
</section>
</body>
</html>
Download
advertisement