1   2
Ім'я файлу: Уроки HTML.doc
Розширення: doc
Розмір: 732кб.
Дата: 26.11.2020
скачати

Значення


Опис


Результат





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


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





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


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





Вирівнювання середини зображення по базовій лінії поточного рядка.


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





Вирівнювання середини зображення по середині поточного рядка.


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





Вирівнювання зображення по базовій лінії поточного рядка.


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





Вирівнювання нижнього кордону зображення по довколишньому тексту.


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





Вирівнює зображення по лівому краю вікна.


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





Вирівнює зображення по правому краю вікна.


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


Параметри texttop, top, middle, absmiddle, baseline, bottom задають вирівнювання зображення по вертикалі. А параметри left і right дають браузеру зрозуміти, з якого боку текст повинен обтікати зображення.

Відступи довкола зображення


Аби при обтіканні текст не прилягав близько до зображення, можна задати відступи довкола зображення. Зробити це можна за допомогою параметрів hspace (відступи зліва і справа) і vspace (відступи зверху і знизу) тега .

У наступному прикладі продемонстрований випадок, коли текст обтікає зображення, при цьому зображення вирівняне по лівому краю і має відступи довкола, рівні 5 пікселам:

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

Ось результат в браузері:

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

Розбиття зображення на частини


Бувають випадки, коли на сторінці необхідно помістити велике зображення. Але тоді сторінка довго вантажитиметься. Що ж робити?

Один з можливих варіантів виходу з положення - розрізати зображення на частини і розмістити його на сторінці за допомогою таблиці. A аби зображення виглядало як ціле, необхідно в таблиці видалити кордон і всі відступи усередині і між вічками. Тобто привласнити відповідним параметрам тега нульові значення: border="0", cellspacing="0", cellpadding="0".

У наступному прикладі ми розбили зображення на 4 частини. От як виглядатиме таблиця:












А ось результат:









Такий прийом може згодитися і в інших випадках. Тут Ви можете бачити приклад накладення 2-х зображень з текстовими вставками.

Вправа


Cоздайте на власний вибір html-документ, в якому міститимуться зображення з різними способами вирівнювання, рамками, альтернативним текстом. Створіть в одній теці з цим документом теку img, в яку помістите використовувані зображення.

Викладете документ, що вийшов, разом з текою img в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

6. Властивості сторінки - параметри тега body


  • Колір тексту

  • Колір фону

  • Фонове зображення

  • Колір заслань

  • Відступи довкола контента

  • Вправа

Як Вам вже відомо, між тим, що відкриває тегом і що закриває тегом визначають властивості контента в цілому. У цьому уроці ми і розглянемо деякі з них.

Колір тексту


Колір тексту всього документа визначається параметром text. Йому привласнюється або назва кольору, або шістнадцятиричне значення кольору, як і параметру color тега (див. Урок 2. Форматування тесту):

або

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

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

Колір фону


Колір фону сторінки визначається параметром bgcolor. Він приймає значеннями або назву кольору, або шістнадцятиричне значення кольору, як і параметр text.

або

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

Параметр bgcolor не є обов'язковим. Якщо його опустити, то фон сторінки за умовчанням буде білим. У чому Ви теж вже переконалися, виконуючи попередні вправи. :)

Фонове зображення


За допомогою параметра background можна зробити, аби в сторіночки був не однотонний фон, а фоном було б зображення. Для цього параметру background треба привласнити дорогу до зображення, яке Ви хочете зробити фоновим, так само як параметру src тега (Див. Урок 5. Зображення):



В такий спосіб можна, наприклад, замостити фон сторіночки яким-небудь узором. Але не варто зловживати цією можливістю і робити фоном великі зображення, аби дуже не обважнювати сторінку.

Наприклад, ну нас є ось такий фрагмент узору:

Якщо ми зробимо його фоновим зображенням, вийде сторіночка з таким фоном:



Параметр background також не є обов'язковим. Якщо його опустити, то фон сторінки за умовчанням буде білим.

Колір заслань


Для завдання кольору заслань існують 3 параметри тега body:

  • link - колір заслання в первинному стані;

  • alink - колір активного заслання (active link), тобто у момент натиснення;

  • vlink - колір відвіданого заслання (visited link).

Цим параметрам привласнюється назва кольору або його шістнадцятиричне значення аналогічно іншим параметрам, що відповідають за колір чого-небудь.

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



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

Заслання

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

Відступи довкола контента


Якщо Ви хочете, аби вміст сторінки відступав від країв вікна браузеру на деяку величину, на цей випадок в тега body є 4 параметри:

  • leftmargin - відступ від лівого краю;

  • rightmargin - відступ від правого краю;

  • topmargin - відступ від верхнього краю;

  • bottommargin - відступ від нижнього краю.

Ці параметри набувають значення в пікселах. Вони не обов'язкові, і можна использавать як все відразу так і поотдельности. Наприклад, можна зробити відступи лише зліва і справа, або лише зверху і знизу і т.д.:

або

Вправа


Cоздайте на свій смак html-документ, властивості якого задайте за допомогою параметрів тега body.

Викладете документ, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

7. Заслання


  • Як зробити текст засланням

  • Як зробити зображення засланням

  • Колір заслань

  • Заслання усередині сторінки

  • Заслання на нове вікно

  • Заслання у фреймах

  • Заслання на адресу електронної пошти

  • Вправа

Як зробити текст засланням


Для створення заслання використовується парний тег . Аби зробити текст засланням, потрібно помістити його між тегами і і вказати, куди веде це заслання, тобто адреса документа, де ми виявимося після натиснення на заслання. Для цього потрібно параметру href тега а привласнити адресу документа. Адреса документа, на який ми посилаємося, називається адреса заслання.

Ось, наприклад:

<а href="http://www.mysite.com/about/1.html">Текст ссылки

Така строчка означає, що при натисненні на фразу Текст заслання ми перейдемо на сторіночку 1.html, яка лежить в каталозі about сайту http://www.mysite.com.

http://www.mysite.com/
   about/
      1.html

Адреса заслання може бути абсолютною або відносною. У наведеному вище прикладі ми використовували абсолютну адресу, тобто повна дорога до документа 1.html. Відносна адреса - дорога до документа, складена відносно поточного документа. Наведемо приклади використання відносних адрес.

Приклад 1:

<а href="1.html">Пример 1

Така строчка означає, що при натисненні на фразу Приклад 1 ми перейдемо на сторіночку 1.html, яка лежить в тому ж каталозі, що і поточний документ.

поточний каталог/
   поточний документ
   1.html

Приклад 2:

<а href="about/1.html">Пример 2 або <а href="/about/1.html">Пример 2

Обоє ці строчки означають, що в каталозі, де
лежить поточний документ, є підкаталог about, в якому лежить сторіночка 1.html, на яку ми перейдемо при натисненні на фразу Приклад 2.

поточний каталог/
   about/
      1.html
   поточний документ

Приклад 3:

<а href="../1.html">Пример 3

Ця строчка означає, що з каталога, де лежить поточний документ, потрібно піднятися на один рівень вище, і в каталозі, де ми виявилися, лежить сторіночка 1.html, на яку ми перейдемо при натисненні на фразу Приклад 3.

каталог на 1 рівень вище текущего/
   поточний каталог/
      поточний документ
   1.html

Приклад 4:

<а href="../about/1.html">Пример 4

Ця строчка означає, що з каталога, де лежить поточний документ, потрібно піднятися на один рівень вище, і в каталозі, де ми виявилися, є підкаталог about, в якому лежить сторіночка 1.html, на яку ми перейдемо при натисненні на фразу Приклад 4.

каталог на 1 рівень вище текущего/
   поточний каталог/
      поточний документ
   about/
      1.html

Приклад 5:

<а href="about/">Пример 5

A якщо в адресі заслання після теки не вказати ім'я документа, то таке заслання називатиметься неповною. Вона дає команду браузеру при натисненні на фразу Приклад 5 відкрити файл index.html, лежачий в каталозі about.

поточний каталог/
   about/
      index.html
   поточний документ

Якщо файл index.html відсутній, браузер відображуватиме список файлів теки about, якщо в налаштуваннях Вашого сервера є дозвіл. Інакше браузер поступить так само, як якби Ви зробили заслання на будь-який інший неіснуючий документ, тобто покаже повідомлення "Неможливо відображувати сторінку".

Комбінуючи ці приклади, Ви зможете створювати сайти із структурою різної міри розгалуженості.

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

Як зробити зображення засланням


Замість тексту між тегами і Ви можете вставити зображення, і зображення буде засланням.

<а href="1.html">

Ви вже знаєте з уроку 5. Зображення, що в зображення, що є засланням, автоматично з'являється рамка тощиной 1 піксел такого ж кольору, як текстові заслання, і знаєте, як її прибрати у разі потреби.

Колір заслань


Колір заслань можна задати за допомогою параметрів link, alink, vlink тега body. Про це Ви знаєте з уроку 6. Властивості сторінки - параметри тега body. В такий спосіб задається колір всіх заслань на сторінці.

Якщо ж Ви хочете змінити колір якогось конкретного заслання, Ви можете зробити також, як і для звичайного тексту, тобто скористатися тегом з параметром color. Лише контейнер повинен знаходитися усередині контейнера
.

<а href="1.html">Текст ссылки

Заслання усередині сторінки


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

Хорошим прикладом є будова цих уроків. При натисненні на назву розділу уроку на початку сторінки браузер миттєво переносить Вас у відповідне місце в тексті, і Вам не доводиться його шукати.

Отже, аби створити внутрішнє заслання, треба виконати 2 дії:

  1. Зробити закладку в тому місці документа, куди Ви посилатиметеся, і дати цій закладці ім'я. Для цього в потрібному Вам місці вставте контейнер
    і його парметру name привласніть строкове значення:

<а name="z1">

Між тегами
і текстом можна не писати, оскільки Вам потрібно всього лише помітити місце в документі, куди веде заслання.

  1. Ну і власне зробити заслання, яке посилатиметься на цю закладку. Для цього Ви робите звичайне заслання, лише замість адреси документа пишете знак # і ім'я закладки:

<а href="#z1">Ссылка на закладку

Ось приклад використання внутрішніх заслань:


  1. Раздел 1

  2. Раздел 2



<а name="chapter1">

Раздел 1



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


<а name="chapter2">

Раздел 2



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


А ще можна робити заслання на закладку в іншому документі. Наприклад, в документі 1.html є закладка з ім'ям qqq. Аби зробити на неї заслання з поточного документа, треба зробити звичайне заслання на документ 1.html і додати до адреси знак # і ім'я закладки qqq:

<а href="1.html#qqq">Ссылка на закладку

Заслання на нове вікно


Всі заслання, задані вище описаними способами, за умовчанням відкриваються в поточному вікні браузеру. Для зміни цієї властивості заслання в тега існує параметр target.

Якщо Ви хочете, аби документ, на який Ви посилаєтеся відкривався в новому вікні браузеру, привласніть параметру target значення _blank:

<а href="1.html" target="_blank">Ссылка

От як виглядатиме і працюватиме таке заслання: Заслання відкриється в новому вікні

Якщо Ви хочете конретно вказати, що заслання повинне відкритися в поточному вікні, привласніть параметру target значення _self:

<а href="1.html" target="_self">Ссылка

Заслання у фреймах


А тепер передбачимо, що Ви використовуєте на своїй сторіночці фрейми. Тоді за умовчанням всі заслання відкриватимуться в поточному фреймі.

Привласнивши параметру target значення _parent, Ви вкажете браузеру відкривати заслання у фреймі-батьку:

<а href="1.html" target="_parent">Ссылка

Привласнивши параметру target значення _top, Ви вкажете браузеру відмінити всі фрейми і відкрити заслання в повному вікні браузеру:

<а href="1.html" target="_top">Ссылка

А якщо Ви хочете, аби заслання відкривалося в якомусь конкретному фреймі, привласніть параметру target ім'я потрібного фрейма:

<а href="1.html" target="myframe2">Ссылка

Заслання на адресу електронної пошти


Заслання на адресу електронної пошти робиться як і звичайне заслання, лише замість адреси документа пишеться mailto:адрес електронної пошти:

<а href="mailto:anna@mail.ru">Пишите письма

От як виглядатиме працювати таке заслання: Пишіть листи

При натисненні на таке заслання запуститься поштова програма,
встановлена за умовчанням, і відкриється вікно створення нового листа. У полі Кому вже стоятиме адреса, на яку веде заслання.

Якщо ж Ви до адреси элетронной пошти приєднаєте ?subject=какая-то тема повідомлення, то при натисненні на це заслання у вікні нового повідомлення в полі Тема стоятиме значення параметра subject:

<а href="mailto:anna@mail.ru?subject=вопрос з сайта">Пишите письма

Звернете увагу, що значення параметра subject не полягає в лапки. У лапки полягає цілком адреса заслання.

Вправа


Cоздайте 2 html-документа. Вставте в перший документ який-небудь текст, розбийте його на розділи. Створіть на початку сторінки вміст із засланнями на відповідні розділи. В кінці документа вставте заслання на другий документ, яке буде открыватся в поточному вікні, і заслання на сайт Пілотів, яка відкриватиметься в новому вікні. У другому документі зробіть заслання на свою електронну адресу з темою Вправа до уроку 7.

Викладете документи, що вийшли, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

8. Форми.


  • Створення форм

  • Текстове поля

  • Кнопки

  • Прапорці (checkbox)

  • Перемикачі (radiobutton)

  • Поле із списком

  • Кнопка із зображенням

  • Приклад комбінованої форми

  • Вправа

Створення форм


У мові HTML форми застосовуються для відправки даних із сторіночки на обробку в яку-небудь програму, встановлену на сервері. Всім відомий приклад форми можна бачити тут http://www.colorpilot.ru/support.html.
Пользователь заповнює форму і натискує кнопку Send (відправити), дані обрабатываеются спеціальною програмою (скриптом) на сервері, і ми отримуємо на адресу техподдержки питання користувачів :-)
Створення форм починається з елементу





В елементу форми form існують два обов'язкові атрибути metod і action.

? metod - атрибут визначає спосіб, за допомогою якого здійснюватиметься зв'язок між формою і Web сервером. Атрибут може набувати значення "get" і "post".

? action - значенням атрибуту action є конкретна адреса скрипта, оброблювального дані. Атрибути записуються в тег
, наприклад так:



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

Текстове поле


Для створення поля введення використовують елемент input з атрибутом type.
Type може набувати різних значень. Для найпростішого поля введення тексту атрибут type матиме значення text.



Нпрімер, html код


Зaполните Ваші дані:
Имя:
Фамилия:



на сторіночці відображуватиметься так:

Заповните Ваші данные:

Ім'я: Прізвище:

Конец формы



Можливо задавати значення параметрів

Параметр


Опис


size=...


Ширіна поля.


maxlength=...


Максимальна кількість символів дозволених в тексті. Якщо цей параметр опустити, то можна вводити рядок длинее самого поля.


name=...


Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле.


value=...


Початковий текст містить в полі.


align=...


Вирівнювання поля. Можливі значення: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат їх використання такий самий, як і в зображень.



Поле для пароля


Поле для пароля — звичайне текстове поле, але відрізняється тим, що всі символи показуються зірочками, аби ніхто не підглянув пароль, що вводився.
Задається кодом



Наприклад:


Логин:
Пароль:


На сторіночці виглядатиме так:

Логін:
Пароль:

Конец формы

Спробуйте ввести в поля "Логін" і "Пароль" дані. Вийшло ? :-)

Багаторядковий текст


Для можливості введення в полі декілька рядків тексту використовуємо тег textarea. Наприклад:


Введите ваш відгук:



Цей код на сторіночці можна побачити у вигляді поля, в яке можна ввести великий текст.

Введіть ваш отзыв:


Конец формы


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

Параметр


Опис


name=...


Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле.


cols=...


Кількість стовпців тексту.


rows=...


Число рядків тексту.


value=...


Значення поля визначає, що буде відправлене на сервер.


wrap=...


Параметри перенесення рядків. Можливі значення: off — відключає перенесення рядків; virtuals — показує перенесення рядків, але відправляє текст як він введений; physical — перенесення рядків вставляються де вказано і у такому вигляді текст вирушає.



Кнопки


Кнопка — це елемент інтерфейсу, на який потрібно натискувати.
Используем type=button, "button" переводиться як "кнопка".



Код html






На сторіночці відображуватиметься таким чином:

Начало формы

Конец формы

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

Параметр


Опис


name=...


Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле.


value=...


Напис на кнопці, а також її значення.


align=...


Вирівнювання поля. Можливі значення: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат їх використання такий самий, як і в зображень.



Кнопка SUBMIT


При натисненні на кнопку SUBMIT дані форми вирушають на сервер і обробляються програмою, вказаною параметром action тега form.
Используем type=submit
Наприклад,






На сторіночці ми побачимо наступне:

Начало формы

Конец формы


Кнопка RESET


При натисненні на цю кнопку, дані форми повертаються в первинне значення. Використовуваний type=reset
Приклад коди





Відображення на сторіночці

Начало формы



Конец формы


Спробуйте вписати дані і скинути їх!

Прапорці (checkbox)


Прапорці використовують, коли необхідно вибрати два або більш за варіант із запропонованих. Використовуваний type=checkbox

С якими операційними системамы ви знайомі?
Windows 95/98
Windows 2000
Linux


Ось що виходить:

З якими операційними системамы ви знайомі?
Windows 95/98
Windows 2000
Linux

Конец формы


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

Перемикачі (radiobutton)


Перемикачі використовують, коли необхідно вибрати один єдиний варіант із запропонованих. Використовуваний type=radio

Какое пора року Ви більше любите? :-)
Весну
Лето
Осень
Зиму



На сторіночці можна буде побачити наступне:

Яка пора року Ви більше любите? :-)
Весну
Лето
Осень
Зиму

Конец формы


Тобто, використовуючи радіокнопки Ви можете вибрати лише одне значення. Спробуйте :-)

Поле із списком


У спадаючому списку можна вибирати одне або декілька значень. Зробимо вибір пори року за допомогою спадаючого списку.
Поля вибору починаються тегом Кожне вибиране поле поміщене в теги
Приклад:


Какое пора року Ви більше любите? :-)






На сторіночці видем наступне:

Яка пора року Ви більше любите? :-)

Конец формы


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

Параметр select


Опис


name=...


Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле.


size=...


Кількість видимих рядків. За умовчанням один рядок.


multiple


Цей параметр дозволяє вибрати відразу декілька рядків. Вибір робиться за допомогою клавіші Control або Shift.


Параметр option


Опис


selected


Видиме поле за умовчанням.


value=...


Значення визначає, що буде відправлене на сервер при вибраному пункті списку.



Кнопка із зображенням


Кнопки із зображеннями аналогічні по дії кнопці Submit, але є малюнком.
Используем type=image







Введите ваше ім'я:




На сторіночці це виглядатиме так:

Начало формы

Введите ваше имя:





Конец формы


Картанка задається за допомогою тега scr і адрес картинки.

src=../school/examples3/ser.gif

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


Приклад комбінованої форми


Приклад використання різних форм на одній страничке
Заполните, будь ласка, цю форму Вашими даними і натискуйте кнопку "Відправити дані"! Ви зможете побачити варіант обробки Ваших даних.

Заповните Ваші данные:

Ім'я:


Виберіть улюблений колір:

Желтий
Голубой
Розовий
Зелений


Напишіть тут що-небудь хороше :-)


Конец формы


Ця форма має наступний код:



Зaполните Ваші дані:


Имя:





Выберите улюблений колір:


Желтый

Голубой

Розовый

Зеленый







Напишите тут що-небудь хороше :-)












Вправа


Cоздайте на свій смак html-документ, на якому розташуєте всі розглянуті види форм. Це може бути сторіночка опиту, відправки яких-небудь даних або щось ще... Програмувати нічого не треба! :-)

Викладете файл, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

1. Символьні об'єкти.


  • Що таке символьні об'єкти?

  • Приклади використання

  • Вправа


Що таке символьні об'єкти?


Будь ласка, наберіть ось таку строчку:

? ? ? ? ? ? ? ? ? ? ? ? ?
Або мелодію

d d d d d....
Вийшло? :-)
Если ні, то познайомимося з так званими символьними об'єктами.
При складанні HTML сторіночки зручно використовувати коментарі:

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

Оскільки символи "<" і ">" сприймаються браузерами як почало і кінець HTML-меток, виникає питання: а як показати ці символи на екрані? У HTML це робиться за допомогою символьних об'єктів (&-последовательностей).

Ось тільки деякі з них:  

Символьний
объект


Відображення
в браузері


<


<

>


>

&


&


"


"

®


®








&сміттю;


©


 


пропуск


Пам'ятаєте: крапка з комою - обов'язковий елемент &-последовательности. Крім того, всі букви, складові послідовність, мають бути в нижньому регістрі (тобто, маленькі). Використання міток типа " або & не допускається.

Символьними об'єктами можна відображувати в браузері букви, математичні знаки, знаки грошових одиниць і багато що інше. Необхідні символьні об'єкти ви завжди можете знайти в довідниках. Наприклад, здесь
http://www.konus.biz/books/DHTML...
http://ascii.org.ua/table.php
http://borisych.fopf.mipt.ru/gr025/book/10/html1019.htm

Приклади використання


  1. Знаки "<" і ">" застосовуються для відображення в браузері html коди.
    Наприклад, аби в браузері вийшла така строчка

Уроки HTML



У html сторіночці нам необхідно написати сдедующее:

< h3 > Уроки HTML < /h3 >

 

  1. Товарний знак ™ використовується на странике продуктів http://www.colorpilot.ru/products.html



  2. Рядок на сторінці в браузері:

Form Pilot Home™ - заповнення паперових бланків

Цей же рядок в html коді виглядатиме так:

<а href="fphcomics.html">Form Pilot Home™ - заповнення паперових бланків

 

  1. Знак копирайта © використовується при підписі фотографій, коли необхідне заслання на автора.


  2. Приклад можна поглянути на цій сторіночці http://www.colorpilot.ru/makeup.html



  3. Напис під фотографією

Photo © Alexander Saltykov

має такий html код:

Photo © Alexander Saltykov

Вправа


Запишіть декілька строчок html коди так, щоб вони в браузері відображувалися також, як ви їх видете на сторінці html коди.

Викладете сторіночку, що вийшла, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

Що таке CSS?


  • Що таке CSS?

  • Переваги CSS перед HTML

Що таке CSS?


CSS (Cascade Style Sheet) - каскадні таблиці стилів. Це свого роду розширення HTML, що дає web-разработчику додаткові можливості.

Стиль (style) - це набір елементів форматування тексту. Наприклад, колір тексту, шрифт, розмір, вирівнювання і так далі Всі ці параметри можна зберігати в стилях.

Але ж і HTML дозволяє оформляти текст за допомогою тегов форматування.

У чому ж перевага CSS перед HTML?

Переваги CSS перед HTML


  1. CSS однією дією дозволяє змінювати відразу всю групу параметрів.

Наприклад, в наших уроках всі заголовки, задані тегами

  1   2

скачати

© Усі права захищені
написати до нас