Учебник по HTML - Учебник html для начинающих. Версия для печати раздела "Учебник html"

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
82

может служить емкостью тля тегов

, конструкция такая

Во-вторых, если бы мы к тегу

применили атрибут
rules
со значением
groups
(об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании Больше никакой разницы между этими тегами нет. Пример
"http://www.w3.org/TR/html4/loose.dtd">

20 20 20 40 40 60 20 30 50

20 20 20 40 40 60 20 30 50

20 20 20 40 40 60 20 30 50

20 20 20 40 40 60 20 30 50

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
83 Обратите внимание, что в этом примере колонки таблицы поделены натри группы с помощью

, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов

, которые находятся внутри контейнеров Как ив случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты. Границы таблицы. Ранее в главе 4 " Таблицы мыс Вами познакомились с атрибутами
border
- ширина границы и
bordercolor
- цвет границы, но это не весь набор инструментов применимых к границам таблицы. Есть ещё два атрибута
frame
и
rules
о них мы и поговорим ниже.
Начнём с атрибута
frame
- рамка, данный атрибут применяется к тегу

и указывает на то, как следует отображать внешние границы таблицы, те. то есть вокруг самой таблицы, а не между её отдельными ячейками Атрибут
frame
может принимать следующие значения

void
- не отображать границы вокруг таблицы.

border
- отображать границы вокруг таблицы (по умолчанию.

hsides
- отображать только горизонтальные границы сверху и снизу.

vsides
- отображать только вертикальные границы слева и справа.

above
- отображать только верхнюю границу таблицы.

below
- отображать только нижнюю границу таблицы.

lhs
- отображать только левую границу.

rhs
- отображать только правую границу. Пример
"http://www.w3.org/TR/html4/loose.dtd">

frame="hsides" width="400" cellpadding="3" Энергетическая ценность продуктов питания bgcolor ="#deb887" title="Шапка">

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
84

Продукт Белки Жиры Углеводы ккал
Хлеб ржаной 4,7 0,7 49,8 214
Молоко 2,8 3,2 4,7 58
Картофель 2 0,1 19,7 83
Свинина 11,4 49,3 9 489

Итого: 20,9 53,3 83,2 844

rules="groups" width="500" cellpadding="3" Энергетическая ценность продуктов питания bgcolor ="#deb887" title="Шапка">

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
85
Продукт Белки Жиры Углеводы ккал
Хлеб ржаной 4,7 0,7 49,8 214
Молоко 2,8 3,2 4,7 58
Картофель 2 0,1 19,7 83
Свинина 11,4 49,3 9 489
Итого: 20,9 53,3 83,2 844

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
86 Глава 13 Фоновая музыка.
.. или то чего лучше не делать. Раскрывая все возможности HTML языка, в тринадцатой несчастливой главе, вынужден Вам рассказать о теге

который позволяет внедрять в страницу сайта фоновую музыку. Другими словами когда пользователь зайдёт на Ваш сайт он услышит звучание музыки указанной с помощью вышеупомянутого тега, ну естественно если у него подключены колонки или наушники. Итак, тег

первое, что необходимо сказать об этом теге то, что он не входит в официальную спецификацию HTML, а является инициативой компании
M
icrosoft для браузера
Internet Explorer
, так что большинство других браузеров игнорируют данный тег. Для того чтобы вставить аудио файл в какую либо страницу сайта, в качестве фоновой музыки, нужно в теге

с помощью атрибута src указать путь к аудио файлу Вот так

- закрывающий тег необязателен. Ну и собственно вставить эту конструкцию в html документ, обычно тег располагают в "голове" документа между тегами
Сам аудио файл должен быть в формате
WAV, AU
или Пример
"http://www.w3.org/TR/html4/loose.dtd">

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
87

По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своё
м корабле, На белом своём корабле.
Музыка: В. Шаинский Слова Д. Непомнящий

По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своём корабле,
На белом своём корабле

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
88 Музыка В. Шаинский Слова Д. Непомнящий

© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
89 Глава 14 Текст - логика и физика. В этой главе мы снова будем работать с текстом, ив отличие от материала, изложенного во второй главе Редактируем текст посмотрим на некоторые вещи под другим углом, атак же поговорим о ранее не вошедших в этот учебник тегах, с помощью которых также можно форматировать текст на страницах сайта. Дело в том что все теги предназначенные для работы с текстом можно разделить на две группы "теги физического форматирования текста" и "теги логического форматирования текста" Теперь по порядку. Теги физического форматирования текста. О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их
, , , , , , , , ^{, _{, , , >… - всё это теги физического форматирования текста. Почему их так назвали Да все просто. потому что данные теги способны тем или иным способом физически воздействовать на текст. делать его жирным, курсивом, маленьким, большими т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации HTML ив различных браузерах отображается практически одинаково. На всякий случай вновь покажу старый пример Научная статья.}}Если разбавить дистиллированную воду НО сорока процентами этилового спирта С2Н5ОН то получится жидкость во более известную широкой публике под названием - водка. Впервые данную пропорцию~~придлажил предложил Дмитрий Иванович МЕНДЕЛЕЕВ Распитие спиртных напитков вредит вашему здоровью~~
© Семикопенко Алексей Алексеевич | www.webremeslo.ru 90 Однако если Вы изучали справочник HTML: (http://www.webremeslo.ru/spravka/spravka.html), то наверняка обратили внимание что вышеперечисленные теги это далеко не все инструменты для работы с текстом А если Вы изучали справочник скрупулезно и пристально, то наверное заметили что некоторые теги выполняют одни и те же действия над текстом. Например, чем отличается тег от тега ? или какая разница между и ? ведь результат и там и там одинаков Так да не так. отличия есть. и они достаточно существенные. Логическая разметка текста. Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой "логическая разметка документа. Под логической разметкой документа, прежде всего, принято понимать разметку текста тегами направленную на удобство работы поисковых систем и других программ, которые работают сданным документом, атак же придавать тексту в документе некий смысл. Так вот программам абсолютно по барабану как выглядит Ваш документ, красивый он или нет, какой стиль шрифта и текста используется и.т.д. программы в первую очередь пытаются найти логику на Вашей страничке, чтобы в дальнейшем использовать её по своему усмотрению, например для более релевантной поисковой выдачи или для автоматического составления содержания Вашего документа. Теперь давайте опять вернемся к вопросу выше "Чем отличается тег от тега ?" - казалось бы какая разница ведь текст и там и там будет отображаться курсивом .. всё дело в том что тег - (курсив) - является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег (особенно важный текст) - является тегом логического формирования текста и предназначен для машин А то, что текст, взятый в тег , обычно в браузерах отображается курсивом - это всего лишь, скажем так "мода" и придумка браузеров. Спецификация HTML не говорит о том, что теги логического форматирования текста должны определённым образом отображаться браузерами, что вот, например тот же тег должен быть отображен именно курсивом и не как иначе, а говорит лишь о том, что такой текст должен отличатся от основного и особым образом выделятся в документе. Так какие теги лучше использовать Ну раз уж мы уже заочно познакомились с тегами и покажу пример, комментарии будут ниже. "http://www.w3.org/TR/html4/loose.dtd"> Как создать сайт? Для того, чтобы самостоятельно создать сайт для начала в блокноте нужно написать следующие теги <html> - начало документа <head> - начало головы </head> - закрытие головы <body> - начало тела </body> - закрытие тела </html> - конец документа © Семикопенко Алексей Алексеевич | www.webremeslo.ru 91 Теперь объясню, почему на страницах данного сайта, как ив примере выше, в некоторых случаях используются теги и , а в других случаях и Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу "Как создать сайт" или "Самостоятельное создание сайта" видели в первых строчках поисковой выдачи гугла ссылку Как создать сайт "(http://webremeslo.ru)" и переходили по ней на главную страницу моего ресурса :) . Так вот пометив нужные мне куски текста с помощью тегов и , ятем самым даю понять гуглу что этот текст важный и что на него следует обратить особенное внимание - конечно, это не залог успеха, тем более для столь популярных (высокочастотных) пользовательских запросов, но при прочих равных условиях, это большой плюс в глазах поисковых систем. И противоположенный случай. Как человек старающийся сделать сайт удобным для чтения и восприятия другими людьми, я выделяю некоторые участки текста курсивом (юмор, примечания и прочую отсебятину) и жирным шрифтом (изучаемые теги в примерах, ноя не хочу, чтобы поисковые системы обращали сильное внимание на фразы типа "начало головы" "закрытие тела" - так как сайт написан для начинающих веб-ремесленников, а не для начинающих патологоанатомов, поэтому размечаю такой текст тегами и - они дают нужный результат, собственно полужирный шрифт и курсив, ноне являются "красной тряпкой" для программ. Теги логического форматирования текста. Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом. Буду перечислять. Тег Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией. CSS Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут. title="Cascading Style Sheets">CSS позволит Вам без труда изменить стиль любого тега логического форматирования текста Тег Данный тег выделяет в тексте акроним. Акроним это почти тоже самое что и аббревиатура, только образованная изначальных букв, словили словосочетаний, произносимая как единое слово, а не побуквенно. Вступай в коммунистический союз молодёжи">комсомол!! Также как и с аббревиатурой для расшифровки текста желательно использовать атрибут Тег Указывает автора документа и его адрес. Обычно отображается курсивом. Предназначен для поисковых систем для сбора информации об авторе его адресе и прочей информации владельца/цев сайта. © Семикопенко Алексей Алексеевич | www.webremeslo.ru 92 < address > Вася Пупкин г. Урюпинск Макаронная фабрика 2010г. address > Тег Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом. Как сказал Остап Бендер Лед тронулся господа присяжные заседатели Тег Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом. function() - так обозначается функция в PHP Тег Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым. Напоминает теги физического форматирования ke> и сокращённый - перечёркнутый текст. Использование тега , более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги и , которые помечены спецификацией 4.01 как нежелательные. Старая цена р - Новая 999 р.!!! Тег Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег Акроним - аббревиатура, образованная изначальных букв, словили словосочетаний, произносимая как единое слово, а не побуквенно. Тег Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым. Противоположен по значению тегу с ним же в паре обычно они используется. Старая цена р - Новая 999 р Тег Выделяет особенно важный фрагмент текста. Обычно отображается курсивом. Как создать сайт - узнай на Вебремесло.ру!! Тег
© Семикопенко Алексей Алексеевич | www.webremeslo.ru 93 От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом. Нажмите Ctrl + Z для того чтобы отменить последнее действие. Тег Выделяет в тексте цитату. В отличие от тега цитата обозначенная тегом автоматически берётся браузерами в кавычки. Как сказал Остап Бендер Лед тронулся господа присяжные заседатели Кстати, есть еще и тег физического форматирования текста данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста. Пример "http://www.w3.org/TR/html4/loose.dtd"> Эта цитата создана с помощью тега логического форматирования текста <q>: Лед тронулся господа присяжные заседатели - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью CSS псевдокласса lang и его значения quotes - кавычки. Эта цитата создана с помощью тега логического форматирования текста ><cite>: Лед тронулся господа присяжные заседатели. Остап Бендер. 12 стульев - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ А эта цитата создана с помощью тега физического форматирования текста <blockquote>: Лед тронулся господа присяжные заседатели - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников © Семикопенко Алексей Алексеевич | www.webremeslo.ru 94 Как создать сайт - узнай на Вебремесло.ру!! Тег Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом. Данная функция использует переменную $count Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю итак всё понятно, а вот несколько полезных советов по разметке текста в документе дам. Полезные советы Стиль всех тегов как логического, таки физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS: (http://www.webremeslo.ru/css/glava0.html), если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности те. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того С открывает куда более широкие возможности связанные как со стилем текста, таки с дизайном сайта в целом. Старайтесь правильно размечать текст на страницах Вашего сайта. а именно Для начала, разбейте весь Ваш текст на параграфы с помощью тега - это облегчит чтение текста как для людей таки для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста. Соблюдайте значимость заголовков - те. допустим заголовок страницы берите в тег подзаголовки в тег еще менее значимые подзаголовочки в теги т. д. В идеале на странице должен быть всего один заголовок , потом текст разбивается несколькими и далее по значимости заголовков. Используйте теги логической разметки лишь там где они действительно необходимы те. не стоет например выделять аббревиатуру с помощью цитаты и наоборот. на то она и логика чтобы всё было логично Используйте ив тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте и Когда выучите CSS забудьте и выкиньте из головы теги все его атрибуты Им уже давно никто не пользуется, ну за редким исключением конечно.

20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50

Продукт	Белки	Жиры	Углеводы	ккал
Хлеб ржаной	4,7	0,7	49,8	214
Молоко	2,8	3,2	4,7	58
Картофель	2	0,1	19,7	83
Свинина	11,4	49,3	9	489
Итого:	20,9	53,3	83,2	844

20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50

Учебник по HTML. Учебник html для начинающих. Версия для печати раздела "Учебник html"

-

20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50
20	20	20	40	40	60	20	30	50