HTML-ЕЗИК! ЗА НАЧИНАЕЩИ



 
 
 
 
 
 

Какво всъщност е HTML
Хоризонтална линия
Параграф
Графика в WEB
Нов Ред
Вмъкване на картинки
Форматиране на текст
Вмъкване на звуков файл
Форматиране на таблици
Хипервръзки (links)
Инструкции
e-mail link

HTML е лесен за научаване език, с който се създават сайтовете в Internet. Съществуват и WYSIWYG (What You See Is What You Get) програми като Microsoft FrontPage i Netscape Composer, които са на принципа да виждаш каквото правиш, както ще излезе в Browsera. Тези програми са напълно достатъчни за направата на една съвсем непретенциозна лична страница. Но като дойде времето да се сложи първият JavaScript или Java Applet идва проблема, че тези програми немогат да вграждат такива компоненти и вие трябва да ги сложите ръчно с някой обикновен текстов редактор като Notepad например. Ето защо си заслужава да се научи същността на HTML кода. А и при следващото редактиране във Front Page или Composer няма гаранция, че новодобавените скриптове ще работят, защото WYSIWYG програмите променят кода както те намерят за добре. Плюс това при тях големината на файла не е оптимизирана, но ако сте се захванали с обикновена (елементарна) лична страница, това не е достатъчно основание да започнете да пишете HTML кода ръчно. Ако решихте да го изучите .... ето най-важното:.

Какво всъщност е HTML

HTML ( Hypertext Markup Language ) е основното средство за създаване на WEB страници в INTERNET. Този ХиперТакст се разглежда и визуализира от браузерите. Най популярните такива са Microsoft Internet Explorer и Netscape Navigator. Разширенията на HTML са .htm и .html . По принцип имената на файловете трябва да са само от латински букви, цифри и _.
Всеки документ започва с:
<HTML> Този етикет, поставян обикновенно в началото на документа, информира клиентите за това, че в документа се използва езикът HTML. Аналогично, крайният етикет </HTML> се поставя в края на документа.
<HEAD> Този етикет се поставя след етикета <HTML>и маркира неговата заглавната част на документа, която съдържа информация за документа. В заглавната част може да се включи основна информация, която например има отношение към заглавието. Крайният етикет </HEAD>маркира края на заглавието на документа.
<TITLE> Тук пишем името на документа </TITLE> Всеки документ трябва да съдържа една двойка етикети <TITLE> и </TITLE> в заглавната част на документа(между етикетите<HEAD> и</HEAD>). Използвайки такъв етикет, вие посочвате името на документа, което не трябва да надвишава 64 символа. При преглеждане на документа, браузерът извежда неговото име в заглавната част на своя прозорец.
</HEAD>
<BODY>
Тук пишем самият документ. Този етикет посочва началото на основният текст на документа. Обикновенно между етикетите <BODY> и</BODY> се разполагат други етикети на HTML, който дефинират заглавия, параграфи, списаци и други.
Етикетът <BODY> може да има следните атрибути:
bgcolor=  определя фона на докумета
text= цвят на текста
link= цвят на линковете
vlink= цвят на посетен линк
След символа"=" се пише код на съответният цвят
Цветовете се кодират с т.нар. хексадецимални кодове според т.нар. RGB схема, която е стандарт във Windows (R=RED, G=GREEN, B=BLUE) #RRGGBB.
Пример:
<body bgcolor=#000000 text=#FFFFFF link=#00FF00 vlink=#FF0000>
bgcolor=#000000 черен фон
text=#FFFFFF бял цвят на текста
link=#00FF00 зелен цвят на линковете
vlink=#FF0000> червен цвят на посетен линк
Първите две цифри в HEX кода са за червения цвят, средните две са за зеления цвят, а последните две за синия цвят. В хекс кодовете влизат цифри и букви от 0 (нула) до F (0 1 2 3 4 5 6 7 8 9 A B C D E F), където 0 (нула) е най-тъмният, а F е най-светлият цвят.
Друг атрибут е:
bakground определа картинка за фон
пример: ако искаме да сложим картинка за фон която е във файл с име "bg1.jpg" пишем следното:
< BODY bakground="bg1.jpg">  това важи само ако HTML-документа и картинката са в една директория, в противен случай пишем пълният адрес на картинката.

Горе
Параграф

Напишете <P>.
<P> не извършва никаква команда. Параграфа отговаря на две натискания на Enter в една текстообработваща програма и оставя просто един празен ред. Не забрабяме да затворим </P>

Горе
Нов Ред

Напишете <BR> за смяна на нов ред. Също като <P>, <BR> не е никаква команда и няма друга функция. Всеки <BR> е равносилен на едно натискане на Enter. Както винаги завършваме с </BR>

Горе
Форматиране на текст

Тези функции влиаят само на текста между <..> и </..>
<B> текст </B> - удебелява текста
 пример: <B> Борко</B> става на Борко
<I> текст </I> - прави текста ITALIC
 пример: <I> Борко</I> става на Борко
<U> текст <U> - подчертава текста
 пример: <U> Борко</U> става на Борко
<BIG> текст </BIG> - увеличава размера на шрифта
пример:<BIG> Борко </BIG> става на Борко
<SMALL> текст </SMALL> - намалява размера на шрифта.
пример:<SMALL> Борко </SMALL> става на Борко
Можем и да определим шрифт:
<FONT FACE = "името на шрифта" > текст </FONT>
Като в <FONT> освен "FACE" може да има и "COLOR"(определя цвета на текста) и "SIZE"(определя големината на текста като стойностите са от 1 до 7)
пример: ако искаме шрифт "Comic Sans MS", цвят червен, големина 5 и текст"Борко" пишем следното:<font face="Comic Sans MS" color="#FF0000"size=5>Борко</font> и става:
Борко
<MARQUEE>Текст</MARQUEE> Движещ се текст
Пример:<marquee>Пенчо</marquee> Става на:
Пенчо
 
 

Горе
Форматиране на таблици

<TABLE> ....... </TABLE> информация подредена в таблици.
BORDER =n задава дебелината на ограждащите линии в pixels.
WIDTH =n% указва ширината на таблицата в pixels или проценти от ширината на екрана.
SELLSPACING =n дава разстоянието в pixels между табличните елементи (клетките).
CELLPADDING =n е разстоянието в pixels между съдържанието на клетките и ограждащите линии.
Можем да зададем цвят за фон или картинка за фон съответно с:
"BGCOLOR"и "BACKGROUND"

Вътрешни за <TABLE> елементите:
<CAPTION> ....... </ CAPTION> дефинира заглавието на таблицата и може да се ползва с атрибута ALIGN: "top" , "bottom" , "left" , "rigth"
<TR> ...... </TR> дефинира ред на таблицата
На свой ред <TR> има следните вътрешни елементи:
<TH> ........ </TH> определя заглавие на таблична колона или ред
<TD> ........ </TD> отделя съдържанието на всяка незаглавна клетка.
<TR>, <TH>, <TD> могат да имат един от следните атрибути:
ALIGN ("center" , "left" и "rigth"), които определят как да се разполага съдържанието на клетките спрямо хоризонтала.
VALIGN = ("top", "middle", "bottom") спрямо вертикала.
BGCOLOR=
BACKGROUND=
Пример: искаме таблица с 3 реда и 4 колони, в която във всяка клетка да има число от 1 до 12 и да я именуваме "Таблица 1" и името да е в ценъра.
Пишем:<table BORDER COLS=4 WIDTH="100%" >
<CAPTION ALIGN= "top">Таблица 1</CAPTION>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td>
<td>10</td><td>11</td><td>12</td></tr></table> и се получава :
 
Таблица 1 
1 2 3 4
5 6 7 8
9 10 11 12

Горе
Инструкции
HTML се състои от инструкции, които изглеждат така: <име_на_елемент>. Началото на тези инструкций започва с <име_на_елемент> и завършва с </име_на_елемент>. Инструкцийте влиаят на текста между <.......> и </.......> и само на него. Елементи, които са без маркировка за край са празни и не влаят върху блока от документа.
<CENTER> текст </CENTER> - центрира блок от текст, изображение, таблица и т.н.

<BLOCKQUOTE> текст </BLOCKQUOTE> - указва на браузъра да тълкува текста като цитат
<UL> ......... </UL> - отбелязват начало и край на неномериран списък от многоредови параграфи. В него началото на всеки елемент от списъка започва с <LI>. При използване на този елемент браузерът маркира с определен символ началото на всеки параграф от списъка.
Например:<ul><li><font size=+2>Борко1</font></li><li><font size=+2>Борко2</font></li><li><font size=+2>Борко3</font></li></ul>
Става на:

<OL> ......... </OL> - изпълнява функциите на горния елемент, като началото на параграфите не се маркират със символи, а се номерират. В него началото на всеки елемент също започва с <LI>
Например:<ol><li><font size=+2>Борко1</font></li><li><font size=+2>Борко2</font></li><li><font size=+2>Борко3</font></li></ol>
Става на:
  1. Борко1
  2. Борко2
  3. Борко3


<BLINK> текст </BLINK> - прави заградения текст мигащ (само в Netscape).
 
 

Горе
Хоризонтална линия

Хоризонталната линия се пише с <HR>
В кода <HR> можем също да вмъкнем например SIZE oт 1 до 10 и WIDTH (измерва се в % или pixels).
Пример: <HR SIZE=5 WIDTH="100%"> показва следната линия:


Горе
Графика в WEB

B INTERNET колкото са по-малки картинките, толкова по-добре. Например една картинка от 1Kb ще се отвори много по-бързо от картинка 20Kb. Неможе да очакваме, че някой ще чака 10 минути да се отвори дадена страница, като може да стане за 5 секунди. Най-популярните разширения за WEB графика са .gif и .jpg Така е, защото картинките в тези формати стават най-малки по обем. Gif се използва за малоцветни изображения като цветът трябва да е индексиран (indexed color). JPEG се използва за пълноцветни изображения, като не е нужно нищо допълнително. Безспорно най-добрата и професионална програма за обработка на графика е Adobe Photoshop. И пак казвам, колкото по-малки са файловете, толкова по-добре. Има специални програми, които правят възножно най-малки файловете за качеството, което искате. Много добра такава програна е Ulead SmartSaver. При намаляне на обема се намаля и качествто на картинката, но в дадено саотношение си заслужава.

Горе
Вмъкване на картинки

Картинка може да се вмъкне по няколко начина.
Най-простия начин е:
<IMG SRC="файл">

Може и да се зададът размерите на картинката:
<IMG SRC="файл" WIDTH=80 HEIGHT=40>

Да се добави текст, който излиза когато мишката е върху картинката:
<img src="файл" alt="текст">
Пример: имаме файл, който се казва"sarce.gif",  искаме при посочване с мишката да излиза текста " Сърце" и да е с размери height=35 width=40. Пишем:<img SRC="sarce.gif" ALT="Сърце" height=35 width=40>
Става на:
Сърце

Горе
Вмъкване на звуков файл

Същото като картинката, само че вместо <IMG SRC="файл"> пишем <EMBED SRC="файл">
Пример: Имаме файл, който се казва "coma.mid" и пишем:
<EMBED SRC="coma.mid"> и става:

Горе
Хипервръзки (links)
При натискане с мишката върху хипервръзка Браузера ви отвежда там, където е зададено в самата връзка. Пишем:
<a href="Тук се пише мястото кадето трябва да се отиде">Тук се пише какво трябва да се вижда</a>
Можем да накараме браузера да изписва и текст в "статус бара" при посочване на линка с мишката. За целта след като напишем мястото кадето трябва да отиде пишем следното:
onMouseOver="window.status='Тук пишем текста, който искаме да се появява'; return true" onMouseOut="window.status=''"
Пример: Искаме да направим линк към главната страница на BTC, която е с адрес "http://www.btc.bg/", искаме да се вижда"Главна страница на BTC" и в статус бара да пише "BTC".
Пишем:
<font size=+2><a href="http://www.btc.bg/" target="_new"onMouseOver="window.status='BTC'; return true" onMouseOut="window.status=''">Главна страница на BTC</a></font>
(Ако в статус бара има друг текст този може и да не се вижда)
Хипертекста може и да води до някой локален файл.
Пример: Искаме да отидем в началото на този сайт и да се вижда "Начало". И тъй като началният файл е със име "http://pencho.data.bg/start/main.html", пишем следното:
<font size=+2><a href="http://pencho.data.bg/start/main.html">Начало</a></font> Става на:
Начало
Линкът може да е и с картинка.
Пример:
<a href="borko10_frame.htm"><img SRC="sarce.gif" ALT="начало" height=35 width=40></a>
начало
Горе
e-mail link
При примера по-долу автоматично се отваря вашата Mail програма с готов написан адрес.
<a href="mailto:pencho@sz.btk.bg> Пишете ми!</a> Става на:
Пишете ми!
</BODY>
</HTML>
Ами това е за сега, ако имате въпроси знаете къде съм ! Естествено това не е всичко но нещо трябва да остане и в тайна! Бай-бай!
 
 

Обратно към разни