29 Июня 2018

Справочник по HTML

Оглавление.

  1. Введение.
  2. HTML разметка.
  3. Структура HTML документа.
  4. Форматирование текста.
  5. Основные теги
  6. Типы списков
  7. Специальные символы.
  8. Разделы WEB страниц.
  9. Ссылки на интернет ресурсы и справочники.

Введение

HTML (HyperText Markup Language) - язык гипертекстовой разметки, предназначен для структурирования сайта (построение каркаса сайта).

 HTML разметка

Весь HTML документ состоит из - элементов.
Элементы  состоят из данных разметки (тэгов) и содержимого (контента).
Элемент = <tag>…содержимое…</tag>
Данные разметки заключены в угловые скобки называются тегами. Теги бывают двух типов - открывающий <> и закрывающий </>
Открывающие теги могут иметь атрибуты.  
<tag attribute="value" attribute="value">…содержимое…</tag>

Также, теги делятся на три группы:
  1. Теги верхнего уровня - html, head, body.
  2. Блочные тэги (block elements) - используются для структурного оформления, занимают всю ширину страницы. При создании тега он переносится но новую строчку.
  3. Строчные тэги (inline elements) - используются для оформления строк, занимают ширину заключенного в него текста. Могут включать в себя другие строчные теги и не могут блочные.

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

Все названия тегов, заранее определены. Они все описаны на сайте www.w3.org
Первым делом должно идти объявление типа документа, далее декларативный заголовок и тело документа.
<!DOCTYPE HTML> <!-- Определение типа документа-->
 <HTML> <!-- Начало документа-->
   <head> <!-- Начало заголовка-->
    <!-- Тут размещается служебная информация. Пользователь ее не видит-->
     <title>Главная страница</title> <!-- Заголовок в шапке браузера-->
   </head> <!-- Конец заголовка-->
   <body> <!-- Начало тела документа --> 
    <!-- Тут размещается содержание документа. Это видит пользователь-->
   </body><!-- Конец тела документа -->
 </HTML> <!-- Конец документа--> 

Форматирование текста

  Заголовки:
  • <h1> - </h1> - самый большой заголовок
  • ...
  • <h6> - </h6> - самый маленький заголовок
  Абзац:
  • <p> (paragraph) - разделяет текст на параграфы. Блочный тип.
  • <br> (brake) - принудительный разрыв строки.
  Блочная цитата:
<blockquote>.....</blockquote> - выносим цитату в отдельный блок на странице. Используем, если нужно выделить как цитату текст длиной в абзац или больше.Смещает контент вправо и оставляет небольшой отступ слева. В данный тег можно поместить другой блочный элемент.Блочный тип.

 Авторское форматирование:
<pre>.....</pre> - предформатирование, выводит текст без изменений, учитывая пробелы, табы и т.д. Меняет шрифт на моноширинный. Блочный тип.

 Форматирование кода:
<code>.....</code> - предформатирование, используется для написания машинного кода, не выполняя его. Меняет шрифт на моноширинный. Блочный тип.
 
Теги для физического выделения текста:
  • b (bolt) - жирный.
  • i (italic) - курсивный.
  • u (underlined) - подчеркнутый.
  • s (strikethrough) - зачеркнутый.
  • q (quote) - выделяем цитату внутри текста. Используем, если нужно выделить как цитату небольшую часть текста.
  • sub - переводит конкретную букву в нижний индекс (H2O)
  • sup - переводит конкретную букву в верхний индекс (E=MC2)
  • span - предназначен для выделения часть информации внутри других тегов и установить для нее 
Теги для логического выделения текста (используются для поисковых машин):
  • strong - выделение особо важных фрагментов жирным.
  • ем - выделение важных фрагментов курсивным.
  • ins - выделение фрагментов подчеркиванием.
  • del - выделение фрагментов перечеркиванием.
  • cute - выделение цитат курсивом.
  • code - отображение программного кода моноширинным шрифтом.
  • kbd - текст, вводимый с клавиатуры: отображается моноширинным шрифтом.
  • var - название переменной: отображается курсивом.
  • samp - выделение нескольких символов моноширинным шрифтом.
  • dfn - определение вложенного термина курсивом.
  • abbr title="Какое-то слово" - аббревиатура.
  • acronym title="Какое-то слово" - акроним (вид аббревиатуры).

Несемантический элемент

  • span - предназначен для выделения часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
  • div - Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Блочный тип.

Ссылки

<a> - тег используется для создания ссылки на другую страницу. Атрибут href указывает на целевую страницу ссылки, а содержимое элемента, это то что мы видим на веб-странице. В качестве метки ссылки может использоваться текст и изображение.
<a href="http://ya.ru" title="Описание">Ссылка на сайт Ya.ru</a>

Символы ".." - означают "родительская папка". Не забывайте разделять части пути символом - "/".

Типы списков — маркированный, нумерованный и список описаний

  • <ul> - (unordered list — неупорядоченный список) внешний элемент маркированного списка.
  • <ol> - (ordered list — упорядоченный список) внешний элемент нумерованного списка. Для этого элемента доступны: type - устанавливает вид маркера списка; reversed - нумерация в списке становится по убыванию (3,2,1); start - задаёт число, с которого будет начинаться нумерованный список.
  • <li> - (list item — пункт списка) определяет отдельный пункт списка. Для этого элемента доступны: type - устанавливает вид маркера списка;
  • <dl> - (description list — список описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.
<!-- Неупорядоченный список -->
<ul>
	<li>Первый пункт</li>
	<li>Второй пункт</li>
	<li>Третий пенкт</li>
</ul>

<!-- Упорядоченный список -->
<ol>
	<li>Первый пункт</li>
	<li>Второй пункт</li>
	<li>Третий пенкт</li>
</ol>

<!-- Список определений-->
<dl>
	<dt>Первый термин</dt>
		<dd>Описание термина</dd>
		<dd>Описание термина</dd>
	<dt>Второй термин</dt>
		<dd>Описание термина</dd>
		<dd>Описание термина</dd>
</dl>
Изменить представление ненумерованного списка можно через CSS. 
<style>
   ul {list-style-type:disc;
      /*circle, square, none */}
   ol {list-style-tipe:decimal;
      lower-alpha, upper-alpha,
      lower-roman, upper-roman, none}
</style>

Специальные символы

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

Разделы веб-страницы

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

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

    • header  — шапка сайта или раздела.
    • section — задаёт общий универсальный раздел. Если не знаете, какой элемент подходит для выбора какого-либо раздела, выбирайте <section>.
    • nav — основные навигационные ссылки.
    • main — уникальное основное содержимое веб-страницы.
    • aside — раздел, косвенно связанный с основным содержимым, обычно используется для боковой панели.
    • article — самостоятельный раздел, представляющий собой статью, сообщение в блоге или на форуме, комментарий.
    • footer — подвал сайта или раздела.

Изображения

Для вставки изображения в документ используем тэг
<img src="pic.png" alt="Описание" width="100" height="100" />

Ссылка в виде картинки
<a href="http://ya.ru" title="Описание"><img src="pic.png" alt="Описание" width="100" height="100" /></a>

Таблицы

Для создания таблицы используются тэги - table, tr, td, th(для выделения верхней строки)
Сгруппировать области можно при помощи тэгов - thead, tbody. tfoot


<table>
     <capion>таблица</caption>/*заголовок таблицы*/
	<tr>
		<th>1.1</th><th>1.2</th><th>1.3</th>
	</tr>
	<tr>
		<td>2.1</td><td>2.2</td><td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td><td>3.2</td><td>3.3</td>
	</tr>
</table>

<style>
	table{border: 3px solid green width: 80%;
                    border-spacing: 5px; /*расстояние между ячейками*/
                    border-collapse: separate; /*separate, collapse*/}
	td {border: 1px solid red
                    padding: 5px; /*расстояние между содержимым ячейки и границей*/
                   empty-cells: show; /*hide - убирает пустые ячейки*/}
        caption { caption-side: top;} /*top, bottom*/
</style>

Объединение ячеек
Сперва рисуем полную таблицу, после добавляем атрибуты и удаляем лишние ячейки.
Для объединения ячеек в строке, в тэге первой ячейки добавляем атрибут colspan="х" (х- на какое количество растягиваем ячейку)
Для объединения ячеек в столбце, в тэге первой ячейки добавляем атрибут rowspan="х" (х- на какое количество растягиваем ячейку)

<table>
     <capion>таблица</caption>/*заголовок таблицы*/
	<tr>
		<th colspan="3">1.1</th><!--удаляем ячейки<td>1.2</td><td>1.3</td>-->
	</tr>
	<tr>
		<td>2.1</td><td>2.2</td><td rowspan="2">2.3</td>
	</tr>
	<tr>
		<td>3.1</td><td>3.2</td><!--удаляем ячейку<td>3.3</td>-->	</tr>
</table>

<style>
	table{border: 3px solid green width: 80%;}
	td {border: 1px solid red}
        caption { caption-side: top;} /*top, bottom*/
</style>

Форма

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

<form action="" method="get" enctype="application/x-www-form-urlencoded">
	<!--action - (обязательный) адрес программы или документа, который обрабатывает данные формы.
		method - (не обязательный) сообщает серверу о методе запроса get или post.
		enctype - (не обязательный) определяет способ кодирования данных формы при их отправке на сервер-->
	<!--Далее находятся элементы форм-->
	<input type="text" name="login" value="Введите логин" maxlength="10"/> <!--текстовое поле-->
	<input type="password" name="pwd" value="Введите пароль"/><!--текстовое поле шифрованное-->
	<input type="text" name="text" value="Текст по-умолчанию" maxlength="50"/>
	<!--Кнопки-->
	<input type="submit" value="Послать форму">
	<input type="reset" value="Очистить форму">
	<input type="image" src="button.png">
	<input type="button" value="просто кнопка">
	<!--Чекбокс-->
	<input type="checkbox" name="1" checked="checked" ><!--атрибут checked по умолчанию ставит галочку-->
	<input type="checkbox" name="2" id="chk" ><label for="chk">описание к checkbox</label><!--при нажатии на текст активируется checkbox-->
	<!--Чекбокс-->
	<input type="radio" name="2" value="Значение 1" checked="checked"><!--атрибут name группирует логичесие области-->
	<input type="radio" name="2" value="Значение 2">
</form>
Выпадающее меню, список 

<!--выпадающее меню, список и его элементы-->
<form action="">
	<select name="book" size="5" multiple="">
<!--size - количество отражаемых пунктов multiple - выбор нескольких пунктов-->
		<optgroup label="Russian">
			<option value="1" selected="">HTML</option>
			<option value="2">JavaScript</option>
			<option value="3">PHP</option>
			<option value="4">XML</option>
		</optgroup>
		<optgroup label="English">
			<option value="5" selected="">HTML</option>
			<option value="6">JavaScript</option>
			<option value="7">PHP</option>
			<option value="8">XML</option>
		</optgroup>
	</select>
	<input type="submit" name="" value="Послать форму">
</form>
Другие формы 

<!--Другие формы-->
<form action="">
	<fieldset><!--Рамка вокруг формы -->
		<legend>Красивая рамка</legend><!--Название в рамке вокруг формы -->
		<!--Поля для текста -->
		<textarea name="msg" cols="10" rows="5">Привет!</textarea>
		<!--Поле загрузки файла -->
		<input type="file" name="upload">
	</fieldset>
	<!--Скрытое поле используется для разработки-->
	<input type="hidden" name="x" value="10">
	<!--Новые элементы созданы для семантики-->
	<input type="email" name="email">
	<input type="url" name="site">
	<input type="search" name="find">
	<input type="number" name="num">
	<input type="range" name="nums" min="1" max="10" value="5">

	<input type="submit" name="" value="Послать форму">
</form>



Ссылки на интернет ресурсы и справочники

  1. Cреда веб-разработки (работающая в веб-браузере) - https://jsfiddle.net/
  2. Официальный справочник - https://www.w3.org/
  3. Один и лучших справочников - htmlbook.ru
  4. Интерактивное обучение HTML - https://htmlacademy.ru/
  5. Самоучитель HTML и CSS - https://webref.ru/course/html-tutorial
  6. Самоучитель HTML и CSS (eng) - www.w3schools.com
  7. Обучающий справочник HTML - http://theory.phphtml.net/books/css/?yclid=3797099727148044131
  8. Изучение FlexBox - http://yoksel.github.io/flex-cheatsheet/
  9. Шуточное обучение flexbox froggy - http://flexboxfroggy.com/#ru
  10. Шуточное обучение grid garden - http://cssgridgarden.com/#ru

Программы:
  1. Текстовый редактор Notepade++ - https://notepad-plus-plus.org/
  2. Текстовый редактор Sublimetext - http://www.sublimetext.com/
  3. Текстовый редактор Adobe Brackets - http://brackets.io/
  4. Текстовый редактор EmEditor - www.emeditor.com 
  5. Текстовый редактор Edit+ www.editplus.com
  6. Текстовый редактор UltraEdit www.ultraedit.com
  7. Текстовый редактор - Adobe Dreamweaver www.adobe.com/ru/products/dreamweaver.html
  8. Текстовый редактор PHPStorm - https://jetbrains.ru/products/phpstorm/
  9. Файловый менеджер Filezilla - https://filezilla-project.org/
  10. Файловый менеджер ForkLift - https://www.binarynights.com/