
Торты от лучшего мастера Москвы!
HTML (HyperText Markup Language) - язык гипертекстовой разметки, предназначен для структурирования сайта (построение каркаса сайта).
Весь HTML документ состоит из - элементов.
Элементы состоят из данных разметки (тэгов) и содержимого (контента).
Элемент = <tag>…содержимое…</tag>
Данные разметки заключены в угловые скобки называются тегами. Теги бывают двух типов - открывающий <>
и закрывающий </>
Открывающие теги могут иметь атрибуты.
<tag attribute="value" attribute="value">…содержимое…</tag>
html, head, body
.<!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 есть несколько элементов, позволяющих поделить веб-страницу на разделы и задать им определённый смысл.
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>
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>
<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>