Отримання знань

дистанційна підтримка освіти школярів


Шаблон 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> Перекреслений </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 клас" Підлужняк Наталії Григорівни


В системі: гості - (1); користувачі - (0)