Кратко въведение в HTML
HTML е език за текстообработка, който казва на браузера, как да покаже текста и как да подреди елементите на екрана. За създаването на динамични учебни материали са необходими минимални познания по HTML.
Основни принципи и понятия
Програмите, с които сърфираме в Интернет се наричат браузери. По-известните от тях са Internet Explorer, Mozilla Firefox, Safari и Opera. Общото между тези програми е, че те разбират “езика“ HTML. HTML просто описва страницата и казва на браузера как да разположи текста, картинките и другите елементи на екрана. HTML-файловете могат да се пишат с обикновения едитор (Editor) на Windows или с Microsoft FrontPage от Microsoft Office. Предимството на Microsoft FrontPage е, че оцветява думите от езика HTML.
HTML-файловете се съхраняват с разширението .html.
Елементите на езика HTML се поставят в ъгловати скоби
<дума от езика>,
за да се различат от текста, който трябва да бъде визуализиран на екрана. Думите, поставени в ъгловати скоби се наричат тагове.Таговете биват двойни и единични.
- Двойните тагове имат начало и край, като края се маркира с знака
"/". Общият вид на един двоен таг е
<таг параметри>Текст за форматиране</таг>
Например, тагът <b></b> служи за удебеляване на текст. Когатo напишем<b>удебелен текст</b>
браузерът извежда на екранаудебелен текст
- Общият вид на единичните тагове е
<таг параметри>
Например тагът <br> служи за обозначаване на празен ред.
Забележка: Между началото и края на двойните тагове е възможно освен текст да се пишат и други двойни или единични тагове.
Коментарите в HTML започват с <!-- и завършват с --> .
Структура на HTML документите
Тагът <html> маркира началото на HTML документите, а </html> края. HTML документите се състоят обикновено от две части head и body.
- Частта head започва с <head> и завършва с </head>. Тя съдържа заглавието на страницата, което излиза най-горе от ляво в заглавната ивица на браузера, както и различна информация, която не се извeжда на екрана.
- Частта body започва с <body> и завършва с </body>. Тя съдържа същинската част от HTML документа, която се извeжда на екрана.
В случай, че head бъде пропусната, браузерът интепретира цялата информация между <html> и </html>, като body и я извежда на екрана.
Частта head
Заглавието на страницата, което излиза най-горе от ляво в заглавната ивица на браузера се изписва с тагa <title ></title >.
Допълнителната информация, съдържаща се в частта head, може да бъде различна по вид. За създаването на динамични учебни страници на Вас ще Ви бъдат необходими следните 2 реда
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
Те указват на браузера да използва набора от знаци windows-1251 и да показва съдържанието на български език.
Пример 1:
Виж как изглежда примера (Обърни внимание на заглавието в най-горния ляв ъгъл на браузера.)
<html>
<head></html>
<title >ПРИМЕР 1</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
</body>
Частта body
- Параграфи.
- left за ляво подравняване,
- right за дясно подравняване,
- center за центриране,
- justify двустранно подравняване.
- Заглавия.
- Списъци.
- Прикачване на картинки (графики).
- Вашите HTML-файл primer.html и желаната картинка kartinka.jpg се намират в една и съща директория. В този случай за прикачването на картинката е достатъчно да напишете само името ѝ.
- kartinka.jpg е в поддиректория poddirektoria, намираща се в директорията на primer.html. В този случай се записва и името на директорията пред името на картинката:
- primer.html е в поддиректория poddirektoria, намираща се в директорията на kartinka.jpg. В този случай се излиза с ../ от поддиректорията:
- Главната директория glavna_direktoria е с две поддиректории parva и vtora. primer.html e в поддиректория parva, а kartinka.jpg във vtora. В този случай трябва първо да излезете от поддиректория parva с ../ и да после да влезете в поддиректория vtora:
- Главната директория glavna_direktoria е с две поддиректории parva и vtora. В поддиректория parva има още една поддиректория parva_prim и в нея се намира primer.html, а kartinka.jpg е в поддиректория vtora. В този случай трябва първо да излезете от поддиректория parva_prim с ../, след това излизате отново с ../ от поддиректория parva и влизате в поддиректория vtora:
Параграфите в HTML се означават с тага <p></p>
Пример 2:
<html>
<head></html>
<title >ПРИМЕР 2</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</body>
Един от основните параметри на тага <p></p> е align. align задава начина на подравняване. Неговите стойности могат да бъдат:
Пример 3:
<html>
<head></html>
<title >ПРИМЕР 3</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<p align="left">Параграф 1</p>
<p align="center">Параграф 2</p>
<p align="right">Параграф 3</p>
<p align="justify">Какво е математика? Математика е ако в един автобус с 5 човека на първата спирка слязат 8, на следващата трябва да се качат 3-ма, за да се изпразни автобуса.</p>
</body>
Заглавията се означават с таговете <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> и <h6></h6>. Числата оказват нивото на заглавието.
Пример 4:
<html>
<head></html>
<title >ПРИМЕР 4</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<h1>Заглавие от ниво h1</h1>
<p align="justify">...математиката може да се дефинира като предмет, при който никога не знаем за какво говорим и дали онова, което казваме, е вярно. (Б. Ръсел)</p>
<h2>Заглавие от ниво h2</h2>
<p align="justify">Общо взето, математиката е в основата си наука за очевидните от само себе си неща. (Ф. Клайн)</p>
<h3>Заглавие от ниво h3</h3>
<p align="justify">Недостоен се нарича онзи човек, който не знае факта, че диагоналът на квадрата е несъизмерим със страната му. (Платон)</p>
<h4>Заглавие от ниво h4</h4>
<p align="justify">КМатематиката е една от най-старите науки; тя също е и една от най-дейните, понеже нейната сила е в младежката ѝ чар. (А. Форсайт)</p>
<h5>Заглавие от ниво h5</h5>
<p align="justify">Всички хвалят несравнимата мощ на математическия метод, но всички съзнават и неговата с нищо несравнима непопулярност. (Й. Розанес)</p>
<h6>Заглавие от ниво h6</h6>
<p align="justify">Кое е точното в математиката освен точността? И не е ли това последица от вътешното чувство за истинност? (Гьоте)</p>
</body>
Параметърът align може да бъде използван и за заглавията по същия начин, както при параграфите.
Списъците в HTML могат да бъдат номерирани или неномерирани. Тагът за номериран списък е <ol></ol>, а за неномериран <ul></ul>. И в двата случая елементите на списъка се задават с тага <li></li>.
Пример 5:
<html>
<head></html>
<title >ПРИМЕР 5</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<h1>Номериран списък</h1>
<ol>
<li>Първи елемент от списъка</li></ol>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
<h1>Неномериран списък</h1>
<ul>
<li>Първи елемент от списъка</li></ul>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</body>
Картинките в HTML се прикачват с едничния таг <img>, който притежава няколко параметъра, два от които са задължителни: src и alt. С параметъра src се задава желаната картинка, а в alt се дава кратко описание на картинката, което се появява в случай, че картинката не бъде визуализирана от браузера. При задаването на картинката е важно да се напише точния път до нея. Нека разгледаме няколко теоретични примера.
<img src="kartinka.jpg" alt="Графика">
<img src="poddirektoria/kartinka.jpg" alt="Графика">
<img src="../kartinka.jpg" alt="Графика">
<img src="../vtora/kartinka.jpg" alt="Графика">
<img src="../../vtora/kartinka.jpg" alt="Графика">
Други важни параметри на <img> са размерите на картинката, които се задават с width и height. В width се пише ширината, а в height височината на картинката в пиксели. В случай, че размерите на картинката не са Ви известни, просто поставете курсора на мишката върху името ѝ и на екрана автоматично ще се появи необходимата Ви информация. Също така, докато курсорът на мишката е все още върху името на картинката, натиснете десния бутон и отидете на "Информация за файла", там също са изписани размерите. Ако зададете по-малки размери за визуализиране от реалните размери на картинката, браузерът автоматично ще намали картинката (внимавайте за пропорциите!). Използването на тези параметри не е задължително, но е желателно за по-бързото отваряне на страницата.
Пример 6:
Сзъдавам динамична конструкция с GEONExT. Намалявам чертежната повърхност до размери 300 на 300 пиксела. (За целта натискам средното бутонче в горния десен ъгъл на чертежната повърхност, поставям мишката върху дясната гранична линия на вече намалената чертежната повърхност, курсорът се превръща в двупосочна стрелка, започвам да дърпам стрелката в желаната посока, следейки стойността на ширината в долния ляв ъгъл на чертежната повърхност. Щом получа желаната стойност спирам. Поставям мишката върху долната гранична линия на чертежната повърхност и повтарям действията до достигане на желаната височина. С 
центрирам динамичната конструкция върху намалената чертежна повърхност.) Експортирам динамичната графика като картинка във формат png (Файл->Експортирай->PNG) и я запазвам в папка img под името primer6.png. При експортирането ширината се запазва, но GEONExT прибавя към височината около 19 пиксела и новополучената картинка е с размери 300 х 319 пиксела. Нека разгледаме няколко варианта на прикачване на картинката с различни ширини и височини:
<html>
<head></html>
<title>ПРИМЕР 6</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<p align="center">Прикачване с оригиналните размери 300 х 319 пиксела</p></body>
<p align="center"><img src="img/primer6.png" width="300" height="319"></p>
<p align="center">Прикачване с по-малки размери 150 х 160 пиксела</p>
<p align="center"><img src="img/primer6.png" width="150" height="160"></p>
<p align="center">Прикачване с по-големи размери 500 х 532 пиксела</p>
<p align="center"><img src="img/primer6.png" width="500" height="532"></p>
Прикачването на линкове към други страници се извършва с тага <a></a>, като с параметъра href се задава пътя до съответния файл. Правилата за влизане и излизане от директории са аналогични на тези за прикачването на картинки. При прикачването на линк към страница в Интернет в href се пише целия адрес на страницата с http:// отпред. Ако желаете линкът да се отвори в нов прозорец, напишете параметъра target със стойност "_blank". Между <a> и </a> се пише името на линка, вместо име може да се сложи и картинка.
Пример 7:
<html>
<head></html>
<title>ПРИМЕР 7</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<p align="left">Прикачване на линк към страница в Интернет</p></body>
<p align="left"><а href="http://geonext.uni-bayreuth.de/index.php?id=2453" target="_blank">Отвори страницата на GEONExT</а></p>
<p align="left">Прикачване на линк от същата директория</p>
<p align="left"><а href="primer6.html" target="_blank">Отвори предишния пример</а></p>
<p align="left">Прикачване на линк от друга директория</p>
<p align="left"><а href="../content/Seite1.html" >Върни се на страницата с въведението в HTML</а></p>
>Формати за представянето на текст. Освен тагът <b></b> за удебеляване на текст, съществуват и таговете за наклонен текст <i></i> и за подчертан текст <u></u>. Тези тагове могат да се комбинират без ограничения. Единичния таг <br> е за празен ред.
Пример 8:
<html>
<head></html>
<title >ПРИМЕР 2</title ></head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<body>
<p><b>Удебелен текст</b></p>
<br>
<p><i>Наклонен текст</i></p>
<br>
<p><u>Подчертан текст</u></p>
<br>
<p><b><u>Удебелен и подчертан текст</u></b></p>
<br>
<p><b><i>Удебелен и наклонен текст</i></b></p>
</body>