Презентація - HTML програмування посилання та списки. Перша з 4-х презентацій по темі.

Про матеріал
Перша з 4-х презентацій про використання HTML мови. Призначена для використання під час уроків з утворення web-сторінок. Тут розглянуто перші кроки по створенню web-сторінці.
Перегляд файлу
Hyper
Text
Markup
Language Мова розмітки гіпертексту
        Ціль уроку:  Ознайомитись зі структурою WEB-документу. Вивчити основні команди форматування WEB-документу. Дізнатись: як створюються найпростіші WEB-документи. Отримати практичні навички їх створення.
Знайомство з мовою HTML Гіпертекст – це електронний документ, якій містить гіперпосилання на інші документ. Гіпертекстовий документ призначений для виводу інформації на екран комп'ютера. Гіпертекстова технологія – це технологія яка базується на використанні гіпертекстових документів. Її застосовують в комп'ютерних енциклопедіях та учбових програмах, прикладних програмах для роботи з довідковою інформацією, для організації доступу до інформації в WWW при роботі з WEB-документами. WEB-документ – це текст, написаний мовою HTML або іншою мовою, яка призначена для перегляду електронної інформації на екрані комп'ютера за допомогою програми-браузера.
Так як WEB-документ призначений для перегляду його на комп'ютері, то бажано, щоб він поміщався на екрані повністю. Тому WEB-документи ще називають WEB-сторінками. Декілька WEB-сторінок з однією темою називають WEB-вузлом або WEB-сайтом.   WEB-сайти створюють WEB-дизайнери. WEB-дизайн – це сукупність правил та рекомендацій, якими повинні керуватись автори для того, щоб їх сайти ьули інформативні та виглядали привабливо.
Команди мови HTML називаються теги. Вони записуються в позначках < >.  Більшість тегів – парні    <html>…</html>  Документ HTML має три основні структурні типи змісту: Теги – команди в позначках < >.  Коментарі –пояснення до документу. Вони допомагають розібратися в його вмітсі <!--  …  -- >.  Текст – те, що користувачь бачить на екрані браузера.  Мультимедійні елементи – малюнки, звук, відео – не є частиною HTML-документу, вони зберігаються в окремих файлах. HTML-документ містить тільки посилання на ці файли у вигляді тегів.
Теги та їх атрибути Кожен тег складається з його імені та списку атрибутів (параметрів тега) <i> <img  src=“dog.gif”  width=6>  Атрибути відокремлюються один від імені тега та оди від одного пропусками.  Значення атрибуту пишеться після знаку рівняння. Коли значення складається з одного слова або цифри воно може бути записано без лапків. Якщо значення атрибуту складається з декількох слів лапки обов'язкові ( “ ). Тег з усіма атрибутами бажано розташовувати в одному рядку.  Для більшості тегів потрібен закриваючий тег: <i>   </i>
<html> <head> <title> Мій перший крок </title> </head> <body> Доброго дня, це моя перша сторінка <br> Ласкаво просимо!  </body> </html> Структура HTML-документа
Заголовок документу – теги <Head> и <Title> Тег <Head>…</Head> містить в собі теги заголовку .  Тег <Title>…</Title> містить слова, які з'являються в рядку назви сторінки браузера <html> <head> <title>Мій перший крок</title> </head> 2.  Додаткові теги заголовку: <meta>  - містить додаткові данні про документ, які використовуються пошуковими серверами; <base>  и <link> -  визначає базову адресу документу та деякі інші параметри
Тіло документу – тег <body> Все, що знаходиться між  тегами <body> та  </body>, зветься вмістом тіла документу. Тег <body> може містити 3 групи параметрів: Управління зовнішнім виглядом документу. Атрибути програмування – за подією, таблиці стилів та інше. Атрибути посилань та ідентифікації.
Параметри тега <body> Bgcolor – змінює колір фону. Колір задається словом або  кодом RGB   <body bgcolor = “red”>   <body bgcolor = “#FF0000”> Text – задає колір тексту.   <body bgcolor = “red”  text=“blue”> Background – розташовує в якості фону зображення з файлу з малюнком.   <body  background = “dog.gif”> Bgproperties = “fixed” – фоновий малюнок залишається на місті при «прокручуванні» тексту сторінки. Link – задає колір гіперпосилання, за яким користувач ще «не ходив». Vlink – задає колір гіперпосилання «яке вже відвідували». Alink – колір активного гіперпосилання (під курсором мишкі під час натиснення)
Оформлення тексту  Заголовки Існує 6 рівнів заголовків: <h1> . . . </h1>, …, <h6> . . . </h6> Атрибут – align – вирівнювання Значення: Left (по замовчуванню)         Right , Centr  <body  bgcolor =

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6
" title="Оформлення тексту Заголовки Існує 6 рівнів заголовків:

. . .

, …,
. . .
Атрибут – align – вирівнювання Значення: Left (по замовчуванню) Right , Centr

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6
">
Абзаци Тег <p>   вказує на початок нового абзацу та вставляє порожній рядок перед абзацом. Атрибут align.  Тег <br> - розрив рядка. Використовується для запису текстів віршів та пісень.  Атрибут  clear дозволяє продовжити потік тексту після (нижче) малюнка або таблиці. Значення left, right, all  - продовжують вивід тексту там, де вказаний в атрибуті край або обидва краї вільні від таблиць та малюнків. Цей атрибут має сенс тільки з малюнками та таблицями які вирівняні ліворуч або праворуч.
Точні інтервали Тег <nobr>… </nobr> створює область, в якій текст не розбивається на рядки. Тег <wbr> використовується у поєднанні з <nobr> та вказує браузеру місце, де у випадку необхідності, можливо розірвати рядок. Тег <pre>… </pre> виділяє частину початкового тексту,який повинен відображатись «як є» -  з тими ж відступами та розбиттям на рядки. Використовується для запису текстів програм. В середні цього тегу можуть бути розташовані гіперпосилання малюнки та інше. Тег <center>… </center> - вміст вирівнюється по центру – текст, малюнки, таблиці. Аналог атрибуту align=center
Фізичне та логічне  форматування тексту Фізична розмітка документу – це явне вказування браузеру, як повинен виглядати той чи іншій фрагмент тексту – розмір шрифту, його тип та інше. Логічна розмітка враховує сенс виділеного фрагменту – цитата, відомості про автора та т.п. Сучасні стандарти мови HTML радять використовувати по можливості логічну розмітку, хоча фізичне форматування ще ні хто не відміняв.
Теги фізичних стилів <b>…</b> Напівжирний шрифт <big>… </big> Збільшений шрифт <i>…</i> Курсив <small>…</small> Зменшений  шрифт <u>…</u> Підкреслення <sup>… </sup> Верхній         індекс <s>…</s> Закреслений шрифт <sub>… </sub> Нижній          індекс <tt>…</tt> Стиль друкарської машинки <blink>…</blink> Текс який мерехтить (в Internet Explorer) Можливо комбінувати теги стилів: <b><i>Полужирный курсив</i></b>
Зміна шрифту тег <font> … </font>- змінює розмір, колір та стиль тексту.  Атрибуты: size - розмір шрифту 1-7.         По-замовчуванню   size=3 Розмір змінюється на 20%:      4 розмір більше 3 на 20%,                                                    5 розмір більше 4 на 20% size=4 – абсолютний розмір,   size= +1 – відносний (на 1 більше, чим базовий розмір шрифту)  color – колір тексту,  face  - назва шрифту      face=
<html> <head> <title>Мій другий крок</title> </head> <body> Це звичайний шрифт <p> <font size=5 color= Це змінений шрифт

Це основний шрифт " title=" Мій другий крок Це звичайний шрифт

Це змінений шрифт

Це основний шрифт ">

Теги логічних стилів <abbr> </abbr> Абревіатура <acronym> </acronym> Скорочення, напр., HTML <cite>… </cite> Бібліографічне посилання, вик. для запису назви книг та іншого. (курсив) <samp>… </samp> Текст з «буквальним» сенсом <code> </code> Для текстів програм <var>… </var> Для імен  змінних <em>… </em> Візуальне виділення (курсив) <strong>… </strong> Логічне виділення (напівжирний) <dfn>… </dfn> Для спеціальних термінів <kbd>… </kbd> Для технічних термінів <q> … </q> Блок цитат (атрибут  cite=“URL” - джерело цитати) <address>…</address> Адреса   (курсив)
Теги логічного та фізичного форматування можуть комбінуватись один з одним та з тегами встановлення інтервалів.
Створення WEB-сторінок в блокноті. У своїй папці створить окрему папку де будуть зберігатись сторінки (файли) Вашого сайту. Відкрийте програму БЛОКНОТ. Наберіть в ньому текст WEB-сторінки. Збережіть цей текст в цій папці під будь яким ім'ям з розширенням html. Перейдіть в цю папку.      Документ повинен мати позначку                     або Відкрийте цей документ. (Відкриється програма-браузер). Якщо потрібно внести зміни в документ, знайдіть (в залежності від браузера) виклик програмного коду сторінки або перегляд HTML коду. Текст WEB-сторінки відкриється для редагування. Внесіть зміни  в текст. Збережіть його, діть в програму-браузер та натисніть кнопку ОБНОВИТИ.
Познайомились зі структурою та основними командами форматування WEB-документа. Дізнались, як створити найпростіший WEB-документ.
Практичне завдання Створити дві WEB-сторінки на довільну тему 1.На першій застосуйте фізичні стилі форматування (шрифт, стиль и т.п.), фон зробіть кольоровим. 2. На другій застосуйте логіні стилі форматування. В якості фону використайте малюнок з файлу.
Переклад презентації 2008 р.  © М.Е.Макарової http://uchinfo.com.ua
Зміст слайдів
Номер слайду 1

Номер слайду 2

Hyper Text Markup Language Мова розмітки гіпертексту

Номер слайду 3

Ціль уроку: Ознайомитись зі структурою WEB-документу. Вивчити основні команди форматування WEB-документу. Дізнатись: як створюються найпростіші WEB-документи. Отримати практичні навички їх створення.

Номер слайду 4

Знайомство з мовою HTML Гіпертекст – це електронний документ, якій містить гіперпосилання на інші документ. Гіпертекстовий документ призначений для виводу інформації на екран комп'ютера. Гіпертекстова технологія – це технологія яка базується на використанні гіпертекстових документів. Її застосовують в комп'ютерних енциклопедіях та учбових програмах, прикладних програмах для роботи з довідковою інформацією, для організації доступу до інформації в WWW при роботі з WEB-документами. WEB-документ – це текст, написаний мовою HTML або іншою мовою, яка призначена для перегляду електронної інформації на екрані комп'ютера за допомогою програми-браузера.

Номер слайду 5

Так як WEB-документ призначений для перегляду його на комп'ютері, то бажано, щоб він поміщався на екрані повністю. Тому WEB-документи ще називають WEB-сторінками. Декілька WEB-сторінок з однією темою називають WEB-вузлом або WEB-сайтом. WEB-сайти створюють WEB-дизайнери. WEB-дизайн – це сукупність правил та рекомендацій, якими повинні керуватись автори для того, щоб їх сайти ьули інформативні та виглядали привабливо.

Номер слайду 6

Команди мови HTML називаються теги. Вони записуються в позначках < >. Більшість тегів – парні … Документ HTML має три основні структурні типи змісту: Теги – команди в позначках < >. Коментарі –пояснення до документу. Вони допомагають розібратися в його вмітсі