Embedded Files
Поняття про мову розмічання гіпертекстового документа.pptxЦілі:
- навчальна: сформувати поняття про мову розмічання гіпертекстового документа;
- розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;
- виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація.
Програмне забезпечення: браузер, офісні програми.
Хід уроку
І. Організаційний етап
· привітання
· перевірка присутніх
· перевірка готовності учнів до уроку
ІІ. Актуалізація опорних знань
ІІІ. Мотивацій навчальної діяльності
IV. Вивчення нового матеріалу
Пояснення вчителя з елементами демонстрування презентації
(використовуються можливості локальної мережі кабінету або проектор)
Який вигляд має код розмітки веб-сторінки мовою HTML?
Типова проста веб-сторінка складається з текстових блоків (абзаців, списків, таблиць), кількох малюнків невеликих розмірів, горизонтальних розмежувальних ліній та гіперпосилань. Більш складні веб-сторінки містять структуровані сторінки, які називають фреймами, елементи управління (кнопки, перемикачі, поля введення), динамічні ефекти та графічні рухомі об’єкти тощо.
Згідно із чинним стандартом абзаци на веб-сторінці розмежовуються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний за одним із країв або по центру екрана. Браузер автоматично масштабує горизонтальне відображення різних елементів сторінки, враховуючи характеристики монітора комп’ютера користувача й розміри вікна, у якому демонструється веб-сторінка.
Крім текстових даних веб-сторінка містить невидимий для користувача HTML-код, тобто набір тегів — команд, що визначають розмітку документа. Під час відкриття веб-сторінки браузер використовує цей набір для відображення її елементів у заданій розмітці.
Назва кожного тега — це одна або декілька літер, взятих у кутові дужки (< та >), яким відповідають певні англійські слова, що пояснюють їхнє призначення. Наприклад, назва тега <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту веб-сторінки.
Тег записують так: <Тег>...текст... </Тег>.
Відкриваючий тег <Тег> позначає місце початку дії тега на сторінці, текст — фрагмент тексту, до якого буде застосовано форматування, закриваючий тег </Тег> визначає місце закінчення дії тега на сторінці. Пару тегів (відкриваючий і закриваючий) називають контейнером. Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ «/». Більшість тегів є парними, однак є й одинарні.
Один тег може мати кілька параметрів — атрибутів. Наприклад,
<Тег параметр_1= значення_1 параметр_2=значення_2 >...текст, що відображається на сторінці... </Тег>.
Закриваючий тег не містить жодних параметрів, а лише вказує на місце закінчення дії контейнера. На відміну від нього у відкриваючому тегу вказуються всі необхідні параметри.
Правила запису параметрів: після назви тега після пропуску зазначається ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі зазначають «=» й у лапках записують значення параметра (наприклад, ALIGN= «center»). За необхідності далі вказують інші параметри через пропуск. Після останнього параметра ставлять символ >.
Теги можуть бути вкладеними, тобто один контейнер може перебувати всередині іншого, тоді загальний запис виглядатиме так:
<Тег1>...текст...<Тег2>...текст... </Тег2>...текст... </Тег1>. Для підготовки найпростішого htm-файла можна використати текстовий редактор Блокнот, після написання коду в якому слід задати ім’я файла та вказати розширення — htm.
Наприклад, щоб отримати веб-сторінку, як показано на малюнку, потрібно набрати код.
<HTML>
<HEAD>
<TITLE> Найпростіша веб-сторінка </TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів </BODY>
</HTML>
Зрозуміло, що веб-сторінка реального сайта матиме такі самі складові коду, однак набагато більше тегів і їхніх параметрів. Щоб переглянути цей код, потрібно в меню браузера обрати вказівку Перегляд HTML-коду.
Які засоби використовують для створення веб-сайта?
Процес створення статичних веб-сторінок, з яких може складатися сайт, фактично полягає в розмітці гіпертекстових документів, що здійснюється за допомогою мови розмітки. Розмітка гіпертексту не залежать від браузера, у середовищі якого відображається веб-сторінка. Тому одні й ті самі гіпертекстові документи можуть по-різному відображатися за допомогою різних браузерів, хоча для більшості простих документів їхній вигляд буде подібним.
Створювати веб-сторінки можна за допомогою звичайного текстового редактора або спеціального HTML-редактора.
Текстові редактори (наприклад, Блокнот) дають змогу, знаючи призначення та опис тегів мови розмітки, створювати веб-сторінки «вручну», без автоматизації. Для прискорення цього процесу до текстових процесорів було додано спеціальні функції, які дають можливість вставляти гіперпосилання до тексту та зберігати документ у форматі HTML. Крім того, є спеціальні програми — HTML-редактори, які дають змогу автоматизувати цей процес. Такі програми належать до засобів автоматизованої розробки веб-сайтів.
Усі HTML-редактори можна поділити на дві категорії: текстові й графічні. Перші передбачають набір коду вручну, хоча й зі значною автоматизацією цього процесу. Їхні інструменти дають змогу автоматизовано вставляти до документа потрібні теги його розмітки. Здебільшого теги не містять додаткових параметрів форматування об’єкта, а лише вказують браузеру, який саме спосіб форматування застосований. Тому веб- сторінка, створена за допомогою такого редактора, має простий вигляд.
У графічних HTML-редакторах веб-сторінки формуються приблизно в такий самий спосіб, як і під час створення макетів звичайних документів, коли користувач може обрати потрібний йому шаблон веб-сторінки, а потім поступово його заповнювати текстом, малюнками й зображеннями, гіпертекстовими посиланнями, таблицями та спеціальними додатковими елементами. При цьому шаблон такої сторінки передбачає вбудовані засоби навігації. Зрозуміло, що такий документ також має HTML-формат, і за потреби його можна переглянути в середовищі звичайного текстового редактора типу Блокнот і, знаючи мову HTML (часто говорять HTML-код), вручну вносити до нього потрібні зміни.
Під час створення веб-сайтів можуть бути використані різні засоби та технології.
Розробка веб-сторінок здійснюється шляхом написання їх HTML-коду.
Як ви вже знаєте, HTML (англ. Hyper Text Markup Language — мова розмічання гіпертексту) — це мова, призначена для визначення структури та оформлення веб-сторінок.
HTML-код веб-сторінок сайту можна написати в текстовому редакторі та зберегти у файлах з розширенням імені htm або html. Для написання коду можна використовувати будь-який текстовий редактор, наприклад:
· Блокнот – стандартну програму Windows
· Notepad++ (notepad-plus-plus.org)
· SublimeText (sublimetext.com)
· Brackets (brackets.io)
· інтегроване середовище розробки NetBeance (netbeans.org) або ін.
HTML-код веб-сторінки може складатися із сотень або навіть тисяч рядків. Для спрощення розробки веб-сторінок можуть використовуватися візуальні редактори HTML-коду, наприклад:
· MicrosoftFrontPage
· AdobeDreamweaverта ін.
У таких редакторах створення веб-сторінок виконується на основі готових шаблонів оформлення, об'єкти сторінок можуть бути вставлені з колекцій об'єктів.
Такі програми є прикладами WYSIWYG-редакторів (англ. What You See Is What You Get — що ви бачите, то ви й отримуєте). HTML-код сторінки в цих середовищах генерується автоматично та зберігається у файлах.
Засобами для автоматичного створення веб-сайтів є також системи керування вмістом веб-сайту WCMS (англ. Web Content Management System — система керування веб-контентом) — програми для організації веб-сайтів чи інших інформаційних ресурсів в Інтернеті чи окремих комп'ютерних мережах.
Вони мають набори шаблонів оформлення веб-сторінок і модулів, які роблять сайт динамічним:
· форум
· стрічка новин
· каталог файлів
· форма опитування
· гостьова книга тощо.
Контент веб-сторінок — текст і нетекстові об'єкти, призначені для розміщення на веб-сторінках — зберігається в базі даних. Генерація веб-сторінок виконується системою за запитом користувача.
HTML-код згенерованої сторінки не зберігається в окремому файлі, а надсилається безпосередньо у браузер користувача.
Сайт під керуванням WCMS має панель управління, що надає адміністратору сайту інструменти для додавання, редагування та видалення матеріалів на сайті.
Популярними системами керування вмістом веб-сайтів є:
WordPress
Joomla
Drupal
Moodle та ін.
Деякі онлайн-системи конструювання сайтів одночасно з послугами з розробки та адміністрування веб-сайтів надають доменне ім'я сайту та послуги хостингу. Такими є системи:
Сайти Google - sites.google.com
Weebly - weebly.com
Webnode - webnode.com.ua
uCoz та ін. - ucoz.ua
У цих системах створення веб-сайту здійснюється у режимі онлайн відразу на сервері хостингу.
Розглянемо одну з технологій створення веб-сайтів — написання коду веб-сторінок з використанням мови HTML. У мові HTML реалізовано засоби для:
• створення документа, у якому визначено структуру тексту та його форматування;
• створення гіперпосилань, які використовуються для переходу до інших сторінок або інших частин поточної сторінки;
• створення форм для реєстрації або опитування відвідувачів сайту;
• включення зображень, звуку, відео- та інших об'єктів до веб-сторінок.
HTML-код веб-сторінки складається з:
1. Тексту, який відображатиметься на сторінці;
2. Тегів (англ. tag — ярлик, ознака) — команд, що визначають:
- структуру документа (заголовки, абзаци, списки, таблиці тощо);
- формат тексту (колір символів тексту, розмір, вид шрифту, колір фону тощо);
- вставлення та розміщення на сторінці нетекстових об'єктів (графічних зображень, анімації, відео- та аудіофайлів тощо) та інше.
Робота з підручником: § 4.2
V. Засвоєння нових знань, формування вмінь
Робота за комп’ютером
1) Повторення правил безпечної поведінки за комп’ютером.
2) Інструктаж учителя.
3) Практична робота за комп’ютерами.
Підручник ст. 119-121
4) Вправи для очей.
VI. Підсумки уроку
Фронтальне опитування
1. Які засоби можуть використовуватися для розробки веб-сайтів? Схарактеризуйте їх.
2. Що таке мова HTML?
3. Із чого складається HTML-код веб-сторінки?
4. Як записують теги в HTML-коді веб-сторінки? Як записують теги з атрибутами?
5. Які обов'язкові елементи структури HTML-коду веб-сторінки?
6. Для чого використовують тег meta з атрибутом charset?
7. Як можна записати значення кольорів для їх відображення на веб-сторінці?
8. Які програмні засоби використовують для створення веб-сторінок; для їх перегляду? Наведіть приклади.
Рефлексія
1. Під час уроку я
- дізнався…
- зрозумів…
- навчився…
2. Найбільше мені сподобалося…
3. На уроках найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
VІI. Домашнє завдання
Створіть HTML сайт на якому зображений Т.Г.Шевченко та написаний його вірш "Заповіт". Зразок виконання знаходиться нижче.
VІІI. Оцінювання роботи учнів
Конспект 10 клас Урок 25 теги.docxPage updated
Google Sites
Report abuse