HTML Элементы
Элемент — это основа языка HTML. Он является основой построения сайта и может описывать документ в целом или способ форматирования текста. Все, что вы захотите создать на вашей веб-странице, будет сделано с помощью элементов.
HTML обеспечивает структуру документа, состоящего из всех отдельных HTML-элементов на странице.
HTML также обеспечивает семантику HTML документа. Элементы, как правило, используются для конкретного назначения. Например, уровень заголовка <h2> является более важным, чем уровень <h3>.
Элементы включают в себя всё, что находится между парными тегами элемента, включая сами теги. Например, элемент «<p>» обозначает параграф; элемент «<img>» обозначает изображение.
Примеры HTML элементов:
| Начальный тег | Содержимое элемента | Конечный тег |
|---|---|---|
| <p> | Это содержание абзаца. | </p> |
| <h2> | Это заголовок. | </h2> |
| <div> | Это содержимое блока. | </div> |
| <br /> |
Здесь <p>….</p> является HTML элементом, <h2>…</h2> тоже HTML элемент.
Элементы представляют собой контейнеры. Вы помещаете текст внутрь контейнера. Если применяются теги <em> и </em>, создается контейнер, задающий курсивный шрифт для текста, находящегося внутри контейнера. Создавая веб-страницы, вы будете использовать контейнеры для хранения различных фрагментов текста. Если вы будете воспринимать элементы таким образом, тогда вам легче будет не пропустить закрывающий тег.
Существует два вида элементов: элементы-контейнеры и пустые элементы.
Элементы, которые представляют из себя контейнеры — это самый распространенный вид элементов. Элементы-контейнеры задают форматирование контента, находящегося между от-крывающим и закрывающим тегами.
Пустые элементы не задают и не отменяют форматирование. Такие элементы вставляют на страницу какой-либо объект, например горизонтальную черту (элемент <hr>).
Пустые элементы не имеют парных тегов и в них нельзя вставить текст, как в элементы-контейнеры.
Вы можете встретить пустые элементы, в которых включен символ слэша перед закрывающей скобкой и без него, например <br/> или <br>. Форма записи пустых элементов с включением слэша называется синтаксисом пустых элементов, который был официальной частью языка XHTML.
Например:
<img src="smile.jpg" alt="Смайлик">
Пустые элементы в режиме XHTML обычно закрываются с помощью знака слэш перед закрывающей угловой скобкой тега
<img src="smile.jpg" alt="Смайлик"/>
В HTML5 применение синтаксиса пустых элементов необязательно и разрешается использовать тот же синтаксис, что и в открывающих тегах (т. е. без слеша). Таким образом пустые элементы не обязательно закрывать в режиме HTML.
Вложенные элементы
Большинство элементов могут быть вложены друг в друга (т.е. в содержимом одного элемента может располагаться другой элемент).
Например вложив элемент <i> в элемент <b> Вы сможете сделать текст одновременно жирным и курсивным.
Большинство элементов в HTML требуют оба, и закрывающий и открывающий теги. Открывающие и закрывающие теги требуют правильного, иерархического вложения — закрывающие теги должны идти в обратном порядке по отношению к открывающим. Правильный порядок вложения тегов следует соблюдать, чтобы писать валидный html-код.Далее пример валидного кода:
<em>Это <strong>важное</strong> правило</em>
А здесь приведён пример неверного вложения тегов:
Invalid: <em>Это <strong> важное</em> правило</strong>
| Заметьте, что в валидном примере закрывающий тег вложенного элемента расположен перед закрывающим тегом элемента, в который он вложен. |
Язык HTML предоставляет много вариантов вложения элементов, например, можно вложить один элемент в другой, а затем эту комбинацию вложить в еще один элемент и т. д. до беско-нечности.
Please enable JavaScript to view the comments powered by Disqus.
HTML Элементы
HTML элемент, как правило, состоит из начального и конечного тегов, и содержанием между ними:
<имя тега>содержимое документа…</имя тега>
HTML контент это, то, что находится от открывающего тега до закрывающего тега:
<p>Мой первый параграф.</p>
| Начинающий тег | Контент | Конечный тег |
|---|---|---|
| <h2> | Мой первый заголовок | </h2> |
| <p> | Мой первый параграф. | </p> |
| <br> |
HTML элементы без содержимого, называются пустыми элементами. Пустые элементы не имеют закрывающего тега,
например элемент <br> (который означает разрыв строки).
HTML Вложенные элементы
HTML элементы могут быть вложенными (элементы могут содержать элементы).
Все документы HTML состоят из вложенных элементов HTML.
В этом примере состоит из четырех элементов HTML:
Пример
<h2>Мой Первый Заголовок</h2>
<p>Мой первый параграф.</p>
</body>
</html>
Пример объяснение
Элемент <html> определяет весь документ.
Он имеет начальный тег <html> и конечный тег </html>.
Элемент содержит
еще один HTML элемент<body>.<h2>Мой Первый Заголовок</h2>
<p>Мой первый параграф.</p>
</body>
</html>
Элемент <body> определяет тело документа.
Он имеет начальный тег <body> и конечный тег </body>.
Элемент содержит два других HTML элементов <h2> и <p>.
<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>
</body>
Элемент <h2> определяет заголовок.
Он имеет начальный тег <h2> и конечный тег </h2>.
Элемент содержит: Мой первый заголовок.
<h2>Мой Первый Заголовок</h2>
Элемент <p> определяет параграф.
Он имеет начальный
<p> и конечный тег </p>.Элемент содержит: Мой первый параграф.
<p>Мой первый параграф.</p>
Не забудьте закрывающий тег
Некоторые HTML элементы будут отображаться некорректно, если вы забыли закрывающий тег:
Приведенный выше пример работает во всех браузерах, потому что закрывающий тег является необязательным.
Никогда не полагайтесь на это. Это может привести к непредсказуемым результатам и/или ошибки, если вы забыли закрывающий тег.
HTML Пустые элементы
HTML элементы без содержимого, называются пустыми элементами.
Пустой элемент <br> без закрывающего тега, определяет разрыв строки.
Пустые элементы могут быть «закрытые» в открывающем теге как: <br />.
HTML5 не требуют закрытые элементы могут быть открыты. Но если вы хотите более строгой проверки, или если вам нужно сделать ваш документ чтение XML-парсеров, Вам необходимо закрыть все HTML элементы.
Использовать строчные теги
HTML-теги не чувствительны к регистру: <p> означает то же, что и </p>.
Стандарт HTML5 не требует строчные теги, но W3C в HTML рекомендует нижний регистр, более строгий тип документа, так как XHTML, и требует строчный.
На SchoolsW3 мы всегда используем строчные теги.
Элементы (елементы) HTML уроки для начинающих академия
Элементы HTML
HTML-элемент обычно состоит из тега Start и тега End с содержимым, вставленным между:
<tagname>Содержание идет здесь…</tagname>
HTML- элемент — это все, от начального тега до конечного тега:
<p>Мой первый абзац.</p>
| Начальный тег | Содержимое элемента | Конечный тег |
|---|---|---|
| <h2> | Мой первый заголовок | </h2> |
| <p> | Мой первый абзац. | |
| <br> |
Элементы HTML без содержимого называются пустыми элементами. Пустые элементы не имеют конечного тега, такого как <br> элемент (который указывает на разрыв строки).
Вложенные элементы HTML
Элементы HTML могут быть вложенными (элементы могут содержать элементы).
Все HTML-документы состоят из вложенных элементов HTML.
Этот пример содержит четыре элемента HTML:
Пример
<h2>My First Heading</h2>
<p>My first paragraph.</p>
</body>
</html>
Пример объяснения
<html>элемент определяет весь документ.
Он имеет тег Start <html> и тег End </html>.
Элемент Content — это другой элемент HTML ( <body> элемент).
<h2>My First Heading</h2>
<p>My first paragraph.</p>
</body>
</html>
<body>элемент определяет тело документа.
Он имеет тег Start <body> и тег End </body>.
Элемент Content — это два других HTML-элемента ( <h2> и <p> ).
<h2>My First Heading</h2>
<p>My first paragraph.</p>
</body>
<h2>элемент определяет заголовок.
Он имеет тег Start <h2> и тег End </h2>.
Элемент Content: мой первый заголовок.
<h2>My First Heading</h2>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Не забывайте, что конечный тег
Некоторые элементы HTML будут отображаться корректно, даже если вы забыли конечный тег:
Пример
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Структура html-документа
Теги
Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.
Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.
Каркас html-документа
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Название веб-страницы</title>
</head>
<body>
</body>
</html>
Тип документа
В первой строке html-документа принято указывать тип документа. Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.
При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.
Теги верхнего уровня
Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.
Теги <head>и <body>определяеют заголовок и тело html-документа.
Теги заголовка документа
В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.
Кодировка html-документа
<meta charset="utf-8">
Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.
Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.
В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.
Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.
Название html-документа
Название или заголовок html-документа записывается между тегами <title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.
Содержимое тега <title>отображается:
- на вкладках веб-страниц
- в списке закладок
- в названии файла при сохранении веб-страницы на жесткий диск;
- в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.
Теги тела документа
В теле документа можно размещать теги, предназначенные для разметки и форматирования содержимого веб-страницы. Все что будет записано в этом контейнере, отобразится на веб-странице в окне браузера. В следующих уроках мы приступим к изучению таких тегов.
Видео к уроку
Какой из тегов не требует заключительного? — Мегаобучалка
На что следует обратить внимание при выборе провайдера, размещающего ваш Web-узел на своем сервере?
1. пропускная способность каналов
2. поддержка сервером провайдера CGI-сценариев
3. поддержка сервером провайдера SSI
4. поддержка моментальной перекодировки
5. способ обновления страниц
Все ли элементы HTML-разметки заканчиваются тегом конца?
1. существуют неполные элементы разметки, у которых нет тега конца
2. элементы вида </…> не имеют тега конца
3. в HTML все элементы имеют тег конца элемента
3. Неверным является утверждение:
1. регистр букв для указания значения атрибутов имеет значение
2. регистр букв для указания имени атрибутов имеет значение
3. регистр букв для указания имени тега имеет значение
Содержат ли конечные теги какие-либо атрибуты?
1. конечные теги никогда не содержат атрибутов
2. содержат всегда
3. понятия «конечный тег» не существует
5. HTML — это:
1. язык гипертекстовой разметки
2. язык структурной разметки
3. язык редактирования
4. язык программирования
6. Отметьте верные утверждения:
1. все теги HTML состоят из начального и конечного компонентов
2. каждому тегу необходимо указывать атрибуты
3. порядок задания атрибутов для тега не имеет значения
4. значения атрибутов не могут содержать символы «кавычек»
Какой тэг определяет заголовок документа HTML?
1. HTML
2. BODY
3. HEAD
4. ISINDEX
Какой тег используется для индексирования документов в поисковых системах?
1. HTML
2. BODY
3. HEAD
4. ME
Какой тэг содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа?
1. ISINDEX
2. HEAD
3. META
4. BODY
Какой атрибут тэга BODY позволяет задать цвет фона страницы?
1. color
2. set
3. bgcolor
4. background
11. Выберите вариант корректной установки цвета фона страницы.
1. <body bgcolor=»yellow»>
2. <body color=»yellow»>
3. <body background=»yellow»>
4. <head bgcolor=»yellow»>
Какой из приведенных тегов описывает тело классической модели документа?
1. <HEAD>
2. <BODY CONTENT>
3. <BODY>
4. <HTML>
Какой из приведенных примеров задает гипертекстовую ссылку из документа 1.html на другой документ?
1. <A HREF=»#m1″>ссылка</a>
2. <A HREF=»/2.html#m1″>ссылка</a>
3. <A NAME=m1>ссылка</a>
Какой из приведенных тегов позволяет создавать ненумерованные списки?
1. DT
2. DL
3. UL
4. OL
15. Какой атрибут тега BODY позволяет изменять цвет «активных» гиперссылок?
1. ТЕХТ
2. COLOR
3. ALINK
4. VLINK
Какие из приведенных тегов являются тегами, управляющими формой отображения текста?
1. <SUP>
2. <Q>
3. <I>
4. <EM>
17. Какой атрибут тега <IMG> указывает файл изображения и путь к нему?
1. ALT
2. SRC
3. ALIGN
18. Какой атрибут тега <IMG> задает вертикальное расстояние между строками текста и изображением?
1. HSPACE
2. VSPACE
3. BORDER
Как задать цвет фона для строки таблицы?
1. с помощью атрибута BGCOLOR тега <TD>
2. с помощью атрибута BACKGROUND тега <TABLE>
3. с помощью атрибута BACKGROUND тега <TR>
4. с помощью атрибута BGCOLOR тега <TR>
20. Укажите правильный пример вложенности тэгов:
1. <SELECT><OPTION></OPTION></SELECT>
2. <SELECT><OPTGROUP></OPTGROUP></SELECT>
3. <SELECT><OPTION><OPTGROUP></OPTGROUP></OPTION></SELECT>
Какой из списков не может использоваться в HTML?
1. Нумерованный список
2. Список изображений
3. Список определений
4. Маркированный список
В каком из тегов не применяется параметр size?
1. <hr>
2. <font>
3. <h6>
4. <input>
23. Текущий размер шрифта равен 4. После применения тега <font size=+1> размер шрифта станет равным
1. 3
2. 5
3. 1
4. 4
Укажите тег, который содержит ошибку
1. <ts>
2. <sub>
3. <i>
4. <sup>
Какой из тегов содержит ошибку?
1. <img href=»p1.gif»>
2. <img src=»p2.gif»>
3. <img src=p3.jpg>
4. <img src=p4.bmp>
Выберите правильный ответ. Расстояние между ячейками таблицы по умолчанию равно
1. 0
2. 1
3. 2
4. 3
Какой тег следует применить, чтобы выдаваемый текст был большего размера, чем текущий?
1. <sup>
2. <sub>
3. <small>
4. <big>
В каком из тегов не применяется параметр width?
1. <hr>
2. <img>
3. <table>
4. <h5>
Выберите правильный ответ. Размер рамки таблицы по умолчанию равен
1. 0
2. 1
3. 2
4. 3
Какой из тегов не требует заключительного?
1. <b>
2. <br>
3. <i>
4. <u>
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №1 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Основные принципы построения сети Интернет. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> <img src=»av-5.gif» ALIGN=LEFT> <h2> МЕНЮ КАФЕ “ПРЕМЬЕР” </h2><BR CLEAR=LEFT> ………………………………………………………………………………… </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №2 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Гипертекст и WWW. Интеграция информационных ресурсов. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> …………………………………………………………………………………. </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №3 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Топология Web-пространства. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> …………………………………………………………………………………. </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №4 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Навигация в Интернет. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML> <HEAD> <TITLE> РЕКЛАМНОЕ ОБРАЩЕНИЕ</TITLE> </HEAD> <BODY > ………………………………………………………………………………… </CENTER> <a href=»index.html»>на главную страницу сайта</a><BR> <a href=»rest.html»>меню кафе</a> </FONT> </BODY> </HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №4 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Скрытый WEB. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML> <HEAD> <TITLE> index.html </TITLE> </HEAD> <BODY BGCOLOR=#F0F425 TEXT=#FF0000> <center> ………………………………………………………………. ПРЕДЛАГАЕМ ВАМ ШИРОКИЙ ВЫБОР<BR> ВЫСОКОКАЧЕСТВЕННЫХ ТОВАРОВ <BR> ОТЕЧЕСТВЕННЫХ И ЗАРУБЕЖНЫХ ФИРМ </b></I></font> ………………………………………………………………… Наш адрес: Тюмень, ул. Мельникайте, 104. </b></center> <center>Огромный выбор товаров на любой вкус <BR> Если Вы желаете отдохнуть, то можно посетить кафе<BR></center> ……………….. меню кафе смотрите здесь</a> <BR> ………………… хотите ознакомится с ассортиментом магазинов жмите сюда </a></font> </BODY> </HTML> </HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №5 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Характеристики ИПС. 2. Доработать код JavaScript чтобы в окне браузера ниже получилось следующее изображение. <html> <body> <br> Это обычный HTML документ. <br> ……………………………………………………… <br> Вновь документ HTML. </body> </html> С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь — конструкция: …………………………………………………………… |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №6 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Инструменты для поиска в Интернет. 2. Разработать код JavaScript чтобы при нажатии на кнопку «Click me» в окне браузера ниже получилось следующее изображение. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №7 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Поисковые машины. Принцип работы поисковых машин. 2. Доработать код JavaScript чтобы при известных переменных х=12, у=5 при нажатии на кнопку «Calculete» в окне получился результат суммы этих переменных. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №8 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Построение индекса. Поиск по индексу. 2. Создать форму с использованием скрипта JavaScript, используя образец формы. Нажатие по Кнопке1должно выдавать окно в котором будет прописан текст введенный в текстовое поле. Нажатие по Кнопке 2должно выдавать сообщение об установленном флажке в поле checkbox. Нажатие по кнопке1 Нажатие по кнопке2 На странице также должен быть отображен код цвета фона, и название второй кнопке, которое отражено на кнопке. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №9 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Метапоисковые системы. 2. Создать используяJavaScript страницу содержащую 3 фрейма. В двух фреймах должны открываться динамически созданные окна. Ссылка в третьем фрейме должна предлагать закрыть страницу. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №10 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Мировой рынок информационных услуг. 2. Создать используяJavaScript таймер и полосу прокрутки. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №11 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Информационные ресурсы сети Интернет. Виды информации хранящейся в Интернет и профессиональных БД. 2. Создать используяJavaScript таймер и полосу прокрутки. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №12 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Основные принципы построения сети Интернет. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> <img src=»av-5.gif» ALIGN=LEFT> <h2> МЕНЮ КАФЕ “ПРЕМЬЕР” </h2><BR CLEAR=LEFT> ………………………………………………………………………………… </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №13 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Гипертекст и WWW. Интеграция информационных ресурсов. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> …………………………………………………………………………………. </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №14 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Топология Web-пространства. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML><HEAD> <TITLE> Кафе </TITLE> </HEAD> <BODY BGCOLOR=PINK> …………………………………………………………………………………. </BODY></HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №15 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Навигация в Интернет. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML> <HEAD> <TITLE> РЕКЛАМНОЕ ОБРАЩЕНИЕ</TITLE> </HEAD> <BODY > ………………………………………………………………………………… </CENTER> <a href=»index.html»>на главную страницу сайта</a><BR> <a href=»rest.html»>меню кафе</a> </FONT> </BODY> </HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №16 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Скрытый WEB. 2. Доработать HTML-код, чтобы в окне браузера получилось следующее изображение. <HTML> <HEAD> <TITLE> index.html </TITLE> </HEAD> <BODY BGCOLOR=#F0F425 TEXT=#FF0000> <center> ………………………………………………………………. ПРЕДЛАГАЕМ ВАМ ШИРОКИЙ ВЫБОР<BR> ВЫСОКОКАЧЕСТВЕННЫХ ТОВАРОВ <BR> ОТЕЧЕСТВЕННЫХ И ЗАРУБЕЖНЫХ ФИРМ </b></I></font> ………………………………………………………………… Наш адрес: Тюмень, ул. Мельникайте, 104. </b></center> <center>Огромный выбор товаров на любой вкус <BR> Если Вы желаете отдохнуть, то можно посетить кафе<BR></center> ……………….. меню кафе смотрите здесь</a> <BR> ………………… хотите ознакомится с ассортиментом магазинов жмите сюда </a></font> </BODY> </HTML> </HTML> |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №17 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Характеристики ИПС. 2. Доработать код JavaScript чтобы в окне браузера ниже получилось следующее изображение. <html> <body> <br> Это обычный HTML документ. <br> ……………………………………………………… <br> Вновь документ HTML. </body> </html> С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь — конструкция: …………………………………………………………… |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №18 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Инструменты для поиска в Интернет. 2. Разработать код JavaScript чтобы при нажатии на кнопку «Click me» в окне браузера ниже получилось следующее изображение. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №19 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Поисковые машины. Принцип работы поисковых машин. 2. Доработать код JavaScript чтобы при известных переменных х=12, у=5 при нажатии на кнопку «Calculete» в окне получился результат суммы этих переменных. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №20 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Построение индекса. Поиск по индексу. 2. Создать форму с использованием скрипта JavaScript, используя образец формы. Нажатие по Кнопке1должно выдавать окно в котором будет прописан текст введенный в текстовое поле. Нажатие по Кнопке 2должно выдавать сообщение об установленном флажке в поле checkbox. Нажатие по кнопке1 Нажатие по кнопке2 На странице также должен быть отображен код цвета фона, и название второй кнопке, которое отражено на кнопке. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №21 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Метапоисковые системы. 2. Создать используяJavaScript страницу содержащую 3 фрейма. В двух фреймах должны открываться динамически созданные окна. Ссылка в третьем фрейме должна предлагать закрыть страницу. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №22 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Мировой рынок информационных услуг. 2. Создать используяJavaScript таймер и полосу прокрутки. |
| Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «ХАБАРОВСКИЙ ИНСТИТУТ ИНФОКОММУНИКАЦИЙ» | ||
| Кафедра «Информационных технологий» 1 семестр 2015/2016 уч.г. Экзаменатор к.п.н., доцент Кадура Е.В. | Экзаменационный билет №23 по дисциплине «Современные технологии программирования для Интернет» для направления подготовки профиля «ПОВТ» | «Утверждаю» Заведующий кафедрой «Информационных технологий» ___________________________ «17» сентября 2015г. |
| 1. Информационные ресурсы сети Интернет. Виды информации хранящейся в Интернет и профессиональных БД. 2. Создать используяJavaScript таймер и полосу прокрутки. |
Структура HTML документа
Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.
Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.
Измените свой документ следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
Это моя первая веб-страница
</body>
</html>
Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).
Внешний вид страницы никак не изменился. Однако предназначение HTML – определение значения для содержимого, а не внешнего представления, и данный пример показал нам несколько фундаментальных элементов веб-страницы, задающих базовую структуру документа HTML.
Первая строка, начинающаяся с «<!DOCTYPE…» говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.
Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.
Закрывающие теги
Теги </body> и </html> закрывают соответствующие открывающие теги. Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.
Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html>). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br />. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.
Атрибуты
У тегов также могут быть атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Все это выглядит следующим образом:
<тег атрибут="значение">контент</тег>
Подробнее о тегах с атрибутами мы поговорим немного позже.
Элементы
Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body>, включая сами эти теги, является элементом body.
2. Принципы гипертекстовой разметки
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами).
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки («<» и «>»). Простейший вариант тега — имя, заключенное в угловые скобки, например, <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
<TABLE WIDTH=570 ALIGN=center CELLPADDING=10
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выравнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Uniform Resource Locator, унифицированный указатель ресурса), других документов в качестве значения атрибута HREF.
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок «begin/end» в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.
При использовании вложенных элементов разметки в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например, теги <META> и <BASE>.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.
Есть и другие конечные теги, без которых браузеры отлично работают, например, конечный тег </HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Для краткости и образности мы будем в ряде случаев вместо словосочетания «элемент разметки» применять термин «контейнер».
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
«контейнер»=
<«имя тега» «список атрибутов»>
содержание контейнера
</»имя тега»>
Следует отметить, что в литературе кроме термина «контейнер» еще используется и термин «элемент». Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера.
Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега <BODY> просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER.
Например, чтобы представить символ «<» в документе HTML, нужно заменить его на <, а символ «>» — на >. То есть, если указать в тексте HTML строку <BODY>, она будет выглядеть на экране как текст <BODY>.
Может возникнуть вопрос: как быть с символами «</>», «&» и со специальными символами, типа знака ударения? Можно выводить их, используя соответствующие CER, например для «&» это будет &, и т. д.