![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Структура страницы сайта.Пара тегов < 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> Правда впечетляет! А ведь, это самый маленький блок страницы. Так что стоит немного повозиться с решением проблемы.
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
с ранним добрым утром!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 22-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |