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

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

До момента покрихме голяма част от материала. Манипулиране на текст и шрифт. Поставяне на картинки и връзки. Не остана много.
Да поговорим за резолюцията на екрана и как тя влияе на представянето на страниците. Повечето потребители използват екрани с резолюция 600 на 800 точки. Малка част от потребителите използват 1024x768, а още по-малко имат 640x480. Има и някои междинни, които са толкова малко, че не си струва да се говори за тях. Добре, но за какво ни е всичко това? Това е важно за вас защото от него зависи как ще изглеждат страниците ви на различните екрани. Ето как една примерна страница би изглеждала на екрани с различна разделителна способност.


640×480	800×600	1024×768

Важно е да проверявате страницата си на различни екрани с различна резолюция защото старателно подготвения от вас дизайн може да не изглежда точно така както бихте искали. Разбира се никой не иска от вас да притежавате няколко монитора, на които да тествате работата си. Това е скъпо и неефективно. Съществува малка програма наречена Quickres, чрез която лесно ще добиете представа как биха изглеждали WEB страниците ви върху различните екрани.

Нека разгледаме някои допълнителни възможности за форматиране на текст. Първата е <BLOCKQUOTE>. Тя указва на браузера да постави полета със свободно пространство от ляво и дясно на текста. Ето следния пример.
<BODY BGCOLOR="#FFFFFF"> <BLOCKQUOTE> WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. </BLOCKQUOTE> </BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Сигурен съм, че <BLOCKQUOTE> е била измислена за по-възвишени цели, като например за цитиране мисълта на някой велик мислител, за когото не сме чували нищо. Но в нашия случай се използва за далеч по-обикновенни цели... като форматиране на текст (indenting).

Още един много полезен инструмент за форматиране е LIST (списък). Има НОМЕРИРАНИ списъци и НЕНОМЕРИРАНИ списъци.

Това е номериран списък

нещо голямо
нещо малко
нещо късо
нещо слабо
Това е неномериран списък

нещо червено
нещо синьо
нещо старо
нещо ново
Първо, нека направим неномериран списък. Това е нещо наистина много, много просто.
Започваме със следното...
<BODY BGCOLOR="#FFFFFF"> Какво искам за Коледа </BODY>

Какво искам за Коледа

Все още не сме започнали да изграждаме списъка. Това е само заглавието.
Добавяме двойката тагове за неномериран списък.
<BODY BGCOLOR="#FFFFFF"> Какво искам за Коледа <UL> </UL> </BODY>

Какво искам за Коледа

Добавяме един от компонентите на списъка.
<BODY BGCOLOR="#FFFFFF"> Какво искам за Коледа <UL> <LI>голям червен камион </UL> </BODY>

Какво искам за Коледа

голям червен камион

След това още няколко...
<BODY BGCOLOR="#FFFFFF"> Какво искам за Коледа <UL> <LI>голям червен камион <LI>воден джет <LI>каса с барабани <LI>въздушна пушка <LI>Памела Андерсън </UL> </BODY>

Какво искам за Коледа

голям червен камион
воден джет
каса с барабани
въздушна пушка
Памела Андерсън

Бинго! Вие направихте списък!
Как да направим номериран списък? Лесно! Сменяме <UL> таг с <OL> таг.
<BODY BGCOLOR="#FFFFFF"> Какво искам за Коледа <OL> <LI>голям червен камион <LI>воден джет <LI>каса барабани <LI>въздушна пушка <LI>Памела Андерсън </OL> </BODY>

Какво искам за Коледа

голям червен камион
воден джет
каса барабани
въздушна пушка
Памела Андерсън

Друг тип списък е дефиниращ (обяснителен) списък.

кесия
1.Малка торбичка от кожа или плат за дъжане на пари. 2.В турско време парична сума от 50000 гроша. 3.Книжен плик, отворен от едната страна за носене на стоки.

Зопочнете така...
<BODY BGCOLOR="#FFFFFF"> <DL> </DL> </BODY>
След това добавете думата, която ще описвате...
<BODY BGCOLOR="#FFFFFF"> <DL> <DT>Кесия </DL> </BODY>

Кесия

Добавяте и определението.
<BODY BGCOLOR="#FFFFFF"> <DL> <DT>Кесия <DD>1.Малка торбичка от кожа или плат за дъжане на пари. 2.В турско време парична сума от 50000 гроша. 3.Книжен плик, отворен от едната страна за носене на стоки. </DL> </BODY>

Кесия
1.Малка торбичка от кожа или плат за дъжане на пари. 2.В турско време парична сума от 50000 гроша. 3.Книжен плик, отворен от едната страна за носене на стоки.

Като за последно бих искал да направя определяната дума bold (почернена). Това не е задължително, но мисля, че крайният резултат е по-добър.
<BODY BGCOLOR="#FFFFFF"> <DL> <DT><B>Кесия</B> <DD>1.Малка торбичка от кожа или плат за дъжане на пари. 2.В турско време парична сума от 50000 гроша. 3.Книжен плик, отворен от едната страна за носене на стоки. </DL> </BODY>

Кесия
1.Малка торбичка от кожа или плат за дъжане на пари. 2.В турско време парична сума от 50000 гроша. 3.Книжен плик, отворен от едната страна за носене на стоки.

Друга допълнителна възможност, която мисля че ще използвате е хоризонталната линия.
<BODY BGCOLOR="#FFFFFF"> <HR> </BODY>

Има няколко възможности, които да предпочетем...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

Тук се разбира от само себе си, че указваме къде да бъде разположена линията.
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>

Можем да контролираме дори и дебелината...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>

Можем да премахнем сенките.
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>

Спомняте ли си когато ви казах, че браузера не разбира форматирания текст и го прави непрекъснат независмо от въведените интервали. Като например това...
<BODY BGCOLOR="#FFFFFF">
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |         ИСКАМ ДА        |
     |           СЪМ           |
     |   ДИРЕКТОР НА ВОДОПАД   |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>

\|/ (@ @) +----oOO----(_)-----------+ | ИСКАМ ДА | | СЪМ | | ДИРЕКТОР НА ВОДОПАД | +-----------------oOO-----+ |__|__| || || ooO Ooo

Е, добре, но когато използваме <PRE> (preformat) таг, указваме на браузера да показва форматиран текст. Точно по начина по който е въведен.
<BODY BGCOLOR="#FFFFFF"> <PRE>
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |         ИСКАМ ДА        |
     |           СЪМ           |
     |    ДИРЕКТОР НА ВОДОПАД  |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE> </BODY>
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |         ИСКАМ ДА        |
     |           СЪМ           |
     |    ДИРЕКТОР НА ВОДОПАД  |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
Последният таг за който ще поговорим е тагът за коментар.
<BODY BGCOLOR="#FFFFFF">  Бележка <P> Коментарът може да бъде постaвен навсякъде в документа и браузера винаги ще игнорира написаното между скобичките. Можете да поставяте скрити послания ,  указания за самия вас,  или да добавяте приятелски насоки към всеки, който има интерес да види как сте написал страницата си (source). </BODY>

Бележка
Коментарът може да бъде поставен навсякъде в документа и браузера винаги ще игнорира написаното между скобичките. Можете да поставяте скрити послания, указания за самия вас, или да добавяте приятелски насоки към всеки, който има интерес да види как сте написал страницата си (source).

Само за да бъдем докрай прецизни трябва да уточня, че коментарът винаги започва с
Можете да поставите дори и html тагове и те ще бъдат игнорирани (няма да се изпълнят). Браузера ще игнорира всичко до момента, когато срещне -->

Е, добре. Мисля, че това е всичко. Вече познавате основите на html (около 60%) и те са достатъчни за да направите нелоша web страница, в която да разкажете за себе си, бизнеса си или просто да се упражните на web дизайн. Искате да попитате дали това са всички тагове. Няма ли, още? Оо, разбира се, че има. Материала усвоен до тук ви дава правото да завършите първи клас и да постъпите във ВТОРИ КЛАС, където ще научите как да правите таблици.
Споменах ви в началото, че според мен най-добрите програми за създаване на web страници са текстово ориентираните програми. Съществуват големи и тежки програми, за които се твърди, че за тях не е нужно познаване по html. Проблемът с тях е, че те създават страници от които си личи, че авторът им наистина не познава html. Е, поне моят опит показва това и аз не ангажирам никого с мнението си.
По-опитните автори на web страници използват текст-базирани програми. В техния случай не е нужно да се пишат целите тагове, а с просто щракване се добавя целия таг или кодовете за цвят. LEFT, RIGHT, CENTER или каквото и да е от html го има готово в менютата и се добавя щрез щракване с мишката. Няколко от тях можете да намерите тук. Общото при тях е, че този който работи с тях трябва да познава html. Те улесняват писането, но не го правят вместо вас.
След като сте направили страниците си ще трябва да ги качите (upload) на сървър и по този начин да станат достояние на хората за които са предназначени. Сървърите са компютри на които са активирани сървър програми, доставящи на всеки желаещ информацията, записана на сървъра. За да можете да качите на сървър страниците си ще ви е нужна FTP програма. Такава можете да изтеглите от тук. С тази програма трансферирането на файловете е толкова лесно все едно, че манипулирате файловете на собствения си компютър.

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

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