Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

июнь 2021
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30


Чувашия-это моя Россия

Структура страницы сайта.

Пара тегов < html>< /html>; начинают и заканчивают страницу сайта. Они составляют оболочку одной страницы и все остальные теги находятся внутри них. В атрибуте href="" элемента link у Вас будет стоять файл "index.css", который находится в папке "stylesheet", что в корневом каталоге папки "Сайт". Теперь не трудно догадаться, что элемент link осуществляет связь в данный момент на страничке сайта между файлом "index.html" и файлом "index.css". И элемент link находится между тегами < head>< /head>, что по-английски значит голова; вся информция( в дальнейшем здесь появятся много других строк с мета тегами) находящаяся между тегами < head>< /head> не отображается. Видим пару тегов < title>< /title>, между которыми разместите название Вашей странички сайта. Эта пара тегов обазательна для написания и необходима как один из параметров для идентификации( распознования) Вашего сайта роботами поисковиков.

Давай посмотрим теперь в таком виде как страница сайта будет выглядеть. Для этого нажмите "Файл", далее "сохранить". Откройте Total Commander, войдите в папку "Сайт", кликните правой кнопкой мыши на файл "index.html", потом "Открыть с помощью", и на любой "браузер". И браузер откроет белое окно, чистое белое окно, странно, правда? Сколько строчек написали и все чисто, ничего не отображается на странице сайта. Может там ничего нет? Проверим. Наведите правой кнопкой мыши в любое место белого окна и нажмите, далее на "Исходный код" и у Вас появятся те же строки, что были когда писали и создавали страницу сайта. Они никуда не исчезли, не пропали, но не отображаются. Они работают правильно, в данном случае - они нам не должны быть видны.

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

Вот на базе такого каркаса сайта начнем создавать сайт своими руками:

              
                  < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                  < html>
                  < head>
                  < title>Демо.< /title>
                  < link rel="stylesheet" href="stylesheet/.css" type="text/css">
                  < /head>
                  < body>
                  < div id="nav">< /div>
                  < table>
                  < tr>
                  < td id="tdleft">
                  < /td>
                  < td id="tdcenter">
                  < /td>
                  < td id="tdright">
                  < /td>
                  < /tr>
                  < /table>
                  < div id="copy">< /div>
                  < /body>
                  < /html>
                  
                  
            Тут создаем блочную структуру сайта на основе таблицы( для простоты понимания
            и показа, чтобы сохранять суть каркаса), потом Вы легко и просто эти строки 
            замените на < div>< /div> и картина станет универсальной и законченной.

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

На предыдущих страницах сайта легко и просто научились создавать сайт не зная основ. Вы ничего не знали ни о HTML, CSS, JavaScript и PHP. Теперь постараемся не зная основ HTML разметки и PHP-кодов освоить оформление страниц сайта и осваивать азы сайтостроения.

Дальше не будут никакие супер закрученные заморочки, нет движков и сотни готовых шаблонов. Просто и изящно поступим. Написание и оформление страницы сайта превратится приятное творчество. Легко и просто создадим свой собственный сайт. Вы сможете десятками и сотнями страниц писать и закидывать на свой сайт. Мы с Вами уберем рутину - пусть я мучился и корпел, пока не понял и дошел до такого варианта создания сайта.

Для начала у нас с Вами есть базовая структура страницы ( мой вариант, тут можно идти по-разному пути), то есть имеется головная часть сайта, где размещаются необходимые данные для обработки сервером страницы сайта, верхний колонтитул на основе блочного элемента и тегов

                  < div id="nav">< /div>

имеются три колонки( левая-sidebar1, центральная - content, правая-sidebar2), основанная на табулировании страницы:

                  < table>
                  < tr>
                  < div id="nav">< /div>
                  < td id="tdleft">
                  < /td>
                  < td id="tdcenter">
                  < /td>
                  < td id="tdright">
                  < /td>
                  < /tr>

и нижний колонтитул так называемый подвал( подошва,нога) созданный с помощью блочных элементов и тегов 

                  < div id="copy">< /div>.

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

Забегая вперед скажу, что мы добиваемся создавать сайт блочно. Такими блоками будут всего-то лишь одна строка вида: < ?php include($_SERVER["DOCUMENT_ROOT"]."/osrraiw/eeck_kdd.html"); ?> или аналогичная, но всего-то лишь одна строка. Но в этой маленькой строке будет содержаться информация огромнейшая посмотрите, например:

                  < style>
                  #zakladki {
	                 background-color: #EEE;
	                 text-shadow: #0CF;
	                 width: 22%;
	                 font-weight: 500;
	                 text-transform: uppercase;
	                 text-align: center;
	                 margin: 2px auto 10px 40%;
	                 padding: 5px 2px;
	                 border-radius: 5px;
	                     }
                #zakladki a {
	                 text-decoration: blink;
                           }
                < /style>
                     < div id="zakladki">< a rel="sidebar" 
                     onclick="window.external.AddFavorite(location.href,''); 
                     return false;" href="https://seosait21.ru/strojsait/novichok.html" 
                     title="Как создать сайт?">
                     добавьте в закладки< /a>< /div>
                < style>
                     #g11 {
	                 margin: 5px auto 5px 150px;
	                         }
                < /style>
                
                < div id="g11">
                < div class="g-plusone" data-annotation="inline" data-width="300">
                < /div>< /div>
                
                < script type="text/javascript">
                         window.___gcfg = {lang: 'ru'};
                          (function() {
                     var po = document.createElement('script'); 
                     po.type = 'text/javascript'; po.async = true;
                     po.src = 'httpss://apis.google.com/js/plusone.js';
                     var s = document.getElementsByTagName('script')[0]; 
                     s.parentNode.insertBefore(po, s);
                             })();
                < /script>
                     < br />
                     < h5 align="center">< a href="../testnalubov.html" 
                     title="Переход на главную страницу.">
                     < i>Немного истории.< /i>< /a>< /h5>
                     < h5 align="center">
                     < a href="https://seosait21.ru/kakbrositkurit.html" 
                     title="Переход на главную страницу.">
                     < i>Сигареты больше не раздражают. И пить не хочется.< /i>
                     < /a>
                     < /h5>
                 < style>
                     #kuki {
	                 display: inline-block;
	                 width: 95%;
	                 height: 10%;
	                 background-color: #09C;
	                 margin: 20px 10px;
                     background: -webkit-linear-gradient(bottom, 
                                rgba(0,90,180,0) 0%,rgba(0,90,180,.3) 35%,rgba(0,90,180,0) 100%);
                     background: -moz-linear-gradient(bottom, 
                                rgba(0,90,180,0) 0%,rgba(0,90,180,.3) 35%,rgba(0,90,180,0) 100%);
                     background: -ms-linear-gradient(bottom, 
                                rgba(0,90,180,0) 0%,rgba(0,90,180,.3) 35%,rgba(0,90,180,0) 100%);
                     background: -o-linear-gradient(bottom, 
                                rgba(0,90,180,0) 0%,rgba(0,90,180,.3) 35%,rgba(0,90,180,0) 100%);
                     background: linear-gradient(bottom, 
                                rgba(0,90,180,0) 0%,rgba(0,90,180,.3) 35%,rgba(0,90,180,0) 100%);
	                 padding: 5px 10px;	
                     font: 100 12px Verdana;
                     list-style-type: none;
                     float: center;
                              }
                     #kuki a{
                     text-decoration: none;
                     margin: 3px 5px;
                              }
                     #kuki a:link {
	                 color: #636;
                           } 
                     #kuki a:visited{
                     color: #A7A;
                           }
                     #kuki a:hover{
                     background: #DDD;  
                     color: #636;
                     padding: 3px 2px;
                             }
                 < /style>
                     < div id="kuki">
                     < a href="..">Язык HTML.
                     < a href="..">Язык CSS.
                     < a href="..">Язык WEB-дизайна.
                     < a href="..">Язык JavaScript.
                     < a href="..">Язык PHP.
                     < a href="..">Язык jQuery.
                     < /div>
                     < div align="center" >
                     < h4 class="h211">Кнопки соцсетей здесь< br />просто кликни:< /h4>
                < script type="text/javascript">(function() {
                     if (window.pluso) 
                     if (typeof window.pluso.start == "function") return;
                     var d = document, s = d.createElement('script'), 
                     g = 'getElementsByTagName';
                     s.type = 'text/javascript'; 
                     s.charset='UTF-8'; s.async = true;
                     s.src = ('httpss:' == window.location.protocol ? 
                     'httpss' : 'https')  + '://share.pluso.ru/pluso-like.js';
                     var h=d[g]('head')[0] || d[g]('body')[0];
                     h.appendChild(s);
                           })()
               < /script>
                     < div class="pluso" data-background="transparent"..">
                     < /div>
                     < div id="vk_comments">< /div>
               < script type="text/javascript">
                     VK.Widgets.Comments("vk_comments", 
                     {limit: 10, width: "350", attach: "*"});
               < /script>
                     < /div>
                     < /div>

Правда впечетляет! А ведь, это самый маленький блок страницы. Так что стоит немного повозиться с решением проблемы.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: