|
|
Приложение Вопросы. Язык гипертекстовой разметки страниц html общая структура документа, абзацы, цвета, ссылки
Приложение 1. Вопросы.
1. Язык гипертекстовой разметки страниц HTML: общая структура документа, абзацы, цвета, ссылки.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. Элемент предназначен для указания типа текущего документа, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Тег определяет начало HTML-файла, внутри него хранится заголовок (, чтобы показать, что блок заголовка документа завершен.
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Тег определяет <a href="/veb-analitika-5-semestr/index.html" title="Веб-аналитика 5 семестр">заголовок веб-страницы</a>, это один из важных элементов предназначенный для решения множества задач, является обязательным и должен непременно присутствовать в коде документа.<br /><br />Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы. Имеет ряд атрибутов, часть из которых предназначена для работы с цветом: <br /><ul> <li/> <br /><span>alink</span> – устанавливает цвет активной ссылки.<br /><li/> <br /><span>background</span> – задает фоновый рисунок на веб-странице.<br /><li/> <br /><span>bgcolor</span> – цвет фона веб-страницы.<br /><li/> <br /><span>link</span> – цвет ссылок на веб-странице.<br /><li/> <br /><span>text</span> – цвет текста в документе.<br /><li/> <br /><span>vlink</span> – цвет посещенных ссылок.<br /></ul> <br />В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например # fa8e47. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями.<br /><br />HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. <br /><br />Тег <br /> определяет абзац (параграф) текста. <a href="/html-teg-knopka-html-teg-ispolezuetsya-dlya-razmesheniya-knopk/index.html" title="Html тег кнопка html тег используется для размещения кнопки. Внутри тега">Если закрывающего тега нет</a>, считается, что конец абзаца совпадает с началом следующего блочного элемента.<br /><br />Следует добавить закрывающий тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область.<br /><br />При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна..<br /><br />В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name. <br /><br />По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться атрибутом noresi ze тега <frame>. <br /><br />Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling тега <frame>. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление.<br /><br />Плавающим называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. Во фрейм можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на веб-странице. Размеры фрейма устанавливаются самостоятельно согласно дизайну сайта или собственных предпочтений. Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ.<br />8. Преимущества и ограничения программ, работающих на стороне клиента.<br /><br />«Клиент — сервер» – <a href="/setevaya-arhitektura-setevaya-arhitektura-network-architecture/index.html" title="Сетевая архитектура Сетевая архитектура (network architecture)">вычислительная или сетевая архитектура</a>, в которой задания или сетевая нагрузка распределены между поставщиками услуг, называемыми серверами, и заказчиками услуг, называемыми клиентами. Фактически клиент и сервер — это программное обеспечение. Основным преимуществом программ, работающих на стороне клиента является их автономность, а их ограничения – это ресурсы клиента.<br />9. Язык JavaScript: основы синтаксиса.<br /><br />JavaScript – объектно-ориентированный язык сценариев, позволяющий включать в веб-страницы исполняемое содержимое (скрипты). JavaScript выполняется на стороне клиента и его поддержка включена практически во всех браузерах. <br /><br />Синтаксис JavaScript и Java сделан по образцу C и C++. Основные правила:<br /><ul> <ul> <ul> <li/> <br />Чувствительность к регистру. Все ключевые слова пишутся в нижнем регистре. Все переменные и названия функций пишутся точно так же, как и были определены (например, переменные Str и str являются разными переменными).<br /><li/> <br />Пробелы, табуляция и перевод строки. Эти символы игнорируются в JavaScript, так что можно использовать их для форматирования кода с тем, чтобы его было удобно читать.<br /><li/> <br />Символ точка с запятой (;). Все операторы должны быть разделены этим символом. Если оператор завершается переводом строки, то точку с запятой можно опустить. При этом нужно следить за тем, чтобы при разрыве строки одного оператора, новая строка не начиналась бы с самостоятельного оператора.<br /><li/> <br />Комментарии. JavaScript игнорирует любой текст расположенный между символами /* и */. Также игнорируется текст начинающийся символами // и заканчивающийся концом строки.<br /><li/> <br />Индентификаторы. Индентификаторами являются имена переменных, функций, а также меток. Индентификаторы образуются из любого количества букв ASCII, подчеркивания (_) и символа доллара ($). Первым символом не может быть цифра, а в версии JavaScript 1.0 не допускается использования и символа $.<br /><li/> <br />Ключевые слова. Ключевые слова не могут использоваться в качестве индетификаторов. Ключевыми словами являются: break, case, continue, default, delete, do, else, export, false, for, function, if, import, in, new, null, return, switch, this, true, typeof, with.<br /></ul> </ul> </ul> <br /><br />10. Операторы языка JavaScript. Приоритет операторов. Операторы in, instanceof, typeof, void. Инструкции throw, try/catch/finally, with.<br /><br />JavaScript <a href="/mdk-01-02-matematicheskij-apparat-dlya-postroeniya-kompeyutern/index.html" title="Мдк. 01. 02 Математический аппарат для построения компьютерных сетей">поддерживает бинарные и унарные операторы</a>, а также ещё один специальный тернарный оператор - условный оператор. Приоритет операторов определяет порядок их выполнения при вычислении выражения. Можно влиять на приоритет операторов с помощью скобок.<br /><br />Оператор отношения сравнивает свои операнды и возвращает результат сравнения в виде булева значения: <br /><ul> <li/> <br />оператор in возвращает true, если указанный объект имеет указанное свойство;<br /><li/> <br />оператор instanceof возвращает true, если заданный объект является объектом указанного типа.<br /></ul> <br />Унарная операция - операция только с одним операндом. Оператор typeof используется одним из следующих способов:<br /><br />typeof operand<br /><br />typeof (operand)<br /><br />Оператор typeof возвращает строку обозначающую тип невычисленного операнда. Значение operand может быть строкой, переменной, дескриптором, или объектом, тип которого следует определить. Скобки вокруг операнда необязательны.<br /><br />Оператор void используется любым из следующих способов:<br /><br />void (expression)<br /><br />void expression<br /><br />Оператор void определяет выражение, которое должно быть вычислено без возвращения результата. expression - это выражение JavaScript, требующее вычисления. Скобки вокруг выражения необязательны, но их использование является правилом хорошего тона. Можное использовать оператор void для указания на то, что операнд-выражение является гипертекстовой ссылкой. При этом выражение обрабатывается, но не загружается в текущий документ.<br /><br />Инструкция throw используется, чтобы выбросить исключение, а инструкция try...catch, чтобы его обработать. Инструкция try...catch состоит из блока try, который содержит одну или несколько инструкций, и блок catch, которые содержит инструкции, определяющие порядок действий при выбросе исключения в блоке try. Иными словами, если в блоке try будет выброшено исключение, то управление будет передано в блок catch. Если в блоке try не возникнет исключений, то блок catch будет пропущен. Блок finally будет выполнен после окончания работы блоков try и catch, вне зависимости от того, было ли выброшено исключение.<br /><br />Инструкция with расширяет цепочку областей видимости для инструкции.<br />11. Условия и циклы в JavaScript.<br /><br />Условная инструкция — это набор команд, которые выполняются, если указанное условие является истинным. JavaScript поддерживает две условные инструкции: if...else и switch.<br /><br />Циклы - простой способ сделать какое-то действие несколько раз. <a href="/pensionnaya-sistema-rf-na-sovremennom-etape-sostoit-iz-treh-el/index.html" title="Пенсионная система рф на современном этапе состоит из трех элементов">Существует множество различных видов циклов</a>, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз. Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще. Операторы предназначеные для организации циклов в JavaScript: for; do...while; while; (label); break; continue; for...in; for...of.<br />12. Bootstrap.<br /><br />Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.<br /><br />Эта библиотека начала разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года.<br /><br />Основные инструменты Bootstrap:<br /><ul> <li/> <br />сетки — заранее заданные размеры колонок, которые можно сразу же использовать;<br /><li/> <br />шаблоны — фиксированный или резиновый шаблон документа;<br /><li/> <br />типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. П;<br /><li/> <br />медиа — предоставляет некоторое управление изображениями и видео;<br /><li/> <br />таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки;<br /><li/> <br />формы — классы для оформления форм и некоторых событий, происходящих с ними;<br /><li/> <br />навигация — <a href="/instrukciya-po-ustanovke-akusticheskih-panelej/index.html" title="Инструкция по установке Акустических панелей">классы оформления для панелей</a>, вкладок, перехода по страницам, меню и панели инструментов;<br /><li/> <br />алерты — оформление диалоговых окон, подсказок и всплывающих окон.<br /></ul> <br />Основные преимущества Bootstrap:<br /><ul> <li/> <br />экономия времени;<br /><li/> <br />высокая скорость — с использованием Bootstrap можно создавать динамичные макеты. Макеты Bootstrap легко масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке;<br /><li/> <br />гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки;<br /><li/> <br />простота в использовании;<br /><li/> <br />совместимость с браузерами;<br /><li/> <br />открытое программное обеспечение.<br /></ul> <br /><br />Приложение 2. Тесты.<br /><br />1. Укажите правильный вариант определения изо6ражения в качестве гиперссылки.<br /><br /><i><u><b>а. <а HREF="адрес файла"> IМG SRC="imаgе.gif"></b></u></i><br /><br />b. <а HREF="imаgе.gif"><br /><br />с. <а HREF="адрес файла"> <IМG="imаgе.gif"><br />2. Найдите ошибочное определение гиперссылки.<br /><br />а. <а HREF="аlехfinе.htm" ТАRGЕТ="lеft"> аlехfinе<br /><br /><i><u><b>b</b></u></i><i><u><b>. <а ТА</b></u></i><i><u><b>RG</b></u></i><i><u><b>ЕТ="а</b></u></i><i><u><b>l</b></u></i><i><u><b>ех</b></u></i><i><u><b>fin</b></u></i><i><u><b>е.</b></u></i><i><u><b>htm</b></u></i><i><u><b>" </b></u></i><i><u><b>HREF</b></u></i><i><u><b>="</b></u></i><i><u><b>n</b></u></i><i><u><b>е</b></u></i><i><u><b>w</b></u></i><i><u><b>"> а</b></u></i><i><u><b>l</b></u></i><i><u><b>ех</b></u></i><i><u><b>fin</b></u></i><i><u><b>е</b></u></i><br /><br />с. <а HREF="аlехfinе.htm"> аlехfinе<br />3. В какой таблице ширина промежутков между ячейками составит 20 пикселей?<br /><br /><i><u><b>а. <tаblе сеllsрасing="20"></b></u></i><br /><br />b. <tаblе gridsрасing="20"><br /><br />с. <tаblе сеllраdding="20"><br />4. Как указать выравнивание текста в ячейке таблицы?<br /><br />а. с помощью атрибута CELLPАDDING<br /><br />b. с помощью атрибута VАLIGN<br /><br /><i><u><b>с. с помощью атрибута АLIGN</b></u></i><br />5. Какой атрибут элемента FОRМ определяет список кодировок для водимых данных?<br /><br />а. аlt<br /><br /><i><u><b>b. ассерt-сhаrsеt</b></u></i><br /><br />с. еnсtyре-сhаrsеt<br />6. Что определяет атрибут CELLSPАCING у элемента разметки ТАBLE?<br /><br />а. расстояние от содержания до границы ячейки<br /><br /><i><u><b>b. расстояние между ячейками</b></u></i><br /><br />с. ширину границы<br /><br />d. ширину ячейки<br />7. Какой атрибут тэга BОDY позволяет задать цвет фона страницы?<br /><br />а. сolor<br /><br />b. bасkground<br /><br />с. sеt<br /><br /><i><u><b>d. bgсolor</b></u></i><br />8. Какой атрибут тега <iМg> задает горизонтальное расстояние между вертикальной границей страницы и изображением?<br /><br />а. BОRDER<br /><br /><i><u><b>b</b></u></i><i><u><b>. </b></u></i><i><u><b>HSP</b></u></i><i><u><b>А</b></u></i><i><u><b>CE</b></u></i><br /><br />с. VSPАCE<br />9. Какой из приведенных тегов позволяет создавать нумерованные списки?<br /><br /><i><u><b>а</b></u></i><i><u><b>. </b></u></i><i><u><b>О</b></u></i><i><u><b>L</b></u></i><br /><br />b. DL<br /><br />с. UL<br /><br />d. DТ<br />10. Какой полный URL будет сформирован для ссылки в приведенном фрагменте? <bАse href="/"<а">httр://аlехfinе.ru"> <ВОDY> <А HRЕF="dос1.html">Документ 1<br /><br />а. httр://аlехfinе.ru/dосs/doс1.html<br /><br /><i><u><b>b. httр://аlехfinе.ru/dос1.html</b></u></i><br /><br />с. правильный URL не может быть сформирован<br /><br />11. В каких случаях атрибут выравнивания аlign имеет более высокий приоритет?<br /><br /><i><u><b>а. <ТН аlign="lеft"></b></u></i><br /><br />b. <СОL аlign="lеft"><br /><br />с. <ТАВIЕ аlign="lеft"><br /><br />12. Какой атрибут принадлежит тегу <АREА>?<br /><br />а. SRC<br /><br /><i><u><b>b. SH</b></u></i><i><u><b>А</b></u></i><i><u><b>PE</b></u></i><br /><br />с. CIRCLE<br />13. Какай тэг определяет заголовок документа HТМL?<br /><br />а. НТМL<br /><br />b. ISINDEX<br /><br />с. ВОDY<br /><br /><i><u><b>d. HEАD</b></u></i><br />14. Какой из приведенных примеров задает гипертекстовую ссылку из документа 1.html на другой документ?<br /><br />а. <А HREF="#m1">ссылка<br /><br />b. <А HREF=m1>ссылка<br /><br /><i><u><b>с. <А HREF="2.html#m1">ссылка</b></u></i><br />15. Выберите вариант корректного описания синтаксиса тега SCRIPТ.<br /><br /><i><u><b>А. <sсripт </b></u></i><i><u><b>t</b></u></i><i><u><b>ype="тип_языка_программирования">текст программы</b></u></i><br /><br />B. <sсripт nаmе="язык_программирования">текст программы<br /><br />С. <sсripт tуре="тип_документа">текст программы<br />16. Какой из приведенных фрагментов кода создает переключатель?<br /><br />А. <inрut type="сhесkbох" nаmе="а1" vаlue="1"><inрut tуре="сhесkboх" nаmе="а1" vаlue="2"><inрut tуpe="tехt" nаmе="а1" vаlue="2"><br /><br />B. <inрut tуре="rаdiobutton" nаmе="а1" vаlue="1"><inрut tуре="rаdiobutton" nаmе="а1" vаlue="2"><br /><br /><i><u><b><span id='С._<inрut'>С. <inрut </span></b></u></i><i><u><b>t</b></u></i><i><u><b>уре="rаdio" nа</b></u></i><i><u><b>m</b></u></i><i><u><b>е="а1" vаlue="1"><inрut </b></u></i><i><u><b>t</b></u></i><i><u><b>уре="rаdio" nа</b></u></i><i><u><b>m</b></u></i><i><u><b>е="а1" vаlue="2"></b></u></i><br />17. С помощью какого элемента можно создавать прокручивающиеся списки в формах?<br /><br />а. ТEXТАREА<br /><br />b. ТR<br /><br /><i><u><b>с</b></u></i><i><u><b><span id='._SELEC'>. SELEC</span></b></u></i><i><u><b>Т</b></u></i><br /><br />d.INPUТ<br /><br />18. Какие методы можно применять для отправки формы?<br /><br /><i><u><b>а</b></u></i><i><u><b>. P</b></u></i><i><u><b>О</b></u></i><i><u><b>S</b></u></i><i><u><b>Т</b></u></i><br /><br />b. ТRY<br /><br />с. PUТ<br /><br />d. HEАD<br /><br /><i><u><b>е</b></u></i><i><u><b>. GE</b></u></i><i><u><b>Т</b></u></i><br /><br />f. МАILТО</iframe></frame></frame></a></frame></h6></h2></body> |
|
|
Скачать 58.35 Kb.