Отримання знань
дистанційна підтримка освіти школярів
Шаблон Web-сторінки
<HTML>
<HEAD>
<TITLE> Заголовок </TITLE>
</HEAD>
<BODY>
Текст сторінки
</BODY>
</HTML>
Перелік найпоширеніших дескрипторів
¤ Встановлення кольору фону та тексту
<BODY bgcolor=#Код_кольору text=#Код_кольору>
| FF0000 – червоний FFFF00 – жовтий 0000FF – синій | 00A854 – зелений C0C0C0 – сірий FF8000 – оранжевий |
Приклади
1) <body bgcolor=#FFFF00 text=#00A854>
2) <body bgcolor="blue" text="yellow">
¤ Задання розміру заголовку
<Hn> </Hn>, де n – число от 1 до 6.
Приклад
<H1> Заголовок 1-ого рівня </H1>
¤ Встановлення назви, розміру та кольору шрифту
<font face="назва" size="розмір" color ="#код_кольору"> Текст </font>
Атрибут SIZE задає розмір шрифту (по замовчуванні - 3). FACE - стандартное ім’я шрифта. Потрібно використовувати шрифти, встановлені на комп’ютері. В іншому випадку буде використовуватись шрифт, вписаний по замовчуванню (зазвичай це Times New Roman). COLOR - задає колір тексту (по замовчуванню – чорний - #000000). Колір тексту можна задавати як назвою, наприклад, red, blue та ін., так і в шістнадцятковому вигляді - #FF0000 (червоний).
Приклад
<font face="Arial" size="12" color="red"> Текст червоного кольору, написаний шрифтом Arial </font>
¤ Встановлення абзацу і переходу на новий рядок
<P> - встановлення абзацу
<BR> - перехід на новий рядок без створення абзацу
Ці теги закривати не обов’язково.
¤ Встановлення типу вирівнювання
<P ALIGN=тип_вирівнювання> </P>Типи вирівнювань:
| LEFT - по лівому краю RIGHT – по правому краю | CENTER - по центру JUSTIFY – по ширині |
¤ Встановлення накреслення тексту
| <B> Жирний текст </B> <I> Курсив </I> <U> Підкреслений </U> <STRIKE> |
¤ Встановлення виділення тексту кольором
<SPAN style="BackGround-color: назва_кольору"> </SPAN>
Приклад
<SPAN STYLE="BACKGROUND-COLOR: yellow"> Жовтий </SPAN>
¤ Промальовування горизонтальної лінії
<HR size =товщина width=ширина_у_відсотках> <BR>
Приклад
<HR SIZE=4 WIDTH=50%><BR>
¤ Задання фонової картинки
<BODY BackGround= "назва_файлу.розширення">
Наприклад
<BODY BackGround= "See.bmp">
Зауваження. Вказується лише назва файлу, якщо малюнок знаходиться в тій же папці, що і html-документ. В іншому випадку вказується повний шлях.
Наприклад
<BODY BackGround= "D:\ Picture\ See.bmp">
¤ Додавання “рухомого рядка” (“бегущей строки”)
<marquee> Текст </marquee>
Наприклад
<marquee> Усім привіт! </marquee>
¤ Додавання суцільно зафарбованої лінії
<HR noshade SIZE="ширина" WIDTH="довжина у %" COLOR="колір">
Наприклад
<HR noshade SIZE=5 WIDTH=80% color="darkblue"> <BR>
¤ Додавання малюнка
<Img SRC="назва_мал.розширення">
Наприклад
<Img SRC="Roza.bmp">
¤ Створення зсилки-малюнка, при натисканні на яку буде здійснюватись перехід до іншої Web-сторінки
<A Href ="назва_файла.htm"> <Img SRC="назва_мал.розширення"> </A>
Наприклад
<A Href ="Avtor.htm"> <Img SRC="portret.bmp"> Відомості про автора </A>
¤ Створення словесної гіперзсилки на файл
<A href="назва_файлу.htm"> Текст зсилки </A>
Наприклад
<P Align=center> <A href="Osnova.htm" > Назад </A> </P>
¤ Створення пронумерованого списку
<OL TYPE="Вид_лічильника">
<LI> текст пункту 1
<LI> текст пункту 2
. . . . . . . . . . .
</OL>
Види лічильників:
А - великі латинські літери
а - маленькі латинські літери
І - великі римські літери
і - маленькі римські літери
1 - звичайні цифри
¤ Створення маркованого списку
<UL TYPE= "Тип_списка">
<LI> текст пункту 1
<LI> текст пункту 2
. . . . . . . . . . . .
</UL>
Типи списків:
• disc
° circle
square
Приклад
Коли вірус переходить в активну фазу, можливі такі ознаки: <br>
<UL TYPE= "disc">
<LI> зникнення файлів;
<LI> форматування жорсткого диска;
<LI> неспроможність завантаження файлів або операційної системи.
</UL>
¤ Створення внутрішньої зсилки
<A Href= #Назва_зсилки> Текст зсилки </А>
Перед текстом, до якого будемо переходити при натисканні дописати:
<P> <A NAME="Назва_зсилки"> Текст </A></P>
¤ Встановлення кольору для зсилки (link), пройденої зсилки (vlink), активної зсилки (alink)
<BODY link="колір" vlink="колір" alink="колір">
Наприклад
<BODY link="red" vlink="blue" alink="white">
Створення таблиць
<Table Border="товщина рамки в пікселях" Width="ширина таблиці" Bordercolor="колір рамки" Bgcolor="колір всередині таблиці">
<Caption> Заголовок таблиці </Caption>
<TR>
<TD> … </TD> <TD> … </TD>
</TR>
<TR>
<TD> … </TD> <TD> … </TD>
</TR>
</Table>
Приклад
<TABLE border=2 bgcolor=yellow align=center>
<TR>
<TH> Заголовок стовпця 1</TH> <TH> Заголовок стовпця 2 </TH>
</TR>
<TR>
<TD> Ряд 1, стовпчик 1</TD> <TD> Ряд 1, стовпчик 2 </TD>
</TR>
<TR>
<TD> Ряд 2, стовпчик 1</TD> <TD> Ряд 2, стовпчик 2 </TD>
</TR>
</TABLE>
| Заголовок стовпця 1 | Заголовок стовпця 2 |
| Ряд 1, стовпчик 1 | Ряд 1, стовпчик 2 |
| Ряд 2, стовпчик 1 | Ряд 2, стовпчик 2 |
Пояснення. Caption – задання заголовку таблиці
<TR > </TR > - початок та кінець рядка
<TD> </TD> - початок та кінець комірки в даному рядку
Робота з фреймами
Якщо матеріали web-сайту структуровані логічно за темами і мають базуватися на декількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Фрейм в загальному означає структуру, що містить деяку інформацію.
Фрейм (HTML) – область вікна браузера для представлення окремої Web-сторінки.
Браузер – це програмне забезпечення для перегляду Web-сайтів, тобто для запиту Web-сторінок з Павутини, для їх обробки та виведення, для реалізації переходу від однієї сторінки до іншої.
Приклад
<Frameset Rows = "90%, 10%">
<Frameset Cols = "30%, 70%">
<Frame SRC="Menu.htm" Name="MenuFrame">
<Frame SRC="OsnStr.htm" Name="OsnStrFrame">
</Frameset>
<Frame SRC="Dodatkovo.htm" Name="DodatkovoFrame">
</Frameset>
Матеріал взято з курсу "Інформатики 8 клас" Підлужняк Наталії Григорівни