Создание web страницы основные теги html. Учебное пособие "Создание Web-страниц средствами языка HTML". Добавление дополнительных тегов
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, 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:
«Текстовый документ». Открываем созданный текстовый документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем index.htm. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл index, в который мы и будем вписывать все HTML коды.
Теперь копируем код, приведенный ниже, и вставляем в файл index . Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу index и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее. После этого нажатием клавиш Ctrl+S сохраняем наши изменения и уже после этого два раза щелкаем по самому файлу index. В браузере откроется наша первая созданная веб-страничка.
Моя первая веб-страница
Это моя первая веб-страница
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. Парные теги состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный, а в закрывающем используется слэш тег>.
Каждый документ HTML должен начинаться тегом и оканчиваться его двойником, тегом. Помимо них, в данном файле содержатся еще три пары тегов, которые должны присутствовать в любом другом документе HTML. Пара тегов
И применяются для обозначения любой информации о самом документе HTML. Теги и предназначены для добавления заголовка, отображаемого в строке заголовка браузера. Теги и применяются для обозначения любого текста, отображаемого на странице HTML.
Обязательные элементы документа XHTML
В языке XHTML, более новой версии HTML, есть еще один обязательный для создаваемых Web-страниц элемент — тег. Он предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу. Этот тег указывается в верхней части файла и идентифицирует текущий документ HTML как удовлетворяющий требованиям XHTML (или совместимый со спецификацией XHTML). Если вы создаете XHTML-совместимый документ, он может выглядеть приблизительно так:
Moя XHTML страница Это моя первая XHTML страница.
Тег имеет три разновидности: Strict, Transitional и Frameset. В верхней части HTML-документа вы декларируете, какую именно из них хотите использовать.
Strict Применяйте эту разновидность тега лишь в том случае, если точно уверены, что все посетители вашей веб-страницы используют новые веб-браузеры, способные корректно интерпретировать таблицы стилей. Разновидность Strict выглядит следующим образом:
Transitional Применяйте эту разновидность, если не знаете точно, какие именно программные средства будут использоваться для просмотра вашей веб-страницы.
Frameset Применяйте эту разновидность, работая с фреймами.
Обратите внимание еще на одно отличие кодов XHTML от обычных документов HTML: у тега появились три новых атрибута: xmlns, xml:lang и lang. В случае применения HTML вам достаточно было включить тег, чтобы идентифицировать файл как HTML-документ, однако в данном случае требуется добавление атрибута xmlns, подключающего документ к определению W3C языка XHTML, которое по-прежнему продолжает эволюционировать. Пока же запомните о необходимости включения тега и полного тега в коды всех своих веб-страниц.
Корректное написание кодов
Одних лишь тегов не достаточно для создания хорошей веб-страницы. Если при написании кодов HTML еще можно допускать некоторые погрешности, то коды XHTML требуют строгого соблюдения правил. Хотя текущие версии большинства современных браузеров способны правильно интерпретировать ваши коды, даже если они набраны из неверных тегов, последующие версии браузеров такой сообразительностью отличаться не будут. Вы можете уже сейчас подумать о будущем и научиться следовать некоторым базовым принципам написания веб-кодов, удовлетворяющих стандартам XHTML.
Включайте в коды своих веб-страниц все обязательные XHTML-элементы, которые рассматривались в этом уроке. Можете создать для себя шаблон XHTML-документа, в котором изначально будут содержаться все необходимые теги.
Используйте символы нижнего регистра для всех тегов. Для браузера записи
И равнозначны (хотя они не обязательно могут быть таковыми). Применяйте символы нижнего регистра при наборе всех своих команд, и вам не придется корректировать коды своих веб-страниц после возможного изменения стандартов XHTML.
Никогда не используйте пробелов в именах файлов. Старые компьютерные системы испытывают трудности с чтением имен файлов, содержащих пробелы (например, моя первая страница.htm). Вместо пробела набирайте символ подчеркивания (например, моя_первая_страница. htm).
Все значения атрибутов тегов следует указывать в двойных или одинарных кавычках. Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы. Тогда браузер в качестве значения возьмет только первое слово. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
Существует определенная иерархия вложенности тегов. Например, тег
Должен находиться внутри контейнера и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги и, на конечном результате это никак не скажется.
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуется закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Доброго всем времени суток, дорогие друзья и читатели моего блога. Я смотрю, что вконтакте уже части населения страны поставили новый дизайн. Один из моих аккаунтов подвергся этому. Но правда я, в отличие от других пользователей, паники никакой не вижу. Ну сменили, и сменили. Почему бы и нет? Ну да ладно. Речь-то не об этом. В готовы сегодня продолжать лепить сайт в блокноте?
Мы уже с вами научились делать , узнали с вами основные теги, которые обязательно должны присутствовать. А сегодня я вам хочу рассказать подробнее про теги для создания сайта html, показать еще несколько очень важных из них и показать работу на живом примере.
Понятие и назначениеТег — это обязательный элемент языка гипертекстовой разметки html. Нужны эти знаки для того, чтобы говорить определенному куску контента (например тексту) каким он должен быть и как он должен себя вести. Благодаря таким тегам мы можем сделать текст больше, меньше, жирнее, изменить цвет, поставить фон, создать ссылку, поставить картинки, влепить текст в таблицу и многое другое.
Теги бывают парные и одиночные, но одиночных на самом деле очень мало (сегодня мы пройдем один из них). Все парные теги действуют по принципу: Сначала ставится открывающий тег, потом идет контент, а потом ставится закрывающий, причем закрывающий ставится точно также как и открывающий, только с добавлением слэша (/). Тогда контент, который находится внутри изменится в соответствии с командой, которую ему дали, например сменить цвет.
На практике это выглядит так
Контент
Но главное следить за правильностью, потому что если вы что-то забудете или неправильно поставите, то вы не увидите ожидаемый результат. Приведу пример неправильного оформления
Какой-то текст
Еще один какой-то текст
