1. Простой сайт
Для начала создадим простейший сайт. Состоит он из одной HTML страницы. HTML (HyperText Markup Language
- язык разметки гипертекстов) – универсальный язык, описывающий
веб-страницы. Его задача – указать браузеру, что и как отображать при
загрузке страницы на компьютере пользователя. Каждая из его команд,
называемых тегами, описывает фрагмент страницы.
Перейдем к делу. Перед Вами текст простейшей HTML-страницы:
Code
<pre><code class=" html"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 119, 0);"><span class="doctype"><!</span></span><span class="doctype"><span style="color: rgb(0, 0, 187);">DOCTYPE html </span><span style="color: rgb(0, 119, 0);">PUBLIC </span><span style="color: rgb(221, 0, 0);">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">html</span><span class="attribute"> xmlns</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"http://www.w3.org/1999/xhtml"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">xml</span><span style="color: rgb(0, 119, 0);">:</span><span style="color: rgb(0, 0, 187);">lang</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"ru"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">head</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">title</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Моя первая страничка</span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">title</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">meta</span><span class="attribute"> http</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">-</span><span style="color: rgb(0, 0, 187);">equiv</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"Content-Type"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">content</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"text/html; charset=windows-1251"</span></span></span><span style="color: rgb(221, 0, 0);"> </span><span style="color: rgb(0, 119, 0);">/></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">link</span><span class="attribute"> rel</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"stylesheet"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">href</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"style.css"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">type</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"text/css"</span></span></span><span style="color: rgb(221, 0, 0);"> </span><span style="color: rgb(0, 119, 0);">/></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">head</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">body</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"wrapper"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"nav"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">ul</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span><span class="attribute"> href</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"#"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Контакты</span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"> <br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span><span class="attribute"> href</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"#"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Загрузки</span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span><span class="attribute"> href</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"#"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Главная</span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">li</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">ul</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"header"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">h1</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);">&</span><span style="color: rgb(0, 0, 187);">nbsp</span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">h1</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"showcase"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Здравствуйте</span><span style="color: rgb(0, 119, 0);">! </span><span style="color: rgb(0, 0, 187);">Я </span><span style="color: rgb(0, 119, 0);">- </span><span style="color: rgb(0, 0, 187);">Перец</span><span style="color: rgb(0, 119, 0);">.<span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">BR</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> </span><span style="color: rgb(0, 0, 187);">Добро пожаловать</span><span style="color: rgb(0, 119, 0);">!<span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"top"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"text"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">h1</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Ах</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">перец</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">перец</span><span style="color: rgb(0, 119, 0);">!<span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">h1</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Сорта перца подразделяют на сладкие и острые</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">или горькие</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">Ведущее место принадлежит овощному </span><span style="color: rgb(0, 119, 0);">(</span><span style="color: rgb(0, 0, 187);">сладкому</span><span style="color: rgb(0, 119, 0);">) </span><span style="color: rgb(0, 0, 187);">перцу с нежной</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">сочной и мясистой мякотью</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">который употребляется в различных видах</span><span style="color: rgb(0, 119, 0);">: </span><span style="color: rgb(0, 0, 187);">в свежем в качестве салата</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">консервированном</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">засоленном</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">тушеном</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">фаршированном и других</span><span style="color: rgb(0, 119, 0);">.<span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Родина сладкого перца </span><span style="color: rgb(0, 119, 0);">- </span><span style="color: rgb(0, 0, 187);">Мексика</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">В Европе он стал известен только после открытия Америки</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">Горький перец издавна выращивали в Иране</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">Ираке</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">Турции</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">Афганистане и на восточном побережье Африки</span><span style="color: rgb(0, 119, 0);">.<span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">Перец </span><span style="color: rgb(0, 119, 0);">- </span><span style="color: rgb(0, 0, 187);">многолетнее растение из семейства пасленовых</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">В наших климатических условиях его выращивают как однолетнюю культуру</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">Имеет длительный вегетационный период</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">Цвет плодов разнообразный</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">зависит от их зрелости и сорта</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">бывает белым</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">желто</span><span style="color: rgb(0, 119, 0);">-</span><span style="color: rgb(0, 0, 187);">белым</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">зеленым</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">темно</span><span style="color: rgb(0, 119, 0);">-</span><span style="color: rgb(0, 0, 187);">зеленым</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">оранжевым</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">красным</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">темно</span><span style="color: rgb(0, 119, 0);">-</span><span style="color: rgb(0, 0, 187);">красным</span><span style="color: rgb(0, 119, 0);">. </span><span style="color: rgb(0, 0, 187);">Различают крупноплодный</span><span style="color: rgb(0, 119, 0);">, </span><span style="color: rgb(0, 0, 187);">широкоплодный </span><span style="color: rgb(0, 119, 0);">(</span><span style="color: rgb(0, 0, 187);">томатовидный</span><span style="color: rgb(0, 119, 0);">), </span><span style="color: rgb(0, 0, 187);">длинноплодный и мелко</span><span style="color: rgb(0, 119, 0);">-</span><span style="color: rgb(0, 0, 187);">плодный перец</span><span style="color: rgb(0, 119, 0);">.<span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">TD</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span><span class="attribute"> id</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"footer"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br> <span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">p</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);">&</span><span style="color: rgb(0, 0, 187);">copy</span><span style="color: rgb(0, 119, 0);">; </span><span style="color: rgb(0, 0, 187);">Name </span><span style="color: rgb(0, 119, 0);">| </span><span style="color: rgb(0, 0, 187);">Разработка </span><span style="color: rgb(0, 119, 0);"><span class="tag"><</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">a</span><span class="attribute"> rel</span></span><span class="attribute"><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"nofollow"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">target</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"_blank"</span></span></span><span style="color: rgb(221, 0, 0);"><span class="attribute"> </span></span><span class="attribute"><span style="color: rgb(0, 0, 187);">href</span><span style="color: rgb(0, 119, 0);">=</span><span style="color: rgb(221, 0, 0);"><span class="value">"http://www.internet-technologies.ru/"</span></span><span class="value"></span></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 0, 187);">http</span><span style="color: rgb(0, 119, 0);">:</span><span style="color: rgb(255, 128, 0);">//www.internet-technologies.ru/<span class="tag"></<span class="keyword">a</span>></span> <span class="tag"></<span class="keyword">p</span>></span><br> </span><span style="color: rgb(0, 119, 0);"><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">div</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">body</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span><span style="color: rgb(0, 119, 0);"><br><span class="tag"></</span></span><span class="tag"><span style="color: rgb(0, 0, 187);"><span class="keyword">html</span></span><span class="keyword"></span><span style="color: rgb(0, 119, 0);">></span></span></span><span class="tag"></span><br></code></pre><br>
Ваш первый сайт готов. Можно открыть страничку в любом браузере и
посмотреть результат. Выглядеть она должна приблизительно так.
Кстати, index.html
– не случайно выбранное нами имя. Конечно, не обязательно, но считается
хорошим тоном главную (или ту, которая должна отображаться первой)
страницу назвать именно так. По умолчанию, любой веб-сервер страницу index.html пытается выдать браузеру при обращении к нему (необязательно, потому, что на любом веб-сервере это настраивается).
Сохранили?
Запускаем. Не получилось? Не расстраивайтесь, Вы все сделали правильно.
Просто мы вплотную столкнулись с основным свойством HTML-документа - он
может содержать только текст. Контент любого другого типа должен либо
храниться в отдельных файлах, либо генерироваться при загрузке страницы.
Поскольку наш сайт самый простой, то и решение этого самое простое. Все, что необходимо – в отдельных файлах. Качаем архив (6.8Mb), разворачиваем и запускаем mysite/index.html. Результат налицо.
Примите наши поздравления, Ваш первый сайт – готов! На этом простом примере разберем, как создать сайт.
2. Разрабатываем сайт
Для того, чтобы создать сайт самостоятельно, необходимо выполнить 2 этапа работ:
- Разработка шаблона сайта. Именно здесь необходимо определить, как сайт будет выглядеть.
- Верстка сайта. Наполняем сайт контентом и заставляем все это работать.
2.1 Разработка шаблона сайта
Как
правило, этот этап работ выполняется в достаточно мощном графическом
редакторе, например, Adobe Photoshop или CorelDraw. Фотошоп несколько
проще в освоении и использовании, а возможности его очень велики. Именно
поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной
популярностью. Воспользуемся им и мы.
Создаем в Фотошопе новый документ. Задаем имя – MySite.
Выбираем
разрешение 800 х 600, это гарантирует корректное отображение у любого
пользователя, размер по вертикали потом сможем увеличить. Выбираем
разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем
обязательно, именно они отвечают за корректное отображение веб-страницы.
Устанавливаем цвет фона D3B497 в шестнадцатеричном виде или выбираем с помощью палитры цветов.
Выбрав пункт меню «Вид» – «Направляющие» активируем отображение линеек и направляющих.
В пункте меню «Вид» - «Показать» включаем сетку
Выбираем
инструмент «Перемещение» и, щелкнув на левой или верхней линейке,
вытаскиваем вертикальные и горизонтальные направляющие
Получаем размеченную область.
В пункте меню «Вид» - «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа.
Командой «Слой» - «Новый» создаем слой с именем banner.
Используя инструмент «Прямоугольная область» выделяем нужный нам фрагмент между направляющими.
Рисуем в этой области прямоугольник со скругленными углами.
Выбираем цвет заливки и заливаем его.
Таким
же образом размечаем еще несколько областей – для логотипа, текста
приветствия, и описательного текста. Слой для текста приветствия не
заливаем.
Для каждого из залитых слоев выбираем эффект «Внешний свет», задаем направление, получаем отбрасываемую тень
На области логотипа создаем слой с тем же цветом заливки.
С помощью инструмента «Горизонтальный текст» вводим текст.
Создаем на области баннера новый слой. Открываем файл с изображением и просто перетаскиваем его на вновь созданный слой.
Аналогично заполняем изображениями и текстом остальные области
Наш макет готов!
Теперь
из него нужно вырезать фрагменты, необходимые для нашей страницы. Это –
область баннера, область логотипа, верхняя и нижняя рамки для
поясняющего текста и часть области, для фона поясняющего текста.
С помощью инструмента «Фрагмент» выбираем необходимые части изображения.
В
меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество
изображений и сохраняем, в результате получаем множество графических
фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон,
появилась папка images с изображениями. Отбираем нужные и
переименовываем.
Макет создан, необходимые фрагменты получены,
можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми
примитивными возможностями Adobe Photoshop.
2. Верстка сайта
Создаем в текстовом редакторе файл index.html.
ВАЖНО! Первой строкой файла должна быть строка вида
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">Именно она сообщает браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:
<html>
<head> «Голова» документа</head>
<body> «Тело» документа<body>
</html>
Обратите внимание, теги формируют пары – открывающий и закрывающий. Последний всегда начинается с </
Пара <html>...</html> говорит о том, что внутри содержится HTML-код.
Внутри <html>...</html>
располагаются теги, которые не отображаются в основном окне. Как
правило, они начинаются словом meta, и называются мета-тегами, а вот тег
<title>...</title> отображается в заголовке окна браузера и используется поисковыми системами.
Следом располагается пара <body>...</body> в них заключено содержимое страницы. Именно эта часть, тело страницы, отображается в окне браузера.
Существует несколько способов организации контента. Наиболее популярные из них – организация в виде таблиц (<table>...</table>) и с помощью блоков (<div>...</div>).
Формат
отображения элементов может быть задан как напрямую, с использованием
соответствующих тегов, так и с помощью таблиц стилей. Второй метод более
универсален, так как позволяет использовать стили компонентов повторно
во всем документе. Таблица стилей задается либо в внутри тега
<head>, либо в отдельном файле стили.css, ссылка на который также располагается внутри <head>.
Основными документами, в которых описываются все компоненты языка, являются спецификации - их желательно просмотреть.
Более
подробно о всех HTML-тегах, их назначение, использование таблиц стилей
(CSS) можно изучить, воспользовавшись книгами в разделе Языки разметки, так же полезные советы по организации контента, верстке, CSS приводятся в статьях.
Оказывается, проблема под названием «как сделать свой сайт» не существует вовсе! Простой одностраничный сайт готов.
На
нашей странице все определено заранее и не будет изменяться при
обращениях пользователя. Такие страницы называются статическими, и для
их описания вполне хватает средств HTML. Если же предоставляемая
пользователю информация изменяется в зависимости от каких либо факторов
или запросов, говорят, что страница содержит динамический контент
(является динамической).
Для создания таких страниц применяют языки веб-программирования. Среди таких языков наиболее широко распространены PHP, Perl и Python и под Unix-системами, а для Windows характерна разработка динамического контента с использованием средств .NET.
Это все качается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript.
2.3 Сайт на PHP
В архиве, который вы скачали есть файл index.php. Он реализует три странички нашего сайта с использованием языка PHP.
PHP – Cи-образный язык для создания динамических веб-страниц. Главное
отличие динамической страницы от статической заключается в том, что она
формируется на сервере, а уже готовый результат передается пользователю.
Попробуйте запустить в браузере index.php. Не получилось? Конечно, нет. Ведь браузер не знает, что ему делать с командами, из которых состоит файл.
Для
того, чтобы файл (скрипт PHP) выполнился, он должен быть обработан
интерпретатором языка. Такой интерпретатор обязательно есть на
веб-серверах, который и обеспечивает PHP кода. Как же посмотреть, что
изменилось?
Для отладки веб-приложений и реализации полноценного
веб-сервера на машинах под управлением Windows в сети бесплатно
распространяется пакет Denver (для вашего удобства он уже есть в архиве).
Он включает в себя веб-сервер Apache, интерпретаторы языков PHP и Perl,
базу данных MySQL и средства работы с электронной почтой.
Установка
не требует никаких усилий. Запускаем установочный файл, выполняем все
его требования. Выбираем букву виртуального диска для быстрого доступа,
создаем ярлыки. Вот и все! Denver к работе готов!
Запускается он по ярлыку Start Denwer (возможно у вас будет называть иначе). После старта, в появившийся в системе виртуальном диске (обычно Z), в папку home/test1.ru/www/ скопируйте содержимое папки mysite из архива, с которым мы работаем, кроме файла index.html. Наберите в адресной строке браузера test1.ru. Знакомая картина? А теперь пройдитесь по ссылкам сверху страницы. Работает? Отлично!
Подробнее о PHP и его использовании - в статьях и книгах.
Итак мы получили динамический трехстраничный сайт и проверили его!
Но
до сих пор мы создавали сайт своими руками от начала и до конца. В
настоящее время существуют средства облегчающие этот процесс – системы управления контентом (CMS – content management system). К наиболее популярным относятся Joomla!, Wordpress, Drupal. Для них разработаны сотни шаблонов (в случае необходимости всегда можно адаптировать один из понравившихся шаблонов сайтов) и дополнений, позволяющих получить профессионально выглядящий сайт с любой функциональностью.
Скорость
разработки сайтов, удобство, неограниченные возможности – всего лишь
малая часть преимуществ, которые CMS предоставляют вебмастеру. Особенно
приятно, что сами системы и многие дополнения к ним относятся к
свободному программному обеспечению, что снимает вопрос о том, как создать свой сайт бесплатно.
3. Публикация сайта в Интернет
Мы готовы опубликовать свой сайт в Интернет. Что для этого нужно?
3. Домен и хостинг
Во-первых,
доменное имя. Доменное имя или домен – символическое имя, под которым
Ваш сайт будет известен в сети. Получить его можно либо, купив у
регистратора, либо бесплатно, но в виде поддомена от одного из
бесплатных хостингов.
Во-вторых, хостинг. Хостинг
– услуга размещения сайта на серверах, имеющих выход в Интернет. В
настоящее время компаний, предоставляющих эту услугу огромное
количество. Остается только выбрать подходящую. К критериям выбора
относятся:
- Цена - есть как платные, так и бесплатные хостинги.
- Объем предоставляемого трафика и дискового пространства
- Поддержка тех или иных средств (PHP, MySQL, возможность развертывания CMS, наличие дополнительных скриптов и т.д.)
Чаще
всего, компании, предоставляющие хостинг, являются и регистраторами
доменов, и наоборот. Так что приобрести эти 2 услуги труда не
составляет. Оплата для большинства компаний возможна через электронные
платежные системы типа Webmoney, Яндекс.Деньги и другие.
4. Размещение сайта на сервере
Предположим,
домен и хостинг мы приобрели. Что дальше? Нам необходимо разместить все
файлы нашего сайта на сервере у хостера. Как правило, нам
предоставляется несколько вариантов для этого.
Обычно это загрузка содержимого по HTTP-протоколу, с использованием панели управления хостера или по FTP с помощью ftp-клиента.
Второй вариант намного быстрее и проще. Одним из лучших ftp-клиентов является встроенный в Total Commander.
Как
только устанавливается связь с сервером ftp (хостер обязательно сообщит
адрес, логин и пароль входа), пространство сервера станет доступным в
виде логического устройства (как и обычные диски Вашего компьютера) на
одной из двух панелей. Запускаем процесс копирования, ждем его
окончания.
Все, наш сайт опубликован в Интернете. Можете набрать в адресной строке браузера его имя и полюбоваться результатом.
Хотим
выразить Вам благодарность, что прочитали (а еще лучше, если
попробовали выполнить наши рекомендации) нашу инструкцию до конца и
надеемся, что она была для вас полезной. Мы не преследовали цель одной
статьей научить Вас делать крутые и навороченные сайты - это просто
невозможно, но хотели осветить данный процесс, чтобы в случае каких-то
неясностей вы понимали к какому из разделов это относится и могли
самостоятельно найти нужную информацию. В этом вам так же должны помочь
указанные нами ссылки.
Мы рассчитываем, что у вас возникнут
вопросы при создании своего первого сайта, а может и не первого, поэтому
милости просим на наш замечательный форум вебмастеров.
После того как Вы создали свой первый сайт и немного его
раскрутили, Вам стоит определиться с тем, каким образом будет проводится
монетизация сайта. Предлагаем вам ознакомиться с наиболее эффективными способами заработка на сайте.