Най-четените учебни материали
Най-новите учебни материали
***ДОСТЪП ДО САЙТА***
ДО МОМЕНТА НИ ПОСЕТИХА НАД 2 500 000 ПОТРЕБИТЕЛИ
БЕЗПЛАТНИТЕ УЧЕБНИ МАТЕРИАЛИ ПРИ НАС СА НАД 7 700
Ако сме Ви били полезни, моля да изпратите SMS с текст STG на номер 1092. Цената на SMS е 2,40 лв. с ДДС.
Вашият СМС ще допринесе за обогатяване съдържанието на сайта.
SMS Login
За да използвате ПЪЛНОТО съдържание на сайта изпратете SMS с текст STG на номер 1092 (обща стойност 2.40лв.)| 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 броузера знае как да интерпретира и показва на екрана. URI URI (Uniform Resourse Identifier) -универсален идентификатор на ресурси или URL (Uniform Resourse Locator) служи за намиране на необходимата информация в WWW. Идентификаторът може да има следните форми: Tags Елементите на HTML се наричат маркери (tags). Името на маркера подсказва за какво служи. Маркерите обикновено са по двойки – начален и краен маркер. Между тях се поставя текст. Резултатът от това маркиране е видим после в броузера. Има и единични маркери, които имат само начален маркер. Синтаксисът на маркерите обикновено е следния: 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 . Резултата от работата си можем да видим в броузер. GIF, JPG Най-разпространените формати за файлове с графики в мрежата са Graphics Interchange Format и Joint Photographic Expert Group. Файловете с картини имат разширения съответно .gif и .jpg *What is* Ако искате да разберете какво означава някое популярно компютърно съкращение или термин, посетете: http://whatis.com/ В настоящия курс ще се придържаме към спецификацията HTML 3.2. Ще покажем как се създава web страница и малък web site – съвкупност от свързани помежду си web страници. Въпросите за това как се показва web страница на света, какво е стилна web страница и какво е web design предполагат отделно, по-обстойно разглеждане. Начало<-- -->2. Основни елементи на HTML 2. Основни елементи За да започнете работа с документ от тип HTML е необходимо да посочите тип на документа чрез маркерите: Всеки HTML документ се състои от две основни части – заглавна и същинска част (тяло). Заглавна част Заглавната част съдържа описателна информация - заглавие, автор, ключови думи, кодиране на страницата, което е важно за документи със съдържание на български език и др. За оформяне заглавната част на документа е необходимо да използвате маркерите: Заглавието на документа се оформя чрез маркерите: Автор може да се посочи чрез: Най-разпространената кодова таблица за буквите на българската азбука е windows-1251. Задаването на кодирането става чрез маркера: Същинска част Същинската част на документ се задава чрез маркерите: Задаването на цвят на фона на HTML документа става чрез допълнителната опция в маркера BODY: Можете да използвате готова картина като фон на страницата: Можете да направите и комбинация от фонов цвят и картина за фон. Фоновият цвят ще се появи за секунди преди картината. Чрез следващите опции в маркера BODY можете да зададете цвета на текста - опция TEXT, на връзките към други документи - опция LINK, на активните в момента връзки опция ALINK и на вече посетените места в страницата - опция VLINK: Пример 1: Създайте файл с име school.html и следното съдържание:
Пример 2: Редактирайте файла school.html като добавите текста в червено:
1. Въведение<-- -->3. Структурно описание на документ 3. Структурно описание на документа HTML предлага два начина за оформяне на страниците – структурно и физическо. В този раздел ще разгледаме структурното описание на един документ чрез HTML. В даден документ може да имаме основна тема, обикновен текст и заглавия, както и друга информация, която показваме на отделно място. HTML предлага шест нива на отделяне на темите по важност. Ако искаме да посочим чрез големината на шрифта и разположението на текст, че е заглавие или основна тема в документ, използваме маркер за заглавие от първо ниво: За заглавията на подтемите използваме маркер за заглавие от второ ниво: Заглавията на под-(под-(под-))темите се поставят между маркерите за съответни нива от трето до шесто:
Заглавията по подразбиране се подравняват вляво. Чрез следните опции можем да подравняваме вдясно или да центрираме заглавията: Когато е необходимо част от текста да бъде с отместване навътре, се използват маркерите: За да наблегнем на част от текста можем да го маркираме с Ако искаме да наблегнем по-силно / текста да изпъква, използваме маркерите Когато искаме да вмъкнем цитат, ще го маркираме с Можем да посочим адресна информация (напр. адрес на автора) чрез маркерите: Пример 3: Редактирайте файла school.html, за да оформите реда с името на училището като центрирано заглавие от 1 ниво и да добавите подзаглавия: История на училището, Учебни програми, Приемни изпити, като добавите текста в червено:
В резултат на това маркиране на екрана може да се види: 2. Основни елементи на HTML<-- -->4. Разделители на текст 4. Разделители на текст Когато ни е необходимо да разделим текст в HTML страницата на абзаци, можем да използваме маркера: За подравняване на абзац вляво, центрирано или вдясно се задават опции в маркера : - може и да не се пише, защото по подразбиране винаги е вляво подравнено. За прекъсване на реда на определено място се използва: Ако искате да вмъкнете хоризонтална черта в текста, използвайте: Дължина на чертата може да се зададе като брой пиксели или в % от ширината на прозореца чрез опцията WIDTH в . Хоризонталната черта може да се подравни спрямо границите на текста вляво, вдясно или да се центрира, когато е по-къса чрез опцията ALIGN в . Дебелина на чертата в брой пиксели може да се зададе чрез опцията
е: Ако искате да сложите плътна черта, без триизмерна (3D) сянка, използвайте: Пример 4:Да дообогатим пример 3 с повече текст за историята на училището, разделен на абзаци, 3-те основни теми ще разделим с по 2 хоризонтални черти, датите за приемните изпити ще подравним в центъра. Ще използваме и картина като фон: Файл backgr.gif
На екрана можете да видите следното: 3. Структурно описание<-- -->5. Физическо оформяне на символи в текст 5. Физическо оформяне на символи в текст Маркерите за структурно оформяне създават структурата на документа, а самото показване зависи от броузера. Физическото оформяне е в зависимост от желанието на автора. Броузера показва това, което е определено. Маркерите за физическо оформяне са например за надебелени букви, наклонени букви, букви с определен цвят и шрифт. Ако непременно искаме да покажем текст с надебелени букви (получер), трябва да използваме:
За да покажем наклонен текст (курсив) е необходимо да напишем текста между маркерите: Можем да подчертаем текст чрез: Ако искаме да покажем, че в текста има корекции, можем да изполжаме маркерите за Шрифт като на пишеща машина се показва чрез: Горен индекс както в xi се оформя като i се пише между маркерите: Долен индекс както в xi се оформя като i се пише между маркерите: Предварително оформен текст в текстов редактор може да се покаже така както е бил оформен, ако се постави между маркерите: За подравняване в центъра може да се използват: За привличане вниманието кьм определена част от текста може да се поставят маркерите за мигане на текста: За определяне на базовия размер на шрифта в част от документа се използват маркерите: За размер на шрифта се посочва опцията Можем да променяме размера на шрифта относително - спрямо основния размер на буквите в целия документ чрез: Цвят на буквите може да се зададе чрез: Можем да изберем вида на шрифта чрез маркерите: Пример 5: Да създадем файл за историята на училището – history.html. Нека първите букви за всеки абзац са с по-голям от базовия размер и оцветени в червено. Резултатът ще е следния: 4. Разделители на текст<-- -->6. Графики 6. Графики За да покажем на екрана графика, картина или анимация, използваме единичния маркер: Можем да подравним графиката по горната линия на текста, долната или в средата чрез опцията ALIGN и съответните стойности: Можем да зададем какъв алтернативен текст да се покаже, ако не се вижда графиката: Размерите на графиката могат да се задават в брой пиксели (точки на екрана) чрез опциите WIDTH за ширината и HEIGHT за височината на графиката: Можете да оставите определено свободно място около графиката чрез опциите HSPACE за хоризонталното разстояние и VSPACE за вертикалното разстояние, чиито стойности са в брой пиксели. Рамка с определена ширина около графиката ще се появи, ако използвате опцията BORDER със стойност брой пиксели. В един маркер IMG можете да използвате комбинация от няколко или всичките опции. Например: Пример 6: Да добавим към файла с историята на училището и картина на Св.Св. Кирил и Методий, като редактираме файл history.html Файл cyrilmeth.gif 5. Физическо оформяне на символи<-- -->7. Списъци 7. Списъци Много често информацията, която имаме е добре да се покаже в списъчен вид с номера или без номера. HTML предлага следните маркери за неномериран (bulleted) списък: Маркер за нов елемент от списъка (и за номериран и за неномериран) се задава чрез: Вида на изброителя, който се поставя преди елементите за целия списък, се задава чрез опцията TYPE със стойности за запълнен кръг, празен кръг или квадрат съответно: Аналогично вид на изброителя може да се задава само на един елемент от списъка чрез опцията TYPE със съответните стойности: За да създадем номериран списък, е необходимо да използваме маркерите: Можем да зададем типа на изброителя за целия списък с опцията TYPE със стойности: A за големи букви, a за малки букви, I за големи римски цифри, i за малки римски цифри, 1 за арабски цифри. Ако не се използва TYPE, номерирането е с арабски цифри. Както и за неномерирания списък можем да задаваме вида на изброителя и само за един елемент на списъка: Ако искаме номерацията на списъка да залочва с номер различен от стандартното 1, можем да използваме опцията START, която има числена стойност: Можем да зададем номер на елемент чрез опцията VALUE с числена стойност: HTML предлага възможност за оформяне на специален вид списък с определения, които се появяват на екрана във форма подобна на подредбата в речник. Маркерите за създаване на такъв списък са: Пример 7: Да създадем файл teacher.html, който да съдържа номериран списък на преподавателите в училището. След това да добавим подсписъци на предметите, по които преподава всеки отделно. Резултатът изглежда така: Допълнение За да добавим подсписъци на всеки елемент е необходимо да направим т.нар. влагане на маркери. Спазва се правилото, че най-вътрешният маркер се затваря първи, след това следващите, като не се допуска прескачане. За по-лесно разграничаване съответната двойка маркери е с еднакъв отстъп навътре. Резултатът от маркирането с HTML ще е следния: 8. Таблици Често се налага да оформяме текст в таблица за по-голяма прегледност, за по-лесно сравняване на данните и т.н. HTML предлага следните маркери за създаване на таблица: Ако искаме да поставим външна рамка на таблицата, трябва да използваме опцията BORDER за ширина на рамката със стойност брой пиксели. Таблицата по подразбиране няма рамка. За да зададем разстояние между клетки в таблица, е необходима да използваме опцията CELLSPACING: За разстоянието между текст и рамка в клетка на таблица можем да използваме опцията CELLPADDING: По подразбиране между текста и рамката на клетката има 2 пиксела разстояние. Чрез този маркер можем да променяме това разстояние. По подразбиране таблицата е ширика колкото текущия прозорец. Можем да зададем в брой пиксели ширината на таблицата чрез опцията WIDTH, чиито стойности са в брой пиксели или в проценти от ширината на текущия прозорец: Чрез име на цвят или 16-ичен код в опцията BGCOLOR можем да зададем фоновия цвят на таблицата: По подразбиране таблицата се разполага вляво на прозореца. Чрез опцията ALIGN можем да зададем друго разположение върху екрана в зависимост от стойността – ляво, центрирано или дясно съответно: За създаване на нов ред в таблица служат маркерите: Всеки ред може да се подравнява хоризонтално и вертикално чрез опциите ALIGN и VALIGN Хоризонталното подравняване ALIGN има стойности вляво, центрирано или вдясно, а вертикалното подравняване VALIGN - в горната част, в средата или в долната част на клетките в реда. За създаване на клетка в таблица служат маркерите: Между тях се пишат данните в таблицата. Броя на такива двойки маркери определя и броя на колоните в таблицата. Аналогично на цял ред, можем да подравняваме текст само в конкретна клетка хоризонтално и вертикално: Текста между тях ще се появи почернен и центриран. За заглавните клетки можем да използваме същите опции както и за обикновените клитки – за подравняване, за фонов цвят и т.н. Заглавие на таблицата можем да напишем между маркерите: То може да се появи отгоре или отдолу на таблицата, ако зададем опцията ALIGN със съответните стойности:
Резултатът ще е следния: За осъществяване на най-важната функция - връзка към друг документ, HTML предлага следния маркер: Връзка към друго място За показване на резултата от щракване на връзката в отделен празен прозорец или именувана част на прозореца се използва опцията TARGET: Ако искаме да разделим условно документ, (обикновено дълъг), можем да наименоваме част от документа чрез маркерите: За задаване на връзка към определена част от документа, (мишена, оформена от ), се използва знак #, поставен преди името на мишената. Пример 9: Нека да оформим дългия файл school.html от Пример 3. като именуваме частите му и направим меню с връзки до тези части.
Резултатът от маркирането с HTML ще е следния: Пример 10: Нека да разделим файл school.html от предишния пример, като отделните секции в него сега да са връзки към различни файлове. history.html - за историята на училището, teachers.html - за списък на учителите, priem.html за дати за приемен изпит. Да добавим и връзка към адреса за електронна поща на училището с текст и картинка. Нека да има и връзка към адрес на друго училище. Да зададем и цветове на връзките – тъмнозелени, когато още не са посетени, ярко зелени – когато вече са посетени и червени при щракване. Т.е. вече имате малък web site с начална страница school.html и връзки към три файла, към външен адрес и към електронна поща.
Резултатът e: 10. Карет Развитието на езика HTML предлага нови възможности за оформлението на екрана за показване на повече документи едновременно на екрана. Например може да имаме следното разделяне на екрана: отляво документ с меню от връзки и отдясно да се показват съответните на връзките документи. Частите на екрана, на които се разделя се наричат карета (frames). Подреждането на екрана изглежда почти аналогично на подреждането, което би се получило чрез таблици. Предимството на каретата е, че могат да се използват различни файлове. За да опишем какво искаме, ни е необходим още един файл, който показва на броузера как точно да става това разделяне и как да се появяват на екрана съответните документи. Създаването на карета става чрез маркерите: За да опишем колко на брой реда ни трябват, се използва опцията ROWS: За да опишем колоните за всеки ред използваме опцията COLS: Можем да зададем ширина на рамка около каретата чрез опцията BORDER, чийто стойности са в брой пиксели. Задаване на име на файл, който ще се появи в съответното каре става чрез маркера: Всяко каре може да си има собствено име, което се задава чрез опцията NAME: Чрез допълнителните опции SCROLLING (със стойности yes, no, или auto) и NORESIZE могат да се задават съответно дали да има или не ивиците за прелистване (scrollbars) и изрично да не се променя размера на карето. Тъй като има все още броузери, които не разпознават маркерите за карета, можете да опишете текст, който да се появи тогава между маркерите: Пример 11: Да създадем файл frames.html, който да описва следното разделяне на екрана на карета: Файл frames.html за описание на разделянето изглежда така:
Файл school.html е модифициран по следния начин:
Ето какъв ще бъде резултата при щракване на връзката “Приемни изпити” За следното разделяне на екрана имаме следния код:
В конкретния случай имаме най-напред два реда, в първия слагаме файл title.html, a втория се разделя на две колони, в които слагаме файловете school.html и history.html. В днешно време често се налага да попълваме формуляри. HTML предлага начини за създаване на форма (образец) за попълване от потребителите. Обрабогката на данните, въведени в тези форми, става чрез програми, написани на CGI (Common Gateway Interface) езици за програмиране като Perl, C/C++, TCL, AppleScript. Тези програми стоят на web server и оттам се изпълняват. Задаване на форма може да стане чрез маркерите: Между тези маркери можете да използвате и всички останали маркери на HTML, както и специалните за елементите на формата. Ако искаме да знаем коя форма ще обработваме, можем да й зададем име чрез опцията NAME: Можем да зададем как да се обработят въвежданите данни във формата чрез опциите ACTION и METHOD: |
|||||||||||||||||||||||||||||||||||||||||||||||||||
и 
