***ДОСТЪП ДО САЙТА***

ДО МОМЕНТА НИ ПОСЕТИХА НАД 2 500 000 ПОТРЕБИТЕЛИ

БЕЗПЛАТНИТЕ УЧЕБНИ МАТЕРИАЛИ ПРИ НАС СА НАД 7 700


Ако сме Ви били полезни, моля да изпратите SMS с текст STG на номер 1092. Цената на SMS е 2,40 лв. с ДДС.

Вашият СМС ще допринесе за обогатяване съдържанието на сайта.

SMS Login

За да използвате ПЪЛНОТО съдържание на сайта изпратете SMS с текст STG на номер 1092 (обща стойност 2.40лв.)


SMS e валиден 1 час
HTML общият език ПДФ Печат Е-мейл

1. Въведение

HTML е общият език за оформяне и публикуване на хипертекстови документи в Световната Информационна Мрежа (World Wide Web или популярното WWW). ‘ъкращението HTML е от HyperText Markup Language, което означава език за маркиране на хипертекст (текст с връзки към други текстове). Проектът за свързване в WWW и използване на единен език за форматиране на документи е направен през 1989г. в CERN  - швейцарска физическа лаборатория. Първата версия на HTML е от 1992г. HTML 2.0 е стандартизиран вариант на езика от 1994г. HTML 3.2 е следваща версия, която е представена през 1996 г. Спецификацията HTML 4.0 излезе през 1998г. Има специални програми за четене на оформени с HTML документи – броузери (browser). Най-популярните са Netscape Communicator и Microsoft Internet Explorer.  

Повече за историята на HTML можете да научите от W3C- World Wide Web Consortium.

HTML е език, който казва на web броузера как да показва отделния документ (web страница). Документите са обикновени текстови файлове (ASCII), със специални маркери, които web броузера знае как да интерпретира и показва на екрана. 
Документите, подготвени и публикувани чрез HTML, могат да се четат навсякъде по света, което е най-голямото предимство на този език. Освен това web страниците могат да се променят толкова често, колкото е необходимо, и могат да имат мултимедийни допълнения – графика, анимация, звук, видео, които обогатяват съдържанието. Специален елемент от езика осигурява връзките (препратки) до други текстове чрез посочване на универсален идентификатор на ресурси (URI). Това прави от обикновения текст хипертекст.

URI

URI (Uniform Resourse Identifier) -универсален идентификатор на ресурси или URL (Uniform Resourse Locator) служи за намиране на необходимата информация в WWW. Идентификаторът може да има следните форми: 
file.html – име на файл 
http://computer.organization/file.html – адрес в WWW с посочено име на файл 
http://computer.organization/directory/file.html - адрес в WWW с посочена директория и  име на файл 
mailto:name@www.some.com –  електронна поща
ftp://ftp.somewhere.edu – адрес на сървер за обмен на файлове 
Малките и главните букви в идентификатора са от значение – трябва да се въвеждат точно така, както са изписани.

Tags

Елементите на HTML се наричат маркери (tags). Името на маркера подсказва за какво служи. Маркерите обикновено са по двойки – начален и краен маркер. Между тях се поставя текст. Резултатът от това маркиране е видим после в броузера. Има и единични маркери, които имат само начален маркер. Синтаксисът на маркерите обикновено е следния: 
Текст, който се намира между началния и крайния маркер 

Началния маркер представлява името на маркера оградено между . Крайния маркер е името на маркера оградено между . 
Текстът, който се намира между началния и крайния маркер ще се появи в броузера оформен в зависимост от значението на маркера. Например, като резултат от маркирането: 
пример на екрана ще се появи в получер шрифт така: пример. 
В документ, оформен чрез HTML, разделители са само интервалите. Ако искаме да разделим текста на абзаци или нови редове, трябва да  използваме специални маркери.

color

Често за фон на web страница или за подчертаване на някои букви се използва различен цвят. Цвят може да бъде име на цвят на английски или 16-ичен код.  Ето някои имена на цветове: red, white, blue, gray, green, yellow, beige, black, lightgreen, lightblue. 16-ичния код се образува от комбинацията на трите основни цвята червено - R, зелено - G, синьо – B. Кода започва със знака #, последван от шест цифри, разделени по двойки. Всяка двойка отговаря на наситеността на един от трите цвята в последователността RGB и се задава в стойности от 0 до 255 (00 до FF в 16-ичен вид).Например #000000 е код за черен цвят, #FF0000 – за червен цвят, #FFFFFF е за бял цвят.

редактори

Можем да пишем в кой да е текстов редактор – NotePad, Write, SimpleText, стига след това да запазим файла като текст с разширение .htm  или .html . Резултата от работата си можем да видим в броузер. 
Вече има и много специализирани редактори за HTML документи, които позволяват дори по време на редактиране да виждаме резултатите. 
Някои популярни програми (като MS Word 97) предлагат конвертиране на текстови документи към HTML документи. 
Ако искаме да видим как е направен някой HTML документ, можем да използваме напр. команда от менюто на Netscape Navigator View (Page) Source.

GIF, JPG

Най-разпространените формати за файлове с графики в мрежата са Graphics Interchange Format и Joint Photographic Expert Group. Файловете с картини имат разширения съответно .gif и .jpg 
Ако не можете да рисувате, можете да изтеглите някои картини от свободно разпостраняваните в Интернет напр. от адрес: http://www.iconbazaar.com или http://www.freegraphics.com

*What is*  Ако искате да разберете какво означава някое популярно компютърно съкращение или термин, посетете: http://whatis.com/

В настоящия курс ще се придържаме към спецификацията HTML 3.2. Ще покажем как се създава web  страница и малък web site – съвкупност от свързани помежду си web страници. Въпросите за това как се показва web страница на света, какво е стилна web страница и какво е web design предполагат отделно, по-обстойно разглеждане.

Начало<-- -->2. Основни елементи на HTML

2. Основни елементи

За да започнете работа с документ от тип HTML е необходимо да посочите тип на документа чрез маркерите:  

 
Те се слагат в началото и края на HTML документа.

Всеки HTML документ се състои от две основни части – заглавна и същинска част (тяло).

Заглавна част

Заглавната част съдържа описателна информация - заглавие, автор, ключови думи, кодиране на страницата, което е важно за документи със съдържание на български език и др. За оформяне заглавната част на документа е необходимо да използвате маркерите: 

Заглавието на документа се оформя чрез маркерите:  
То трябва да бъде в заглавната част на документа (т.е. между и ). 
Текстът между маркерите за заглавие се появява в ивицата за заглавие в прозореца на броузера.

Автор може да се посочи чрез: 

Най-разпространената кодова таблица за буквите на българската азбука е windows-1251. Задаването на кодирането става чрез маркера: 
 
Ако не се зададе нищо, по подразбиране кодирането е за латиница. Ако зададете windows-1251 можете да пишете текст на български в web страница и да сте сигурни, че броузера ще го покаже правилно и ще може да се чете.

Същинска част

Същинската част на документ се задава чрез маркерите: 
   
В нея се съдържат текст, графика, анимация, звук, връзки към адреси в WWW. Обикновеният текст не е необходимо да е между някакви други маркери.

Задаването на цвят  на фона на HTML документа става чрез допълнителната опция в маркера BODY: 
 
Цвят можете да зададете както е описано във въведението -  чрез име на цвят или 16-ичен код.

Можете да използвате готова картина като фон на страницата: 
 
Име на файл е име на графичен файл (от типовете описани във въведението).

Можете да направите и комбинация от фонов цвят и картина за фон. Фоновият цвят ще се появи за секунди преди картината.

Чрез следващите опции в маркера BODY можете да зададете цвета на текста - опция TEXT, на връзките  към други документи - опция LINK, на активните в момента връзки опция ALINK и на вече посетените места в страницата - опция VLINK: 
 
Всяка опция си има стойност, отделните опции се изброяват една след друга разделени с интервал и подредбата им няма значение. За завършващ маркер се използва само , т.е. не трябва отново да се изброяват опциите. 
(Вижте и пример 10 в раздела за връзки.)

Пример 1:

Създайте файл с име school.html и следното съдържание:

  
 
WWW Страница на училище “Кирил и Методий” 
 
 
Училище “Кирил и Методий” 
 


Резултатът от разглеждането му в броузер ще е следния:


Пример 2:

Редактирайте файла school.html като добавите текста в червено:

 
 
WWW Страница на училище “Кирил и Методий” 
 
 
 
Училище “Кирил и Методий” 
 


Резултатът ще е следния: 

1. Въведение<-- -->3. Структурно описание на документ

3. Структурно описание на документа

HTML предлага два начина за оформяне на страниците – структурно и физическо. В този раздел ще разгледаме структурното описание на един документ чрез HTML.

В даден документ може да имаме основна тема, обикновен текст и заглавия, както и друга информация, която показваме на отделно място. HTML предлага шест нива на отделяне на темите по важност.

Ако искаме да посочим чрез големината на шрифта и разположението на текст, че е заглавие или основна тема в документ, използваме маркер за заглавие от първо ниво: 

За заглавията на подтемите използваме маркер за заглавие от второ ниво:

Заглавията на под-(под-(под-))темите се поставят между маркерите за съответни нива от трето до шесто: 

 

 

 

Резултата от:

Заглавие от ниво 1

Заглавие от ниво 2

Заглавие от ниво 3

Заглавие от ниво 4

Заглавие от ниво 5

Заглавие от ниво 6

е следния:

Заглавие от ниво 1

Заглавие от ниво 2

Заглавие от ниво 3

Заглавие от ниво 4

Заглавие от ниво 5
Заглавие от ниво 6

Заглавията по подразбиране се подравняват вляво. Чрез следните опции можем да подравняваме вдясно или да центрираме заглавията: 
(може да не се пише) 
центрирано заглавие 
подравнено вдясно 
i=1,2,3,4,5,6 за всяко от нивата

Когато е необходимо част от текста да бъде с отместване навътре, се използват маркерите: 

За да наблегнем на част от текста можем да го маркираме с 
 
Обикновено ще се появи като наклонен текст.

Ако искаме да наблегнем по-силно / текста да изпъква, използваме маркерите 
 
Ще се появи като почернен текст. В зависимост от броузера може и да е наклонен.

Когато искаме да вмъкнем цитат, ще го маркираме с 
 
Ще се появи като наклонен текст.

Можем да посочим адресна информация (напр. адрес на автора) чрез маркерите: 

   

 
Текстът между тях ще се появи като наклонен текст.

Пример 3:

Редактирайте файла school.html, за да оформите реда с името на училището като центрирано заглавие от 1 ниво и да добавите подзаглавия: История на училището, Учебни програми, Приемни изпити, като добавите текста в червено:

 
 
WWW Страница на училище “Кирил и Методий” 
 
 
 

Училище “Кирил и Методий”

 

История на училището

 
Училището е създадено през … 

Учебни програми

 
В училището се изучават … 

Приемни изпити

 
Приемните изпити се провеждат през … 
 

В резултат на това маркиране на екрана може да се види:  

2. Основни елементи на HTML<-- -->4.  Разделители на текст

4. Разделители на текст

Когато ни е необходимо да разделим текст в HTML страницата на абзаци, можем да използваме маркера:


За подравняване на абзац вляво, центрирано или вдясно се задават опции в маркера

:


- може и да не се пише, защото по подразбиране винаги е вляво подравнено.




За прекъсване на реда на определено място се използва:

Ако искате да вмъкнете хоризонтална черта в текста, използвайте:


Дължина на чертата може да се зададе като брой пиксели или  в % от ширината на прозореца чрез опцията WIDTH в


.




Хоризонталната черта може да се подравни спрямо границите на текста вляво, вдясно или да се центрира, когато е по-къса чрез опцията ALIGN в


.






Дебелина на чертата в брой пиксели може да се зададе чрез опцията



Резултат от маркера


е:

Ако искате да сложите плътна черта, без триизмерна (3D) сянка, използвайте:


Пример 4:Да дообогатим пример 3 с повече текст за историята на училището, разделен на абзаци, 3-те основни теми ще разделим с по 2 хоризонтални черти, датите за приемните изпити ще подравним в центъра. Ще използваме и картина като фон:

Файл backgr.gif

 
 
WWW Страница на училище “Кирил и Методий” 
 
 
 

Училище “Кирил и Методий”

 

История на училището

 

Училището е създадено през 1901г.

 

Един от въпитаниците му е …

 

 

 

Учебни програми

 
В училището се изучават … 

 

 

Приемни изпити

 

Приемните изпити се провеждат през м. юни:
 
17 юни – математика
 
22 юни – български език
 

 

 

 
 

На екрана можете да видите следното:

3. Структурно описание<-- -->5. Физическо оформяне на символи в текст

5. Физическо оформяне на символи в текст

Маркерите за структурно оформяне създават структурата на документа, а самото показване зависи от броузера. Физическото оформяне е в зависимост от желанието на автора. Броузера показва това, което е определено. Маркерите за физическо оформяне са например за надебелени букви, наклонени букви, букви с определен цвят и шрифт.

Ако непременно искаме да покажем текст с надебелени букви (получер), трябва да използваме: 
  
За разлика от маркера за структурно оформяне , чийто резултат зависи от конкретния броузер – обикновено е получер шрифт, но може да е и наклонен например.

За да покажем наклонен текст (курсив) е необходимо да напишем текста между маркерите: 

Можем да подчертаем текст чрез: 

Ако искаме да покажем, че в текста има корекции, можем да изполжаме маркерите за зачертан текст

Шрифт като на пишеща машина се показва чрез: 

Горен индекс както в xi се оформя като i се пише между маркерите: 

Долен индекс както в xi се оформя като i се пише между маркерите: 

Предварително оформен текст в текстов редактор може да се покаже така както е бил оформен, ако се постави между маркерите: 

 
  
и ще се появи в шрифт Courier.

За подравняване в центъра може да се използват: 

  
Препоръчително е да се използва варианта с ALIGN=CENTER към съответния маркер.

За привличане вниманието кьм определена част от текста може да се поставят маркерите за мигане на текста: 
  
Не се препоръчва да се използва много често.

За определяне на базовия размер на шрифта в част от документа се използват маркерите: 
  
По подразбиране i=3. 

За смяна на шрифта се използват маркерите: 
  
Тези маркери обикновено имат допьлнителни опции.

За размер на шрифта се посочва опцията 
SIZE=i, i=1,2,3,4,5,6,7 за 7 основни размера. Стандартния размер е 3. 

Можем да променяме размера на шрифта относително - спрямо основния размер на буквите в целия документ чрез: 
 
 
+i увеличава  или -i намалява  размера на шрифта с i спрямо текущия размер.

Цвят на буквите може да се зададе чрез: 
    
цвят може да е име на цвят или 16-ичен код.

Можем да изберем вида на шрифта чрез маркерите: 

Пример 5:

Да създадем файл за историята на училището – history.html. Нека първите букви за всеки абзац са с по-голям от базовия размер и оцветени в червено.

 
 
История на училище “Кирил и Методий” 
 
 
 

История на училище “Кирил и Методий”

 

 
Училището е създадено през 1901г. … 

 

 
Един от възпитаниците му е … 

 
 

Резултатът ще е следния:

4. Разделители на текст<-- -->6. Графики

6. Графики

За да покажем на екрана графика, картина или анимация, използваме единичния маркер: 

Можем да подравним графиката по горната линия на текста, долната или в средата чрез опцията ALIGN и съответните стойности: 
 
 

Можем да зададем какъв алтернативен текст да се покаже, ако не се вижда графиката: 
“Text”

Размерите на графиката могат да се задават в брой пиксели (точки на екрана) чрез опциите WIDTH за ширината и HEIGHT за височината на графиката: 

Можете да оставите определено свободно място около графиката чрез опциите HSPACE за хоризонталното разстояние и VSPACE за вертикалното разстояние, чиито стойности са в брой пиксели. 

Рамка с определена ширина около графиката ще се появи, ако използвате опцията BORDER със стойност брой пиксели. 

В един маркер IMG можете да използвате комбинация от няколко или всичките опции. Например: 
”figure 
Всяка опция е разделена от другата с интервал, като поредността не е от значение. Това правило важи и за други маркери, които имат опции. 
Можете да използвате като източник на картина не само файл, но и директория/име на файл или URI – адрес на графика от мрежата. Валидни примери са: 
и 

Пример 6:

Да добавим към файла с историята на училището и картина на Св.Св. Кирил и Методий, като редактираме файл history.html

Файл cyrilmeth.gif

 
 
История на училище “Кирил и Методий” 
 
 
 

История на училище “Кирил и Методий”

 

 
 
Училището е създадено през 1901г. … 

 

 
Един от възпитаниците му е … 

 
 


Резултатът ще е следния:

5. Физическо оформяне на символи<-- -->7. Списъци

7. Списъци

Много често информацията, която имаме е добре да се покаже в списъчен вид с номера или без номера. HTML предлага следните маркери за неномериран (bulleted) списък:


Те трябва да бъдат сложени извън елементите на списъка.

Маркер за нов елемент от списъка (и за номериран и за неномериран) се задава чрез:

  • Вида на изброителя, който се поставя преди елементите за целия списък, се задава чрез опцията TYPE със стойности за запълнен кръг, празен кръг или квадрат съответно:


      или    CIRCLE
      или    SQUARE

    Аналогично вид на изброителя може да се задава само на един елемент от списъка чрез опцията TYPE със съответните стойности:

  •                  

  • или    CIRCLE
    или    SQUARE
    Ако не се зададе изрично нещо друго, за следващите елементи след него типът е такъв, какъвто се задава с този маркер.

    За да създадем номериран списък, е необходимо да използваме маркерите:


    Също както за неномерирания списък те трябва да бъдат сложени извън елементите.

    Можем да зададем типа на изброителя за целия списък с опцията TYPE със стойности: A за големи букви, a за малки букви, I за големи римски цифри, i за малки римски цифри, 1 за арабски цифри. Ако не се използва TYPE, номерирането е с арабски цифри.

               

    Както и за неномерирания списък можем да задаваме вида на изброителя и само за един елемент на списъка:

  •    
  • Ако искаме номерацията на списъка да залочва с номер различен от стандартното 1, можем да използваме опцията START, която има числена стойност:

                              

    Можем да зададем номер на елемент чрез опцията VALUE с числена стойност:

  • HTML предлага възможност за оформяне на специален вид списък с определения, които се появяват на екрана във форма подобна на подредбата в речник. Маркерите за създаване на такъв списък са:


    В списъка се включват елементи с по две части - термин и определение. Маркерите за всеки такъв елемент се включват между
    и
    и са следните:
    Термин

    Определение

    Пример 7:

    Да създадем файл teacher.html, който да съдържа номериран списък на преподавателите в училището. След това да добавим подсписъци на предметите, по които преподава всеки отделно.

     
     
    Списък на преподавателите в училище “Кирил и Методий” 
     
     
     

    Списък на преподавателите в училище “Кирил и Методий”

     
      Преподаватели 
    1. Иван Петров
    2.  
    3. Димитрина Иванова
    4.  
    5. Елена Христова
    6.  
     
     

    Резултатът изглежда така:

    Допълнение

    За да добавим подсписъци на всеки елемент е необходимо да направим т.нар. влагане на маркери. Спазва се правилото, че най-вътрешният маркер се затваря първи, след това следващите, като не се допуска прескачане. За по-лесно разграничаване съответната двойка маркери е с еднакъв отстъп навътре.
    Правилно:
    Неправилно:

    Добавянето на подсписъци с предметите ще стане по следния начин:

     
     
    Списък на преподавателите в училище “Кирил и Методий” 
     
     
     

    Списък на преподавателите в училище “Кирил и Методий”

     
      Преподаватели и предмети 
    1. Иван Петров
    2.  
        предмети 
      • математика
      •  
      • физика
      •  
       
    3. Димитрина Иванова
    4.  
        предмет 
      • български език
      •  
       
    5. Елена Христова
    6.  
        предмет 
      • български език
      •  
       
     
     

    Резултатът от маркирането с HTML ще е следния:

    6. Графики<-- -->8. Таблици

    8. Таблици

    Често се налага да оформяме текст в таблица за по-голяма прегледност, за по-лесно сравняване на данните и т.н. HTML предлага следните маркери за създаване на таблица: 

     
    Всички елементи на таблицата се намират между тези маркери.

    Ако искаме да поставим външна рамка на таблицата, трябва да използваме опцията BORDER за ширина на рамката със стойност брой пиксели. Таблицата по подразбиране няма рамка. 

    За да зададем разстояние между клетки в таблица, е необходима да използваме опцията CELLSPACING: 
     
    По подразбиране между клетките в таблицата  има 2 пиксела разстояние.

    За разстоянието между текст и рамка в клетка на таблица можем да използваме опцията CELLPADDING: 

     
    По подразбиране между текста и рамката на клетката има 2 пиксела разстояние. Чрез този маркер можем да променяме това разстояние.

    По подразбиране таблицата е ширика колкото текущия прозорец. Можем да зададем в брой пиксели ширината на таблицата чрез опцията WIDTH, чиито стойности са в брой пиксели или в проценти от ширината на текущия прозорец: 

     

    Чрез име на цвят или 16-ичен код в опцията BGCOLOR можем да зададем фоновия цвят на таблицата: 

    По подразбиране таблицата се разполага вляво на прозореца. Чрез опцията ALIGN можем да зададем друго разположение върху екрана в зависимост от стойността – ляво, центрирано или дясно съответно: 

    За създаване на нов ред в таблица служат маркерите: 

    Всеки ред може да се подравнява хоризонтално и вертикално чрез опциите ALIGN и VALIGN 

     
    Хоризонталното подравняване ALIGN има стойности вляво, центрирано или вдясно, а вертикалното подравняване VALIGN - в горната част, в средата или в долната част на клетките в реда.

    За създаване на клетка в таблица служат маркерите: 

     
    Между тях се пишат данните в таблицата. Броя на такива двойки маркери определя и броя на колоните в таблицата.

    Аналогично на цял ред, можем да подравняваме текст само в конкретна клетка хоризонтално и вертикално: 

     
    Текста между тях ще се появи почернен и центриран. За заглавните клетки можем да използваме същите опции както и за обикновените клитки – за подравняване, за фонов цвят и т.н.

    Заглавие на таблицата можем да напишем между маркерите: 

    То може да се появи отгоре или отдолу на таблицата, ако зададем опцията ALIGN със съответните стойности: 

    За предотвратяване пренясянето на по-дълъг текст се използва опцията NOWRAP: 

    За по-специално оформяне на клетка, така че да е с ширина колкото x броя клетки стоящи вертикално под нея се използва опцията COLSPAN: 








    За оформяне на клетка с ширина колкото x броя клетки стоящи хоризонтално до нея се използва опцията ROWSPAN:  









    За фиксиране на ширина на клетка се използава опцията WIDTH със стойности брой пиксели или % от ширината на цялата таблица:  

     

    Чрез име на цвят или 16-ичен код като стойност на опция BGCOLOR можем да зададем фонов цвят на клетката 

    Заглавие на реда или колоната в таблицата - заглавна клетка, можем да зададем с маркерите: 

    Пример 8:

    Да създадем файл priem.html за приемните изпити в училището, като оформим текста в таблица със заглавиe отгоре, две надписани колони (заглавни клетки) за дата и предмет и три реда за предметите.

     
     
    Приемни изпити в училище “Кирил и Методий” 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    Дати за приемни изпити 
    Дата Изпит
    17 юни математика
    22 юни български език
    26 юни история
     
     

    Резултатът ще е следния:

    7. Списъци<-- -->9. Връзки

    За осъществяване на най-важната функция - връзка към друг документ, HTML предлага следния маркер: 

    Връзка към друго място
    Текстът между тези маркери обикновено ще бъде подчертан и в друг цвят, което показва, че потребителят може да щракне с мишката върху този текст и да осъществи връзка към друго място в WWW.
    HREF=Hypertext REFerence Anchor – котва към хипертекстов документ. На мястото на URI може да има име на файл, към който ще бъде връзката. Вижте какъв тип може да бъде URI. Обърнете внимание какъв е формата за електронна поща.

    За показване на резултата от щракване на връзката в отделен празен прозорец или именувана част на прозореца се използва опцията TARGET:
    Връзка
    като "име" може да бъде дефинирано специално име на част от прозореца както е показано за карета или специалните имена:  _blank – за отваряне на нов прозорец, _self – за отваряне в същия прозорец. За по-подробна информация вижте: http://developer.netscape.com/.

    Ако искаме да разделим условно документ, (обикновено дълъг), можем да наименоваме част от документа чрез маркерите:

    Именована по този начин, частта на документа после може да бъде лесно достъпна например от началото на документа – във вид на меню с връзки до отделните части.

    За задаване на връзка към определена част от документа, (мишена, оформена от ), се използва знак #, поставен преди името на мишената.
                  
    Можем да използваме тази възможност и за документи, които са в WWW:
           

    Пример 9:

    Нека да оформим дългия файл school.html от Пример 3. като именуваме частите му и направим меню с връзки до тези части.
    Схематично можем да представим връзките така:



    WWW Страница на училище “Кирил и Методий”



    Училище “Кирил и Методий”


    История
    Преподаватели
    Прием


    История на училището


    Преподаватели


    Приемни изпити



    Резултатът от маркирането с HTML ще е следния:

    Пример 10:

    Нека да разделим файл school.html от предишния пример, като отделните секции в него сега да са връзки към различни файлове. history.html - за историята на училището, teachers.html - за списък на учителите, priem.html за дати за приемен изпит. Да добавим и връзка към адреса за електронна поща на училището с текст и картинка. Нека да има и връзка към адрес на друго училище. Да зададем и цветове на връзките – тъмнозелени, когато още не са посетени, ярко зелени – когато вече са посетени и червени при щракване.
    Схематично структурата на връзките може да се представи чрез диаграмата:

    Т.е. вече имате малък web site с начална страница school.html и връзки към три файла, към външен адрес и към електронна поща.



    WWW Страница на училище “Кирил и Методий”



    Училище “Кирил и Методий”




    Резултатът e:

    8. Таблици<-- -->10. Карета

    10. Карет

    Развитието на езика HTML предлага нови възможности за оформлението на екрана за показване на повече документи едновременно на екрана. Например може да имаме следното разделяне на екрана: отляво документ с меню от връзки и отдясно да се показват съответните на връзките документи. Частите на екрана, на които се разделя се наричат карета (frames). Подреждането на екрана изглежда почти аналогично на подреждането, което би се получило чрез таблици. Предимството на каретата е, че могат да се използват различни файлове. 

    За да опишем какво искаме, ни е необходим още един файл, който показва на броузера как точно да става това разделяне и как да се появяват на екрана съответните документи.

    Създаването на карета става чрез маркерите:

    Те се пишат вместо и .

    За да опишем колко на брой реда ни трябват, се използва опцията ROWS:
      
    x,y,z,... се задават в брой пиксели или в % от екрана или като * - частта от екрана, която остане е за този ред.

    За да опишем колоните за всеки ред използваме опцията COLS:

    Можем да зададем ширина на рамка около каретата чрез опцията BORDER, чийто стойности са в брой пиксели.

    Задаване на име на файл, който ще се появи в съответното каре става чрез маркера:

    Този маркер е единичен (няма съответен затварящ), появява се толкова пъти, колкото файла искаме да имаме на екрана и се пише между и .

    Всяко каре може да си има собствено име, което се задава чрез опцията NAME:

    По подразбиране резултата от щракване върху връзките във всяко каре се появява в същото каре. Ако има посочено име на каре, чрез допълнителна опция TARGET в маркера за връзка това име може да се използва за резултата от щракването да се появи в именуваното каре.

    Чрез допълнителните опции SCROLLING (със стойности yes, no, или auto) и  NORESIZE могат да се задават съответно дали да има или не ивиците за прелистване (scrollbars) и изрично да не се променя размера на карето.
    Съществуват и други опции, като цвят на рамката около карето, за които можете да прочетете във web site на Netscape http://developer.netscape.com.

    Тъй като има все още броузери, които не разпознават маркерите за карета, можете да опишете текст, който да се появи тогава между маркерите:

    Пример 11:

    Да създадем файл frames.html, който да описва следното разделяне на екрана на карета:

    Файл frames.html за описание на разделянето изглежда така:



    Карета - WWW Страница на училище “Кирил и Методий”






    Необходима ви е по-нова версия на броузера, която да показва карета. <br />

    Файл school.html е модифициран по следния начин:



    WWW Страница на училище “Кирил и Методий”



    Училище “Кирил и Методий”




    Останалите файлове priem.html и history.html са от предишните примери. 

    Ето какъв ще бъде резултата при щракване на връзката “Приемни изпити”

    За следното разделяне на екрана имаме следния код:



    Карета









    тъй като разделяме екрана винаги следейки горния ляв ъгъл. 

    В конкретния случай имаме най-напред два реда, в първия слагаме файл title.html, a втория се разделя на две колони, в които слагаме файловете school.html и history.html.

    9. Връзки<-- -->11. Форми

    В днешно време често се налага да попълваме формуляри. HTML предлага начини за създаване на форма (образец) за попълване от потребителите. Обрабогката на данните, въведени в тези форми, става чрез програми, написани на CGI (Common Gateway Interface) езици за програмиране като Perl, C/C++, TCL, AppleScript. Тези програми стоят на web server и оттам се изпълняват.

    Задаване на форма може да стане чрез маркерите:


    Между тези маркери можете да използвате и всички останали маркери на HTML, както и специалните за елементите на формата.

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

    Можем да зададем как да се обработят въвежданите данни във формата чрез опциите ACTION и METHOD:


    Чрез действието (action) се задава име на програма , която ще разпознае резултатите от формата. URI е адреса на програмата която ще изпълни действията върху формата.
    Методите могат да са два вида – GET или POST. Най-често се използва POST, който може да предаде неограничен брой символи на обработващата програма, за разлика от GET, който има ограничения.

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

    Задаване на входящо поле от тип текст става чрез маркера:

    На мястото на този маркер се появява едноредово празно поле, в което може да се пише.
    Можем да задаваме и име на текстовото поле, което да се използва после в програмата за обработка, чрез опцията NAME:

    Имаме възможност да задаваме дължината на входящото текстово поле чрез опцията SIZE със стойности брой символи, максималната дължина чрез MAXLENGTH, както и начален текст чрез VALUE:

    По-голямо текстово поле за коментари с повече редове (ROWS) и повече на брой символи (COLS) и се задава чрез:

    За да създадем входящо поле от тип парола, където въвежданите символи няма да се виждат на екрана, можем да използваме маркера:

    Както и за текстово поле, можем да задаваме опции за име, размер и т.н.

    Ако искаме да направим блок от полета , от които можем да изберем само едно, т.нар. радио бутони, трябва да използваме маркер:

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

    Можем да създадем и блок от полета, които да позволяват повече от един избор едновременно – checkbox бутони чрез:

    Тозе маркер може да има опции както за радио бутоните – за име, стойност, предварително избран.

    Ако искаме да добавим бутон за потвърждение на всичко въведено, се използва маркера:

    За изчистване на екрана от всичко въведено се използва маркера:

    Имаме възможност да използваме и бутони с друго предназначение. За да създадем такъв бутон е необходимо да напишем маркера:

    Можем да създаваме и специален списък с елементи, от които потребителя да може да си избира. Дефинирането на списък с елементи за избор става чрез:

    Могат да се задават и допълнителни опции за име на списъка – NAME, за брой на елементите в него – SIZE, за възможност да се избира повече от един елеминт на списъка – MULTIPLE.

    Елемент от списъка се пише между маркерите:

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

    Пример 12:

    Да съдадем файл form.html, който да описва заявка на потребител към библиотечна информационна система. Потребителя трябва да въведе името си, дали иска да ползва книга или списание, да си избере от списък с книги, дали желае да получава допълнителна информация по електронната поща и/или печатни брошури, да може да изпрати данните на обработваща програма или да изтрие всичко въведено от екрана.

    

    Заявка към библиотеката




    Въведете името си:


    Искате да използвате:

    книга

    списание

    Изберете от списъка с книги:



    Желая да получавам допълнителна информация по ел. Поща


    Желая да получавам брошури





    Резултатът ще е следния:

    10. Карета<-- -->12. Допълнителни маркери и полезни www адреси

    12. Допълнителни маркери и полезни www адреси

    За вмъкване на обект в HTML страница (например звуков файл) служи маркера:

    Този маркер се разпознава само от броузер Netscape Communicator.
    За фонова музика  MS Internet Explorer използва свой маркер:

    Можем да въвеждаме специални символи като ® чрез ® © чрез © непрекъсваем интервал чрез   като ги изписваме с малки букви задължително!

    JAVA e един от бързо развиващите се езици за програмиране със специална насоченост към Интернет. Програми, написани на JAVA да се стартират в броузер, се наричат аплети.
    За да вмъкнем на определено място JAVA аплет, използваме маркерите:


  •  

    WWW.POCHIVKA.ORG