WEB Разработка

WEB программирование, прежде всего это - разработка сайтов , и программ на сервере, которые определяют поведение сайта. Для написания этого сайта,iVARIOUS, использовались знания HTML,CSS,PHP,MYSQL. Стоит упомянуть то что огромную роль играет еще JavaScript, но его я стараюсь использовать минимум, в связи с тем, что программы на JavaScript зависят от версий и разработчиков браузеров. Также от версий и разработчиков браузеров в меньшей степени зависит и технология CSS, поэтому лучше использовать стандартные теги для описания элементов. Нет смысла описывать все HTML теги ( слова ), которые делают цвет текста, расположение элементов на странице и т.д , в интернете этой информации достаточно. Я разработал этот сайт всего за три месяца, не зная совершенно ничего о HTML,CSS,PHP,MYSQL.

HTML - язык гипертекстовой разметки, это еще не программирование, который говорит о размерах элементов, цвете , размере шрифта. Если нужно вывести заголовок страницы крупным шрифтом, пишем h1 Заголовок h1.
Есть размеры и поменьше - h2, h3, h4, h5, h6. Также с помощью HTML сообщает браузеру где на странице элементы будут в виде таблицы (table), списка , где будет картинка, видео и их размеры на странице.

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

Javascript - интерпретируемый язык программирования, тут уже начинается логика программ и поведения сайтов. Команды Javascript выполняются на компьютерах пользователей, поэтому в случае если на сайте будут происходить разные ресурсоемкие вычисления ( например интерактивные проекты в 3D ) лучше переложить работу вычислений на компьютеры пользователей. К сожаленью проблемы JavaScript те же что и в CSS, разные браузеры по разному понимают работу JavaScript.

PHP - интерпретируемый язык программирования на подобии JavaScript , только выполняется на стороне сервера, также управляет логикой сайта. В основном ориентированный на работу с базами данных, и имеет огромное количество функций для работы с ней. Просмотреть код PHP вашего сайта пользователь не может, в отличии от кода JavaScript. Сервер выполняет программы PHP и отправляет пользователям результат в обычном виде HTML.

MYSQL - самая популярная база данных, для управления которой используется язык SQL. Теоретически, статьи на сайте можно хранить в сервере в виде простых текстовых файлов, но такой способ никто не практикует. С помощью SQL запросов можно быстро находить, сортировать информацию, и подавать ее в удобном виде.

На изучение всего у меня ушло меньше трех месяцев, при абсолютном незнании даже основ HTML по началу, что и вылилось в сайт iVARIOUS.COM. Но чтоб работать в разных компаниях может уйти до пол года изучения даных технологий.

HTML. Создаем меню

Пример тегов HTML и стилей CSS для создания простого меню. Создан тег <div id="menu"> </div> с шириной width: 100%; в котором находятся элементы меню. За отступы его внутренних элементов отвечает значения padding, за фон - background. Теги <ul> </ul> содержат в себе списки <li> </li>. По умолчанию строка списка начинается с ромбика, точки и некоторых других символов по выбору, чтоб их убрать применяем list-style: none; для обведения списка в рамки записываем значения в border , и border-radius для округления углов. Параметр width: auto; применяет автоматическую ширину для содержимого списка ( в нашем случае это ссылки-меню). Также по умолчанию список вертикальный, со строками сверху-вниз, чтоб выводить его горизонтально применяется команда float: left. Margin-left увеличивает зазор между горизонтальными элементами списка. Background: голубой фон для элементов. Управление видом самих ссылок, как и с другими элементам: #menu + тег "а" обозначающий ссылку. По умолчанию ссылка подчеркнута, чтоб это отменить применяется команда text- decoration: none; Тегом color выбираем цвет названия ссылки.

< html >

< head >

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

</head>

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

<ul>
<li> <a href="www.ivarious.com">Главная</a> </li>

<li> <a href="www.ivarious.com">Продукция</a> </li>

<li> <a href="www.ivarious.com">Контакт</a> </li>
</ul>

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

</html>

Документ layout.css с описанием стиля.

#menu{
width:100%;
height: 60px;
padding: 3px;
background: gray;
}


#menu li {
padding: 5px;
list-style: none;
border: 2px solid gray;
border-radius: 5px;
float: left;
margin-left: 175px;
background: lightblue;
}


#menu a {
text-decoration: none;
color: aliceblue;
}

HTML. Таблицы

Таблицы содержатся в тегах <table> </table>, между которыми <td> столбцы, и <tr> строки. Таблицы более надежный и организованный вариант вывода содержимого. Сайт iVARIOUS ( по дизайну 13 марта 2016 года) содержит таблицу с одной строкой, и двумя столбцами с содержанием категорий (слева) и статей (справа). Также к таблице применяют все стандартные теги и оформления (рамки , фоновые картинки или цвет, отступы текста). На сайте iVARIOUS для прижатия содержимого сайта вверх, применяется <table valign="top" > </table> .

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 - все применяется практически ко всему. В примере есть картинка, а под ней картинка/ссылка, если на картинку/ссылку нажать , браузер пользователя отправит по нужному адресу. Для того чтоб делать картинки ссылками, нужно в описании ссылки просто вставить код картинки, если в описании ссылки только текст - ссылка будет текстовой.