- •1Правила побудови html-документів
- •1.1Мова html
- •1.2Історія розвитку html
- •1.3 Основні елементи мови htMl
- •1.4 Групи тегів html
- •1.5 Розділ head документа
- •Назва документа
- •1.6 Розділ документа body
- •2.Форматування тексту
- •2.1Теги рівня блоку і послідовні теги
- •2.2 Логічне та фізичне форматування
- •2.3 Теги логічного форматування
- •2.4 Теги фізичного форматування тексту
- •Мал. Використання вкладених тегів форматування тексту
- •Мал. 1.4. Отображение примера браузером Opera
- •Мал. 1.6. Призначення розмірів шрифтів
- •3.Форматування html-документа
- •3.1Поділ на абзаци
- •3.2Заголовки внутри html-документа
- •3.3 Горизонтальні лінії
- •Мал. 1.10. Так цитата виглядає у вікні браузера Opera
- •3.5 Спеціальні символи
- •4. Посилання на інші документи та файли
- •4.1 Організація посилань
- •4.2 Правила запису посилань
- •4.3Внутрішні посилання
- •4.4 Посилання на документи різних типів
- •5.Створня web-сайту
- •5.1 Початок створення web-сторінки
- •Створення шапки за допомогою html коду:
- •Висновок
- •Список використаних джерел
1.3 Основні елементи мови htMl
<HTML></html>
Означає документ на мові HTML. Даний елемент є самим зовнішнім, так як між його початковим і ліжковим тегами повинна знаходиться вся WEB – сторінка. В принципі цей елемент. Він має атрибути version, long і dir, якими в даному випадку рідко хто користується, і допускає вкладення елементів HEAD, BODY і інших, що визначає загальну структуру WEB-сторінки. Кінцевим тегом </html> закінчуються всі документи у форматі HTML.
<HEAD></head>
Область заголовка Web – сторінки, її перша частина. HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути IANG, DIR, повинен включати елемент TITLE і допускає вкладення елементів BASE, META, LINK, OBJECT, SCARIPT, STULE.
<TITLE></title>
Елемент для розміщення заголовка Web – сторінки. Рядок тексту , розташованого всередині цього елемента, відображається не в документі, а в заголовку вікна браузера. Цей рядок часто використовується при організації пошуку в WWW. Цей рядок повинен досить точно відображати призначення документа.
<STYLE></style>
Елемент для опису стилю деяких елементів Web – сторінки. У файлі Strukt. Htm шрифти призначені для елементів h2, code. Для кожного елемента існує стильове оформлення за замовчуванням, тому вживання елемента style не обов'язково, але бажано. Цей елемент введений порівняно недавно, без нього немислима робота в додатках World, Excel.
<META>
Елемент містить службову інформацію, яка не відображається при перегляді Web - сторінки. Всередині нього немає тексту у звичайному розумінні, тому немає і кінцевого тега. Кожен елемент Meta містить два основних атрибута, перший з яких визначає тип даних, а другий – зміст. Ось кілька прикладів meta – даних:
Дата, що позначає термін придатності документа: Name – "Expires" content = "Дата" Адреса електронної пошти: Name = "Reply – to" content = " Ім'я @ Адресу " Ім'я автора Web-сторінки: Name = "Author" content = "Ім'я автора" Набір ключових слів для пошуку: Name = "Keywords" content = "1 слово, слово 2, 3 слово..." Короткий опис змісту Web - сторінки: Name = "Description" content = "Вміст сторінки Опис типу і характеристик Web – сторінки: Name = "Content – Type" content = "Опис сторінки" Вказівка додатка, в якому була створена Web – сторінка: Name = "Generator" content = "Назва HTML – редактора"
Атрибут Name використовується додатком – клієнтом для отримання додаткової інформації про Web – сторінках і їх впорядкування. Його часто замінюють атрибутом http – equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.
Елемент META може містити URL. Шаблон атрибута такий:
URL = "http: // адреса"
<BODY></body>
Цей елемент містить в собі гіпертекст, який визначає власне Web – сторінку. Кінцевий тег цього елементу треба шукати в кінці HTML-файлу. Усередині елемента BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині початкового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю.
Атрибут, що визначає фон сторінки, є одним з найбільш важливих для дизайну.
background = "Шлях до файлу"
Більш просте оформлення фону зводиться до завдання його кольори:
bgcolor = "#RRGGBB"
Кольори фону задається трьома дворозрядними шістнадцятковими числами, які визначають інтенсивність червоного, зеленого і синього. Обидва наведених вище ознаки не є альтернативними і часто використовуються спільно: якщо з яких-небудь причин не може бути знайдений малюнок фону, використовується колір.
Оскільки фон станиці може змінюватися, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступною атрибут: text = "#RRGGBB"
Для завдання кольору тексту, гіперпосилань використовуються наступні атрибути: link = "#RRGGBB"
Точно так само можна задати колір для відвіданих гіперпосилань: vlink = "#RRGGBB"
Можна також вказати зміна кольору для останньої вибраний користувачем гіперпосилання:
Alink = "#RRGGBB" <!-- Коментар --!>
У будь-якій мові програмування є конструкції, що дозволяють створювати довільні ремарки. HTML у цьому сенсі – не виняток. Текст, введений всередині цього елемента, ігнорується браузером. Ці елементи можуть розташовуватися в будь-якому місці WEB-сторінки. Ознакою коментаря служить знак оклику, а текст коментаря повинен обрамляться подвійним дефісом. Наприклад: <!-- Коментар --!>
<H1><h1>
Елемент заголовка. Існує шість рівнів заголовків, які позначаються H1...H6. Заголовок 1-го рівня самий великий, а рівень 6 забезпечує найменший заголовок. Для заголовків можуть використовувати атрибути, що задають вирівнювання вліво, по центру або праворуч:
align = "left"
align = "center"
align = "right" <HR>
Горизонтальна лінія – дуже часто використовуваний елемент. По-перше, тому що з його допомогою дуже зручно ділити сторінку на частини.
По-друге, тому що вибір подібних елементів оформлення у автора сторінки дуже невеликий. Цей елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання вліво, по центру, вправо, по ширині:
align = "left"
align = "center"
align = "right"
align = "justify"
Можна задати товщину лінії:
Size = товщина в пікселях
Можна керувати довжиною лінії:
width = довжина в пікселях
width = довжина у відсотках Можна вибрати колір:
color = "колір"
<A></a>
HTML-документ може бути дуже великим, і в цьому випадку потрібно мати можливість швидкого переходу до потрібного розділу документа. Для цього можна використати механізм гіперпосилань. Необхідно також в потрібних місцях тексту розставити відповідні мітки. Шаблон для створення міток такий: <A name = “>Довільний текст</a>
В даному випадку даної рядку документа присвоюється ім'я, і, отже, в іншій частині документа або навіть на іншому документі може бути створена гіперпосилання, що приводить в цю точку. Для переходу всередині документа можна використовувати наступну конструкцію:
<P>перейти до <A href = "#мітка">мітці</a></p>
Кілька подібних рядків можуть утворити своєрідний зміст Web-сторінки, яку можна розмістити на початку і в кінці документу.
Читаючи цю роботу, ви, звичайно, вже досить багато попрацювали з посиланнями і розумієте, що це таке на практиці.
Ви зрозуміли, що:
гіпертекстові посилання серед інших елементів тексту виділяються кольором і підкресленням;
мишачий курсор на посилання змінює свою форму і перетворюється на перст;
для переходу за посиланням необхідно клацнути по ній мишкою; для повернення із заслання необхідно використовувати навігаційну кнопку браузера "Назад" ("Back").
Якщо посилання утворюють вкладену ланцюжок, то кнопки Назад (Back) і Вперед("Forward") можна використовувати для руху по пройденому посилального шляху в обидва боки. Вони працюють як традиційні операції "відкочування" і "накатка" в більшості прикладних програм.
У наведеному нижче прикладі використовується ланцюжок вкладених посилань. Здійсніть невелику подорож. Спочатку, клацнувши посилання, дістаньтеся до тексту, в якому вже немає посилань. Потім, користуючись навігаційними кнопками браузера, "пройдіться" по пройденому шляху вперед і назад.
Посилання можуть виводити не тільки в різні документи, але завантажувати на екран різні фрагменти одного і того ж тексту. В останньому випадку навігаційні засоби браузера працюють також.