HTML: Популярный самоучитель - Страница 5

Изменить размер шрифта:

• bgcolor – цвет фона HTML-документа;

• text – цвет шрифта документа;

• link – цвет непосещенных гиперссылок;

• vlink – цвет посещенных гиперссылок;

• alink – цвет гиперссылок при выборе их пользователем (при нажатии Enter произойдет переход по такой гиперссылке).

Все атрибуты, позволяющие задавать цвет (не только элемента BODY, но прочих элементов, которые будут рассмотрены далее), имеют тип %Color. Значения таких атрибутов могут задаваться шестнадцатеричными числами с символом # в начале каждого числа, например:

bgcolor = «#FF0005»

При задании цвета данным способом следует помнить, что числом задается цвет в RGB-формате. Это значит, что первые два символа задают интенсивность красного цвета от 0 до FF (255 в десятичной системе счисления), третий и четвертый символы – интенсивность зеленого цвета, а два последних – интенсивность синего цвета. В данном примере интенсивности красного, зеленого и синего цветов равны FF, 0 и 5 соответственно.

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

Таблица 2.3. Идентификаторы и значения часто используемых цветов
HTML: Популярный самоучитель - i_005.png
HTML: Популярный самоучитель - i_006.png

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

Данный пример базируется на уже полученных знаниях (на теги задания гиперссылок и теги

можете пока не обращать внимания, так как важен только цвет гиперссылок и текста) (пример 2.2).

Пример 2.2. Пример задания названия документа и параметров цвета

Пример задания цветов в элементе BODY

background = "2.2.html-files/back.jpg"

text = "black"

link = "#0080FF"

vlink = "blue"

alink = "navy">

Обычный неформатированный текст должен отображаться черным цветом

Непосещенная гиперссылка (голубой цвет)

Посещенная гиперссылка (синий цвет)

Выделенная гиперссылка (темно-синий цвет)

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

HTML: Популярный самоучитель - i_007.png

Рис. 2.1. Результат обработки HTML-текста примера

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

Глава 3

Текст

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

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

3.1. Особенности ввода текста

При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ.

Ссылки на символы могут быть представлены любым из указанных ниже способов:

• &#D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления);

• &#xH; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);

• &имя_символа; – позволяет использовать именованную ссылку на символ.

Как можно увидеть, ссылка на символ в тексте HTML-документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1.

Таблица 3.1. Имена символов
HTML: Популярный самоучитель - i_008.png

В качестве примера использования ссылок на символы в HTML-документе можно рассмотреть следующий HTML-код (пример 3.1).

Пример 3.1. Использование ссылок на символы

Именованные ссылки на символы

Именованные ссылки на символы </</p> <p>TITLE><BR></p> <p><BODY color = " yellow "</p> <p>bgcolor = " yellow " > <BR></p> <p>Текст HTML-документа <BR></p> <p></BODY></p> <p></BODY></p> </div><p>При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1.</p><div class="fb2-image"><img width="424" height="222" alt="HTML: Популярный самоучитель - i_009.png" src="/covers34534265325342/1/5/9/5/2/0/114879/1457155785/i_009.png"></div><p>Рис. 3.1. Использование ссылок на символы</p><div class="fb2-empty-line"></div><p>Конечно, возможности использования ссылок на символы приведенным примером не ограничены. Ссылки на символы очень часто применяются для записи математических формул. Кроме того, их можно использовать для записи текста на иностранном языке, но с использованием символов другого языка (например, для ввода символа в при использовании символов только английского языка).</p><a name="section_28" class="fb2-title"><p>3.2. Форматирование текста</p> </a><p>Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.</p><a name="section_30" class="fb2-title"><p>Задание начертания текста</p> </a><p>Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML-код добавляются элементы, приведенные в табл. 3.2.</p><div class="fb2-subtitle">Таблица 3.2. Элементы задания начертания текста</div></div><a href="https://knigger.com/kniga-html-populyarnyi-samouchitel-159520" class="after-textbook">Оригинальный текст книги читать онлайн бесплатно в онлайн-библиотеке Knigger.com</a> </div> <!--<div class="tags">Категории: </div>--> </article> <div class="paging"> <ul class="pagination"> <li><a class="to_the_first" href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-1 title="на первую" style="text-decoration:none;">первая</a></li> <li class="prev"><a href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-4 title="на предыдущую" style="text-decoration:none;">назад</a></li> <li><a href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-4 style="text-decoration:none;">4</a></li> <li class="active"><span>5</span></li> <li><a href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-6 style="text-decoration:none;">6</a></li> <li class="next"><a href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-6 title="на следующую" style="text-decoration:none;">вперед</a></li> <li><li><a class="to_the_last" href=/read-book/kniga-html-populyarnyi-samouchitel-159520/page-13 title="на последнюю" style="text-decoration:none;">последняя</a></li></li> </ul> </div> <div id=allpages><form action="/read-book.php"> <input type="hidden" name="bid" value="159520"> <input type="number" class="form-control" id="spinner" min="1" max="13" name="page" placeholder="5" value="" style="width: 70px;" required> <span class="input-group-btn"> <button class="btn btn-default" type="submit">Перейти</button> </span> </form></div> <div style="margin:25px auto;text-align:center;"> <div class='advblock'> <!--Тип баннера: knigger.com Desktop Central--> <div id="adfox_16436217844621431"></div> <script> window.yaContextCb.push(()=>{ Ya.adfoxCode.createScroll({ ownerId: 264109, containerId: 'adfox_16436217844621431', params: { p1: 'coiqd', p2: 'hczm' } }, ['desktop', 'tablet'], { tabletWidth: 830, phoneWidth: 480, isAutoReloads: false }) }) </script> <!--Тип баннера: knigger.com Mobile Feed Сквозной--> <div id="adfox_164362218085173156"></div> <script> window.yaContextCb.push(()=>{ Ya.adfoxCode.createScroll({ ownerId: 264109, containerId: 'adfox_164362218085173156', params: { p1: 'coiql', p2: 'hczo' } }, ['phone'], { tabletWidth: 830, phoneWidth: 480, isAutoReloads: false }) }) </script> </div> </div> <!-- <div id=path><div id=path itemprop="breadcrumb"><a href="/">Главная</a>/ <a rel="author" title="Автор Чиртик Александр Анатольевич - список книг автора" href="/author-chirtik-aleksandr-anatolevich-19812" itemprop="author">Чиртик Александр Анатольевич</a>/ <a href="/kniga-html-populyarnyi-samouchitel-159520">HTML: Популярный самоучитель</a> / Страница 5</div></div> --> </div> <div class="seo_text"></div> </div> <div class="go-up" title="Вверх" id='ToTop'>⇧</div> <div class="go-down" title="Вниз" id='OnBottom'>⇩</div> <div id="overlay"> <div id="modal_form"><!-- Сaмo oкнo --> <span id="modal_close">X</span> <!-- Кнoпкa зaкрыть --> <div id="result-modal"></div> </div> </div><!-- Пoдлoжкa --> </section> <footer id=footer> <div class="container"> <div class="list active"> <p class="title">Основное</p> <ul> <li><a href="/biblioteka" >Библиотека</a></li> <li><a href="/genres">Жанры</a></li> <li><a href="/blog" >Блог</a></li> <li><a href="/authors" >Авторы</a></li> </ul> </div> <div class="list"> <p class="title">Интересное</p> <ul> <li><a href="/top100" >ТОП-100</a></li> <li><a href="/new" >Новинки</a></li> </ul> </div> <div class="list"> <p class="title">Мы в соцсетях</p> <ul> <li><a href="https://www.facebook.com/kniger.books/" target="_blank" title="Книгер онлайн в Facebook"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a></li> <li><a href="https://plus.google.com/u/0/101601772326180999157" target="_blank" title="Книгер онлайн в Google+"><i class="fa fa-google-plus" aria-hidden="true"></i> Google+</a></li> <li><a href="https://plus.google.com/communities/102973326758879941160" target="_blank" title="Книгер онлайн в Google+"><i class="fa fa-google-plus" aria-hidden="true"></i> Google+ Сообщество</a></li> <li><a href="https://vk.com/kniggerlibrary" target="_blank" title="Книгер онлайн вКонтакте"><i class="fa fa-vk" aria-hidden="true"></i> Вконтакте</a></li> <li><a href="https://www.pinterest.com/knigger_com/pins/" target="_blank" title="Книгер онлайн в Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i> Pinterest</a></li> <li><a href="https://twitter.com/Knigger3" target="_blank" title="Книгер онлайн Twitter"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li> <li><a href="https://www.instagram.com/kniger.books/" target="_blank" title="Книгер онлайн Instagram"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li> <li><a href="http://feeds.feedburner.com/kniggercom" target="_blank" title="Книгер онлайн RSS"><i class="fa fa-rss" aria-hidden="true"></i> RSS</a></li> </ul> </div> <div class="list"> <p class="title">Полезное</p> <ul> <li>E-mail: <a href="mailto:kniger.com@gmail.com">kniger.com@gmail.com</a></li> <li><a href="/privacy">Политика конфиденциальности</a></li> <li><a href="/cookies">Файлы Cookie</a></li> </ul> </div> <p>© Knigger.com 2018</p> <noindex> <div id=counters style="display:none;"> <!-- hit.ua --> <a href='http://hit.ua/?x=72429' target='_blank'> <script language="javascript" type="text/javascript"><!-- Cd=document;Cr="&"+Math.random();Cp="&s=1"; Cd.cookie="b=b";if(Cd.cookie)Cp+="&c=1"; Cp+="&t="+(new Date()).getTimezoneOffset(); if(self!=top)Cp+="&f=1"; //--></script> <script language="javascript1.1" type="text/javascript"><!-- if(navigator.javaEnabled())Cp+="&j=1"; //--></script> <script language="javascript1.2" type="text/javascript"><!-- if(typeof(screen)!='undefined')Cp+="&w="+screen.width+"&h="+ screen.height+"&d="+(screen.colorDepth?screen.colorDepth:screen.pixelDepth); //--></script> <script language="javascript" type="text/javascript"><!-- Cd.write("<img src='//c.hit.ua/hit?i=72429&g=0&x=2"+Cp+Cr+ "&r="+escape(Cd.referrer)+"&u="+escape(window.location.href)+ "' border='0' wi"+"dth='1' he"+"ight='1'/>"); //--></script> <noscript> <img src='//c.hit.ua/hit?i=72429&g=0&x=2' border='0'/> </noscript></a> <!-- / hit.ua --> <!--LiveInternet counter--><script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='31' height='31'><\/a>") </script><!--/LiveInternet--> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-105179800-1', 'auto'); ga('send', 'pageview'); </script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(45718467, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/45718467" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> </noindex> </div> </footer> <!-- Yandex.RTB R-A-737529-19 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', platform: 'touch', blockId: 'R-A-737529-19' }) })</script> <script id="dsq-count-scr" src="//http-knigger-com.disqus.com/count.js" async></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "name" : "Онлайн библиотека Книгер", "url" : "https://knigger.com/", "sameAs" : [ "https://www.facebook.com/kniger.books/", "https://plus.google.com/u/0/101601772326180999157", "https://vk.com/kniggerlibrary", "https://www.pinterest.com/knigger_com/pins/", "https://twitter.com/Knigger3", "https://www.instagram.com/kniger.books/" ] } </script> <div class="bottom__cookie-block"> <p>Продолжая использовать сайт, Вы соглашаетесь на сбор файлов cookie</p> <a href="javascript:void(0);" class="ok">Ок</a> <a href="/cookies" class="podr">Подробнее</a> </div> <script type="text/javascript" src="/js/cookies.js"></script> <script> $(function() { if (!$.cookie('hideModal')) { var delay_popup = 1000; setTimeout("document.querySelector('.bottom__cookie-block').style.display='inline-block'", delay_popup); } $.cookie('hideModal', true, { expires: 30, path: '/' }); }); $('.ok').click(function(){ $('.bottom__cookie-block').fadeOut(); }); </script> <div style='width: 100%; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; z-index: 999999;' id='closing'> <div style='box-shadow: rgba(17, 58, 102, 0.45) 0px 4px 6px 3px; position: relative;'> <!--Тип баннера: knigger.com Mobile Прилипашка--> <div id="adfox_165572643681011879"></div> <script> window.yaContextCb.push(()=>{ Ya.adfoxCode.createAdaptive({ ownerId: 264109, containerId: 'adfox_165572643681011879', params: { p1: 'coiqt', p2: 'hczq' } }, ['phone'], { tabletWidth: 830, phoneWidth: 480, isAutoReloads: false }) }) </script> <span id='close' style='background: #fff; width: 27px; height: 27px; border-radius: 5px; border: 1px solid grey; color: #000; display: flex; align-items: center; justify-content: center; position: absolute; top: -29px; right: 0px; z-index: 999999; font-size: 25px'>×</span> </div> </div> <script> const websitebody = document.querySelector('body'); console.log(screen.width); if (screen.width>500){ document.getElementById('closing').style.display = 'none' } websitebody.addEventListener('click', event => { if (event.target.id === 'close') { setTimeout(document.getElementById('closing').style.display = 'none', 500); } }) </script> </body> </html>