Створення гіпертекстових html-документів

СТВОРЕННЯ ГІПЕРТЕКСТОВИХHTML-ДОКУМЕНТІВ

Таким чином, функціонування інформаційної системи WWW у глобальній комп'ютерній мережі Інтернет забезпечується трьома технологіями:

мовою розмітки гіпертексту HTML, який служить для написання Web-сторінок;

програмою Web-браузера на комп'ютері користувача для отримання даних з сервера мережі, їх інтерпретації та відображення результатів;

п

ротоколом передачі гіпертекстаHTTP для передачі Web-сторінок з комп'ютерної мережі Інтернет.

Мал. 1.1. Вікно програми Web-браузера Internet Explorer

Розмітка гіпертексту в мові HTML виробляється на основі т. Зв. дескрипторів або тегів (tag - ярлик). Теги є якимись маркерами, що позначають межу фрагмента в тексті, який буде мати властивості, які визначаються використовуваним типом тега. Кожен тег в HTML полягає в кутові дужки <> і може мати набір параметрів, від значення яких залежить задається режим використання даного тега. Причому параметри задаються в кутових дужках початкового тега, а перед кінцевим тегом завжди ставиться символ «/».

Наведемо список деяких найбільш часто використовуваних тегів з їх основними параметрами, які ми будемо надалі використовувати для створення Web-сторінок:

html - межа гіпертекстового документа, який розпізнається і обробляється браузером, наприклад програмою Internet Explorer;

title - заголовок вікна на екрані комп'ютера, в якому розташовується гіпертекстовий документ;

body - межа змістовної частини гіпертекстового документа, наприклад загальна структура Web-сторінки в HTML-форматі, повинна мати приблизно такий вигляд:

де замість трьох крапок розташовується змістовна частина сторінки;

h1 (h2, h3, ..., h7) - межа заголовка (відповідно від 1 до 7 рівня), параметр вирівнювання align зі значеннями left. right, center (відповідно вліво, вправо, по центру), наприклад:

Продукція підприємства «ВЕСЕЛКА»

p - межа абзацу;

br - початок нового рядка (закінчувати не потрібно, тег непарний);

hr - вставка розділової риси (закінчувати не потрібно, тег непарний);

marquee- вставка «біжить» рядки, параметр direction зі значеннями right (праворуч) і left (ліворуч), наприклад

font - завдання параметрів для тексту, параметри: color зі значенням #nnmmkk. де кожна пара цифр змінюється від 00 до FF, задає в шістнадцятковій системі числення число від 0 до 255, причому nn - червоний, mm - зелений, kk - синій кольори; face - гарнітура (Arial, Times. ...); size - розмір (приймає значення від 1 до 6), наприклад:

або name зі значенням імені, що задається даного фрагменту тексту, наприклад:

frameset - розбивка документа на безліч рамок (кадрів), або фреймів, обов'язковий параметр rows зі значенням зі списку розбиття екрану на горизонтальні фрейми в процентах, наприклад;

або cols зі значенням зі списку розбиття екрану на вертикальні фрейми в процентах, наприклад:

(Після даного тега повинні слідувати теги для заповнення всіх фреймів);

або name зі значенням імені, що задається цим кадру, наприклад:

iInput - вставка елемента управління на форму з обов'язковим параметром type і зі значеннями:

текстової смуги text, наприклад:

перемикача radio, наприклад:

командної кнопки button. наприклад:

командної кнопки «послати» submit. наприклад:

командної кнопки «очистити» reset. наприклад:

select - вставка списку на форму (після даного тега повинні слідувати теги для заповнення списку записами);

option - вставка запису в список, обов'язковий параметр value. значенням якого є заноситься в список запис, наприклад:

textarea - створення текстової області на формі, обов'язкові параметри: кількість рядків rows і кількість символів cols. наприклад:

</p> <p>На першій сторінці, як початкової або домашній сторінці (Home page) сайту, необхідно розмістити заголовок, який супроводжує текст, що характеризує підприємство в цілому, а також малюнок-логотип підприємства і 2 гіперпосилання на відповідно 2-ю і 3-ю Web-сторінки (див . рис. 1.2).</p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/24/534/924x515_sutgj2uag9i4i9stfzl9.webp" width="924" height="515" title="Створення гіпертекстових html-документів (створення)" alt="Створення гіпертекстових html-документів" ></div></p> <p>Мал. 1.2. Домашня сторінка сайту підприємства «Морепродукти»</p> <p>Текст програми розмітки такої сторінки в HTML-форматі може мати приблизно такий вигляд:</p> <p><body bgcolor = #00ffff></p> <p><h1 align = center> Підприємство «МОРЕПРОДУКТИ» </h1></p> <p><div style="text-align:center;"><img src = Contacts.gif align = left height = 400></div></p> <p><p align = center></p> <p>Спільне білорусько-українське підприємство «Морепродукти»</p> <p>реалізує населенню морепродукти Балтійського, Чорного та</p> <p>Каспійського морів за найнижчими в Білорусі цінами</p> <p><p align = center> <a href = web2.html>Продукція</a></p> <p><p align = center> <a href = web3.html>Анкетування</a></p></div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/jak-vigljadae-kvitka-giacint-i-koli-pochinae.html">Як виглядає квітка гіацинт і коли починає цвісти опис рослини, вирощування та фото</a></li> <li><a href="/articles/vivodimo-groshi-z-google-adsense.html">Виводимо гроші з google adsense</a></li> <li><a href="/articles/solkoseril-v-chomu-vidminnist-gelju-i-mazi-sklad-i.html">Солкосерил в чому відмінність гелю і мазі, склад і інструкція, ціна</a></li> <li><a href="/articles/vigotovlennja-tandiru-svoimi-rukami.html">Виготовлення тандиру своїми руками</a></li> <li><a href="/articles/10-serjoznih-rechej-jaki-mediki-znajut-ale-nikoli.html">10 Серйозних речей, які медики знають, але ніколи скажуть вголос</a></li> <li><a href="/articles/blokuvannja-svidomosti.html">Блокування свідомості</a></li> <li><a href="/articles/zmova-vid-udaru.html">Змова від удару</a></li> <li><a href="/articles/jak-nalashtuvati-kasperskogo.html">Як налаштувати касперского</a></li> <li><a href="/articles/dlja-chogo-potribna-vakcinacija.html">Для чого потрібна вакцинація</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/oblik-zapasiv-po-msfo.html">Облік запасів по мсфо</a></li> <li><a href="/articles/efektivni-sposobi-spilkuvannja-z-malenkimi-ditmi.html">Ефективні способи спілкування з маленькими дітьми - як спілкуватися з дитиною</a></li> <li><a href="/articles/pomilka-teorii-darvina-v-rozvitku-ljudini.html">Помилка теорії Дарвіна в розвитку людини, ланцюжки розвитку</a></li> <li><a href="/articles/semik-ukrainski-svjata-prikmeti-zvichai-i-tradicii.html">Семик - українські свята, прикмети, звичаї і традиції</a></li> <li><a href="/articles/17-pravil-dlja-tih-hto-zaproshue-ditinu-z.html">17 Правил для тих, хто запрошує дитину з дитбудинку в гості - освіту і православ’я</a></li> <li><a href="/articles/spustiti-kurok-ce.html">Спустити курок - це</a></li> <li><a href="/articles/chomu-mi-porushuemo-zakoni-ofigenno-radio.html">Чому ми порушуємо закони офігенно радіо</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2026</p> <ul> <li><a href="/articles/vzaemozv-jazok-movi-i-kulturi-studopedija.html">Взаємозв’язок мови і культури - студопедія</a></li> <li><a href="/articles/roman-sanzhar-budemo-robiti-akcent-na-psihologii.html">Роман Санжар будемо робити акцент на психології - прем’єр-ліга - футбол на</a></li> <li><a href="/articles/znachennja-zokrema-slovnik-efremovij-slovniki.html">Значення «зокрема» словник Єфремовій словники української мови онлайн</a></li> <li><a href="/articles/vesilni-podarunki-magazin-shhaslivih-pidkov.html">Весільні подарунки, магазин щасливих підков</a></li> <li><a href="/articles/jak-prati-krosivki-v-pralnij-mashini-avtomat-bez.html">Як прати кросівки в пральній машині автомат без мешка- інструкція</a></li> </ul> </div> </footer></div> <style> #cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden} </style> <div id="cookieNoticeOverlay"> <div id="cookieNoticeBox" role="dialog" aria-modal="true"> <h2>Cookie на сайті</h2> <p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p> </div> </div> <script> (function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}} function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}} if(getAcceptedUntil()>now){return} var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return} function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')} function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')} okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return} var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})() </script></body> </html>