Как да направим WEB страница!- Урок 2

Как да направим Web страница!
Урок втори

За да не се обърквате ще описвам html кода, който се пише само между <BODY> таговете. Няма да споменавам за <HTML>, <HEAD> & <TITLE> таговете. Но вие вече знаете, че те задължително трябва да присъстват в кода на web страницата ви.
<BODY> </BODY>
Напишете някакъв текст.
<BODY> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Когато правите промени във вашия html документ ще е нужно да натиснете "save" във Notepad и след това "reload" на браузера. Това се прави за да се види резултата от промяната.
Мисля, че първо ще е най-добре да поговорим за това как се сменя цветът на фона. Ако изрично не е указан някакъв цвят, браузера поставя сив по подразбиране. Но вие не винаги бихте искали да използвате само тoзи цвят, нали ?
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно
Този код FFFFFF се слага, когато искате фонът да е бял. Кодовете за основните цветове ще намерите тук.

Ако не ви харесва фонът да бъде само в един цвят, лесно можете да поставите като фон, всяка картинка, която е добра за фон. Само, че трябва да в .gif или .jpg формат.
<BODY BACKGROUND="swirlies.gif"> Нещо наистина страхотно </BODY>

Това е картинката за фон, която използваме в дадения пример.

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

Това е фоновата картинка, използвана в горния пример

(Изискванията към дългите фонови картини е да са дълги поне 800 пиксела за да се виждат нормално на най-масово използваните екрани.
Да се върнем към обикновенната бяла страница.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Можем да направим буквите bold (почернени).
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Something really cool
Указваме на браузера с  да започне да прави текста почернен, а с  да престане.
Същият принцип е и с italic...
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

...имаме и подчертаване.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Да се върнем отново към стария бял документ.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Можем да използваме таговете и в комбинация.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно
Това беше пример на гнездово поставени тагове. Ако ще използвате таговете многократно в комбинации ще трябва да следвате установения по-долу ред.
<ТОВА><ОНОВА></ТОВА></ОНОВА> Разместени тагове.... лошо
<ТОВА><ОНОВА></ОНОВА></ТОВА> Гнездово поставени.... правилно

Много полезен тип ефект е когато принуждавате шрифта да изглежда като напечатан (mono-spaced).
<BODY BGCOLOR="#FFFFFF"> <TT>Нещо наистина страхотно</TT> </BODY>

Нещо наистина страхотно
Всяка буква използва едно и също хоризонтално пространство.

Това е обикновен тип -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Това е monospaced тип -> iiiiiiiiii oooooooooo mmmmmmmmmm

Можем да променяме и големината на фонта (шрифта)... Прекалено просто е!
Първо добавяме  тага...
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>
След това определяме и SIZE атрибута към този таг.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно
Фонтовете имат 7 размера (големини):

дребен	малък	нормален	среден	голям	огромен &	гигантски!
1	2	3	4	5	6	7

Искам да направя две уточнения. Първо, тагът <TAG> указва на браузера да направи нещо. А атрибута ATTRIBUTE се поставя в <TAG> и посочва как точно да стане това.
Второто е за стойностите "по подразбиране". Както може би знаете, стойността по подразбиране е тази стойност, която браузера приема, че трябва да приложи, когато не му е указано нещо специално. Примерно ако не укажете колко голям трябва да е шрифта той се изписва с големина 3. Значи големината на фонтовете по подразбиране е 3, ако не сте посочили изрично друга.
Обикновенно всеки браузер използва черен цвят за изписване на текст с шрифт Times New Roman, чиято големина е 12pt (в дадения случай 3). Това са стойностите по подразбиране. Ако не указвате нещо друго текстът ви ще има такива особенности. Разбира се, можете да укажете текстът да се изписва с друг шрифт, като например ARIAL или COMIC SANS. Не забравяйте, че посетителите ви ще могат да четат този текст, само ако съответният фонт е инсталиран на компютрите им.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Something really cool
Нека повторя... Ако посетителят на вашата прекрасна страница, няма инсталиран фонта, който сте указали, ще види написан текст с шрифта, който е по подразбиране при него. Така, че бъдете внимателни с използването на екзотични фонтове. Arial и Comic Sans MS са най широко разпространените фонтове разпространявани с операционната система Windows. Вижте как изглежда фонтът Impact!. Можете да оставите възможност на браузера да избере един от няколко фонта. Прави се по този начин... Тук е текста.
Ето подробно обяснено какво се случва в този пример за всички, които като мен не схващат всичко от първия път. Браузера търси първо дали е инсталиран Arial. Ако го намери го използва. Ако не го намери търси следващия (helvetica). Ако не намери и него търси LUCIDA SANS. Ако никой от описаните фонтове не е инсталиран на компютъра, браузера изписва текста с фонта "по подразбиране" за съответния браузер.
Едно малко уточнение за писането на html. Няма голямо значение дали пишете кода с големи или малки букви. Браузера се справя еднакво добре и в двата случая. Но от голямо значение е винаги да създавате и използвате файлове, написани само с малки букви. Т.е. ако поставите картинка чието име е Fox.gif рискувате тази картинка да не се покаже изобщо. Преименувайте файла на fox.gif и всичко ще е наред.
Добре, нека сега се върнем към по-веселата част.
Можете да оцветявате фонта в цвят по ваше желание.
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Можем разбира се да използваме повече от един атрибут във този <TAG>...
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

Или дори:
<BODY BGCOLOR="#FFFFFF"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно
Чувствам, че имате нужда да ви напомня, ще таговете трябва да се подреждат гнездово. Или казано с други думи "симетрично написани".

<TAG3><TAG2><TAG1>Текст!</TAG1></TAG2></TAG3>
Няма значение кой таг ще използвате първи. Дали за цвят или за почерняне. Много по-важно е затварянето на таговете да става правилно.

Само да обобщим за да можем да завършим този урок. Всеки браузер има настройки "по подразбиране" които би трябвало да са следните...

Текстът е черен
Връзките са сини
Активните връзки са червени
Посетените връзки са виолетови
Можете да променяте тези цветове ако трябва.
Това може да стане още в началото в <BODY> таг и да важи за цялата страница, като по този начин си спестявате поставянето на указания за цвят навсякъде където е нужно. Вижте следния пример.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000"> Нещо наистина страхотно </BODY>

Нещо наистина страхотно

 Можете да видите, че фонът е черен, а текстът жълт.
 Връзките вече са червени
 Посетените връзки са тъмно червени
 Активните връзки са зелени.

Знам, че още не сме обяснили как се прявят самите връзки, но когато научим това в следващия урок вече ще ни е известно как да манипулираме цветът им.
Това е! Вече знаете как да манипулирате текста във вашата web страница. Вече знаете как да направите големи червени букви или малки bold буквички. Можете да използвате други фонтове, или monospaced фонтове.

<--ПРЕДИШЕН СЛЕДВАЩ-->

Въведение	Урок 1	Урок 2	Урок 3	Урок 4	Урок 5	Полезни връзки	Кратък html указател
БЕЗПЛАТНИ ФОНТОВЕ ЗА ВАШАТА WEB СТРАНИЦА

Това е обикновен тип `->`	iiiiiiiiii oooooooooo mmmmmmmmmm
`Това е monospaced тип ->`	`iiiiiiiiii oooooooooo mmmmmmmmmm`