Введение в HTML

1

Posted by Виктория Павловна Дончик | Posted in Web-дизайн, Web-разработки, Интернет | Posted on 10-02-2015

Метки:

Введение в HTMLВведение в  HTML

Сегодня на занятии мы начнем изучать язык разметки гипертекста, узнаем, что такое html, рассмотрим, какие элементы можно размещать на веб-странице и из каких тегов состоит любая html-страница, создадим простейшую html-страничку. Для изучения материала просмотрим видеоурок «HTML для начинающих». Что такое язык HTML?

HTML (HyperText Markup Language) – это язык разметки гипертекста.

Основное назначение языка HTML – это размещение элементов гипертекста на странице. Такими элементами являются:

  • абзацы,
  • заголовки
  • картинки
  • таблицы и т.д.

Элементы вводятся в html-документ с помощью тегов. Например, Пример элементов html-страницы

Любая HTML-страница состоит из двух частей: данных и тегов.

Изобразим структуру HTML-страницы:

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

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

Что представляют собой эти теги? Давайте посмотрим видеоурок «HTML для начинающих»:


Теперь перейдем к практике и попробуем создать первую html-страницу. Для этого

  1. Откроем Блокнот в MS Windows.
  2. Наберем текст простейшей html-странички (см. рисунок – код написан справа)
  3. Сохраним файл с расширением .html.
  4. Двойным щелчком ЛКМ открыть html-файл в браузере.

Результат ваших трудов должен совпадать с тем, что приведен на рисунке.

Подведем итоги:

  • Какой тег указывает браузеру, что это html-документ?
  • Что означает контейнер?
  • Какие основные элементы находятся в теге <head>? Видно ли содержимое этого тега пользователю?
  • Прокомментируйте <meta charset="UTF-8">.
  • В каком теге нужно размещать информацию, чтобы она была видна пользователю?
  • Для чего используется тег <!DOCTYPE>? Стандарты HTML или какую версию <!DOCTYPE> используют сегодня?
  • Для чего используется тег <p>? Тег <h1>?
  • С каким расширением нужно сохранять html-страничку?

P.S. Добавьте в свою простейшую страничку теги <!DOCTYPE HTML> и <meta charset="UTF-8">. Сохраните страницу с названием base.html. Как теперь выглядит ваша html-страничка?

P.S.S. Для удобства работы рекомендуется установить Notepad++

Следующий урок будет по теме "Теги и атрибуты HTML".

Похожие посты:

  1. WordPress html редактор
  2. Как открыть ссылку в новом окне
  3. Введение в Access

Comments (1)

Антон Сергеевич said on 11-02-2017

Спасибо за урок, очень интересно, буду изучать дальше. Без HTML в блогостроении очень сложно…
Антон Сергеевич Польза кэроба и вред кэроба. Стоит ли его употреблять?My Profile

Ответить

Write a comment

x