Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Октябрь, 2017

Создайте новый класс (например, colortext) и установите для него параметр color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега , класс которого совпадает с именем класса, созданным выше.

Пример

Изменение цвета текста .colortext {  color: red; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан ниже.

Рис. 1. Текст, у которого фрагмент выделен с помощью цвета

Класс colortext, созданный в данном примере, можно использовать неоднократно, выделяя цветом текст в нужных местах документа.

Что такое домен и хостинг

?> Хостинг это виртуальный сервер на котором размещается содержимое вашего сайта. По сути это место для сайта на стороннем компьютере, который круглосуточно подсоединен к интернету. Почему же виртуальный, просто для каждого сайта не возможно поставить отдельный компьютер с уникальным адресом. Поэтому на одном сервере могут хранится и работать сотни сайтов. А специальная серверная программа делит один жесткий диск на множество маленьких виртуальных дисков, домиков для ваших сайтов. Принцип работы сайтов в интернете Принцип работы довольно прост. Когда вы написали сайт или сделали любой другой документ, то он лежит у вас на компьютере и доступ к этим документам только через ваш компьютер. Но если к компьютеру подсоединить еще компьютеры (например в офисе) то к вашим файлам будет доступ у всех этих компьютеров. Но чтобы сайт стал доступен всему миру, его файлы нужно разместить на отдельном сервере, который круглосуточно соединён с интернетом. Это соединение имеет свой адрес и любой компьютер набрав номер этого соединения сможет в браузере увидеть содержимое сайта.

Для доступа к виртуальному серверу хостинг компании предоставляют вам веб интерфейс где можно управлять всеми папками и файлами вашего сайта, изменять, загружать, скачивать. Так же есть специальные программы FTP клиенты, которые упрощают процесс работы с файлами сайта.

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

Но кроме размещения на хостинге, сайту еще необходимо свое имя. По сути компьютеры обмениваются между собой информацией по уникальным IP адресам, которые обычно выглядит примерно так » 192.168.0.100″. Но эти цифры человеку ни о чем не говорят и по этому для сайтов были созданы человеко понятные имена, которые присваиваются каждому сайту (прикрепляются к нему) и сайт становится доступен по этому доменному имени. Когда вы покупаете домен, то в настройках домена указываете цифровой адрес по которому доступен ваш сайт. После этого набирая в браузере имя сайта вам автоматически загрузится содержимое запроса, которое лежит по тому цифровому адресу, который вы указали.

Для удобства доменные имена разделены на уровни. Доменное имя первого уровня обычно состоит из двух трех букв, и означает регион за которым оно закреплено. Например для нашей страну это зона «ru» и «рф», для других стран свои домены первого уровня. Так же есть и международные домены, например «com». Домены второго уровня исходят из первого, например domen.ru, слово domen вложено в зону ru.

Так же есть домены третьего уровня, например forum.domen.ru, это означает что домен forum вложен в домен domen, который лежит в зоне ru. Регистрировать и прикреплять к своему сайту можно имя в любой зоне по всему миру, но цены за годовую аренду доменного имени разные. Так же часто бесплатно вам предлагают домены третьего уровня всякие сирвисы для создания сайтов, но тут нужно понимать что домен третьего уровня вложен в домен второго уровня и его нельзя забрать, так как он исходит от домена второго уровня. Поэтому домен третьего уровня не совсем самостоятельный сайт и привязан к родителю.

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

Думаю вам стало более менее понятно что такое домен и хостинг. Для сайта нужно имя, которое третьего уровня дают в пользование всякие сервисы и конструкторы сайтов. Но домены третьего уровня часто не принимают во всякие сервисы, где на размещении рекламы можно заработать деньги. Поэтому лучше сразу купить себе имя, которое прикрепить к сайту, и продлять его раз в год, цена в среднем 100-300рублей за год. Доменное имя сайта это все, так как по этому имени люди находят сайт, его содержимое обрабатывают поисковые роботы. Если вы можете управлять своим доменом, то вы всегда сможете забрать сайт и переехать на новый хостинг, и при этом изменив IP адрес в настройках домена ваш сайт будет снова работать и открываться по этому же имени.

Для того чтобы начать делать сайт у себя на компьютере или планшете, телефоне, понадобится локальный веб сервер. Локальный веб сервер это программа иметируюшая хостинг сервер на вашем устройстве. Для опиронной системы windows выпущено множество таких программ, и самая извесная и бесплатная это Denver. Наберите в поиске «локальный веб сервер денвер» и вы тут же его найдете и скачаете. скриншот вебсервера для андройд, Для платформы андроид тоже есть множество таких программ. Я обладатель планшета на андроиде, и делаю все с него, пользуюсь сейчас программой веб сервер «Palapa Web sarver». После установки программы на вашем устройстве появится папка с названием www, localhost, rws, или еще с каким либо названием. Это корневая папка для вашего сайта. Теперь запустив сервер вы сможете открыть в браузере, набрав локальный адрес своего сайта, который нужно поместить в эту папку.

Чтобы проверить работает ли сервер, создайте в этой папке текстовый фаил с названием index.html, напишите туда что нибуть. Затем в браузере наберите адрес, у вас там будет свой адрес и выглядеть он будет примерно так. Если это денвер, то http://localhost, или так, http://192.168.0.100:8080, в общем смотрите в программе какой адрес набрать надо. Если в браузере откроется текс, который вы написали в index.html, то значит все в порядке и первая главная страничка сайта у вас работает. Можете для теста скачать готовый шаблон сайта html+css и посмотреть на него, пощупать. С веб сервером мы разобрались, идем дальше.

Текстовый редактор

текстовый редактор, которым я пользуюсь сейчас на планшете Так же для работы над кодом страниц нужен хороший и удобный текстовый редактор, и желательно с подсветкой кода. Подсветка кода очень помогает, когда открываешь текстовый фаил, то обычно код выделен разным цветом и а текс статьи просто черный и сразу видно где что написано, где какие теги стоят. Текстовых редакторов очень много, а основной для windows это Notepad++, а для андроид я пользуюсь Jota text Editor.

Фото редактор

Дальше для работы над фото материалами и картинками понадобится фоторедактор. Здесь наверное у каждого есть свой удобный фоторектор, к которому привыкли, поэтому что то конкретное писать не буду. Лиж бы редактор мог изменять размер фото, обрезать, и вставлять фото друг в друга, ну и мпнять оттенки и прочее. Если хотите размещать на сайте еще и ведеоролики, то тоже нужен ведеоредактор, хотя можно загружать ролики на ютюб и вставлять код плеера на сайт.

FTR клиент

скриншот моего клиента для работы с удаленными файлами сайта Так же для быстрой выгрузки файлов уже на хостинг понадобится FTR клиент. Это специальная программа, которая соеденяется с корневой папкой хостинг сервера, и вы можете мгновенно выгружать, а так же скачивать и изменять файлы своего сайта на хостинге. Хостинг вы наверное уже знаете что такое, это место под сайт откуда он доступен всему интернету. Для windows такой самый известный FTR клиент это Filezilla. Эту программу нужно скачать и установить, далее ввести данные для доступа на сервер и готово. Для андроид и других операционных систем тоже множество таких программ. В интернете полно инструкций по использованию этих программ, и сли не понятно куда вводить пароль логин, или адрес сервера, то эту информацию нужно найти, так же и на этом сайте я буду делать подобные статьи.

Вот наверно и все что надо для начала, текстовый редактор, локальный веб сервер, фото редактор, и FTR клиент. Далее, в следующей статье опишу как и из чего состоит html страница и покажу на примере как создать шаблон и начать писать сайт.

css таблица стилей В предыдущей статье я рассказал из чего состоит html страница, зачем нужны и что означают теги, в которые заключена информация на странице. Подробнее смотрите статьи в разделе «Делаем сайт». Но вы наверно уже знаете как устроена страница и знаете что все тексты, заголовки, и элементы заключены в теги. Теперь разберем как задавать этим тегам (контейнерам) размеры, фон, цвет текста, размеры и позиционирование на странице. Ниже снова пример уже знакомой по прошлой статье шаблонной страницы.

В этой html странице есть запись , которая указывает что стили для отображения контейнеров находятся в файле style.css, в нем мы будем задавать красоту этой странице. Заголовок страницы,

Заголовок сайта

Краткое описание, подзаголовок сайта

  • раздел1
  • раздел2
  • раздел3
  • раздел4

боковая колонка, здесь можно размещать например ссылки на последние статьи, сделать фото-галерею, вставить рекламу и прочее.

заголовок

Здесь размещается текст статьи, ниже для примера код для вставки в статью различных изображений. описание, что изображено на картинке, не видно пользователям заголовок описание к изображению Подвал сайта, здесь можно разместить информацию о статистике, дополнительный список разделов, или еще что.

Содержание файла style.css

Чтобы быстро менять дизайн сайта, стили для отображения выносят в отдельный файл (текстовый документ) в котором прописывают стили CSS. Этот файл можно располагать где угодно, хоть в корневой папке сайта, хоть в отдельной папке, главное правильный путь до файла. Ниже содержимое такого файла.

body { margin-left: auto;margin-right: auto; width: 930px; font-size: 12px; color: #363636; font-family: Arial; line-height: 1.2; background:url(images/fon2.jpg); } a:link { color: #0000ff ;} a:visited { color: #0000ff ; } a:hover { color: #0000ff;} container { width: 930px; padding: 0px ; margin: 0px; background-color: #fff; border: 2px solid #778899;} header { width:930px; float:left; padding: 0px ; margin: 0px ; background:url(images/fon2222222.jpg) ; border-bottom: 4px solid #778899; } header h1 { padding: 20px; margin: 0px; color: #B03060;} header h2 { text-align:left; padding: 20px; margin: 0px; color: #B03060;} header a {color: #0000ff; } nav {width: 910px; float:left; margin: 0px; padding: 10px; border-radius: 10px; } li {float:left;margin: 1px; padding: 6px; background-color: #F8F8FF; border-radius: 6px; } ul {float:left; list-style-type: none; margin: 0px; padding: 0px; } ul a { font-size: 16px; color: #0000ff;} .saitbar { padding: 10px ;margin: 5px; margin-top:10px; width:220px ; float:right; color: #778899; background-color: #fff ; border-radius: 10px;} .tekstblok {width:640px; padding: 15px ; margin-bottom: 10px; margin-top: 10px; float:left; background-color: #fff ; border-radius: 0px 10px 10px 0px; border: 2px solid #dcdcdc; } .tekstblok h1, h2, h3 { text-align:center; color: #B03060;} .figure_staty { margin: 10px 10px 0px 0px; padding-bottom: 15px ; background-color: #fff ; } figcaption { font-size: 10px; color: #778899;} footer {width:890px; float:left; padding: 20px ; margin: 0px ; color: #fff; background-color: #778899;border-bottom: 4px solid #B03060;}

Теперь разберем все записи в файле stile.css по порядку

body { margin-left: auto;margin-right: auto; width: 930px; font-size: 12px; color: #363636; font-family: Arial; line-height: 1.2; background:url(images/fon2.jpg); } Первая запись для контейнера body, здесь указываются стили для отображения всего html документа, то есть всей страницы. В скобках первая запись margin-left: auto;margin-right: auto; width: 930px; которая указывает что ширина страницы 930 пикселей, а margin-left: auto; и margin-right: auto; это отступы от левой и правой части экрана, тоесть выравнивание страницы по середине экрана. Далее идет запись font-size: 12px; color: #363636; она означает что размер текста 12 пикселей, а его цвет #363636. По умолчанию, если ничего не писать, то цвет текста #000000, то есть черный, а размер текста зависит от установленного по умолчанию в браузерах. Вообще в браузерах по умолчанию пприменяются свои стили, если не указаны стили к странице, то ссылки подчеркнуты, выделяются синим цветом, текст и контейнеры прижимаются к левому краю и т.д. Запись font-family: Arial; line-height: 1.2; означает что шрифт текста на странице Arial , а отступы между строчками 1.2 , то есть 1.2раза больше чем высота текста. Запись background:url(images/fon2.jpg); указывает фон страницы, в скобках указан путь до фоновой картинки, которая как видно лежит в папке images и называется fon2.jpg Далее записаны строчки, в которых записаны стили для отображения стилей для ссылок на странице. a:link { color: #0000ff ;} a:visited { color: #0000ff ; } a:hover { color: #0000ff;} Запись a:link задает цвет ссылки, a:visited задает цвет посещенной ссылки, a:hover задает цвет ссылки при наведении курсора мышки и при нажатии. Цвет здесь #0000ff для всех трех значений синий, но можно поставить любой цвет, назначить размер текста, фон, и пр. Далее идет контейнер для всего содержимого страницы container { width: 930px; padding: 0px ; margin: 0px; background-color: #fff; border: 2px solid #778899;} Ширина таже что и для тела body 930px, запись padding: 0px ; margin: 0px; означает что отступы внешние и внутренние равны нулю. Запись background-color: #fff; border: 2px solid #778899; означает цвет фона #fff белый, а бордюр шириной 2 пикселя и цветом #778899.

Думаю смысла нет описывать все контейнеры так как смысл принцип и так понятен. Опишу в общем некоторые моменты. Как вы наверное догадались если писать стиль для контейнера, то просто пишем в таблице style.css его название и в скобках указываем все что нам нужно. Если нужно для одного и того же названия блока использовать разные стили, то блоку можно присвоить класс. Например означает что для контейнера aside в таблице стилей указан стиль .saitbar . Когда указывается стиль отображения для блока, то он начинается с точки.

Так же стили можно задавать еще так, например вы создали на странице новый контейнер , эта запись указывает что идентификатор для стилей этого контейнера box, в таблице стилей он должен начинаться с символа решотки #box { }, и в скобках так же к этому контейнеру прописываются стили.

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