Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Структура HTML-документа, понятие URI и URL
Глобальная структура HTML-документа
Мы уже говорили о том, что HTML - это "приложение на практике" языка SGML (Смотрите HTML: общая концепция языка и элементы). Это значит, что HTML документ также является и SGML-документом. Первое, что должно встречаться нам в SGML-документе - это объявление типа документа. Это означает именно то, что и написано, т.е. объявление типа документа говорит о том, что документ этот будет относиться к определенному типу.
В нашем случае тип - это HTML. Сейчас мы не будем углубляться в тему типов документов. На данный момент мы будем использовать следующее объявление типа документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Пусть Вас не смущают угловые скобки. Это не элемент. Если Вы присмотритесь внимательнее, то увидите, что содержимое данной конструкции начинается с восклицательного знака - это значит, что это SGML-код.
Теперь посмотрите на данную конструкцию еще немного и порадуйтесь тому, что Вам не нужно изучать SGML. Поэтому сейчас просто поверьте мне на слово и поместите такой код в верхнюю часть вашего документа.
После того, как мы объявили, что данный документ является HTML-документом, мы можем начинать добавлять элементы. Первым элементом всегда должен быть элемент html. Все документы HTML имеют элемент html, в котором будут находиться все остальные элементы. Давайте напишем открывающий и закрывающий тэги для данного элемента, а с его содержимым разберемся позже. Итак, у нас есть следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> </html>
Каждый элемент html разбивается на два элемента: head и body (т.е. "голова" и "тело"). Каждый документ HTML должен содержать в себе по одному элементу head и body. По сути, эти два элемента - это единственные вещи внутри элемента html. Итак, давайте разместим и их:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html>
Заметьте, что я сделал небольшой отступ для элементов head и body. Это не имеет никакого значения и сделано только для того, чтобы наш HTML-код был более читаемым.
Вы могли заметить, что "белое пространство" (будь то пробел, табуляция или перевод строки) в HTML как бы "схлопываются". Это значит, что вы можете добавлять сколько вам угодно пробелов, переводов строк и т.п. для улучшения визуального восприятия кода и это никак не скажется на смысле и функционировании документа.
Различие между элементами head и body заключается в том, что элемент head содержит информацию о документе, в то время как элемент body содержит в себе собственно документ. Прежде чем мы перейдем к элементу body нам нужно разобраться с одним элементом, обязательным для каждого элемента head: это элемент title ("название").
Название документа - очень важная его часть. Оно позволяет отличить один документ от другого и делает его уникальным, в то же время описывая его для вашего посетителя.
Элемент title очень прост. Он может содержать только простой текст, и этот текст и будет являться названием документа. Итак, давайте добавим в наш документ элемент title:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Уроки и статьи по созданию сайтов</title>
</head>
<body>
</body>
</html>
Мы почти закончили! Теперь нужно только добавить содержимое для элемента body.
Параграфы и заголовки
Наш документ будет состоять из заголовка и двух параграфов. В HTML есть специальные элементы, предназначенные для обозначения заголовков и параграфов. Параграфы обозначаются с помощью элемента p. C заголовками ситуация более запутанная, так как можно использовать заголовки шести уровней. Они представлены элементами h1, h2, h3, h4, h5 и h6. В следующем примере показано применение параграфов и заголовков двух уровней:
<h1>Уроки и статьи по созданию сайтов</h1> <p>Данный проект создан мной для того, чтобы делиться со всеми желающими уроками и статьями по теме создания сайтов.</p> <p>Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.</p> <h2>Кому будет полезен данный ресурс?</h2> <p>Данный ресурс будет полезен всем тем, кто связан с разработкой сайтов или только учится данному ремеслу.</p>
Теперь мы можем просто вставить данный код между тэгами body нашего документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Уроки и статьи по созданию сайтов</title>
</head>
<body>
<h1>Уроки и статьи по созданию сайтов</h1>
<p>Данный проект создан мной для того, чтобы делиться со всеми желающими уроками и статьями по теме создания сайтов.</p>
<p>Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.</p>
<h2>Кому будет полезен данный ресурс?</h2>
<p>Данный ресурс будет полезен всем тем, кто связан с разработкой сайтов или только учится данному ремеслу.</p>
</body>
</html>
Ресурсы и URI
"Что такое ресурс" - спросите Вы? Все, что угодно! Эта страница - ресурс, это предложение - ресурс, Вы - ресурс, Я - ресурс, мой почтовый ящик - тоже ресурс. Ресурс - понятие абстрактное. Ресурс это просто "что-то" или "что угодно".
Так зачем же называть "что-то" ресурсом? Причина этого не совсем ясна, но все это сводится к тому, что нам нужно каким-то образом получать доступ к некоторым ресурсам. Важной характеристикой ресурса, однако, является то, что он является уникальным.
Если Вы уже успели побродить по сети достаточное время, то Вы поняли, что с его помощью можно получить доступ к миллиардам различных вещей. Поэтому возникла необходимость каким-то образом ссылаться на каждый конкретный ресурс. К примеру, если я хочу сослаться на данную страницу, мне нужен простой способ для того, что описать её так, чтобы это было понятно и компьютерам, и людям. И как раз тут некие умные люди придумали так называемый Унифицированный (единообразный) Идентификатор Ресурса (URI - Uniform Resource Identifier).
URI идентифицирует ресурс (т.е. по сути, идентифицирует "что-то"). Наиболее важно для нас то, что ресурс является уникальным и обладает уникальным "местоположением", где его можно найти. Данная страница - отличный пример. Она находится на веб-сервере с "адресом": codeharmony.ru, в разделе materials и ее порядковый номер - 33.
Тут мы подошли к понятию Унифицированный Локатор (определитель местонахождения) Ресурса (URL — Uniform Resource Locator). URL - это разновидность URI.
URL имеет определенный синтаксис, который мы рассматривать не будем, так как это не представляет для нас большого интереса. Единственное, что стоит знать про URL - это то, что любой такой URL-адрес можно разделить на три части: имя схемы, двоеточие, и само местонахождение. Вот пара примеров:
http://www.codeharmony.ru/sections/html mailto:codeharmony.ru@gmail.com
В примерах выше именами схемы являются http и mailto. После них идет двоеточие и набор символов, означающих URI. Имя схемы определяет то, как будет интерпретироваться оставшаяся часть URI. К примеру, возьмем два URL:
http://webreference.com/html/ ftp://webreference.com/html/
Эти адреса позволяют получить доступ к двум совершенно разным ресурсам. Хотя у них одинаковый синтаксис после двоеточия, у них разные схемы и они, соответственно, интерпретируются по-разному.
По материалам www.webreference.com
Перевод - Дмитрий Науменко.
P.S. Обратите также внимание на уроки ниже. Первый бесплатный курс позволит вам освоить работу с HTML и научиться создавать "каркасы" для сайтов. Второй курс покажет 5 прикладных техник для "резиновой" верстки сайтов:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
