Основные элементы HTML веб-страницы

HTML-код веб-страницы должен иметь определенную структуру. В нем есть обязательные теги, с помощью которых браузеры и поисковые боты распознают, что перед ними именно html-документ (расширение файла .html в данном случае ни о чем не говорит), на какой версии HTML он написан, что следует вывести в титуле страницы и другое.

С другой стороны, каждая web-страница уникальна по своему содержанию. Поэтому во многом набор и последовательность используемых при ее верстке тегов будет характерным только для нее.

Любой html-документ должен начинаться с одиночного тега с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:

Далее идет открывающий тег . Его закрывающий тег должен находиться в самом конце кода страницы. Пара . формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.

В теге следует добавлять атрибут lang , которому присваивается обозначение языка, на котором представлено смысловое содержание страницы. Например, или . Это помогает браузерам и поисковым системам правильно работать со страницей.

После идет элемент head , содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.

Содержимое элемента title выводится в браузере на вкладке окна, в котором открывается документ. Обычно здесь дублируют и дополняют заголовок страницы.

Кодировка документа указывается с помощью тега через атрибут charset . В настоящее время обычно при создании html-документов используют UTF-8.

Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): .

Краткое описание содержимого страницы ( ) может быть использовано в поисковой выдаче. Например, человек вводит поисковый запрос в поисковой строке. Поисковик формирует поисковую выдачу, ранжируя (выставляя по очереди) ответы согласно своему алгоритму. Информация под ссылкой на ресурс может быть взята из краткого описания страницы (хотя не обязательно).

При этом для поисковой оптимизации более важным является содержимое контейнера title . Оно в подавляющем большинстве случаев определяет заголовок-ссылку на вашу страницу в поисковой выдаче.

После элемента head начинается то, что будет отображаться в окне браузера, то есть «тело» документа. Начинается оно с открывающего тега , закрывающий тег которого находится непосредственно перед закрывающим тегом корневого элемента. Другими словами, конец кода html-документа обычно выглядит так: .

Весь содержательный контент страницы заключается между тегами и .

Что из себя представляет контент страницы? Чаще всего это текст. Мы разделяем его на абзацы. Если статья длинная, то у нее, кроме заголовка, могут быть разделы, у каждого из которых может быть свой подзаголовок.

В 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 Скрыть Наверх

Введение в веб-разработку и создание сайтов

Привет!

Этот *.htm-файл может быть открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload (перезагрузить) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Дополнительные отступы введены для удобства чтения, однако в HTML это совсем не обязательно. Браузеры игнорируют символы конца строки и множественные пробелы в HTML-файлах. Как видно из примера, вся информация о форматировании документа находится в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется меткой или тегом (по-английски tag). Большинство тегов парные (как открывающие и закрывающие скобки), то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением «/». Такую пару тегов иногда называют контейнером, в котором находится определенное содержимое.

Большие и маленькие буквы не различаются, например , и
равноправны и одинаково вызывают принудительный перевод строки в тексте. Часто действие тегов интуитивно понятно для знающих английский:

— Bold (жирный), — Italic (курсив), — Paragraph (параграф).

Многие теги, помимо имени, могут содержать атрибуты – элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута.

В настоящее время начинается постепенный переход к более строгому языку разметки гипертекста – XHTML, который уже поддерживается разработчиками некоторых браузеров. Этот язык существенно расширяет возможности языка HTML 4, но более требователен к синтаксису. Для последующей совместимости с XHTML желательно 1) имена тегов и атрибутов записывать в нижнем регистре и 2) значения атрибутов должны всегда заключаться в кавычки.

Обязательные теги

Тег должен открывать HTML-документ, а тег должен завершать его.

Пара тегов . указывает на начало и конец заголовка документа. Кроме наименования документа (см. метки ниже), в этот раздел может включаться служебная информация.

Все, что находится между тегами , толкуется браузером как название документа, показывается в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

Пара тегов . указывает на начало и конец тела HTML-документа, в котором и находится содержимое документа.

Теги вида , где i – цифра от 1 до 6 (

.

–

.

) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня – самый мелкий.

Все, что заключено между

и

, воспринимается как один абзац. Метки и

могут содержать атрибут align (от английского «выравнивать»), например:

Выравнивание заголовка по центру

или

образец абзаца с выравниванием по правому краю

Вот еще один пример HTML-документа:

привет!

Это чуть более сложный пример HTML-документа

Теперь мы знаем, что абзац можно выравнивать не только влево,

Картинки и другие нетекстовые компоненты не вставляются в документ, а хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок GIF и JPEG.

– вставить картинку.

мастерская – сделать слово «мастерская» гипертекстовой ссылкой на сервер www.openweb.ru.

Последние два тега кроме своего имени содержат атрибуты. Например, чтобы вставить в документ картинку у тега , необходим атрибут src=»имя_файла.gif». Часто атрибуты необязательны и служат для уточнения внешнего вида элемента.

Теперь Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно. Чтобы улучшить наш простой HTML-документ рассмотрим форматирование абзаца.

Главнаястр.1Гл.2. Элементы Web-страницч1ч2ч3>

2. Оформление текста внутри абзаца

Непарные теги

Существуют теги, которые не подчиняются двум основным правилам HTML: они непарные, а некоторые (&-последовательности) вводятся только маленькими буквами.

– этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Это удобно при публикации стихов:

Стих

Однажды в студеную зимнюю пору

Сижу за решеткой в темнице сырой.

Гляжу — поднимается медленно в гору

Вскормленный в неволе орел молодой.

И шествуя важно, в спокойствии чинном,

Мой грустный товарищ, махая крылом,

В больших сапогах, в полушубке овчинном,

Кровавую пищу клюет под окном.

– горизонтальная линия. Может включать атрибут size, определяющий толщину линии и/или width – ширину линии (в пикселях или процентах). Например:

Комментарии

Браузеры игнорируют любой текст, помещенный между . Это удобно для размещения комментариев.

Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста. Можно прямо указать, каким должен быть шрифт на некотором участке текста, то есть изменить физический стиль текста. А можно пометить некоторый фрагмент текста как имеющий отличный от нормального логический стиль, оставив интерпретацию стиля браузеру.

Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между тегами и , будет написано жирным шрифтом. Текст между тегами и будет написан наклонным шрифтом. Текст, размещенный между тегами и , будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Тег font – задает размер и цвет шрифта текста (применять не рекомендуется). Атрибуты:

Size – устанавливает размер шрифта. По умолчанию используется размер 3. Значения: а) фиксированный размер от 1 до 7, б) относительное изменение «+1» и «-3» на один размер больше и на три размера меньше. Можно задавать размеры в пунктах – pt, пикселях – px.

Face – определяет список разделенных запятыми названий шрифтов. Color – цвет текста. Примеры: ЗЕЛЕНЫЙ

Шрифты типа Arial, Helvetica, sans-serif называют пропорциональными рублеными; Georgia, Times New Roman, serif – пропорциональные с засечками (серифные); Courier, mono – моноширинные шрифты (буквы одинаковой ширины) с засечками.

При использовании логических стилей заранее неизвестно, что увидят пользователи. Разные браузеры представляют одни и те же тегами логических стилей по-разному. Некоторые браузеры показывают нормальный текст вместо выделенного логическим стилем. Распространены следующие логические стили: . – от английского emphasis – акцент, . – сильный акцент, . – фрагмент исходного текста, . – образец сообщения, . – для указания того, что нужно ввести с клавиатуры, . – для написания имен переменных.

Главнаястр.1Гл.2. Элементы Web-страницч1ч2ч3>

3. Разметка документа

Как мы уже видели структурировать документ можно с помощью заголовков и абзацев. Кроме того, абзацы можно организовывать в списки.

Например, чтобы создать вот такой список:

Ссылки

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега . Общий синтаксис создания ссылок следующий.

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.

Пример 8.1. Добавление ссылок

      
Собаки
 
Кошки
  

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.

Результат примера показан на рис. 8.1. Обратите внимание, что при наведении курсора мыши на ссылку, в строке состояния браузера отображается полный путь к ссылаемому файлу.

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая . Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2. Результат при открытии битой ссылки

Естественно, подобное сообщение будет различаться в браузерах, но смысл остается один — документ, на который ведет ссылка, не может быть открыт. Чтобы не возникало подобных ошибок, тестируйте все ссылки на их работоспособность и сразу же устраняйте имеющиеся погрешности.

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3. Окно для выбора действия с файлом в Firefox

Какой элемент Web-страницы может быть гиперссылкой?​

Гиперссылка может быть добавлена к любому элементу HTML-документа. Часть текста с добавленной ссылкой по умолчанию выделяется синим цветом, как в предыдущем предложении. При наведении курсора мыши на текст со ссылкой он или меняет цвет или выделяется подчеркиванием. При навигации в браузере с помощью клавиатуры текстовые и графические элементы со ссылками выделяются прямоугольной пунктирной рамкой. Посещенная ранее ссылка обычно выделяется цветом, отличным от цвета не посещённой ссылки.

Так какие всё таки элементы есть?

Новые вопросы в Информатика

Допоможіть даю 30 балів 45= . бiтiв 3 кб=. бiтiв 2мБ=. бİTİB обчислення 256 КБ=. МБ 4 МБ=. КБ 614400бітів= . байтів

1.Закодуйте з використанням шифру Цезаря зі зсувом на 4 літери праворуч повідомлення: мир 20 балів
які є види ліцензій? навести до кожного виду по 2 приклади програм​

За правилами створення складних документів створіть текстовий документ твори Лесі Українки (біографія, основні твори), обсяг: 5-10 сторінок. Застосуйт … е до абзаців, що містять назви творів, стиль Заголовок 2. За допомогою колонтитулів створіть нумерацію сторінок. На початку документа створіть автоматичний зміст.