Кратко ръководство по HTML за начинаещи
Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS
Втори урок » (6970 посещения)
За да не се обърквате, ще описвам html кода, който се пише само между <BODY>
таговете. Няма да споменавам за <HTML>
, <HEAD>
и <TITLE>
таговете. Но вие вече знаете, че те задължително трябва да присъстват в кода на web страницата ви.
И така, напишете някакъв текст.
<BODY>
Нещо наистина страхотно
</BODY>
Това е резултата:![]() Нещо наистина страхотно |
Когато правите промени във вашия html документ, ще е нужно да натиснете "save" във Notepad и след това "reload" на браузера. Това се прави, за да се види резултата от промяната.
Мисля, че първо ще е най-добре да поговорим за това, как се сменя цветът на фона. Ако изрично не е указан някакъв цвят, браузерът поставя цвят от настройкитe му по подразбиране. Но вие не винаги бихте искали да използвате само тoзи цвят, нали?
<BODY BGCOLOR="#FFFFFF">
Нещо наистина страхотно
</BODY>
Ето и резултата:![]() Нещо наистина страхотно |
Този код #FFFFFF
се слага, когато искате фонът да е бял.
Кодовете за основните цветове ще намерите тук.
Ако не ви харесва фонът да бъде само в един цвят, лесно може да поставите като фон всяка картинка, която ви харесва. Само, че трябва да e в .gif
, .jpg
или .png
формат.
<BODY BACKGROUND="swirlies.gif">
Нещо наистина страхотно
</BODY>
В резултат от това получавате:![]() Нещо наистина страхотно |

Както сами разбирате, картинката определена за фон ще бъде "разхвърлена" из целия документ. Ако обаче използвате дълга и тясна картинка, ефектът ще бъде друг...
<BODY BACKGROUND="bluebar.gif">
Нещо наистина страхотно
</BODY>
Ето го резултата:![]() Нещо наистина страхотно |

(изискванията към големите фонови картинки е, да са широки поне 800 пиксела, за да се виждат нормално на най-масово използваната резолюция на екрана)
Да се върнем към обикновената бяла страница.
Можем да направим буквите BOLD (удебелени).
<BODY BGCOLOR="#FFFFFF">
Нещо наистина <B>страхотно</B>
</BODY>
Вижте резултата:![]() Нещо наистина страхотно |
Указваме на браузера с <B>
да започне да прави текста удебелен, а с </B>
да престане да удебелява шрифта и да се върне към нормалното изписване на текста.
Същият принцип е и с ITALIC (наклонен шрифт).
<BODY BGCOLOR="#FFFFFF">
Нещо <I>наистина</I> <B>страхотно</B>
</BODY>
Eто го и съответният резултат:![]() Нещо наистина страхотно |
В шрифтовото оформление е възможно и подчертаването.
<BODY BGCOLOR="#FFFFFF">
<U>Нещо</U> <I>наистина</I> <B>страхотно</B>
</BODY>
![]() |
Всички тагове за форматиране на текст можем да ползваме и в комбинация.
<BODY BGCOLOR="#FFFFFF">
Нещо наистина <I><B>страхотно</B></I>
</BODY>
![]() Нещо наистина страхотно |
Горното беше пример за гнездово поставени тагове. Ако ще използвате таговете многократно в комбинации, ще трябва да следвате установения по-долу ред.
<ТОВА><ОНОВА></ТОВА></ОНОВА> Разместени тагове ... лошо
<ТОВА><ОНОВА></ОНОВА></ТОВА> Гнездово поставени ... правилно
Много полезен тип ефект е, когато принуждавате шрифта да изглежда като напечатан (mono-spaced).
<BODY BGCOLOR="#FFFFFF">
<TT>Нещо наистина страхотно</TT>
</BODY>
![]() |
В mono-spaced всяка буква използва едно и също хоризонтално пространство.
Това е обикновен тип » |
iiiiiiiiii oooooooooo mmmmmmmmmm |
Това е monospaced тип » |
iiiiiiiiii oooooooooo mmmmmmmmmm |
Можем да променяме и големината на фонта (шрифта). Прекалено просто е!
Първо добавяме <FONT> тага, а след това определяме и SIZE атрибута към този таг.
<BODY BGCOLOR="#FFFFFF">
Нещо наистина <FONT SIZE=6>страхотно</FONT>
</BODY>
![]() Нещо наистина страхотно |
дребен | малък | нормален | среден | голям | огромен | гигантски |
size=1 | size=2 | size=3 | size=4 | size=5 | size=6 | size=7 |
Искам да направя две уточнения. Първо, всеки
<TAG>
указва на браузера да направи нещо. А атрибута ATTRIBUTE
се поставя в <TAG>
и посочва как ТОЧНО да стане това.
Второто е за стойностите "по подразбиране". Както може би знаете, стойността по подразбиране е тази стойност, която браузера приема, че трябва да приложи, когато не му е указано нещо специално. Примерно, ако не укажете колко голям трябва да е шрифта, той се изписва с големина 3. Значи големината на шрифтовете по подразбиране е 3, ако не сте посочили изрично друга.
Обикновено всеки браузер използва черен цвят за изписване на текст с шрифт Times New Roman, чиято големина е 12pt (в дадения случай size=3). Това са стойностите по подразбиране. Ако не указвате нещо друго, текстът ви ще има такива атрибути. Разбира се, може да укажете текстът да се изписва с друг шрифт, като например ARIAL или COMIC SANS. Не забравяйте, че посетителите ви ще могат да четат този текст, само ако съответният фонт е инсталиран на компютрите им.
<BODY BGCOLOR="#FFFFFF">
Нещо наистина <FONT FACE="COMIC SANS MS">страхотно</FONT>
</BODY>
![]() |
Нека повторим. Ако посетителят на вашата прекрасна страница няма инсталиран фонта, който сте указали, ще види написан текст с шрифта, който е по подразбиране при него. Така, че бъдете внимателни с използването на екзотични шрифтове. Arial и Comic Sans MS са най-широко разпространените фонтове, вградени в операционната система Windows. Може да оставите възможност на браузера да избере един от няколко фонта.
Прави се така » <FONT FACE="ARIAL, HELVETICA, 'LUCIDA SANS'">
Тук е текста</FONT>
В случая, браузерът търси първо дали е инсталиран ARIAL. Ако го намери го използва. Ако не го намери, търси следващия (HELVETICA). Ако не намери и него търси LUCIDA SANS. Ако никой от описаните фонтове не е инсталиран на компютъра, браузерът изписва текста с фонта "по подразбиране" за него.
Добре, нека сега се върнем към по-веселата част. Може да оцветявате фонта в цвят по ваше желание. Може разбира се да използвате и повече от един атрибут в този <TAG>
.
<BODY BGCOLOR="#FFFFFF">
Нещо наистина <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">страхотно</FONT></B></I></U>
</BODY>
![]() Нещо наистина страхотно |
Чувствам, че имате нужда да ви напомня, че таговете трябва да се подреждат гнездово. Или казано с други думи "симетрично написани".
<TAG3><TAG2><TAG1>Текст текст текст!</TAG1></TAG2></TAG3>
Няма значение кой таг ще използвате първи. Дали за цвят, за наклонен шрифт или за удебеляване. Много по-важно е затварянето на таговете да става правилно.
Сега да обобщим, за да можем да завършим този урок. Всеки браузер има настройки "по подразбиране", които нека приемем, че са следните.
![]() Нещо наистина страхотно Текстът е черен, фонът е бял. Връзките са сини Активните връзки са червени Посетените връзки са зелени |
Може да променяте тези цветове ако трябва. Това може да стане още в началото в <BODY>
тагa и да важи за цялата страница, като по този начин си спестявате поставянето на указания за цвят навсякъде, където е нужно. Вижте следния пример.
<BODY BGCOLOR="#00000" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#0000FF" ALINK="#00FF00">
Нещо наистина страхотно
</BODY>
![]() Нещо наистина страхотно Както е видно, вече фонът е черен, а текста е бял. Връзките вече са червени Активните връзки са зелени Посетените връзки са сини |
Това беше всичко за втори урок!
Вече знаете как да манипулирате текста във вашата web страница с
големи наклонени букви
или
малки дебели буквички.
Може да използвате ДРУГИ ШРИФТОВЕ или MONOSPACED ФОНТОВЕ.