Для вставки картинки використовується тег IMG.

Нумерований список

Тег < ol> кожен пункт позначається тегом < li>

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

< HTML>

< HEAD>

< TITLE> …< /TITLE>

< /HEAD>

< BODY >

< оl >

< li> …< /li>

< li> …< /li>

< li> …< /li>

< /оl>

< /body>

< /html>

Маркований список

Тег < ul> кожен пункт позначається тегом < li>.Можна змінити за допомогою < type> (disk, circle, square)

< HTML>

< HEAD>

< TITLE> … < /TITLE>

< /HEAD>

< BODY B >

< ul >

< li> …< /li>

< li> …< /li>

< li> …< /li>

< /ul>

< /body>

< /html>

3. Вставка малюнка у документ, його атрибути, та позицiювання на сторiнцi, приклади.

Для вставки картинки використовується тег IMG.

Його синтаксис:

< IMG SRC=" ім'я файлу" ALT=" текст" ALIGN=розташування WIDTH=ширина HEIGHT =висота>,

де: атрибут src вказує шлях до файлу, який добавляється на Web-сторінку; Атрибут src є обов’язковим Атрибут align може мати наступні значення:

top - наступний текст розташовується у верхній частині зображення;

bottom - наступний текст розташовується в нижній частині зображення;

left - зображення перебуває в лівій частині аркуша, текст обтікає зображення праворуч;

middle - зображення перебуває в центрі аркуша,

right - зображення перебуває в правій частині аркуша, текст обтікає зображення ліворуч.

Відділення зображення від тексту (атрибути hspace та vspase)

Параметр hspace – задає ширину (в пікселах) пустого поля справа та зліва від зображення.

Параметр vspase – визначає розміри (в пікселах) пустого поля зверху та знизу від зображення.

Рамки навколо зображення (атрибут border)

Параметр border – значення цього параметру визначає ширину рамки навколо зображення в пікселах.

4. Зв'язок документiв через текст та малюнок (зв'язок частин одного i того ж документу), приклад.

Для створення гіперпосилання на іншу сторінку використовується наступний тег:

< A href=" URL" > Назва посилання < /A>,

де

літера А у тегу < A href> означає вказівник (anchor), а href – «гіпертекстове посилання»,

Відносні посилання – використовують відносне ім'я файлу (відносний шлях), вони не залежать від місця розташування папки яка містить сайт.

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

< A HREF=" ім'я файлу" > Текст - звернення до іншого документу < /A>.

Наведемо приклади гіпертекстових посилань:

1) гіпертекстове посилання в тій же директорії:

< a href=Doc2.htm> Лабораторна робота№2 < /a>

2) посилання в іншій директорії:

< a href=C: /WINDOWS/clock.avi> годинники < /a>

Гіперпосилання можуть також використовуватися для з'єднання з певними розділами документів. Припустимо, ми хочемо з'єднати документ А с першим розділом документу В, для чого нам необхідно створити іменоване гіперпосилання в документі B. Наприклад, таке:

< A name = " Розділ 1" > Глава 1 < /a>.

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

Тепер, описуючи посилання в документі A, треба включити не тільки ім'я файлу " document.html", але також і ім'я гіперпосилання, відокремлюване символом (#). Наприклад,

< A HREF = " document.html#глава1" > Глава 1 < /A>.

Тепер «клацнувши» на слові «Глава 1» у документі А, ви передете безпосередньо в Главу 1 у документі B.

Для використання зображення як посилання зображення необхідно включити усередину тегу-контейнера < A>

Наприклад:

< A hrif = E: \Documents and Settings \vika \Мої документи \HTML \Мерфи.doc > < IMG src= book.gif> < /A>

5.Таблицi. Форматування таблицi, заголовка, об'єднання-роз'єднання комірок, розташування тексту, малюнків, приклади.

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

< TABLE>

<! -тут розміщається опис таблиці ->

< /TABLE>

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

TR - елемент, що формує окремий рядок;

TD - елемент, що визначає вміст осередку даних;

ТН - елемент, що задає осередок заголовка;

CAPTION - елемент назви таблиці.

Таблиця 7.1. Основні значення тегу Table.

Тегі заголовків. Зміна розміру шрифту.

Вставка тексту один до одного

< Hn> …< /Hn> – тег керує розміром символів в заголовках (1≤ n≤ 6), які відображаються жирнішим шрифтом.

< BIG>...< /BIG> – збільшує розмір шрифту на 10% в порівнянні з базовим.

< SMALL> …< /SMALL> – зменшує розмір шрифту на 10% в порівнянні з базовим.

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (< h1>), а самым нижним — уровень 6 (< h6>)

Для об'єднання комірок в html таблицях служать два службові слова: colspan і rowspan.

Colspan - об'єднання по горизонталі.

Rowspan - об'єднання по вертикалі.

Форматування тексту в комірці може виконуватися будь-яким способом тегами < FONT>, < P>.

6.Стиль текту, його атрибути, створення, використання, приклад накладки тексту на інший текст, або на малюнок, приклад.

, Для цього існує тег < font> < /font>. 3адание розміру шрифту

Для визначення розміру шрифту на Web-сторінці використовується параметр SIZE тега-контейнера < FONT>... < /FONT>. Текст, зазначений між тегами < FONT> < /FONT> буде мати необхідний розмір.

За допомогою тегів-контейнерів < BIG>... < /BIG> < SMALL>... < /SMALL> можна встановити текст відповідно великого і малого розміру, не вказуючи конкретно розмір шрифту. Цю величину задає сам браузер.

Оскільки невідомо, який тип шрифтів використовує браузер на стороні користувача, можна за допомогою параметра FACE тега < FONT> явно вказати тип шрифту по імені.
В одному параметрі FACE можна вказати кілька типів шрифтів, які перераховуються через кому:
< FONT FACE=" Arial Cyr, Arial, Helv DL" > Шрифт гельветика

?

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

??????????????????????????????????????????????????

8.Створення полiв форми у: " textbox", " textarea", призначення, приклади,.

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира.

Формы размещаются между тэгами < FORM> < /FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тэг < FORM> может содержать следующие атрибуты

ACTION Обязательный атрибут. Определяет, где находится обработчик формы.

METHOD Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Для внесения информации пользователем в форму используется элемент < INPUT> Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице ниже представлены основные типы, применяемых элементов < INPUT>:

8Створення полiв форми у: " textbox", " textarea", призначення, приклади,.

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира.

Формы размещаются между тэгами < FORM> < /FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой.

Для внесения информации пользователем в форму используется элемент < INPUT> Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля).

Для створення однорядкового текстового поля потрібно використовувати значення атрибуту type=" text". Ширину поля можна задати як атрибутом size, так і за допомогою каскадних таблиць стилів, використовуючи властивість width (також можна застосовувати і інші властивості CSS, наприклад, height). Атрибут name задає ім'я поля, по якому скрипт на сервері визначить дані введені в це поле. Атрибут value задає початкове значення, яке буде записано в це текстове поле. Обмежити кількість символів що вводяться користувачем в це поле можна атрибутом maxlength. Наведу приклад

Код

Ваше ім'я: < input type=" text" size=" 20" maxlength=" 20" name=" name_user" >

Формы могут содержать поля для ввода большого текста < TEXTAREA>:

< TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь своё сообщение< /TEXTAREA> Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тэгами < TEXTAREA> < /TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать

или просто стереть.

9/. Створення полiв форми у: " password", " checkbox", призначення, приклади.

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):
< INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10>

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

< INPUT TYPE=checkbox NAME=Comp VALUE=" CPU" > Процессоры
< INPUT TYPE=checkbox NAME=Comp VALUE=" Video" CHECKED> Видеоадаптеры
< INPUT TYPE=checkbox NAME=Comp VALUE=" Scan" > Сканеры
< INPUT TYPE=checkbox NAME=Comp VALUE=" Modem" CHECKED> Модемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные. Одновременно можно выбрать любое количество значений.

10.Створення елементiв форми у: перемикача " radio", призначення, приклади.

Определяет радиокнопку. (переключатель) Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:
< INPUT TYPE=radio NAME=Question VALUE=" Yes" CHECKED> Да
< INPUT TYPE=radio NAME=Question VALUE=" No" > Нет
< INPUT TYPE=radio NAME=Question VALUE=" Possible" > Возможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible. Одновременно можно выбрать только одно значение.

11.Створення кнопок форми у: " reset", " submit", " button" призначення, приклади.

Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:
< INPUT TYPE=submit VALUE=" Отправить" >

Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:
< INPUT TYPE=reset VALUE=" Сброс " >

кнопка – це елемент взаємодії з користувачем.

< BUTTON> ЦЕ KHОПKА< /BUTTON>

Між тегами < BUTTON>...< /BUTTON> можна помістити не лише текст, але й зображення. Якщо помістити туди тег < IMG>, то отримаємо кнопку з графічним зображенням.

В тег < BUTTON> є атрибут onClick – цей атрибут дозволяє описати дії, о необхідно відпрацювати браузеру при клацанні миші по об'єкту< BUTTON onClick=" location.href='https://www.mail.ru'" >

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

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" >

< title> Кнопка< /title>

< /head>

< body>

< form action=" #" >

< p> < button> Кнопка з текстом< /button>

< button> < img src=" /images/umbrella.gif" width=" 25" height=" 32" alt=" Зонтик" >

Кнопка з рисунком< /button> < /p>

< /form>

< /body>

< /html>

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

< HTML>

< HEAD>

< script type=" text/JavaScript" >

var

scaleX, scaleY, x=0, y, b=false, q=false

function f()

{q=! q

f2()

}

function f2()

{

if (q==true)

{

if (x> 30)

{

b=true

}

if (x< 0.1)

{

b=false

}

scaleX=20/790

scaleY=20/470

if (b==true)

{

x=x-0.1

}

if (b==false)

{

x=x+0.1

}

y=x+0.1

st.style.posLeft=Math.round(x/scaleX)

st.style.posTop=Math.round(y/scaleY)

setTimeout(" f2()", 1)

}

}

< /script>

< /HEAD>

< BODY>

< div Id=" st" style=" position: 'absolute'; Top: 50; Left: 5; color=red" >

< p> < b> < u> < h1> JavaScript< /u> < /b> < /p>

< /div>

< form name=" form1" >

< center>

14. Зображення псевдотривимірного тексту на сторінці (створення тіні іншого кольору), приклади.

box-shadow - Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

< center>

< H1

style=" FILTER: shadow(color: 996633, direction=225, enabled: 1); FONT-FAMILY: verdana; COLOR: lightgreen;

FONT-SIZE: 30px; LINE-HEIGHT: 40px; WIDTH: 85%" > Объемный текст< /H1>

< /center>