→ Пошук по сайту       Увійти / Зареєструватися
Знання HTML — мова розмітки гіпертексту

HTML — мова розмітки гіпертексту. Семантичний конспект розділу

Компетенція Робота з HTML

HTML — мова розмітки гіпертексту

HTML (англ. HyperText Markup Language — Мова розмітки гіпертекстових документів) — основана на SGML текстова мова розмітки, призначена для маркування документів, що містять текст, зображення, гіперпосилання, тощо
Семантичне ядро:
Теги ↓  HTML ↓  Браузер ↓  Ссылки ↓  <A> ↓  PNG-24 ↓  <html> ↓  Наиболее популярные браузеры ↓  GIF ↓  Список

1. HTML [Ключове поняття розділу]

HTML — HyperText Markup Language

HTML — Язык разметки гипертекста

HTML Представляет собой систему верстки веб-страниц и определяет, где и как в документе отображать отдельные элементы (текст, рисунки, ссылки и др.)


HTMLЕго освоение сводится к изучению основных тегов (их около двух десятков) и правил их использования

2. Ссылки [Ключове поняття розділу]

Ссылки — Основа гипертекстовых документов, позволяет переходить с одной веб-страницы на другую


Ссылки Создание выполняются с помощью тега <a>


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


СсылкиПосилання.

3. Теги [Центральне поняття розділу]

Теги — Элементы HTML-разметки


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


Ссылки Создание выполняются с помощью тега <a>


Теги Синтаксис:
<имя параметр1="значение" параметр2="значение">
<имя параметр1="значение" параметр2="значение">...</имя>

4. Парный тег

Парный тег :
  • Может включать внутри себя другие теги или текст
  • Остоит из двух частей открывающий и закрывающий тег
  • По-другому называется контейнером
  • Допускается вкладывать в него другие теги, однако следует соблюдать их порядок

5. Одиночный тег

Одиночный тег Используется самостоятельно и не может включать внутри себя другие теги или текст

6. <meta>

meta — Метатег

meta — Является универсальным и добавляет целый класс возможностей, в частности, дает возможность изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое


meta Одиночный тег

7. Noresize

Noresize — Параметр тега frame, используемый для блокировки возможности изменения пользователем размера фреймов


Параметр не требует никаких значений и используется сам по себе.

Для случая двух фреймов этот параметр можно указать лишь в одном месте.

8. <SPAN>

SPAN — Универсальный тег, предназначенный для определения встроенного элемента внутри документа

9. <BR>

BR — Тег, устанавливающий перевод строки в том месте, где этот тег находится

10. </body>

/bodyтег, показывающий, что тело документа завершено

11. </тег>

/тег — Закрывающий тег

12. <тег>

тег — Открывающий тег

13. Scrolling

Scrolling — Параметр тега frame, для управления отображением полос прокрутки


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

14. <A> [Ключове поняття розділу]

A тег, являющийся одним из важных элементов HTML и предназначен для создания ссылок

Ссылки Создание выполняются с помощью тега <a>

15. Список [Ключове поняття розділу]

Список — Взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры


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

16. Маркированный список

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


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

17. Список определений

Список определенийСписок состоящий из двух элементов термина и его определения


Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. .

18. Нумерованный список

Нумерованный списокСписок представляющий собой набор элементов с их порядковыми номерами

19. Параметры тегов

Параметры тегов Условно их можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега

20. <BIG>

BIG — Тег, который увеличивает размер шрифта на единицу по сравнению с обычным текстом


Добавление этого тега увеличивает текст на одну условную единицу. .

21. Спецификация HTML

Спецификация HTML Регламентирует порядок применения тегов, их вложенность и принцип работы

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

22. Браузер [Ключове поняття розділу]

Браузер Это программа, предназначенная для просмотра веб-страниц


Браузер:
  • В его задачу входит подключение к удаленному серверу, получение кода HTML и его интерпретация согласно спецификации.
  • Преобразует HTML-документ в веб-страницу, которую мы и наблюдаем, когда "ходим" по Интернету
  • Вполне корректно работает и на локальном компьютере, это позволяет легко проверять работу HTML-документов
  • Є різновидом так званих тонких клієнтів
  • Здатний відображати веб-сторінки і, як правило, входить до складу операційної системи, а функції його оновлення і супроводу лежать на постачальнику операційної системи.

23. Наиболее популярные браузеры [Ключове поняття розділу]

Наиболее популярные браузеры :
Firefox, Internet Explorer и Opera

24. Firefox

FirefoxЯвляется открытой системой, разрабатываемой группой Mozilla

25. Internet Explorer

Internet Explorer — Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows


Internet Explorer К сожалению, хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения приходится порой отдельно отлаживать код специально под него


Internet ExplorerКратко обозначается IE.

26. <EM>

EM — Тег, который предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием

27. <FRAME>

FRAME — Тег,который определяет свойства отдельного фрейма, на которые делится окно браузера

28. <title>

title — Определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач


title — Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик


titleЯвляется обязательным и должен непременно присутствовать в коде документа

title Має величезне значення з точки зору ключових слів (SEO)

29. <head>

head — Заголовок документа


head Может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>

30. <body>

body — Тело документа


body — Предназначен для размещения тегов и содержательной части веб-страницы

31. <html> [Ключове поняття розділу]

html Определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>)

32. Фреймы

Фреймы:
  • С помощью фреймов веб-страница разграничивается на две области, которые содержат навигацию по сайту и его контент.
  • Фреймы предоставляют уникальную возможность размещение информации точно в нужном месте окна браузера.
  • Можно изменять размеры фреймов [на летуk, чего не позволяет сделать традиционная верстка HTML
  • С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы
  • Так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.



Фреймы Разделяют окно браузера на отдельные области, расположенные рядом друг с другом

33. <HR>

HR Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера

34. Якорь

Якорь — Закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке


С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку [Назадk возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку [Назадk два раза. .

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет..

35. Tidy

Tidy — Программа предназначеная для проверки локального HTML-файла или при отсутствии подключения к Интернету

36. EXtensible HyperText Markup Language

EXtensible HyperText Markup Language — XHTML

EXtensible HyperText Markup Language — расширенный язык разметки гипертекста

37. XHTML

XHTML EXtensible HyperText Markup Language

XHTML — Язык разметки гипертекста предназначен для замены HTML и считается его более строгой версией


XHTML Расширенный язык разметки гипертекста.

38. Валидатор

Валидатор — Программа для проверки синтаксиса HTML и выявления ошибок в коде

39. !DOCTYPE

!DOCTYPE — Предназначен для указания типа текущего документа DTD (document type definition, описание типа документа)


!DOCTYPE Необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях

!DOCTYPEЭтот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ

40. Битая ссылка

Битая ссылка Ссылка на файл, которого не существует

41. Mailto

Mailto — Ключевое слово, используемое для создание ссылки на адрес электронной почты

42. GIF [Ключове поняття розділу]

GIFGraphics Interchange Format

GIF — Формат графических файлов, широко применяемый при создании сайтов


Использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения..

43. PNG-8

PNG-8Portable Network Graphics

PNG-8 — Формат по своему действию аналогичен GIF

44. JPEG

JPEGJoint Photographic Experts Group

JPEG — Популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений

45. PNG-24 [Ключове поняття розділу]

PNG-24 — Формат, аналогичный PNG-8, но использующий 24-битную палитру цвета


Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях .

46. <IMG>

IMG — Тег, предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG

47. _self

_self — Параметр, загружает страницу в текущее окно (это значение задается по умолчанию)

48. _parent

_parent — Параметр, который загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self

49. Сайт

Сайт — Набор страниц, связанных между собой ссылками и единым оформлением

50. Валидация HTML-документа

Валидация HTML-документа — Предназначена для выявления ошибок в синтаксисе веб-страницы и расхождений со спецификацией HTML

51. Типы тегов

Типы тегов:
Верхнего уровня; заголовка документа; блочные элементы; встроенные элементы; универсальные элементы; списки; таблицы

52. Теги верхнего уровня

Теги верхнего уровня — Предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа

53. Блочные элементы

Блочные элементыЗанимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки

54. <BLOCKQUOTE>

BLOCKQUOTE — Предназначен для выделения длинных цитат внутри документа.


BLOCKQUOTEТекст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

55. <DIV>

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

56. <H1>...<H6>

H1>...<H6Определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка

57. <P>

PОпределяет параграф (абзац) текста

58. <PRE>

PREЗадает блок предварительно форматированного текста

PREТображается обычно моноширинным шрифтом и со всеми пробелами между словами

59. Подсветка синтаксиса

Подсветка синтаксиса — Выделение тегов, текста, ключевых слов и параметров разными цветами

60. Графический редактор

Графический редактор — Редактор необходимый для обработки изображений и их подготовки для публикации на веб-странице

61. Локальный справочник

Локальный справочник — Справочник в формате CHM (стандартный файл справки Windows) содержит список всех основных тегов с их описанием и примерами использования

62. Комментарий

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


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

63. Keywords

KeywordsЗначение, предназначено в первую очередь для повышения рейтинга сайта в поисковых системах

64. Description

Description — Значение параметра name, используемое для краткого описания содержимого веб-страницы

65. <B>

B — Тег, определяет жирное начертание шрифта

66. <I>

I — Тег, устанавливающий курсивное начертание шрифта

67. <SMALL>

SMALL — Тег, который уменьшает размер шрифта на единицу по сравнению с обычным текстом

68. <SUB>

SUB — Тег,который отображает шрифт в виде нижнего индекса

69. <SUP>

SUP — Тег, который отображает шрифт в виде верхнего индекса

70. <DEL>

DEL — Тег, который используется для выделения текста, который был удален в новой версии документа

71. <INS>

INS — Тег, который предназначен для акцентирования вновь добавленного текста

72. <OL>

OL — Тег, который устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей

73. <UL>

UL — Тег, который устанавливает маркированный список, каждый элемент которого начинается с небольшого символаP маркера

74. <LI>

LI — Тег, определяющий отдельный элемент списка

75. <DD>

DD — Тег, задающий определение термина, созданого в списке пределений

76. <DT>

DT — Тег, создающий термин для списка определений

77. <DL>

DL — Тег, с которго начинаеться список определений

78. <TABLE>

TABLE — Контейнер для элементов, определяющих содержимое таблицы

79. <TD>

TD — Тег, предназначен для создания одной ячейки таблицы

80. <TH>

TH — Тег, предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная

81. <TR>

TR — Тег,который служит контейнером для создания строки таблицы

82. Шестнадцатеричная система

Шестнадцатеричная система — Система, которая базируется, на числе 16


Цифры системы будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной..

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0..

83. Веб-цвета

Веб-цвета — Цвета, для каждой составляющей красной, зеленой и синей, устанавливается одно из шести значений 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF)


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

84. Пиксел

Пиксел — Элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора


При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380".

85. URL

URLUniversal Resource Locator, универсальный указатель ресурсов


URLПредставляет собой путь к графическому файлу

86. Абсолютный адрес

Абсолютный адресАдрес начинающийся с ключевого слова http://


Применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта..

87. Веб-сервер

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

88. Относительная ссылка

Относительная ссылка — Ссылка, которая ведёт отсчет от корня сайта или текущего документа

89. Абсолютная ссылка

Абсолютная ссылка — Ссылка, которая начинаеться с указания протокола (обычно http://) и содержит имя сайта

90. Индексный файл

Индексный файл — Файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла


Обычно в качестве индексного файла выступает документ с именем index.html..

91. Непосещенная ссылка

Непосещенная ссылка — Ссылка, которую еще не открывали


По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием..

92. Активная ссылка

Активная ссылка — Ссылка, которая помечается как активная в момент ее открытия


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

93. Посещенная ссылка

Посещенная ссылка — Ссылка, после открытия документа пользователем, на который она указывает, меняет свой цвет на фиолетовый, установленный по умолчанию.

94. _blank

_blank — Параметр, загружает страницу в новое окно браузера

95. _top

_top — Параметр, который отменяет все фреймы и загружает страницу в полном окне браузера

96. Альтернативный текст

Альтернативный текст — Текст, который позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений

97. alt

alt — Параметр, который используеться для создания альтернативного текста

98. Width

Width — Параметр, предусмотреный для изменения ширины рисунка

99. Height

Height — Параметр, предусмотреный для изменения высоты рисунка

100. ALIGN

ALIGN — Параметр тега table, задает выравнивание таблицы по краю окна браузера


Допустимые значения: left- выравнивание таблицы по левому краю, centerP по центру и rightP по правому краю. Когда используются аргументы left и right, текст начинает обтекать таблицу сбоку и снизу..

101. BGCOLOR

BGCOLOR — Параметр тега table, устанавливает цвет фона таблицы

102. BORDER

BORDER — Параметр тега table, устанавливает толщину границ в пикселах

103. CELLPADDING

CELLPADDING — Параметр тега table, определяет расстояние между границей ячейки и ее содержимым

104. CELLSPACING

CELLSPACING — Параметр тега table, задает расстояние между внешними границами ячеек

105. COLS

COLS — Параметр, указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению

106. RULES

RULES — Параметр, который сообщает браузеру, где отображать границы между ячейками

107. COLSPAN

COLSPAN — Параметр тега table, который устанавливает число ячеек, которые должны быть объединены по горизонтали

108. ROWSPAN

ROWSPAN — Параметр тега table, который устанавливает число ячеек, которые должны быть объединены по вертикали

109. VALIGN

VALIGN — Параметр тега table, устанавливает вертикальное выравнивание содержимого ячейки

110. Colspan

Colspan — Параметр тега TD для объединения двух и более ячеек в одну

111. Rowspan

Rowspan — Параметр тега TD используемый для объединения ячейки по вертикали

112. <Caption>

Caption — Тег, который устанавливает текст и его положение относительно таблицы

113. <Frameset>

Frameset — Тег, используемый для создания фрейма


FramesetПрименяется для разделения экрана на области

114. Плавающий фрейм

Плавающий фрейм — Фрейм, который можно добавлять в любое место веб-страницы

115. <Iframe>

Iframe — Тег, используемый для создания плавающего фрейма

116. Валидация

Валидация — Проверка документа на соответствие веб-стандартам и выявление существующих ошибок

117. XML

XMLeXtensible Markup Language


Синтаксис XML более жесткий, чем HTML и не прощает малейших ошибок..

XML похож на языки программирования, в которых программа не будет скомпилирована, пока код не отлажен..

HTML является первой ступенькой к изучению XML, поэтому приучая себя писать код по всем правилам, будет легче перейти к следующему этапу развития HTML..


XMLРасширяемый язык разметки.

118. XHTML 1.0 Strict

XHTML 1.0 Strict — Документ по спецификации XHTML 1.0, используемый в том случае, если в документе идет четкое разделение оформления и содержания

119. XHTML 1.0 Transitional

XHTML 1.0 Transitional — Документ по спецификации XHTML 1.0, обычно применяемый, когда правило разделения оформления и содержания выполняется не в полной мере

120. XHTML 1.0 Frameset

XHTML 1.0 Frameset — Документ по спецификации XHTML 1.0 применяется, когда окно браузера делится на два или более фрейма

121. <CITE>

CITE — Тег, с помощью которого оформляються цитаты

122. <ABBR>

ABBR — Тег, который используется для описания аббревиатуры

123. <ACRONYM>

ACRONYM — Тег, который используется для описания акронима

124. <CODE>

CODE — Тег,используется для отображения фрагментов программного кода

125. <DFN>

DFN — Тег,используется для определений


DFNПример:

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

126. <KBD>

KBD — Тег, используемый для выделения текста, вводимого пользователем с клавиатуры

127. <SAMP>

SAMP — Тег, используется для выделения примеров (по умолчанию моноширинной шрифт)

128. <STRONG>

STRONG — Тег, используется для выделения текста (по умолчанию жирный шрифт)

129. <VAR>

VAR — Тег, используется для выделения переменных в фрагменте кода программы (по умолчанию курсив)
загрузка...
Сторінки, близькі за змістом