HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.
Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
| Основные теги | |
| ;; | Указывает программе просмотра страниц что это HTML документ. |
| ;; | Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
| ;; | Определяет видимую часть документа |
| Теги оглавления | |
| ;; | Помещает название документа в оглавление программы просмотра страниц |
| Атрибуты тела документа | |
| ; | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет. |
| ; | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет. |
| ; | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет. |
| ; | Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет. |
| ; | Устанавливает цвет гиперссылок при нажатии. |
| Теги для форматирования текста | |
| ;; | Обрамляет предварительно отформатированный текст. |
| ;; | Создает САМЫЙ БОЛЬШОЙ заголовок |
| ;; | Создает самый маленький заголовок |
| ;; | Создает жирый текст |
| ;; | Создает наклонный текст |
| ;; | Создает текст – имитирующий стиль печатной машинки. |
| ;; | Используется для цитат, обычно наклонный текст. |
| ;; | Используется для выделения из текста слова (наклонный или жирный текст) |
| ;; | Устанавливает размер текста в пределах от 1 до 7. |
| ;; | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
| Гиперссылки | |
| ;; | Создает гиперссылку на другие документы или часть текущего документа. |
| ; ; |
Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
| ;; | Отмечает часть текста как цель для гипперссылок в документе. |
| ;; | Создает гиперссылку на часть текущего документа. |
| Форматирование | |
| ; | Создает новый параграф |
| ; | Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
| ; | Вставляет перевод строки. |
| ; ; |
Создает отступы с обеих сторон текста. |
| ;; | Создает список определений. |
| ; | Определяет каждый из терминов списка |
| ; | Описывает каждое определение |
| ;; | Создает нумерованный список |
| ; | Определяет каждый элемент списка и присваивает номер |
| ;; | Создает ненумерованный список |
| ; | Предваряет каждый элемент списка и добавляет кружок или квадратик. |
| ; | Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
| Графические элементы | |
| ; | Добавляет изображение в HTML документ |
| ; | Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
| ; | Устанавливает толщину рамки вокруг изображения |
| ; | Добавляет в HTML документ горизонтальную линию. |
| ; | Устанавливает высоту(толщину) линии |
| ; | Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
| ; | Создает линию без тени. |
| ; | Задает линии определенный цвет. Значение RRGGBB. |
| Таблицы | |
| Создает таблицу. | |
| Определяет строку в таблице. | |
| Определяет отдельную ячейку в таблице. | |
| Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) | |
| Атрибуты таблицы | |
| ; | Задает толщину рамки таблицы. |
| ; | Задает расстояние между ячейками таблицы. |
| ; | Задает расстояние между содержимым ячейки и ее рамкой. |
| ; | Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
| ; или ; | Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
| ; или ; | Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
| ; | Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
| Фреймы | |
| ;; | Предваряет тег ; в документе, содержащем фреймы; |
| ; | Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
| ; | Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
| ; | Определяет единичный фрейм или область в таблице фреймов. |
| ;; | Определяет, что будет показано в окне браузера если он не поддерживает фреймы. |
| Атрибуты фреймов | |
| ; | Определяет какой из HTML документов будет показан во фрейме. |
| ; | Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фреймр или область из других фреймов. |
| ; | Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1. |
| ; | Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1. |
| ; | Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть “yes,” “no,” или “auto”. Значение по умолчанию для обычных документов – auto. |
| ; | Препятствует изменению размеров фрейма. |
| Формы | |
| Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. | |
| ;; | Создает формы |
| ;; | Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает ниспадающее меню |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. |
| ; | Создает checkbox. За тегом следует текст. |
| ; | Создает radio кнопку. За тегом следует текст. |
| ; | Создает строку для ввода текста. Параметром Size указывается длина в символах. |
| ; | Создает кнопку “Принять” |
| ; | Создает кнопку “Принять” – для этого используется изображение |
| ; | Создает кнопку “Отмена” |
Что такое HTML?
- ← Глоссарий WEB терминов
- Установка XAMPP →
Источник: vavik96.com
Описание средств реализации
Язык HTML, или универсальный язык разметки гипертекста, используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения как программе, так и человеку. Благодаря этому HTML-страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.
HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, HTML-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от английского tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как . Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Каждый HTML-документ содержит в себе две части: заголовок и тело страницы. В заголовке размещается название и некоторая специальная информацию о странице. Для реализации проекта использовались тэги описанные ниже (таблица 3).
| Название тега (пример) | Назначение тега |
| Основные теги | |
| Указывает программе просмотра страниц что это HTML документ. | |
| Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. | |
| Определяет видимую часть документа | |
| Помещает название документа в оглавление программы просмотра страниц | |
| Создает гиперссылку на другие документы или часть текущего документа. | |
| Теги форматирования | |
| Обрамляет предварительно отформатированный текст. | |
| Создает самый большой заголовок | |
| Создает самый маленький заголовок | |
| Создает жирый текст | |
| Создает наклонный текст | |
| Вставляет перевод строки | |
| Создает нумерованный список | |
| Определяет каждый элемент списка и присваивает номер | |
| Создает ненумерованный список |
Продолжение таблицы 3
| Теги для работы с графикой | |
| Добавляет изображение в HTML документ | |
| Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle | |
| Устанавливает толщину рамки вокруг изображения | |
| Добавляет в HTML документ горизонтальную линию | |
| Теги для работы с таблицами | |
| Создает таблицу | |
| Определяет строку в таблице | |
| Определяет отдельную ячейку в таблице | |
| Задает толщину рамки таблицы | |
| Задает расстояние между ячейками таблицы. | |
| Задает расстояние между содержимым ячейки и ее рамкой | |
| Устанавливает ширину таблицы в пикселах или процентах от ширины документа |
При реализации ресурса, создаваемого в рамках данного проекта, использовалась технология каскадных таблиц стилей (CSS).
Для создания HTML-страниц можно пользоваться любым текстовым редактором, например Блокнотом. Существуют и специализированные программы. Эти HTML-редакторы делятся на два типа: визуальные и невизуальные. Визуальные HTML-редакторы обладают интуитивно понятным интерфейсом и автоматизируют работу разработчика. Невизуальные редакторы требуют тэгов «вручную».
В данном проекте использован визуальный редактор Macromedia Dreamweaver. Macromedia Dreamweaver (сейчас — Adobe Dreamweaver) — профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети. Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, отладчик JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать JavaScript, XML и другие текстовые документы, которые поддерживаются в Dreamweaver. Возможность визуального редактирования в Dreamweaver также позволяет быстро создавать или менять дизайн проекта.
Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:
Источник: studopedia.ru
«HTML – язык разметки гипертекстовых документов»
В нашей повседневной жизни очень часто приходится иметь дело с глобальной компьютерной сетью, так как современный человек большинство информации черпает из интернета и много времени проводит за компьютером, создавая сайты и персональные страницы. Поэтому возникает необходимость овладеть навыками создания качественных web-страниц для публикации их в сети.
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.
Просмотр содержимого документа
«Таблица основных тэгов языка HTML»
Просмотр содержимого документа
«Таблица тэгов для форматирования текста»
Приложение 2 Таблица тэгов для форматирования текста
| ТЭГИ | НАЗНАЧЕНИЕ |
| … | Задает размер заголовка |
| Обрамляет предварительно отформатированный текст | |
| Жирное начертание шрифта | |
| Начертание Курсив | |
| Имитация стиля печатной машинки | |
| Используется для цитат, обычно наклонный текст | |
| Используется для выделения наиболее важных частей текста (наклонный и жирный текст) | |
| Устанавливает размер текста в пределах от 1 до 7 | |
| Устанавливает цвет текста, используя значение цвета в виде | |
| Начало нового абзаца | |
| align=… | Выравнивает абзац относительно одной из сторон документа, значения: |
| Вставляет перевод строки | |
| Создает отступы с обеих сторон текста. | |
| Создает нумерованный список | |
| Определяет каждый элемент списка и присваивает номер | |
| Создает ненумерованный список | |
| Создает гиперссылку на другие документы или часть текущего документа |
Просмотр содержимого документа
«Тест по теме вариант 1»
- Интернет-адрес – это…
- Интернет – это…
- Сервер – это…
- Модем – это…
- Скорость передачи данных – это…
Просмотр содержимого документа
«Тест по теме вариант 2»
- Адресация – это…
- Локальные компьютерные сети – это…
- Сетевой адаптер – это…
- Домен – это…
- Всемирная паутина – это…
Просмотр содержимого документа
«план-конспект урока»
- программное обеспечение: Ms . Power Point
- мультимедиа-проектор и экран
- презентация к уроку
- раздаточный материал: тесты и таблицы с тегами
- учебник
- Образовательная:
- обобщить знания по теме «Коммуникационные технологии»;
- научиться разрабатывать документы, предназначенные для публикации в Интернете;
- отработать навыки редактирования web -страниц в кодах HTML ;
- Развивающая:
- развивать творчество учащихся, способствовать формированию взглядов на окружающий мир, на вклад человека в представление и обработку информации;
- Воспитательная:
- воспитывать устойчивый познавательный интерес к предмету информатика через показ практического применения темы;
- воспитывать активность, самостоятельность и аккуратность в работе учащихся, а также стремление к реализации себя в обществе.
- Организационный момент
- Актуализация базовых знаний.
- Изучение нового материала.
- Закрепление изученного материала.
- Домашнее задание.
- Подведение итогов урока.
- Рефлексия.
- Организационный момент. (Проверка готовности учащихся класса уроку и проверка отсутствующих). Сообщение темы и целей урока.
- Актуализация базовых знаний.
- Изучение нового материала.
- Создать персональную папку, где обязательным является использование для имени папки латинских букв;
- Создать текстовой документ блокнот;
- Открыть документ и сохранить его под новым именем с расширением .html или .htm.
- Закрыть документ;
- Открыть html –документ;
- Открыть блокнот, выполнив команду Вид/в виде html .
- В папке должны находиться два файла: текстовый документ и документ html .
- Закрепление изученного материала.
- Домашнее задание: Разработать страницу «Кем я хотел (а) бы стать» с использованием тэгов для форматирования текста. (СЛАЙД 17)
- Подведение итогов урока.
Просмотр содержимого презентации
«Язык разметки HTML»
10/8/16 «HTML — язык разметки гипертекстовых документов» МБОУ СОШ №9 ст. Бородинская учитель А.В. Бакланова 
- обобщить знания по теме «Коммуникационные технологии»;
- научиться разрабатывать документы, предназначенные для публикации в Интернете;
- отработать навыки редактирования web-страниц в кодах HTML.
Если мы хотим создать качественные по стилю и содержанию документы, предназначенные для публикации в сети Интернет, недостаточно использовать инструментальные средства создания web-страниц.
Для работы с HTML документом необходимо :
- Создать папку, где обязательным требованием является использование для имени папки латинских букв;
- Создать текстовой документ блокнот;
- Открыть документ и сохранить его под новым именем с расширением .html или .htm
- Закрыть документ;
- Открыть html –документ;
- Открыть блокнот, выполнив команду Вид/в виде html.
- В папке должны находится два файла: один созданный в Блокноте, другой – имеет расширение .htm
- Тэги– это управляющие символы , которыеопределяют вид Web-страницы при её просмотре в браузере
Браузер – это специальная программа для просмотра и создания Web-страниц
Контейнеры – это парные тэги, содержащие открывающий и закрывающий тэг.
Каждый тэг ограничен угловыми скобками . Технология предполагает использование открытых и закрытых тэгов, которые указывают на начало и конец форматирования определенного блока
Программа состоит из двух частей:
В первой части задается заголовок страницы (он отображается в заголовке окна) и первым загружается при просмотре страницы.
Общий вид программы:
Устройство компьютера Внешние устройства
Таблица основных тэгов языка HTML
Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ
Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тэг названия документа и тэги для поисковых машин
Помещает название в оглавление программы просмотра страниц
Определяет видимую часть документа
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет
Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет
Устанавливает цвет гиперссылок при нажатии
Для того чтобы создать свою первую страницу недостаточно знать основные тэги.
В первую очередь необходимо научиться форматировать текст соответствующим образом.
Таблица тэгов для форматирования текста
Задает размер заголовка
Обрамляет предварительно отформатированный текст
Жирное начертание шрифта
Начертание Курсив
Имитация стиля печатной машинки
Используется для цитат, обычно наклонный текст
Используется для выделения наиболее важных частей текста (наклонный и жирный текст)
Устанавливает размер текста в пределах от 1 до 7
Устанавливает цвет текста, используя значение цвета в виде
Таблица тэгов для форматирования текста
Начало нового абзаца
Выравнивает абзац относительно одной из сторон документа, значения:
Вставляет перевод строки
Создает отступы с обеих сторон текста.
Создает нумерованный список
Домашнее задание:
Разработать страницу «Кем я хотел(а) бы стать» с использованием тэгов для форматирования текста.
Спасибо за внимание!
Источник: kopilkaurokov.ru