Кратко ръководство по 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>
Нещо наистина страхотно |
В шрифтовото оформление е възможно и подчертаването.
<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 ФОНТОВЕ.