Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
HTML: общая концепция языка и элементы
Что же такое HTML?
Для того, чтобы уметь писать грамотный HTML-код, нужно сперва точно усвоить, что такое HTML. Самый очевидный путь - посмотреть для этого на название: HTML означает HyperText Markup Language (Язык Гипертекстовой Разметки). Если Вам это ни о чем не говорит, не волнуйтесь, потому что как раз это я собираюсь объяснить. Давайте разберем это словосочетание по словам:
HTML это Язык. Это компьютерный язык и он имеет определенные правила, которых необходимо придерживаться. Другими словами, он имеет определенный синтаксис, т.е. порядок, определяющий, как он должен быть написан и, когда приходит необходимый момент, прочитан. К этому моменту мы вернемся позже.
Далее, HTML это язык Разметки. Это означает, что с его помощь помечаются определенные части документа, которым придается определенное значение. Давайте посмотрим на пример. Предположим, у нас есть такой текст:
Уроки и статьи по созданию сайтов Данный проект создан мной для того, чтобы делиться со всеми желающими уроками и статьями по теме создания сайтов. Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.
Вы, как человек, видите в тексте заголовок ("Уроки и статьи по созданию сайтов") и два параграфа текста. Однако, если данный текст будет "изучен" компьютером, все, что он "увидит" - это набор символов, которые, возможно, организованы особым образом. У нас есть интерес в том, чтобы показать компьютеру, что текст выше - это заголовок и два параграфа.
Я думаю, Вы догадываетесь, для чего это нужно. Например, мы захотим сделать содержание для документа только из заголовков, или захотим отобразить заголовки в другом стиле и т.д. Но компьютер не в состоянии будет сделать хоть что-то из этого до тех пор, пока не "поймет", какая часть документа чем является.
HTML - это также язык Гипертекстовой разметки. Гипертекст - это текст в любом формате с одной лишь особенностью: части этого текста связаны с другими частями текста, давая возможность удобно перемещаться от одной части текста к другой.
Например, слово "видеоуроки" в тексте означает, что такие видеоуроки существуют, но читатель не знает, где их найти. С помощью Гипертекста можно связать слово "видеоуроки" со страницей, где находятся эти видеоуроки, давая читателю возможность получить то, что его интересует.
Но Гипертекстовые ссылки - это не просто ярлыки. Точно так же, как и Разметка, они что-то означают. Документ сам по себе может быть информативным, но для того, чтобы он нес реальную пользу, мы должны иметь способ добраться до его значения.
Если Вы знаете, как работать с семантикой документа, Вы можете делать с ним все, что захотите.
Поставив ссылки из документа на его оглавление, на следующий или предыдущий документ (если наш документ - лишь один из серии документов), на глоссарий и заметку об авторском праве, мы придаем документу больше смысла, повышая, таким образом, его ценность.
Основное назначение любого документа - передавать информацию, а указав семантику документа, мы можем передать еще больше информации, что, естественно, еще лучше.
Теперь Вы тоже можете стать автором!
Вы могли заметить, что я использовал применительно к HTML слово "документ", а не "файл". Для этого есть причина. HTML-документы совсем не обязательно являются файлами на компьютере. HTML-документ, как Вы уже знаете - это набор символов, подчиненных определенному синтаксису.
Эти символы могут быть сохранены в отдельный файл, но не обязательно. Они могут быть также созданы "на лету" программой или, как часто бывает, могут быть получены по компьютерной сети.
HTML изначально был задуман как язык для создания страниц в Интернет. Вероятно и Вы изучаете HTML, чтобы создавать свои веб-страницы. Со временем люди стали применять HTML для других целей, однако стоит заметить, что это не лучшая идея, так как изначально данный язык создавался для Веб, и больше всего он подходит для Веб.
Итак, как же опубликовать Веб-страницу? Для этого нужен Веб-сервер. Веб-сервер - это программа, запущенная на компьютере, подключенном к Интернет, которая обрабатывает Веб-страницы. Данная статья не расскажет Вам о том, как устанавливать Веб-сервер и публиковать на нем Ваши HTML-документы. Вместо этого мы поговорим о том, как создать HTML-документ; вопросом его публикации мы озадачимся позже.
Самый простой способ создать HTML-документ - использовать для этого текстовый редактор. Заметьте, что текстовый редактор - это НЕ текстовый процессор (вроде Microsoft Word и др.). Текстовый процессор - это программа, которая создает документы, пригодные для печати и сохраняющая их в своем специальном формате.
В последнее время существует немало текстовых процессоров, которые пытаются сохранять документы как HTML, однако ничего путного добиться таким способом не получится. Нам нужна программа, которая позволяет редактировать простые текстовые файлы, например Windows Notepad или Notepad++.
Не важно, что Вы будете использовать, лишь бы это был простой текстовый редактор. В будущем мы рассмотрим некоторые текстовые редакторы, которые можно использовать для этих целей и даже программы, специально созданные для создания HTML-документов, которые могут сделать часть работы за вас.
На данный момент избегайте подобных программ - сейчас Вы можете просто в них запутаться. Поэтому сейчас остановите свой выбор на чем-то действительно очень простом.
Сейчас создайте файл и дайте ему произвольное название, например tutorial.html ("учебник"). В процессе изучения HTML мы будем работать с данным текстовым файлом и, к концу обучения Вы создадите завершенный HTML-документ.
Для того, чтобы просмотреть Ваш HTML-файл, нужна подходящая для этого программа. Технический термин для такой программы - HTML User Agent (Пользовательский Агент HTML). Пользовательский Агент - это программа, которая понимает язык разметки HTML и может его определенным образом обрабатывать.
Один из типов Пользовательских Агентов - Веб-браузер, или просто браузер. Именно в браузере Вы и просматриваете данную страницу. После того, как Ваша HTML-страница будет создана, Вы также сможете открыть и просмотреть ее в браузере.
Элементы
Я уже говорил о том, что HTML - компьютерный язык с определенным синтаксисом. И этот синтаксис не был выдуман на пустом месте, ведь сама идея языков разметки существовала уже давно.
Язык под названием SGML - Standard Generalized Markup Language (Стандартный Обобщённый Язык Разметки) был создан для того, чтобы определять другие языки разметки. И один из этих языков - HTML.
Не пугайтесь, Вам не понадобится изучать ещё и SGML. Знать SGML для освоения HTML не нужно. Просто полезно понимать, откуда HTML появился.
Теперь ближе к делу. Помните заголовок "Уроки и статьи по созданию сайтов"?
Мы знаем, что это заголовок, но нам нужно каким-то образом отразить этот факт в самом HTML-документе. Чтобы сделать это, мы делаем заголовок элементом. Делается это так (Да, это HTML!):
<h1>Уроки и статьи по созданию сайтов</h1>
Этот элемент можно разделить на три части. Первая часть, <h1> называется открывающим тэгом. Затем идет содержание элемента, в нашем случае это Уроки и статьи по созданию сайтов. И, наконец, </h1> - закрывающий тэг.
Элемент h1 означает, что он является заголовком первого уровня (к этому мы еще вернемся позже). Тэги же нужны для того, чтобы показать, где элемент начинается, и где он заканчивается.
Тэг всегда начинается со знака "<" (меньше, чем) и заканчивается знаком ">" (больше, чем).
Имя открывающего тэга заключено между этими символами (в нашем случае - h1).
Имени же закрывающего тэга еще предшествует знак "/" (слэш). Вот еще некоторые примеры элементов:
<h2>Я элемент</h2> <p>Я тоже!</p> <p>Эй, и я! <b>И даже я!</b></p> <p>После меня тоже идет элемент.</p> <hr>
Наиболее проницательные из Вас могли отметить несколько моментов.
Во-первых, элемент b находится внутри элемента p. Это нормально; один элемент может находится внутри другого, если соблюдается правильная их вложенность. Это означает, что если элемент начинается внутри другого элемента, то и заканчиваться он также должен внутри этого элемента, например:
<p>Это <b>правильно</b></p> <p>Это <b>неправильно</p></b>
Вторая строка неверна, так как элемент b начинается внутри элемента p, а заканчивается вне элемента p.
Второй интересный момент, который Вы могли заметить - это то, что элемент hr не имеет содержания и закрывающего тэга. Для некоторых типов элементов это допускается.
Элемент hr в данном случае называется пустым элементом. В этом случае разрешается использовать только открывающий тэг, но это справедливо только для пустых элементов.
По материалам www.webreference.com
Перевод - Дмитрий Науменко.
P.S. Обратите внимание на уроки ниже. Первый бесплатный курс позволит вам освоить работу с HTML и научиться создавать "каркасы" для сайтов. Второй курс покажет 5 прикладных техник для "резиновой" верстки сайтов:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
