В этом уроке мы рассмотрим структуру HTML документа. Забегая на перед хочу сказать, что сложного и пугающего здесь ничего нет. Достаточно разобраться в предназначении всего нескольких элементов и запомнить логическую их последовательность.
Как мы видим в верхней части рисунка представлен HTML код веб-страницы, которая состоит из заголовка и параграфа, а в нижней непосредственно сама веб-страница.
Рассмотрим данный код немного подробнее. Основными элементами языка HTML являются теги или контейнеры (я буду использовать слово теги).
В основном все теги имею парную структуру, например:
,
,
.
Парная структура под собой подразумевает, что есть тег открытия – и тег закрытия (у которого сразу после левой угловой скобки и перед именем тега ставят символ “/”) – .
Теги являются элементами разметки HTML документа. Внутрь тегов помещают содержимое, будь-то абзац, заголовок, список и т.п. Браузер обрабатывает HTML код и пользователь видит на экране только информацию.
Рассмотрим основные составляющие HTML страницы 1. DOCTYPE и …Служит для того чтобы браузер пользователя корректно интерпретировал веб-страницу, ее тип.
2. Тег …Данный тег содержит служебную информацию для браузера или поисковых машин:
тег выше сообщает браузеру в какой кодировке отображать веб-страницу.
Css" type="text/css" media="screen" />
Тег link – ссылается на (подключает к сайту) внешний файл стилей.
Тег script – подключает к данной странице скрипт.
Но о тегах link и script мы поговорим подробнее немного позже.
… – между данными тегами содержится название сайта или текущей страницы, которая отображается в браузере.
3. Тег …Внутри данного тега содержится основная часть веб-страницы, то содержимое, которое видит пользователь у себя в окне браузера. В нашем примере мы также видим только ту часть информации, в окне браузера, которая описана между тегами … .
ЗаключениеСпешу вас порадовать, из этого урока вам стоит запомнить только то, что есть определенные стандарты (некая строгая структура) в построении HTML документа. Достаточно один раз сделать шаблон пустой страницы:
Заголовок страницы
В следующем уроке мы познакомимся с тегами, которые отвечают за форматирования текста на страницах сайта. Хочу сразу заметить, что это весьма важная тема т.к. текстовая информация и на сегодняшний день доминирует на страницах сайтов.
This entry was posted in . Bookmark the .
Доброго всем времени суток, дорогие друзья и читатели моего блога. Я смотрю, что вконтакте уже части населения страны поставили новый дизайн. Один из моих аккаунтов подвергся этому. Но правда я, в отличие от других пользователей, паники никакой не вижу. Ну сменили, и сменили. Почему бы и нет? Ну да ладно. Речь-то не об этом. В готовы сегодня продолжать лепить сайт в блокноте?
Мы уже с вами научились делать , узнали с вами основные теги, которые обязательно должны присутствовать. А сегодня я вам хочу рассказать подробнее про теги для создания сайта html, показать еще несколько очень важных из них и показать работу на живом примере.
Понятие и назначениеТег — это обязательный элемент языка гипертекстовой разметки html. Нужны эти знаки для того, чтобы говорить определенному куску контента (например тексту) каким он должен быть и как он должен себя вести. Благодаря таким тегам мы можем сделать текст больше, меньше, жирнее, изменить цвет, поставить фон, создать ссылку, поставить картинки, влепить текст в таблицу и многое другое.
Теги бывают парные и одиночные, но одиночных на самом деле очень мало (сегодня мы пройдем один из них). Все парные теги действуют по принципу: Сначала ставится открывающий тег, потом идет контент, а потом ставится закрывающий, причем закрывающий ставится точно также как и открывающий, только с добавлением слэша (/). Тогда контент, который находится внутри изменится в соответствии с командой, которую ему дали, например сменить цвет.
На практике это выглядит так
Контент
Но главное следить за правильностью, потому что если вы что-то забудете или неправильно поставите, то вы не увидите ожидаемый результат. Приведу пример неправильного оформления
Какой-то текст Еще один какой-то текст ...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url: