План : 1. Поняття HTML. - Редактори для створення веб - сторінок. - Інструментарій - Формати файлів, в яких можна зберігати документи 2. Теги - Теги верхнього. - презентация

1 План : 1. Поняття HTML. - Редактори для створення веб - сторінок. - Інструментарій - Формати файлів, в яких можна зберігати документи 2. Теги - Теги верхнього рівня - Блокові елементи - Рядкові елементи 3. Рішення практичних завдань В ВЕДЕННЯ В HTML ЛЕКЦІЯ 1

2 HTML (HyperText Markup Language- мова розмітки гіпертексту) - це система верстки, яка визначає, як і які елементи повинні розташовуватися на веб- сторінці. Для ефективної роботи при написанні коду HTML знадобляться наступні програми: Текстовий редактор (Блокнот) Браузер для перегляду результатів (Google Chrome) Валідатор - програма для перевірки синтаксису HTML і виявлення помилок в коді. (Он-лайн валідатор - Tidy) Графічний редактор (Photoshop) Довідник з тегами HTML.

3 Формати файлів, в яких можна зберігати документи - Для HTML-файлів розширення *.НТМ або *.HTML. - Файли CSS-стилів використовується розширення *.CSS - Розширення *.JS - це текстовий файл, що містить код JavaScript Тег це спеціальні слова, які оточені з обох сторін кутовими дужками. є два тега – тег, що відкриває: і тег, що закриває:.

4 Теги діляться на наступні типи : теги верхнього рівня ; теги заголовка документа ; блокові елементи ; рядкові елементи ; універсальні елементи ; списки ; таблиці ; фрейми.

5 Теги верхнього рівня СинтаксисОзнака... Визначає кореневий тег... HTML / XHTML документ Визначає довідкову інформацію про документ.... Визначає тіло документа. Містить все видиме вміста HTML сторінки

6 Online обучение: HTML Основной текст.

7 Блокові елементи СинтаксисОзнака... Визначає заголовок в тексті HTML... Визначає параграф ( абзац ) тексту. Малює горизонтальну лінію … Задає блок попередньо форматованого тексту. … Впорядковані списки … Неупорядковані списки … Елементи ( пункти ) в списках … блоковий елемент, призначений для виділення фрагмента документа з метою зміни виду вмісту.

8 Строкові елементи СинтаксисОзнака... Визначає посилання.... Визначає жирний текст. Визначає перенесення на новий рядок.... Встановлює курсивне накреслення шрифту.... Визначає виділений текст.... Визначає верхній індекс елементу.... Визначає нижній індекс елемента.... Визначає підкреслений текст.

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

10 Завдання для закріплення матеріалу: 1. Напишіть два заголовка 1 рівня з будь-яким текстом всередині 2. Напишіть один абзац з будь-яким текстом всередині 3. Напишіть один нумерований список, з одним елементом і з будь-яким текстом всередині елемента 4. Напишіть один абзац з текстом, всередині якого слово виділено курсивом. 5. Напишіть один абзац з текстом, всередині якого слово виділено жирним шрифтом. 6. Напишіть 1заголов 4 рівня з будь-яким текстом всередині 7. Напишіть один ненумерований список, з одним елементом і з будь-яким текстом всередині елемента.

11 Питання: 1. Що таке HTML? 2. Назвіть редактори для створення веб-сторінок та їх можливості. 3. У якому форматі зберігаються документи-html? Яке розширення краще використовувати.htm або.html? 4. Що таке тег? 5. Назвіть основні теги (теги верхнього рівня) HTML-документа. 6. У чому різниця між блоковими і строковими елементами? Д / з 1. Конспект лекцій. 2. Практична частина: Виконати завдання на комп'ютері. 1. Складіть невпорядкований список бажань (список повинен містити щонайменше 7 бажань). Список повинен мати заголовок 2 рівня. Відсортуйте складений список враховуючи важливість виконання бажань для Вас і створіть на основі цих даних впорядкований список. 3. Самостійна робота 1 «Технології створення веб-сайтів» 4. Самостійна робота 2 «Спецсимволи HTML »

12 Дякую за урок