Введение в HTML
Опубликовано: 01.09.2018
Все сайты в интернете состоят из отдельных веб-страниц. Их подавляющее большинство создается с помощью 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. Переходим в следующий урок.