воскресенье, 12 августа 2012 г.

День 7. Е - мае, неделя прошла уже.

И вновь в начале решение домашнего задания. Вот примерно так должен выглядеть ваш код:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="Внутренняя ссылка" lang="ru">
  <head>
   <meta http-equiv="content-type" content="text/html"  charset="windows-1251" />
   <title>365.WEB</title>
  </head>
  <body>
   <h1>Первый проход</h1>
   <ol type="1"> 
    <li><a name="met2" href="#met1" title="Нажмите для перехода в конец        документа">Причудницы большого света!</a></li>
    <li>Всех прежде вас оставил он;</li>
    <li>И правда то, что в наши лета</li>
    <li>Довольно скучен высший тон;</li>
    <li>Хоть, может быть, иная дама</li>
    <li>Толкует Сея и Бентама,</li>
    <li>Но вообще их разговор</li>
    <li>Несносный, хоть невинный вздор;</li>
    <li>К тому ж они так непорочны,</li>
    <li>Так величавы, так умны,</li>
    <li>Так благочестия полны,</li>
    <li>Так осмотрительны, так точны,</li>
    <li>Так неприступны для мужчин,</li>
    <li>Что вид их уж рождает сплин. </li>
    <li>И вы, красотки молодые,</li>
    <li>Которых позднею порой</li>
    <li>Уносят дрожки удалые</li>
    <li>По петербургской мостовой,</li>
    <li>И вас покинул мой Евгений.</li>
    <li>Отступник бурных наслаждений,</li>
    <li>Онегин дома заперся,</li>
    <li>Зевая, за перо взялся,</li>
    <li>Хотел писать — но труд упорный</li>
    <li>Ему был тошен; ничего</li>
    <li>Не вышло из пера его,</li>
    <li>И не попал он в цех задорный</li>
    <li>Людей, о коих не сужу,</li>
    <li>Затем, что к ним принадлежу.</li>
   </ol>
   <h1>Второй проход</h1>
   <ol type="1">
    <li type="1" value="29">Причудницы большого света!</li>
    <li>Всех прежде вас оставил он;</li>
    <li>И правда то, что в наши лета</li>
    <li>Довольно скучен высший тон;</li>
    <li>Хоть, может быть, иная дама</li>
    <li>Толкует Сея и Бентама,</li>
    <li>Но вообще их разговор</li>
    <li>Несносный, хоть невинный вздор;</li>
    <li>К тому ж они так непорочны,</li>
    <li>Так величавы, так умны,</li>
    <li>Так благочестия полны,</li>
    <li>Так осмотрительны, так точны,</li>  
    <li>Так неприступны для мужчин,</li>
    <li>Что вид их уж рождает сплин. </li>
    <li>И вы, красотки молодые,</li>
    <li>Которых позднею порой</li>
    <li>Уносят дрожки удалые</li>
    <li>По петербургской мостовой,</li>
    <li>И вас покинул мой Евгений.</li>
    <li>Отступник бурных наслаждений,</li>
    <li>Онегин дома заперся,</li>
    <li>Зевая, за перо взялся,</li>  
    <li>Хотел писать — но труд упорный</a></li>
    <li>Ему был тошен; ничего</li>
    <li>Не вышло из пера его,</li>
    <li>И не попал он в цех задорный</li>
    <li>Людей, о коих не сужу,</li>
    <li>Затем, что к ним принадлежу.</li> 
   </ol>
   <h1>Третий проход</h1>
   <ol type="1">
    <li type="1" value="57">Причудницы большого света!</li>
    <li>Всех прежде вас оставил он;</li>
    <li>И правда то, что в наши лета</li>
    <li>Довольно скучен высший тон;</li>
    <li>Хоть, может быть, иная дама</li>  
    <li>Толкует Сея и Бентама,</li>
    <li>Но вообще их разговор</li>
    <li>Несносный, хоть невинный вздор;</li>
    <li>К тому ж они так непорочны,</li>  
    <li>Так величавы, так умны,</li>
    <li>Так благочестия полны,</li>
    <li>Так осмотрительны, так точны,</li>
    <li>Так неприступны для мужчин,</li>
    <li>Что вид их уж рождает сплин. </li>
    <li>И вы, красотки молодые,</li>
    <li>Которых позднею порой</li>
    <li>Уносят дрожки удалые</li>
    <li>По петербургской мостовой,</li>
    <li>И вас покинул мой Евгений.</li>
    <li>Отступник бурных наслаждений,</li>
    <li>Онегин дома заперся,</li>
    <li>Зевая, за перо взялся,</li>
    <li>Хотел писать — но труд упорный</a></li>
    <li>Ему был тошен; ничего</li>
    <li>Не вышло из пера его,</li>
    <li>И не попал он в цех задорный</li>
    <li>Людей, о коих не сужу,</li>
    <li><a name="met1" href="#met2" title="Нажмите для перехода в начало      документа">Затем, что к ним принадлежу.</a></li>
   </ol>
  </body>
</html> 
Итог работы этого кода представлен ниже:



Думаю, что при должном старании это задание не должно было вызвать серьезных проблем для вас, друзья.

Форматирование текста

Ну а сегодняшний день я посвятил различным играм с форматированием текста. Стандартное представление текста является ведь не всегда приемлимым, иногда необходимо что-то подчеркнуть, что-то зачеркнуть, что-то выделить фоном, соответственно и решил я научится это делать.
Сегодня я расскажу вам про несколько элементов сразу, но вы не бойтесь, все они крайне просты.
Итак, поехали.

Элемент B.

Элемент В применяется для задания полужирного начертания текста.
<b>365.WEB</b>

Элемент I.

Элемент I  применяется для задания курсивного начертания текста.
<i>365.WEB</i>

Элемент ТТ.

Элемент ТТ задает моноширинное написание текста(это когда каждая буква имеет одну и ту же ширину).
<tt>365.WEB</tt>

Элемент U.

Элемент U отображает текст подчеркнутым.
<u>365.WEB</u>

Элемент S.

Элемент зачеркивает текст горизонтальной линией.
<s>365.WEB</s>

Элемент  BIG.

Элмент ВIG отображает текст, заключенный в него, шрифтом большего размера, чем весь остальной текст. Всего в HTML шрифт имеет размеры от1 до 7, по умолчанию шрифт имеет размер 3.
<big>365.WEB<big>365.WEB</big></big>

Элемент SMALL.

Действует аналогично предыдущему, просто в обратную сторону.
 <small>365.WEB<small >365.WEB</small ></small >

Элементы SUB и SUP.

Эти элементы задают подстрочное и надстрочное написание символов.
<sub>365.</sub>WEB<br/>
<sup>365.</sup>WEB<br/>

Элементы SPАN.

Элемент SPAN позволяет определить особые параметры отображения для небольшого куска текста.
<span style="background-color:#00FF00">365.WEB</span>

Если теперь, дорогой мой читатель, ты возьмешь и обобщишь все написанные выше элементы в единый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html/loose.dtd">
<html title="365.WEB">
  <head>
   <title>Форматирование текста</title>
  </head>
  <body>
   <b title="Полужирный">365.WEB</b><br/>
   <i>365.WEB</i><br/>
   <tt>365.WEB</tt><br/>
   <u>365.WEB</u><br/>
   <s>365.WEB</s><br/>
   <big>365.WEB<big>365.WEB</big></big><br/>
   <small>365.WEB<small>365.WEB</small></small><br/>
   <sub>365.</sub>WEB<br/>
   <sup>365.</sup>WEB<br/>
   <span style="background-color:#00FF00">365.WEB</span>
  <body>

<html>
То получишь вот такую штуку:

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

Логические элементы.

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

Элемент АBBR

Он определяет текст как аббревиатуру, а с помощью title можно задать расшифровку аббревиатуры. Браузер никак не выделяет этот текст.

Элемент ACRONYM 

Это элемент для определения текста как акронима. Браузер никак не выделяет этот текст.

Элемент CITE

В этот элемент помещают цитату или сноску. Такой текст отображается курсивом.

Элемент CODE 

Этот элемент отображает моноширинным шрифтом фрагменты кода программ, например.

Элемент DEL

Этот элемент зачеркивает текст и помечает его как удаленный или по крайней мере неактуальный.

Элемент DFN

Это элемент для выделения текста как определения. Браузер такой текст определяет курсивом.

Элемент EM

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

 Элемент KBD

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

 Элемент Q

Элемент цитаты. Используется для их добавления в текст. Отображается цитата курсивным шрифтом.

 Элемент STRONG 

Элемент этот предназначен для постановки акцента в тексте. Текст этого элемента выделяется полужирным шрифтом.

Домашнее задание.

Друзья, я уверен что предыдущий блок вызвал у вас недоумение. Что? Как? Зачем нужны эти логические элементы, если есть простые физические?
А вот затем, друзья, что мы то с вами хотим, чтобы на наши будущие сайты заходили многие-многие-многие посетители, а для этого поисковые роботы должны наши сайты находить высоконасыщенными информацией и как раз для этого логические элементы и нужны.
Собственно, логические элементы являются более предпочтительными, чем физические.
В связи с этим вот вам задание:
реализуйте точно такую же страницу, что и в примере, только заменив, там где это возможно. физические элемнты на логические. С тегами же логических элементов, я думаю, вы разберетесь самостоятельно, не привел я их на это упавая.
До завтра, друзьяшечки мои.

Комментариев нет:

Отправить комментарий