Начало html

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

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ.
есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:


WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:


  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
  • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
  • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
  • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html>   <html>   <head>    <title>Заголовок</title>    <meta charset="UTF-8">    <link rel="icon" href="favicon.ico">    <link rel="stylesheet" href="style.css">    <script src="script.js" type="text/javascript"></script>   </head>   <body>    Тело документа   </body>   </html>

Обратите внимание, документы HTML имеют расширение .html.


Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)

<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

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

<html> — начало документа

<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.


Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>

<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег>    содержание или другие теги   </тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> — заголовок документа

<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.


Метатег <meta charset=»UTF-8″ >

<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)

<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.


CSS стили документа

<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSSкаскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>

<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.


В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body

<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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


Тег

Описание

<a>
Тег для создания ссылок в документе.
Пример:

<a href="http://webdesign-master.ru">текст ссылки</a>

Атрибут href указывает документ, на который будет вести данная ссылка.

<em>,  <strong>
Делает текст курсивом или жирным (акцентируемым).
Пример:

<em>текст курсивом</em>
<strong>жирный (акцентируемый) текст</strong>
<h1>,  <h2>,  <h3>,  <h4>,  <h5>,  <h6>
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа.
Примеры:

<h1>Заголовок первого уровня</h1>   <h2>Заголовок второго уровня</h2>   <h3>Заголовок третьего уровня</h3>   ... и т. д.
<ol>,  <ul>
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>
Примеры:

<ul>    <li>Элемент маркированного списка 1</li>    <li>Элемент маркированного списка 2</li>   </ul>     <ol>    <li>Элемент нумерованного списка 1</li>    <li>Элемент нумерованного списка 2</li>   </ol>   
<p>
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Пример:

<p>Внешний вид HTML разметки во многом   определяется CSS стилями.</p>     <p>Тем не менее, некоторые веб-мастера   предпочитают не использовать стили на первых   этапах проекта.</p>
<img>
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся».
Пример:

<img src="путь_до_картинки.jpg" alt="Текст">
<form>   + <input>   + <textarea>
Формы и элементы ввода.
Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер.
Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:

<form action="ссылка_на_скрипт_обработки_формы">    <input type="text" name="name">    <input type="text" name="email">    <textarea name="text">    Текст сообщения    <textarea>    <input type="submit" value="Написать">   </form>
<span>
Определяет подстроку в строке.
Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
Пример:

Изучение HTML, в большинстве случаев, не вызывает  <span>ни каких сложностей</span> у новичков.
<video>,  <audio>
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
Примеры:

<video src="rolik_chuma.mp4" controls></video>   <audio src="muzichka.mp3" controls></audio>

Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.

<div>
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.
Пример:

<div>   	<div>   		Текст во вложенном блоке   	</div>   </div>

Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.

<iframe>
Данный тег загружает внешнюю страницу в документ.
Пример:

<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.

Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

  1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
  2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
  3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

До новых встреч, друзья!

webdesign-master.ru

С чего начинается работа

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом <HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»> <HTML>     <HEAD>     <TITLE>Заголовок документа</TITLE>     </HEAD> <BODY> Текст документа </BODY> </HTML>

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков – «заголовка» и «тела документа». Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит «техническую» информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).

Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

Билет№14

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

  • Накопители на гибких магнитных дисках (НГМД) двух различных типов, рассчитанные на диски диаметром 5,25” (емкость 1,2 Мб) и диски диаметром 3,5“(емкость 1,44 Мб);

  • Накопители на жестких магнитных дисках (НЖМД) информационной емкостью от 1 до десятков  Гб;

  • Накопители CD-ROM емкостью 640 Мб;

  • Накопители DVD-ROM  емкостью до 17 Гб.

Билет№15 Группы базовых функций для текстовых процессоров

 Нижний уровень иерархии составляют редакторы (ТП уровня 1) для ввода и сборки текстов программ. Основное требование пользователя на этом уровне, прямо влияющее на производительность труда, — удобные средства работы с блоками текста, позволяющие быстро размножать повторяющиеся фрагменты программы, составлять ее из частей других программных файлов. Этими средствами вполне обладают текстовые редакторы Personal Editor II (IBM Corp., 1985), Kedit (Mansfield Software Group, 1985), Norton Editor (S. Reifel & Co, 1985), Ted Programming Editor (Morgan Сотр.), встроенные редакторы систем программирования Turbo (Borland International), Quick (Microsoft Corp.) и многие др. Для подготовки статей с однородным текстом (без графики и сложных формул) нужно дополнить функции ТП уровня 1 как минимум средствами форматирования абзацев (включая перенос и выравнивание по правому краю текста) и разбивки текста на страницы (до или во время печати). Пример — многофункциональные редакторы MultiEdit v.2.01 (American Cybernetics), MultiMate (Ashton-Tate, 1988). Отметим также чрезвычайно популярный WordStar 2000 v.2.0 (MicroPro Int. Corp., 1986), выравнивающий строки по правому краю при наборе текста, и известный процессор Lexicon v.6.37 (ВЦ АН СССР, 1988), переносящий слова по правилам русского языка. Оформление статей со сложными рисунками и формулами, газетных полос требует ТП более высокого класса, которые помимо функций уровня 2 обеспечивают по крайней мере средства включения в текст графики и поддержки нескольких алфавитов. Смешивание текста и графики обеспечивает, например, редактор Write, входящий в состав операционной оболочки Microsoft Windows v.2.10 (Microsoft Corp.); ТП Word v.4.0 той же фирмы, обладающий функциями и более высоких уровней; ТП ChiWriter v.2.12 (Horstman Software Design, 1986). В то же время фирма Valid Logic предпочла путь создания сервисных средств к существующим ТП. Для уже упомянутого редактора WordStar 2000 (MicroPro Int. Corp.) фирмой разработан специальный интерфейс, позволяющий включать графики и рисунки в текст. Графический редактор этой фирмы дает возможность корректировать графику после внесения ее в текстовый документ [4]. Добавление к возможностям уровня 2 поддержки особых файлов с адресными данными, как, например, в ТП «Документ 16» (совместный советско-болгарский институт Интерпрограмма), упрощает работу по составлению приказов и деловых писем с повторяющимся содержанием [3]. Пример специализации — редактор MathCAD v.1.1 (MathSoft Inc., 1986), в котором не только обеспечивается богатый набор математических символов, но и предусмотрен режим автоматического построения графиков по заданным функциям и включения их в текстовый файл. ТП уровня 4 предназначен для подготовки книг, журналов в целом и должен обеспечивать обработку больших файлов и сбор оглавления. Подобные функции предусмотрены в развитых ТП, таких как Т3 (ADA Computer und Periphery), Microsoft Word, MultiEdit, Lexicon (L). Последний в предлагаемой иерархии уровень ТП связан с составлением научно-технической документации (по объему часто сравнимой с книгами). Помимо возможностей предыдущих уровней способен вносить в текст колонтитулы, поддерживать листы изменений и составлять предметные указатели. Пример — настольные издательские системы типа Xerox Ventura Publisher (Xerox Corp./Ventura Software Inc., 1986). Ими обладают также упомянутые ранее мощные ТП Microsoft Word и MultiEdit. Приведенная структура, безусловно, не содержит всех необходимых свойств проектируемого ТП и в конкретных случаях требует дополнения. Так, для уровня 1 весьма желателен выход в Turbo- или Quick-компилятор. Уровень 3 предполагает возможность работы со структурным текстом (гипертекстом), уровни 4 и 5 — связь с фотонаборным оборудованием. На первый взгляд, мощные ТП верхних уровней должны удовлетворять подавляющее большинство потребностей пользователей. Однако несмотря на впечатляющие возможности настольных издательских систем, сохраняют свои позиции и относительно простые экранные редакторы. Помимо стоимости важную роль играет в этом простота управления и обозримость их функций, которыми можно овладеть за один сеанс работы. Приведенная иерархия свойств ТП позволит разработчику осознанно дополнять возможности таких «карманных» редакторов, нацеливая их на определенную область обработки текстов. Пример. Оценим в соответствии с предложенной иерархической структурой возможности распространенного экранного редактора Personal Editor II (IBM Corp.). Для краткости обозначим его как РЕ2. Данный редактор обладает всеми функциями ТП уровня 1 и позволяет удобно набирать тексты программ и конструировать их из фрагментов готовых программ. Средства форматирования абзацев, печати текста и обращения к функциям DOS из среды редактирования позволяют работать с данным редактором, как с текстовым процессором уровня 2, в частности, готовить деловые бумаги и статьи без сложных формул и графики. Однако для полного соответствия уровню 2 необходимо выполнение еще двух функций: выравнивания строк по правой границе поля и автоматического разбиения текста на страницы. Для реализации недостающих функций разработана сервисная утилита-форматизатор TF (составляет 3% от объема редактора), которая позволяет работать с редактором РЕ2, как с ТП уровня 2. Утилита TF обрабатывает текст, подготовленный редактором РЕ2 и помещенный в файл с расширением t х t. При этом все строки текста выравниваются по правому краю за счет вставки дополнительных пробелов, равномерно распределенных между словами строки. Не выравниваются однострочные предложения; последние строки абзацев; строки, помеченные пользователем точкой в первой позиции. Точка — единственный управляющий символ форматизатора TF. Таким образом, форматизатор не усложняет общую структуру управления редактором РЕ2. Обработанный текст помещается в файл с расширением 1st, причем точки первой позиции заменяются пробелами. Командная строка для запуска форматизатора имеет вид: tf file-name, где file-name — имя файла (без расширения) с исходным текстом. Указав в командной строке для форматизатора TF ключ /Р, можно получить текст, разбитый на страницы. После каждой страницы в текст включаются символы перевода формата (Х’ОС’), а в начале второй и следующих страниц помещается номер страницы. Форматизатор получает в начале работы два параметра: правую границу поля текста и число строк на странице. Параметры вводятся пользователем в ответ на запрос. При этом можно задать новые значения либо оставить стандартные (70,58). Первый параметр должен совпадать с установленной для редактора РЕ2 правой границей текста. Если форматизатор TF обнаружит строчку большей длины, то на экране появится текст строки вместе с сообщением об ошибке. Каждая строка текста, требующая выравнивания, просматривается форматизатором дважды. В среднем текстовый файл из 500 строк обрабатывается за 50 с на ПЭВМ ЕС1840 и за 30 с на ПЭВМ IBM PC/XT. Размер файла TF.EXE — 2480 байт. Выводы. Предложен иерархический принцип классификации текстовых процессоров, соотносящий область приложения и основной набор необходимых пользователю функций ТП. Такой подход при разработке новых ТП помогает разумно ограничить возможности проектируемого изделия и, следовательно, стоимость разработки. В соответствии с этим подходом дана оценка распространенного редактора текстов Personal Editor II (IBM Corp.) для ПЭВМ типа ЕС1840, IBM PC. Предложен простой и компактный форматизатор TF, который превращает редактор РЕ2 в ТП более высокого уровня

studfiles.net

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

  • Структуру документа;
  • Место нахождения того или иного элемента;
  • Предназначение элемента;
  • Подключаемые сторонние файлы;
  • И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

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

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>Заголовок страницы</title>      <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">      <meta name="description" content="Описание контента страницы, 1-2 предложения.">  </head>  <body>   Контент страницы  </body>  </html

Разберем каждый элемент подробнее:

  1. <!DOCTYPE html>

    Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

  2. <html> - открывающий тег; </html> - закрывающий тег

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

  3. <head> - открывающий тег; </head> - закрывающий тег

    В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:

    1. <link>

      Подключение внешних файлов, например, файл стилей style.css;

    2. <meta>

      Используется для хранения информации для браузера и поисковых систем;

    3. <style>

      Указывается для определения стилей элементов документа;

    4. <script>

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

    5. <title>

      Задает заголовок окна страницы.

  4. <body> - открывающий тег; </body> - закрывающий тег

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

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

Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.

context-up.ru

Основные цели и задачи HTML

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

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

HTML является инструментом, так называемой, front-end разработки сайта. Что это означает? Наверняка вы уже не раз слышали, что есть такие понятия в среде создания сайтов, как front-end и back-end. Так вот, к front-end-разработке (внешний интерфейс) относятся инструменты и языки, которые отвечают за отображение сайта непосредственно для пользователя. Происходит отображение при помощи разных браузеров (Internet Explorer, Opera, Mozilla, Chrome и т.д.). Читайте о том, какой браузер самый лучший. Браузеры хорошо понимают HTML и CSS и преобразовывают полученную информацию в понятный для пользователя вид.

Back-end разработка основана на серверных языках, например, PHP. С помощью кода PHP данные сайта распознаются сервером, а далее передаются браузеру после преобразования кода специальным интерпретатором. Т.е. браузер так или иначе получает сайт в виде HTML разметки и CSS стилей. Посмотреть исходный код сайта можно, к примеру, в Firebug. Из исходного кода не всегда можно определить, на каком языке программирования написан сайт, но коды стилей CSS и теги HTML вы увидите независимо от этого. 

С чего начать изучение HTML?

Если вы серьезно настроены изучать этот язык, то советую сразу скачать какую-нибудь подробную книгу с хорошими отзывами или видео-курсы. Для начала можно посмотреть вот такое видео:

Самая новая версия языка HTML, возможности которой выходят далеко за рамки только разметки структуры текста – это HTML5. Кроме того, по сравнению с HTML4, в последней версии появилось много новых тегов, изменилась семантика.

Но в данной статье мы все же рассмотрим привычную четвертую версию языка HTML и ее основные теги. Для этого разберем основную структуру страницы HTML, а также иерархию тегов. Если вы не знаете с чего начать изучение HTML, тогда приведенная ниже информация даст вам базовое понимание принципов работы с языком гипертекстовой разметки.

Для создания html-документа будем использовать удобный редактор Notepad++.

Первое, что необходимо объявить — это тип документа со ссылкой на соответствующий ему раздел W3C:

А теперь составим простую страницу index.html с последующими комментариями:

В итоге в браузере отображается такая страница при открытии данного файла index.html:

отображение в браузереРазберем его составные части подробнее.

Каркас документа это теги: html, head, body. Причем в тег html заключены все остальные:

Соответственно тег html объявляет об открытии для чтения и закрытии html-документа (<html> — открывающий тег, </html> — закрывающий тег).

Head – это «голова» документа, в нее включена информация, которая не будет отображаться в теле документа. Соответственно body – «тело» документа, или его видимая часть.

В head мы указываем кодировку (charset=utf-8) и title страницы. Далее для приведенного варианта мы подключаем стили с помощью тега <style> непосредственно в самом html документе. Если же, как в случае с Вордпресс, используется внешний файл стилей style.css, он подключается другим способом. Например, так:

Или так:

В нашем случае мы прописываем стили для блоков blok1 и blok2. Блоки эти мы создали внутри тегов body с помощью тегов <div>, для которых задали соответствующий класс (class=”blok1”). Таким образом, мы связали имя класса с его стилевым оформлением.

Как видим на скриншоте, первый блок blok1 имеет желтую заливку, а blok2 заключен в рамку, а цвет его текста синий. Все это мы задали с помощью стилей css, подключенных с помощью html-тега style.

Обратите внимание на конструкцию: <style type=»text/css»> и запомните терминологию. Здесь style – это тег, type – атрибут, значение которого — text/css.

Также в  <div class=»blok1″>: div – тег, class – атрибут, blok1 – значение.

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

Например, распространенный атрибут align, который задает выравнивание текстового блога, может употребляться для тегов h1, p и многих других, который предполагают наличие текста. Его значениями могут быть left, right, center и т.д.

Теги h1,h2 и далее h3,h4 задают заголовки разных уровней в тексте.

Тег <p>  — определяет текстовый абзац.

Вот мы и разобрались с тегами и атрибутами, которые были использованы для нашего сегодняшнего примера. Тегов существует великое множество, но для начала работы в html важно понимать логику их использования, структуру документа и основные алгоритмы его создания.

pro-wordpress.ru

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

Для создания страниц можно использовать специализированные средства, такие как phpDesignerPro, Adobe Dreamweaver или SharePoint от Microsoft, но в большинстве случаев можно обойтись более простыми средствами, такими как стандартный Блокнот Windows или его расширенная версия – «Notepad ++».

Для начала создания первой страницы, открываем блокнот (Пуск-Стандартные-Блокнот), создаем новый документ и вносим код указанный в примере 1. Для создания структуры HTML документа в коде используются теги <html>, <head>, <body>, прописанные в угловых скобках (<…>). В большинстве случаев используются парные теги, первый из которых открывает значение, а второй – закрывает (закрывающий тег содержит «/»). Необходимо запомнить простые правила, чтобы создавать валидный (правильный) код с первого раза:

  • Вся разметка страниц HTML проводится с использованием тегов.
  • Почти все теги парные (открывающий и закрывающий), за исключением небольшого количества тегов форматирования текста.
  • Все, что написано внутри пары тегов подчиняется правилам примененного тега, в том числе использование другого тега.
  • Для удобства теги лучше располагать «лесенкой», т.е. подчиненные теги прописываются с некоторым отступлением от начала управляющего тега.

Что такое валидность кода HTML и как ее проверить, будет рассказано в следующем уроке.

Пример 1. Создание первой HTML-странички

<html>

   <head>

   </head>

   <body>

          Этот документ читается как HTML

    </body>

</html>

Итак, первый документ создан. Теперь его необходимо сохранить, для чего используется команда «Сохранить как…», и при сохранении документа, ему присваивается любое имя (желательно на латинице) и вместо расширения .txt пишется .html или .htm. Это важно, поскольку файлы с расширением отличным от указанного не воспринимаются машинами как необходимый тип документа, и могут выполняться другими программами «по умолчанию».

Начало html

После сохранения, Вы увидите файл со значком в виде странички. У меня установлен браузер Opera по умолчанию, поэтому значок выглядит так:

Начало html

Открыв двойным кликом этот документ, мы увидим в браузере нашу первую страницу с текстом «Этот документ читается как HTML». Конечно, до сайта далеко, но мы только начинаем 🙂

Вторым шагом в создании документа HTML будет формирование «шапки» и «тела». Создается это также с использованием тегов <head> и <body>, следующими непосредственно друг за другом. На практике это выглядит так:

Пример 2 – голова и тело

<html>

Этот документ читается как HTML

            <head>

            Это шапка документа, не отображаемая пользователю.

            </head>

            <body>

            Это – тело документа, которое будет виден пользователю.

            </body>

</html>

Разделение на голову и тело можно сравнить с нервной системой человека. «Всем управляет голова» — выражение верное именно для HTML страниц, ибо в Голове находятся управляющие элементы, которым подчиняются элементы, заключенные в Теле документа.

Разбираться с деятельностью «Головы», мы, пожалуй, будем немного позже. Чтобы понять правила работы, сначала «поковыряемся» в Теле.

«Сначала было слово»… Вот, со слова начнем и мы. Для отображения на страницах используется текст, и форматирование текста – основная часть создания сайта. Вся последующая работа будет вестись в теге <body>

Для просмотра страницы открываем созданную страницу в своем браузере и одновременно открываем этот же документ редактором, т.е. блокнотом.

Пишем любой текст между тегами <body></body>, например, «Этот текст я хочу увидеть в окне браузера, потому что это первый мой документ».

Теперь придадим тексту красоты.

Для придания свойств тексту, таких как полужирный, курсив, подчеркнутый, применяются управляющие теги <i> </i>, <u> </u> и <b> </b>. Первый тег присваивает тексту курсивное начертание, второй – подчеркивание, третий – полужирное. А также применим тег «br» для разрыва строки. Код страницы будет выглядеть так:

<html>

            <head>

            </head>

            <body>

            Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера, </b> <br>потому что <i>это <b>первый</b> мой документ</i>

            </body>

</html>

Сохраняем изменения и обновляем страницу в браузере. В результате, в браузере мы увидим:

Этот текст я хочу увидеть в окне браузера,

потому что это первый мой документ

 

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

Написание кода лесенкой, не принципиально, показанный выше пример можно разместить в одну строку (сплошным текстом), и результат будет такой же

<html> <head></head><body>Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера,</b> <br>потому что <i>это <b>первый</b> мой документ</i></body></html>

Но читать и редактировать такой код сложно, поэтому используется «лесенка» для лучшего восприятия и редактирования.

Специализированные программы, кроме Notepad ++, дают возможность просмотра результата в окне самой программы. Кроме того, можно открыть отредактированную страницу в браузере непосредственно из редактора. Для удобства пользования в специальных редакторах применяется синтаксическая подсветка кода и может использоваться набор стандартных HTML тегов для быстрой их вставки.

Список программ HTML-редакторов с кратким описанием их возможностей.

Notepad ++ — бесплатный редактор, заменяющий стандартный блокнот и дающие очень широкие возможности. Способен подсвечивать синтаксис многих языков программирования, в том числе и HTML, JavaScript, CSS, PHP.

notepad ++ описание

phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.

phpDesigner описание

Другие программы…

На выбор можете использовать и другие пакеты:

Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей  Flash). Пакет платный.

HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)

PSPadеще одна бесплатная альтернатива блокнота, понимающая HTML, CSS

EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.

На этом пока все.

www.programm-school.ru

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы.

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Пример веб-страницы</title>   </head>   <body>   <h1>Заголовок</h1>   <!-- Комментарий -->   <p>Первый абзац.</p>   <p>Второй абзац.</p>   </body>  </html>

Скопируйте содержимое данного примера и сохраните его в папке c:www под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Результат примера в браузере

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

<!DOCTYPE html>

Элемент <!DOCTYPE> (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К <!DOCTYPE> это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

<html>

Открывающий тег <html> определяет начало HTML-документа, внутри него хранится «голова» (<head>) и «тело» документа (<body>).

<head>

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>. Внутри <head> могут располагаться следующие элементы: <base>, <link>, <meta>, <script>, <style> или <title>.

<meta charset="utf-8">

Элемент <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Элемент <title> определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Название веб-страниц в браузере

Рис. 2. Название веб-страниц в браузере

Элемент <title> является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в <title> быть не должно. Но допустимо добавлять разные текстовые символы, например, так: <title>Adobe™ Photoshop®</title>.

</head>

Закрывающий тег </head> показывает, что «голова» документа завершена.

<body>

«Тело» документа <body> предназначено для размещения элементов и содержимого веб-страницы.

<h1>Заголовок</h1>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент <h1> представляет собой наиболее важный заголовок первого уровня, а элемент <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы <h1>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

<!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Всё, что находится между этими тегами, отображаться на веб-странице не будет.

<p>Первый абзац.</p>

Элемент <p> определяет абзац текста.

<p>Второй абзац.</p>

Элемент <p> является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что «тело» документа завершено.

</html>

Последним элементом в коде всегда идёт закрывающий тег </html>.

Перейти к заданиям

webref.ru

Структура веб-страницы

  • Содержание:
  • 1. Структура HTML-документа
  • 1.1. Элемент <html>
  • 1.2. Элемент <head>
  • 1.2.1. Элемент <title>
  • 1.2.2. Элемент <meta>
  • 1.2.3. Элемент <style>
  • 1.2.4. Элемент <link>
  • 1.2.5. Элемент <script>
  • 1.3. Элемент <body>

1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

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

<!DOCTYPE html> <!-- Объявление формата документа -->  <html>  <head> <!-- Техническая информация о документе -->  <meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->  <title>...</title> <!-- Задаем заголовок документа -->  <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->  <script src="script.js"></script> <!-- Подключаем сценарии -->  </head>  <body> <!-- Основная часть документа -->  </body>  </html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

DOM
Рис. 1. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.

1.1. Элемент <html>

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

Таблица 1. Атрибуты тега <html>
Атрибут Описание, принимаемое значение
manifest С помощью значения атрибута указывается путь к документу кэша манифеста, например:
<html manifest="about_company.appcache">

1.2. Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Для элемента доступны ‎глобальные атрибуты.

1.2.1. Элемент <title>

Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Для элемента доступны ‎глобальные атрибуты.

1.2.2. Элемент <meta>

Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

<meta name="description" content="Описание содержимого страницы">  <meta name="keywords" content="Ключевые слова через запятую">

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

<meta name="description" lang="ru" content="Описание содержимого страницы">  <meta name="description" lang="en" content="Description">  <meta name="keywords" lang="ru" content="Ключевые слова через запятую">  <meta name="keywords" lang="en" content="Keywords">

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

<meta name="robots" content="index, follow">

Индексация разрешена, переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow">

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex, nofollow">

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

<meta http-equiv="refresh" content="30">

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты.

Таблица 2. Атрибуты тега <meta>
Атрибут Описание, принимаемое значение
charset Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы".
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://mail.ru/">
name Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="WordPress 4.0"> .
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.

1.2.3. Элемент <style>

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.

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

<style type="text/css">  .paper {  width: 200px;  height: 300px;  background-color: #ef4444;  color: #666666;  }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

<div class="paper">  ...  </div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">
Таблица 3. Атрибуты тега <style>
Атрибут Описание, принимаемое значение
media Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">.

1.2.4. Элемент <link>

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

<!DOCTYPE html>  <html>  <head>  <style>  @import url(style.css);  </style>  <meta>  <title> </title>  </head>

с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

<link rel="stylesheet" href="style.css" type="text/css">

Для элемента доступны атрибуты href, hreflang, media, rel, type, а также ‎глобальные атрибуты.

Таблица 4. Атрибуты тега <link>
Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована.
href Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">.
<link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml">
<link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">
search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:
ширинахвысота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширинахвысота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

1.2.5. Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <script>
Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.

1.3. Элемент <body>

В этом разделе располагается все содержимое документа. Для элемента доступны ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <body>
Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector