вторник, 26 июня 2012 г.

HyperText Markup Language

Что же, как и обещал, приступаем-с.

Вопросы:
  • Язык гипертекстовой разметки, виды и формат тегов. 
  • Структура HTML-документа.

HTML

Разработчик: Тим Бернерс-Ли
Год разработки: 1991 
Организация: CERN

HTML (HyperText Markup Language) - стандартный язык гипертекстовой разметки документов во Всемирной паутине (WWW - World Wide Web). HTML создавался как язык для обмена научной и технической документацией. Используется для создания веб-страниц. 

HTML является приложением SGML (Standard Generalized Markup Language - метаязык, служащий для определения языка разметки документов). Благодаря определению небольшого числа дескрипторов, также именуемых тегами, HTML существенно упросил работу, т.к. вёрстка при помощи SGML была довольно сложной.

HTML позволил создавать относительно простой и красиво оформленный документ, первоначально был задуман как средство форматирования и структурирования документа без привязки к средству воспроизведения, но постепенно эта концепция была "забыта" в угоду графических и мультимедийных потребностей современности.

Теги

Разметка текста производится при помощи тегов. HTML не чувствителен к регистру. Теги бывают парные и одиночные. Первая часть парных тегов может содержать различные параметры, которые называют атрибутами тегов, а вторая часть таких тегов отличается от первой только наличием символа "/". Пример: <html> </html>

Обязательными тегами являются:

  • <html></html> является контейнером всего содержимого HTML документа.
  • <head></head> предназначен для хранения других данных, целью которых является помощь браузеру с работой с данными.  
  • <title></title> определяет заголовок документа
  • <body></body> предназначен для хранения содержимого веб-сайта для отображения в окне браузера. 

Согласно последней версии HTML5 структура документа должна быть следующей:
<!DOCTYPE html><html> <head> <title>...</title> </head><body> ...</body></html>
В отличии от HTML5 предшествующие версии HTML имели несколько доктайпов, выбор правильного был делом не лёгким. Сейчас же, благодаря совместимости HTML5 с предыдущими версиями, этот выбор делать не приходится.   



Лабораторная работа #1


<html>
 <head>
  <title>Лабораторная работа №1</title>
 </head>

<body bgcolor=black text=white> 
<!-- атрибут bgcolor задаёт чёрный цвет фону документа, а атрибут text - цвет текста -->
<cite>Лучший способ в чём-то разобраться до конца — это попробовать научить этому компьютер (Кнут)</cite>
<!-- тег <cite></cite> отмечает текст как цитату, обычно курсивом -->
<br>
<!-- тег <br> задаёт принудительный перенос строки -->
<p align=justify>
<!-- тег <p></p> обознчает абзацы в документе, а атрибут align - выравнивание по строке -->  
<b>USB</b>  (англ. Universal Serial Bus<sup>1</sup>)<!-- тег <sup></sup> отображает шрифт в виде верхнего индекса --> — универсальная последовательная шина, предназначенная для подключения периферийных устройств. Шина USB представляет собой <u>последовательный интерфейс</u><!-- тег <u></u> добавляет подчёркивание к тексту -->  передачи данных для среднескоростных и низкоскоростных периферийных устройств.
<br>
<p align=justify>Для <b></i>подключения периферийных устройств к шине USB</i></b><!-- теги <b></b> и <i></i> задают тексту полужирность и курсив соответсвенно -->  используется четырёхпроводный кабель, при этом <u><i>два провода</i></u> (витая пара) в дифференциальном включении используются для приёма и передачи данных, а два провода — для питания периферийного устройства. Благодаря встроенным линиям питания, USB позволяет подключать периферийные устройства без собственного источника питания (<u><i>максимальная сила тока</i></u>, потребляемого устройством по линиям питания шины USB, не должна превышать 500 мА).
Предварительные версии</p>
<p>
<br>USB 0.7: спецификация выпущена в ноябре 1994 года
<br>USB 0.8: спецификация выпущена в декабре 1994 года
<br>USB 0.9: спецификация выпущена в апреле 1995 года
<br>USB 0.99: спецификация выпущена в августе 1995 года
<br>USB 1.0 Release Candidate: спецификация выпущена в ноябре 1995 года
<br>USB 1.1 спецификация выпущена в сентябре 1998 года. Исправлены проблемы и ошибки, обнаруженные в версии 1.0. Первая версия, получившая массовое распространение
<br>USB 2.0 спецификация выпущена в апреле 2000 года
</p>
<hr width=400 size=5>
<!-- тег <hr> добавляет горизонтальную линию по всей ширине страницы, но т.к. заданы атрибуды width - ширина и size - размер, то длина и толщина линии изменены соответственно --> 
<p><h1>Песня про DOS</h1></p>  <!-- тег <h1></h1> делает включённый в его текст заголовком -->   
<p align=right>
<br>    DOS. Черной пеленой экран заполнил
    чистый DOS.
<br>    Мышь. Потеряла форму, стала вдруг
    квадратной мышь.
<br>    Я разбил окно, девяносто пятое
    мастдайное окно
<br>    И поставил DOS и тогда я понял:
    Это счастье — вот оно!
</p>
<p align=left>
<br>    Капли на очках. Странные очки,
    А может слезы на лице.
<br>    DOS очистил всё, всё, что было лишним
    У меня на диске C.
<br>    Я нажал F8 и веселый Norton
    Удалял мне все подряд
<br>    40 мегабайт, может даже больше,
    Может даже 60…
</p>
<p align=right>
<br>    И представил я: город наводнился вдруг
    Разумными людьми.
<br>    Вышли все под DOS, а проклятый Windows
    Удаляли, черт возьми!
<br>    Позабыв про Word, MS Excel, Corel Draw
    И прочий геморрой.
<br>    Люди ставят DOS. Словно в Рай заходят в DOS,
    Нормальный, чистый DOS.
</p>
<hr align=right noshade width=50% size=10>
<hr align=left noshade width=50% size=10>
<p><font face=Tahoma size=2 color=green><u>Примеры поисковых систем</u></font>: <font face=georgia size=5 color=blue>Google.com</font>, <font size=4 color=red>Ya.ru</font></p>
<p><h2>Какие результаты выведет на экран кусочек программного кода?</h2></p>
<p>
<pre><!-- тег <pre></pre> определяет блок предварительно отформатированного текста --> 
<br>int x = 1, z = ++x + x;
<br>Console.WriteLine (x.ToString () + " " + z.ToString ());
<br>x = 1;
<br>int z1 = x + ++x;
<br>Console.WriteLine (x.ToString () + " " + z1.ToString ());
</pre>
</p>
</body>

</html>




<HTML>
 <HEAD>
  <TITLE>Лаба 2 часть 2</TITLE>
 </HEAD>
<BODY  bgcolor="#0A002D">

<PRE>
<!-- тег <font></font> определяет свойства шрифта, такой атрибут как color, к примеру, задаёт цвет -->
      <font color="#ECF000">1</font> <font color="#59F000">&#60!DOCTYPE html PUBLIC &#34-//W3C//DTD
        XHTML 1.0 Transitional//EN&#34    </font>
      <font color="#ECF000">2</font> <font color="#59F000">&#34http://www.w3.org/TR/xhtml1/DTD/
        xhtml1-transitional.dtd&#34&#62</font>
      <font color="#ECF000">3</font>
      <font color="#ECF000">4</font> <font color="#23FFFF">&#60</font><font color="#C8C86F">html</font> <font color="#0CFFFF">xmlns=</font><font color="#AC434B">&#34http://www.w3.org/1999/
        xhtml&#34</font><font color="#23FFFF">&#62</font>
      <font color="#ECF000">5</font>     <font color="#23FFFF">&#60</font><font color="#C8C86F">head</font><font color="#23FFFF">&#62</font>
      <font color="#ECF000">6</font>             <font color="#23FFFF">&#60</font><font color="#C8C86F">meta</font> <font color="#C5AC00">http-equiv</font><font color="#23FFFF">=</font><font color="#C44F4E">&#34Content-
        Type&#34</font> <font color="#C5AC00">content</font><font color="#00C4CB">=</font>
      <font color="#ECF000">7</font>             <font color="#EB5955">&#34text/html; charset=us-
        ascii&#34</font> <font color="#17FFFF">/&#62</font>
      <font color="#ECF000">8</font>              <font color="#00FEFF">&#60</font><font color="#C5C66F">script</font> <font color="#D8C000">type</font><font color="#00C4CB">=</font><font color="#B6464D">&#34text/
        javascript&#34</font><font color="#00FEFF">&#62</font>
      <font color="#ECF000">9</font>                   <font color="#00FEFF">function</font> <font color="#FFB400">reDo()</font> <font color="#00FEFE">{</font><font color="#FFB400">top.
        location.reload();</font><font color="#00FEFE">}</font>
     <font color="#ECF000">10</font>             <font color="#D7D774">if</font> <font color="#FFB400">(navigator.appName ==</font>
        <font color="#EC5854">'Netscape'</font><font color="#FFB400">)<font> <font color="#00F6E6">{</font><font color="#FFB400">top.onresize = reDo;</font><font color="#0BF0DF">}</font>
     <font color="#ECF000">11</font>             dom=document.
        getElementById;
     <font color="#ECF000">12</font>           <font color="#23FFFF">&#60/</font><font color="#C8C86F">script</font><font color="#23FFFF">&#62</font>
     <font color="#ECF000">13</font>       <font color="#23FFFF">&#60/</font><font color="#C8C86F">head</font><font color="#23FFFF">&#62</font>
     <font color="#ECF000">14</font>       <font color="#23FFFF">&#60</font><font color="#C8C86F">body</font><font color="#23FFFF">&#62</font>
     <font color="#ECF000">15</font>       <font color="#23FFFF">&#60/</font><font color="#C8C86F">body</font><font color="#23FFFF">&#62</font>
     <font color="#ECF000">16</font> <font color="#23FFFF">&#60/</font><font color="#C8C86F">html</font><font color="#23FFFF">&#62</font>
</PRE>

</BODY>

</HTML>


Лабораторная работа #2

<ul> </ul> устанавливает маркированный список, <li> - задаёт его элементы, атрибут type задаёт вид варкера
<ol> </ol> устанавливает нумерованный список, <li> - задаёт его элементы
<a></a> создаёт ссылку на внешний документ, если после href указан url адрес, или место в текущем документе, в этом случае в документе присутсвует 2 тега <a></a>, ссылка на т.н. якорь, которая задаётся через # после href и сам якорь: тег <a></a> с атрибутом name.  
<dl><dt><dd></dd></dt></dl> тег <dl></dl> является контейнером пар терминов, заключаемых в тег <dt></dt>, и их определений, заключаемых в тег <dd></dd>


<html>
<head>
</head>

<body>
<ul>
<li><p><a href=#text>text</a></p>
<li><p><a href=#lists>lists</a></p>
<li><p><a href=#cms>cms 4 blogs</a></p>
<li><p><a href=#countries>countries</a></p>
</ul>
<p><a name=text></a></p>
<img src="ponedelnik1.jpg" width="200" height="200" border=5 align=right>
<h2></b>Аркадий и Борис Стругацкие. Понедельник начинается в субботу
Заголовок книги</b></h2>
Я приближался к месту моего назначения. Вокруг меня, прижимаясь к самой дороге, зеленел лес, изредка уступая место полянам, поросшим желтой осокой. Солнце садилось уже который час, все никак не могло сесть и висело низко над горизонтом. Машина катилась по узкой дороге, засыпанной хрустящим гравием. Крупные камни я пускал под колесо, и каждый раз в багажнике лязгали и громыхали пустые канистры.
Искаженное изображение
<a href=http://google.com><img src="cуmistry.jpg" width="200" height=29% align=left></a>
<p>Справа из леса вышли двое<img src="dvoe.jpg" align=middle>, ступили на обочину и остановились, глядя в мою сторону. Один из них поднял руку. Я сбросил газ, их рассматривая. Это были, как мне показалось, охотники, молодые люди, может быть, немного старше меня. Их лица понравились мне, и я остановился. Тот, что поднимал руку, просунул в машину смуглое горбоносое лицо и спросил улыбаясь:
<br>-- Вы нас не подбросите до Соловца?
<br>Второй, с рыжей бородой и без усов, тоже улыбался, выглядывая из-за его плеча. Положительно, это были приятные люди.
<br>-- Давайте, садитесь, -- сказал я. -- Один вперед, другой назад, а то у меня там барахло, на заднем сиденье.
<br>-- Благодетель! -- обрадованно произнес горбоносый, снял с плеча ружье и сел рядом со мной.
<br>Бородатый, нерешительно заглядывая в заднюю дверцу, сказал:
<br>-- А можно, я здесь немножко того?..
<br>Я перегнулся через спинку и помог ему расчистить место, занятое спальным мешком и свернутой палаткой. Он деликатно уселся, поставив ружье между коленей.
<br>-- Дверцу прикройте получше, -- сказал я.</p>
<p></p>
<hr align=centre width=80%>
<p><a name=lists></a></p>
Здесь начинаются списки:
<dl>
<dt><b>HTML</b></dt>
<dd>(от англ. HyperText Markup Language — «язык разметки гипертекста») стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме</dd>
</dl>

<dl>
<dt><b>CSS</b><dt>
<dd>(от англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.</dd>
</dl>

<dl>
<dt><b>PHP</b></dt>
<dd>(от англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста», англ. Personal Home Page Tools[2] (устар.) — «Инструменты для создания персональных веб-страниц») — скриптовый язык [3], созданный для генерирования HTML-страниц на веб-сервере и работы с базами данных. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров. Входит в LAMP — распространённый набор для создания веб-сайтов (Linux, Apache, MySQL, PHP (Python или Perl)).</dd>
</dl>


<p><a name=cms></a></p>
<font color=red><i>Движки для построения блог-сайтов</i></font>  
<ul type=square>
<li>Wordpress  
<li>Textpattern  
<li>b2evolution  <li>Joomla
</ul>
<u><font color=blue>Функции PHP для работы с массивом:</font></u> 
<ol type=I start=15>
   <li>array_change_key_case
   <li>array_chunk
   <li>array_combine
   <li>array_count_values
   <li>array_fill
   <li>array_filter
   <li>array_reverse
   <li>array_search
</ol>

<p><a name=countries></a></p>
Смешанный список с автоматической нумерацией. Части света
<ol>
  <li>Европа
  <ul type=circle>
<li>Англия
    <li>Франция
  <li>Италия
  <li>Герамния</li></ul>
  <li>Азия
  <ul type=square>
  <li>Китай
  <li>Индия
  <li>Иран</li></ul>
  <li>Африка
  <ol>
  <li>Египет
  <li>Чан
  <li>ЮАР
  <li>Алжир</li></ol>
  <li>Америка
</ol>
<a href=http://google.com target="_self">Download Denwer</a>
<a href=http://tauclan.tk target="_blank">I have no VK account :(~</a>
</body>

</html>