Уроци по HTML

Понятие

HTML (Hypertext Markup Language) е текстбазиран маркиращ (компютърен) език за структуриране на съдържание като текст, снимки, хиперлинкове в документи. HTML документите са в основата на world wide web и биват изобразени чрез уеб браузър (като Mozilla Firefox, Internet Explorer, Opera и др.) .

Подготовка

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

* Linux: В повечето случаи Линукс потребителите са направили вече своя избор, аз бих препоръчал 3 едитора с които до сега съм работил доста добре - gedit (стандартния едитор на графичната среда gnome) - обикновенно го има във всяка gnome дистрибуция на линукс, geany - доста добър и ефикасен едитор, ползвах го за програмиране на Perl, но поддържа още няколко езика можете да го свалите или от официялния сайт или от репозиторито/хранилището в зависимост от дистрибуцията ви. Това което ме приближи още една крачка до линукс е Aptana Studio, едитор който има Code Prediction което ще рече, че подържа предсказване на текста, следи за грешки в синтаксиса и разпознава css класове. Подробно инсталиране на Aptana Studio под Ubuntu можете да намерите на уикито на Владимир Колев.

* Windows: За едитор под Windows можете да използвате и обикновенния едитор (notepad), което аз лично не бих препоръчал поради ред причини, за повечето от които можете сами да се сетите 8-) . Бих ви препоръчал notepad++ който е безплатен и поддържа highlights на ред езици по програмиране, освен това е лесен за използване особено при едновременна обработка на повече файлове. Друг вариянт е известният Dreamweaver, който е сравнително по-тежък от notepad++ , но с доста повече функции включително Code Prediction, което ще рече, че подържа предсказване на текста, следи за грешки в синтаксиса и разпознава css класове, недостатък е, че е комерсиялен.

След като сте си избрали вече едитор можем да продължим с урока.

Първи стъпки

Често, когато някой иска да се захваща с програмиране първият въпрос е “От къде да започна?”. Тук добрата новина е че при HTML на този въпрос може да се отговори много бързо, или нека първо да създадем първата си html страница:

1) Направете нов текстов документ/файл (десния бутон→нов→текстов документ)

2) Преименувайте файла на index.html (Защо index.html? Началната страница на почти всеки сайт в интернет се казва index.html, index.htm или index.php, Най-често от него се “тръгва” към останалите html файлове )

3) Отворете файла с Mozilla Firefox или Internet Explorer.

ГОТОВО!? :)

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

Здравей свят

Нека да погледнем как изглежда структурата на един HTML файл:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Opisanie na stranicata</title>
</head>
<body>
 
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

може да е на пръв поглед малко объркващ. Според правилата на SGML- или XML-базираните метаезици за програмиране един HTML файл е едва тогава валиден (valide), когато притежава определен тип на документа. Понеже HTML има дълга история и различни версии затова трябва да бъде деклариран типа на документа. За сега не искам да се задълбочавам в декларирането на вид документ, затова нека да продължим със самия html код:

<html>Zdravej sviat!</html>

Когато въведете само този код във файла получавате вече текста “Zdravej sviat!” в браузера. Разбира се вместо “Zdravej sviat!” можете да напишете каквото желате, то ще излезе като текст в браузъра. Самият код се нарича тагове - с таговете

<html> и </html>

оформяте началото и края на един HTML-документ.

Сега трябва да вмъкнем и заглавие(главата) на документа с таговете

<head> и </head>

. В главата(head) на документа се декларират особеностите на един сайт, например - заглавие, автор, кодировка за езика, който ще бъде използван в сайта и др, Заглавието на страницата което се намира между тези тагове - тоест:

<head> <title>Zaglavie na stranicata!</title> </head>

се показва горе на лайсната на броузера и при отворен нов таг, на практика изглежда така:

Ето и какъв е кода на вмъкването на едно заглавие “Zaglavie na stranicata!” в html-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<title>Zaglavie na stranicata!</title>
</head>
 
</html>

Разбира се тук няма да излезе заглавието “Тончопедия” ами “Zaglavie na stranicata!” като заглавие на страницата :)

Самата страница, или “тялото”(body) на страницата се оформя с таговете

<body> и </body>

така, че един готов html код би изглеждал така:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<title>Zaglavie na stranicata!</title>
</head>
 
<body></body>
 
</html>

Може би вече ви направи впечатление, че първия таг който се отвори, трябва да бъде затворен последен? Това е правило в HTML . За да е малко по-прегледно, ще поясня с един пример:

Имаме тагове html /html head /head body /body title /title Оформянето прилича на кутии които поставяме една в друга - тоест html е най-голямата в нея поставаме head и body и title поставяме вътре в head: Начало - | | || | | | | - Край Или сега малко по-подробно с коментари:

Началото на HTML документа:
html
Началото на главата:
head
Заглавието:
title
Между двете "title" идва заглавието
/title
Тук посочваме края на главата:
/head
Тук започва тялото на сайта:
body
Тук идва кода на самата страница - или това е тялото и затваряме тялото с:
/body
И накрая затваряме HTML документа:
/html

И понеже всичко което се изобразява на сайта се пише в body, дългоочакваният ни “Zdravej swqt!” би изглеждал така:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<title>Zaglavie na stranicata!</title>
</head>
 
<body>
"Zdravej swqt!"
</body>
 
</html>

С това имаме първия си “готов” Уеб-сайт 8-)

/home/ton4evc/public_html/tonchopedia/data/pages/програмиране/html.txt · Последна промяна: 2009/04/24 19:18 от admin
Към началото
GNU Free Documentation License 1.2 chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0