HTML – расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.
- Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
- Как следует из названия, HTML – это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML был разработан с целью определения структуры документов, таких как заголовки, списки, абзацы и так далее, чтобы облегчить обмен научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
HTML-документ
В следующем примере показан HTML-документ в простейшей форме:
Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Python парсинг динамических страниц сайтов с JavaScript Ajax
Теги для создания HTML-документа
Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
| Тег | Описание |
| Этот тег определяет тип документа и версию HTML. | |
| Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами . и телом документа, которое представлено тегами . . | |
| Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как , и т.д. | |
| Тег используется внутри тега , чтобы указать название документа. | |
| Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как , , |
и другие.
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.
ЯЗЫК РАЗМЕТКИ HTML ЗА 40 МИНУТ ДЛЯ НАЧИНАЮЩИХ. ВСЕ ТЕГИ ВКЛЮЧЕНЫ.
Структура HTML-документа
Структура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа
Язык создания web- страниц — HTML. Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная. — презентация
Презентация на тему: » Язык создания web- страниц — HTML. Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная.» — Транскрипт:
1 Язык создания web- страниц — HTML
2 Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. Определяет видимую часть документа Теги оглавления Помещает название документа в оглавление программы просмотра страниц
3 Атрибуты тела документа Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB — пример: FF красный цвет. Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: черный цвет. Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB — пример: 00FF00 — зеленый цвет. Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB — пример: серый цвет. Устанавливает цвет гиперссылок при нажатии.
5 Теги для форматирования текста Обрамляет предварительно отформатированный текст. Создает САМЫЙ БОЛЬШОЙ заголовок Создает самый маленький заголовок Создает жирный текст Создает наклонный текст Создает текст — имитирующий стиль печатной машинки. Используется для цитат, обычно наклонный текст. Используется для выделения из текста слова (наклонный или жирный текст),Используется для выделения наиболее важных частей текста (наклонный или жирный текст) Устанавливает размер текста в пределах от 1 до 7. Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
6 Гиперссылки Создает гиперссылку на другие документы или часть текущего документа. Создает гиперссылку вызова почтовой программы для написания письма автору документа. Отмечает часть текста как цель для гипперссылок в документе. Создает гиперссылку на часть текущего документа.
7 Форматирование Создает новый параграф Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center Вставляет перевод строки. Создает отступы с обеих сторон текста. Создает список определений. Определяет каждый из терминов списка Описывает каждое определение Создает нумерованный список Определяет каждый элемент списка и присваивает номер Создает ненумерованный список Предваряет каждый элемент списка и добавляет кружок или квадратик. Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
8 Графические элементы Добавляет изображение в HTML документ Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle Устанавливает толщину рамки вокруг изображения Добавляет в HTML документ горизонтальную линию. Устанавливает высоту(толщину) линии Устанавливает ширину линии, можно указать ширину в пикселах или процентах. Создает линию без тени. Задает линии определенный цвет. Значение RRGGBB.
9 Создание форм на ваших Web- страничках.(анкеты ) Для начала создайте текстовый документ (блокнот), сохраните в папку со своими разработанными страничками. Используя известные вам теги HTML, дайте название странице. Используя известные теги, напишите заголовок. Справка: формы это текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д.
10 Это текстовые поля для ввода данных. Такие поля создаются с помощью специальных тегов. Введите свое имя:
11 Отправка данных из формы. «>
12 Это группа переключателей укажите, к какой группе пользователей вы себя относите: учащийся студент учитель Группа радиокнопок Значения атрибута value должно быть универсальным (не повторяться)
13 Это группа флажков Добавьте в свою страничку HTML- код, просмотрите в браузере. Какие из сервисов интернет вы чаще всего используете? WWW FTP
14 K акими браузерами вы пользуетесь? IE Opera Netscape Navigator Neo Planet Это поля списков, щелкнув по стрелке, можно выбрать предложенный вариант.
15 Текстовое поле для ввода комментариев и пожеланий Какую информацию вы хотели бы еще видеть на нашем сайте?
16 Вот примерный образец анкеты, созданной для школьного сайта
Источник: www.myshared.ru
HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , |
и т.д.
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
Источник: www.wm-school.ru