Продовжую розглядати тему  “Як створюємо сайт на html”  але вже на цій сторінці. Взагалі яка моя мета цих матеріалів, це на практиці “попаритись” з різними атрибутами і тегами мови розмітки тексту “html”. А заодно записуючи все, викласти корисну інформацію стосовного деяких елементів, які часто застосовують в своїх проектах. 

Що далі розгляну: спочатку посилання, посилання самий важливий елемент в розробці сайтів, оскільки за рахунок посилань ми звязуємо всі сторінки між собою, а також і графічні файли, картинки, відео і аудіо матеріали  додаються до сторінки завдяки посиланням, також файли з іншими розширеннями рнр, css, javascript і т.д, без прописування посилань вони також не будуть працювати, оскільки для сторінки вони не будуть існувати.

Також посилання звязують вашу сторінку і з іншими сайтами, потім йдуть списки, я вирішив зробити за допомогою списків такий елемент, щоб всі посилання на корисні сайти, знаходились на html — сторінці красиво в списку.

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

Починаемо, або точніше сказати продовжуємо, першим ділом відкриваємо файл “href.html” в мене файл знаходиться в папці “MYSITE”,  за допомогою хорошого текстового редактора Notepad++,  починаємо створювати посилання на сторінці, а потім додамо теги і атрибути, щоб посиланя відображались на сторінці, за списком.

Як створювати посилання, більш описано в публікаціях Все про посилання на HTML. Ви можите ознайомитись з цією публікацією, перейшовши за  посиланням вище, клацнувши лівою клаішою миші, публікація відкриється в іншій вкладці.

На Zura — Blog всі посилання на публікації відкриваються в різних вкладках, оскільки я вважаю що так комфортніше буде для відвідувачів.

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

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

Потім звичайно що все первіряємо, підводимо курсор  на назву посилання, далі клацаємо лівою клавішою миші, в браузері має відкритись нова вкладка (завдяки атрибуту target=”_blank” — сторінка на яку виставлене посилання, буде відкриватись в іншій вкладці) з сторінкою, на котру ми вказали в коді додаючи посилання на неї.

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

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

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

З часом реєструючись в різних каталогах, на форумах, кількість таких посилань збільшуєтья, зберігати їх всіх  в закладках браузера як для мене не дуже комфортно, особливо коли таких набирається більше ста, просто можливо і не реально все в закладках зберігати.

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

Тоді така сторінка  стане вам в нагоді, зберігати її можна як на жорсткому диску компютера, так і на флешнакопичувачі.

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

Що ще вказати на рахунок посилань, таку деталь, як легше додавати посилання на інші ресурси, робимо звичайні простесенькі дії, копіюємо вже існючий рядок з посиланням, і вставляємо цей рядок нижче існуючого посилання, таким чином нам не потрібно в іншому рядку ще раз прописувати теги і атрибути, потім тільки міняємо адресу ресурсу, і назву.

Звідки береться адреса сайту, на сторінці сайту в верхній панелі завжди відображається адреса. Адресу щоб додати, просто копіюють і вставляють в потрібні місця.

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

Списки бувають різних видів, про них на Zura-Blog є в наявності окрема публікація, мені для зручного перегляду посилань на інші ресурси сподобався один вид  списків, я вибрав саме такий щоб в ньому знаходились ці посиланняв.

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

 

Як створюється такий список

Спочатку прописуємо теги <dl></dl>, нижче між цими тегами вставляємо посилання на сайт, перед кодом посилання додаємо тег <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>

Для кожного нового посилання копіюємо рядки коду посилання з вказівкою, вставляємо нижче, а потім тільки міняємо адресу і назву ресурсу, оскільки теги залишаються ті самі.

<dl>
<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></dl>

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

Для того щоб зробити таке завдання, прийдеться підключати каскадну таблицю стилей СSS. Як для контактної форми потрібно було створити окремий файл в папці з розширенням РНР, і потім прописати посилання для файлу, щоб зєднати файл з сторінкою, так само і для стилей CSS, створюється папка (оскільки, потім для більшої функціональності сайту, нам можливо потрібні будуть ще файли з цим розширенням), і файл в папці.

Отож, для того щоб підключити каскадну таблицю стилей СSS до сторінки, потрібно спочатку створити файл з розширенням СSS , і щоб  зєднати сторінку сайту з цим файлом, прописати “лінк”.

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

Всі правила в кодах СSS, прописуються на цій сторінці, і зрозуміло що створювати окремо папку і в ній файл з розширенням  СSS не потрібно в такому випадку не потрібно.

Нижче код СSS в якому вказані правила, для того щоб за таким ефектом у вас відображались посилання

 body{
 margin: auto;
 width:1000px;
 }
 .new{
  color:#6bc5e3;
  }
a:link{
  color:#FF6347;
   }
a:visited{
   color:#008080;
   }
a:hover{
  color:#00FF00;
  }
 a:active{
  color:#9370D8;
  }

 

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


Який з варіантів підключення краще вибрати, на Zura — Blog є в наявності публікація, яка стосується такого питання.

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

Для цього прописуємо наступний код що б підключити стилі СSS

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

Для того щоб правило стосувалось цілого сайту в кореневій папці сайту, створити спочатку папку для стилей, назва за звичай дається така сама, “СSS” (можите іншу назва папки придумати), далі потрібно створити файл з розширенням СSS, і  всіх сторінках, також потрібно прописати лінк з посиланням на файл, щоб зєднати файл СSS, з сайтом, тим самим підключивши стилі СSS.

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

В обидвох випадках ми зєднаємо наші html–сторінки, з каскадними таблицями стилей.

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

В  папці MYSITE створюємо папку з назвою СSS, відкриваємо папку а в ній створюємо файл з розширенням css. Назва файлу даємо style.css після зберігання в нас має з’явитися файл. CSS. CSS

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

 

Більш детальне розяснення, яке стосується цього ефекту, в якому конкретно вказано для чого призначене кожне правило в стилях CSS.

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;
}

Таким чином ми змінили чотири стани посилання за допомогою псевдоселекторів.


 

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


Наступний елемент який також часто застосовуть в своїх проектах стосується “Рамок” 

user_97

Рамки доволі цікавий елемент, і на засвоєння як їх створювати я би радив звернути увагу. Рамки можуть досить красиво прикрашати ваш сайт. На Zura — Blog самі публікації, розділи бокового меню, назви публікацій, як ви самі бачите знаходяться в рамках.

Власне як можна створити рамку? На даний момент я, вже вирішив продовжувати створювати сайт разом с CSS (каскадна таблиця стилей). До речі в поеднанні  html і CSS можна створювати досить сучасні сайти. Зокрема сайт–візитку можна цілком створити в поєднанні html і .CSS 

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

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

Оскільки який би сайт не був, всерівно в ньому також, використовується мова розмітки тексту. 

 

Як створюється рамка в поеднанні з каскадними таблицями стилей.

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

Для прикладу я просто введу текст на одну з файлів, на тестовому сайті  біля, скажем пропишу заголовок, або ні краще виберу тег <p> далі текст Тут зібрані всі необхідні посилання на сайти, які стануть в нагоді початківцям</p>. Це тег параграфу. Додаємо до тегу <p> індентифікатор, <p id= “header” >. Тег <p> означає параграф, а в параграфі знаходиться текст, саме текст я хочу взяти в рамку.

До тегу <p> додаємо ідентифікатор “id”

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

Наступний крок, в створеному раніше файлі  CSS, потрібно прописати правило, щоб рамка появилась на сторінці в браузері. Це правило повинно відповідати за те щоб рамка появилась в нашому заголовку, а вірніше в тому місці де вказаний індентифікатор. Правило складається з трьох елементів, це розмір рамки, стиль, і колір.

Прописуємо  правило в стилях css, назвемо правило  “header”, чому саме така назва, тому що повинна бути така сама назва, яку ми вказали в індетифікаторі, в іншому випадку нічого не появиться.

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

Прописуємо #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;
}

Відкриємо або перезапустимо сторінку, і в нас має появитись рамка.

Для того щоб краще засвоїти як працює сторінка яка підключена до стилей CCS, створіть окремий файл з розширенням html, зєднайти цей файл з стилями, і попрактикуйтесь, пропишіть текст, візьміть текст в параграф, <p></р>. В параграфі пропишіть індентифікатор. 

Якщо ми вказуємо  “border-width” то це правило для браузера означє, що має показатись рамка для всіх чотирьох сторін.

“2px” — означають товщину рамки, до цифри два, додайте ще два, збережіть зміни перезапусть,  і гляньте на результат.

Screenshot_7

Як бачимо рамка стала величезною, порівняно до тої яка була, перейдемо тепер до щойно створеного файлу.

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
}

#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” на Zura-Bog , там прописані всі правила по стилях 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);
}

 правило “list-style-image:”  вказує що всі списки з атрибутом  “ul”  на даній сторінці повинні відкриватись з зображенням.

HTML

 <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>

CSS

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

Давайте далі візьмем список в рамку. Як зробити щоб список посилань відображався в рамці, підєднатись до раніше створеного правила з назвою “header”, можите спробувати додати індентифікатор, але не получиться, не буде вже відображатись “стрілка”, точніше картинка.

Для цього пропсується ще одне правило, але в щоб цей список  взяти в рамку його потрібно прописати в селекторі ul{} .

ul li{

list-style-image:url(../images/row.png);
border:1px solid
}  

⇒ появляться рамки навколого кожного посилання  стрілка (фото внизу) і щоб взяти список в рамку як текст “Права колонка”, потрібно прописати правило “border:1px solid” в селекторі “ul li{}”.

Screenshot_8

list-style-image:url(); ⇒ рядок коду який виводить зображення.

border:1px solid; ⇒ рядок коду який створить рамку “1px”.— товщина рамки.

червона стрілка  ⇒ вказує на рамку, а в рамці посилання.

Ну і все. Всі  ці дії будуть також мною показані на відео, яке не забаром  зявиться, володіючи хоча б такими мізерними знанями можна вже самому трошки “пофантазувати”, для прикладу на такий сторінці  можна створити посилання з трьох колонок, зробити посилання в три рядки, в кожен рядок додавати такі посилання, які будуть сосуватись якоїсь галузі.

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

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

Як переконався при додаванні правила CSS, не зважаючи що на сторінці в коді прописане значення “circle” ,всерівно в браузері появляється зображення(стрілка) а не кружочки.

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

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

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

Фонові зображення дуже часто використовуються в розробці любого виду сайту. Вони значно можуть прикрасити сайт, тому їм варто приділяти увагу. Фонові зображення створються таким чином, або вказавши html–код кольору, або прописуючи посилання на зображення. По замовчуванню фонове зображення прозоре, і на сайті воно відображається білим кольором.

Для того щоб поміняти фонове зображення  на свому тестовому сайті, та і на любому сайті, бажано робити через стилі css, адже на даний момент мабуть жодна розробка сайту не обходиться без каскадних таблиць стилей 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 я прописав на свому тестовому сайті в створену  спеціальну рамку, в котрій розміщені  в мене “Цікаві посилання” .


 

На відео показано як вставити картинку для фонового зображення за допомогою стилей css. А також як з стилями css додати до списків маркер в виді зображення Для того щоб поміняти фонове зображення на свому сайті, та і на любому сайті, на картинку з фоновим зображенням, бажано все робити через стилі css


Заключення: ну що ж, по перших кроках в створенні сайту все, за рахунок навіть такої мізерної інформації ви будете в змозі створити сайт, а саме сайт на якому будуть знаходитись сторінки, і на сторінках буде можливо викладати якусь інформацію.

Все дуже просто, в стилях css прописуєте правила, наприклад для тексту, також прописується через стилі, інформації по стилях css можна знайти безліч, зокрема і на Zura — Blog також достатньо, на сторінці CSS вказані значення, а також тлумачення стосовно цих значень.

Дех то з вас, у кого є задатки швидко навчиться підключати сторінки сайту з стилями  css, власне стилі і полегшують всю роботу. Якщо навчитись користуватись цією технологією, то разом з html можна створити красивий сучасний сайт. Звичайно щоб щось зробити, потрібно буде “повозитись”.

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

З скриптами рнр є деякі нюанси, зокрема і локальний сервер вже потрібний на сайті, про те якщо плануєте  займатись розробкою сайтів, то безперечно знання мови рнр буде необхідне.

До речі чуть не забув, цією сторінкою не закінчується вихід матеріалів про те як створити сайт новачку, методом вручну, скажем не використовуючи ні які допоміжні програми, крім редакторів, і одна з таких сторінок є в наявності, називається   “Створюємо меню з кнопок за допомогою стилей css”.

Саме на тій сторінці, ви знайдете інформацію про те, як створити кнопки для горизонтального меню, підвівши курсор миші до горизонтального меню, до назви “HTML”, із випадаючого списку потрібно вибрати назву тої сторінки.


user_97

Сторінки які стосуються створення сайту з звичайного html шаблону на мові гіпертекстової розмітки HTML, застосовуючи тільки редактори, без допомоги спеціальних програм, які призначені для створення сайту.