<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html> открытие страницы html
<head> голова сайта
<title> Сайт о собаках </title> отобразится в кладке сайта
</head>
<!-- начнем работать с телом документа --> невидимый текст
<body> тело сайта
<!--вставляем таблицу с перечнем основных пород собак-->
<!--сейчас я напишу свою первую строчку текста!-->
Ура!!!! Я создал свою первую страницу на html!!!
</body>
<!--закончили с телом документа-->
</html>
| - P | Используется для разбивания текста на параграфы |
| -H1,H2,...H6 | Применяются для создания заголовков 1,2...6 уровней |
| - BR | Используетcя для переноса строки |
| - DIV,SPAN | Используются для выделения части документа определенным способом. |
P - используется для разметки параграфов в html документах.
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине.По умолчанию имеет значение left.
<p align="center"> Этот параграф по центру </p>
<p align="left"> Этот по левому краю </p>
<p > Этот тоже по левому (т.к. по умолчанию) </p>
<p align="right"> Этот по правому краю </p>
<p align="justify"> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю </p>
H1,H2,...H6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта.
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания заголовков.
Возможные значения: left, center, right. По умолчанию - left.
Приведу пример:
Если внутри тела документа написать следующее:
<!-- примеры заголовков от 1 до 6 уровня-->
<h1> Большой заголовок </h1>
<h2> Заголовок поменьше </h2>
<h3> Еще меньше </h3>
<h4> Совсем маленький </h4>
<h5> Малюсенький заголовочек </h5>
<h6> Ну просто лилипутский заголовочек </h6>
BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега.
Приведу пример:
Если внутри тела документа написать следующее:
Начинается первая строка <br>
теперь идет вторая <br>
а вот уже и третья
<p> А это параграф и внутри него тоже можно использовать тег <br> переноса строки.Его надо использовать всегда, когда надо перенести строку:) </p>
DIV - В современном сайтостроении используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег!
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания контейнера.
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине.По умолчанию имеет значение left.
Допустим нам нужно выровнять первые две строчки текста из предыдущего примера по правому краю, не выделяя при этом их в абзац. Как это сделать?
<div align="right">
Начинается первая строка <br> теперь идет вторая <br>
</div>
а вот уже и третья
<p>
А это параграф и внутри него тоже можно использовать тег <br> переноса строки.Его надо использовать всегда, когда надо перенести строку:) </p>
Примечание: Находящиеся между начальным и конечным тегами текст или HTML-элементы выделяются как бы в отдельный параграф(но отступы гораздо меньше).
Например:
Пока что вы читаете текст на первой строке <div> Но теперь уже на второй </div> А теперь уже на третей
SPAN - Используется для выделения части информации и придания ей различных стилей. Закрывающий тег обязателен!
Сам по себе, без использования стилей, элемент SPAN никакого смысла не имеет!
Например:
Хотите пользоваться <span> Adobe Dreamweaver </span> - тогда изучите хотя бы основы html и <br>
тогда Вы без проблем разберетесь с этой замечательной программой!
Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:
| - STRONG | Используется для выделения текста жирным |
| - EM | Используется для выделения текста курсивом |
| - U | Выделение текста подчеркиванием |
| - S | Перечеркивание текста |
| - SUP | Создание верхнего индекса |
| - SUB | Создание нижнего индекса |
| - FONT | Изменение цвета, типа, размера шрифта |
| - HR | Вставляет в текст горизонтальную разделительную линию |
STRONG - Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег <BOLD> (или <b>), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами.
Если в теле документа написать:
<strong> Этот текст будет выделен жирным </strong> <br>
<b> И этот тоже, но этим тегом лучше не пользоваться! </b>
EM (Emphasis) - Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег <I>, однако его лучше не использовать т.к. это не приветствуется поисковыми системами.
В программе Adobe Dreamweaver на панели форматирования текста написано " I " хотя в коде пишется EM.
Приведу пример:
<em> Этот текст будет выделен курсивом </em> <br>
<i> И этот тоже, но лучше пользоваться тегом EM </i>
U(Underline) - Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:
Если в теле документа написать:
<u> Этот текст будет подчеркнутым!!! </u>
S(Strike) - Текст, помещенный между открывающим <s> и закрывающим </s> тегами, будет перечеркиваться!
Например:
Вниманиe акция! новая цена <s> 50 000 </s> 20 000 рублей!
SUP (Superscript) - Отображает текст, заключенный между открывающим <SUP> и закрывающим </SUP> тегами, как верхний индекс от основного текста.
Например:
2 <sup> 2 </sup> = 4; <br>
2 <sup> 3 </sup> = 8; <br>
2 <sup> 4 </sup> = 16;
SUB(Subscript) - Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста.
Приведу пример:
Формула спирта в химии - С <sub> 2 </sub> Н <sub> 5 </sub> ОН
FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим <font> и закрывающим </font> тегами.
Атрибуты:
SIZE - Определяет размер шрифта. Возможные значение - 1, 2, 3, 4, 5, 6, 7.
COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
Если в теле документа написать:
Это обычный текст <br>
<FONT SIZE="+2" COLOR="red"> Увеличенный красный шрифт </FONT>
<br>
<FONT SIZE="3" FACE="Courier New" COLOR="Violet"> Моноширинный фиолетовый текст 3 размера </FONT>
HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
Атрибуты:
WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE – толщина линии в пикселах.
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:
left – выравнивание по левому краю документа.
right – выравнивание по правому краю документа.
center – выравнивание по центру документа (используется по умолчанию).
NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Например:
Текст до линии <hr noshade width="50%" align="left"> После линии <br>
А вот пример линии толщиной 2px и без флага noshade
<hr width="50%" align="left" size ="2">
В этом уроке мы разберем такую немаловажную часть языка html как списки. Различают списки двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Элементы:
| - UL | Создает неупорядоченный список |
| - OL | Создает упорядоченный список |
| - LI | Создает пункты списка внутри элементов OLили UL |
UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Например:
<ul>
<li> Первый пункт списка </li>
<li> Второй пункт списка </li>
<li> Третий пункт списка </li>
<li> Четвертый пункт списка </li>
</ul>
OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Атрибуты:
START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала.
TYPE – определяет стиль нумерации пунктов списка.
Возможные значения:
"A" – заглавные буквы A, B, C...
"a" – строчные буквы a, b, c...
"I" – большие римские числа I, II, III...
"i" – маленькие римские числа i, ii, iii...
"1" – арабские числа 1, 2, 3...
Значение по умолчанию <OL TYPE="1">.
Приведу пример:
<!-- пример списка с арабскими числами -->
Чтобы создать сайт на домашнем компьютере необходимо:
<ol type="1" >
<li> Выучить html </li>
<li> Выучить css </li>
<li> Ознакомиться с php </li>
</ol>
<!-- пример списка с большими римскими числами -->
Чтобы создавать сайты быстро желательно:
<ol type="I" >
<li> знания программы Adobe Dreamweaver </li>
<li> знания программы TOpStylePro </li>
<li> Знания Photoshop </li>
</ol>
<!-- пример списка с маленькими буквами -->
Чтобы зарабатывать на сайте желательно:
<ol type="a" >
<li> наличие хорошей посещаемости </li>
<li> наличие цифрового продукта для продажи </li>
<li> наличие блоков рекламы </li>
</ol>
<!-- пример списка не с начала -->
Чтобы стать успешным в интернете:
<ol type ="1" start="2" >
<li> писать информацию полезную для людей </li>
<li> постоянно пополнять сайт новым содержимым </li>
<li> первый пункт придумай сам </li>
</ol>
LI (List Item) - Создает пункт в списке. Располагается внутри элементовOL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.
Атрибуты:
VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Приведу пример:
Чтобы создать сайт на домашнем компьютере необходимо:
<ol ><!--так как тип не указали будет использоваться по умолчанию-->
<li> Выучить html </li>
<!--сейчас нумерация пойдет с пятого номера-->
<li value="5"> Выучить css </li>
<li> Ознакомиться с php </li>
</ol>
Урок 6: Покоряем html ссылки
В первую очередь давайте поговорим о ссылках - переходах с одной страницы на другую. Ссылки это базовый элемент без которого невозможно представить интернет.
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:
<a href="https://www.zvirec.com"> Это ссылка на сайт zvirec.com </a>
будет выглядеть в браузере:
Это ссылка на сайт zvirec.com
Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом, будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.