четвер, 19 березня 2020 р.
Інформатика група №12 Дистанційне навчання 19.03.2020
Тема уроку: Поняття про мову розмічання гіпертекстового документу.
Який вигляд має код розмітки вебсторінки мовою HTML?
Можна розробляти сайти без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами й конвертерами. Але писати безпосередньо на HTML нескладно.
Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML, найімовірніше, будуть використовуватися й надалі. Вивчаючи й пізнаючи HTML глибше, створюючи документ на початку вивчення HTML і розширюючи його, наскільки це можливо, ми маємо можливість створювати документи, які можуть бути переглянуті багатьма браузерами, — як зараз, так і в майбутньому.
Типовий простий веб-документ складається з текстових блоків (абзаців, списків, таблиць), кількох малюнків невеликих розмірів, горизонтальних розмежувальних ліній та гіперпосилань. Більш складні веб-документи містять фрейми.
Основою мови HTML є дескриптори — команди, що вказують на правила, за якими форматуються документи. Команди мови HTML називають тегами.
Назва кожного тега — це одна або декілька літер, взятих у дужки «<» та «>», яким відповідають певні англійські слова, що пояснюють їх призначення. Наприклад, назва тега <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту веб-сторінки.
Тег записується так: <Тег> текст </Тег>. Слово <Тег> (так званий відкриваючий тег) позначає місце початку дії тега на сторінці, текст — фрагмент тексту, до якого буде застосовано форматування, </Тег> (закриваючий тег) визначає місце закінчення дії тега на сторінці. Пару тегів (відкриваючий і закриваючий) називають контейнером. Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його ім’ям ставиться символ «/». Більшість тегів є парними, однак є й одинарні теги.
Один тег може мати кілька параметрів — атрибутів.
Наприклад, <Тег параметр_1= значення_1 параметр_2=значення_2 >текст, що відображається на сторінці </Тег>.
Закриваючий тег не містить жодних параметрів. На відміну від нього, у відкриваючому тегу вказуються всі необхідні параметри.
Як створити простий HTMLдокумент?
Для підготовки найпростішого HTML-файла можна використати текстовий редактор Блокнот, після написання коду в якому слід задати файлу ім’я та вказати розширення — htm. Програмування тут суто символічне.
Програма мовою HTML має таку структуру:
<HTML> — заголовок файла;
<HEAD> — заголовок документа;
<TITLE> — назва сторінки;
Текст, який буде відображатися на рядку заголовка браузера </TITLE> </HEAD> <BODY> — тіло;
Вміст веб-сторінки </BODY>
</HTML>
Основними параметрами тега <BODY> є:
BACKGRAUND="1.jpg" — задає картинку для фону за шляхом 1.jpg;
BGCOLOR="white" — задає колір фону — білий;
TEXT="black" — задає колір тексту — чорний.
Для зручного сприймання всі теги набирають великими літерами, хоча браузер однаково сприймає теги, написані й малими літерами. Не є обов’язковим також і написання тегів з нового рядка, проте код, записаний в одному рядку, читається гірше, особливо тими, хто цей код не створював. У багатьох випадках для складних сторінок між окремими блоками коду вставляють порожні рядки, поділяючи його на фрагменти, щоб полегшити читання коду.
Як форматувати текст у HTMLдокументі?
Процес структурування сторінки можна розглядати з декількох позицій: заголовки, вирівнювання, новий рядок, абзац, примусове розміщення, лінія.
Для формування заголовків використовують теги <Hn>…</Hn>, де n = 1…6. При n = 1 отримуємо заголовок найвищого рівня, відповідно
при n = 6 — заголовок найнижчого рівня.
Об’єкти сторінки можуть бути вирівняні за допомогою атрибута ALIGN, який має чотири значення, що визначають спосіб вирівнювання тексту:
center — по центру;
left — ліворуч;
right — праворуч;
justify — за шириною.
На відображення документа в браузері не впливають символи кінця рядка, які отримують натискуванням клавіші Enter або Shift+ Enter, а також пропуски. Для перенесення тексту на новий рядок використовують одинарний тег <BR>.
Для створення абзаців використовують парний тег <Р>…</Р>. При використанні тега <Р> спочатку вставляється порожній рядок, далі текст виводиться з початку нового рядка. Якщо вжито тег <BR>, то порожній рядок не вставляється.
Для виділення тексту, який має певне розміщення символів (наприклад, шаблон документа), використовують тег <PRE> текст із вимушеними пропусками та перенесенням у рядки </PRE>.
Щоб відділити одну ділянку тексту від іншої, зазвичай використовують підкреслення горизонтальною лінією. Тег <HR> зображує на екрані горизонтальну лінію.
Наприклад, <HR ALIGN="center" WIDTH="50%" SIZE="3"> — лінія по центру, розміром 3 пункти (позначається «пт»), яка займає 50 % ширини сторінки;
<HR ALIGN="center" WIDTH="400" SIZE="5" COLOR="red"> — лінія по центру червоного кольору, довжиною 400 пікселів, розміром 5 пт.
Як видно з прикладів, графічний об’єкт може мати такі атрибути:
розмір — у пунктах;
ширину WIDTH — у відсотках або пікселях;
колір — назвами кольорів англійською мовою або їх кодів (наприклад, #0000FF — бірюзовий).
Для роботи із символами використовують такі теги
форматування:
тип шрифту;
колір шрифту;
розмір шрифту;
накреслення.
Колір шрифту задається за допомогою атрибута COLOR за назвою кольорів:
„ aqua — бірюзовий;
„ black — чорний;
„ blue — світло-синій;
„ fuchsia — бузковий;
„ gray — сірий;
„ green — зелений;
„ lime — салатовий;
„ mroon — бордовий;
„ navy — синій;
„ olive — оливковий;
„ purple — фіолетовий;
„ red — червоний;
„ silver — сріблястий;
„ teal — сіро-зелений;
„ white — білий;
„ yellow — жовтий.
Розмір шрифту задається за допомогою атрибута SIZE, що може набувати таких значень:
цілі числа від 1 до 7, де числу 1 відповідає розмір шрифту 8 пт, числу 2 — 10 пт, 3 — 12 пт, 4 — 14 пт, 5 — 18 пт, 6 — 24 пт, 7 — 36 пт;
числа від 1 до 6 та від –6 до –1, на скільки одиниць шрифт має відрізнятися від встановленого за замовчуванням (у більшості за замовчуванням розмір шрифту 3 — 12 пт).
Як працювати із зображеннями в HTMLдокументі?
Зображення можна використовувати в HTML-документах так:
для зміни фону сторінки;
як ілюстрацію на сторінці;
як посилання на інший об’єкт;
як маркер у списку.
У HTML-документі можна використовувати зображення різного формату.
Розмір файла зображення визначає швидкість появи зображення на екрані. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення формату JPG або GIF. Допустимими зображеннями є такі, розмір яких не перевищує 40–50 Кбайт.
На веб-сторінках графічні зображення можна розміщувати різними способами.
Вбудовані зображення — це графічні зображення, які завжди залишаються в одному й тому самому місці сторінки й не обтікаються текстом. Плаваючі зображення — це зображення, що не прив’язуються до одного рядка тексту й ніби «плавають» уздовж одного з полів та обтікаються текстом.
Для вставляння до документа малюнка використовується одинарний тег <IMG> (від англ. image — зображення) з такими параметрами: SRC=ім’я_файла (від англ. source — джерело). Наприклад, за командою <IMG SRC=pr.gif> на екрані буде відображатися вміст графічного файла pr.gif, що зберігається в поточному каталозі. Параметр ALT="текст_напису" використовується в тому разі, коли браузер не знаходить зображення у вказаному місці на диску, тоді замість нього на екрані відображається маленький прямокутник з відповідним надписом у його середині, який задано параметром ALT. Цей параметр рекомендується використовувати завжди.
Як побудувати гіпертекстові зв’язки в HTMLдокументі?
Гіперпосилання може бути подано різними способами: крім тексту, ще й малюнком, картою (розміченим малюнком), списком-меню, екранною кнопкою тощо. Існують два основні типи гіперпосилань: внутрішні та зовнішні.
Внутрішні гіперпосилання — це посилання на об’єкти в межах одного документа. За їхньою допомогою можна переміщуватися всередині однієї веб-сторінки. Такі посилання доцільно використовувати на довгих сторінках, щоб мати можливість швидко переміщуватись між розділами.
Зовнішні гіперпосилання — це посилання на віддалені HTML-файли або на будь-які файли, які належать до HTML-документів.
Підписатися на:
Дописати коментарі (Atom)
Немає коментарів:
Дописати коментар