ПРАКТИЧНА РОБОТА З МОВОЮ розмітки HTML ДЛЯ web-сторінок В
БЛОКНОТІ
Якщо матеріали 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>
Зауваження. ТРЕБА створити ще так
Перелік
найпоширеніших дескрипторів
¤
Встановлення кольору фону
та тексту
<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>
Пояснення. Caption – задання заголовку
таблиці
<TR > </TR > -
початок та кінець рядка
<TD> </TD> -
початок та кінець комірки в даному рядку
ПРИКЛАД КОДУВАННЯ НАЙПРОСТІШОЇ ВЕБ-СТОРІНКИ на
таблиці.
<HTML> <HEAD>
<TITLE> СТОРІНКА УЧНЯ 8
класу ВАСИЛЯ РОЗУМНОГО</TITLE>
</HEAD>
<BODY
bgcolor=#FFFF00 text=#007754 face=arial,helvetica,sans-serif onload=drag link=#33BBFF vlink=#6600aa alink=#bbbbff >
<P><SMALL><A href="index1.html"><B><U><I>
головна сторінка </I></U></B></A></SMALL> <P><P>
<table cellPadding=0 cellSpacing=0
width=100% border=1> <tr> <td
bgcolor=#0c5579>
<table cellPadding=5 cellSpacing=1
width=100% border=0> <caption allign="bottom">
<FONT
face="arial,helvetica,sans-serif" size="6"
color="#000000">Cалони
квітів</a></b></CENTER><BR>Крамниці
квітів</caption> <tr>
<td align=center bgcolor=#FFFFFF> <b><a
href=t1.html>тюльпани</a> • </b><b><a
href=t2.html> троянди</a> • </b><b><a
href=t5.html>кали</a> • </td></tr></table>
</td></tr></table> <br> <BR><IMG
src="C28.BMP"> <BR><IMG dynsrc="cino.avi" border=”3” hspace=”6” vspace=”3” width=190
height=100 aling=”center” alt=”якийсь фільм”> <b><ПАМЯТКА:
Коли квітка переходить в активну фазу, можливі такі ознаки: <br> <UL TYPE= "disc"> <LI> зникнення цвіту; <LI> формування насінини; <LI> неспроможність самозапилення. </UL> <center><BR><FONT
face="Times New Roman" size="4" color=3355CC><marquee bgcolor=#FF4455 height=40 behavior=”slide”
loop=5 direction=”right” scrollamount=4 > © 2010 Василь
РОЗУМНИЙ Group Production. </marquee></center>
<EMBED SCR=” muzon.wav” loop=2></BODY></HTML>
ПРИКЛАД КОДУВАННЯ НАЙПРОСТІШОЇ ВЕБ-СТОРІНКИ на
фреймах.
<HTML> <HEAD>
<TITLE> СТОРІНКА
1</TITLE> </HEAD> <Frameset Rows = "90%, 10%"> <Frameset Cols = "30%, 70%"> <Frame SRC="site1.html" NAME="left" <!- - АБО ЛІВИЙ АБО
ІНША НАЗВА ФРЕЙМУ - ->
SCROLLING="NO" <!- - АБО "YES" АБО "AUTO"- -> FRAMEBORDER="1" <!-
- АБО "0" МЕЖА ФРЕЙМІВ Є, ЯКЩО "1", і НЕМАЄ, ЯКЩО "0"- -> BORDER="30" <!- -
ТОВЩИНА МЕЖІ ФРЕЙМУ - ->
MARGINHIGHT="10" <!- - ВІДСТУПИ ВІД МЕЖІ ФРЕЙМУ -
->
MARGINWIDTH="10" <!- - ВІДСТУПИ ВІД МЕЖІ ФРЕЙМУ -
-> NORESIZE <!- - НЕ МОЖНА
ПЕРЕСУНУТИ МЕЖУ - -> BORDERCOLOR=C0C0C0> <Frame SRC="site2.html" Name="OsnStrFrame"> </Frameset> <Frame SRC="site2.html"
Name="DodatkovoFrame"></Frameset></HTML>
Немає коментарів:
Дописати коментар