Введение в HTML | Сам Себе Вебмастер

Введение в HTML

html-logo

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

HTML начало

Если говорить о назначение языка 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>

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

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

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

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

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

    Сохранение веб-страницы

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

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

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

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

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

    Простейшая веб-страница в браузере

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

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

Простейшая веб-страница в браузере результат

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

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

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

Дата обновления: 31.05.2016 — 14:59

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

SamSebeWebmaster.ru © 2016, все права защищены.