Основы HTML в картинках
О том, как заработать деньги в интернете, создать сайт и раскрутить его

Познаем основы HTML в картинках

Доброго времени суток, уважаемые читатели! Вот, пожалуй, и пришло время начать погружение в знания «святая святых» интернета – каким образом создаётся то, что мы с вами можем видеть при помощи интернет — обозревателей, а попросту «браузеров»: тексты, изображения.

Интересно, — думаете вы, каким умом нужно обладать для того, чтобы представить нам, пользователям в удобочитаемом виде непонятным образом зашифрованную информацию. Сразу же открою вам военную тайну – таким же умом, как и ваш. Не более.

С той лишь разницей, что люди, которые создают визуальную информацию на страницах (кстати, и сами страницы) интернета, знакомы с языком разметки HTML.

Сразу же позволю себе небольшую сноску: для тех, кто пришел в интернет, чтобы «убивать» своё время на пустой трёп в социальных сетях, эта информация об основах языка HTML будет совершенно лишней. Можете идти дальше.

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

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

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

Что такое HTML? Кто его придумал и зачем

Сразу же оговорюсь: HTML – это не язык программирования. Это язык разметки и создания текста и изображений.

HTML – (HyperText Markup Language  — язык разметки гипертекста). Большая часть страниц всемирной паутины создается при помощи HTML, который преобразовывается нашими пользовательскими браузерами при помощи приложений, чтобы отобразиться в удобной и понятной для пользователя форме: текстовом документе или изображении.

В период конца 80-х – начала 90-х г.г. прошлого века, английский ученый Тим Бернерс-Ли разработал HTML, как язык для обмена технической документацией. Изначально язык HTML не предназначался для вёрстки документов.

В техническом исполнении, язык HTML представляет собой набор семантических и структурных символов (элементов). Мы их называем «теги», хотя скорее правильное их название – дескрипторы. Чуть позже, в язык HTML были добавлены мультимедийные возможности, что позволило передавать не только текстовые документы, но и изображения, а впоследствии и видео.    

Версии HTML: прогрессивные шаги истории создания

Не вдаваясь в подробности и отличия, просто перечислю для вас основные версии языка HTML:

  • 1995 г. – в виде стандарта принимается HTML 2.0;
  • 1997 г. – HTML 3.2, а чуть позже, в этом же году HTML 4.0;
  • 1999 год – HTML 4.01;
  • В 2000 году принимается за основу т.н. ISO HTML, который основан на HTML 4.01 Strict;
  • В настоящий момент внедряется HTML 5, находящийся в постоянной разработке, которую планируется закончить к 2014 году.

Вы спросите, — а кто внедряет эти версии в пользование, и насколько централизованно? Существует такая организация, как W3C – Консорциум всемирной паутины, который и предлагает к использованию стандарты языка HTML для общего использования.

Язык HTML для начинающих – это всего лишь несколько тегов и знание структуры построения

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

Язык, голова, тело – html, head, body

Вот именно эти теги и являются основой построения любого вебдокумента.

А знаете что? Давайте прямо сейчас попробуем создать свою первую вебстраницу с текстом. Не пугайтесь. На самом деле это просто. Вы сразу же поймете основу языка HTML. Глаза смотрят – руки делают.

На рабочем столе нажмите правой мышью и в выпадающем окне Создать – Папку (назовите её HTML). Затем в ней создайте Текстовый документ

Назовите его Текстовый документ  index. Наберите в нем следующий текст с тегами:

Затем в текстовом редакторе. Я использую блокнот NOTEPAD++, отредактируйте тип файла: был index.txt должен стать index.html  для редакции нажмите в блокноте Файл – Сохранить как… – измените тип документа с txt на html.

В папке HTML yа рабочем столе у вас сохранился файл. Кликните по нему 2 раза мышью Вуаля! В браузере откроется первая созданная вами собственноручно вебстраница. Созданная с использованием языка HTML.

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

Каждый тег на своей полочке – структура html — документа

Вам нужно запомнить несколько простых правил:

  • Регистр в котором вы набираете тег. В языке html не имеет значения;
  • Текст набирается между двумя тегами: открывающим и закрывающим (<p>ваш текст</p>)
  • Элементы могут оставаться пустыми, и тогда закрывающий тег не нужен: <br> (это тег перевода строки).

Каждый документ HTML, создаваемый с применением той или иной версии HTML, начинается с того, что декларирует версию, которую вы используете: <!DOCTYPE>, например:

В случае, если декларация версии не указывается вначале создаваемой страницы, то отображение документа в браузере может быть некорректным. Затем уже идет структура html – документа, созданного вами, см. выше, самостоятельно.

 

Варианты декларации версий HTML 4.01

Строгий вариант strict

Переходный вариант transitional

Вариант с фреймами frameset (фрейм – рамка)

Декларация версии HTML 5 производится одним тегом

Для первого занятия достаточно, уважаемые друзья. Вы воочию убедились в том, что: не так страшен язык HTML, как казалось при первом взгляде. На следующем занятии по основам HTML? мы с вами рассмотрим язык HTML в плане того, каким образом и какие символы применяются для разметки гипертекста в html-документе.

Подписаться по e-mail RSS