Уроки 55-56. Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути.
Тема уроку: “Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути”
Пригадаємо…
- З яких етапів складається процес створення сайта?
- Чи є процес «розкрутки» сайта обов’язковим?
- Що таке хостинг сайту?
Прочитайте!
Усі HTML-редактори можна поділити на дві категорії: текстові й графічні.
Текстові передбачають набір коду вручну, хоча й зі значною автоматизацією цього процесу. Їхні інструменти дають змогу автоматизовано вставляти до документа потрібні теги його розмітки.
У графічних HTML-редакторах веб-сторінки формуються приблизно в такий самий спосіб, як і під час створення макетів звичайних документів, коли користувач може обрати потрібний йому шаблон веб-сторінки, а потім поступового його заповнювати контентом.
Структура документа HTML
Теги – службові символи, що являють собою команди HTML, які вказує браузеру, як слід відображати Web-сторінку. Теги починаються зі знака <, за яким потрібно писати ключове слово, і закінчується знаком >.
- <html></html> – тег HTML вказує початок і кінець HTML документа.
- <head></head> – тег HEAD (заголовок HTML-документа) містить інформацію, що сточується документа в цілому.
- Тег TITLE установлює заголовок HTML-документа, виведений у рядку заголовка вікна браузера. Приклад: <title>перша сторінка</title>.
Елемент тегу body
- <body text=“red”> … <body /> Атрибут TEXT установлює кольори для всього тексту HTML-документа. Колір може бути зазначений за допомогою назви або шістнадцяткового коду.
- Атрибут BGCOLOR установлює кольори тіла HTML-документа.
Приклад: <body BGCOLOR= “yellow” text=“navy”> Мій сайт <body />
Теги заголовків
<h1></h1> Тег H1 визначає заголовок першого рівня (самі великі букви в заголовку). Усього є шість рівнів заголовків. <h6></h6>
<b></b> – тег b установлює відображення тексту в жирному накресленні.
<i></i> – тег і установлює відображення тексту курсивом.
<P> – тег означає початок нового абзацу. Його можна записувати в кінці попереднього абзацу.
<HR> – у рядку буде проведено горизонтальну лінію
Документ HTML із усіма структурними тегами має вигляд:
<HTML>
<HEAD><TITLE>Заголовок документа</TITLE></HEAD>
<BODY>
<H1>Заголовок підрозділу рівня 1</H1>
<H2>Заголовок підрозділу рівня 2</H2>
<P>текст документу, абзац 1</P>
<P>текст документу, абзац 2
</BODY>
</HTML>
Як обмежник абзаців можна використовувати горизонтальну лінійку. Цей елемент задається непарним тегом <HR>. Довжина й товщина задаються атрибутами тегу <HR>. Наприклад: <HR ALIGN=”RIGHT” SIZE=”10″ WIDTH=”50%”>.
Цей тег створює горизонтальну лінійку завширшки у 10 пікселів, що займає половину ширини вікна з вирівнюванням по правому краю.
Виконання практичного завдання
Протягом кількох уроків ми з вами працюватимемо над створенням власного сайту. На сьогоднішньому уроці ви повинні визначитись із темою (можна вибрати одну із запропонованих учителем, або власну тему), а також використовуючи покрокові інструкції розпочати роботу над сайтом.
- Моє рідне місто.
- Моя школа.
- Моє захоплення.
- Улюблені місця відпочинку.
- Історія мого міста.
- Ким я бачу себе у майбутньому.
Завантажити інструкційну картку із завданням Завантажити
Якщо у вас немає можливості працювати за ПК, замість практичних завдань можна дати письмову відповідь на запитання:
Використовуючи матеріал сайту дайте відповіді на запитання:
- Що таке теги, для чого вони використовуються?
- Які теги заголовків ви знаєте?
- Які теги використовуються для проведення горизонтальної лінії, для абзацу та для відображення тексту в жирному накресленні?
- Запишіть фрагмент сайту, який би вивів текст синього кольору на блакитному фоні.
-
Кодування даних
-
Апаратне забезпечення комп'ютера
-
Опрацювання текстових даних
- Урок 7. Повторення раніше вивченого матеріалу з теми “Текстовий процесор”
- Урок 8. Пошук та заміна фрагментів тексту. Створення, редагування та форматування символів, колонок, списків в текстовому документі. Недруковані знаки.
- Урок 9. Створення, редагування та форматування таблиць.
- Урок 10. Створення, редагування та форматування графічних об’єктів в текстовому документі.
- Урок 12. Практична робота №3. Створення текстового документа, що містить об’єкти різних типів.
- Урок 14. Автоматизоване створення змісту.
- Урок 15. Практична робота №4. Форматування документу. Створення титульної сторінки. Автоматизоване створення змісту.
-
Алгоритми та програми. Основи подвійно- та об'єктно-орієнтованого програмування
- Урок 13. Поняття мови програмування. Складові мови програмування.
- Урок 14. Знайомство з середовищем програмування.
- Урок 15. Поняття події, обробника події.
- Урок 16. Практична робота №5. Створення об’єктно-орієнтованої програми, що відображає вікно повідомлення.
- Урок 17. Елемент керування “кнопка”.
- Урок 18. Елемент керування “напис”.
- Урок 19. Складання програм, що обробляють натискання кнопок та визначають вміст написів на формі.
- Урок 20. Практична робота №6. Створення програми з кнопками та написами.
-
Алгоритми роботи з об'єктами та величинами
- Урок 21. Поле його властивості (Python)
- Урок 22. Величини (змінні і константи), їхні властивості. (Python)
- Урок 23. (Python) Практична робота №7. Складання та виконання лінійних алгоритмів опрацювання величин в навчальному середовищі програмування.
- Урок 24. Налагодження програм. (Python)
- Урок 25. Використання налагоджувача програм у візуальному середовищі програмування. Покрокове виконання програм, перегляд значень змінних під час виконання програми. (Python)
- Урок 26. Величини логічного типу, операції над ними.
- Урок 27. Алгоритми з розгалуженнями для опрацювання величин. (Python)
- Урок 28. Алгоритми з розгалуженнями для опрацювання величин. (Python)
- Урок 29 (Python). Складені умови. Пошук найбільшого та найменшого серед кількох значень.
- Урок 30. (Python) Інструктаж з БЖД. Практична робота 9. Складання та виконання алгоритмів з розгалуженнями для опрацювання величин.
- Урок 31. (Python) Елементи для введення даних: прапорець.
- Урок 32. (Python) Елементи для введення даних: перемикач.
- Урок 33. (Python) Алгоритми з повтореннями для опрацювання величин. Цикл з лічильником.
- Урок 34. (Python) Цикл з передумовою. Складання алгоритмів опрацювання величин у навчальному середовищі програмування, їх налагодження і виконання.
- Урок 35. (Python) Співвідношення типів даних та елементів для введення даних, зчитування даних з елементів введення.
- Урок 36. (Python) Розв’язання задач
- Урок 37. (Python) Практична робота №9. Складання та виконання алгоритмів з повтореннями та розгалуженнями для опрацювання величин.
- Урок 38 (Python). Повторення вивченого матеріалу.
- Урок 21. Поле, його властивості.
- Урок 22. Величини (змінні і константи), їхні властивості.
- Урок 23. Практична робота №7. Складання та виконання лінійних алгоритмів опрацювання величин в навчальному середовищі програмування.
- Урок 24. Налагодження програм.
- Урок 25. Використання налагоджувача програм у візуальному середовищі програмування. Покрокове виконання програм, перегляд значень змінних під час виконання програми.
- Урок 28. Алгоритми з розгалуженнями для опрацювання величин.
- Урок 30. Складені умови. Пошук найбільшого та найменшого серед кількох значень.
- Урок 30. Елементи для введення даних: перемикачі, прапорці.
- Урок 31. Елементи для введення даних: випадаючі списки.
- Урок 32. Алгоритми з повтореннями для опрацювання величин. Цикл з лічильником.
- Урок 33. Цикл з передумовою. Складання алгоритмів опрацювання величин у навчальному середовищі програмування, їх налагодження і виконання.
- Урок 36. Практична робота №9. Складання та виконання алгоритмів з повтореннями та розголуженнями для опрацювання величин.
- Урок 37. Відображення базових графічних примітивів. Відображення рисунків із зовнішніх файлів.
- Урок 38. Практична робота №10. Складання та виконання алгоритмів з графічним відобреженням даних.
-
Опрацювання мультимедійних об’єктів
- Урок 39. Поняття мультимедіа. Формати аудіо- та відеофайлів.
- Урок 40. Додавання відеокліпів, звукових ефектів і мовного супроводу до слайдової презентації.
- Урок 41. Елементи анімації. Інструктаж з БЖД. Практична робота 11. Розробка презентацій з елементами анімації, відеокліпами, звуковими ефектами та мовним супроводом.
- Урок 42. Програмне забезпечення для опрацювання об’єктів мультимедіа. Захоплення аудіо та відео, створення аудіо-, відео фрагментів. Засоби перетворення аудіо- та відеоформатів.
- Урок 43. Програми для редагування аудіо- та відеоданих. Загальні поняття про відеофільм.
- Урок 44. Побудова аудіо- та відеоряду. Додавання до відеокліпу відеоефектів та налаштування переходів між його фрагментами.
- Урок 45. Налаштування часових параметрів аудіо- та відеоряду. Інструктаж з БЖД. Практична робота 12. Створення відеокліпу. Додавання відеоефектів, налаштування часових параметрів аудіо- та відеоряду.
- Урок 46.Сервіси розміщення аудіо та відео файлів в Інтернеті.
- Урок 47. Інструктаж з БЖД. Практична робота 13. Розміщення аудіо- та відеоматеріалів в Інтернеті.
- Урок 48. Підсумковий урок з теми: «Опрацювання мультимедійних об’єктів»
-
Створення та публікація веб-ресурсів
Створення та публікація веб-ресурсів
- Урок 49. Структура веб-сайтів, різновиди веб-сайтів. Різновиди веб-сторінок. Етапи створення веб-сайтів. Основи веб-дизайну
- Уроу 50. Основи веб-дизайну
- Урок 51. Поняття про засоби автоматизованої розробки веб-сайтів, редактор веб-сайтів з графічним інтерфейсом
- Урок 52. Поняття про систему керування вмістом сайту. Поняття хостингу. Автоматизоване створення статичної веб-сторінки, вибір її типу й оформлення.
- Урок 53. Наповнення веб-сторінки текстом та графічним матеріалом, створення гіперпосилань, завантаження файлів
- Урок 54. Інструктаж з БЖД. Практична робота №14. Автоматизоване створення веб-сайту
- Уроки 55-56. Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути.
- Урок 57. Інструктаж з БЖД. Практична робота 15. “Створення веб-сторінки за допомогою «Мови гіпертекстової розмітки»
- Урок 58. Малюнки. Гіперпосилання
- Урок 59-60. Таблиці на веб-сторінках. Списки на веб-сторінках
- Урок 61. Інструктаж з техніки безпеки. Практична робота 16 «Створення веб-сторінки за зразком з використанням таблиць, списків та малюнків»
0.00 на основі 0 рейтингів