Команды для html в блокноте. Пример создания html страницы в блокноте

В этом уроке мы рассмотрим структуру 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: