HTML. Общее

Теперь приступим к HTML разметке, ее мы будем редактировать в бесплатной и удобной программе Brackets, можно и в простом блокноте, сохранив документ в расширении html (обратите внимание, блокнот windows может сохранить ваш документ как например index.html.txt, а не просто index.html, так браузер откроет ваш проект как простой текст ).
Начинается страница с заголовка head и тегов, в которых хранится информация о странице для браузера и поисковиков.
Для начала запишем строчку с тегом link , в котором укажем путь к файлу со стилями, в которых будут хранится описания визуального вида ваших элементов на странице.
В общем картина выглядит так:

<!--Таблица стилей, отдельный файл layout.css-->
#iVARIOUS {
color: red;
}

#iVARIOUS a{<!--Обращение конкретно к ссылке - отобразить в зеленом цвете -->
color: green;
}



<!--Главный файл, с именем index.html-->
< html >

< head >

< link rel='stylesheet' type="text/css" href="layout.css"> <!--Адрес файла с описанием стилей-->

</head>

< div id="iVARIOUS"> <!--Выделение фрагмента страницы с именем iVARIOUS-->

<li> iVARIOUS.COM</li> <!--Текст-->

<li> <a href="www.ivarious.com"> iVARIOUS.COM</a> </li><!--Текстовая ссылка-->

<li> <img src="images.jpg"> </li> <!--Картинка-->

<li> <a href="www.ivarious.com"> < img src="images.jpg"> </a></li><!-- Ссылка в виде картинки-->

</div> <!-- Конец фрагмента страницы с именем iVARIOUS-->

</html>

Главные, и самые нужные теги при организации страницы HTML это <div> и <span>, они являются чем то вроде - контейнерами, или блоками, на которые разделена страница. Само слово DIV есть сокращение от английского "разделять", чем добиваются максимального визуального разнообразия, применяя к конкретному div свой особенный визуальный стиль.
Если div он есть чем-то вроде вертекальной организации, то span его аналог по горизонтальному расположению блоков. Также в примере фигурирует тег <li>, выстраивающий элементы на странице в виде списка.
Стили CSS применяются к div с #названия и описания в скобках {}. Если нужно применить какой-нибудь стиль конкретно чему-то, входящему в div, нужно всего лишь после имени div написать имя тега, например обращение к ссылке внутри div id="iVARIOUS":


#iVARIOUS a{...}

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