Зараз хто-небудь скаже, а навіщо було стільки багато фоток викладати в розділі інструменти. як ніби не ясно і так! На настільки докладний "розжовування" я "розщедрився", тому що матеріал, в силу своєї відносної простоти і зрозумілості, може зацікавити юну аудиторію. Зараз багато що змінилося, комп'ютери стали спритніше і дешевше, Internet доступніше, ось тільки велика частина дітей, використовує ці унікальні можливості, годинами і цілодобово вбиваючи монстрів в новомодних ігруху або спілкуючись online, хоча чому тільки діти, дорослі теж страждають подібними слабостями. Взагалі, читання пошти, спілкування в чатах і скачування рефератів перетворилися на такі собі навички просунутого користувача мережі Інтернет, коротше падає культура у всіх її іпостасях. Але в будь-якому випадку, якщо ви зашили на цю сторінку, то швидше за все шукали інформацію, а значить у вас є конкретна мета. І замість того, щоб просто бути "типу просунутими користувачами Internet" давайте спробуємо просунутися трохи далі.
Отже перейдемо безпосередньо до HTML!
Я так думаю, кожен задає собі питання, перш ніж вивчати що-небудь нове - а воно мені треба.
Запитали себе? Добре! Ну і як? Якщо все ще сумніваєтеся, дозвольте мені навести вам декілька причин, за якими має сенс вивчати HTML і кілька причин, через які це робити не варто:
Дозволяє перейти на новий рядок. Послідовність з кількох таких тегів створює, відповідно, більш широкий відступ.
Тег заголовка. З його допомогою зручно виділяти назви глав або розділів (від
до ). h1 - найбільший текст, h6 - найдрібніший. Важливо пам'ятати, що цей тег як і тег абзацу, виробляє перенесення рядка до і після свого вмісту. Він зручний для позначення підрозділів документа, але всередині абзацу доведеться використовувати і / або , щоб домогтися потрібного ефекту.
Hello, world!
Малюємо горизонтальну риску. Використовуючи атрибути width і size, можна задати довжину і шірііну смужки. Увага! width (довжина), size (товщина) можуть приймати два типи значень: в пікселах - width = "100" або в процентах - size = "1%". Також можна задавати колір смужки, використовуючи атрибут color = "колір". і вирівнювати її щодо вмісту сторінки - align = "значення" (а ось три можливих значення цього атрибута: left, right, center).
Універсальний тег. Можемо поставити колір, шрифт і розмір тексту за допомогою перерахованих нижче атрибутів.
Задає колір тексту. Назва кольору як правило відповідає його написання в англійській мові, хоча можна задати і у вигляді числової константи. приклад: .
Задаємо розмір шрифту: . Розміри йдуть в порядку зростання, від 1 до 6. Як правило, 6 найбільший можливий розмір шрифту.
Дозволяє використовувати різні шрифти, такі як Arial, Courier New, Tahoma, Verdana та інші, встановлені в вашому браузері: .
Ви можете використовувати відразу кілька атрибутів, хоч все можливо допустимі для того тега, який застосовуєте.
H e ll o. w o r l d!
Цей тег задає дрібний шрифт, як бачите, все елементарно.
Як вже зрозуміло з назви, задає великий, великий шрифт.
Можете змінювати фоновий колір всього документа, привласнюючи атрибуту bgcolor ті ж значення кольорів, що і атрибуту color тега . Атрибут bgcolor задається в тезі . Ось приклад правильної записи: - так ми задаємо в якості фону зелений колір.
завантажити завдання
Виконати завдання на сайті: 1 | 2 | 3
Вітаю, ось ви і пройшли LEVEL_1. Можете собою пишатися (тільки не перестарайтеся в цій справі :))), ви з ходу (я сподіваюся) пройшли обсяг, хоч і урізаний, але рівний тому, який в книгах по HTML займає значно більше сторінок! Це не означає, що до книг не варто звертатися. Якраз навпаки, книги дають максимум інформації, ми ж з вами зараз у форсованому темпі створюємо базу, яку ви потім самі розширите.
Отже, якщо ви відчуваєте, що освоїли роботу з текстом, давайте підключимо пару фотографій або картинок. Це пожвавить вашу сторінку! У книгах по HTML докладно описуються основні графічні формати, наводиться класифікація графіки, ми ж з вами цього робити не будемо. Поки що усвідомите для себе наступний мінімум:
Серед безлічі графічних форматів найбільшого поширення набули: PNG, BMP, JPEG, GIF. Саме вони підтримуються більшістю браузерів.
Joint Experts Group - об'єднана група експертів. Мабуть, найпоширеніший графічний формат. Зображення такого формату добре стискаються, що прискорює процес їх завантаження, але є і мінус - при конвертації зображення іншого формату в формат JP (E) G відбувається необоротна втрата "зайвої" інформації, за рахунок чого і досягається стиск, але це ж погіршує якість картинки . Тому конвертувати зображення з одного формату в інший рекомендується один раз.
Portable Network Graphic - переносима графіка для мережі. Барвисті зображення фотографічної якості з підтримкою прозорості в стислій формі без втрат графічної інформації. Формат призначався для заміни традиційного GIF.
Garphic Interchange Format - формат графічного обміну. Малокольорових зображення (256 кольорів), іноді анімаційні, з підтримкою прозорості в стислій формі без втрат графічної інформації. Однак для зображень середніх і великих розмірів не годиться, так як значно поступається в якості того ж JPEG.
завантажити завдання
Сподіваюся, ви розібралися з вищевикладеним матеріалом і у вас не виникло особливих труднощів. Можете заварити собі чаю або кави, хто що любить :)), трохи відпочити і трішки погорду, які ми молодці (хвилини дві - три)! І відразу ж йдемо далі.
Зараз ми навчимося обрамляти наші зображення рамкою, міняти її колір, а так же. вообщем про все по порядку.
Додайте в тег ![]()
новий атрибут border. Він служить для створення рамки зображення, ви можете задати його товщину в пікселях, ну, наприклад, так:
![]()
. Поміняйте кілька разів його значення і подивіться, що виходить. Браузер, за замовчуванням, забарвлює рамку в чорний колір, але ситуація змінюється, коли ми використовуємо ![]()
спільно з . . Припустимо нам потрібно розмістити зображення з ім'ям FOTO.bmp, яке знаходиться на диску C: \, більш того, потрібно задати для цього зображення червону рамку, товщиною в 4 пікселя. Як правильно поставити теги? А приблизно так: . Як бачите, атрибут color тега . змінює колір тексту і рамки фото, що створює загальний стиль оформлення. Хоча, можна кожне фото вашої html-сторінки обрамляти в тег . , задаючи персонально для нього (фото), кольоровий стиль. Головне не перестаратися, адже іноді буває краще і не використовувати рамку, все залежить від вашого художнього чуття.
На увагу заслуговують ще два атрибути, title і alt. Перший виводить, заданий вами текст, при наведенні курсору миші на зображення, другий дозволяє задати заміну тексту, який видно, якщо з якої-небудь причини, зображення в html-сторінці не відображається.
Задаємо ширину зображення в пікселях - width = "120" або відсотках - height = "25%"
Значення атрибута повинно бути укладено в подвійні лапки.
Задаємо висоту зображення в пікселях - height = "120" або відсотках - height = "34%"
Значення атрибута повинно бути укладено в подвійні лапки.
Значенням атрибута може бути будь-який текст, бажано не особливо довгий, в даному випадку alt = "кнігомана". Не забувайте використовувати цей атрибут, він може виявитися корисним, якщо у людини, який відвідав вашу сторінку, в браузері відключений показ графіки. Значення атрибута повинно бути укладено в подвійні лапки.
Атрибут чимось схожий з alt, тільки працює незалежно від того, відображається фото чи ні. Рядок тексту, привласнена атрибуту title, буде виводитися при наведенні курсору миші на фото. Значення атрибута повинно бути укладено в подвійні лапки.
Приклад: title = "Якщо ви це читаєте, значить в тезі img використовується атрибут title з цим текстом!"
Встановлюємо в пікселях ширину рамки для зображення - border = "3". А якщо нам ще й пофарбувати її треба в якийсь колір, використовуємо Delphi отримати html код за заданим url
Hello, world!
Малюємо горизонтальну риску. Використовуючи атрибути width і size, можна задати довжину і шірііну смужки. Увага! width (довжина), size (товщина) можуть приймати два типи значень: в пікселах - width = "100" або в процентах - size = "1%". Також можна задавати колір смужки, використовуючи атрибут color = "колір". і вирівнювати її щодо вмісту сторінки - align = "значення" (а ось три можливих значення цього атрибута: left, right, center).
Універсальний тег. Можемо поставити колір, шрифт і розмір тексту за допомогою перерахованих нижче атрибутів.
Задає колір тексту. Назва кольору як правило відповідає його написання в англійській мові, хоча можна задати і у вигляді числової константи. приклад: .
Задаємо розмір шрифту: . Розміри йдуть в порядку зростання, від 1 до 6. Як правило, 6 найбільший можливий розмір шрифту.
Дозволяє використовувати різні шрифти, такі як Arial, Courier New, Tahoma, Verdana та інші, встановлені в вашому браузері: .
Ви можете використовувати відразу кілька атрибутів, хоч все можливо допустимі для того тега, який застосовуєте.
H e ll o. w o r l d!
Цей тег задає дрібний шрифт, як бачите, все елементарно.
Як вже зрозуміло з назви, задає великий, великий шрифт.
Можете змінювати фоновий колір всього документа, привласнюючи атрибуту bgcolor ті ж значення кольорів, що і атрибуту color тега . Атрибут bgcolor задається в тезі . Ось приклад правильної записи: - так ми задаємо в якості фону зелений колір.
завантажити завдання
Виконати завдання на сайті: 1 | 2 | 3
Вітаю, ось ви і пройшли LEVEL_1. Можете собою пишатися (тільки не перестарайтеся в цій справі :))), ви з ходу (я сподіваюся) пройшли обсяг, хоч і урізаний, але рівний тому, який в книгах по HTML займає значно більше сторінок! Це не означає, що до книг не варто звертатися. Якраз навпаки, книги дають максимум інформації, ми ж з вами зараз у форсованому темпі створюємо базу, яку ви потім самі розширите.
Отже, якщо ви відчуваєте, що освоїли роботу з текстом, давайте підключимо пару фотографій або картинок. Це пожвавить вашу сторінку! У книгах по HTML докладно описуються основні графічні формати, наводиться класифікація графіки, ми ж з вами цього робити не будемо. Поки що усвідомите для себе наступний мінімум:
Серед безлічі графічних форматів найбільшого поширення набули: PNG, BMP, JPEG, GIF. Саме вони підтримуються більшістю браузерів.
Joint Experts Group - об'єднана група експертів. Мабуть, найпоширеніший графічний формат. Зображення такого формату добре стискаються, що прискорює процес їх завантаження, але є і мінус - при конвертації зображення іншого формату в формат JP (E) G відбувається необоротна втрата "зайвої" інформації, за рахунок чого і досягається стиск, але це ж погіршує якість картинки . Тому конвертувати зображення з одного формату в інший рекомендується один раз.
Portable Network Graphic - переносима графіка для мережі. Барвисті зображення фотографічної якості з підтримкою прозорості в стислій формі без втрат графічної інформації. Формат призначався для заміни традиційного GIF.
Garphic Interchange Format - формат графічного обміну. Малокольорових зображення (256 кольорів), іноді анімаційні, з підтримкою прозорості в стислій формі без втрат графічної інформації. Однак для зображень середніх і великих розмірів не годиться, так як значно поступається в якості того ж JPEG.
завантажити завдання
Сподіваюся, ви розібралися з вищевикладеним матеріалом і у вас не виникло особливих труднощів. Можете заварити собі чаю або кави, хто що любить :)), трохи відпочити і трішки погорду, які ми молодці (хвилини дві - три)! І відразу ж йдемо далі.
Зараз ми навчимося обрамляти наші зображення рамкою, міняти її колір, а так же. вообщем про все по порядку.
Додайте в тег новий атрибут border. Він служить для створення рамки зображення, ви можете задати його товщину в пікселях, ну, наприклад, так:
На увагу заслуговують ще два атрибути, title і alt. Перший виводить, заданий вами текст, при наведенні курсору миші на зображення, другий дозволяє задати заміну тексту, який видно, якщо з якої-небудь причини, зображення в html-сторінці не відображається.
Задаємо ширину зображення в пікселях - width = "120" або відсотках - height = "25%"
Значення атрибута повинно бути укладено в подвійні лапки.
Задаємо висоту зображення в пікселях - height = "120" або відсотках - height = "34%"
Значення атрибута повинно бути укладено в подвійні лапки.
Значенням атрибута може бути будь-який текст, бажано не особливо довгий, в даному випадку alt = "кнігомана". Не забувайте використовувати цей атрибут, він може виявитися корисним, якщо у людини, який відвідав вашу сторінку, в браузері відключений показ графіки. Значення атрибута повинно бути укладено в подвійні лапки.
Атрибут чимось схожий з alt, тільки працює незалежно від того, відображається фото чи ні. Рядок тексту, привласнена атрибуту title, буде виводитися при наведенні курсору миші на фото. Значення атрибута повинно бути укладено в подвійні лапки.
Приклад: title = "Якщо ви це читаєте, значить в тезі img використовується атрибут title з цим текстом!"
Встановлюємо в пікселях ширину рамки для зображення - border = "3". А якщо нам ще й пофарбувати її треба в якийсь колір, використовуємо Delphi отримати html код за заданим url