Поточний час:
Сьогодні 23 липня, понеділок 2018 рік
Zura-Blog 3 роки 7 місяців 4 дня

Ваш ip адрес:54.224.103.239

Доброго дня!
Ви обновили сторінку в 18 : 05

Статистика

Кількість публікацій на блозі: 376
Кількість коментарів на блозі: 107
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Продолжим рассматривать тему “Как создаем сайт на html” но уже на другой странице.

Что мы рассмотрим: сначала ссылки, затем списки (сделаем чтобы наши ссылки размещались красиво в списке), а также покажу как сделать чтобы ссылки на сайте были одного цвета, при наведении курсора цвет менялся на другой, и при посещении ресурса цвет ссылки должен также измениться на еще другой, чтобы подсказывать нам что мы уже посещали этот ресурс.

Начинаем, а будет точнее сказать продолжаем, первым делом открываем файл “href” который расположен в папке MYSITE с помощью текстового редактора. Далее начинаем создавать ссылки на странице.

Как создавать ссылки более подробно описано в публикациях “Все о ссылках на HTML». Вы можите ознакомиться с этой публикацией клацнув по  ссылке ниже

Напомню создания ссылки начинаются с тега “а” далее добавляем атрибут “href =” после чего адрес ссылки в кавычках. И если желаем, чтобы страница открывалась в новой вкладке добавляем target = “_blank”> закрываем и перед закрытием тега “а” (</a>) прописываем название ссылки которую мы увидим на странице.

<a href= “http://google.ua” target= “_blank”> GOOGLE </a> ⇒ если Название не прописать, в данном случае у нас название “GOOGLE” то ссылка не будет работать, потому что названия “GOOGLE” не будет находится на странице.

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

Какие бывают виды сслок вы можите прочитать перейдя на статью “Все о ссылках на HTML».   

Еще будет полезной для вас интересная публикация, в которой говорится о том как создать для себя “Страницу с ссылками” рекомендую создайте себе такую, на ней можно будет разместить различные полезные ссылки, пригодится вам.

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

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

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

А странице все сказано, создать себе такую проще простого, далее разговор пойдет  о том, как создать список, подробнее о видах списков вы можите перейти на публикацию “Все о списках в HTML” по ссылке.

Списки бывают разных видов, о них на Zura–Dlog написан пост, мне понравился один из списков, в котором ниже ссылки на сайты, должна быть вказана краткая информация о чем етот ресурс, етот вид я взял за основу.

Далее как создать такой список

Вначале вставляем ссылку на сайт, перед кодом етой ссылки добавляем тег <dt> и после кода ссылки закрываем тег </ dt>  а внизу между тегами <dd> </ dd> прописываем короткое объяснения.

Пример кода ниже

<dt> <a href= “http://google.ua” target= “_blank”> GOOGLE </a> </ dt>

<dd> гугл это поисковая система</ dd>

<dt> <a href = “http://yandex.ua” target = “_blank”> yandex </a> </ dt> <dd> яндекс это поисковая система </ dd>

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

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

Для такого ефекта прийдется уже подключить каскадную таблицу стилей СSS. Как для контактной формы нужно вначале создать файл в папке с расширением РНР, и затем прописать ссылку, чтобы соединить файл со страницей.

Так и для того чтобы подключить каскадную таблицу стилей СSS страницу, их нужно соединить, прописав код.

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

Для етого прописываем следующий код что бы подключить стили СSS

страницу соединяем кодом <style type = “text / css”> после тега <title> </ title> потом прописываем правила.

Можно отдельно в корневой папке сайта, создать в начале папку   СSS (можите другое название папки придумать) далее создать файл с расширением СSS, и на главной странице, обычно ето index.html прописать линк со ссылкой на файл, чтобы соеденить файл  СSS с сайтом, и подключить стили  СSS.

<link href= “css/style.css” rel= “stylesheet” type= “text/css” >.

В обоих случаях мы соединим наши html-сториницы с каскадными таблицами стилей.

В папке MYSITE создаем папку с названием СSS, открываем папку а в ней создаем файл с расширением css. Название файла даем style.css после хранения в нас имеет появиться файл. CSS. CSS

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

Продолжение 2-часть

user_97


Рамки ето интересный элемент, и на усвоение как их создавать я бы советовал обратить внимание. Рамки могут достаточно красиво украшать ваш сайт.

Собственно как можно создать рамку, можно или с помощью тега <table> </ table>. Или добавить элементы в файл CSS.

На данный момент я решил продолжать создавать сайт вместе с CSS (каскадная таблица стилей). Кстати в сочетании html и CSS можно создавать достаточно современные сайты. В частности сайт-визитку можно вполне создать в сочетании html и CSS 

Как создается рамка. Для начала нам необходимо добавить индетификатор который должен указать в какое место мы будем размещать рамку.

На моем тестовом сайте, который являэтся гидом для етой публикации, где загловок стоить тег <p> Здесь собраны все необходимые ссылки на сайты, которые пригодятся начинающим, и закрытый тег </p>Добавляем к тегу <p> индентификатор, <p id= “header” >.

Как должен выглядеть код

<p id= “header” >Здесь собраны все необходимые ссылки на сайты, которые пригодятся начинающим, и закрытый тег</p>

А в созданном файле CSS нам нужно прописать правило чтобы рамка появилась в браузере. Это правило должно отвечать за то, чтобы рамка появилась в  заголовке. Правило состоит из трех элементов, это размер рамки, стиль и цвет. Пропишем новое правило, назовем “header” название должно быть такое же, которое мы указали в индетификаторе.

Прописуєм #header{

}  и дужки где внутри мы будим добавлять правила, которые будут касаться той части сайта, на которую будет указывать индетификатор “header” В скобках прописываем свойства это:

ширина рамки  border-width:2px;

⇒ иное свойство это стиль рамки border-style:solid; кстати стилей бывает несколько, я выбрал “solid”

⇒ разумеется  укажем и цвет рамки border-color:#FF3300;

не забываем в конце свойства ставить точку с запятой, (существует много программ которые помогут определить необходимый код цвета) публикация “Определяем код цвета html программе HTML Colors 2000” ви можите найти в категории “Все о HTML”  перейдя на страницу.

Код рамки ( ширину,стиль, цвет можите указать свой)

#header{ border-width:2px; border-style:solid; border-color:#FF3300; }

Откроем или перезапустим страницу, и у нас должна появиться рамка.

Если мы укажем еще  “border-width” это будет значит для браузера, что он должен показать рамку для всех четырех сторон..

html4

Если мы добавим к селектору  #header  правило width:550px; то у нас размер рамки станет меньше 550px а сама рамка переместится влево, текст в рамке получится в три строки.

urok_1

⇑width:550px;

Если мы добавим к селектору  #header еще одно правило text-align:center; тогда текст в рамке выровняется по центру.

urok_2

⇑text-align:center;

Если мы добавим к селектору  #header правило  margin:auto тогда текст в рамке и сама рамка переместится центр.

urok_3

⇑margin:auto;

#header{ color:#c32017; border-width:2px; border-style:solid; border-color:#FF3300; width:550px; text-align:center; margin:auto }

Если мы добавим  “top” и все свойства, а это ширина рамки, стиль, цвет.

border- top–width 

border- top-style

border- top-color ⇒ то в нас появиться горизонтальна линия. Ну вот сколько всяких полезных вещей можно создать, да и вообще очень полезно зайти на страницу, там прописаны все правила по стилях  CSS, и попробывать добавлять к коду селектора разные правила, а затем посмотреть на результат.

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

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

Маркеры бывают разных видов, в html они создаются с помощью атрибута “type”, который прилагается к тегу “ul” либо “ol” более подробно о видах списков можно посмотреть перейдя по публикацией “Все о списках в HTML”

Если делать списки через CSS тогда атрибут “type” нам не нужен..

В файле  style.css создадим новый селектор ul{ и прописываем следующее правило list-style-type: после двоеточий можно выбрать вариант для списка. Вариантов бывает очень много, но я собираюсь добавить маркер в виде изображения, поэтому вместо “type” пропишу слово “image” (указывает правило что в маркере будет картинка), выбираем картину, разумеется что то небольшое, иконку например, у меня это маленькая стрелочка, можно выбрать любую, в общем-то существует хороший сервер по разным картинках, иконках, ссылки. 

list-style-image:⇒ дальше остается указать где находится картина–иконка дописываем “url” скобки и в скобках путь, сначала указываем где лежит файл CSS а затем где лежит папка с картинками url (../images/row.png).

На тестовом сайте по которому  создаю я ориентируюсь я выбрал в список в “Правой колонке” в етой колонке будут указаны ссылки ето (поисковые системы, сайты со счетчиками, с валидацией страниц, а также по тестированию сайта).

прописую идентификатор на странице html

<h2><p id=”header”>Права колонка</p></h2> <ul type= circle > <li><a href=”http://google.ua”target=”_blank”>GOOGLE</a></li> <li><a href=”http://yandex.ua”target=”_blank”>yandex</a></li> </ul>

прописуюправила  в файле style.css

ul{ list-style-image:url(../images/row.png); }

 правило указывающее что все списки с атрибутом “ul” на этой странице должны открываться с изображением – иконкой.

Затем пропишу еще одно правило, чтобы список где будут  ссылки без  указаний, взять в рамку.

Для етого нужно добавитья в файл style.css новый селектор, і создать новое правило. 

ul li{ border:1px solid }  

⇒ отобразятся  рамки вокруг каждой ссылки.

Screenshot_7

Когда откроем страницу в браузере должен появиться такой результат

 ⇒  три красные рамки.

зеленая стрелка ⇒ указывает на маркер (изображение стрелка)..

Такие же действия размещаются у каждой колонки, собственно на этой странице я решил разделить ссылки в три строки, в каждой строки я также добавлю маркер с изображением, и рамки. Рамки на каждой колонке будут отличаться по цвету. Хто из вас заметит ошибку в коде <ul type= circle >, не обращайте внимания, я специально оставил атрибут з значенням “type= circle” чтобы проверить какой из маркеров будет отображаться, или кружочки или изображения.

Как видим при добавлении правила CSS несмотря что на странице в коде прописано значение “circle” все равно в браузере появляется изображение (стрелка) а не кружочки.

Почему вопрос, потому что когда мы подключаем к странице каскадную таблицу стилей, после чего браузер в первую очередь будет ориентироваться на те значения которые прописаны в файле style.css. А те значения которые остались в коде страницы игнорируются.

Конечно что страница будет открываться без проблем, но ошибки лучше производить, сайт после того как будет создан стоит проверить на ошибки. Для этого в сети есть много ресурсов, которые проверят ваш сайт на ошибки.

Продолжение 3-часть

user_97


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

Для этой задачи мы используем псевдоселекторы, которые относятся к CSS.

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

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

Обычное состояние ссылки пишется “link” а дальше выбираем и указываем цвет состояния.

a:link{ color:#FF6347; }

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

a:visited{ color:#FFFAFA; }

Следующий, нужно выствить такое положение когда на ссылку наведен курсор и цвет ссылки меняется при наведении курсора мыши, для етого  прописываем правило “hover” после него указываем цвет состояния который должен отображаться при наведении курсора мыши на ссылку

a:hover{ color:#00FF00; }

можно еще одно сделать состояние в момент щелчка клавиши мыши пишем active и потом цвет 

a:active{ color:#EE82EE; }

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

a:link{ color:#FF6347; } a:visited{ color:#FFFAFA; } a:hover{ color:#00FF00; } a:active{ color:#EE82EE; }

Таким образом мы изменили четыре состояния ссылки с помощью псевдоселекторов.

Наступний розділ буде стосуватись фонових зображень.

Фоновые изображения очень часто используются в разработке любого вида сайта. Они значительно могут украсить сайт, поэтому им следует уделять особое внимание. Фоновые изображения создаются такими способами, или указав html-код цвета, или прописывая ссылку на изображение. По умолчанию фоновое изображение прозрачное, и на сайте оно отображается белым цветом.

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

У кого-то из вас в файле может быть уже прописан селектор body, поэтому смотрим если данный селектор присутствует, тогда добавляем в селектор новое правило. Которое предоставит браузера команду чтобы фоновым цветом отражалось изображения. Обычно перед добавлением правила в селектор body нам необходимо разместить файл изображения в нашу папку с изображениями.

img2

⇑правило background-image:

Затем прописываем правило background-image: далее ссылки url и в скобках указываем путь.

body{ background-image:url(../images/70408.jpg); }

../⇒ две точки означают что мы должны выйти из папки css в папку images

images⇒  папка в которой находится графический файл

70408.jpg⇒ наше фото (графический файл)

Если мы хочите указать не изображение а просто цвет тогда прописываем правило background-color: и затем указываем номер цвета

body{ background-color:#9999FF; }

#9999FF⇒ колір.

img1

⇑background-color

Элемент background я прописал  в тестовом сайте в созданную  спецальных рамку, о которой шла речь в начале раздела, там  у меня находятся  “Интересные ссылки”.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *