1
2
Ім'я файлу: Уроки HTML.doc
Розширення:
doc
Розмір:
732кб.
Дата:
26.11.2020
скачати
Уроки HTML
1. Теги, структура HTML документа
Теги
Структура HTML сторінок
Head
Вправа
Теги
Команди для браузеру, що говорять, як відображувати текст, вставляти таблиці, зображення і інші об'єкти, називаються тегами (від англ. tag - ярлик, ознака).
Самі теги (команди) не відображуються на екрані.
Ім'я
тегу пишеться в трикутних дужках
, наприклад,
- тег, що говорить браузеру записувати весь подальший текст жирним шрифтом.
Им’я тегу можна записувати на будь-якому регістрі (прописними або рядковими буквами), тобто
буде сприйняте браузером так само, як і
.
Теги бувають парні і непарні.
Наприклад, тег
говорить браузеру записувати жирним шрифтом весь подальший текст до команди
. В такому разі тег, що дає команду, називають таким, що відкриває, а тег, що відміняє команду, що закриває.
Теги можуть мати параметри (або атрибути).
Наприклад, аби задати колір шрифту, використовується тег font з параметром color:
- це відкриваючий тег, який командує браузеру з цієї миті відображувати шрифт зеленим (у даному прикладі) кольором до того, що закриває тегу .
Деякі параметри вимагають обов'язкової вказівки їх значень. Для деяких параметрів браузер використовує значення за умовчанням, якщо інші значення не задані.
Якщо тег має декілька параметрів, то вони прописуються через пропуск в будь-якій послідовності. Наприклад:
- два аналогічні записи що відкриває тега font з параметрами color і size.
Структура HTML сторінок
Будь-яка html-сторінка повинна містити наступні обов'язкові теги:
html - повідомляє браузер, що сторінка написана на мові HTML і рядки до закриваючого тегу є єдиним документом;
head - між тим, що відкриває і закриваючим тегами поміщається важлива інформація, що описує цей документ;
body - між тим, що відкриває і закриваючим тегами поміщається вміст сторінки.
Таким чином HTML-документ має наступну структуру:
Содержание (відображується на сторіночці з врахуванням заданої розмітки)
(Див. Урок 6. Властивості сторінки - параметри тега body), за умовчанням це чорний колір.
Але якщо зображення є засланням, то у нього товщина рамки за умовчанням = 1, а його колір збігається з кольором заслань:
І якщо Ви не хочете бачити рамку, примусово привласніть параметру border нульове значення:
Альтернативний текст
Альтернативний текст відображується браузером на місці картинки, поки та не завантажиться. Або замість картинки, якщо вона з якої-небудь причини не відображувалася.
Коли і якщо картинка завантажилася, альтернативний текст показуватиметься при наведенні курсора миші на цю саму картинку.
Аби додати альтернативний текст, використовується параметр alt тега
, якому привласнюється строкове значення, обов'язково поміщене в лапки.
Можна створити багаторядковий альтернативний текст.
Наведіть курсор на картинку
Для цього досить вставити перенесення рядка в html-документе.
Вирівнювання зображення
Для зображення, як і для параграфа, існує поняття вирівнювання відносно тексту і інших зображень на сторінці. Задати типа вирівнювання можна також за допомогою параметра align тега
.
Нижче приведена таблиця можливих значень параметра align:
Значення
Опис
Результат
Верхній кордон зображення вирівнюється по найвищому текстовому елементу поточного рядка.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Верхній кордон зображення вирівнюється по найвищому елементу поточного рядка.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнювання середини зображення по базовій лінії поточного рядка.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнювання середини зображення по середині поточного рядка.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнювання зображення по базовій лінії поточного рядка.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнювання нижнього кордону зображення по довколишньому тексту.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнює зображення по лівому краю вікна.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Вирівнює зображення по правому краю вікна.
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
Параметри 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 дії:
Зробити закладку в тому місці документа, куди Ви посилатиметеся, і дати цій закладці ім'я. Для цього в потрібному Вам місці вставте контейнер
і його парметру name привласніть строкове значення:
<а name="z1">
Між тегами
і
текстом можна не писати
, оскільки Вам потрібно всього лише помітити місце в документі, куди веде заслання.
Ну і власне зробити заслання, яке посилатиметься на цю закладку. Для цього Ви робите звичайне заслання, лише замість адреси документа пишете знак # і ім'я закладки:
<а href="#z1">Ссылка на закладку
Ось приклад використання внутрішніх заслань:
Раздел 1
Раздел 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
Приклади використання
Знаки "<" і ">" застосовуються для відображення в браузері html коди.
Наприклад, аби в браузері вийшла така строчка
Уроки HTML
У html сторіночці нам необхідно написати сдедующее:
< h3 > Уроки HTML < /h3 >
Товарний знак ™ використовується на странике продуктів http://www.colorpilot.ru/products.html
Рядок на сторінці в браузері:
Form Pilot Home™ - заповнення паперових бланків
Цей же рядок в html коді виглядатиме так:
<а href="fphcomics.html">Form Pilot Home - заповнення паперових бланків
Знак копирайта © використовується при підписі фотографій, коли необхідне заслання на автора.
Приклад можна поглянути на цій сторіночці http://www.colorpilot.ru/makeup.html
Напис під фотографією
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
CSS однією дією дозволяє змінювати відразу всю групу параметрів.
Наприклад, в наших уроках всі заголовки, задані тегами
1
2
скачати
© Усі права захищені
написати до нас
Меню:
Реферати
Курсові роботи
Дипломні роботи
Доповіді
Твори
Книги
Дисертації
Шпаргалки
Навчальні посібники
Статті
Контрольні роботи
Самостійні роботи
Практичні роботи
Творчі роботи
Наукові роботи
Лабораторні роботи
Тести
Лекції
Презентації
Методички
Виклади
Розробки уроку
Завдання
Монографії
Звіти про практику
Біографії
Бізнес-плани
Конспекти
Магістерські роботи
Топіки
Тези
Кодекси
Закони
ще
Астрономія
Банк
Біологія
Бухгалтерія
Військова справа
Географія
Геологія, гідрологія та геодезія
Держава і право
Журналістика, видавнича справа та ЗМІ
Іноземні мови і мовознавство
Історія та історичні особистості
Комунікації, зв'язок, цифрові прилади і радіоелектроніка
Краєзнавство та етнографія
Кулінарія та продукти харчування
Культура і мистецтво
Література
Маркетинг, реклама и торгівля
Математика
Медицина
Міжнародні відносини та світова економіка
Менеджмент і трудові відносини
Музика
Педагогіка
Політологія
Програмування, комп'ютери, інформатика і кібернетика
Виробництво і технології
Психологія
Різне
Релігія і міфологія
Сільське, лісове господарство та землекористування
Соціологія і суспільствознавство
Спорт і туризм
Будівництво та архітектура
Митна система
Транспорт
Фізика та енергетика
Філософія
Фінанси, гроші і податки
Хімія
Екологія та охорона природи
Екологія та економічна теорія
Економіко-математичне моделювання
Етика і естетика
Безпека життєдіяльності та охорона праці
Логіка
Економіка
Англійською мовою
Географія
Історія
Культура
Господарство
Історія України
Історія Росії
Історія Білорусі
Інформатика
ЄДІ
ЗНО
ще