Урок 8. Атрибути — ІI (практика)

Привіт! Хочу запропонувати трохи попрактикуватися сьогодні з вбудованим до HTML-коду CSS. Як ви маєте пам’ятати з попереднього уроку, вбудовувати CSS ми будемо за допомогою атрибута style.
Можливо, у вас не один блог, а декілька, і ви вирішили пролінкувати блоги один в одному. А може, існує який-небудь інший інтернет-ресурс, до якого ви б хотіли ненав’язливо привернути увагу відвідувачів свого блога. Є декілька шляхів вирішення цього питання:

1. Дати лінк з поясненнями куди він ведев, в замітці.

Переваги і недоліки:
Для того, щоб так зробити, вам зовсім не треба знати HTML’у чи CSS’у. Ви можете детально написати про ресурс в замітці; пояснити відвідувачам, в яких випадках було б корисно відвідати рекомендований ресурс. Але згодом ви будете писати ще і ще, доки замітка з лінком не загубиться під стрічкою нової писанини.

2. Додати лінк до закладинок.

Переваги і недоліки:
Лінк завжди буде знаходитися на головній сторінці блога, але він не буде надто помітним для користувачів.

3. Додати оформлений лінк до HTML-поля блога

Переваги і недоліки:
Для того, щом оформити лінк, потрібно мати гарний смак і хоч трошечки бути знайомим з HTML. Звісно, можна скористатися якою-небудь програмою для створення блока з лінком, але іноді такі програми можуть виявитися недоступними. Якось Абетка додавала лінк з інтернет-кафе в чужому місті. Вона не тільки не мала змоги використати редактор для веб-сторінок, але й графічний банер для посилання розробити. Тож треба було викручуватися виключно HTML’ом. Давайте спробуємо і ми розробити яке-небудь посилання. Таке, наприклад:

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

1. Пригадайте, як ми лінкували сторінки свого сайту в 6 уроці. Таким само чином робимо лінк на потрібний нам ресурс:

<a href=»адреса потрібної тобі сторінки»>текст, який буде слугувати посиланням</a>

2. Тепер робимо лінк помітним за допомогою атрибута style. Style прописується одразу за посиланням; всередині відкриваючого тега a:

<a href=»адреса потрібної тобі сторінки» style=»font-size:розмір шрифта у пікселях; font-family:назва шрифта; line-height:відстань між рядками тексту в пікселях; color:колір тексту»>текст, який буде слугувати посиланням</a>

В цьому прикладі було використано такі властивості CSS:

font-size, font-family, line-height і color.
Докладніше про них ви можете дізнатися з минулих уроків, присвячених редагуванню CSS блога. Ви можете використати будь-які інші властивості CSS для зміни стилю текста посилання; наведеним прикладом можливості таблиць стилів не обмежуються.
Отже, ми змінили вигляд самого лінка. А яким чином я зробила окреме кольорове віконечко для нього?

3. Придивіться до схеми:

Як можна з неї побачити, структура кожного сайта — блочна. В блоці вузької шпальти розміщено блоки календаря, закладинок. останніх заміток та HTML-поля блога. За кожен блок блога відповідає окрема частина загального файла CSS. Тож якщо ми хочемо, щоб наше посилання відрізнялося від загальної таблиці стилів, ми маємо створити для нього окремий блок.

4. Зробити блочний елемент можна за допомогою тега div, який слугує виділенню частини документа в окремий блок. Привласнюємо нашому блоку атрибут style:

<div style=»text-align:потрібне вирівнювання текста; width:ширина блока в пікселях; background:фоновий колір;  border:рамка»></div>

В цьому прикладі було використано такі властивості CSS:

text-align, width, background, border

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

5. Тепер всередину блока, який у нас вийшов, додаємо посилання:

<div style=»text-align:потрібне вирівнювання текста; width:ширина блока в пікселях; background:фоновий колір;  border:рамка»><a href=»адреса потрібної тобі сторінки» style=»font-size:розмір шрифта у пікселях; font-family:назва шрифта; line-height:відстань між рядками тексту; color:колір тексту»>текст, який буде слугувати посиланням</a></div>

І банер готовий!

На всяк випадок надаю повний працюючий код прикладу:

<div style=»text-align:center; width:240px; background:#269DDE; border:5px #FF7800 double»><a href=»http://wiki.blox.ua/html» style=»font-size:18px; font-family:Impact; line-height:30px; color:white»>Хочеш стати блогером-профі? Відкрий для себе енциклопедію блоґґінга</a></div> 

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

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

Новий шаблон для блога

Шаблон

Н овий яскраво-зелений шаблон ніби хоче ще трошки затримати літо. Але сил маленької феї вистачить лише на те, щоб затримати літо в тому блозі, в якому вона оселиться.

Якщо вам сподобався цей шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

5 нових шаблонів

Шаблон

Шаблон

Шаблон

Шаблон

Шаблон

С ьогодні ви маєте можливість скопіювати до свого блога не один чи два нових шаблони, а цілих п’ять!

Як можна помітити, шаблони під назвою template 1, 2, 3 суттєво відрізняються за стилістикою від шаблонів 15main і 16main. Це тому, що на цей раз у шаблонів — різні автори.

Шаблони в шотландському стилі — мої, а музичний, спортивний та шаблон з НЛО створено іншим блогером і талановитим дизайнером — arial_black. Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Урок 8. Атрибути — І

Деякі елементи HTML можуть мати атрибути, або якщо казати іншими словами — ознаки, властивості. Атрибути надають браузеру додаткову інформацію про той чи інший елемент. Атрибути завжди вказуються в стартовому тегу, та пишуться в парі, що складається з назви і значення. Це виглядає так: 

назва тега=»значення»

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

ім’я=’Оля «Барабашка» Барабаш’

Сьогодні ми розглянемо всього один атрибут — style. Але ж за скільки речей він відповідає!

Атрибут style дозволяє використовувати елементи CSS безпосередньо в HTML-файлі. Звичайно, краще коли до HTML-кода прикріплюється окрема каскадна таблиця стилів (CSS), але це на завжди потрібно і можливо. Наприклад, ви розробили власний банер і вирішили вставити його до вузької панелі блога. Вставити окрему табличку CSS до HTML-поля блога проблематично, а от внести елементи CSS’у в код не тільки можливо, а й дуже просто. Взагалі-то style достатньо новий атрибут. Він з’явився тільки в 4 версії HTML.

<p style=»font-family:verdana;color:red»>Цей текст набрано шрифтом Verdana і він червоний</p>
<p style=»font-family:times;color:green»>Цей текст набрано зеленим Таймс</p>
<p style=»font-size:30px»>Цей текст має розміри 30 пікселів</p>

Цей текст набрано шрифтом Verdana і він червоний

Цей текст набрано зеленим Таймс

Цей текст має розміри 30 пікселів

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

Давайте розглянемо, як граматично відрізняється використання атрибуту style безпосередньо в тілі HTML-коду від використання таких самих стильових рішень в окремій табличці CSS.

Пропишемо жовтий фоновий колір для елемента body:

HTML-документ
body style=»background-color:yellow»

CSS-табличка
body { background-color: yellow; }

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

Більш докладно знайомитися з таблицями стилів ми будемо трохи пізніше.

Відмінені або небажані для використання теги і атрибути

В HTML 4 деякі теги і атрибути відмінили  для використання. Це означає, що в майбутніх версіях HTML та XHTML вони не будуть підтримуватися. Так сталося, що з часом з’явилися більш зручні теги, якими можна замінити ці устарілі. Звичайно, браузери мають і далі їх відображати, але все ж таки давайте будемо уникати застосування відмінених тегів в роботі з кодом.
Список таких тегів і атрибутів відтепер можна знайти на моєму сайті.

Закоментуємо HTML

З кожним уроком ми дізнаємося про HTML все більше і більше. Можливо, скоро буде потрібно залишати пояснення всередині коду іншим користувачам, яким ви довірите написаний власноруч код. Коментарі ігноруються браузерами і дозволяють зробити процес розглядання вашого коду іншими набагато простішим. Коментар до вашого HTML’у має виглядати так:

Домашнє завдання: Сьогодні його не буде 🙂 Краще я представлю вам свою помічницю, яка віднині буде проводити практичні заняття. На кожному практичному занятті ми будемо робити яку-небудь цікаву цсс-аштіемельну дрібничку, засвоюючи таким чином теоретичну частину уроку. Тож познайомтеся з Алісою:

Привіт! Я — Аліса, мене вигадала Абетка. Раз на тиждень, а вірніше кожної п’ятниці, починаючи з наступної (хоча ні, не тієї, що буде завтра, а через одну), я буду показувати вам різноманітні практичні дрібнички. Абетка мені сказала, що ви вже дещо вмієте, тож складно не буде! До зустрічі 🙂

Урок 7. HTML — форматування тексту — ІІ

Теги виводу комп’ютерної інформації

code — використовується, коли потрібно відобразити в HTML-документі невеликий фрагмент комп’ютерного коду. В браузері текст, виділений тегом code ми зазвичай бачимо набраним моноширинним шрифтом:

простий текст Комп'ютерний код простий текст

kbd — визначає текст як введений користувачем з клавіатури. Зазвичай відображається моноширинним шрифтом:

простий текст Отриманий від знайомого електронний лист простий текст

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

простий текст текст-приклад простий текст

tt — відображає текст моноширинним шрифтом, тег для відмітки текстів телетайпу. Для більшості випадків краще використовувати теги code, samp, kbd.

простий текст Текст телетайпу простий текст

var — відображає імена змінних програм. Зазвичай браузери відображають курсивом.

простий текст комп’ютерна змінна простий текст

pre — визначає преформатований текст. Якщо ви збираєтеся публікувати на своїй сторінці  каліграми, цей тег вам обов’язково знадобиться. Подивіться на нижченаведені приклади:

HTML-код тексту з використанням тега pre Вигляд документа в браузері
И покуда война
                       Кровью обагрена
                       Вкус описав и цвет
                       Запах поет поэт

                             И ку-
                                  рит
                                  та-
                                  бак
                                  души-
                                      стЫЙ
И покуда война
                       Кровью обагрена
                       Вкус описав и цвет
                       Запах поет поэт

                             И ку-
                                  рит
                                  та-
                                  бак
                                  души-
                                      стЫЙ
HTML-код тексту без тега pre Вигляд документа в браузері
И покуда война
                       Кровью обагрена
                       Вкус описав и цвет
                       Запах поет поэт

                             И ку-
                                  рит
                                  та-
                                  бак
                                  души-
                                      стЫЙ

И покуда война Кровью обагрена Вкус описав и цвет Запах поет поэт И ку- рит та- бак души- стЫЙ

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

Теги для вставки різноманітних цитат

abbr — відмічає текст як абревіатуру:

простий текст ООН простий текст

acronym — відмічає текст як акронім — промовні слова, що складаються з абревіатур:

простий текст WWW простий текст

address — відмічає текст як адресу:

Крайня Північ
Льодова Долина
Подарункова Хата — 12
Дід Мороз

bdo — за допомогою атрибута dir визначає напрямок тексту (зправа наліво чи зліва направо).

Синтаксис: bdo dir=»значення»

Можливі значення:

ltr — напрямок зліва направо і

rtl —  напрямок зправа наліво.

blockquote — використовується при написанні довгих цитат
q — використовується при написанні коротких цитат

cite — використовується для відмітки цитат, назв книжок, посилань на інформаційні джерела, використані в роботі:

Blox.ua гарна платформа для створення блогів.

dfn — відмічає текстовий фрагмент як визначення. Цим тегом наприклад, можна виділити який-небудь термін, що зустрічаєстья в тексті уперше:

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

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

Нові шаблони

Шаблон

Шаблон

Д ва нових шаблона на одній основі. Перший — гламурний, виключно жіночий.

Другий шаблон нейтрально-сірий, заспокійливий. Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Урок 7. HTML — форматування тексту — І

Пропоную вивчити основні HTML-теги, за допомогою яких здійснюється форматування тексту. З тегами b (bold або жирне написання) та i (italic або текст із нахилом) скоріше за все, знайомі всі. Ці теги ми часто використовуємо у коментарях, на форумах, і т. ін. А ось якщо я назву вам такий тег: big чи такий: sup, далеко не кожен зможе пояснити, в яких випадках їх слід використовувати. Нижче знаходиться список з тегами форматування та поясненнями до них. Їх необов’язково запам’ятовувати; просто ретельно передивившись список, ви будете мати уявлення про можливі дії при редагуванні текстів. А повернувшись декілька разів до списку під час роботи з веб-документами, ви автоматично запам’ятаєте найвживаніші саме вами теги.

Теги для форматування текстів

b — тег для виділення тексту жирним (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

big — текст більший за розмірами за основний (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

em — тег виділення частини тексту, підкреслення змісту текста. Браузер частіше за все текст з таким тегом видає як курсив (логічне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

i — відображення тексту курсивом (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

small — текст що відображається меншими літерами за основний (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

strong — відображається браузерами зазвичай напівжирним. Використовують для виділення важливих частин документа (логічне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

sub — зміщує текст нижче рівня рядка і робить літери меншими за розмірами, якщо це можливо. Гарно використовувати для математичних індексів (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

suр — зміщує текст вище рівня рядка і робить літери меншими за розмірами, якщо це можливо. Частіше за все використовується для написання математичних ступенів, коренів, номерів для коментарів (фізичне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

ins — відмічає текст як додаток, вставку. Зазвичай відображається підкресленим текстом (логічне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

del — відмічає текст як видалений. Зазвичай відображається як закреслений (логічне форматування)

Приклад використання: звичайний текст застосування даного тега звичайний текст

Помітили написи в дужках після кожного тегу а також те, що різні теги відображають частини тексту документа в браузері однаково?

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

Теги логічного форматування як легко усвідомити з назви, логічним шляхом пояснюють браузеру, як слід відображати ту чи іншу частину HTML-документа. Тобто, тег strong каже браузеру не те, що текст має бути напівжирним чи жирним; а що він є важливим, і тому його слід якось виділити. А тег b, що відноситься до тегів фізичного форматування, чітко дає зрозуміти браузеру, що текст має бути жирним, і не несе в собі ніяких додаткових ознак. В деяких випадках доцільніше використовувати теги логічного форматування, аніж фізичного.

Далі буде…

 

 

Урок 6: Однієї сторінки буде замало :)

Ми вже створили головну сторінку для сайту і прикріпили до неї простий CSS. Але де ви бачили, щоб сайт складався лише з однієї сторінки?

Пропоную додати принаймні ще дві.
Нехай одна сторінка буде новинною. Назвемо її news.html
А на другій сторінці розмістимо матеріали сайта. Вона буде містити все, що вам подобається. Назвемо сторінку hobby.html

Скопіюйте код наданий нижче до Notepad (Блокнот), і заповніть потрібні поля:

 

Коли обидві сторінки повністю готові та завантажені на хостинг, ми можемо додати посилання на них в головній сторінці сайту:

 

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

link rel=»stylesheet» type=»text/css»

Окремий CSS-файл для всього документа прискорює роботу при створенні сайтів в декілька разів, а також дозволяє не заплутатися у власному коді.

Наведу список всіх тегів, що було зараз використано. Їх треба запам’ятати або додати ось цю сторінку собі до закладинок, щоб мати можливість час від часу переглядати нові теги в алфавітному порядку. У всіх тегів нижче спеціальні дужки < та > змінено на прості ( та ).

(h1)…(/h1) — теги заголовка. 
(h1) — у цього заголовка будуть найбільші літери,
(h6) — а у цього найменші.

(p)…(/p) — теги абзаца. 

(a href=»посилання»)текст посилання(/a) — теги посилання на іншу сторінку. Цей тег має інакший вигляд, аніж попередній. Це тому, що він належить до так званих атрибутів. Що таке атрибути я буду писати в наступних уроках; наразі просто запам’ятайте, як правильно робити лінки, якщо під рукою нема жодного веб-редактора.

Яке розширення обрати для своїх сторінок: HTM чи HTML?

Мабуть, ви вже помітили, що одні інтернет-сторінки мають розширення «.htm», інші — «.html». То під яким розширенням краще робити свої? Насправді можна використовувати обидва розширення для файлів. Але сучаснішим є все ж таки «.html».
«.htm» залишилося нам ще від тих часів, коли розширення назви документа не могли містити в собі більше 3 символів.
Також слід пам’ятати, що всі інтернет-сторінки слід зберігати з одним й тим самим кодуванням, рекомендовано UTF-8 (формат кодування обирається при зберігання документа в Блокноті).

Домашнє завдання: Робимо принаймні 2 окрім головної для сайту; підключаємо до них загальний css-файл. 

 

Новий шаблон

Шаблон

Н овий спортивний шаблон. Зауваги щодо «підігнати кольори до кольорів улюбленої футбольної команди» не приймаються 🙂

Якщо вам сподобався цей шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»