Включення на WEB- сторінку тегів управління гіперпосиланнями на інші документи.

Про матеріал

Глобальна Мережа не тільки з'єднала користувачів всього світу один з одним, але й утвердилася у вигляді нових технологій на наших персональних комп'ютерах. Дійсно, користувач, який придбав і встановив на своїй машині Microsoft Office, стає володарем Internet-технології в готовому вигляді, незалежно від того, його комп'ютер підключений до Мережі або ні.

Перегляд файлу

Тема уроку: Включення на WEB- сторінку тегів управління гіперпосиланнями на інші документи.

Мета заняття:

Формування у студентів знань, умінь і навичок роботи у мережі Інтернет.
Ознайомлення з мовою гіпертексту НТМL.
Створення WEB-сторінки.
Робота з тегамі управління гіперпосилання на інші документи.
сторінки.
Виховувати увагу на уроці.
Розвивати алгоритмічне мислення.

Тип уроку: урок вивчення нового матеріалу.

Основна форма проведення уроку: Практична робота.

Методи навчання: демонстрація (PowerPoint), Інтернет.

Устаткування: Комп’ютер вчителя, комп’ютери студентів, локальна та глобальна мережа Інтернет.

Обладнання: ПК з операційною системою MS Windows, принтер, сканер, колонки, дротики напруги, сітьові фільтри, тощо.

Структура уроку:

І. Організаційний етап (2хв).

ІІ. Актуалізація опорних знань (5хв).

ІІІ. Вивчення нового матеріалу ( хв.).

І V. Підсумки уроку (6хв).

V. Домашнє завдання (2хв).

ІІ. Актуалізація опорних знань (5хв).

Глобальна Мережа не тільки з'єднала користувачів всього світу, але й утвердилася у вигляді нових технологій на наших персональних комп'ютерах. Дійсно, користувач, який придбав і встановив на своїй машині Microsoft Office, стає володарем Internet-технології в готовому вигляді, незалежно від того, його комп'ютер підключений до Мережі або немає.

ІІІ. Вивчення нового матеріалу ( хв.).

Html-документ-це текст, що складається з HTML-кодів і основного тексту документа. Для форматування тексту, завдання структури документа, вбудовування посилань і мулітімедіа-об'єктів в HTML-документах використовуються спеціальні кодові слова, які називаються дескрипторами розмітки (тегами).
Отже, розглянемо основні теги, що входять в кожен Web-документ.
Відмітна ознака HTML-документа. Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка.

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа. Цей елемент містить в собі гіпертекст, який визначає власне Web-сторінку. Ця та частина документа, яку розробляє автор сторінки і яка відображається браузером. Відповідно, кінцевий тег цього елемента треба шукати в кінці HTML-файлу. Усередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Усередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю.
1.1 Структура файлу у форматі HTML
У першу чергу нам потрібно створити файл з розширенням "htm" або "html" та відкрити його для редагування в текстовому редакторі (працюючи під Windows, можна використовувати стандартну програму "Блокнот").
Текст для HTML-документа набирається в тому вигляді, в якому його повинен показати браузер, а при виділення фрагментів, які призначені для розмітки документа (тегів), використовуються кутові дужки (знаки "більше" і "менше"), наприклад: , <big>.
Будь-який документ HTML починається з відкриваючого тега і закінчується відповідним йому закриває тегом. Закриваючий тег відрізняється від відкриваючого наявністю косою риси перед назвою тега . У мові HTML немає відмінностей між великими і малими буквами при записі тегів, однак прийнято записувати відкриває тег великими літерами, а закриває - малими. Частина документа, яка знаходиться в межах від відкриваючого до відповідного йому закриває тега, називається контейнером (to contain - утримувати що-небудь). Теги, у яких є закриває і відкриває варіанти запису називаються парними, а ті, які використовуються тільки в одному вигляді (наприклад, тег), називаються непарними. Весь файл web-сторінки - це по суті справи один великий контейнерHTML (так як починається і закінчується).
Всередині контейнера HTML послідовно записуються два контейнери:
1. (Заголовок документа). Усередині цього контейнера записуються параметри, загальні для всієї сторінки. Для прикладу можна помістити сюди контейнер, що дозволяє розмістити текст для відображення в заголовку вікна браузера.
2. (Тіло документа). Цей контейнер містить все те, що повинен показати браузер всередині свого вікна при відкритті документа. Якщо документ містить лише текст, то цей текст потрібно записувати саме тут, якщо є інші елементи (графіка, таблиці, посилання і т. д.).
Якщо порівняти вихідні тексти різних Web-сторінок, можна легко побачити схожість їх структур. Це пояснюється тим, що документи створюються за певними правилами. В основу синтаксису мови HTML ліг стандарт ISO 8879:1986 «Information processing. Text and Office systems. Standard Generalized Markup Language (SGML) ».

Правда, існує велика різниця між стандартом офіційним і стандартом фактичним.
Нижче наведено шаблон типового Web-документа. На його прикладі ми розглянемо загальні принципи побудови HTML-сторінок.
Для того щоб зрозуміти структуру Web-сторінки, нам необхідно детально розглянути всі елементи, що входять до наведеного лістинг.
name =''Author''
content =''Irina''>
name =''Keywords''
content =''WWW, HTML, document, element''>
Перехід в кінець документа
Перехід до заслання 1
Заголовок1
Заголовок2
Заголовок3
Заголовок4
Заголовок5
Заголовок6
Тут розташована посилання 1
Тут повинен розташовуватися оригінальний текст Web-сторінки
Перехід на початок документа
Текст коментаря.

Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка. У принципі, цей елемент можна розглядати як формальність. Він має атрібути4 version, lang і dir, якими в даному випадку мало хто користується і допускає вкладення елементів HEAD, BODY і PLAINTEXT, що визначають загальну структуру Web-сторінки. Природно, що кінцевим тегом закінчуються всі гіпертекстові документи.
Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути lang і dir і допускається вкладення елементів TITLE, ISINDEX, BASE, NAME, LINK, NEXTID.
Елемент для розміщення заголовка Web-сторінки. Рядок тексту, розташована всередині, відображається не в документі, а в заголовку вікна браузера. Ця особливість часто використовується для організації пошуку в WWW. Тому автори, що створюють Web-сторінки, повинні подбати про те, щоб рядок всередині TITLE, не будучи занадто довгою, досить відображала призначення документа.
Опис стилю деяких елементів Web-сторінки. У вище наведеному прикладі призначені шрифти для елементів Н2 і CODE. Природно, що для кожного елемента існує стильове оформлення за замовчуванням, тому вживання STYLE не обов'язково.
Цей елемент містить службову інформацію, яка не відображається при перегляді Web-сторінки. Всередині нього немає тексту у звичайному розумінні, тому немає і кінцевого тега. Кожен елемент NAME містить два основних атрибуту, перший з яких визначає тип даних, а другий - зміст. Далі наведено кілька прикладів meta-даних.
Дата, що позначає «термін придатності» документа:
name =''Expires''content =''Дата''
Адреса електронної пошти:
name =''Reply-to''content =''Ім'я @ Адреса''
Вказівка програми, в якому був створений Web-документ:
name =''Generator''content =''Назва HTML-редактора''
Атрибут name використовується додатком-клієнтом для отримання додаткової інформації про Web-сторінках і їх упорядкування. Цей атрибут часто замінюють атрибутом http-equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.
Крім цього, елемент NAME може містити URL. Шаблон відповідного атрибута такий:
URL =''http://адрес''
Цей елемент містить в собі гіпертекст, який визначає власне Web-сторінку. Ця та частина документа, яку розробляє автор сторінки і яка відображається браузером. Відповідно, кінцевий тег цього елемента треба шукати в кінці HTML-файлу. Усередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Усередині стартового тега елемента

BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю. Розглянемо їх по порядку.
Один з найбільш корисних для дизайну - атрибут, який визначає фон сторінки. Його появу можна уподібнити маленької революції в WWW, оскільки однакові сірі Web-сторінки завдяки йому розцвіли яскравими кольоровими візерунками:
background =''Шлях до файлу фону''
Більш просте оформлення фону зводитися до завдання його кольори:
bgcolor =''# RRGGBB''
Колір фону задається трьома дворозрядними шестнадцатерічнимі числами, які визначають інтенсивність червоного, зеленого і синього кольорів відповідно.
Обидва перерахованих вище ознаки не є альтернативними і часто використовуються спільно.
Оскільки фон сторінки може змінюватися, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступний атрибут:
text =''# RRGGBB''
Для завдання кольору гіперпосилань використовується атрибут:
link =''RRGGBB''
Також можна задати колір для використаних гіперпосилань:
vlink =''RRGGBB''
Гіпертекст, розташований всередині елемента BODY, може мати довільну структуру. Її визначають в першу чергу призначення Web-сторінки і фантазія розробника.
HTML-документ може бути дуже великим, і в цьому випадку користувачеві повинна бути надана можливість швидко переміщатися до потрібного розділу сторінки. Для цього можна використовувати механізм гіперпосилань. Необхідно також у потрібних місцях тексту розставити відповідні мітки.
Елемент для установки базового адреси (URL) для посилань. Це дозволяє опускати їх початкову частину. Тоді при вказівці відносної посилання можна задати не тільки ім'я файлу, а й імена папок, в яких він знаходитися. Іншими словами, шлях до файлів може бути розбитий на дві частини: абсолютну і відносну. Це корисно в тому випадку, коли для файлів зазначених у документі, є спільний початковий фрагмент шляху.
У виразі абсолютної посилання можна також опустити вказівку на схему доступу (file ://). У цьому випадку будуть враховуватися тільки ліва частина абсолютного посилання до першого лівого символу <\>, тобто ім'я локального диска.

Практична работа

Тема: Створення W-сайт.

Мета: виробити вміння і навички створення HTML -документів, які містять гіперпосилання.

Завдання

<html>

<head>

<title> INTERNET </title>

</head>

<h1 align="left">Интернет</h1><hr>

<a href="#">О компании</a>

<a href="#">Адресация в Интернете</a>

<a href="#">Способы подключения</a>

<a href="#">Услуги Интернета</a> <hr>

<span style="font-famile:courie; font-size:10;color:#0000FF;

font-weigt:bolder; font-style:underline;"> Одной из главных причин, почему современное общество называется информационным, является всемирное распространение компьютерной

сети <a href="#">ИНТЕРНЕТ.</a> Она позволяет быстро получить информацию из любой точки земного шара.

<span style="font-famile:courie; font-size:10;color:#3300FF;

font-weigt:bolder; font-style:underline;">С технической точки зрения<span style="font-famile:courie; font-size:10;color:#FF0000;

font-weigt:bolder; font-style:underline;"> <a href="#">ИНТЕРНЕТ</a> <span style="font-famile:courie; font-size:10;color:#3300FF;

font-weigt:bolder; font-style:underline;">представляет собой обьединение компьютеров, расположеных в разных странах, в одну компьютерную сеть.

<a href="#">НОВОСТИ</a>

19.02.2007

На прошлой неделе услугами Internet

воспользовались 20 000000 начинающих пользователей!

20.02.2007

<a href="#"> Cлужба W W W  (World Wide Web)</a> - система взаимосвязанных электронных документов, которые хранятся на веб-серверах.

<a href="рабочий.html"> Основная страница</a>

</body>

</html>

V. Домашнє завдання (2хв).

Створити веб- сторінки сайту

doc

Завантажити

Зберегти на потім

Додав(-ла)

Долгачова Оксана Анатоліївна

Пов’язані теми

Інформатика, 11 клас, Розробки уроків

Додано

13 квітня 2020

Переглядів

814

Оцінка розробки

Відгуки відсутні