Разное

Найдите правильный способ привязки внешней таблицы стилей к документу: Введение в HTML — тест 2

Содержание

Введение в HTML — тест 2

Главная / Программирование / Введение в HTML / Тест 2

Упражнение 1:

Номер 1

Какой тэг определяет документ HTML?

Ответ:

&nbsp(1) HTML &nbsp

&nbsp(2) BODY &nbsp

&nbsp(3) HEAD &nbsp

&nbsp(4) META &nbsp


Номер 2

Какой тэг определяет тело документа HTML?

Ответ:

&nbsp(1) HTML &nbsp

&nbsp(2) BODY &nbsp

&nbsp(3) HEAD &nbsp

&nbsp(4) META &nbsp


Номер 3

Какой тэг определяет заголовок документа HTML?

Ответ:

&nbsp(1) HTML &nbsp

&nbsp(2) BODY &nbsp

&nbsp(3) HEAD &nbsp

&nbsp(4) ISINDEX &nbsp


Упражнение 2:

Номер 1

Какой тег используется для индексирования документов в поисковых системах?

Ответ:

&nbsp(1) HTML &nbsp

&nbsp(2) BODY

&nbsp

&nbsp(3) HEAD &nbsp

&nbsp(4) META &nbsp


Номер 2

Какой тег служит для именования документа в World Wide Web?

Ответ:

&nbsp(1) BASE &nbsp

&nbsp(2) META &nbsp

&nbsp(3) HEAD &nbsp

&nbsp(4) TITLE &nbsp


Номер 3

Какой тег служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной форме?

Ответ:

&nbsp(1) BODY &nbsp

&nbsp(2) META &nbsp

&nbsp(3) BASE &nbsp

&nbsp(4) TITLE &nbsp


Упражнение 3:

Номер 1

Найдите ошибочное определение гиперссылки.

Ответ:

&nbsp(1) <a HREF="intuit.htm" TARGET="left">intuit</a> &nbsp

&nbsp(2) <a HREF="intuit.htm">intuit</a> &nbsp

&nbsp(3) <a TARGET="intuit.htm" href="new">intuit</a> &nbsp


Номер 2

В каких примерах правильно организован синтаксис тега BASE?

Ответ:

&nbsp(1) <BASE HREF="http://www.intuit.ru/intro.html" TARGET=new> &nbsp

&nbsp(2) <BASE HREF="http://www. intuit.ru/intro.html"> &nbsp

&nbsp(3) <BASE A HREF=intuit.ru/intro.html> &nbsp


Номер 3

Какой тэг содержит управляющую информацию, 
которую браузер использует для правильного отображения и обработки 
содержания тела документа?

Ответ:

&nbsp(1) ISINDEX &nbsp

&nbsp(2) HEAD &nbsp

&nbsp(3) META &nbsp

&nbsp(4) BODY &nbsp


Упражнение 4:

Номер 1

Запретить кэширование документа можно с помощью. ..

Ответ:

&nbsp

(1) <META HTTP-EQUIV="Pragma" CONTENT="cache"> &nbsp

&nbsp(2) <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> &nbsp

&nbsp(3) <META HTTP-EQUIPT="Pragma" CONTENT="no-cache"> &nbsp

&nbsp(4) <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> &nbsp


Номер 2

Какие функции можно реализовать с помощью элемента разметки META?

Ответ:

&nbsp(1) запрет кэширования документа&nbsp

&nbsp

(2) поддержка скриптов&nbsp

&nbsp(3) запрет на хранение документа после пересылки&nbsp


Номер 3

Найдите правильный способ привязки внешней таблицы стилей к документу.

Ответ:

&nbsp(1) <LINK REL="stylesheet" href="../css/style.css" TYPE="text/css"> &nbsp

&nbsp(2) <LINK HREF="stylesheet" href="../css/style.css" TYPE="text/css"> &nbsp

&nbsp(3) <LINK REL="stylesheet" rel="../css/style.css" TYPE="text/css">

&nbsp


Упражнение 5:

Номер 1

Какой из приведенных тегов описывает тело классической модели документа?

Ответ:

&nbsp(1) <HEAD> &nbsp

&nbsp(2) <BODY CONTENT> &nbsp

&nbsp(3) <BODY> &nbsp

&nbsp(4) <HTML> &nbsp


Номер 3

Какой тэг предназначен для размещения описателей стилей?

Ответ:

&nbsp(1) STYLE &nbsp

&nbsp(2) HEAD &nbsp

&nbsp(3) BODY &nbsp

&nbsp(4) ISINDEX &nbsp


Упражнение 6:

Номер 1

Какой тэг служит для размещения кода JavaScript?

Ответ:

&nbsp(1) STYLE &nbsp

&nbsp(2) META &nbsp

&nbsp(3) SCRIPT &nbsp


Номер 2

Выберите вариант корректного описания синтаксиса тега SCRIPT.

Ответ:

&nbsp(1) <SCRIPT TYPE="тип_языка_программирования">текст программы</SCRIPT> &nbsp

&nbsp(2) <SCRIPT TYPE=тип_документа>текст программы</SCRIPT> &nbsp

&nbsp(3) <SCRIPT NAME=язык_программирования>текст программы</SCRIPT> &nbsp


Номер 3

Укажите неверные варианты описания синтаксиса тега SCRIPT.

Ответ:

&nbsp(1) <SCRIPT TYPE=тип_языка_программирования>текст программы</SCRIPT> &nbsp

&nbsp(2) <SCRIPT TYPE=тип_документа >текст программы</SCRIPT> &nbsp

&nbsp(3) <SCRIPT NAME=язык_программирования>текст программы</SCRIPT> &nbsp


Главная / Программирование / Введение в HTML / Тест 2

Ответы на тесты Интуит «Введение в HTML»



или напишите нам прямо сейчас

Написать в WhatsApp

В каких случаях необходимо применение CER (Character Entity Reference)?

  • для описания символов, отсутствующих в кодировке US ASCII
  • в случае необходимости указания знаков «<» и «>«
  • (Правильный ответ) для описания служебных символов языка разметки HTML, которые могут быть неверно обработаны браузером

Что означает DTD (Document Type Definition)?

<!DOCTYPE HTML PUBLIC «»- //W3C//DTD HTML 4. 0 Transitional//EN»»>

  • (Правильный ответ) указывает, что документ соответствует стандарту HTML 4.0, используемый язык английский
  • говорит о необходимости привести документ к стандарту HTML 4.0, используя английский язык
  • указание браузеру соблюдать стандарт HTML 4.0 при отображении документа

Найдите неверные фрагменты кода:

  • (Правильный ответ) </html></body> <center> <ahref=»»doc.htm»»>Гиперссылка</a> </center></body></html>
  • (Правильный ответ) <html><body> <center> <a href=»»doc.htm»»>Гиперссылка<a> </center><body><html>
  • <html><body> <center> <a href=»»doc.htm»»>Гиперссылка</a> </center></body></html>

Какой тэг служит для размещения кода JavaScript?

  • META
  • (Правильный ответ) SCRIPT
  • STYLE

Найдите правильный способ привязки внешней таблицы стилей к документу.

  • <LINK HREF=stylesheet href=»../css/style.css» TYPE=»text/css»>
  • (Правильный ответ) <LINK REL=stylesheet href=»../css/style.css» TYPE=»text/css»>
  • <LINK REL=stylesheet rel=»../css/style.css» TYPE=»text/css»>

Какой тег служит для именования документа в World Wide Web?

  • META
  • BASE
  • (Правильный ответ) TITLE
  • HEAD

Какой тэг определяет документ HTML?

  • BODY
  • META
  • HEAD
  • (Правильный ответ) HTML

Какой из приведенных тегов позволяет создавать ненумерованные списки?

  • DT
  • DL
  • (Правильный ответ) UL
  • OL

Какой URL будет сформирован для ссылки в приведенном фрагменте?

<BASE HREF=»»http://intuit. ru/»»><BODY><A HREF=»»doc1.html»»>Документ 1</A></BODY>

  • правильный URL не может быть сформирован
  • (Правильный ответ) http://intuit.ru/doc1.html
  • http://intuit.ru/docs/doc1.html

Какой атрибут тэга BODY позволяет задать цвет фона страницы?

  • (Правильный ответ) bgcolor
  • color
  • set
  • background-color

Какие из приведенных тегов являются тегами управления разметкой?

  • (Правильный ответ) <h2>
  • в приведенном списке таких тегов нет
  • <B>
  • (Правильный ответ) <BR>

Какой из приведенных тегов позволяет создавать нумерованные списки?

  • UL
  • DL
  • DT
  • (Правильный ответ) OL

Какие из приведенных тегов являются тегами, управляющими формой отображения текста?

  • <Q>
  • (Правильный ответ) <I>
  • (Правильный ответ) <SUP>
  • <EM>

Имеется сервер http://intuit.

ru, на котором находятся два документа:

http://intuit.ru/intuit.html иhttp://intuit.ru/intuit/detail.html. Какая из приведенных форм записи ссылки из первого документа на второй документ является верной?

  • <A HREF=»detail.html»>Подробнее об Университете </A>
  • <BASE HREF=»http://intuit.ru»>
  • (Правильный ответ) <A HREF=»intuit/detail.html#det2″>Подробнее об Университете </A>

Какой атрибут тега <IMG> задает горизонтальное расстояние между вертикальной границей страницы и изображением?

  • (Правильный ответ) HSPACE
  • BORDER
  • VSPACE

Какой из приведенных тегов описывает активное изображение?

  • <img src=»image.jpg» width=100 height=100 usemap>
  • <img src=»image.jpg» width=100 height=100>
  • (Правильный ответ) <img src=»image. jpg» width=100 height=100 usemap=»#map1″>

Укажите неправильный способ определения карты изображения:

  • <MAP NAME=»map»> <AREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»http://www.intuit.ru/help/index.html»></MAP>
  • <MAP NAME=»map»><AREA SHAPE=»circle» COORDS=»100,0,200″ HREF=»http://www.intuit.ru/shop/index.html»></MAP>
  • (Правильный ответ) <AREA COORDS=»100,0,200,100″ HREF=»http://www.intuit.ru/shop/index.html»>

Выберите корректный пример вставки изображения в HTML-документ.

  • <INPUT TYPE=image>
  • <BODY BACKGROUNDIMAGE=»1.gif» alt=»image»>
  • <A HREF=»1.gif» alt=»image»>
  • (Правильный ответ) <IMG SRC=»1.gif» alt=»image»>

С помощью какого элемента можно создавать выпадающие списки в формах?

  • TEXTAREA
  • INPUT
  • (Правильный ответ) SELECT

Какой из приведенных фрагментов кода создает переключатель?

  • <input type=radiobutton name=a1 value=1><input type=radiobutton name=a1 value=2>
  • (Правильный ответ) <input type=radio name=a1 value=1><input type=radio name=a1 value=2>
  • <input type=checkbox name=a1 value=1><input type=checkbox name=a1 value=2><input type=text name=a1 value=2>

С помощью какого контейнера задается форма?

  • (Правильный ответ) FORM
  • INPUT
  • SELECT

Какой из приведенных тегов используется при создании элементов с возможностью выбора нескольких вариантов одновременно?

  • <INPUT TYPE=RADIO>
  • <INPUT TYPE=RADIOBOX>
  • <INPUT TYPE=TEXTAREA>
  • <INPUT TYPE=OPTION>
  • (Правильный ответ) <INPUT TYPE=CHECKBOX>

В каких примерах внешний FRAMESET делит доступное пространство на три столбца, а внутренний FRAMESET делит второй фрейм на два ряда неравной высоты?

  • <FRAMESET cols=»45%, 55%»>…<FRAMESET rows=»10%, 20%»>…</FRAMESET>…</FRAMESET>
  • (Правильный ответ) <FRAMESET cols=»33%, 33%, 34%»>…<FRAMESET rows=»30%, 20%»>…</FRAMESET>…</FRAMESET>
  • <FRAMESET cols=»50%, 50%»>…<FRAMESET rows=»40%, 50%»>…</FRAMESET>…</FRAMESET>
  • (Правильный ответ) <FRAMESET cols=»33%, 33%, 34%»>…<FRAMESET rows=»40%, 50%»>…</FRAMESET>…</FRAMESET>

Какой атрибут определяет имя фрейма, в котором будет открыт документ?

  • alt
  • style
  • title
  • (Правильный ответ) target

При задании какого атрибута браузер будет рисовать разделитель между этим фреймом и каждым смежным фреймом?

  • (Правильный ответ) <FRAME frameborder=»1″>
  • <FRAME frameborder=»0″>
  • <FRAME border=»1″>

В каком примере второй столбец = 250 пикселов, первый = 25% и третий = 75% от оставшегося пространства?

  • (Правильный ответ) <FRAMESET cols=»1*,250,3*»>
  • <FRAMESET cols=»25,250,3*»>
  • <FRAMESET cols=»1*,250,75″>
  • <FRAMESET cols=»25,250,75″>

Укажите верный способ определения карты изображения:

  • <AREA COORDS=»100,0,200,100″ HREF=»http://www. intuit.ru/shop/index.html»>
  • (Правильный ответ) <MAP NAME=»map»><AREA SHAPE=»circle» COORDS=»100,0,200″ HREF=»http://www.intuit.ru/shop/index.html»></MAP>
  • (Правильный ответ) <MAP NAME=»map»> <AREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»http://www.intuit.ru/help/index.html»></MAP>

Какие из приведенных тегов неверно описывают активное изображение?

  • (Правильный ответ) <img src=»image.jpg» width=100 height=100>
  • (Правильный ответ) <img src=»image.jpg» width=100 height=100 usemap>
  • <img src=»image.jpg» width=100 height=100 usemap=»#map1″>

Какой пример кода определяет вывод горизонтальных фреймов?

  • (Правильный ответ) <FRAMESET rows=»25%, 75%»>
  • <FRAMESET cols=»45%, 55%»>
  • <FRAMESET cols=»50%, 50%»>
  • (Правильный ответ) <FRAMESET rows=»15%, 85%»>

Какой из приведенных тегов описывает тело классической модели документа?

  • <HTML>
  • (Правильный ответ) <BODY>
  • <BODY CONTENT>
  • <HEAD>

или напишите нам прямо сейчас

Написать в WhatsApp

Прикрепление CSS к вашему документу

Присоединение CSS к вашему документу

Вернуться на страницу недели 3 »

Созданный нами CSS будет действовать как таблица стилей для наших веб-страниц. Это то, что будет контролировать тип, цвет, макет и даже интерактивные элементы. Чтобы наши HTML-страницы могли использовать правила CSS, нам нужно убедиться, что наша HTML-страница каким-то образом ссылается на них или присоединяет их.

Существует три распространенных способа присоединения таблиц стилей:

  • Внешний
  • Встроенный/внутренний
  • Встроенный

Внешний стиль

Лучший способ присоединения таблиц стилей CSS — использование внешних стилей . С помощью этого метода вы будете писать весь свой CSS в отдельном файле с расширением .css . Затем вы можете ссылаться на файл CSS с каждой из ваших HTML-страниц.

В приведенном ниже примере мы ссылаемся на документ CSS с именем styles.css .

 

<голова>
  <мета-кодировка="utf-8"/>
  Пример внешней таблицы стилей

Внешние таблицы стилей используют тег внутри элемента head .

отн.
Атрибут rel объясняет отношение ссылки к нашему документу. Значение в этом случае всегда будет , таблица стилей , так как это то, на что мы создаем ссылку.
ссылка
9Атрибут 0044 href — это ссылка на нашу таблицу стилей. Это работает точно так же, как href , используемый в тегах a .
СМИ
Атрибут media описывает, к какому типу носителя должны применяться наши таблицы стилей. Существует несколько возможных значений, включая screen и print . Вы будете чаще всего использовать экран .

Встроенные/внутренние модели

Вы также можете добавить стили CSS вверху HTML-страницы, внутри головка элемент.

 
<голова>
  <мета-кодировка="utf-8"/>
  Пример встроенных/внутренних таблиц стилей
  
  <стиль>
     п {
        цвет: темно-розовый;
     }

Это отличный способ быстро протестировать новый стиль на вашей странице. Зарезервируйте внутренние стили для тестирования и экспериментов с новыми правилами CSS.

Встроенные стили

Последний метод заключается в добавлении стилей CSS в строку с вашим HTML.

Для этого вам просто нужно использовать атрибут стиля и добавить объявление CSS в качестве значения атрибута.

 
 style="color: deeppink"   >Этот абзац будет "темно-розовым".

Хотя это очень просто, это также не очень расширяемо.

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

 

Этот абзац будет "темно-розовым".


Это еще один абзац со словом "темно-розовый".


Это еще один абзац со словом "темно-розовый".


Это много лишнего CSS, что также означает много места для ошибок.

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

Какой метод лучше?

Внешние таблицы стилей .

  • Все наши стили находятся в одном (надеюсь) упорядоченном файле
  • Стили будут последовательно применяться ко всем нашим html-страницам
  • Поскольку стили записываются только один раз, меньше места для ошибок
  • Браузер должен загрузить таблицу стилей только один раз для всех страниц

Вернуться на страницу недели 3 »

Как связать файлы CSS с файлами HTML: все, что вам нужно знать, руководство

КСС

20 сентября 2022 г.

Джордана А.

4 мин Чтение

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

CSS определяет объявления стилей и применяет их к документам HTML. Существует три разных способа связать CSS с HTML на основе трех разных типов стилей CSS:

  • Встроенный — использует атрибут стиля внутри элемента HTML
  • Внутренний — записан в разделе файла HTML file

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

Загрузить полную шпаргалку по CSS

Как связать CSS с HTML-файлом – Видеоруководство

Ищете наглядное руководство? Посмотрите это видео.

Подпишитесь на другие обучающие видео! Академия Хостингер

Подписывайся

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

В отличие от внутренних и встроенных стилей, этот метод изменяет множество HTML-страниц, редактируя один файл CSS. Это экономит время — нет необходимости изменять каждое свойство CSS на каждой HTML-странице веб-сайта.

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

 body {
  цвет фона: желтый;
}
ч2 {
  цвет синий;
  поле справа: 30px;
}

Не добавляйте пробел между значением свойства. Например, вместо margin-right: 30px напишите margin-right: 30 px .

Затем используйте тег в разделе вашей HTML-страницы, чтобы связать файл CSS с документом HTML. Затем укажите имя вашего внешнего файла CSS. В данном случае это example.css , поэтому код будет выглядеть следующим образом:

Для лучшего понимания, вот разбивка атрибутов, содержащихся в теге :

  • rel — определяет отношение между связанным документом и текущим. Используйте атрибут rel только при наличии атрибута href .
  • тип — определяет содержимое связанного файла или документа между тегами . Он имеет текст или css в качестве значения по умолчанию.
  • href — указывает расположение файла CSS, который вы хотите связать с HTML. Если файлы HTML и CSS находятся в одной папке, введите только имя файла. В противном случае укажите имя папки, в которой вы храните файл CSS.
  • медиа — описывает тип медиа, для которого оптимизированы стили CSS. В этом примере мы поместили screen в качестве значения атрибута, чтобы подразумевать его использование для компьютерных экранов. Чтобы применить правила CSS к печатным страницам, установите значение 9.0019 напечатать .

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

Хотя внешний CSS помогает упростить процесс веб-разработки, следует помнить о том, что HTML-страницы могут отображаться неправильно до загрузки внешней таблицы стилей. Кроме того, ссылка на несколько документов CSS может увеличить время загрузки вашего сайта.

Кстати, если вы хотите отредактировать определенный HTML-элемент, лучше использовать метод встроенного стиля. Между тем, внутренний или встроенный стиль может идеально подойти для применения правил CSS к одной странице.

Причины использования CSS

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

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

Другие преимущества связывания файла CSS с документом HTML:

  • Согласованный дизайн. Поддерживает единообразие форматирования и дизайна на всем веб-сайте. Одна корректировка правил CSS может быть универсально применена к нескольким областям веб-сайта.
  • Более быстрая загрузка. Для оформления всех файлов HTML требуется только один файл CSS. С меньшим количеством строк кода веб-сайт может загружаться быстрее. Сайт также будет кэшировать файл CSS для следующего посещения вашими посетителями.
  • Улучшение SEO . Сохранение стилей CSS в другом файле делает HTML-файл более лаконичным и упорядоченным. В результате веб-сайт будет иметь более чистый и легкий код, что приведет к лучшей сканируемости поисковыми системами.

С другой стороны, у CSS есть несколько недостатков, таких как:

  • Доступен в нескольких уровнях. Таблица стилей CSS имеет три уровня. Такие разные фреймворки могут сбивать с толку, особенно новичков.
  • Проблемы совместимости. Некоторые таблицы стилей могут не работать в определенных браузерах, поскольку разные браузеры по-разному читают CSS. Используйте средства проверки кода CSS и HTML, чтобы избежать этих проблем.
  • Уязвим к атакам. Природа CSS с открытым исходным кодом может увеличить риск кибератак. Например, человек, имеющий доступ к файлу CSS, может написать вредоносный код или украсть личные данные. Однако надлежащие меры безопасности могут предотвратить эту проблему.

В целом, CSS играет важную роль при разработке веб-сайта. Он управляет форматированием различных элементов на веб-странице, таких как шрифты, цвета фона и позиции объектов. При правильном применении CSS и HTML веб-сайт может обеспечить оптимизированный пользовательский интерфейс.

Заключение

Встраивание правил CSS в элементы HTML может отнимать много времени и энергии. К счастью, внешние таблицы стилей делают этот процесс более эффективным.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *