Продовжимо розглядати тему «Як створюємо сайт на 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.

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

Продовження 2-частина

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

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

Якщо ми додамо до селектору #header правило width: 550px; то у нас розмір рамки стане менше 550px а сама рамка переміститься вліво, текст в рамці вийде в три рядки.

⇑width: 550px;

Якщо ми додамо до селектору #header ще одне правило text-align: center; тоді текст в рамці вирівняється по центру.

⇑text-align: center;

Якщо ми додамо до селектору #header правило margin: auto тоді текст в рамці і сама рамка переміститься центр.

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

⇒ відобразяться рамки навколо кожного посилання.

Коли відкриємо сторінку в браузері повинен з'явитися такий результат

⇒ три червоні рамки.

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

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

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

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

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

Продовження 3-частина

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

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

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

Потім прописуємо правило background-image: далі посилання url і в дужках вказуємо шлях.

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

../⇒ дві точки означають що ми повинні вийти з папки css в папку images

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

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

Якщо ми хочите вказати не зображення а просто колір тоді прописуємо правило background-color: і потім вказуємо номер кольору

body {background-color: # 9999FF; }

# 9999FF⇒ колір.

⇑background-color

Елемент background я прописав в тестовому сайті в створену спецальних рамку, про яку йшла мова на початку розділу, там у мене знаходяться «Цікаві посилання».