Показват се публикациите с етикет Модул 3 - 12 клас. Показване на всички публикации
Показват се публикациите с етикет Модул 3 - 12 клас. Показване на всички публикации

вторник, 22 септември 2026 г.

линк 

вторник, 17 февруари 2026 г.

Формуляри

1.  Формуляри - текстово поле

Освен за показване на информация WEB страниците могат да служат и за събиране на информация от потребителя. Това става с така наречените формуляри. За съжаление езика HTML не ви позволява да управлявате информацията във формулярите, а само да ги разполагате на страницата си. Двойката елементи за разполагане на формуляри е <FORM></FORM>. Между тази двойка елементи могат да се разполагат неограничен брой формуляри. Всеки един формуляр се разполага с единичния елемент <INPUT>. Този елемент трябва задължително да съдържа двата атрибута NAME и TYPE. Атрибута NAME задава името на формуляра а TYPE видът му. Нека разгледаме различните стойности на TYPE.

<HTML>
<HEAD>
    < TITLE>
forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME=
"form1" TYPE="text">
</FORM>
</BODY>
</HTML>
Този HTML документ ще покаже на екрана следното текстово поле: 
Такъв тип едноредово текстово поле се задава със стойността на атрибута TYPE="text". Вие можете да променяте дължината на полето с атрибута SIZE. Ако пропуснете SIZE се показва поле с дължина 20 символа. По подразбиране полето се показва празно, но вие можете да  зададете някаква начална стойност на полето. Това става с атрибута VALUE. Нека направим едно текстово поле с дължина 50 символа и надпис в него "това поле съдържа текст и има дължина от 50 символа".
<HTML>
<HEAD>
    < TITLE>
forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME=
"form2" TYPE="text" SIZE="40" VALUE="това поле съдържа текст и има дължина от 40 символа">
</FORM>
</BODY>
</HTML>

Понеже текста който се показва е по-дълъг от 40 символа, последните няколко символа се скриват. Ако кликнете върху полето можете да местите видимата част на текста наляво и надясно с помощта на стрелките за движение от клавиатурата. Също така можете да напишете свой текст в полето. Ако текста който пишете е по дълъг от дължината на полето, той автоматично започва да се скролира наляво и разкрива новонаписаните символи. Опитайте! Можете да ограничите дължината на изписвания текст с атрибута MAXLENGHT. Например с MAXLENGHT="40" ограничавате надписа до 40 символа.
Друг параметър на атрибута TYPE е password. Той действа по същия начин като text, с изключение на това, че в полето не се показва самия текст, който въвеждате, а звездички.
<HTML>
<HEAD>
    < TITLE>
forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME=
"form3" TYPE="password">
</FORM>
</BODY>
</HTML>
Напишете нещо в това поле и ще видите как всеки символ се заменя със звездичка. Това е особено полезно, когато текста е някаква парола и не трябва да се вижда от хората около вас.

 2. Друг тип формуляри са кутиите с отметки.

Те се задават със стойността checkbox на атрибута type.




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

3. Формуляри – радиобутони



    Подобни на кутиите с отметки са радиобутоните. Разликата е, че при радиобутоните може да бъде отметнат само един бутон. Когато изберете друг бутон, отметката в предишния изчезва. Особеното при радиобутоните е, че всички трябва да носят едно и също име, в случая NAME="R1". Радиобутон се създава с атрибута TYPE="radio".


4. Друг тип формуляри са бутоните SUBMIT и RESET. 

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

     Бутона RESET  изчиства полето, в случай че сте въвели нещо в него, а бутона SUBMIT потвърждава въведената информация. В случая при натискане на бутона SUBMIT няма да има ефект. Опитайте! Въведете нещо в полето и натиснете бутоните! Ето как изглежда HTML кода на горния пример :
<HTML
<HEAD>
<TITLE>submit and reset</TITLE>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE=
"text" NAME="T1" SIZE="20">
<INPUT TYPE=
"submit" VALUE="Submit" NAME="B1">
<INPUT TYPE=
"reset" VALUE="Reset" NAME="B2">
</FORM>
</BODY>
</HTML>
   SUBMIT бутон се създава с атрибута TYPE="submit". Атрибута VALUE="Submit" задава какъв да бъде надписа на бутона. Можете да го промените по свое желание. За бутона RESET се ползва атрибута TYPE="reset". Останалите атрибути на RESET действат  аналогично с тези на SUBMIT.

---------------------------------------------------------------------------------------------------------------------------

   5. Можете да създадете формуляр във вид на многоредово поле с елемента <TEXTAREA>. Размера на полето се задава с атрибутите COLS и ROWSCOLS показва колко символа да е широко полето, в случая 30, а ROWS от колко реда да се състои, в случая 3. 
<HTML
<HEAD>
<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM >
<TEXTAREA ROWS=
"3" NAME="S1" COLS="30">textarea</TEXTAREA>
</FORM>
</BODY>
</HTML>
    Когато използвате елемента <TEXTAREA>, не се използва елемент <INPUT>. Текстът, който се намира между  <TEXTAREA> и </TEXTAREA>,  се показва по подразбиране в полето. Ако пропуснете текста полето ще се покаже празно.


 6. Последния тип формуляри, който ще ви покажа са падащите менюта. 

Такъв вид формуляри се създават с елемента <SELECT>. Вижте : 

 
    Кликнете с мишката върху стрелката надолу и ще се покаже меню с 3 избора, избор 1, избор 2 и избор 3. Стойностите, които да се показват в менюто се задават с елемента <OPTION>. Вижте HTML кода на горния пример :



   Атрибута SIZE на елемента <SELECT> задава броя на редовете, които да се показват в менюто. Когато SIZE="1", тогава се наблюдава т.нар. падащо меню. Ако зададете стойност по-голяма от 1, тогава вече ще се показва вертикална превъртаща лента. Вижте горното меню, само че със стойност SIZE="5" :




 Задача: Създаване на анкетна карта с HTML

Създайте уеб страница, която съдържа анкетна карта на тема „Свободно време и интереси на учениците“. Анкетата трябва да бъде реализирана чрез HTML формуляр.

Изисквания:

  1. Добавете заглавие на анкетата.

  2. Формулярът трябва да съдържа:

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

    • Радиобутони за избор на един от няколко възможни отговора (например: „Колко често използваш компютър или телефон?“).

    • Кутии с отметки (checkbox) за избор на повече от един отговор (например: „С какво обичаш да се занимаваш в свободното време?“).

    • Падащ списък (select) за избор на един отговор (например: „Кой предмет в училище ти е най-интересен?“).

    • Бутон за изпращане на формуляра.

  3. Подредете елементите четливо и използвайте подходящи надписи към всяко поле.

  4. Запишете файла с име anketa.html.

Допълнителна задача:

  • Добавете кратък текст или изображение, свързано с темата на анкетата.

Анкета: „Свободно време и интереси на учениците“

1. Напишете вашето име или псевдоним:
(текстово поле)

2. В кой клас сте?
(падащ списък – 6., 7., 8., 9., 10., 11., 12. клас)

3. Колко често използвате компютър или телефон?
(радиобутони – изберете само един отговор)

  • Всеки ден

  • Няколко пъти седмично

  • Рядко

  • Почти никога

4. За какво най-често използвате интернет?
(кутии с отметки – може повече от един отговор)

  • Учене

  • Социални мрежи

  • Игри

  • Гледане на видеа

  • Комуникация с приятели

5. Колко часа на ден прекарвате онлайн?
(радиобутони)

  • Под 1 час

  • 1–2 часа

  • 3–4 часа

  • Над 4 часа

6. Кои дейности предпочитате в свободното си време?
(кутии с отметки)

  • Спорт

  • Четене

  • Рисуване / творчество

  • Игри

  • Разходки с приятели

7. Кой учебен предмет ви е най-интересен?
(падащ списък – примерни опции: Математика, Български език, Информационни технологии, История, Чужд език и др.)

8. Участвате ли в извънкласни дейности?
(радиобутони)

  • Да

  • Не

9. Как предпочитате да учите нови неща?
(кутии с отметки)

  • Чрез видео уроци

  • Чрез практика

  • Чрез четене

  • Чрез работа в екип

10. Напишете едно ваше любимо занимание или хоби:
(текстово поле / textarea)


вторник, 28 октомври 2025 г.

Тема 5. Създаване на графичен модел на уеб страница

 

Тема 5. Създаване на графичен модел на уеб страница

Създаването на графичен модел (mockup) на уеб страница включва определяне на нейния уеб дизайн и цветова схема, избор на шрифтове, изработване на графични компоненти въз основа на изработения схематичен дизайн (wireframe).

1. Използване на цветовете в уеб дизайна
  Изборът на правилната цветова схема за уеб сайт е комбинация от определяне на това какви цветове ще носят правилното послание към посетителите на сайта.
​   При изграждане на графичния дизайн трябва да се избере цветова гама, в която да се развият страниците на уеб сайта. Тя трябва да бъде съобразена с тематиката на сайта, да не е натрапчива и отблъскваща. Внимателният и балансиран подбор на цветовете може да създаде великолепна композиция, тъй като цветовете са първото нещо, което потребителите забелязват на страниците. За по-малките елементи трябва да се избират по-ярки цветове. Повечето дизайнери използват не повече от 3 - 4 цвята.
Връзката между цветовете може да се представи в кръгла диаграма с 12 цвята, наречена колело на цветовете.
Основните три цвята са:
  • червено
  • жълто
  • синьо
Комбинацията между основните три цвята дава трите второстепенни:
  • оранжево
  • зелено
  • лилаво
​Комбинацията между основни и второстепенни цветове дава спомагателните (допълнителни). Така комбинациите могат да продължават. Те са познати като чисти цветове.
Picture
Цветовете могат да се разделят на неутрални, топли и студени.
  • Неутрални цветове са бяло, черно и сиво (смес от бяло и черно). Те могат да участват във всяка цветова схема.
  • Топли са всички цветове, в чийто състав участват червено и жълто. Те се асоциират със слънцето и се смята, че са активни.
  • Студени цветове са всички, в чийто състав влиза синьото. Те се асоциират с водата и небето и се приемат за успокояващи.
Дванайсетте чисти цвята и техните вариации могат да се комбинират с неутралните. Това съчетание води до образуване на нови цветове, кои­то се наричат нюанси, сенки и тонове.
  • Нюанс е оттенък на чистия цвят, когато към него се добавя бяло. Тези цветове се наричат пастелни.
  • Сянка е оттенък на чистия цвят, когато към него се добавя черно.
  • Тонът е оттенък на чистия цвят, когато към него се добавят едновре­менно бяло и черно.
2. Видове цветови схеми:
a) Монохромна - използва вариации на един цвят. Тя създава успокояващ ефект, възприема се много лесно, особено ако е създадена на базата на зелените или сините цветове, прилага се лесно, изглежда балансира­но и привлекателно. При нея липсват акценти и контрасти.
б) Аналогична - използва цветове, които са в съседство. Един цвят се използва за основен, а другите допълват схемата.
Picture
в) Допълваща - използва два противоположни цвята от диагра­мата. Тази схема работи едновременно с топлите и студените цветове и създава хармонични контрасти.
Picture
г) Триъгълна - използва три цвята от диаграмата на цветовете, които са разположени на еднакви разстояния един от друг. Предлага ви­зуални контрасти, като е добре балансирана и богата на цветове.
Picture
Picture
д) Четириъгълна - използва че­тири цвята, подбрани в две допълващи се бройки. Предлага най-големи възмож­ности за цветови вариации, но е най-трудната схема за постигане на баланс и хармония.

3. Използване на шрифтове в уеб дизайна
Важен елемент при създаване на графичен модел на уеб страница е подборът на шрифтове. Шрифтът е не само средство за предаване на информация, но и художествен елемент, който взема пряко участие в изработката на дизайн на самия уеб сайт.
Picture
  • Типографията на уеб сайт не е само избор на шрифт, а набор от правила за форматиране на текста. Те се основават на начина, по който потребителят възприема текста в сайта.
  • Общата структура на текста в дизайна на уеб сайтове се нарича макротипография. Тази концепция включва: правилния избор на шрифтове и цвят на символите.
  • Интервалите между думите, разстоянията между редовете и други малки детайли са наричат микротипография. Целта е да се осигури лесна четимост на съдържанието.

а) основни категории:
  • серифни (serif) - с допълнителни графични елементи
  • несерифни (sans-se­rif) - без допълнителни графични елементи
Picture
Picture
Picture
Изисквания при избора на шрифт:
  • Трябва да се използват подходящи шрифтове. Препоръчват се Verda­na, Arial, Times New Roman, Tahoma, Helvetica. He се препоръчват прекалено големи размери на шрифтовете.
  • Подходящо е големината да бъде съобразена с размера на страни­цата, за да не изглежда шрифтът прекалено голям или прекалено дребен.
  • Не трябва да се използват повече от 2 - 3 шрифта, като едновремен­ната употреба на различни по стил шрифтове невинаги изглежда добре.
  • Добре е да се използват шрифтове от едно и също семейство с цел отделяне на основен текст и подтекст, вместо основният да бъде в получер/удебелен стил.
  • Важна е четливостта - трябва да се обръща внимание на детайлите, които да се четат леко и да не дразнят окото. Трябва да има съгласува­ност по отношение на стила и размерите на целия набор от символи, със­тавляващи шрифта.
  • В заглавията на модерните уеб сайтове все по-често се използват и артшрифтове, както и калиграфски/ръкописни шрифтове.
  • Когато шрифтът се слага върху фон с натоварено съдържание, той трябва да е удебелен, за да се чете лесно.
Picture
Интересно!
Списък на най-често срещаните цветове и как влияят на емоциите ни:
  • Червен е свързана с любов, страст, опасност, предупреждение, вълнение, храна, импулс, екшън, приключенски.
  • Син е свързан с доверието, успех, сериозност, спокойствие, сила, професионализъм.
  •  Зелен  цвят е свързано с пари, природата, животните , здраве, изцеление, живот, хармония.
  • Оранжев е свързано с комфорт, творчество, празник, забавление, младежта, достъпност.
  • Лилав е свързана с кралски особи, справедливост, неяснота, несигурност, лукс, фантазии, мечти.
  • Бял се свързва с невинност, чистота, простота.
  • Жълт е свързано с любопитство, игривост, бодрост, забавление.
  • Розов е свързано с мекота, сладост, невинност, младост, нежност.
  • Кафяв се свързва с пръст, природа, племенен, примитивен, простота.
  • Сив е неутрален цвят, безразличие, в добра хармония с всички останали цветове.
  • Черен се свързва със сериозност, тъмнина , мистерия, тайна.
  • Професионален инструмент Color калкулатор  - има готови решения на цветови схеми за работа с вашия основен цвят.
  • https://www.color-hex.com/popular-colors.php - Color Hex Color Codes - дава информация за цветовете, включително цветни модели (RGB, HSL, HSV и CMYK), триадни цветове, монохроматични цветове и аналогични цветове, изчислени в цветна страница. Color-hex.com също генерира прост css код за избрания цвят. Пробите от HTML елементи също са показани под страницата с подробности за цвета. Просто въведете 6 -цифрения цветен код в полето по-горе и натиснете enter.
  • Color.adobe.com е чудесна база данни на цветови схеми за уеб сайт
  • https://www.paletton.com/ - Paletton е онлайн инструмент за създаване на цветови комбинации и палитри от цветове, които изглеждат добре заедно.
Picture
Като разгледате основните етапи при създаване на графичния дизайн:
  • избор на цветова схема;
  • избор на шрифт;
  • графичен модел на страниците въз основа на схематичния дизайн на прототипа.
Изпълнете задачите!
Задача 1. Изберете подходяща цветова схема за графичния модел на проекта с помощта на онлайн инструмент:
  • изберете основен цвят на сайта;
  • изберете цветова схема - монохромна, аналогична, допълваща, триадична или тетрадична;
  • съхранете информацията в текстов документ за цветовете в RGB и шестнадесетичен код.
​Задача 2. Направете типография на бъдещия сайт Социален хъб. Изберете подходящи шрифтове, размери, стилове.
Задача 3. Създайте лого на проекта Социален хъб, като използвате възможностите на графичен редактор. Съобразете се с цветовата схема, която подбрахте за сайта.
Picture
Picture
Домашна работа
Задача 4. Като използвате подходящ инструмент, създайте графичен модел на сайт на проекта Социален хъб.
Спазвайте изискванията:
  • изберете размер: Web 1920х1080рх;
  • вмъкнете създаденото лого;
  • създайте хоризонтално меню, което съдържа навигационни бутони: Начало, За нас, Партньори, Контакти;
  • добавете в заглавната част на страницата (header) поле за търсене и добавете икони за социалните мрежи Linkedin, Facebook и Instagram.

вторник, 7 октомври 2025 г.

Тема 2. Избор на име и регистриране на уеб сайт

 Етапите, през които трябва да преминете, за да регистрирате своя уеб сайт в интернет, включват:

  • избор на организация, която предлага услугата уеб хостинг
  • избор на домейн на уеб сайта
  • същинско публикуване
  • управление на съдържанието на сайта с уеб сървър.
1. IP адрес 
  • ​Xocm (host) е компютър, свързан към компютърна мрежа, който предос­тавя информационни ресурси, услуги и приложения.
  • IP адрес е уникален адрес на хост, чрез който той се идентифицира пред останалите компютри в мрежата. Това позволява на компютрите да обменят информация помежду си.
Използват се две версии:
IPv4 - образуван от четири числа (от 0 до 255), разделени с точка.
IPv6 - образуван от 8 числа (от 0 до 65 535 в 16-ичен код), разделени с двоеточие.
2. Унифициран локатор на ресурси
Всяка уеб страница, както и всеки ресурс (например: файл, изображение, аудио или видео), има уни­кален URL адрес (Uniform Resource Locator).
URL адресът се състои от следните основни части:
  • име на протокола, който ще се използва за транспортиране на уеб страницата или на ресурса в глобалната мрежа (например: http, https, ftp);
  • име на домейна (например: www.government.bg,google.com).;
  • път до директорията на уеб сървъра, в която се намира ресурсът (например: /bg/content/);
  • име и файлов формат на ресурса.
Picture
Задача 1. Определете основните части в следния примерен URL адрес:
 https:// www.mon.bg/upload/18365/ profil-IT.pdf
  • Протокол:......       
  • Домейн:.........        
  • Път до ресурса:...
  • Име на файла:...
  • Файлов формат:....                                                                    
3. Система за имена на доменни
Домейн - името, с което ще се вижда уеб сайт, когато бъде пуб­ликуван в интернет

Система за имена на домейните (Domain Name System, DNS) представлява разпределена база данни, с чиято помощ се осъществява преобразуването на имената на хостовете в IP адреси. 
a) DNS сървъри за домейни от първо ниво (Top-Level Domains, TLD) - напри­мер: .com, .org и .edu и домейни на държавно ниВо (Country-Level Domains) - .bg (за България), .ru (за Русия), .fr(за Франция) и .eu (за Европа).
б) DNS сървъри за домейни от второ ниво или регистрирани (главни) домейни (Registered Domains) - например: mon.bg google.com и klett.bg.
в) DNS сървъри за домейни от трето ниво или поддомейаи (Subdomains) - priem.mon.bg,  sales.anubis-bulvest.com.
Имената на поддомейните се определят и администрират от собствениците на съответ­ните главни домейни.
Пример: Сайт на НХГ -  ​http://nhg-blg.com/ ;  Поддомейнmusic.nhg-blg.com
Къде се хоства сайтът на вашето училище?
Задача. С помощта на сайта whois.com проверете публичната информация на три избрани от вас домейна.
4. Регистрация на домейн
При регистрация на домейн се извършват следните стъпки:
  • Избирате свободен домейн.
  • Избирате платформа за наемане на домейн.
  • Избирате период за наемане.
  • Заплащате таксата.
Когато искаме да регистрираме име за сайт, първо трябва да прове­рим дали то не е вече заето.
За тази цел можем да ползваме услугите на регистратор на домейни: 
5. Хостинг и видове хостинг услуги:
Уеб хостинг - е услуга, която позволява да качите  сайта си на сървър, така че да е видим за посетителите. 
Видове хостин услуги:
  • Споделен хостиг (shared hosting) - при него на един сървър има определен брой потребители (уеб сайтове), които си поделят изчисли­телните му ресурси, дисковото пространство и инсталираните софтуерни приложения. Всеки потребител получава отделна сметка с определени параметри (дисково пространство, реализиран трафик, бази данни и др.). За управление на сметката се използва софтуер за автоматизация на уеб сървъри, който се нарича контролен панел. Контролният панел позволя­ва на потребителите да управляват различните услуги.
  • Имейл хостинг (e-mail hosting) - използва се за електронна поща. Чрез този тип хостинг потребителят може да избегне ползването на услу­гите на безплатните уеб пощи в интернет. При този тип хостинг потреби­телят избягва прикачването на рекламни послания към своите писма. Има възможност за създаване на множество пощенски кутии с едно и съ­що име на домейн.
  • Файлов хостинг (file hosting) - той е подобен на споделения уеб хос­тинг, но за разлика от него на сървъра не се разполагат уеб сайтове и уеб приложения, а се съхраняват файлове. Неговото предимство е надеждно­то съхранение на информация и възможността тя да бъде достъпна от всеки един компютър в интернет с подходяща скорост. Най-често се из­ползва за съхранение и архивиране на големи масиви от данни.
  • Посветен хостинг (dedicated hosting) - при него клиентските прило­жения не споделят ресурсите на сървъра с други приложения на други потребители. Сървърът ползва пълния капацитет на предоставената ли­ния към интернет. По този начин дадено приложение ползва целия хар­дуерен ресурс на сървъра, на който е разположено, системните настрой­ки са изцяло съобразени и оптимизирани според потребностите му, а потребителят има пълен контрол върху сървъра.
  • Виртуален хостинг - при него един физически сървър се разделя на няколко независими виртуални сървъра. Той може да се разглежда като посветен хостинг, защото на него се инсталира отделна операционна сис­тема според нуждите на клиента, която поддържа приложения само на определен клиент. Настройките на сървъра са максимално оптимизира­ни за работата на конкретното приложение и ресурсите, които то може да използва, са повече от предоставяните при споделен хостинг.
  • Облачен хостинг (cloud hosting) - при него услугите се извършват от облак (инфраструктура от сървъри, които може да са с различна локация). За облачен хостинг може се счита услуга, която отговаря на следни­те условия: изградена е от група от сървъри, които обединяват изчисли­телните си ресурси; използва автоматизирана система за балансиране на натоварването; има излишък на ресурси (памет, дисково място и проце­сорно време); достъпна е винаги когато потребителите й се нуждаят от повече натоварване; има динамично променливи ресурси и системата от сървъри ги разпределя веднага автоматично; при заявка на потребителя позволява безпроблемно увеличаване и намаляване на използваните обеми.
6. Характеристика на уеб хостинг
  • Скорост - оказва влияние на бързината на зареждане на уеб сайта или приложението (Mbit/s или Gbit/s). Ако хостингът се разполага на сър­въри със SSD устройство и физическата локация на мястото за управление е близо до посетителите, тогава скоростта ще бъде по-голяма.
  • Свързаност - количество данни, което физически може да бъде из­пратено през съответната мрежа, кабел от сайта към крайните потреби­тели за точно определен времеви период.
  • Съхранение на данни - количеството пространство, на което се съх­раняват елементите на уеб сайта или приложението (в GB или ТВ). Колкото повече информация има (изображения, видеа, музикални файлове), толкова по-голямо хостинг пространство ще е необходимо.
  • Скалируемост - възможността за повишаване на ресурсите на уеб сървъра при нужда (ъпгрейд или скалиране).
  • Контролен панел - платформа, чрез която се управлява уеб хостин­гът. Чрез нея се създават възможности за създаване на резервно копие на компютърните данни (бекъп), инсталиране на приложения, възмож­ност за обмен на файлове (FTP достъп), повишаване на защитата и др.
  • Поддръжка - наличие на системен администратор, който постоянно наблюдава процеса на работа и може да отстрани даден проблем.