HTML-код веб-страницы должен иметь определенную структуру. В нем есть обязательные теги, с помощью которых браузеры и поисковые боты распознают, что перед ними именно html-документ (расширение файла .html в данном случае ни о чем не говорит), на какой версии HTML он написан, что следует вывести в титуле страницы и другое.
С другой стороны, каждая web-страница уникальна по своему содержанию. Поэтому во многом набор и последовательность используемых при ее верстке тегов будет характерным только для нее.
Любой html-документ должен начинаться с одиночного тега с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:
Далее идет открывающий тег . Его закрывающий тег должен находиться в самом конце кода страницы. Пара . формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.
После идет элемент head , содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.
Как сделать содержание в Pages
Содержимое элемента title выводится в браузере на вкладке окна, в котором открывается документ. Обычно здесь дублируют и дополняют заголовок страницы.
Кодировка документа указывается с помощью тега через атрибут charset . В настоящее время обычно при создании html-документов используют UTF-8.
Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): .
Краткое описание содержимого страницы ( ) может быть использовано в поисковой выдаче. Например, человек вводит поисковый запрос в поисковой строке. Поисковик формирует поисковую выдачу, ранжируя (выставляя по очереди) ответы согласно своему алгоритму. Информация под ссылкой на ресурс может быть взята из краткого описания страницы (хотя не обязательно).
При этом для поисковой оптимизации более важным является содержимое контейнера title . Оно в подавляющем большинстве случаев определяет заголовок-ссылку на вашу страницу в поисковой выдаче.
После элемента head начинается то, что будет отображаться в окне браузера, то есть «тело» документа. Начинается оно с открывающего тега , закрывающий тег которого находится непосредственно перед закрывающим тегом корневого элемента. Другими словами, конец кода html-документа обычно выглядит так: .
Весь содержательный контент страницы заключается между тегами и .
Что из себя представляет контент страницы? Чаще всего это текст. Мы разделяем его на абзацы. Если статья длинная, то у нее, кроме заголовка, могут быть разделы, у каждого из которых может быть свой подзаголовок.
УРОК 10-11. Создание веб страниц (11 класс)
В HTML для разметки абзаца используется элемент p , для заголовка первого уровня (самого главного) – h1 .
Кроме текста нередко в веб-контент включают различные изображения. Для этого используется одиночный тег . Обязательным атрибутом является src (сокращение от слова source – источник), с помощью которого указывается адрес, где находится файл. Также рекомендуется прописывать атрибуты width и height – ширина и высота картинки, alt – для описывающей изображение информации. Значение alt может использоваться поисковыми системами в поиске по картинкам, а также отображается в браузере, если по каким-то причинам изображение не загрузилось.
Ширина и высота картинки измеряется в пикселях. Узнать размеры находящегося на вашем компьютере изображения можно через окно «Свойства», которое вызывается через контекстное меню (правый клик по файлу картинки). Чтобы узнать размер изображения, размещенного на веб-странице, можно в контекстном меню выбрать пункт «Открыть картинку в новой вкладке» (или подобный). В титуле страницы, помимо имени файла, будет указан размер.
Обратите внимание на адрес в атрибуте src . Указывать исключительно название файла допустимо, если картинка находится в том же каталоге что и html-файл. В иных случаях может использоваться не только относительная адресация, но и абсолютная. Тема адресации, которая касается также ссылок и другого, будет рассмотрена позже в данном курсе.
Ссылки – важная составляющая веба. Недаром говорят о всемирной паутине (World Wide Web), связь между документами в которой обеспечивают как раз ссылки (гиперссылки). В языке HTML они создаются с помощью элемента a . У открывающего тега должен быть атрибут href . Обычно его значением является адрес другого документа.
Между тегами и записывается текст ссылки, который видит читатель страницы. При клике по этому тексту происходит переход к другому документу (он загружается в окно браузера). В адресной строке при этом меняется адрес.
Нередким элементом страницы являются списки. Они бывают неупорядоченные и упорядоченные. Первые определяются элементом ul , вторые – ol . Каждый пункт и того и другого списка формирует контейнер .
Чтобы придать значимости какой-либо фразе или термину их помещают в контейнер («важный, ключевой текст») или («обратить особое внимание», «сделать акцент»). Первый выглядит жирным, второй – курсивом.
Strong и em – структурные элементы; они имеют значение для поисковых систем. С их помощью придают больший вес заключенным в них словам. Если же нужно просто выделить текст жирным или курсивом для красоты, наглядности, понятности можно использовать теги оформления и , пришедшие из более ранних версий HTML.
Следует отметить, с помощью языка CSS элементы b и strong , i и em можно сделать визуально отличимыми. Например, задать для b темно-синий цвет шрифта, а em дополнительно к курсиву придать жирность начертания.
Существует множество различных элементов HTML. Информацию о них можно найти во многих источниках. О некоторых тегах будет рассказано позже по ходу курса.
Еще раз обратим внимание на терминологию. Элементы HTML создаются с помощью тегов. У открывающих и одиночных тегов могут быть атрибуты. Атрибутам через знак равенства присваиваются значения. Значения берутся в кавычки.
Атрибуты пишутся после имени тега, но последовательность между самими атрибутами, если их несколько, не важна. Атрибуты можно представить как своего рода «настройщики» элемента. Набор допустимых атрибутов разных тегов может отличаться, однако существуют общие, то есть употребимые с большинством тегов.
В программировании, в том числе декларативном, куда можно отнести верстку веб-страниц, используют комментарии. Их назначение – пояснять работу кода для изучающего программу человека. Комментарии никак не сказываются на выполнении программ. При разработке бывает с их помощью «выключают» часть кода, чтобы сконцентрироваться на другой части или при тестировании разных вариантов. В HTML комментарии записываются так:
X Скрыть Наверх
Введение в веб-разработку и создание сайтов
Источник: younglinux.info
Таблица основных тегов HTML
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
Определяет видимую часть документа
Теги оглавления
Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)
Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)
Указание для поисковых роботов как следует сканировать данную страницу
Указание для поисковых роботов относится ли данная страница к мировым
Указание для поисковых роботов как следует сканировать данную страницу
Указание автора странички
Описание содержащийся информации (для поисковых машин)
Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.) Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.
Ключевые слова странички (для поисковых машин)
Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB — пример: FF0000 — красный цвет.
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: 000000 — черный цвет.
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB — пример: 00FF00 — зеленый цвет.
Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB — пример: 333333 — серый цвет.
Источник: www.liveinternet.ru
Основные теги языка HTML
— Указывает программе просмотра страниц что это HTML документ.
— Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
— Определяет видимую часть документа
Теги оглавления
— Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
— Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB — пример: FF0000 — красный цвет.
— Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: 000000 — черный цвет.
— Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB — пример: 00FF00 — зеленый цвет.
— Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB — пример: 333333 — серый цвет.
— Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста
— Обрамляет предварительно отформатированный текст.
— Создает САМЫЙ БОЛЬШОЙ заголовок
— Создает самый маленький заголовок
— Создает жирый текст
— Создает наклонный текст
— Создает текст — имитирующий стиль печатной машинки.Используется для цитат, обычно наклонный текст.
— Используется для выделения из текста слова (наклонный или жирный текст)
— Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)
— Устанавливает размер текста в пределах от 1 до 7.
— Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
— Создает гиперссылку на другие документы или часть текущего документа.
— Создает гиперссылку вызова почтовой программы для написания письма автору документа.
— Отмечает часть текста как цель для гипперссылок в документе.
Форматирование
— Создает новый параграф
— Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
— Вставляет перевод строки.
— Создает отступы с обеих сторон текста. Создает список определений.
— Определяет каждый из терминов списка
— Описывает каждое определение
— Создает нумерованный список
— Определяет каждый элемент списка и присваивает номер
— Создает ненумерованный список
— Предваряет каждый элемент списка и добавляет кружок или квадратик.
— Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
— Добавляет изображение в HTML документ
— Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
— Устанавливает толщину рамки вокруг изображения
— Добавляет в HTML документ горизонтальную линию.Устанавливает высоту(толщину) линии
— Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
— Создает линию без тени.
— Задает линии определенный цвет. Значение RRGGBB.
Таблицы
— Определяет строку в таблице.
— Определяет отдельную ячейку в таблице.
— Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
— Задает толщину рамки таблицы.
— Задает расстояние между ячейками таблицы.
— Задает расстояние между содержимым ячейки и ее рамкой.
— Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
или — Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
или — Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
— Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
— Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
— Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Кадры
— Предваряет тег в документе, содержащем кадры;
— Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
— Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
— Определяет единичный кадр или область в таблице кадров.
— Определяет, что будет показано в окне браузера если он не поддерживает кадры.
Атрибуты кадров
— Определяет какой из HTML документов будет показан в кадре.
— Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров.
— Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
— Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
— Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть «yes,» «no,» или «auto». Значение по умолчанию для обычных документов — auto.
— Препятствует изменению размеров кадра.
Формы
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
— Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
— Указывает каждый отдельный элемент меню
— Создает ниспадающее меню Указывает каждый отдельный элемент меню
— Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
— Создает checkbox. За тегом следует текст.
— Создает radio кнопку. За тегом следует текст.
— Создает строку для ввода текста. Параметром Size указывается длина в символах.
— Создает кнопку «Принять»
— Создает кнопку «Принять» — для этого используется изображениеСоздает кнопку «Отмена»
При копировании материалов наличие активной индексируемой ссылки на сайт обязательно.
Источник: www.cyberguru.ru