Найти в Дзене
nikita sukhotskiy
19 подписчиков

Html...{Учимся веб-программированию} ч.1

2
11 мин
Структура документа....
HTML расшифровывается как HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML-документ, по сути, обычный текстовый файл, который содержит нормально читаемый текст и специальные команды разметки (tags или теги), заключенные в угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер выводит документ на экран: размещение текста в
Оглавление

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

HTML расшифровывается как HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).

HTML-документ, по сути, обычный текстовый файл, который содержит нормально читаемый текст и специальные команды разметки (tags или теги), заключенные в угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер выводит документ на экран: размещение текста в окне, представление графических объектов (рисунков и картинок), а также вывод звуковых, видео клипов и т. д. HTML-теги обычно используются в паре, например: <b></b>. Первый тег называется начальным тегом, а второй конечным тегом.

Текст, находящийся между начальным и конечным тегом, подвергается "разметке". Например <b>Привет</b> будет отображено браузером как

Привет (слово 'Привет' написанное жирным шрифтом).

Следует иметь ввиду, что не все теги совместимы с браузерами. Если браузер не понимает тег, то он его просто пропускает.

Простейший HTML-документ имеет следующую структур:

-2

Файл: index.html Все HTML5-документы должны начинаться с объявления DOCTYPE. Предыдущие версии HTML имели несколько типов DOCTYPE. HTML5 имеет только один:

<!DOCTYPE html>

Данное объявление переводит все браузеры в нормальный режим.

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

Тег <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>.

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

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

В секции head могут располагаться скрипты, инструкции об оформлении страницы и различная мета-информация о данном HTML-документе.

Метаданные – это информация о данных, находящихся в HTML-документе.

Пример метаданных: кодировка страницы, краткое описание содержимого, ключевые слова, имя автора, дата последней модификации.

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

В HTML метаданные HTML-документов определяются с помощью тега <meta>. Тэг <meta> всегда должен располагаться в секции head.

Для того, чтобы указать браузеру пользователя какая кодировка используется на данной странице, необходимо использовать атрибут charset тега meta например так

<meta charset="UTF-8"/>

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

Любой HTML-документ имеет название, заключенное между тегами <title> и </titIe>. По названию документа HTML браузеры могут найти информацию, поэтому место для названия всегда определено – оно находится вверху экрана и отдельно от содержимого документа. Максимальная длина названия – 40 символов. Пустой заголовок, не содержащий ни одного символа, включая пробел, не допустим. Также запрещено включать в код два и более элемента <title>, он должен быть только один.

Элемент title:

-- Определяет заголовок окна браузера;

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

-- Используется как заголовок страницы при добавлении сайта в избранное.

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

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

<p> Это абзац. </p>

Большинство элементов могут быть вложены друг в друга (т.е. в содержимом одного элемента может располагаться другой элемент).

HTML не чувствителен к регистру. Это значит, что тег <b> будет интерпретироваться браузером так же, как и тег <B>. Несмотря на то, что HTML не настаивает на строгом синтаксисе, мы рекомендуем заранее выработать определенные правила написания кода (например, если вы пишете теги в нижней раскладке, то делайте так всегда).

HTML-элементы могут иметь атрибуты. Атрибуты задаются в начальном теге элементов и состоят из имени и значения. Например, в атрибуте href="https://loftschool.com/" href является именем, а
https://loftschool.com/ значением.

Текстовые абзацы....

Изучим основные теги для логической разметки текста. Использовать их можно только внутри тега <body>.

Начнём с простейшего тега <p>, с помощью которого создаются абзацы.

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

<p> Я текстовый абзац </p>

Для выделения текста в HTML-документах могут быть использованы следующие теги: с помощью тега <b>, </b> можно установить жирный шрифт, тег <i>, </i> устанавливает наклонный шрифт. Однако, лучше для оформления всегда использовать таблицы стилей CSS.

Допускается также использование в тексте верхних и нижних индексов, соответственно, с помощью тегов <sup>, </sup> и <sub>, </sub>.

С помощью HTML-тега <pre> вы можете отобразить предформатированный текст.

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

Установка цветов в HTML-документе производится с использованием таблицы стилей CSS.

Выбор цвета можно производить разными способами: например, заданием имени или определением RGB-номера выбранного цвета.

Поддерживаются следующие имена цветов: AQUA, BLACK, BLUE, FUCHSIA,

GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE,

YELLOW.

Номер цвета RGB задается тремя двухзначными шестнадцатеричными числами, причем каждое число из интервала 00-FF и определяет интенсивность соответствующего цвета. Например, номер цвета #FF0000

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

Соответственно, номер #00FF00 кодирует зеленый цвет и номер #0000FF – голубой.

После введения CSS некоторые теги и атрибуты в HTML стали считаться устаревшими (с помощью CSS можно добиться большего и гораздо эффективнее).

Избегайте использования следующих устаревших HTML-тегов:

<strike> Определяет зачеркнутый текст.

<font> и<basefont> Устанавливает шрифт для текста.

<center> Выравнивает содержимое по центру.

<menu> Определяет список меню.

В HTML5 появился новый тег <mark>, который обозначает выделенный текст. Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое, на что стоит обратить внимание. Такое же назначение и у тега <mark>. В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном.

Заголовки и

подзаголовки....

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

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

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

В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h1> до <h6>. Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1>, <h2> и <h3>.

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

Ссылки...{}

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

тег <а>:

<a href = ”filename”>текст_ссылки</a> filename — имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки — текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Например, гипертекстовая ссылка

<а href = ”my_work.html”>Views</a>

ссылается на документ my_work.html, образуя гипертекстовую ссылку в виде слова Views. Если документ, формирующий ссылку, находится в другой папке, относящейся к web-сайту, то подобная ссылка называется относительной. Например:

<а href = ”photo/my_photo.html”>Moй фотоальбом</а>

ссылается на файл my_photo.html, расположенный в папке photo,вложенной в текущую, и образует ссылку в виде текста Мой фотоальбом.

Если есть необходимость сослаться на ресурс Internet, расположенный на удаленном сервере, или указать в ссылке полное имя файла и путь к файлу, то используют абсолютные ссылки. Структура такого тега аналогична, только он формируется на основе полного пути к ресурсу в виде протокол:/URL путь. Например:

<а href=”http://www.yandex.ru”>Поиск в интернет</а>

В HTML гиперссылки делят на два вида:

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

-- Внутренние гиперссылки (якоря) перемещают пользователя на предварительно созданную закладку в документе, в котором они определены.

<!-- Создание гиперссылки на закладку -->

<a href="#bookmark"> Текст ссылки </a>

<!-- Создание закладки -->

<div id="bookmark"> Текст закладки. </div>

Изображение..../

В документах HTML могут использоваться изображения и графика, для чего

используется тег <img>. Допускается использование файлов в формате PNG,

GIF или JPG/JPEG. Следующий пример демонстрирует вставку в документ JPG

-файла:

<img src="pic.jpg" width=45 height=50 alt="Photo">

Здесь атрибут src= определяет URL-адрес графического файла. В

приведенном примере файл будет размещен в области шириной 45 и

высотой 50 пикселей соответственно. Если размеры, указанные атрибутами

height= (высота) и width= (ширина), не совпадают с размерами

графического файла, то последний масштабируется. Для графических

файлов рекомендуется всегда задавать размеры в таблицах стилей CSS

вместо атрибутов height и width.

Атрибут alt= указывает на то, что подставить вместо рисунка, если браузер

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

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

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

<а href ="index.htm">

<img src="logo.jpg" width= "43" height="35" alt="На главную страницу">

</a>

Списки....@

Язык HTML имеет возможности для создания различных списков и перечислений. Для их создания могут использоваться теги ul и ol, а элементы списка отмечаются тегом li, при этом допускаются вложенные списки любой глубины.

Рассмотрим следующий пример ненумерованного списка и использования тегов ul и li

<ul>

<li> красный</li>

<li> оранжевый </li>

<li> желтый </li>

<li> зеленый </li>

<li> голубой </li>

<li> синий </li>

<li> фиолетовый </li>

</ul>

что даст в окне браузера результат, показанный на рис. 1

-3

Нумерованный список создают, используя теги ol и li Например:

<ol>

<li>элемент первый.

<li>элемент второй.

<li>элемент третий.

</ol>

По умолчанию нумерация дается арабскими цифрами, начиная с единицы.

Используя атрибуты тега ol, можно изменить стиль оформления списка.

Атрибут type= определяет стиль нумерации (буквы или цифры), при этом допускаются следующие его значения:

type = A использовать большие латинские буквы

type = a использовать маленькие буквы

type = I использовать большие римские цифры

type = i использовать маленькие римские цифры

type = 1 использовать арабские цифры

Атрибут start= определяет начальное значение списка (десятичное число), например start=5.

И, наконец, рассмотрим пример вложенного списка, в котором допускается использовать теги ul, ol и li

<ul>

<li>Первый раздел </li>

<ul>

<li>Первый подраздел первого раздела </li>

<li>Второй подраздел первого раздела

<ol type = “a”>

<li>Первый список </li>

<li>Второй список </li>

</ol>

</li>

<li>Третий подраздел первого раздела </li>

</ul>

<li>Второй раздел </li>

</ul>

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

-4

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

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

<!—текст комментария -->

С помощью комментариев вы можете оставлять в коде пояснительные заметки.

-- Комментарии полностью игнорируются браузером.

-- Комментарии не отображаются при просмотре страницы.

Комментарии могут использоваться при отладке кода. Если вы не уверены, хотите ли видеть данный заголовок, абзац и т.д. в итоговой версии страницы, оберните код в тэг <!-- > на время принятия решения.

Следующая тема будет "СИМВОЛЫ" А всё потому что Дзен рассматривает в тексте теги как хештеги для рекламы до десяти тегов можно только использовать поэтому продолжу в следующей статье!