Начало

Дизайн на документи в Web. Основи на езика HTML.

Вт., 02/25/2010 - 23:37 — rrr

Дизайн на документи в Web. Основи на езика HTML.


1. Език HTML (Hyper Text Markup Language) - език за описание на интернет документи

Езикът HTML се състои от тагове (маркери, етикети), които маркират началото и края на част от уеб страницата и се интерпретират по определен начин от браузъра при извеждането на страницата върху екрана.

Таговете се задават със символите <...> (начало на тага) и </...>  (край на тага).

Има някои тагове, които са абсолютно необходими за всеки уеб документ:
 

a) основни тагове в HTML:

<HTML>  и  </HTML>  - задават началото и края на документа;

<HEAD>  и </HEAD> - в тази област се задава информация за целия уеб документ;

<TITLE>  и  </TITLE> - задават заглавието на документа (изписва се в прозореца на браузъра);

<BODY>  и </BODY> - задават тялото (съдържанието) на уеб документа

<BR> - задава нов ред в текста;

Пример:

Създайте текстов файл с обикновен текстов редактор (KWrite) със следното съдържание и съхранете този файл в HTML директорията на вашия уеб сървър, като му дадете име index.html:

<HTML>
<HEAD>
<TITLE>Моята първа уеб страница</TITLE>
</HEAD>

<BODY>

Добре дошли в моята уеб страница! <BR>

Казвам се .....  ......  ...... и сега изучавам основите на Интернет в Линукс среда. <BR>

Благодаря Ви, че посетихте моя сайт! <BR>

Ще се видим отново! <BR>

</BODY> </HTML>

Тествайте получената уеб страница като отворите адреса: http://localhost


б) тагове за заглавия:

<H1..6>  и  </H1..6>  - тагове, които задават заглавен текс (хедър). Числото показва големината на текста - колкото по-голямо е то, толкова текстът е по-малък.

Пример: <H1> Здравейте </H1>


в) тагове за задаване на връзки (хиперлинкове) към други документи в интернет:

<A HREF="http://mylink.com/page1.html">Това е връзка!</A>  - задава абсолютна връзка към документ (връзка към документа page1.html, намиращ се на адрес mylink.com.

<A HREF="/page1.html">Това е връзка!</A>  - задава относителна връзка (връзка към документ, разположен на същия сървър и намиращ се в главната директория за документи на сървъра)

<A HREF="../page1.html">Това е връзка!</A>  - задава относителна връзка към документ, разположен в родителската директория спрямо тази, към която принадлежи текущо отворения документ.

<A HREF="mailto:myname@myserver.com"> Пратете ми поща! </A>  - задава връзка за изпращане на поща на осочения email адрес. За да работи се изисква да имате настроен пощенски клиент, напр: KMail, Evolution или Mozilla Mail, а за потребителите на Windows - Outlook.


г) форматиращи тагове:

<B> ...  </B> - удебелен текс (bold)

<I>  ...  </I> - наклонен текст (italic)

<U>... </U> - подчертан текст (underline)

<SMALL>  ... </SMALL> - малки букви

<BIG>  ... </BIG>  - големи букви

<SUPER>  ... </SUPER> - горна позиция

<SUB>  ... </SUB>  - долна позиция

<STRIKE> ... </STRIKE> - зачертан текст

<P ALIGN="center">  (или left, right)   ...  </P>   - подравняване на параграф - център, ляво или дясно

<DIV align="....">  .. </DIV>   - задава форматиране на блок от текст
 

д) работа с шрифтове

<FONT атрибут > ... </FONT> 

SIZE="x" - задава големината на шрифта - х може да се изменя от 1 до 7;

COLOR="blue" - задава цвета на текста; цвета може да се задава и в RGB формат - по един байт за всеки цвят (червен, зелен, син) в шестнадесетичен формат, например #0000FF - задава син цвят;

FACE="arial" - избира шрифт
 

е) специални символи

&код_на_символа;   Пример:  &quot; - извежда кавички, &amp; - извежда &; &lt; - извежда <, &gt; - извежда >

&nbsp; - извежда един празен символ (интервал)

 

ж) избор на фон на документа

<BODY BGCOLOR="цвят" background="F_09.gif"> - задава цвета на фона; цвета може да се задава и в RGB формат - по един байт за всеки цвят (червен, зелен, син) в шестнадесетичен формат, например #0000FF - задава син цвят;

<BODY background="графичен_файл"> - задава тапет на фона; графичният файл може да бъде във формат *.bmp, *.jpg, *.gif, *.png и други.


з) създаване на списъци

<OL>                - списък с арабски цифри (подреден списък - ordered list)
<LI>Хляб
<LI>Сирене
<LI>Мляко
<LI>Масло
</OL>

<UL>                - списък без цифри (неподреден списък - unordered list)
<LI>Хляб
<LI>Сирене
<LI>Мляко
<LI>Масло
</UL>
 

и) вмъкване на изображения

<IMG SRC="sample.gif"> - вмъква графичния файл sample.gif, който се намира в главната директория на уеб сървъра

допълнителни атрибути (задават се вътре в IMG тага):

ALIGN="left" (или right, center) - задава подравняване на графиката спрямо документа

ALT="Това е картинка!" - задава алтернативен текс на мястото на картинката, ако браузърът не поддържа изобразяване на картинки

HEIGHT=120 WIDTH=200  - задава размер на изображението

<A HREF="lesson.html">   - задаване на връзка, представена от изображение
    <IMG SRC="lesson.gif">
</A>

 

к) вмъкване на таблици

<TABLE>   .....   </TABLE>   - задаване на начало и край на таблицата

Атрибути:

BORDER=x  - задава рамка с дебелина х точки

<TR> ...  </TR>  - задава ред в таблицата

<TD> ... </TD>  - задава клетка в таблицата

Пример:

<TABLE BORDER=1>
<TR><TD>Ред 1, Колона 1 <TD>Ред 1, Колона 2 <TD>Ред 3, Колона 3</TR>
<TR><TD>Ред 2, Колона 1 <TD>Ред 2, Колона 2 <TD>Ред 3, Колона 3</TR>
<TR><TD>Ред 3, Колона 1 <TD>Ред 2, Колона 2 <TD>Ред 3, Колона 3</TR>
</TABLE>

<TABLE WIDTH="300" HEIGHT="300">   - задава размер на таблицата

<TD ALIGN="right" VALIGN="bottom">   - задава подравняване на таблицата  (хоризонтално и вертикално),

<BGCOLOR="цвят"> - задава цвят на цялата таблица, цял ред или клетка (в зависимост от местоположението на тага)

 

л) използване на фреймове - отделни секции в документа, представляващи различни документи

<HTML>
<HEAD>
<TITLE>Демонстрация на фреймове!</TITLE>
</HEAD>

<FRAMESET COLS="40%, 60%" FRAMEBORDER="0">
<FRAME SRC="leftframe.html"> <FRAME SRC="rightframe.html"> </FRAMESET>

</HEAD>
</HTML>

 

2. Използване на форми в HTML

Формите се използват за попълване на данни от клиентите и изпращането им към сървър за по-нататъшна обработка.

<form> ....   </form>   - задава начало и край на форма

Ако искаме да знаем коя форма ще обработваме, можем да й зададем име чрез опцията NAME:
<FORM NAME=”име”> </FORM>

Можем да зададем как да се обработят въвежданите данни във формата чрез опциите ACTION и METHOD:
<FORM ACTION=“URI” METHOD=GET|POST>
Чрез действието (action) се задава име на програма , която ще разпознае резултатите от формата. URI е адреса на програмата която ще изпълни действията върху формата.
Методите могат да са два вида – GET или POST. Най-често се използва POST, който може да предаде неограничен брой символи на обработващата програма, за разлика от GET, който има ограничения.

Елементите на формата са за въвеждане на текст или парола, за избор от определени елементи и бутони за извършване на обработката.

Задаване на входящо поле от тип текст става чрез маркера:
<INPUT TYPE=“TEXT”>
На мястото на този маркер се появява едноредово празно поле, в което може да се пише.
Можем да задаваме и име на текстовото поле, което да се използва после в програмата за обработка, чрез опцията NAME:
<INPUT TYPE=“TEXT” NAME=”име”>

Имаме възможност да задаваме дължината на входящото текстово поле чрез опцията SIZE със стойности брой символи, максималната дължина чрез MAXLENGTH, както и начален текст чрез VALUE:
<INPUT TYPE=“TEXT” SIZE=x MAXLENGTH=y VALUE=”стойност”>

По-голямо текстово поле за коментари с повече редове (ROWS) и повече на брой символи (COLS) и се задава чрез:
<TEXTAREA ROWS=x COLS=y> </TEXTAREA>

За да създадем входящо поле от тип парола, където въвежданите символи няма да се виждат на екрана, можем да използваме маркера:
<INPUT TYPE=”PASSWORD”>
Както и за текстово поле, можем да задаваме опции за име, размер и т.н.

Ако искаме да направим блок от полета , от които можем да изберем само едно, т.нар. радио бутони, трябва да използваме маркер:
<INPUT TYPE=”RADIO” NAME=”име” VALUE=”стойност”>
За целия блок се използва едно и също име в опцията NAME. Стойността, която се пише в VALUE се използва при обработката. Текста, който искаме да се вижда след кръгчетата, се пише след съответното <INPUT …> поле.
Ако искаме някой от радио бутоните да е избран по подразбиране, трябва да използваме опцията CHECKED:
<INPUT TYPE=”RADIO” CHECKED>

Можем да създадем и блок от полета, които да позволяват повече от един избор едновременно – checkbox бутони чрез:
<INPUT TYPE=”CHECKBOX”>
Тозе маркер може да има опции както за радио бутоните – за име, стойност, предварително избран.

Ако искаме да добавим бутон за потвърждение на всичко въведено, се използва маркера:
<INPUT TYPE=”SUBMIT” NAME=”име” VALUE=”надпис на бутона”>

За изчистване на екрана от всичко въведено се използва маркера:
<INPUT TYPE=”RESET” NAME=”име” VALUE=”надпис на бутона”>

Имаме възможност да използваме и бутони с друго предназначение. За да създадем такъв бутон е необходимо да напишем маркера:
<INPUT TYPE=”BUTTON” NAME=”име” VALUE=”надпис на бутона”>

Можем да създаваме и специален списък с елементи, от които потребителя да може да си избира. Дефинирането на списък с елементи за избор става чрез:
<SELECT> </SELECT>
Могат да се задават и допълнителни опции за име на списъка – NAME, за брой на елементите в него – SIZE, за възможност да се избира повече от един елеминт на списъка – MULTIPLE.

Елемент от списъка се пише между маркерите:
<OPTION> </OPTION>
Всички елементи на списъка се дефинират между съответните маркери  <SELECT> и  </SELECT>.
Ако искаме някой елемент от списъка да бъде предварително избран, ще използваме опцията SELECTED:
<OPTION SELECTED>
 

Задача: Да се направи форма (data.html), в която потребителят да попълни трите си имена, ЕГН, адрес, длъжност. Данните да се предадат чрез метод POST на PHP скрипта data.php, който да съхрани данните в текстов файл на сървъра.

Решение - HTML кода на уеб документа data.html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вашите данни</title>
</head>

<body>

<p align="center"><b><font size="4">Вашите данни: <br>
&nbsp;</font></b></p>

<form method="POST" action="data.php">
<p align="center">
<br>
Име <input type="text" name="T1" size="20">&nbsp; Презиме
<input type="text" name="T2" size="20"> Фамилия
<input type="text" name="T3" size="20"></p>
<p align="center">ЕГН <input type="text" name="T4" size="20">&nbsp;&nbsp;
Адрес <input type="text" name="T5" size="20">&nbsp;&nbsp; Длъжност
<input type="text" name="T6" size="20"></p>
<p align="center">
<input type="submit" value="Потвърди" name="B1">
<input type="reset" value="Изтрий" name="B2"></p>
<p align="center">&nbsp;</p>
</form>

</body>

</html>

 

Решение - PHP скрипта, който съхранява данните във файла data.txt:

<?php
$f=fopen("data.txt","a");

   fwrite($f,$_POST["T1"]); fwrite($f,"\n");
   fwrite($f,$_POST["T2"]); fwrite($f,"\n");
   fwrite($f,$_POST["T3"]); fwrite($f,"\n");
   fwrite($f,$_POST["T4"]); fwrite($f,"\n");
   fwrite($f,$_POST["T5"]); fwrite($f,"\n");
   fwrite($f,$_POST["T6"]); fwrite($f,"\n");
 
fclose($f);
echo "Вашите данни са записани!";
?>