С чего начать изучение html? С чего начать изучение CSS и HTML? Мой путь в WEB.

Когда-то давно я захотел сделать свой первый сайт IT-тематики. Из этой области я знал только совсем простые азы HTML и пожалуй все. Но желание и смелости у меня было хоть отбавляй, поэтому без особой боязни я зарегистрировал свое первое доменное имя.

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

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

При выборе CMS я обращал внимание только на одно - CMS должна быть не требовательной к ресурсам сервера, так как желание, наверное, каждого новичка в этой области, свести к минимуму все затраты. Ну, то что CMS должна быть блоговой это понятно.

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

При колоссальной производительности эта CMS может размещаться практически на любом хостинге, где есть MySQL и поддержка PHP. В данный момент я использую недорогой хостинг, не VPS, и размещаю на нем 16 сайтов. Суточное посещение всех сайтов равняется примерно 5000 уникальных посетителей в сутки. Я думаю, что это хороший показатель производительности Textpattern.

Основной проблемой, с которой я столкнулся после установки этой CMS, это абсолютное мое незнание основ CSS. Я по крупице выуживал информацию из русскоязычного сообщества, пока в итоге не наткнулся на сайт http://htmlbook.ru . До этой своей находки, я подумывал о покупке книге по CSS, но теперь я даже рад, что не успел этого сделать, так как это была бы очередная покупка нового пылесборника.

На сайте HTMLbook я нашел очень много хорошо структурированной информации. Для новичка - это просто клад. Я и сейчас нередко обращаюсь в к этому ресурсу, так как все запомнить нельзя, да и не нужно это. Главное знание человека - это знать где достать то, что тебе нужно!

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

P.S. Всегда дивлюсь, когда забредаю на какой-нибудь "блог начинающего манимейкера" или как сейчас модно "бомжа", который пытается заработать кучу денег, но толком не представляет как самостоятельно сделать уникальный дизайн для своего сайта и получается что есть куча бомжей похожих друг на друга. Можно конечно и заплатить за дизайн, но копейка рубль бережет, да и никто лучше не сделает, как Ты сам.

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

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

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .

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

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

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

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

Очень важным моментом в создании сайта, является работа с текстом, и как вы понимаете, с текстом в html так же необходимо уметь работать, и знать какие теги бывают и как их можно использовать.

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

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

Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.

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

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

Шаги

Изучение основ HTML

Откройте файл HTML. Большинство текстовых редакторов (Блокнот или Word для Windows, TextEdit для Mac) могут быть использованы для создания файлов HTML. Создайте новый документ, и сохраните его (Файл > Сохранить как) в формате веб-страницы, или измените расширение файла на ".html" или ".htm" вместо ".doc," ".rtf," или другого расширения.

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

• Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужен интернет, чтобы смотреть свою локальную страницу. Браузер просто интерпретирует HTML-код, который ему дают, неважно, в интернете он, или у вас на диске.

1. Выучите теги разметки. Теги не отображаются на странице, в отличие от обычного текста. Вместо этого они указывают браузеру, каким образом надо отображать страницу и ее содержимое. "Открывающий тег" содержит инструкцию. Например, есть тег для полужирного текста. Также нужен "закрывающий тег", для разграничения области применения инструкции: в этом примере текст между открывающим и закрывающим тегами отобразится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.

   • Открывающий тег записывается между знаками неравенства: < Открывающий тег >
   • В закрывающем теге перед дескриптором (названием) тега ставится косая черта: )
   • Читайте дальше, чтобы узнать об использовании тегов. Для этого шага достаточно запомнить формат записи, теги записываются между знаками неравенства: < > и
   • В некоторых самоучителях HTML, теги называют "элементами", а текст между открывающим и закрывающим тегами называют "содержимым элемента".

2. Наберите в редакторе тег . Каждый файл html должен начинаться с тега и заканчиваться тегом . Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в файл:

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

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

   • Между тегами и , напишите
   • Между тегами , напишите Как выучить HTML - wikiHow .
   • Сохраните изменения и откройте файл в браузере (или обновите страницу, если файл уже открыт). Текст должен отобразиться в названии страницы, над адресной строкой?

4. Создайте секцию . Все остальные теги и текст в этой примере записываются в секцию body, содержимое которой отображается на странице. После закрывающего тега , но до тега , добавьте теги и . До конца этой инструкции работайте с секцией body. Ваш файл должен выглядеть примерно так:

5. Добавьте текст, используя различные стили. Пришло время добавить настоящее содержимое страницы! Все, что вы напишете между тегами body, отобразится на странице после обновления в браузере. Не используйте символы < или > , поскольку браузер попытается интерпретировать содержимое как тег, вместо текста. Напишите Hello world! (или что захотите), затем попробуйте добавить эти теги к тексту, и посмотрите, что получится:

   • Hello world! выделяет текст "курсивом": Hello world!
   • Hello world! выделяет текст "полужирным": Hello world!
   • Hello world! зачеркивает текст: Hello world!
   • ^{Hello world!} отображает шрифт в виде верхнего индекса: Hello world!
   • _{Hello world!} отображает шрифт в виде нижнего индекса: Hello world!
   • Попробуйте разные теги вместе: Как будет выглядеть Hello world! ?

6. Разделите текст на параграфы. Если вы попробуете написать несколько строк текста в файле HTML, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:

   • Это отдельный абзац.

   • После этого предложения следует разрыв строки.
     тег до начала этого предложения.
     Это первый тег, не требующий закрывающего тега. Такие теги называются "пустыми".
   • Создайте заголовки, чтобы показать названия разделов:
     

     текст заголовка

     : Самый большой заголовок
     

     текст заголовка

     (заголовок второго уровня)
     

     текст заголовка

     (заголовок третьего уровня)
     

     текст заголовка

     (заголовок четвертого уровня)
     

     текст заголовка

     (самый маленький заголовок)

Научитесь создавать списки. Есть несколько способов создания списков на странице. Попробуйте нижеизложенные варианты, чтобы узнать, какой вам больше нравится. Обратите внимание, что список помещается между двумя тегами (например для маркированного списка), и элементы списка тоже выделяются специальными тегами, например .

• Маркированный список:
  
  • Первая строка
  • Вторая строка
  • И так далее
• Нумерованный список:
  
  1. Один
  2. Два
  3. Три
• Список определений:
  

  Кофе

  - горячий напиток

  Лимонад

  - холодный напиток

7. Сверстайте страницу, используя разрывы строк , горизонтальные линии, и картинки . Пришло время добавить что-то кроме текста. Попробуйте следующие теги, или перейдите по ссылкам, чтобы получить больше информации. Используйте онлайн-хостинг, для создания ссылки на картинку, которую вы хотите разместить:

   • Перевод строки:
     
   • Горизонтальная линия:

     ---

   • Вставить картинку :
8. • Создайте якорь тегом в месте страницы, на которое вы хотите сослаться. Придумайте точное и запоминающееся название:
   • Используйте тег , чтобы создать относительную ссылку или ссылку на внешний ресурс:
   • Чтобы сослаться на относительную ссылку другой страницы, добавьте знак # после основной ссылки и название якоря. Например, ссылается на раздел советов этой страницы.

   Продвинутый уровень HTML

   Выучите атрибуты. Атрибуты записываются внутри тега, указывая на дополнительную информацию. Формат атрибутов такой: название="значение" , где название определяет атрибут ("color", для атрибута цвета), а значение указывает на его значение (например "red", для красного цвета).

   • Атрибуты на самом деле уже применялись в предыдущем разделе основ HTML. Тег использует атрибут src , якоря относительных ссылок используют атрибут name , а ссылки используют атрибут href . Как вы уже заметили, все атрибуты записаны в формате ___="___" ?

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

      • Создайте теги таблицы:
      • Содержимое каждой строки таблицы заключите в теги:
      • Заголовок столбца определяется тегом:
      • Ячейки в последующих строках:
      • Пример использования этих тегов:

        Столбец 1: Месяц	Столбец 2: Сэкономлено денег
        Январь	100 рублей

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

Из чего состоит структура HTML-документа

Тег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:

— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Привет всем!
А это мой первый сайт.

Результат можно посмотреть .

---

— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

• align — Определяет выравнивание линии. Может принимать значение left, center, right.
• color — Задаёт цвет линии.
• noshade — Рисует линию без трехмерных эффектов.
• size — Задаёт толщину линии.
• width — Задаёт ширину линии.

Код с использованием тега

---

:

Привет всем!

---

А это мой первый сайт.

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , ,

---

, , , , , , , , , ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

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

Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

Как видите, ничего сложного нет, теперь вы можете создать несколько страниц перелинкованных между собой.

Теги для выделения текста

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

— устанавливает жирное начертание шрифта.

— устанавливает курсивное начертание шрифта.

— добавляет подчеркивание к тексту.

— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать

— отображает текст моноширинным текстом. Исключён из HTML5.

— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

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

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

— используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

— определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег

Позволяет обойти эту особенность и отображать текст как требуется разработчику.

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

 — HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег 
 представляет собой наиболее важный заголовок первого уровня, а тег 
 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги 
,…,
 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align
, который определяет выравнивание заголовка, может принимать значения left
 — выравнивание заголовка по левому краю, center
 — выравнивание по центру, right
— выравнивание по правому краю, justify
— выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.


 — представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color
 — устанавливает цвет текста, face
 — определяет гарнитуру шрифта, size
 — задает размер шрифта в условных единицах.

 — помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера  курсивом.

 — указывает, что последовательность символов является аббревиатурой. С помощью атрибута title
 дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
По умолчанию, текст заключенный в контейнере  подчеркивается пунктирной линией.
Ниже приведу код, в котором я использовал все эти теги:

 




HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about: 
What is HTML?
 HTML is the language for describing the structure of Web pages. HTML gives authors the means to:


 Publish online documents with headings, text, tables, lists, photos, etc.

 Retrieve online information via hypertext links, at the click of a button.

 Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. 

 Include spread-sheets, video clips, sound clips, and other applications directly in their documents. 


 With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is XHTML?
XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).
What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation. 
What is WebFonts?
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").


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

. Я принял такое решение, потому что мне хотелось бы попробовать обучить создавать пользователей сайты с нуля. Такая мысль была у меня в голове уже довольное долгое время. Лишь вставал вопрос, с чего начать, с HTML
или непосредственно приступить к установке движка и дальнейшей его настройки.
Но если начинать с изучения движка, то некоторая часть пользователей, которая не знает HTML
, окажется обделена. Поэтому я решил начать с основ и сделать это так, чтобы даже любой новичок мог разобраться что да как.
Итак, что же такое HTML
?
Сама аббревиатура расшифровывается как Н
урегТ
ехt M
 arkиp L
 aпguage (язык гипертекстовой разметки
).
А если выражаться просто, то HTML

 – это специальный язык разметки, который объясняет браузеру, как отображать ту или иную веб-страничку
. Т. е. каким шрифтом показывать текст, в каком порядке компоновать элементы, какие элементы отображать подчеркнутыми и т. д. И в зависимости от того, какой элемент будет встречаться браузеру, в соответствии с заложенными в сам браузер правилами, этот элемент так и будет отображаться. Однако, эти правила потом можно будет поменять, но об этом я уже буду говорить в своих следующих уроках, которые будут посвящены CSS

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

 
 
 
 
 
 
 Один день из моей жизни
 
Подготовка к концерту
 
Сегодня я проснулся рано, так как предстоял тяжелый день. Ведь сегодня я должен выступить на концерте перед сотней зрителей. А чтобы убедиться в том, что всё пройдёт хорошо, я должен повторить репетиционную программу
 
Репетиция
 
Всё прошло без сучка и задоринки. Из нашей команды никто не сбивался с ритма, и как оказалось все напрасно волновались.
 
Концерт
 
Все выступили отлично, хотя мне кажется был такой момент, когда наш барабанщик сбился с темпа. Но мы ловко выкрутились из ситуации.
 

Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad
++
) и сохранить файл под именем index
.html
где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.
Обратите внимание на то, что сами тэги при этом не отображаются, а отображается сам контент, который находится между ними. А отсюда вы можете сделать вывод, что тэги выступают в HTML
в качестве оформительского элемента.
Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML
есть такая особенность.
И вот ещё такой совет, - когда пишите HTML
-код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title
и body
вложены в тэг html
. Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.
Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML
-документе. Я говорю про эту часть:

 
 
 
 
 
 

Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.
Кроме того, вы можете писать комментарии в HTML
-документ, - это чисто служебная информация, которая предназначена исключительно для вас. Обычно это какие-то важные пометки, которые служат для вас напоминанием или просто чем-то, на что стоит обратить своё внимание. Комментарии не обрабатываются браузером и, а это значит что пользователь их не увидит. Пишутся они обычно вот так:

 
А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.
Тэг html

означает, что начинается вывод html
кода.
head

– раздел служебной информации. В числе прочего здесь находится title

, который отвечает за текст в заголовке окна браузера. К этому разделу можно отнестись ещё как к информации, которую мы хотим рассказать браузеру о данной страничке.
body

– начинается основная часть документа.
h
1
– заголовок.
h
2
 – подзаголовок.
p

– абзац.
На этом пожалуй всё! Если это был ваш первый HTML
-документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS
)
.
 
< Назад 

Для комментирования, вам необходимо зарегистрироваться.