Введение в HTML

Опубликовано: 01.09.2018

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

Видеокурс HTML & CSS. Урок 1. Введение в HTML.

Все сайты в интернете состоят из отдельных веб-страниц. Их подавляющее большинство создается с помощью HTML (HyperText Markup Language) — языка разметки гипертекста. В сайтостроение это основной язык, который необходимо изучить в первую очередь.


HTML для начинающих - #1 - Введение

Если говорить о назначение языка HTML (на русском ХТМЛ), то данный язык предназначен для функциональной разметки документа, то есть позволяет определить назначение фрагментов веб-страницы. Например, если в тексте есть заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком.

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

Посмотрите на код простейшей веб-страницы:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Простейшая HTML страница</title> </head> <body> <h1>Заголовок первого уровня</h1> <p>Тескт веб-страницы.</p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Простейшая HTML страница</title> </head> <body> <h1>Заголовок первого уровня</h1> <p>Тескт веб-страницы.</p> </body> </html>

Это будет ваша первая веб-страница. Что необходимо для ее создания?

Запускаем текстовый редактор Блокнот. Это стандартная программа операционной системы Windows. Наберите в редакторе код, указанный выше:

Рисунок 1. HTML код веб-страницы, набранный в блокноте

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

После того, как документ заполнен, его необходимо сохранить в нужном формате. Для этого выполняем команду: Файл > Сохранить как

Рисунок 2. Выбор команды сохранения

Откроется окно сохранения файла, здесь необходимо выполнить следующее:

Рисунок 3. Правильное сохранение HTML документа

Сохраним файл на рабочий стол , файлу дадим имя index.html (при этом помните, то index — это значение, а html — расширение, документы созданные на языке HTML всегда должны иметь расширение .html, иначе браузер не поймет, как обрабатывать данный документ). Тип файла также всегда необходимо указывать — Все файлы . Кодировку выставляем на UTF-8 , иначе в документе могут выскочить непонятные символы. Жмем на кнопку Сохранить.

Открываем созданный файл в любимом браузере:

Рисунок 4. Просмотр созданной веб-страницы в браузере

Те кто прошли урок поздравляю с созданием первой веб-страницы. Теперь давайте разберем наш результат. Писали, писали целых 11 строк непонятного кода, а браузер отображает все 2 строки текста. Давайте посмотрим какие элементы браузер отобразил:

Рисунок 5. Тэги, которые отобразил браузер

Это всего три тэга. Остальные тэги отвечают за структуру.

На этом первый урок по изучению языка гипертекстовой разметки документа — HTML. Переходим в следующий урок.

Читайте также:

rss