Мова Html
Визначення призначення і вивчення структури комп'ютерних мереж. Загальний опис глобальної мережі Інтернет як всесвітньої комп'ютерної мережі. Призначення і опис мови розмітки HTML. Вивчення основних розділів документа HTML і порядку форматування символів.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | украинский |
| Дата добавления | 16.07.2012 |
| Размер файла | 23,9 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
РЕФЕРАТ
на тему: «Мова Html»
План
1. Глобальна мережа Інтернет. Призначення HTML
2. Мова розмітки гіпертексту HTML. Основні розділи документу HTML
3. Форматування символів
4. Заголовки
5. Списки
6. Використання графіки
7. Гіперпосилання
8. Таблиці
9. Форми
10. Стилі
1. Глобальна мережа Інтернет. Призначення HTML
Інтернет - це всесвітня комп'ютерна мережа, яка об'єднує в єдине ціле десятки тисяч різнотипних локальних та глобальних мереж. Інтернет об'єднує мільйони комп'ютерів, нею користуються десятки мільйонів людей.
Інтернет започаткований Агентством з наукових досліджень Міністерства оборони США (ARPA) як проект розробки надійних цифрових комунікацій для військових потреб у 1969 році. Спочатку ця мережа існувала для обміну інформацією між комп'ютерами військових (науково-дослідних та навчальних) закладів. У 80-і роки її вже використовували в державних (навчальних, наукових) та комерційних цілях. У 90-і роки мережа Інтернет вийшла за межі США і до неї приєдналися країни всіх континентів світу.
Основа WWW (World Wide Web) - мова програмування Hyper Text Markup Language (HTML) - мова гіпертекстової розмітки тексту. Мова HTML була запропонована Тімом Бернесом-Лі у 1989 році як один з компонентів технології розробки системи WWW для опису того, як має виглядати документ.
Стандарт HTML є мовою подання гіпертексту, запропонованою організацією W3C (World Wide Web Consortium) і розробленою на початку 1996 року в кооперації з такими фірмами як IBM, Microsoft, Netscape Communication Corporation, Novell, SoftQuad, Spyglass та Sun Microsystems. Організація W3C спільно із згаданими фірмами продовжує роботу над розширенням можливостей елементів мови HTML і інтернаціоналізацією мови.
2. Мова розмітки гіпертексту HTML. Основні розділи документу HTML
Документ HTML можна розглядати як сукупність вказівок (команд) і даних (як безпосередньо розміщених у документів, так і пов'язаних з ним посиланнями), які при інтерпретації програмою-броузером відтворюють вигляд сторінок документу. Документ HTML складається з так званих тегів.
Тег - це одиниця коду HTML, яка складається з "команди", поміщеної у кутові дужки < >. Теги бувають відкриваючими та закриваючими. Закриваючі теги починаються зі знаку /. Документи починаються і закінчуються тегами, які позначають його початок та кінець: <HTML> та </HTML>
В межах документу виділяються дві області - заголовок та власне "тіло документу". Заголовок оголошується тегами <HEAD> та </HEAD>
У межах заголовку можуть розміщуватись власне заголовок документу (відображається у верхній стрічці вікна броузера), він створюється тегами <TITLE> та </TITLE>; крім цього у заголовку документу може міститися тег <META>, який використовується для технічного опису документу (інформація для пошукових програм), а також тег <STYLE>, який використовується для опису стилів, які використовуються у документі.
Наступним розділом документу HTML є розділ "тіла документу". Він починається тегом <BODY>, а закінчується тегом </BODY> . Він має наступні параметри:
- BACKGROUND = "*.*" Замість *.* вказується адреса малюнка, який повинен бути фоном даного документу
- BGCOLOR= Вказується назва або номер кольору, який повинен бути фоновим для даного документу
- TEXT= Вказується колір тексту
- LINK= Визначає колір гіперпосилань у документі
- ALINK= Визначає колір гіперпосилань у момент натиснення
- VLINK= Визначає колір переглянутих гіперпосилань
комп'ютер мережа мова html
3. Форматування символів
Для оформлення документів може використовуватись багато кольорів. З ними можна ознайомитися на цій сторінці .
Для переходу на новий рядок використовується тег <BR> .
Для виділення тексту в абзаци існують теги <P> та </P> .
Текст, розміщений між тегами <B> та </B> буде жирнішим. bold
Текст, розміщений між тегами <I> та </I> буде написаний курсивом. italics
А текст, розміщений між тегами <U> та </U> буде підкресленим. underlined
Текст, розміщений між тегами <S> та </S> буде перекресленим. striken
Текст, розміщений між тегами <SUB> та </SUB> буде написаний як нижній індекс. індекс
Текст, розміщений між тегами <SUP> та </SUP> буде виглядати як верхній індекс. індекс
Тег <HR> вставляє у документ горизонтальну лінію.
Цікавого оформлення сторінці надає тег <MARQUEE> та </MARQUEE> - він додає так звану "рухому стрічку". У саму стрічку, яка переміщатиметься екраном, можна вставити як текст, так і малюнки, таблиці тощо.
Крім цього, можна використовувати різне форматування шрифта за допомогою тегу <FONT> , який має параметри <FACE> - тип шрифта (наприклад: 'Lucida Sans', 'Arial', 'Monotype Corsiva', 'Times New Roman'), <SIZE> - розмір шрифта (1-7), та <COLOR> - колір шрифта.
Так виглядають шрифти різних розмірів: 1 2 3 4 5 6 7
Теми
4. Заголовки
Для змістового виділення елементів сторінки використовуються теги-заголовки. Заголовки в HTML бувають шести типів. Текст, розміщений всередині тегу заголовка <H1> </H1> відображатиметься відповідно до типу цього заголовка. Найбільшим є заголовок Н1, найменшим - Н6. Заголовок може розміщуватись на екрані по центру, або вирівнений по правому або лівому краю. <H2 align=center \ right \ left > </H2>
Заголовок першого рівня_по центру
Заголовок другого рівня_по правому краю
Заголовок третього рівня_по лівому краю
Заголовок четвертого рівня_по центру
Заголовок п'ятого рівня_по правому краю
Заголовок шостого рівня_по лівому краю
Теми
5. Списки
Списки у HTML бувають трьох видів: марковані, нумеровані та довільної форми.
Марковані списки оформлюються та виглядають наступним чином:
|
<ul type=circle\disk\square > < li > Перша група < /li > < li > Друга група < /li> < /ul > |
Перша група Друга група |
Перша група Друга група |
Перша група Друга група |
Як бачимо, можливий вибір маркування списку (circle/disk/square = коло/круг/квадрат)
Нумеровані списки оформлюються та виглядають наступним чином:
|
<ol start=n type="1 \ a\ A\ I\ i" > < li > Перша група < /li > < li > Друга група < /li> < /ol > |
Перша група Друга група |
Перша група Друга група |
Перша група Друга група |
Перша група Друга група |
Як видно - можна вказувати різні типи нумерування: арабські цифри, римські цифри великі й маленькі, латинські букви великі й маленькі. Крім того, можна вказувати номер, з якого починається нумерування (для третього списку це №5, для останнього - №9).
І останній тип списків - довільної форми. Приклад їх складення та вигляду:
|
<dl > < dt > Перша група < /dt > < dd > Староста А < /dd > < dt > Друга група < /dt > < dd > Староста Б < /dd > < /dl > |
Перша група Староста А Друга група Староста Б |
У цьому випадку ми вказуємо не лише елементи списку (старости), але й спосіб їх переліку (за групами)
6. Використання графіки
Для оформлення документів можна використовувати графічні об'єкти. Як вже згадувалось, можна вказати малюнок або колір, які будуть слугувати тлом для документу. Можна також вставляти малюнки прямо в документ. Для цього використовується тег <IMG> . Він має наступні параметри:
src="*.*" - файлова адреса малюнка, який потрібно вставити
width= - ширина малюнка (в пікселях)
height= - висота малюнка (в пікселях)
align="center \ right \ left" - спосіб вирівнення малюнка по центру \ по правому \ по лівому краю
alt="picture" - альтернативний текст для випадків, коли малюнок не завантажується
Теми
7. Гіперпосилання
Інтернет базується на документах, що пов'язані між собою, тобто на гіперпосиланнях між документами. Їх можна створювати за допомогою мови HTML. Між тегами <a href=”index.html”> та </a > вставляється деякий текст, клацнувши на якому можна перейти до вказаного у href документу (в даному випадку - до index.html).
Іноді виникає потреба перейти до підтеми в межах одного документу. Тоді використовується так званий якір. У тому місці документа, куди треба буде перейти, вставляється мітка <a name=”a1”> , а посилання на неї створюється за допомогою тегів <a href=”index.html#a1”> та </a >
8. Таблиці
Часто для структурованого представлення інформації використовуються таблиці. Вони створюються тегами <TABLE> (таблиця), <TR> (рядки таблиці), <TD> (стовпці таблиці) і виглядають наступним чином:
|
<table> <tr > <td > рядок 1 стовпець 1 </td > <td > рядок 1 стовпець 2 </td > <td > рядок 1 стовпець 3 </td > </tr > <tr > <td colspan=2 > рядок займає 2 стовпці </td > <td rowspan=2 > рядок 2 і 3, стовпець 3 </td > </tr > <tr > <td > рядок 3 стовпець 1 </td > <td > рядок 3 стовпець 2 </td > </tr > </table > |
рядок 1 стовпець 1 рядок 1 стовпець 2 рядок 1 стовпець 3 рядок займає 2 стовпці рядок 2 і 3, стовпець 3 рядок 3 стовпець 1 рядок 3 стовпець 2 |
Як бачимо - мова HTML надає можливість об'єднання комірок таблиці: тег <td colspan= > поєднує стовпці, а тег <td rowspan= > - рядки.
Тег таблиці <TABLE> має наступні параметри:
bgcolor - колір таблиці
border= - ширина рамки таблиці (0-невидима рамка)
width= - ширина таблиці (в пікселях або у відсотках)
height= - висота таблиці (в пікселях або у відсотках)
align="center \ right \ left" - спосіб вирівнення таблиці по центру \ по правому \ по лівому краю
Схожі параметри мають теги <TD> та <TR> :
bgcolor - колір комірки / всього рядка
background=*.* - колір комірки
width= - ширина комірки (в пікселях або у відсотках)
height= - висота комірки (в пікселях або у відсотках)
align="center \ right \ left" - спосіб вирівнення вмісту комірок: по центру \ по правому \ по лівому краю
valign="top \ bottom \ middle" - спосіб вирівнення вмісту комірок по вертикалі: згори \ внизу \ посередині
nowrap - блокує автоматичне перенесення слів в межах комірки
colspan= - кількість стовпців комірки
rowspan= - кількість рядків комірки
9. Форми
Форми дозволяють організувати інтерактивність для web-сторінки. Форми в документах HTML розміщуються між тегами <FORM > та </FORM> .
Всередині самої форми може бути розміщений звичайний текст, інші HTML-документи (таблиці), а також елементи форм (випадаючі списки, текстові поля, кнопки). Заповнені форми передаються певній програмі, яка обробляє отримані дані, але можна також відправити результати електронною поштою. Форми у HTML мають наступні атрибути:
ACTION Цей атрибут задає те, як оброблятиметься форма. Зазвичай йому присвоюється адреса програми, яка оброблятиме дані, отримані з форми. Тут можна також вказати електронну адресу, на яку треба відсилати відомості з форми. <form action="index.pl"> <form action="x@x.lviv.ua">
METHOD Задається те, як саме форма передаватиметься за адресою, вказаною в попередньому атрибуті(варіанти: get/post)
ENCTYPE Задає спосіб кодування (application/x-www-form-urlencoded)
Форма може складатись з різних елементів: текстових полів, випадаючих меню, списків, переключателів та кнопок.
Текстові елементи. Для створення найпростішого текстового поля потрібно вставити елемент <INPUT> і присвоїти його атрибуту значення text. Всі елементи форми повинні мати ім'я. <input type=text name=name> Значенню атрибуту size елементу <INPUT> відповідає кількість символів, які будуть введені у це поле. Якщо користувач введе більше символів, то текст прокручуватиметься. Якщо треба обмежити розміри поля, можна визначити атрибут maxlength - максимальна кількість символів, яку можна ввести у поле.
Поле для паролів. Дані, введені у це поле показуються на екрані у вигляді “зірочок” для того, щоб введена інформація залишалась приватною. Для цього атрибуту type присвоюється значення password.
Багатострічкове текстове поле. У цього елемента є атрибути rows (кількість рядків), cols (кількість стовпців), name (ім'я). <textarea name=t1 rows=6 cols=60> та </textarea> . Для цього елементу можна задати значення по замовчуванню між тегами <textarea> та </textarea> .
Меню. Випадаюче меню дає користувачеві можливість вибрати один варіант з кількох можливих. Це меню створюється елементом <select> та </select> . Всередині його розміщуються кілька елементів <option> . При вказанні в атрибуті value іншого значення, ніж після <option> , на обробку відправлятиметься саме це значення. Можна вказати який елемент буде вибраним по замовчуванню через атрибут selected. Можна також поставити атрибут size - тоді на екран виводиметься лише певна кількість стрічок списку.
<select name="s1">
<option value="Ukraine"> Ukraine
<option value="Russia"> Russia
<option value="Other"> Other country
</select>
Мітки. Якщо користувачеві потрібно обрати кілька пунктів з великої групи варіантів можна використати поле для міток. Для цього атрибуту type елементу <input> присвоюється значення checkbox. За допомогою атрибута value можна вказати “своє” значення замість того, що мало б передаватись далі.
<input type=checkbox value="Cat" name=a1> Cat
<input type=checkbox value="Parrot" name=a1> Parrot
Кнопки-перемикачі. Користувач може обирати лише один варіант з запропонованих. Для цього атрибуту type елементу <input> присвоюється значення radio. Тут обов'язково потрібно вказувати однакове ім'я name і різні значення value.
<input type=radio name=r1 value="yes"> Yes
<input type=radio name=r1 value="no"> No
Кнопки reset та submit. Ці кнопки організовуються також через задання значення атрибуту type елементу <input> як reset або submit відповідно. Кнопка Reset дозволяє користувачеві очистити заповнені поля і перевести форму у початковий стан. Submit - дає команду броузеру відправити вміст форми за адресою, вказаною у атрибуті action елементу <form> .
10. Стилі
Таблиці стилів, так звані CSS, Cascading Style Sheets містять опис формату частини або цілого тексту. Задання стилю відбувається за допомогою тегу <style>
<head>
<style>
тег {властивість1: значення1; властивість2: значення2; ;властивістьN: значенняN}
</style>
</head>
Таблиці стилів можуть розміщуватися в окремому файлі, що дозволить звертатися до них всім сторінкам певного сайту - а це полегшить цілісність його оформлення. Тоді в межах тегу <head> вставляється посилання на файл зі стилями:
<link rel="stylesheet" type="text/css" hreaf="x.css">
За допомогою стилів ми можемо змінити вигляд тегів h, p, body, table тощо. Наприклад, задання стилю body {background:honeydew} означає, що лише вказуючи тег body він завжди позначатиме фон кольору honeydew.
Можна також вводити власні стилі. Наприклад, стиль .blue {color:blue} означає, що текст буде написаний блакитним кольором.
При використанні стилів доцільно користуватись тегом <div> - він не форматує документ, але помічає фрагмент тексту, який розглядатиметься як єдиний об'єкт. Тоді для цього об'єкту можна вказати певний стиль форматування - <div class=blue> При цьому всередині тегу <div> можуть бути розміщені й інші елементи та теги.
Стильових ефектів є досить багато. З їх допомогою можна оформити веб-сторінку оригінально, різноманітніше, ніж за допомогою звичайних тегів. Наприклад ефектами оформлення можуть бути:
- background колір фону
- font-family вид шрифта
- font-size розмір шрифта
- color колір шрифта
- text-align вирівнювання тексту
- text-decoration оздоблення тексту
- font-weight - жирність шрифта
- margin-top - відстань від верхнього рядка
- line-height - висота рядка
Размещено на Allbest.ru
Подобные документы
Визначення поняття і дослідження структури топології комп'ютерних мереж як способу організації фізичних зв'язків персональних комп'ютерів в мережі. Опис схеми топології типів шина, зірка і кільце. Багатозначність структур топології комп'ютерних мереж.
реферат [158,1 K], добавлен 27.09.2012Поняття та завдання комп'ютерних мереж. Розгляд проекту реалізації корпоративної мережі Ethernet шляхом створення моделі бездротового зв’язку головного офісу, бухгалтерії, філій підприємства. Налаштування доступу інтернет та перевірка працездатності.
курсовая работа [2,2 M], добавлен 20.03.2014Знайомство з основами побудови і функціонування комп'ютерних мереж, виділення їх особливостей і відмінностей. Характеристика основних способів побудови мереж. Розрахунок економічної ефективності впровадження корпоративної локальної обчислювальної мережі.
курсовая работа [275,0 K], добавлен 18.11.2014Характеристика та призначення Прикладного рівня як джерела і приймача для переданих через мережу повідомлень. Устаткування, принцип роботи локальних та глобальних комп’ютерних мереж. Умови ефективної взаємодії комп'ютерів в мережному середовищі.
контрольная работа [26,7 K], добавлен 20.09.2009Поняття комп'ютерної мережі як системи зв'язку між двома чи більше комп'ютерами через кабельне чи повітряне середовище. Середовище передачі у комп'ютерних мережах. Передумови інтенсивного розвитку мережних технологій. Мережні сервіси, класифікація мереж.
реферат [20,8 K], добавлен 13.11.2013Локальні мережні ресурси. Класифікація супутників зв'язку за висотою орбіти. Максимальна швидкість роботи, яка забезпечується технологією Інтернет. Загальний доступ до принтера користувачам ЛОМ. Обмін інформацією між користувачами комп'ютерної мережі.
контрольная работа [29,2 K], добавлен 19.07.2011Історія розвитку глобальної мережі Інтернет. Способи підключення до мережі. Аналіз програм та шкільних підручників з інформатики. Рекомендації для вчителів інформатики з вивчення основних послуг глобальної мережі. Розробка програм для гурткових занять.
курсовая работа [98,6 K], добавлен 03.02.2011Вибір та обґрунтування компонентів мережі, клієнтської частини, комунікаційного обладнання та прикладного програмного забезпечення. Опис фізичної та логічної структури мережі. Принципова схема топології мережі та cхема логічної структури мережі.
курсовая работа [487,4 K], добавлен 16.02.2015Технологічні процеси складання, монтажу, налагодження і тестування комп'ютерних мереж між двома чи більше комп'ютерами. Функціонування локальної обчислювальної мережі. Офісні програмні продукти з пакету MS Office. Топологія мережі підприємства "зірка".
отчет по практике [1,5 M], добавлен 28.08.2014Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.
курсовая работа [1,3 M], добавлен 29.05.2012
