Презентация на тему: Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -

Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web - документів »
План лекції
Web- дизайн та web- розробка
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Мета створення web- сайту
1. Організація web- простору
Web- сторінка ( Web page )
Web- сторінка ( Web page )
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Основні визначення
Основні визначення
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
2. Структура та складові елементи web - сайтів
Основні структурні елементи web- сторінки
Структура web- сторінки
Види структури web- сторінок
Види структури web- сторінок
Ієрархічна структура сайту (приклад)
3. Призначення та функції web -сайту. Класифікація web -сайтів
3.1. Класифікація сайтів за функціональним призначенням
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Приклади комерційних сайтів
Промо - сайти. Landing Page
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Основні переваги Landing Page
Приклад и Landing Page
3.2. Класифікація сайтів по технологіях, що використовуються
Статичні сайти
Динамічні сайти
Статичні та динамічні сайти
Статичні сайти
Динамічні сайти
4. Етапи розроблення web- сай тів
Основні етапи
1. Підготовка проекту
2. Складання технічного завдання (ТЗ )
3. Дизайн та розроблення архітектури
4. Технологічний етап проекту
5. Наповнення контентом
6. Розміщення в мережі, тестування та запуск
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
4. Створення web- сторінок. Основи HTML
HTML
1. Основні елементи web- строрінок. Теги ( Tag)
Основні групи тегів за призначенням і сферою дії :
Властивості тегів
Властивості тегів
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Атрибути тегів
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
2. Семантика в html
Структура html- сторінки
Код html- сторінки
Вкладеність елементів в HTML
Код html- страницы
Блокові і рядкові елементи ( HTML block and inline tags )
Блочні елементи
Блочні елементи
Рядкові елементи
Взаємодія блокових та рядкових елементів
Заголовки
Заголовки
Код html- сторінки
Теги форматування тексту
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Коментарі
Цитати
4. Елементи < div> та <span>
Код html- страницы
Код html- страницы
<span>
Код html- сторінки
Код html- сторінки
Дякую за увагу !
ГИПЕРССЫЛКИ ( HTML LINKS )
1. Создание ссылок на другие страницы
Адреса на web- страницах
Примеры относительных адресов
2. Открытие ссылки в новом окне
3. Скачивание файла по ссылке
4. Добавление описания ссылки
5. Создание ссылок на адрес электронной почты
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
6. Создание ссылку внутрь страницы
Как организовать ссылку такого типа?
Примеры
7. Изображение в качестве ссылок
Основные атрибуты элемента < img >
СОЗДАНИЕ СПИСКОВ ( HTML LISTS)
Списки
Как сформировать список?
Атрибуты тегов списка
Синтаксис
Элементы < dl >, < dt >, < dd >
Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -
1/98
Средняя оценка: 4.9/5 (всего оценок: 92)
Код скопирован в буфер обмена
Скачать (8513 Кб)
1

Первый слайд презентации: Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web - документів »

Изображение слайда
2

Слайд 2: План лекції

Web - c торінки та організація web - простору Призначення та функції web -сайту. Класифікація web -сайтів Структура та складові елементи web -сайтів Створення web- сторінок. Основи HTML

Изображение слайда
3

Слайд 3: Web- дизайн та web- розробка

Веб-дизайн ( Web design ) — галузь веб-розробки і різновид дизайну, в завдання якої входить проектування користувальницьких веб-інтерфейсів для сайтів або веб-додатків. Веб-дизайнери проектують логічну структуру веб-сторінок, продумують найбільш зручні рішення подачі інформації і займаються художнім оформленням веб-проекту. Веб-розробка ( Web Development) — процес створення веб-сайту або веб-додатку. Основними етапами процесу є веб-дизайн, верстка веб-сторінок, програмування для веб на стороні клієнта і сервера, а також конфігурування веб-сервера.

Изображение слайда
4

Слайд 4

Изображение слайда
5

Слайд 5: Мета створення web- сайту

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

Изображение слайда
6

Слайд 6: 1. Організація web- простору

Изображение слайда
7

Слайд 7: Web- сторінка ( Web page )

Web-сторінка – документ або інформаційний ресурс мережі Інтернет, доступ до якого здійснюється за допомогою web-браузера. Типова веб-сторінка є текстовим файлом у форматі HTML, який може містити посилання на файли в інших форматах (текст, графічні зображення, відео, аудіо, мультимедіа, прикладні програми, бази даних, веб-служби та інше), а також гіперпосилання для швидкого переходу на інші веб-сторінки або доступу до файлів.

Изображение слайда
8

Слайд 8: Web- сторінка ( Web page )

Найперший сайт в світі був створений в 1991 році 6 серпня. Автором сайту був Тім Бернерс-Лі. Першою інфомацією, опублікованою на цьому сайті, був опис нової технології World Wide Web.

Изображение слайда
9

Слайд 9

HTML- документ и Web- сервер Internet Браузери на комп ’ ютерах та мобільних пристроях

Изображение слайда
10

Слайд 10: Основні визначення

Web-сервер – сервер, що приймає HTTP-запити від клієнтів, зазвичай web-браузерів, і видає їм HTTP-відповіді, як правило, разом з HTML-сторінкою, зображенням, файлами, медіа-потоками або іншими даними. Web-сервером називають як програмне забезпечення, яке виконує функції web-сервера, так і безпосередньо комп'ютер, на якому це програмне забезпечення працює.

Изображение слайда
11

Слайд 11: Основні визначення

HTTP ( Hyper Text Transfer Protocol, протокол передачі гіпертексту) – протокол прикладного рівня передачі даних (спочатку у вигляді гіпертекстових документів в форматі HTML, зараз використовується для передачі довільних даних). Ресурси – це HTML-сторінки, зображення, файли, медіа-потоки або інші дані, які необхідні клієнту. У відповідь web -сервер передає клієнту дані, що запитуються. Цей обмін відбувається по протоколу HTTP.

Изображение слайда
12

Слайд 12

Існує безліч комп'ютерів і пристроїв, підключених до Internet, що відображають web -сторінки. Після того як ви розмістили створені файли на web -сервері, будь-який браузер зможе через Internet відшукати ваші web -сторінки. Для формування web -сторінок ви створюєте файли, написані на мові Hyper Text Markup Language (скорочено HTML) і розміщуєте їх на web -сервері. Мова HTML вашої web -сторінки «говорить» браузеру все, що йому необхідно знати для відображення цієї сторінки. А якщо ви виконали свою роботу добре, то ваші сторінки будуть так само коректно відображатися на екранах різних мобільних пристроїв.

Изображение слайда
13

Слайд 13: 2. Структура та складові елементи web - сайтів

Изображение слайда
14

Слайд 14: Основні структурні елементи web- сторінки

Изображение слайда
15

Слайд 15: Структура web- сторінки

Изображение слайда
16

Слайд 16: Види структури web- сторінок

Изображение слайда
17

Слайд 17: Види структури web- сторінок

Лінійна структура  веб-сайту  доцільна у разі послідовного представлення інформації.   Наприклад, каталог товарів чи послуг або матеріали навчального посібника. Перегляд таких сайтів здійснюють послідовоно : від початкової ( головної ) до останньої сторінки. Кожна сторінка зазвичай має посилання лише на наступну й попередні сторінки сайту. Довільна структура   передбачає відсутність обмежень на гіперпосилання між сторінками сайту.   Інколи у таких сайтах можна виділити фрагменти, які є лінійними або ієрархічними. Прикладом довільної структури сайту може бути Інтернет-енциклопедія   Вікіпедія. Ієрархічна структура  передбачає використання сторінок різних рівнів.   Кожна така сторінка має посилання на сторінки нижчого рівня і на одну сторінку вищого рівня. Головна сторінка містить посилання лише на сторінки нижчого рівня. Така структура найкраще підходить для каталогів, зібрань статей з різних тем або добірок послань.

Изображение слайда
18

Слайд 18: Ієрархічна структура сайту (приклад)

Изображение слайда
19

Слайд 19: 3. Призначення та функції web -сайту. Класифікація web -сайтів

Изображение слайда
20

Слайд 20: 3.1. Класифікація сайтів за функціональним призначенням

Изображение слайда
21

Слайд 21

КОМЕРЦІНІ САЙТИ

Изображение слайда
22

Слайд 22: Приклади комерційних сайтів

Типи сайтів Призначення Функції Сайт-візитка Веб-представництво підприємства Кількість сторінок — 1–5 (головна, контакти, прайс, можливість розширення до корпоративного сайту) Корпоративний сайт Повнофункціональне веб-представництво підприємства (інформаційні та комерційні функції) Необмежена кількість сторінок, блоки новин і статей, можливість розміщення портфоліо, наявність галереї, каталогів продукції, можливість розширення функціоналу Інтернет-магазин Майданчик для купівлі-продажу товарів і послуг Розміщення необмеженої кількості товарів, спеціальні сервіси для здійснення угод Промо -сайт Спеціалізується на окремому продукті або акції, функція — привернення уваги, просування товару, збільшення продажів. Може бути «філіалом» корпоративного сайту Невелика кількість сторінок, можливе розміщення презентацій, відеороликів, каталог із зображенням товарів ( landing page)

Изображение слайда
23

Слайд 23: Промо - сайти. Landing Page

Лендінг пейдж — це цільова сторінка в Інтернеті, завдання якої спровокувати відвідувача виконати просту дію: залишити заявку на товар чи послугу, або подзвонити за вказаними на сайті номерами телефону з конкретним питанням. Це автономна інтернет-сторінка, на яку потенційний клієнт потрапляє після кліка по рекламному оголошенню або в результаті пошуку. Лендінги досить широко використовуються в маркетингу через принципові відмінності від традиційного веб-сайту: якщо головна мета лендінгу — вчинення відвідувачем певного (цільового) дії, веб-сайти мають багатоцільовий характер.

Изображение слайда
24

Слайд 24

Заклик до дії Фрази, які спонукають до дії Кнопка замовлення Велика кнопка, яка виділяється Акції та лічільник Опис акції та лічільник зворотнього відліку для створення ажіотажу та підвищення конверсії сайту Схема роботи Блок, який наочно демонструє схему роботи підприємства Футер Нижня частина сторінки, в якій дублюються контакти та посилання на соціальні мережі Шапка сайту Верхній блок з логотипом підприємства та його контактами Зображення та відео Інформація довіри Позитивні відгуки задоволених клієнтів, сертифікати, винагороди або документи Кнопка замовлення Кнопка замовлення дублюється, розміщується внизу сторінки та спонукає до дії

Изображение слайда
25

Слайд 25: Основні переваги Landing Page

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

Изображение слайда
26

Слайд 26: Приклад и Landing Page

Изображение слайда
27

Слайд 27: 3.2. Класифікація сайтів по технологіях, що використовуються

Изображение слайда
28

Слайд 28: Статичні сайти

Статична сторінка – це сторінка, яка цілком зберігається на сервері і показується відвідувачу у своєму незмінному вигляді. Такі сторінки зберігаються на сервері як документи HTML. Верстаються статичні сторінки вручну. Якщо потрібно змінити вміст сторінки, то доводиться редагувати код HTML у кожної сторінки.

Изображение слайда
29

Слайд 29: Динамічні сайти

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

Изображение слайда
30

Слайд 30: Статичні та динамічні сайти

Изображение слайда
31

Слайд 31: Статичні сайти

Изображение слайда
32

Слайд 32: Динамічні сайти

Изображение слайда
33

Слайд 33: 4. Етапи розроблення web- сай тів

Изображение слайда
34

Слайд 34: Основні етапи

Изображение слайда
35

Слайд 35: 1. Підготовка проекту

Мета першого етапу – допомогти сформулювати свої переваги, та визначити, які вимоги висуваються до дизайну і технологічної основи веб-проекту. Аналіз поставленого завдання дозволить ще на стадії проектування ідеї закласти ті фундаментальні складові, які зроблять сайт максимально привабливим для користувачів і функціональним для бізнесу. В ході попереднього етапу розробки складається « Бриф » ( анкета для замовника), що містить вимоги і побажання до проекту.

Изображение слайда
36

Слайд 36: 2. Складання технічного завдання (ТЗ )

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

Изображение слайда
37

Слайд 37: 3. Дизайн та розроблення архітектури

Етап включає в себе такі стадії: розробка навігації; робота над інтерфейсом, призначеним для користувача. Таким чином, створюється дизайн веб-сторінок, передбачених технічним завданням, що містить промальовування всіх графічних (банерів, кнопок, фотографій) і текстових елементів. Для своєчасного виконання робіт на даному етапі партнер надає всі інформаційні матеріали для розміщення. Далі дизайн узгоджується і затверджується (в письмовому вигляді або в електронній формі).

Изображение слайда
38

Слайд 38: 4. Технологічний етап проекту

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

Изображение слайда
39

Слайд 39: 5. Наповнення контентом

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

Изображение слайда
40

Слайд 40: 6. Розміщення в мережі, тестування та запуск

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

Изображение слайда
41

Слайд 41

Изображение слайда
42

Слайд 42

Изображение слайда
43

Слайд 43: 4. Створення web- сторінок. Основи HTML

Изображение слайда
44

Слайд 44: HTML

HTML ( HyperText Markup Language, мова розмітки гіпертексту) — стандартна мова розмітки документів у мережі Internet. HTML розглядають як систему верстки, яка визначає склад і розташування елементів на web -сторінці. Інформація на сайті, спосіб її подання та оформлення залежать винятково від розробника і тих цілей, які він перед собою ставить. HTML призначений для виділення логічних частин документа. Текстові документи, що містять розмітку на мові HTML, традиційно мають розширення *. html або *. htm.

Изображение слайда
45

Слайд 45: 1. Основні елементи web- строрінок. Теги ( Tag)

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

Изображение слайда
46

Слайд 46: Основні групи тегів за призначенням і сферою дії :

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

Изображение слайда
47

Слайд 47: Властивості тегів

Всі теги починаються з символу < і закінчуються символом >. Після відкритої кутової дужки розміщують ключове слово – ідентифікатор тегу, який вказує на його призначення. Регістр в назвах тегів не має значення. Розрізняють одиночні і парні теги. Приклади тегів HTML : < title >, < body >, < table >, </a>, < img > </ div >.

Изображение слайда
48

Слайд 48: Властивості тегів

Зазвичай тег впливає на певний фрагмент документа, наприклад абзац. У таких випадках використовують парні теги ( відкриваючий і закриваючий ). Перший з них задає ефект, а другий – припиняє його дію. Закриваючий тег починається з символу / ( слеш ) Приклади парних тегів: < html > </ html >, <b> </ b>, < head > </ head >, <h3> </ h3>. Все, що записано між відкриваючим і закриваючим тегом називають вмістом тегу.

Изображение слайда
49

Слайд 49

Изображение слайда
50

Слайд 50: Атрибути тегів

Відкривають теги можуть містити параметри ( атрибути ), які впливають на ефект, створюваний тегом. Атрибути – це додаткові ключові слова, відокремлені від основного ключового слова тегу і один від одного символами пробілу. Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибуту, як правило, беруть у лапки. У загальному випадку тег записується наступним чином: < ім ’ я_тег у атрибут1 = "значення1" атрибут2 = "значення2"...> Закриваючі теги атрибутів не містять

Изображение слайда
51

Слайд 51

< body bgcolor = ”red” > Some text. </ body > Відкриваючий тег Атрибут – задає параметри елементу Значення атрибуту Вміст тегу Закриваючий тег Тег – ключове слово мови HTML

Изображение слайда
52

Слайд 52: 2. Семантика в html

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

Изображение слайда
53

Слайд 53: Структура html- сторінки

Тег  < body > предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера Тег < head > предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую Тег < html > — це контейнер, в якому знаходиться весь вміст сторінки, включаючи теги < head > і < body >

Изображение слайда
54

Слайд 54: Код html- сторінки

<html> <head> <title> Приклад HTML -документу <body> <h1> Приклад HTML -документу <p> Перша web- сторінка ! Код html- сторінки < html > < head > < title > Приклад HTML-документу </title> </head> <body> <h1> Приклад HTML-документу </h1> <p> Перша web- сторінка ! </p> < / body > </ html >

Изображение слайда
55

Слайд 55: Вкладеність елементів в HTML

Додавання одного елемента в інший називається вкладеністю. Кажуть, що «елемент <p> вкладений елемент < body >». Графічне зображення вкладеності елементів на веб-сторінці можна порівняти з промальовуванням генеалогічного древа.

Изображение слайда
56

Слайд 56: Код html- страницы

‹ html › завжди знаходиться в корені дерева " html " містить два вкладених елемента : " head " і " body ". Ви можете називати їх " дітьми " елемента " html " " body " вкладений в елемент " html ", тому ми говоримо, що " body " – " дитина " " html " " title " вкладений в елемент " head " "p" – " батько " " strong","body " – " батько " " p" і " h1", "html" – " батько " " body"

Изображение слайда
57

Слайд 57: Блокові і рядкові елементи ( HTML block and inline tags )

Всі елементи HTML діляться на дві групи: блочні ( block ); рядкові ( inline ).

Изображение слайда
58

Слайд 58: Блочні елементи

Це великі блоки web -сторінки. При відображенні браузер автоматично додає розрив рядка до і після блокового елемента, при цьому він займає всю доступну ширину (за замовчуванням відображається на веб-сторінці у вигляді прямокутника). Висота блокового елемента обчислюється браузером автоматично, виходячи з обсягу його вмісту. Текст в блокових елементів за замовчуванням вирівнюється по лівому краю.

Изображение слайда
59

Слайд 59: Блочні елементи

Зазвичай блокові елементи використовуються, щоб розділити вміст web - сторінки на логічні блоки ( наприклад, заголовок (шапка сайту), меню, блок з контентом, нижній колонтитул та ін ). Блокові елементи не можна вкладати в рядкові, винятком є тільки посилання і комірки таблиць, всередині яких за стандартом HTML5 можуть бути розташовані блокові елементи. Examples of Block Elements : < p>, <div>, <form>, <header>, < nav >, < ul >, <li>, and <h1 >.

Изображение слайда
60

Слайд 60: Рядкові елементи

Використовуються для розмітки частин вмісту елементів. Ширина рядкового елемента дорівнює об'єму вмісту. На відміну від блокових елементів браузер не додає розрив рядка до і після рядкового елемента, тому, якщо кілька рядкових елементів йдуть підряд один за одним, вони розташовуються на одній лінії, і переносяться на інший рядок при необхідності. У більшості випадків всередину рядкових елементів допустимо розміщувати інші малі елементи, вставляти блокові елементи всередину рядкових заборонено. Examples of Inline Elements: <a>, <span>, <b>, < em >, < i >, <cite>, <mark>, and <code>

Изображение слайда
61

Слайд 61: Взаємодія блокових та рядкових елементів

Изображение слайда
62

Слайд 62: Заголовки

Заголовки є блочними елементами і в них є шість різних рангів < h 1> < h 6>. Заголовки допомагають швидко розбити вміст і встановити ієрархію, і вони є ключовими ідентифікаторами для користувачів, що переглядають сторінку. Заголовки допомагають пошуковим системам індексувати і визначати вміст на сторінці. 3. Оформлення тексту html

Изображение слайда
63

Слайд 63: Заголовки

Заголовки повинні бути використані в порядку, що відповідає змісту сторінки. Основний заголовок сторінки або розділу повинен бути розмічений за допомогою елемента <h1>, а наступні заголовки повинні використовувати елементи <h2>, <h3>, <h4>, <h5> <h6>, при необхідності. Кожен рівень заголовка повинен застосовуватися з семантичним змістом і не повинен використовуватися для того, щоб зробити текст жирним або великим, для цього є інші, більш ефективні способи.

Изображение слайда
64

Слайд 64: Код html- сторінки

Изображение слайда
65

Слайд 65: Теги форматування тексту

Тег Описание Пример <p>…</p> Абзац - <br> Розрив строки - <b>…</b> Напівжирний текст Текст <strong>…</strong> <em>…</em> Курсив Текст < i >…</ i > <u>…</u> Підкреслений текст Текст <s>…</s> Перекреслений текст Текст <sub>…</sub> Нижній індекс х 2 <sup>…</sup> Верхній індекс х 2

Изображение слайда
66

Слайд 66

Жирний текст Є два елементи, які виділять текст жирним шрифтом: елементи < strong > і <b>. Важливо розуміти семантичну різницю між ними. Перший елемент <b> – встановлює жирний текст, а < strong > – визначає важливість поміченого тексту. Теоретично, якщо скористатися, наприклад, мовним браузером, то текст, оформлений за допомогою елементів <b> і < strong >, буде відзначений по-різному. Однак вийшло так, що в популярних браузерах результат їх використання рівнозначний.

Изображение слайда
67

Слайд 67

Курсивний текст Для курсивного тексту, на якому тим самим робиться акцент, ми будемо використовувати рядковий елемент < em >. Як і з елементами для жирного тексту, є два різних елемента, які встановлюють курсивний текст, кожен зі своїм семантичним змістом. Елемент < em > семантично застосовується щоб зробити акцент на тексті, це найбільш популярний варіант для курсиву. Інший варіант — це елемент <i>, він семантично застосовується для передачі тексту іншим голосом або тоном.

Изображение слайда
68

Слайд 68: Коментарі

Іноді для того, щоб краще розуміти html -код, вставляють в текст примітки – коментарі. Вони починаються з спеціального тега <!--. Будь записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа. Закінчують коментар тегом -->. Коментар може містити будь- які символи, крім >, а отже, не може включати в себе теги.

Изображение слайда
69

Слайд 69: Цитати

Тег Описание <q>…</q> Призначений для виділення коротких цитат у тексті. Текст всередині цього тега автоматично обрамляється лапками < cite >…</ cite > Використовується для того, щоб виділити джерело цитати, назва твору чи автора цитати. Браузери зазвичай встановлюють текст всередині контейнера курсивом <blockquote>…</blockquote> Призначений для виділення довгих цитат всередині документа. Текст, позначений цим тегом, відображається як вирівняний блок з відступами зліва і справа ( приблизно по 40 пікселів ), а також з відбиттям зверху і знизу

Изображение слайда
70

Слайд 70: 4. Елементи < div> та <span>

< div > Елемент < div > є універсальним блоковим елементом і призначений для групування елементів документа з метою зміни виду вмісту через стилі.

Изображение слайда
71

Слайд 71: Код html- страницы

Изображение слайда
72

Слайд 72: Код html- страницы

Изображение слайда
73

Слайд 73: <span>

Универсальный строчный элемент < span > предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Например, внутри абзаца (<p>) можно изменить цвет и размер первого слова, если его выделить с помощью элемента < span > и задать для него желаемый стиль.

Изображение слайда
74

Слайд 74: Код html- сторінки

Изображение слайда
75

Слайд 75: Код html- сторінки

Изображение слайда
76

Слайд 76: Дякую за увагу !

к.е.н., доцент кафедри інформаційного менеджменту Корзаченко О.В.

Изображение слайда
77

Слайд 77: ГИПЕРССЫЛКИ ( HTML LINKS )

Изображение слайда
78

Слайд 78: 1. Создание ссылок на другие страницы

Элемент <a> является одним из самых важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Содержимое тега <a> выступает в качестве метки для ссылки. В браузере метка отображается в виде подчеркнутого текста, чтобы показать вам, что можно щелкнуть на нем кнопкои ̆ мыши.

Изображение слайда
79

Слайд 79: Адреса на web- страницах

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде независимо от имени сайта или веб-страницы, где прописана ссылка. Ссылки на другие сайты за пределами текущего требуют абсолютный путь, где значение href должно включать полный домен. Ссылка на Google http://google.com для атрибута href начинается с http и в этом случае включает домен. com. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Так как ссылка указывает на другую страницу этого же сайта, значение href включает в себя только имя связанной страницы: about.html, например.

Изображение слайда
80

Слайд 80: Примеры относительных адресов

Адрес Описание / Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. /demo/ /images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта. ../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта. manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога

Изображение слайда
81

Слайд 81: 2. Открытие ссылки в новом окне

Одной из доступных особенностей связанной с гиперссылками является способность определить, где ссылка откроется при щелчке. Как правило, ссылки открываются в том же окне, в котором по ним щёлкнули, однако ссылки также могут быть открыты в новых окнах. Для открытия ссылки в новом окне используйте атрибут target со значением _ blank. Этот атрибут определяет, где именно будет отображаться ссылка, а значение _ blank задаёт новое окно :

Изображение слайда
82

Слайд 82: 3. Скачивание файла по ссылке

При наличии атрибута download браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.

Изображение слайда
83

Слайд 83: 4. Добавление описания ссылки

Атрибут title добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает:

Изображение слайда
84

Слайд 84: 5. Создание ссылок на адрес электронной почты

Иногда мы хотим создать гиперссылку на наш адрес электронной почты, например, текст гиперссылки « Email Me » при щелчке открывает клиент электронной почты пользователя, заданный по умолчанию и предварительно заполняет часть данных. Как минимум, адрес электронной почты и другую информацию, такую как тема и текст письма.

Изображение слайда
85

Слайд 85

Для создания такой ссылки значение атрибута href должно начинаться с mailto: Затем следует адрес электронной почты, на который должно быть отправлено сообщение : Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса – параметр subject :

Изображение слайда
86

Слайд 86

Для автоматического заполнения поля текста сообщения используют параметр body : Например :

Изображение слайда
87

Слайд 87: 6. Создание ссылку внутрь страницы

Для создания ссылок внутрь страницы принято использовать атрибут id, который зачастую рассматривают как способ уникальной идентификации того или иного элемента. Благодаря id у элементов страницы формируются определенные закладки (якоря), на которые можно ссылаться. Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.

Изображение слайда
88

Слайд 88: Как организовать ссылку такого типа?

Найдите то место на странице, которое вы хотите использовать в качестве «места приземления». Это может быть любои ̆ текст на странице, но чаще применяется короткии ̆ фрагмент текста заголовка. Выберите идентификационное имя для фрагмента и вставьте атрибут id в открывающии ̆ тег соответствующего элемента. Чтобы сослаться на якорь на странице, просто добавьте символ «#» в конец вашеи ̆ ссылки, за которым укажите имя якоря.

Изображение слайда
89

Слайд 89: Примеры

Изображение слайда
90

Слайд 90: 7. Изображение в качестве ссылок

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>. Рассмотрим для начала, как отобразить картинку на веб-странице. Элемент < img > предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src.

Изображение слайда
91

Слайд 91: Основные атрибуты элемента < img >

Название Описание alt Альтернативный текст для изображения src Путь к графическому файлу height Высота изображения. longdesc Указывает адрес документа, где содержится аннотация к картинке. width Ширина изображения. usemap Ссылка на элемент < map >, содержащий координаты для клиентской карты-изображения

Изображение слайда
92

Слайд 92: СОЗДАНИЕ СПИСКОВ ( HTML LISTS)

Изображение слайда
93

Слайд 93: Списки

Дл я создания списков в HTML нужны два элемента, которые создают список только при условии использования их обоих. Первый применяется для разметки каждого пункта списка. Второй определяет тип создаваемого списка: упорядоченный (нумерованный) или неупорядоченный (маркированный). ̆ неупорядоченныи ̆ список - < ul > упорядоченныи ̆ список - < ol > элемент списка - < li >

Изображение слайда
94

Слайд 94: Как сформировать список?

Поместите каждый элемент списка в HTML – элемент <li >. Чтобы создать список, нужно поместить каждый его пункт в отдельный HTML-элемент <li>. Иными словами, нужно оградить этот пункт списка слева открывающим тегом <li>, а справа — закрывающим </li>. Как и для всех других HTML-элементов, текст внутри тегов может быть любой длины. Кроме того, его можно разбить на любое количество строк. Если вы используете элемент < ol >, то пункты списка будут пронумерованы, если элемент < ul >, то список будет отображен как маркированныи ̆. Ниже приведен пример того, как правильно заключить пункты списка в элемент < ol >.

Изображение слайда
95

Слайд 95: Атрибуты тегов списка

Название Описание <ol> <ul> <li> type Устанавливает вид маркера списка устарел <ol> reversed Нумерация в списке становится по убыванию (3,2,1 ). Html5 start Задаёт число, с которого будет начинаться нумерованный список Html5 <li> value Число, с которого будет начинаться нумерованный список Html5

Изображение слайда
96

Слайд 96: Синтаксис

Изображение слайда
97

Слайд 97: Элементы < dl >, < dt >, < dd >

Элемент < dd > входит в тройку элементов < dl >, < dt >, < dd >, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера < dl >, куда входит элемент < dt > создающий термин и элемент < dd > задающий описание этого термина.

Изображение слайда
98

Последний слайд презентации: Лекція 1 « Технології та інструменти Web -дизайну. Основи створення Web -

Изображение слайда