HTML первые шаги - учебник HTML

HTML друпал drupal

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

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

Чтобы начать создавать документы в формате HTML нам понадобится программа блокнот (он уже входит в состав систем windows, linux) и браузер, чтобы этот документ просматривать (Firefox, Opera, Chrome или Internet Explorer). В качестве текстового редактора (блокнота) под ОС Windows я использую notepad++.

Я считаю, что пара строк выше должна была подготовить к обучению, а больше ничего нам и не нужно, поэтому приступим.

Мой первый документ HTML

Документы HTML - это обычные текстовые файлы, такие как файлы readme.txt и прочие файлы с раширением .txt

Заметка:

Что такое расширение?

Файловые расширения - привилегия преимущественно операционных систем с графическим интерфейсом. Основное предназначение их - указать операционной системе, какую программу следует вызвать для открытия определенного файла. Не будем говорить о всевозможных расширениях, указывающих на исполняемые файлы, так как командный интерпретатор операционной системы - тоже своего рода программа, которая работает с файлами, имеющими маску, например, .COM; .EXE; .BAT; .CMD; .VBS.

Для HTML документов мы будем использовать расширения .HTML, .HTM

Пришло время создавать документ. Заходим в нужную нам папку и кликаем правой кнопкой мыши в свободном месте:

создание нового документа

Выбираем создание текстового документа. Файл назовем index.html, можно также использовать расширение .htm.

добавляем html

Возможно, что настройки вашей системы не позволят задать расширение и вас сохранится файл index.txt. Тогда нужно:

  1. Открыть этот файл index.txt через блокнот.
  2. Выбрать в меню Файл->Сохранить как.
  3. В появившемся окне мы теперь можем прописать расширения сохраняемого файла.

меняем расширение на html

Теперь когда файл index.html создан, открываем его через блокнот и начинаем создавать HTML-разметку.
HTML разметка создается с помощью тегов. Теги имеют следующий вид

<tag>Некоторый текст</tag>

Сначала идет первая тега, он называется открывающим, это слово заключенное в знаки меньше и больше. Знаки меньше и больше не произносятся и мы говорим "это тег tag".

Начнем с самого простого тега <html></html>. Это самый главный тег с него начинается html документ и этим же тегом html документ заканчивается:

<html>
</html>

Писать теги можно и в строчку, но удобнее когда теги располагаются друг под другом на одной вертикальной линии, в этом случае notepad++ подсвечивает теги.

Дальше внутри тега <html> мы будем располагать тег <body></body>. Body это тело нашего документа в буквальном смысле. Все что мы видем в браузере находится внутри тега body. Совсем забыл про браузер. Давайте изменим содержимое файла index.html и сохраним файл.

<html>
  <body>
  </body>
</html>

Посмотрите как я расположил тег body, он отступает на два пробела от вертикальной линии тега html. Такое расположение увеличивает читаемость HTML-документа. Итак сохраняем документ и открываем его через браузер.

открываем html документ через браузер

У нас должно появится пустой экран. И это правильно, потому что мы еще никакого текста не добавили в документ.

Давайте же добавим текст, прямо между тегом body.

<html>
  <body>
    HTML мои первые шаги
  </body>
</html>

Сохраните документ и обновите страницу в браузере. Теперь текст HTML мои первые шаги появится. И все потому что мы разместили его в теге body, ни выше тега body, ни ниже тега body, а именно внутри тега.

первый документ

Вы наверно заметили что у меня только надпись Mozilla Firefox в заголовке документа, то есть у нас документ без заголовка. Давайте исправим безликий HTML-документ и добавим заголовок.

Заголовки мы будем добавлять внутри еще одного тега <head></head>. Тег <head> располагается выше тега body:

<html>
  <head>
  </head>
  <body>
    HTML мои первые шаги
  </body>
</html>

Если вы сейчас сохраните документ и обновите страницу в браузере, то ничего не измениться, в теге head необходимо прописать тег <title></title>, который отвечает за заголовок:

<html>
  <head>
    <title>HTML первые шаги drupalbook.ru</title>
  </head>
  <body>
    HTML мои первые шаги
  </body>
</html>

 Сохраняем файл, обновляем страницу в браузере и вуаля, у нашего документа появился заголовок.

Думаю для вводного урока этого достаточно, в следующих уроках мы разберем еще многое.

 

 

Комментарии

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Создавать видеоуроки, самое

Создавать видеоуроки, самое неблагодарное дело. Спасибо за труды.

 

Но хотелось бы расмотреть первый урок

Теги- это не [b]текст[/b], а  некий элемент (команда) язык разметки, правильнее дескриптор.

Т.е "ТЕГ" дает команду браузеру (Opera, Mazilla,IE) для выполнения какой-то функции.

 <tag>Некоторый текст</tag>

это не удачный пример, начинающие будут думать что такие теги реально существуют, лутше русскими буквами или реальным примером

 

 

Нужно было объяснить что теги бывают парные и одиночные, но обязательно все они должны закрываться слешем /

Парные типа

<head>  </head><body> </body>

и так далее

 

Одиночные вида

<hr />

<br />



Ну вот как то так нужно объяснять людям. Не, я коментирую не ради сдеба,  или тупо пофлудить. Я с этим сталкиваюсь, идут непонятки, и приходится буквально разжевать и положить врот. Нужно правильно подать учебный материал. 


 

Эти уроки я записывал с

Эти уроки я записывал с расчетом, чтобы быстрее перейти на jQuery, потом когда все уроки доделаю которые запланировал, буду делать уже расширенные уроки со всеми объяснениями.