Урок № 30 11 клас. ОСНОВИ WEB-ДИЗАЙНУ. ПОНЯТТЯ МОВИ HTML. - презентация

1 ОСНОВИ WEB-ДИЗАЙНУ. ПОНЯТТЯ МОВИ HTML Урок клас

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

3 Етапи веб-дизайну Технічне завдання (ТЗ). Структурування інформації Структурування інформації Графічне оформлення Графічне оформлення Верстка Вебмастерінг

4 Елементи веб-дизайну Елементи веб-дизайну Елементи веб-дизайну - це ті абстрактні матеріали, з якими доводиться працювати дизайнерові. До основних елементів дизайну відносяться: простір лінія фігура колір текстура шрифт форма світлотінь розмір

5 HTML - документ HTML – документ – це звичайний текстовий файл з розширенням.htm або.html

6 Структура HTML - документа Назва вікна Web-сторінки Мене звати Світлана. Мені 16 років. Я хочу стати Web-дизайнером.

7 Команди мови HTML тегами Команди мови HTML називаються тегами. Теги бувають : Одинарні Парні

8 Теги гіпертекстового документу Більшість тегів є парними, наприклад, … … - тег означення HTML-файлу … … - описує заголовок документа … … - заголовок Windows-вікна … … - текст, що має відображатися у вікні браузера.

9 Теги заголовку Заголовок1 Заголовок1 - Заголовок 1 Заголовок2 Заголовок2 - Заголовок 2 Заголовок3 Заголовок3 - Заголовок 3 Заголовок4 Заголовок4 - Заголовок 4 Заголовок5 Заголовок5 - Заголовок 5 Заголовок6 Заголовок6 - Заголовок 6

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

11 Теги форматування символів тексту Парні: текст текст - товстий шрифт тексту текст текст - шрифт-курсив текст текст - підкреслений шрифт текст текст - нижній індекс (Н 2 О) текст текст - верхній індекс (а 2 )

12 Теги форматування тексту: текст текст - великий шрифт текст текст - малий шрифт текст текст - виокремлений курсивом текст текст текст - товстий курсив текст абзацу текст абзацу - теги абзацу

13 Теги вирівнювання елемент елемент - вирівнювання до центру елемент елемент - вирівнювання до лівого краю елемент елемент - вирівнювання до правого краю

14 Нумеровані списки в HTML Тип спискаКод HTMLПример Арабские числа Чебурашка 2. Крокодил Гена 3. Шапокляк Прописные буквы латинского алфавита A. Чебурашка B. Крокодил Гена C. Шапокляк Строчные буквы латинского алфавита a. Чебурашка b. Крокодил Гена c. Шапокляк

15 Нумеровані списки в HTML Тип спискаКод HTMLПример Римские числа в верхнем регистре I. Чебурашка II. Крокодил Гена III. Шапокляк Римские числа в нижнем регистре i. Чебурашка ii. Крокодил Гена iii. Шапокляк

16 Марковані списки в HTML Тип спискаКод HTMLПример Список с маркерами в виде круга Первый Второй Третий Список с маркерами в виде окружности Первый Второй Третий Список с квадратными маркерами Первый Второй Третий

17 Теги таблиці - Створює таблицю. - Визначає рядок у таблиці. - Визначає окрему комірку у таблиці. - Визначає заголовок таблиці (нормальна комірка з відцентрованим жирним текстом)

18 Посилання у HTML Для створення посилання необхідно повідомити браузер, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Обидві дії виконуються за допомогою тега. Загальний синтаксис: текст посилання Наприклад: Наприклад: Собаки Текст, разташований між тегами та, за промовчуванням стає синього кольору та підкреслюється

19 ДЯКУЮ ЗА УВАГУ!