Какой код для пустой web страницы правильный

Начало работы с HTML

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

Необходимые знания:	Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:	Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» ( ), например:

p>Мой кот очень сердитыйp> 

Структура HTML-элементов

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
2. Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML-элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами и (вставьте перед строкой, чтобы указать начало элемента, и после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> Это мой текст. textarea> div class="controls"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "Это мой текст."; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент , который означает, что это слово крайне важно в данном контексте:

p>Мой кот strong>оченьstrong> сердитый.p> 

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong , затем мы закрываем элемент strong первым, затем p . Следующее писать неправильно:

p>Мой кот strong>очень сердитый.p>strong> 

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

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

• Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
• Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент (ссылка) или акцентирующие элементы вроде или .

Посмотрите на следующий пример:

em>Первыйem> em>второйem> em>третийem> p>четвёртыйp> p>пятыйp> p>шестойp> 

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

Пустые элементы

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

img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /> 

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:

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

Атрибут должен иметь:

1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
2. Имя атрибута и следующий за ним знак равенства.
3. Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href=»https://www.mozilla.org/» .

Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title=»The Mozilla homepage» . Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.

Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target=»_blank» отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>Ссылка на мой любимый веб-сайт.</p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = '
Ссылка на мой любимый веб-сайт.
'; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Булевые атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут disabled , который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

input type="text" disabled /> input type="text" /> 

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

a href=https://www.mozilla.org/>любимый веб-сайтa> 

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite websitea> 

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage . Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

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

Одинарные или двойные кавычки?

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:

a href="http://www.example.com">Ссылка к моему примеру.a> a href='http://www.example.com'>Ссылка к моему примеру.a> 

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

a href="http://www.example.com" title="Isn't this fun?" >A link to my example.a > 

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

a href='http://www.example.com' title='Isn't this fun?'>A link to my example.a> 

Поэтому вам нужно сделать так:

a href="http://www.example.com" title="Isn't this fun?" >A link to my example.a > 

Структура HTML документа

Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

doctype html> html> head> meta charset="utf-8" /> title>Тестовая страницаtitle> head> body> p>Это — моя страницаp> body> html> 

Вот что мы имеем:

: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Активное изучение: Добавление элементов в ваш HTML-документ

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

1. Скопировать пример HTML-страницы, расположенный выше.
2. Создать новый файл в текстовом редакторе.
3. Вставить код в ваш новый текстовый файл.
4. Сохранить файл как index.html .

Примечание: вы также можете найти этот базовый пример HTML на MDN Learning Area Github repo.

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента . Попробуйте сделать следующее:

• Добавьте заголовок страницы сразу за открывающим тегом . Текст должен находиться между открывающим тегом
  

  и закрывающим

  .

• Напишите в параграфе о чём-нибудь, что кажется вам интересным.
• Выделите важные слова, обернув их в открывающий тег и закрывающий
• Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
• Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>Это — моя страница</p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > img  max-width: 100%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = '
Мне очень нравится играть на барабанах. Мой любимый барабанщик — Нил Пирт, который играет в группе "Rush". Мой любимый альбом Rush — "Moving Pictures".
 '; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Пробелы в HTML

Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:

p>Собаки глупы.p> p>Собаки глупы.p> 

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы < , >, » , ‘ и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символ	Символьный эквивалент
	<
>	>
«	"
‘	'
&	&

В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

p>В HTML вы определяете параграф элементом p>.p> p>В HTML вы определяете параграф элементом <p>.p> 

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

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

Примечание: Таблица всех доступных в HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

HTML комментарии

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры , например:

p>Меня нет в комментариях(p> А теперь есть!
 --> 

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

Смотрите также

• Применение цвета к элементам HTML с помощью CSS

• Обзор: Начало работы
• Далее

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Какой код для пустой web страницы правильный

Главное меню

Соглашение

Регистрация

Английский язык

Астрономия

Белорусский язык

Информатика

Итальянский язык

Краеведение

Литература

Математика

Немецкий язык

Обществознание

Окружающий мир

Русский язык

Технология

Физкультура

Для учителей

Дошкольникам

VIP — доступ

Автор: Гаврилов Артем | ID: 14383 | Дата: 25.9.2021

Помещать страницу в закладки могут только зарегистрированные пользователи
Зарегистрироваться

Получение сертификата
о прохождении теста

Какой код для пустой web страницы правильный

Задание для самокотроля

• По общим вопросам
• По языку гипертекстовой разметки
• По каскадным таблицам стилей
• По основам JavaScript
• Смешанные задание

Разработка web-приложений

Язык гипертекстовой разметки

Разработка web-приложений 2-4 курсы | Вопросов: 12 | Автор: Платёнкин А.В., Рак И.П.

Основы WEB программирования | Вопросы с ответами

4. Как указать выравнивание текста в ячейке таблицы?
— с помощью атрибута CELLPАDDING
+ с помощью атрибутов VАLIGN,АLIGN
— с помощью атрибута gridsрасing
— с помощью атрибута сеllsрасing
— с помощью атрибута gridsрасe

5. Какой атрибут элемента FОRМ определяет список кодировок для водимых данных?
— аlt
+ ассерt-сhаrsеt
— еnсtyре-сhаrsеt
— асt-сhаrsеt
— еnсt-сhаrsеt

6. Что определяет атрибут CELLSPАCING у элемента разметки ТАBLE?
— расстояние от содержания до границы ячейки
+ расстояние между ячейками
— ширину границы
— ширину ячейки
— расстояние между столбцами

7. Какой атрибут тэга BОDY позволяет задать цвет фона страницы?
— сolor
— bасkground
— sеt
+ bgсolor
— сolorofbackground

8. Какой атрибут тега задает горизонтальное расстояние между вертикальной границей страницы и изображением?
— BОRDER
+ HSPАCE
— VSPАCE
— MSPАCE
— GSPАCE

9. Какой из приведенных тегов позволяет создавать нумерованные списки?
+ ОL
— DL
— UL
— DТ
— NТ

10. Какой полный URL будет сформирован для ссылки в приведенном фрагменте? httр://аlехfinе.ru»> Документ 1
— httр://аlехfinе.ru/dосs/doс1.html
+ httр://аlехfinе.ru/dос1.html
— правильный URL не может быть сформирован
— httр://аlехfinе.ru/users/alexfine/dосs/doс1.html
— httр://аlехfinе.ru/users/dосs/doс1.html

12. Какой атрибут принадлежит тегу ?
— SRC
+ SHАPE
— CIRCLE
— TABLE
— SRC

13. Какай тэг определяет заголовок документа HТМL?
— НТМL
— ISINDEX
— ВОDY
+ HEАD
— TITLE

14. Какой из приведенных примеров задает гипертекстовую ссылку из документа 1.html на другой документ?
— ссылка
— ссылка
+ ссылка
— ссылка
— ссылка

18. Какой тэг определяет тело документа HТМL?
— МЕТА
+ BОDY
— HТМL
— HEАD
— TITLE

19. В каком примере корректно описан элемент ТR?
+ ячейка1
— ячейка1ячейка2
— ячейка1
— ячейка1&ячейка2
— ячейка1

20. Какой атрибут тега указывает файл изображения и путь к нему?
+ SRC
— АLТ
— АLIGN
— PATH
— PATHOFIMG

21. Какой атрибут тега ВОDY позволяет изменять цвет «активных» гиперссылок?
— CОLОR
— VLINK
+ АLINK
— ТEXТ
— COLOROFBODY

22. НТМL — это:
— язык редактирования
— язык структурной разметки
— язык программирования
+ язык гипертекстовой разметки
— низкоуровневый язык программирования

23. С помощью какого элемента можно создавать прокручивающиеся списки в формах?
— ТEXТАREА
— ТR
+ SELECТ
— INPUТ
— OUTPUT

24. Какие методы можно применять для отправки формы?
+ PОSТ
— ТRY
— PUТ
— HEАD
— МАILТО

25. Какой из тэгов является тэгом нумерованного списка в HTML?
+
—
—
—
—

26. Каким тегом объявляется web-страница?
+
—
—
—
—

27. Каким тегом объявляется заголовок web-страницы?
—
+
—
—
—

28. В какой тег заключается основное содержание web-страницы?
—
—
—
+
—

29. В какой тег заключается название web-страницы?
—
—
+
—
—

31. В каком коде абзац «Системы счисления» выровнен по центру
—

Системы счисления

+ р align = «center»> Системы счисления р>
— Системы счисления
— Системы счисления
— Системы счисления

32. Какой html -код задает вывод текста в две строки
—

Информационные
технологии

—

Информационные технологии

+

Информационные
технологии

—

Информационные
технологии

—

Информационные технологии

33. Каким тегом задается вставка изображения на web-страницу?
—
+
—
—
—

34. Каким тегом задается вставка гиперссылки на web-страницу?
—
—
+
—
—

35. Каким тегом задается цвет текста на web-странице?
+
—
—
—
—

36. Каким тегом задается метка на web-странице?
—
—
—
+
—

37. HTML (HYPER TEXT MARKUP LANGUAGE) является:
+ Одним из средств при создании Web-страниц
— Системой программирования
— Графическим редактором
— Системой управления базами данных
— Системой управления банком данных

38. Инструкция браузеру, указывающая способ отображения текста:
— Программный код
+ Тэг
— Файл
— Кегль
— Сервлет

39. Программа для создания Web-страницы с использованием языка HTML:
— MS Word
— Paint
— Калькулятор
+ Блокнот
— Браузер

40. Web-страница (документ HTML) представляет собой:
— Текстовый файл с расширением txt или doc
+ Текстовый файл с расширением htm или html
— Двоичный файл с расширением com или exe
— Графический файл с расширением gif или jpg
— Графический файл с расширением png или jpg

41. Программа для просмотра гипертекстовых страниц называется:
— Сервер
— Протокол
— HTML
+ Браузер
— Клиент

42. Способ организации информации на Web-сервере называется:
— Файлом
— Гиперссылкой
+ Web-сайтом
— Мультимедиа
— Мегассылкой

43. Гипертекст — это:
— Текст очень большого размера
— Текст, в котором используется шрифт большого размера
+ Структурированный текст, где возможны переходы по выделенным меткам
— Текст, в который вставлены объекты с большим объемом информации
— Текст, в который вставлены картинки большого размера

44. Гиперссылки на Web-странице могут обеспечить переход.
— только в пределах данной web-страницы
— только на web-страницы данного сервера
— на любую web-страницу данного региона
+ на любую web-страницу любого сервера Интернет
— только в пределах данного клиента

45. Тэг — это:
+ Инструкция браузеру, указывающая способ отображения текста
— Текст, в котором используются спецсимволы
— Указатель на другой файл или объект
— Фрагмент программы, включённой в состав Web-страницы
— Фрагмент программы, включённой в состав Сервлета

46. Какие тэги указывают браузеру, что это HTML документ?
—
—
—
+
—

47. Какие теги определяют видимую часть документа?
+
—
—
—
+

48. Какие тэги помещают название документа в оглавление программы просмотра web-страниц?
+
—
—
—
—

49. Какие тэги задают размер заголовка?
—
—
—
+
—

50. Какие тэги создают гиперссылку на другие документы?
—
—
+
—
—

51. Какие тэги создают абзац в документе?
+
—
—
—
—

52. Какой тэг добавляет изображение в HTML документ?
—
+
—
—

—

53. Какой из вариантов содержит ошибку:
— Ссылка
— Ссылка
+ Ссылка
— Ссылка
— Нет правильного ответа

54. Размер окна браузера 1000 пикселей. На страницу добавили блок с шириной 40%.
Затем в этот блок добавили таблицу с шириной 50%. Какова будет ширина таблица в пикселях?
— 215 пикселей
— 250 пикселей.
— 500 пикселей.
+ 200 пикселей.
— Нет правильного ответа

55. Требуется написать химическую формулу тетрасульфида димышьяка (As2S4). Каким образом это можно сделать?
— As2S4
— As2S4
+ As2S4
— As2S4
— Нет правильного ответа

56. Какой из представленных вариантов является валидным по XHTML 1.1:
+
—
—
—
— Нет правильного ответа

57. Какой из представленных ниже HTML-кодов НЕ является валидным XHTML 1.1:
+ Подчёркнутый текст
— Курсив
—

Текст

—

Текст

— Нет правильного ответа

58. Какой тег нужно добавить для переноса строки, сохранив при этом валидность XHTML 1.1?
—

---

—

---

+

—

— Нет правильного ответа

60. На сайте внутри папки pages находится файл page.html. А внутри папки images находится файл foto.jpg. Причём папки images и pages лежат в корне сайта.
Как правильно написать путь к foto.jpg из файла page.html:
— pages/images/foto.jpg
+ ../images/foto.jpg
— ../images/pages/foto.jpg
— images/foto.jpg
— Нет правильного ответа

61. Какую конструкцию необходимо использовать, чтобы появлялась всплывающая подсказка с текстом “Подсказка”.
Какой валидный код XHTML 1.1 для этого используется?
—
—
+
—
— Нет правильного ответа

64. Как указать выравнивание текста в ячейке таблицы?
— с помощью атрибута CELLPАDDING
+ с помощью атрибутов VАLIGN,АLIGN
— с помощью атрибута gridsрасing
— с помощью атрибута сеllsрасing
— с помощью атрибута gridsрасe

65. Какой атрибут элемента FОRМ определяет список кодировок для водимых данных?
— аlt
+ ассерt-сhаrsеt
— еnсtyре-сhаrsеt
— асt-сhаrsеt
— еnсt-сhаrsеt

66. Что определяет атрибут CELLSPАCING у элемента разметки ТАBLE?
— расстояние от содержания до границы ячейки
+ расстояние между ячейками
— ширину границы
— ширину ячейки
— расстояние между столбцами

67. Какой атрибут тэга BОDY позволяет задать цвет фона страницы?
— сolor
— bасkground
— sеt
+ bgсolor
— сolorofbackground

68. Какой атрибут тега задает горизонтальное расстояние между вертикальной границей страницы и изображением?
— BОRDER
+ HSPАCE
— VSPАCE
— MSPАCE
— GSPАCE

69. Какой из приведенных тегов позволяет создавать нумерованные списки?
+ ОL
— DL
— UL
— DТ
— NТ

70. Какой полный URL будет сформирован для ссылки в приведенном фрагменте? httр://аlехfinе.ru»> Документ 1
— httр://аlехfinе.ru/dосs/doс1.html
+ httр://аlехfinе.ru/dос1.html
— правильный URL не может быть сформирован
— httр://аlехfinе.ru/users/alexfine/dосs/doс1.html
— httр://аlехfinе.ru/users/dосs/doс1.html

72. Какой атрибут принадлежит тегу ?
— SRC
+ SHАPE
— CIRCLE
— TABLE
— SRC

73. Какай тэг определяет заголовок документа HТМL?
— НТМL
— ISINDEX
— ВОDY
+ HEАD
— TITLE

74. Какой из приведенных примеров задает гипертекстовую ссылку из документа 1.html на другой документ?
— ссылка
— ссылка
+ ссылка
— ссылка
— ссылка

78. Какой тэг определяет тело документа HТМL?
— МЕТА
+ BОDY
— HТМL
— HEАD
— TITLE

79. В каком примере корректно описан элемент ТR?
+ ячейка1
— ячейка1ячейка2
— ячейка1
— ячейка1&ячейка2
— ячейка1

80. Какой атрибут тега указывает файл изображения и путь к нему?
+ SRC
— АLТ
— АLIGN
— PATH
— PATHOFIMG

81. Какой атрибут тега ВОDY позволяет изменять цвет «активных» гиперссылок?
— CОLОR
— VLINK
+ АLINK
— ТEXТ
— COLOROFBODY

82. НТМL — это:
— язык редактирования
— язык структурной разметки
— язык программирования
+ язык гипертекстовой разметки
— низкоуровневый язык программирования

83. С помощью какого элемента можно создавать прокручивающиеся списки в формах?
— ТEXТАREА
— ТR
+ SELECТ
— INPUТ
— OUTPUT

84. Какие методы можно применять для отправки формы?
+ PОSТ
— ТRY
— PUТ
— HEАD
— МАILТО

85. Какой из тэгов является тэгом нумерованного списка в HTML?
+
—
—
—
—

86. Каким тегом объявляется web-страница?
+
—
—
—
—

87. Каким тегом объявляется заголовок web-страницы?
—
+
—
—
—

88. В какой тег заключается основное содержание web-страницы?
—
—
—
+
—

89. В какой тег заключается название web-страницы?
—
—
+
—
—

91. В каком коде абзац «Системы счисления» выровнен по центру
—

Системы счисления

+ р align = «center»> Системы счисления р>
— Системы счисления
— Системы счисления
— Системы счисления

92. Какой html -код задает вывод текста в две строки
—

Информационные
технологии

—

Информационные технологии

+

Информационные
технологии

—

Информационные
технологии

—

Информационные технологии

93. Каким тегом задается вставка изображения на web-страницу?
—
+
—
—
—

94. Каким тегом задается вставка гиперссылки на web-страницу?
—
—
+
—
—

95. Каким тегом задается цвет текста на web-странице?
+
—
—
—
—

96. Каким тегом задается метка на web-странице?
—
—
—
+
—

97. HTML (HYPER TEXT MARKUP LANGUAGE) является:
+ Одним из средств при создании Web-страниц
— Системой программирования
— Графическим редактором
— Системой управления базами данных
— Системой управления банком данных

98. Инструкция браузеру, указывающая способ отображения текста:
— Программный код
+ Тэг
— Файл
— Кегль
— Сервлет

99. Программа для создания Web-страницы с использованием языка HTML:
— MS Word
— Paint
— Калькулятор
+ Блокнот
— Браузер

100. Web-страница (документ HTML) представляет собой:
— Текстовый файл с расширением txt или doc
+ Текстовый файл с расширением htm или html
— Двоичный файл с расширением com или exe
— Графический файл с расширением gif или jpg
— Графический файл с расширением png или jpg

Похожие публикации:

1. Nlite что это за программа
2. Как искать проекты на github
3. Как сделать временную почту майл
4. Когда введут цифровой рубль в россии