Тема 2. Інформаційні процеси. Інформаційні системи та технології

Інформаційні процеси.

Інформаційні системи та технології

Процеси, пов'язані з різними видами опрацювання інформації та даних, називають інформаційними.

Приклади інформаційних процесів: створення інформації, зберігання, перетворення, передавання, пошук, захист, подання (представлення), …

Люди

• отримують інформацію за допомогою органів чуття, спілкуючись між собою, читаючи пресу та книги, переглядаючи телевізор, спостерігаючи за природою; 

•   створюють, складаючи вірші, пишучи листи та твори;

•       подають за допомогою символів алфавіту (українського, англійського, …), графічних образів або різноманітних сигналів (азбука Морзе);

•       шукають у книжках, довідниках, базах (сховищах) даних, у просторі www (в інтернеті);

•       зберігають у пам'яті, на папері, диску чи флеш-пристрої;

•       пересилають на відстань, користуючись послугами пошти;

•       нагромаджують (збирають), вивчаючи нові предмети та явища;

•       перетворюють (обробляють), виконуючи арифметичні дії з числами, аналізуючи відомості, розв'язуючи задачі, систематизуючи результати експериментів;

•   захищають  від  підробки  чи  викрадення  за  допомогою  паролів,   підписів, шифрування тощо.

Ці інформаційні процеси характерні як для повсякденної побутової діяльності людини, так і для різних сфер її виробничої діяльності. Тому усі ці процеси люди реалізували в технічних пристроях, зокрема, в комп'ютерах.

Кодування повідомлень

Люди спілкуються за допомогою відкритих (зрозумілих усім) кодів. Це природна мова, мова жестів тощо. Однак комп'ютер чи робот не може працювати з такими кодами безпосередньо. У технічних пристроях дані спочатку автоматично перекодовуються у коди відповідних пристроїв, опрацьовуються відповідно до отриманого завдання і в потрібний момент розкодовуються (декодуються), тобто перетворюються у відкритий, зрозумілий для людини код.

Розглянемо приклади кодів. Якщо джерело інформації — світлофор, то кодами є три кольори (зелений, жовтий, червоний), з якими пов'язані події «йти», «чекати», «стояти». Коли джерело — книжка, то кодами є літери алфавіту, з яких утворені слова.

Сукупність символів, з яких утворюють повідомлення, чи кодів, якими їх кодують, називають алфавітом.

Алфавіт української мови складається з 33 символів-літер, англійської мови – 26 літер.

Ноти, якими записана музика, також утворюють алфавіт. Основних нот є сім.

Вчені віддавна задумувались над тим, яка найменша кількість символів потрібна для     кодування даних. Значне досягнення належить американському художнику і винахіднику     телеграфного коду Семюелу Морзе (1791—1872). В алфавіті азбуки Морзе,   яку він винайшов у 1832 р., є лише два символи: крапка і тире, якими кодують будь-який текст.

Двійкове кодування. Біт і байт

В електронних пристроях передавання повідомлень відбувається за допомогою коротких електричних сигналів імпульсної природи. Наявність електричного імпульсу домовились позначати 1, а відсутність  — цифрою 0. Тому в пристроях дані, перш ніж потрапити в канал зв'язку, автоматично кодуються «нулями» й «одиницями».

Як тільки вводимо текст з клавіатури, то кожний символ відразу кодується ланцюжком з восьми нулів і одиниць, наприклад, 10011001. Таке кодування називають двійковим, а цифри 0 і 1 називають бітами. Тобто, 1 біт — це один розряд двійкового коду зі значенням 0 або 1.

Для кодування будь-якого символа алфавіту, що містить до 256 символів, потрібно 8 бітів. Ці 8 біті називають байтом.  Тобто, 1 байт = 8 біт.                                                                       

1 байт — це кількість бітів, якими кодується один символ алфавіту потужністю 256 символів.

З курсу математики відомо, що в ланцюжках довжини 8 бітів різних комбінацій з двох символів (0 і 1) є 2^8 = 256. Тому говорять, що байт може набувати одне з 256 можливих значень. Ось чому алфавіт може містити до 256 символів (кажуть, що потужність алфавіту — 256 символів). Один з його варіантів є загальноприйнятим, його називають розширеною таблицею кодів АSСІІ (American Standart Code for Information Interchange). Є й інші комп'ютерні таблиці кодів (алфавіти), наприклад, КОІ8, Windows - 1251. А в таблиці Unicode для кодування одного символа задіяно два байти, тобто можна закодувати 2^16=65536 символів. Таблиця Unicode використовується для кодування символів великої кількості алфавітів.

Комп'ютерний алфавіт (розгляньте клавіатуру), крім літер національних алфавітів, містить літери латинського алфавіту й різні символи: цифри, розділові знаки, символи математичних операцій.

Кожний символ у кожному алфавіті має свій код. Наприклад, у таблиці кодування  АSСІІ латинська літера «А» — 01000001, українські «А» — 11000000 та «а» —11100000. Оскільки процеси, пов'язані з кодуванням і розкодуванням, відбуваються автоматично, то користувачам запам'ятовувати коди символів не потрібно, а фахівці мають доступ до спеціальних таблиць кодів.

Інформаційні системи та інформаційні технології

Усе, що нас оточує, — це об'єкти (матеріальні предмети, явища, процеси). Об'єктами є книжка, комп'ютер, стіл, машина, учень, учитель тощо.

    Система — це сукупність об'єктів, між якими налагоджені зв'язки.

   Технології — це сукупність методів і засобів для виготовлення деякої продукції чи надання послуг.

   Інформаційні технології — це сукупність методів і засобів для опрацювання інформації і даних у різних сферах діяльності людини.

    Під поняттям опрацювання інформації та даних розумітимемо сукупність інформаційних процесів: отримання, подання, збирання, створення, зберігання, пошук, пересилання, перетворення, захист інформації.

   Приклади інформаційних технологій:

•     технології створення текстових документів;                                                              

•     технології опрацювання графічних зображень;                      

•     технології збирання, зберігання і пошуку даних;

•     технології з'єднання і використання комп'ютерів у мережі.

   Інформаційна система —  це система взаємопов'язаних об'єктів та інформаційних технологій.

Приклади інформаційних систем: учень і підручник, людина і телевізор, пасажир і розклад руху транспорту, читачі та бібліотека, людина і комп’ютер.

На сьогоднішній день, основа інформаційної системи – це ПК.

    

Види інформаційних систем

Сучасні інформаційні системи (скорочено ІС) поділяють на неавтоматизовані (ручні),
автоматизовані та автоматичні.                                                                           

У неавтоматизованих інформаційних системах комп'ютерні засоби не використовують. Приклади: реєстратура у поліклініці, бібліотека без використання комп’ютера, класичні бібліотечні служби довідок на невеликих вокзалах. Такі системи поступово відходять у минуле.

В автоматизованих інформаційних системах застосовують комп'ютерні засоби, проте важливу роль і надалі відіграють люди (оператори, диспетчери), зокрема, на етапах отримання і аналізування інформації, вони впливають на функціонування системи. Це системи зв'язку: у разі виявлення помилки в даних чи методах, людина виправить помилку і повторить процес опрацювання даних.

Автоматизованими інформаційними системами є електронні системи продажу квитків на літаки чи поїзди, системи обслуговування покупців у супермаркетах, банківські системи, автоматизовані робочі місця (АРМ) директора компанії, продавця чи фахівця. Важливими видами таких ІС є автоматизовані системи керування (АСК) польотами літаків чи зорелетів, енергетичними чи військовими комплексами, системи автоматизованого проектування  (САПР)  виробів (машин, будинків, зорелетів).

Автоматичні системи функцірнують без втручання людини. Автоматичними інформаційними системами є системи контролю знань учнів, абітурієнтів і студентів на іспитах, електронні довідкові системи в бібліотеках, на великих вокзалах чи в аеропортах, інформаційно-пошукові системи (ІПС), що дають змогу відшукати різноманітні відомості побутового чи виробничого призначення.

     Етапи розвитку інформаційних технологій

Люди у різні часи використовували різні технології (методи і засоби). Щоб полегшити фізичну працю і покращити життя в матеріальному світі, вони винайшли вогонь, колесо, двигун, машини і різні механізми, зокрема, роботів, освоїли електричну та атомну енергію. Для полегшення розумової праці та життя в інформаційному світі було винайдено письмо, книгодрукування, різноманітні електричні засоби зв'язку, комп'ютери та інтернет. Ці винаходи стали основою класифікації етапів розвитку інформаційних технологій.

Етапи:

1.        Письмо

Першим досягненням свідомої діяльності людей стало створення писемності. Технологією первісних людей було застосування різців і фарб для нанесення символів на камінь, дерево, шкіру й тканину. Згодом винайшли чорнило, пера, дощечки для писання та папір. З'явилися перші книги. Ще шістсот років тому ченці в монастирях переписували книги вручну.

2.        Книгодрукування

Наступне важливе досягнення людства — винахід друкарського верстата Йоганом Гутенбергом (1440 р). Книгодрукування почало поширюватися як ремесло. Першу книжку в Україні під назвою «Апостол» надрукував Іван Федоров у Львові 1574 р.

3.        Електричні засоби зв’язку

Сто п'ятдесят років тому в США з'явилися телеграф, телефон, друкарська машинка, а згодом радіо і телебачення.

4.        Комп’ютер

З 1946 р. для опрацьовування даних застосовують комп'ютер. Обчислення, на які вчені затрачали місяці та роки ручної праці, комп'ютер виконав за кілька секунд.

5.        Інтернет

У 1970-х у США почав  діяти Інтернет, який незабаром поширився на всю планету. На сьогоднішній день до багатьох багатотомних бібліотечних видань та різноманітних відомостей є доступ через Інтернет.

Структура інформаційної системи (складові ІС)

У будь-якій сучасній ІС ввиділяють три найважливіші компоненти:

- апаратну складову (англ. Hardware - власне комп'ютер як пристрій (залізо);

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

-   Інтелектуальну складову (brainware - сукупність  умінь  і  знань     персоналу  з обслуговування ком’ютерів та користувачів).

Сфери застосування інформаційних технологій

З кожним днем обсяги інформації та даних зростають. Інформація надходить з різних джерел: газет і книжок, радіо й телебачення, від родичів, друзів, учителів, з різних пристроїв. Люди отримують, перетворюють і пересилають інформацію щоденно.

Ми використовуємо інформаційні технології у різних сферах нашого життя: освіта, медицина, наука, бізнес, промисловість, послуги, побут, …

Комп'ютер виконує складні обчислення, допомагає розв'язувати різноманітні інженерні та економічні задачі; щоб вручну відтворити його кількасекундну роботу, людині потрібні роки.

Опрацьовану інформацію записують на магнітні чи оптичні диски, де її зберігають тривалий час. На таких дисках нагромаджують великі обсяги даних, наприклад, про результати переписів населення, дані про учнів, студентів, працівників підприємств та організацій, вміст книгосховищ бібліотек, архівів, про наявність матеріалів на складах тощо. Це бази даних.

За допомогою комп'ютерів готують листи та різноманітну ділову документацію, нараховують зарплатню, виконують банківські операції, контролюють виробничі процеси, проектують машини та зорелети, навчають учнів і студентів, діагностують хвороби, влаштовують телеконференції.

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

Інформаційна компетентність та інформаційна культура.

Перший комп'ютер з'явився не так давно — у 40-х роках XX ст. Комп'ютери допомагають нам у різних сферах діяльності.

Ключем до оволодіння багатьма сучасними професіями є інформаційна  компетентність — наявність знань і вмінь для правильної ідентифікації інформації, ефективного її пошуку, інтерпретації та аналізу, оцінювання точності та надійності, дотримання етичних норм і правил користування інформацією. Для сучасної людини інформаційна компетентність передбачає наявність певних умінь користування комп'ютером для опрацювання інформації.

У наш час відбувається перехід до широкого застосування комп'ютерів у виробництві, управлінні, науці, освіті, медицині, торгівлі. Сьогодні завдяки комп'ютеру наше суспільство перетворюється з індустріального в інформаційне. В інформаційному суспільстві щораз більше людей працює не в сфері матеріального виробництва, а в галузях, пов'язаних з опрацюванням інформації.

Людина інформаційного суспільства повинна володіти елементами сучасної інформаційної культури. Інформаційне культура — філософське поняття; це частина загальної культури людини, систематизована сукупність знань, умінь і навичок, що забезпечує оптимальне здійснення індивідуальної інформаційної діяльності, спрямованої на задоволення інформаційних потреб людини. На різних етапах розвитку людств інформаційна культура проявляється по-різному.

Сучасна інформаційна культура — це інформаційний світогляд людини (уявлення про інформаційне суспільство, інформаційні ресурси, інформаційні потоки), вміння формулювати інформаційні запити і здійснювати інформаційний пошук, володіння навичками аналізу і синтезу інформації, а також технологіями інформаційного самозабезпечення. Це світогляд людини, яка використовує комп'ютер у навчальній, пізнавальні виробничій діяльності для розв'язування поточних задач та організації дозвілля.

Тема1. Інформація. Інформатика

Поняття інформації. Інформатика

У процесі науково-практичної діяльності людство виділило такі узагальнені абстрактні поняття, як речовина (матерія), енергія та інформація.

Термін «інформація» походить від латинського informatio, що означає пояснення, ви­клад, тлумачення. Поняття «інформація» багатозначне, належить до первісних понять інформа­тики. Строгого означення йому не дають, але характеризують його, перераховуючи властивості інформації.

Властивості інформації:

1)  Об'єктивність. Інформація — відображення зовнішнього світу, а він існує незалеж­
но від нашої свідомості, знань, думок та суджень про нього;

2)  Достовірність. Інформація є достовірною, якщо вона відображає істинний стан
справ. На основі достовірної інформації можуть прийматися правильні рішення;

3)  Повнота. Інформацію можна назвати повною, якщо її достатньо для розуміння ситу­
ації та прийняття рішення.

4)  Актуальність інформації— важливість, істотність для даного часу;

5)  Корисність. Ступінь корисності інформації залежить від потреб конкретних людей і
від тих задач, які за допомогою отриманої інформації можна розв'язати.

6).Зрозумілість. Інформація є зрозумілою, якщо при її отриманні не виникає додаткових запитань.

Отже, інформація — це відомості, знання, які ми отримуємо із зовнішнього світу або які передаються від одного об'єкта до іншого (об'єктом може бути живий організм або технічний пристрій).

Характерні риси інформації:

1)   Інформація — це нематеріальна субстанція, але передається вона за допомогою
матеріальних носіїв — знаків і сигналів — або за допомогою фізичних процесів, які
змінюються з перебігом часу;

2)   Інформація залежить не тільки від самих знаків та сигналів, але від їх взаємного роз-­
ташування;

3)   Якщо з однієї точки простору інформація передається в іншу, то в початковій точці
вона не зникає;

4)   Інформація є зрозумілою лише для того, хто здатний її розпізнати.

У широкому розумінні інформація — це відображення реального (матеріального світу) у вигляді знаків та сигналів.

Інформація, що зберігається, передасться та опрацьовується в різних системах, є об'єктом вивчення інформатики. Інформатика — це наука, яка вивчає структуру і властиво­сті інформації, а також закономірності та методи подання, пошуку, зберігання, обробки та пе­редачі інформації за допомогою комп'ютерних систем. Інформатика — прикладна наука, яка озброює методами досліджень інші предметні галузі. Вона виникла на базі кібернетики і своїм становленням зобов'язана появі в середині XX ст. ЕОМ (електронно-обчислювальних машин).

Матеріальними носіями інформації є знаки, сигнали або фізичні процеси, які змінюють з часом. Якщо інформація передається за допомогою азбуки Морзе, то знаками, які при цьому використовуються, є крапка і тире. Прикладом передачі інформації за допомогою сигналів може бути береговий маяк, який своїми світловими сигналами передає інформацію (вказівки) кораблям, які підпливають до гавані. Під час спілкування по телефону звукова інформація передається до абонента по лінії зв'язку за допомогою коливань електричного струму, які відтворюють звукові коливання.

Будь-якого виду інформація передається за допомогою конкретних повідомлень. Повідомлення, як і інформація, належать до основних, неозначуваних понять інформатики. Повідомлення формуються як послідовності знаків, сигналів.

Відповідність між повідомленням та інформацією не є взаємно однозначною. Одну й саму інформацію можна передати за допомогою різних повідомлень, наприклад, різними мовами чи додаванням несуттєвого повідомлення, що не несе ніякої додаткової інформації. З іншо боку, одне й те саме повідомлення може сприйматися по-різному, тобто може передавати різну інформацію. Наприклад, різні люди, читаючи статтю англійською мовою, отримують різну інформацію залежно від рівня володіння цією мовою.

За формою подання можна виділити наступні види інформації:

1)   текстова — інформація, яка міститься в усій друкованій літературі або відображаєся технічними пристроями у вигляді текстів;

2)   графічна — картини, малюнки, графіки, діаграми, схеми (а також відеоінформація);

3)   звукова інформація — усне мовлення, музичні мелодії, шумові ефекти;

4)   чисельна — набори числових даних;

5)   керуюча — вказівки, команди, накази, які передаються певним виконавцям (виконавцями команд можуть бути живі істоти та технічні пристрої такі, як роботи, комп'ютери).

6)   комбінована (або мультимедійна) – це інформація, що утворюється як комбінація об’єктівпопередніх видів. Прикладом такої інформації є Web-сторінки в Інтернеті.

Інформація кожного виду подається в пам’яті обчислювальних машин за допомогою числових кодів, які на фізичному рівні машин зберігаються у двійковому вигляді.

Кодування — це процес заміни знаків одного набору знаками іншого набору при збереженні змісту тієї інформації, яка за допомогою цих знаків подається. Якщо кодування здійснюється за допомогою двох елементів (наприклад, + і -, 0 і 1), то таке кодування називається двійковим. Двійкове кодування інформації для подання її в пам'яті обчислювальних машин здійснюється за допомогою цифр 0 і 1 двійкової системи числення. Подання інформації за допомогою двійкових кодів технічно виявилося зручним тому, що двом знакам, які для цього використовуються, можуть відповідати два різні фізичні стани: намагнічена або розмагнічена елементарна ділянка на поверхні магнітного диска, тече через провідник струм або ні.

Кодування текстової інформації. Сукупність усіх символів, за допомогою яких здійс­нюється спілкування з комп'ютером, утворює кодову таблицю. Однією з найбільш відомих ко­дових таблиць є таблиця ASCIІ (American Standard Code for Information Interchange), яка для кодування кожного символа використовує 8 розрядів. Вона міс­тить 256 символів, бо можна закодувати 2^8=256 символів. Символи в кодових таблицях нумеруються числами, і ці номери називаються кодами символів.

Тексти слід розглядати як послідовності символів, і текстова інформація в пам'яті обчислюва­льних машин подасться у вигляді послідовності числових кодів тих символів, з яких вона складається.

Кодування графічної інформації. Графічна інформація, яку можуть опрацьовувати об­числювальні машини, є дискретною. Графічні зображення на екранах моніторів формуються шляхом підсвічення усіх точок екрану в певні кольори. Елементом графічного зображення є то­чка, або піксель (Picture Element). У практиці використовують таблиці, які містять 16, 256, 65536, понад 4 млн. і більшу кількість кольорів.

Поширеним підходом для кодування графічних зображень є занесення в пам ять обчис­лювальних машин кодів кольорів тих точок, з яких воно складається, причому в такій послідо­вності, в якій ці точки підсвічуються на екрані (в кожному рядочку зліва направо, рядочки під­свічуються зверху вниз). На основі цього завжди можна підрахувати, який об'єм пам'яті потрібний для збереження графічного зображення. Часто графічна інформація під час кодуван­ня за допомогою певних алгоритмів стискується.

Кодування чисельної інформації. Двійкові коди цілих чисел будуються шляхом пере­ведення їх у двійкову систему числення.

Для запам'ятовування цілих чисел виділяється певна кількість байт (часто 2), які нази­ваються машинними словами і в які будуть заноситися їх двійкові коди. Крайній лівий біт ма­шинного слова виділяється для кодування знаку числа. Решта бітів займає двійкове подання числа без знаку, яке при потребі доповнюється незначущими нулями до потрібної довжини.

Дійсні числа можуть бути подані у формі з фіксованою або плаваючою крапками. При кодуванні дійсних чисел з фіксованою крапкою один розряд (крайній лівий) виділяється для запам'ятовування знаку числа, а решта розрядів поділені на дві частини: в одну з них заносить­ся код цілої частини, а в іншу — код дробової.

Перед кодуванням дійсні числа у формі з плаваючою крапкою зводять до стандартного нормалізованого виду: mEp, де m — мантиса числа (0<m<1), р — порядок числа (цей запис означає: m*10^p). Машинне слово такого числа містить два знакові біти: один — для знаку мантиси, а другий — для знаку порядку. Решта бітів ділиться на дві частини, в одну частину поміщається код порядку, а в іншу — код мантиси. Кількість бітів, які виділяються для мантиси та порядку, залежить від ти­пу обчислювальної машини та програмних засобів, які на ній використовуються.

Кодування звукової інформації. За своєю фізичною природою звук, який сприймається органами слуху людини, — це звукові хвилі, які поширюються у пружному середовищі. Мате­матично такі хвилі описуються рівностями, до складу яких входять такі визначальні числові величини, як частота коливань, амплітуда, фаза зміщення. А це є числа, які кодуються за зага­льноприйнятими правилами.

Кодування керуючої інформації. Керуюча інформація призначена дня сприйняття її деяким виконавцем. Якщо виконавцем є технічний пристрій, то він володіє певною системою команд, які можна подавати на його вхід. Якщо виконавцем команд є мікропроцесорна техніка (калькулятори, комп'ютери), то систему команд таких виконавців утворюють команди їх процесорів. Для комп'ютерів ці команди утворюють мову машинних команд. Керуюча інфор­мація в такому випадку записується у вигляді відповідних програм.

Систему команд кожного виконавця можна подати у вигляді таблиці, де кожній команді відповідає свій номер, який називається кодом команди. Під час кодування керуючої інформації записується послідовність кодів тих команд, з яких вона складається.

CSS

CSS

HTML - мова розмітки документа.
CSS расшифровывается Cascading Style Sheets (Каскадные Документы Стилей). С помощью CSS Вы можете оформлять HTML документы.

Селекторы тэгов

p

{

color:green;

}

h2

{

color:red;

}

Идентификатор для элемента задается с помощью атрибута id
 (<p id="идентификатор">текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).
С помощью атрибута class можно задать, что элемент относится к группе
 (<p class="имя_группы">текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).

/* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */

h2.test1 

{

color:green;

font-family:verdana;

font-size:1.2em;

}

/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */

div p

{

color:green;

font-family:verdana;

font-size:1.2em;

}

/* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */

div+p

{

color:green;

font-family:verdana;

font-size:1.2em;

}

h1,h2,p

{

font-family:verdana;

color:green;

}

Существует несколько способов включения CSS в HTML документы.

1. Внешнее объявление стилей

Внешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например для целого веб-сайта).
В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.
Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.
Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:

<head>

<link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" />

</head>

Внешний файл стилей является обычным текстовым файлом с расширением .css.

Пример содержимого внешнего файла стилей:

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

2. Внутреннее объявление стилей

Внутреннее объявление стилей используются в случаях, когда стиль нужно задать только для одного отдельного HTML документа.

<head>

<style type='text/css'>

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

</style>

</head>

3. Строковое объявление стилей

<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p

Стили подключенные разным способом имеют разный приоритет.

• Строковые стили  - найвищий пріоритет
• Внутренние стили - нижчий
• Внешние стили - найнижчий

HTML

HTML

Оформлення тексту в HTML-сторінці

HTML  – це мова розмітки гіпертекстових документів.

Для підготовки html-файлу можна використати текстовий редактор NotePad. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html. Структура html-файлу:

<HTML>

<HEAD>

      <TITLE> Назва Web-сторінки </TITLE>

      <!-- Тут задаються вид кодування, підключення CSS, JavaScript -->

</HEAD>

<BODY параметри>

     Це відображається на сторінці.

      <!-- Задається оформлення тексту  -->

      <!-- Задаються 3 види списків, таблиці, малюнки 2 види гіперпосилань  -->

      <!-- Задається підключення JavaScript -->

     </BODY>

  </HTML>

Команди мови HTML назива­ються тегами. Теги бувають одинарними і парними.

У середині пари тегів <BODY параметри>...</ВODY> запи­сують те, що має відображатися у вікні браузера.

Основні параметри тега BODY:

BACKGROUND = "шлях до графічного файлу"— задає картинку для тла;

BGCOLOR = "white" — задає білий колір тла, якщо не використовується тло-картинка;

TEXT = "black" — задає чорний колір тексту на сторінці.

Для форматування тексту використовуються такі теги:

<P> текст </Р> - задання нового абзацу

<BR> - перехід на новий рядок

<В> текст </В>    — товстий шрифт тексту

<I> текст </I>    — шрифт-курсив

<U> текст </U>    — підкреслений текст

<SUB> текст </SUB> - нижній індекс

<SUP> текст </SUP> - верхній індекс

<В> <І> текст </І></В> — товстий курсив (застосовується принцип вкладення тегів).

Є шість видів заголовків, які відрізняються розмірами символів.

       <Н1>Заголовок </H1> - найбільшого розміру символу ,

Заголовки <Н2>,<НЗ>,<Н4>, <Н5>,<Н6> - щоразу менших розмірів.

По замовчуванню текст на сторінці вирівнюється до лівого краю вік­на.

<CENTER> елемент </CENTER> — вирівнювання до центру

<LEFT> елемент </LEFT> — вирівнювання до лівого краю

<RIGHT> елемент </RIGHT> — вирівнювання до правого краю

Щоб задати назву конкретного шрифта, його розмір і колір, використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад,

<FONT FACE = "Decor, Arial " SIZE = +2 COLOR = "red"> текст </FONT>

            Якщо на комп'ютері встановлено шрифт Decor, то він буде використаний до цього тексту, в іншому разі браузер застосує шрифт Arial, інакше - деякий свій стандартний шрифт, наприклад, Times New Roman.

            Розміри символів шрифту можуть бути від 1 до 7. Розмір З вважається стандартним, він відповідає приблизно 10 пунктам. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий поточний розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж поточний, відповідно число -2 означатиме на дві одиниці менший, ніж поточний.

Основні кольори мають такі назви:

black   - чорний, blue     - синій, red       - червоний, green    - зелений, yellow  - жовтий,

white    - білий та інші.

            Різні відтінки кольорів можна задати шістнадцятковими кодами, наприклад, , червоний колір задається так  #ff0000.

Є три типи списків: ненумероваций, нумерований, означення.

Список може мати заголовок, який охоплюють тегами <LH>...</LH>

Ненумерований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LI>:

<LH> Мої улюблені предмети:</LН>

<UL>

    <LI>інформатика

    <LI>алгебра

    <LI>геометрія

</UL>

Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> :

<LH> Мої улюблені предмети :</LH>

<OLTYPE="1">

    <LI>інформатика

    <LI>алгебра

    <LI>геометрія

</OL>

Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" — латинськими малими (а, b, c,...) чи великими (А, В, С,...) літерами.

Список означень використовують для пояснення термінів, створення словників і т.д. Його утворюють за допомогою парно­го тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> :

<LH>Класи</LH>

 <DL>

      <DT> 10 А

           <DD> Андрій 

          <DD> Костя

      <DT> 10 Г

           <DD> Оксана

          <DD> Ірина

</DL>

      Таблиці створюють за допомогою таких тегів:

<TABLE параметри>

<ТС>Заголовок таблиці</ТС>

</TABLE>

<TR>...</TR> - формують рядок таблиці

<TH>текст</TH> - формують клітинку-заголовок рядка чи стовпця (зображаються товстішим шрифтом)

<TD>текст</TD> - формують текст кожної клітинки

Наприклад:

<TABLE BORDER=3  BGCOLOR="yellow"  BORDERCOLOR="green" >

     <ТС><І>Мої оцінки за два семестри:</І></ТС>

      <TR>   <TH></TH>

                   <ТН>І cеместр </ТН>

                   <ТН>IІ cеместр </ТН>

       </TR>

      <TR>   <TH >Інформатика</ТН>

                   <TD>11</TD>

                   <TD>12</TD>

       </TR>

       <TR>   <TH ALIGN="сenter">Математика</TH>

                  <TD ALJGN="center">9</TD>

                  <TD ALJGN="center">10</TD>

      </TR>

       <TR>   <TH ALIGN="right">Фізика</TH>

                  <TD ALJGN="right">7</TD>

                  <TD ALJGN="right">8</TD>

       </TR>

</TABLE>

Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN=2. Щоб об'єднати у стовпці дві клітинки в одну, викорис­товують параметр COLSPAN=2.

Колір рамки таблиці задають параметром BORDERCOLOR ="колір рамки", а колір тла клітинок - параметром BGCOLOR ="колір тла". Товщину рамки в пікселях задають параметром BORDER ="товщина рамки, наприклад, 3". Якщо значенням параметра є число нуль або параметра немає, то рамка буде невидимою.

  Графічні зображення (фотографії, картинки) можна вставити на Web-сторінку за допомогою тега <IMG> з параметрами:

<IMG SRC="aдpeca графічного файлу" ALT=”альтерна­тивний текст" ALIGN="center" WIDTH=50% HEIGHT=200>

Обов'язковим є лише перший параметр SRC. Альтернативний — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл (неправильний шлях до файлу чи назва файлу) або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою у пікселях або відсотках. Зображення можна подати в рамці. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселях".

Як "aдpeca графічного файлу"  використовують URL-адреси  файлів ( файлів, які є на серверах у мережі Інтернет) або задають повний або відносний шлях до файлу на на локальному диску.

Гіперпосилання є двох видів:

1) на файл;

2) на деяке місце на певній сторінці.

Гіперпосилання вставляють за допомогою парного тега <А>...</А> з параметром HREF = "адреса файлу".

Гіперпосиланням може бути текст

<А HREF = "http://www.lider.com"> Танцювальний колектив</А>

або графічне зобра­ження

<А HREF = " http://www.lider.com"> <IMG SRC - "dance.gif" BORDER =5 > </A>

Колір гіперпосилання визначається у тезі BODY параметром LINK = "колір". Параметри: VLINK= "інший колір" — змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" — змінює колір щойно активізованого гіперпосилання на ще інший.

  Другий тип гіперпосилань — посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди відбуватиметься перехід

            <А NAME="#назва"></A>.

На сторінці розміщують гіперпосилання на позначку:

<А HREF="#назва"> текст гіперпосилання або малюнок</А>.