Web design

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:28

SeXY ne dava da ima

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:32

урок:4 ХОРИЗОНТАЛНИ ЛИНИИ

     Езика HTML позволява да се изчертават хоризонтални линии с елемента <HR>. Този елемент няма съответен затварящ елемент, но има някои атрибути. Дължината на линията се задава с атрибута WIDTH на елемента <HR>. Дължината можете да зададете в пиксели или в проценти от вирината на екрана. Нека начертаем 2 линии, едната е дължина 100 пиксела, а другата 100% от ширината на екрана :

<BODY>
<HEAD>
    <TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=100>
<HR WIDTH=100%>
</BODY>
</HTML>

    Когато променяте размера на прозореца на браузъра втората линия ще се променя с него, докато първата ще си остане 100 пиксела. Обърнете внимание, че линиите се подравняват в средата по подразбиране. Ако искате да промените това положение трябва да използвате атрибута ALIGN, и неговите параметри left, center и right, съответно за подравняване вляво, в средата и вдясно на страницата. Параметъра center спокойно можете да го пропуснете, защото линията така или иначе се подравнява в средата при липсата на атрибута ALIGN. Сега да начертаеме две линии с дължина по 300 пиксела и да ги подравним съответно вляво и вдясно:

<BODY>
<HEAD>
    <TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=300 ALIGN="left">
<HR WIDTH=300 ALIGN="right">
</BODY>
</HTML>

    Дебелината на линията се променя с атрибута SIZE. Параметрите на SIZE се задават в пиксели. Например SIZE=5 означава, че линията е с дебелина 5 пиксела. Ето какво представлява такава линия с дължина 80%, подравнена в средата:

<BODY>
<HEAD>
    <TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

    Ако зададем и атрибута NOSHADE линията ще се покаже плътна, без сянка.

<BODY>
<HEAD>
    <TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

    Цвят на линията можете да зададете с COLOR, но се опасявам, че почитателите на Netscape няма да го видят. Ето една синя линия с дебелина 8 пиксела и ширина 90% :

<BODY>
<HEAD>
    <TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=90% SIZE=8 COLOR="#0000FF">
</BODY>
</HTML>

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:34

урок:5   Езика HTML ви дава възможност да използвате три вида списъци - подредени, неподредени и списъци с обяснения. Подредените списъци са номерирани и изглеждат така :
Иван
Георги
Захари

Неподредените списъци използват вместо номерация, някакъв символ. Например точка:
Иван
Георги
Захари

Списъците с обяснения не използват символ или цифра пред текста. Вместо това поставят обяснителен текст след всеки елемент от списъка:

Иван        счетоводител
Георги     касиер
Захари     шофьор

    Подреден списък можете да създадете с елемента <OL> и съответно затварящия </OL>. Елементите на списъка се задават с елемента <LI>, който може да се използва като двойка елементи или като единичен елемент. Нека направим един такъв списък :

<HTML>
<HEAD>
    <TITLE> ordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:
<OL>
<LI>захар
<LI>яйца
<LI>сода каустик за тъщата
</OL>
</BODY>
<HTML>

Вижте как ще изглежда :
да не забравя да купя:
захар
яйца
сода каустик за тъщата

    Въпреки, че не сме задали да се показват номера 1. 2. 3. , те се добавят автоматично в списъка. Ако изкате списъка да се показва с римски вместо с арабски цифри, трябва да добавите атрибут TYPE на елемента <OL>. Атрибута TYPE показва какви символи да се визуализират преди елементите на списъка. Стойностите на атрибута TYPE за подредените списъци са :TYPE=1     за списъци
1.
2.
3.
TYPE=a     за списъци
a.
b.
c.
TYPE=A     за списъци
A.
B.
C.
TYPE=i     за списъци
i.
ii.
iii.
TYPE=I     за списъци
I.
II.
III.

    Така че ако искате вместо
захар
яйца
сода каустик за тъщата

   на екрана да се вижда
захар
яйца
сода каустик за тъщата

   трябва да добавите към елемента <OL> TYPE=I . С други думи трябва да напишете <OL TYPE=I>. Ако пропуснете атрибута TYPE, по подразбиране ще се показва списък от типа 1. 2. 3.

    Неподреден списък се създава с двойката елементи <UL></UL>. Този списък за разлика от подредения не е номериран, а използва някакъв символ за всеки елемент от списъка, например точка.
Да направим горния пример да се показва като неподреден списък:

<HTML>
<HEAD>
    <TITLE> unordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:
<UL>
<LI>захар
<LI>яйца
<LI>сода каустик за тъщата
</UL>
</BODY>
<HTML>

Тогава на екрана ще се вижда следното:
да не забравя да купя:
захар
яйца
сода каустик за тъщата

При неподредените списъци също можете да използвате атрибута TYPE. Валидните стойности за него са disk, square и circle. Вижте как ще изглежда същия списък, само че с различни стойности на TYPE :<UL TYPE=disk>     <UL TYPE=square>     <UL TYPE=circle>
захар
яйца
сода каустик за тъщата      захар
яйца
сода каустик за тъщата      захар
яйца
сода каустик за тъщата

Списъците с обяснения се създават с двойката елементи <DL></DL>. Елементите на списъка се задават с <DT>, а обяснението към него с <DD>. Примера в началото на страницата с имената и професиите ще изглежда по следния начин:

<HTML>
<HEAD>
    <TITLE>definition list</TITLE>
<HEAD>
<BODY>
<DL>
    <DT>Иван
   <DD>счетоводител
   <DT>Георги
    <DD>касиер
   <DT>Захари
    <DD>данъчен инспектор
</DL>
</BODY>
</HTML>

   Ако желаете, можете да влагате един в друг списъци от един вид или от различни видове. Ще ви дам пример с вложени един в друг подреден и неподреден списък, като този например :
Да купя за вкъщи:
сладолед
торта
Да купя за офиса:
дискети
химикалки
нова мишка

HTML документа на горния пример изглежда ето така :

<HTML>
<HEAD>
    <TITLE>вложени списъци</TITLE>
</HEAD>
<BODY>
<OL>
   <LI>Да купя за вкъщи:
        <UL TYPE=circle>
            <LI>сладолед
            <LI>торта
        </UL>
   <LI>Да купя за офиса:
        <UL TYPE=circle>
           <LI>дискети
           <LI>химикалки
           <LI>нова мишка
       </UL>
</OL>
</BODY>
</HTML>

Можете да използвате и собствени картинки при неподредените списъци. За да ви покажа, направих една картинка -червена точка с размер 9х9 пиксела.     дискети
     химикалки
     нова мишка

Така списъка стана доста по хубав.

<HTML>
<HEAD>
    <TITLE>списък с картинка</TITLE>
</HEAD>
<BODY>
<UL imagesrc="redpoint.gif">
   <LI>дискети</LI>
   <LI>химикалки</LI>
   <LI>нова мишка</LI>
</UL>
</BODY>
</HTML>

Изполвайки атрибута imagesrc на елемента <UL> зададох на списъка името на файла, който да се показва пред елементите. Картинката е файл с име redpoint.gif и трябва да се намира в основната папка, където разполагате HTML документите си. Можете да я сложите и в подпапка, но тогава трябва да зададете и пътя до нея, например: <UL imagesrc="images/redpoint.gif"> ако подпапката се казва images. Ако сте забелязали, в края на тази страница използвам също списък, само че със сини точки и включени хиперлинкове към други страници :-)

Ето какво научихте за списъците:

1. Списъците са три вида, подредени, неподредени и списъци с обяснения.

2. Подредените списъци са номерирани с арабски или римски числа, както и с малки или големи букви от A до Z.

3. Неподредените списъци вместо нимерация използват някакъв символ, обикновенно диск, квадрат или окръжност, но можете да ползвате и собствени картинки.

4. Списъците могат да се влагат един в друг.

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:40

урок:6 ХИПЕРЛИНКОВЕ

   Езика HTML ви позволява да правите препратки към други страници, към части от същата страница, към файлове, картинки, електронна поща. Тези препратки се наричат ХИПЕРЛИНКОВЕ (или хипервръзки). Без хиперлинковете един web сайт не би имал никакъв смисъл. Хиперлинк се създава с двойката елементи <A> и </A>. Когато правите препратка към някакъв интернет адрес, трябва да използвате атрибута HREF на елемента <A>. Ето един пример, който препраща към адрес www.search.bg :

<HTML>
<HEAD>
    <TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
    <A HREF="http://www.search.bg">SEARCH.BG</A>
</BODY>
</HTML>

   Нека да анализираме този пример. С <A HREF= се задава адреса, към който води препратката. В случая това е адреса на search.bg, предхождан от http://. Този адрес се нарича още URL. След това изписвате текста, който ще води до съответния адрес, в случая текста е SEARCH.BG. На екрана ви този сайт трябва да изглежда така :

SEARCH.BG

   Когато посочите с мишката този надпис, к*рсора се сменя от стрелка на сочеща ръка. Ако кликнете върху него отивате директно на адреса на search.bg. Забележете, че цвета на текста е син, а самия текст е подчертан без вие да сте задавали такива параметри. Това е така, защото браузъра по подразбиране показва хиперлинка подчертан и със син цвят. Ако кликнете върху него, отидете на search.bg и после пак се върнете на тази страница, цвета вече няма да бъде син, а лилав. Причината за това е, че браузъра визуализира посетените от вас линкове с лилав цвят. Можете да промените цвета на линка по ваше желание. Това става с атрибутите на елемента <BODY> LINK, ALINK и VLINK. LINK задава какъв да бъде цвета на линка, ALINK (active link) задава цвета на активния линк (този, на който се намирате в момента), а VLINK (visited link) задава цвета на посетените вече от вас линкове. Ето един такъв пример:

<HTML>
<HEAD>
    <TITLE>hyperlink</TITLE>
</HEAD>
<BODY LINK="#00FF00" ALINK="#00FFFF" VLINK="#FF0000">
Посетете нашия
<A HREF="http://forum.search.bg"><B>FORUM</B></A>
</BODY>
</HTML>
Натиснете ТУК за да видите как изглежда този пример на нова страница. Линка ще бъде със зелен цвят, активния линк със светлосин, а посетения със червен. Забележете, че в този случай се отвори нов прозорец на браузъра. Това стана, защото използвах атрибута TARGET на елемента <A>. Атрибута TARGET има няколко параметъра. За да се отвори линка в нов прозорец се ползва параметъра "_blank". Ако пропуснете TARGET линка по подразбиране се отваря в същия прозорец. Вижте примера с линка към SEARCH.BG, но отварящ се в нов прозорец :

<HTML>
<HEAD>
    <TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
    <A HREF="http://www.search.bg" TARGET="_blank">SEARCH.BG</A>
</BODY>
</HTML>

SEARCH.BG

Кликнете върху SEARCH.BG и ще видите сами. Другите параметри на TARGET ще ги разгледаме в урока "РАМКИ".

   Освен препратки към други сайтове, можете да правите препратка и към собствения си сайт. За целта трябва да слагате всички web документи, създадени от вас в една папка или в нейните подпапки. Нека да направим един сайт ( не страница, а именно сайт, съвкупност от страници с препратки една към друга). Ще направим сайта от 3 страници, като ще ги именуваме "начална страница", "лични данни" и "свържете се с мен". Направете си нова папка на твърдия диск и и дайте името "website". Сега нека направим първата страница:

<HTML>
<HEAD>
    <TITLE>начална страница</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
<A HREF="forme.html">Нещо повече за мен.</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>

    Запазете този документ във същата папка под името index.html. Сега да направим другите две страници от сайта:

<HTML>
<HEAD>
    <TITLE>лични данни</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете нещо за себе си
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>

    Този документ го запазете в същата папка по името forme.html и направете последната страница с името contact.html.

<HTML>
<HEAD>
    <TITLE>свържете се с мен</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете адреса си, e-mail и т.н.
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="forme.html">За мен</А><BR>
<A HREF="mailto:www4u@search.bg">Моя e-mail</A>
</BODY>
</HTML>

   Ето как ще изглежда този сайт. Натиснете ТУК, или го стартирайте от папка website на твърдия си диск. Виждате, че вече отделните страници са свързани а препратки помежду им. Когато задавате линкове към файлове, които са във същата папка, изписвате само името им и разширението (forme.html). Ако HTML документа е в някаква подпапка на вашата папка, например подпапка main, трябва да зададете и пътя до там <A HREF="main/forme.html">За мен</А>.
    Новото в горния пример е <A HREF="mailto:www4u@search.bg">Моя e-mail</A>. Когато срещне mailto:име_на_мейла и посетителят на страницата кликне върху текста след него браузъра стартира програмата му за електронна поща, която вписва в полето за изпращане адреса на мейла, който е зададен след mailto:
По този начин спестявате на посетителят на страницата, който иска да ви пише, ръчното стартиране и настройка на програмата си за електронна поща. Ако посетителят няма такава програма (Eudora или Outlook Expres например) или използва webmail в hotmail или yahoo например, параметърът mailto: няма да върши работа. Затова винаги пишете вашия e-mail между <A> и </A>. Ето така:

<A HREF="mailto:www4u@search.bg">Моя e-mail    www4u@search.bg</A>

    Освен към други страници и e-mail можете да правите препратки в рамките на същата страница. Това става по следния начин. Изполвайки елемента <A> давате някакво име на определена част от HTML документа, нещо като маркировка. Например, в началото на страницата която разглеждате в момента съм дал име "begin":

<A NAME="begin">Езика HTML</A>

    Ако си спомняте така започваше тази страница. На първите две думи съм им дал име за препратка "begin". Сега ако напиша <A HREF="#begin">върнете се в началото на страницата</A> и кликнете върху текста, ще се върнете в началото на страницата. Ето, убедете се сами:

върнете се в началото на страницата

    Можете да слагате навсякъде в документа такива маркировки и да правите препратки към тях. Също така, можете да препращате към друг HTML документ, в който има маркировка. Това става като първо напишете името на документа, после # и после името на маркировката.

<A HREF="index.html#begin">Отивате на index.html с препратка към част begin</A>

или

<A HREF="http://www.search.bg/index.html#begin">Отивате на index.html с препратка към част begin</A>

Какво научихте за хиперлинковете :

1. Хиперлинковете (или хипервръзките) са препратки към други страници от същия сайт или към други сайтове, към електронна поща или към части от същата страница или от сруги страници.

2. Хиперлинк се реализира с елемента <A> и атрибута HREF. Име на част от страницата се дава с атрибута NAME

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:47

урок:7 КАРТИНКИ


Една от най-силните характеристики на езика HTML е възможността да разполагате картинки върху страницата си. Това става с елемента <IMG> и атрибута му SRC, като след SRC записвате името на файла:

<HTML>
<HEAD>
<TITLE> snimka </TITLE>
</HEAD>
<BODY>
<IMG SRC="snimka.jpg>
</BODY>
</HTML>

    Така на екрана си вече имате картинка на делфин. В езика HTML най-често се използват графичните формати GIF(.gif) и JPEG(.jpg). Предимството на първия е че може да съдържа анимация и прозрачен фон, но се ограничава само до 256 цвята. При втория формат няма ограничение за цветовете и картинките са с по-високо качество, но пък нямате прозрачен фон, нито анимация. Катринката на делфина е от типа JPEG.
    Когато слагате картинка на web страницата си трябва да знаете от колко точки е съставена хоризонтално и вертикално. Например картинката на делфина е от 300 точки хоризонтално и 375 вертикално(кликнете с десния бутон на мишката върху картинката и от менюто изберете Properties за да видите от колко точки е картинката). Вие разбира се можете да свиете или разширите изображението. Това става с атрибутите WIDTH и HEIGHT на елемента <IMG>. Например нека направим същата картинка на делфин да се показва като 150Х187 точки(пиксела) :

<IMG SRC="dolphin.jpg" WIDTH="150" HEIGHT="187">

     В този случай картинката се намалява точно наполовина. Ако не бяхме спазили пропорциата да намалим точно на 2 ширината и височината на картинката изображението щеше да се "смачка", например ето така:

<IMG SRC="snimka.jpg WIDTH="300" HEIGHT="187">

   Тук използвахме оригиналната ширина от 300 точки, но намалена наполовина височина - 187 точки.

   Можете да използвате също така картинки за фон на web страници. Това става с арибута BACKGROUND на елемента <BODY>. Нека направим страница с фон същата картинка на делфин:

<HTML>
<HEAD>
    <TITLE>background</TITLE>
</HEAD>
<BODY BACKGROUND="snimka.jpg">
</BODY>
</HTML>

    Натиснете ТУК за да видите как изглежда една такава web страница.

Можете да направите фона на страницата неподвижен(при скролиране на страницата нагоре-надолу фона няма да се мести заедно с нея). Това става с атрибута BGPROPERTIES="fixed" разположен след атрибута BACKGROUND. Ето така : <BODY BACKGROUND="dolphin.jpg" BGPROPERTIES="fixed">. За съжаление, BGPROPERTIES се разпознава само от Internet Explorer. При разглеждане с Netscape Navigator фона няма да е неподвижен.
    Картинките често служат и като хиперлинкове към други страници (виж ХИПЕРЛИНКОВЕ). За да добавите хиперлинк към картинка, трябва да използвате двойката елементи <A> и </A>. Вижте един пример :

<HTML>
<HEAD>
    <TITLE>image</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg"><IMG SRC="banners/fan_small.gif" ALT="search.bg"></A>
<A HREF="http://www.dir.bg"><IMG SRC="banners/dirbg.gif" ALT="dir.bg"></A>
</BODY>
</HTML>

    При разглеждане на горния html документ с някой браузър, на екрана ще се появят две картинки. При кликване върху първата ще отивате на адрес www.search.bg, а втората ще води до www.dir.bg.
    Първото изображение е файл с име fan_small.gif, а второто dirbg.gif. И двете се намират в поддиректория banners, затова след атрибута SRC се указва цели път до файла, в случая banners/dirbg.gif. Когато изображението е комбинирано с хиперлинк, то се показва оградено със синя рамка. За да махнете досадната синя рамка, използвайте атрибута. BORDER задава дебелината на рамката около изображението в пиксели. При промяна на стойността на BORDER се променя и дебелината на рамката. Вижте картинката с кучето, само че с рамка с дебелина 10 пиксела :

    Атрибута ALT задава алтернативния текст, който да се показва, когато вие сочите с мишката върху изображението, без да кликвате върху него. Обикновенно това е пояснителен текст, най-често докъде води хиперлинка. Застанете с мишката върху картинката и ще видите за какво става въпрос.

Изменето од trafik - 11.Април.2007 во 21:47

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 10:58

урок:8 ТАБЛИЦИ

Таблицата служи за по-нагледно представяне на Вашата информация. Например по-добре изглежда следния ред :

Таблицата се състои от редове и колони. В горния пример имаме таблица с 3 колони и 1 ред. Всяка клетка от таблицата може да съдържа някакви данни, в примера URL-ите на български портали. За да направите таблица трябва да използвате елемента <TABLE> и съответно </TABLE> за да я завършите. За изграждане на ред в таблицата се използва <TR> и </TR> за края на реда (съкращение от TABLE ROW - ред в таблица) . Колоните във всяки ред се изписват с <TD> и </TD> (TABLE DATA - данни в таблицата), като между тях се вписва съдържанието на клетката. Всъщност, когато използвате <TD> вие създавате една клетка в реда, които сте започнали с <TR>. Колкото елемента <TD> има между два елемента <TR></TR>, толкова колони ще има в таблицата. Когато приключите реда с </TR> автоматично минавате на следващия. Сега ще направя една таблица с 2 колони и 3 реда, като клетките в нея ще оставя празни :

<table align="center" border="1" width="90%">
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td ></td>
    <td></td>
</tr>
</table>



Новото тук е допълнението border="1" към елемента <TABLE>, както и width="90%". Числото в кавичките след border указва дебелината на рамката в пиксели, а това след width широчината на таблицата в проценти от екрана на браузъра. Подравняването на таблицата става с align, като са възможни 3 варианта, "left" (ляво), "center" (в средата) и "right" (вдясно). Особеното при задаването на широчината на таблицата е това, че тя може да се зададе в процент от ширината на екрана, но може да се зададе и в брой пиксели. В първия случай след числото се поставя знака %, а във втория не се поставя. Така че width="50%" задава широчина на таблицата половината от екрана, а width="50" ширина само 50 пиксела. Ето и два примера. Първия е таблица със широчина 80 % и рамка с дебелина 2 пиксела, подравнена вдясно, а втория таблица със ширина 200 пиксела с рамка 5 пиксела, подравнена вляво:<table align="right" border="2" width="80%">

<table align="left" border="5" width="200">

Във втория пример се вижда, че когато съдържанието на клетката е по голямо от размера и, тя автоматично се разширява във височина за да го побере. Вижте как изглежда по-дълъг текст в таблица с една колона и 1 ред със синя рамка с дебелина 3 пиксела и ширина 50% от екрана, подравнена в средата:

<table align="center" border="3" width="50%" bordercolor="#0000FF">
<tr>
<td>
<p align="center">Текста в тази клетка е по-дълъг
от широчината на клетката и за това
таблицата се разширява автоматично във
височина за да побере целия текст.
</td>
</tr>
</table>

Текста в тази клетка е по-дълъг от широчината на клетката и за това таблицата се разширява автоматично във височина за да побере целия текст.

Цвета на рамката се задава след bordercolor и представлява познатото ви вече шестнадесетично число, с което се определя съотношението на трите цвята, червено, зелено и синьо.
В горния пример вече имаме съдържание на клетка. То се поставя между елементите <TD> и </TD> и може да представлява текст, графика, хиперлинк или каквото ви хрумне!

Сега ще ви покажа как изглежда таблицата в началото на тази страница с препратките до дир.бг, сърч.бг и гювеч.бг, само че без рамка :

<table align="center" border="0" width="90%">
<tr>
<td width="33%">
<p align="center"><a href="http://www.dir.bg">www.dir.bg</a> </td>
<td width="33%">
<p align="center"><a href="http://www.search.bg">www.search.bg</a> </td>
<td width="34%">
<p align="center"><a href="http://www.gyuvetch.bg">www.gyuvetch.bg</a> </td>
</tr>
</table>

www.dir.bg
www.search.bg
www.gyuvetch.bg

За първи път тук правиме таблица без рамка (border="0"). Другото ново нещо е, че задаваме ширината на всяка колона поотделно с <td width="33%">. Това се прави за да се разпредели поравно ширината на трите колони в таблицата. Опитайте се да направите горната таблица, като махнете width="33%" след <TD . ,ефекта ще е по-различен.

Можете да променяте цвета на фона на таблицата или да отделните клетки, както и цвета на шрифта ето така:

<table align="center" border="1" width="50%">
<tr>
<td width="50%" align="center" bgcolor="#00FF00"><font color="#0000FF">зелен фон</font></td>
<td width="50%" align="center" bgcolor="#FF0000"><font color="#FFFF00">червен фон</font></td>
</tr>
</table>

align="center" след <TD> указва, че съдържанието на клетката трябва да се подравни в средата. bgcolor дава цвета на фона на клетката. <font color задава цвета на шрифта. Ако bgcolor е след <TABLE> тогава указва цвета на фона на цялата таблица.

Сега да сложим в таблицата някаква картинка.

<table align="center" border="0" width="200">
<tr>
<td valign="middle" align="center"><img border="0" src="back.jpg" width="80" height="40"></td>
<td valign="middle" align="center"><img border="0" src="forward.jpg" width="80" height="40"></td>
</tr>
</table>



в случая middle (в средата).
Самата картинка се поставя с <img border="0" src="forward.jpg" width="80" height="40">. Хубаво е сложите border="0" след <img, иначе картинката ви ще бъде заградена с рамка, което няма да ви хареса много. Следва src=" името на файла" и след това размера му, width="80" ширина и height="40" височина. Ако искате клетката да съдържа линк към друга страница, преди <img.. трябва да добавите познатото ви вече <a href="http:// ...и т.н."> и да завършите с </a> накрая.

Има още 2 параметъра, които указват как да се подравни клетката в таблицата. Първият е cellpadding а втория cellspacing. Първият задава разстоянието от съдържанието на клетката до ръба на клетката, а втория разстоянието между клетките. Пример:

<table align="center" border="1" cellpadding="10" cellspacing="10" width="250">
<tr>
<td valign="middle" align="center"><img border="0" src="back.jpg" width="80" height="40"></td>
<td valign="middle" align="center"><img border="0" src="forward.jpg" width="80" height="40"></td>
</tr>
</table>

cellpadding="10" задава разстояние от ръба на клетката до картинката 10 пиксела, а cellspacing="10" задава разстоянието между клетките да бъде 10 пиксела. Експериментирайте с други параметри. ВНИМАНИЕ! Ако не зададете параметрите cellpadding и cellspacing, техните стойности по подразбиране са "1", а не "0", така че ако не искате да имате разстояние между клетките и ограничаване на разстоянието между съдържанието на клетката и ръба на клетката трябва винаги да пишете cellpadding="0" cellspacing="0".

Можете да обединявате редове и колони в таблицата с colspan=.. и rowspan=.. например :

<table align="center" .border="1" cellspacing="0" cellpadding="0" width="250">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>



<table align="center" border="1" cellpadding="0" cellspacing="0" width="250">
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>



Хитро, нали ? colspan="2" задава да се обединят съседните 2 клетки хоризонтално, а rowspan="2" вертикално. Числото в кавички показва броя на клетките, които искате да се обединят. Ето един по-сложен пример :

<table align="center" border="1" cellpadding="0" cellspacing="0" width="350">
<tr>
<td rowspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>;</td>
<td></td>
</tr>
</table>





Освен width за широчина на таблицата можете да използвате и параметъра height за да задетете и нейната височина. Стойностите също може да са в проценти от екрана на браузъра или в брой пиксели. Също така може освен цвета на рамката да зададете и цвета на светлата и тъмната част от рамката. Това става с bordercolorlight и bordercolordark. Вижте таблица с ширина 200 пиксела, височина 20% от екрана, дебелина на рамката 7 пиксела и два цвята на рамката, съответно тъмносин и светлосин, както и червен фон за клетката:

<table align="center" border="7" cellpadding="0" cellspacing="0" width="200" height="20%" bordercolorlight="#00FFFF" bordercolordark="#000080" bgcolor="#FF0000">
<tr>
<td ></td>
</tr>
</table>

Забележка! Netscape Navigator не разпознава bordercolorlight и bordercolordark и показва цветове по подразбиране.

Замалко да забравя, вместо <TD> можете да използвате <TH> (Table Heading -заглавие в таблицата). В такъв случай текста в клетката автоматично се центрира в средата и се показва удебелен.

Ето какво научихте за таблиците :

1. Таблица се създава с двойката елементи <TABLE> и </TABLE>.

2. Редовете в таблицата се създават с <TR> и </TR> (table row). Клетките във всеки ред (колоните) се създават с <TD></TD>

3. Таблицата може да се подравнява спрямо екрана вляво, вдясно и в средата, както и да се задава нейната ширина в пиксели или в проценти от екрана.

4. Таблицата може да се изчертава със или без рамка. Може да се определи цвета на рамката, както и на светлата и тъмната и част.

5. В клетките на таблицата могат да се съдържат картинки, текст, хиперлинкове, цвят за фон.

6. Клетките в таблицата могат да се обединяват.

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 11:21

урок:9 РАМКИ

    Сигурно често сте виждали страници, които са разделени на отделни части. Такива части в езика HTML се наричат рамки(frames) или фреймове, ако предпочитате. Разделянето на рамки позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За да направите страница с рамки, трябва да създадете отделен html документ, чиято функция е да раздели страницата, да укаже в коя рамка кой друг html документ да се показва, да зададе хиперлинковете от една рамка да се показват в друга. Този html документ е по-различен от другите. Например тялото <BODY> при него е заменено с <FRAMESET>. Вижте един такъв html документ, който разделя страницата на 2 еднакви хоризонтални рамки. В първата рамка се показва страницата 1.html а във втората 2.html.

<HTML>
<HEAD>
    <TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
    <FRAME NAME="first" SRC="1.html">
    <FRAME NAME="second" SRC=2.html">
</FRAMESET>
</HTML>

   Разделянето се задава от елемента <FRAMESET>. Той има 2 атрибута, ROWS и COLS. Първия задава хоризонтално разделяне, втория вертикално. Атрибутите ROWS и COLS имат параметри за височина и ширина на рамката. Параметрите могат да се задават по три начина. Първия е в процент от размера на прозореца, при него след числото задължително се слага знака за процент %. В горния пример се ползва точно такова разделяне. Втория начин е в абсолютни единици - пиксели. Те се задават само с число без никакъв знак отзад. Например ROWS="200,300" разделя прозореца на 2 части, едната с височина 200 пиксела а другата 300. Третия начин е да се зададат относителни стойност. За целта се използва знака звездичка *. Например ROWS="*,3*"означава, че прозореца се разделя на две части, втората от които е три пъти по-голяма от първата. Параметрите се разделят със запетая и са заградени в кавички.Сега ще ви направя една такава страница, ще я разделя вертикално на 3 части, първата ще има ширина 100 пиксела, втората 30 процента от ширината на прозореца на браузъра, а третата ще заема всичкото свободно пространство, независимо колко е то. Понеже няма да задам да се отварят други страници във всяка рамка, те ще бъдат празни:

<HTML>
<HEAD>
    <TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*">
    <FRAME NAME="first" >
    <FRAME NAME="second">
    <FRAME NAME="third">
</FRAMESET>
</HTML>

    Всяка рамка се създава с елемента <FRAME>. Чрез него се задават атрибутите на рамката. Един от тях е името и чрез атрибута NAME. Как се използва името ще обясня след малко. Друг атрибут на <FRAME> е SRC, следван от името на страницата която искате да се показва в тази рамка. Ако обърнахте внимание, след като страртирахте страницата в горния пример, всяка рамка си има някакъв ръб(border). Ако посочите с к*рсора на мишката върху ръба, кликнете върху него и докато държите натиснат бутона влачите мишката перпендикулярно на ръба, то размера на рамката се променя. Можете да забраните това с атрибура NORESIZE на елемента <FRAME>. Също така можете да зададете дебелината на ръба в пиксели с атрибута BORDER и цвета му с BORDERCOLOR на елемента <FRAMESET>. Нека направим предишния пример така, че да забраним промяната на размера на рамката и да направим ръба със син цвят и широк 6 пиксела.

<HTML>
<HEAD>
    <TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*" BORDER="6" BORDERCOLOR="0000FF">
    <FRAME NAME="first" NORESIZE>
    <FRAME NAME="second" NORESIZE>
    <FRAME NAME="third" NORESIZE>
</FRAMESET>
</HTML>

    . Ако зададете BORDER="0" ръба на рамката няма да се вижда. Можете да задавате ширината и цвета на ръба на всяка рамка поотделно. Ширината се задава с атрибута FRAMEBORDER на елемента <FRAME>, а цвета с BORDERCOLOR.

   Рамките могат да се влагат една в друга. Например, можете да разделите страницата на две части хоризонтално, а долната част да разделите на още 2 и т.н.. Вижте как става:

<HTML>
<HEAD>
    <TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" >
    <FRAME NAME="first" NORESIZE>
        <FRAMESET COLS="20%,80%">
            <FRAME NAME="second" NORESIZE>
            <FRAME NAME="third" NORESIZE>
        </FRAMESET>
</FRAMESET>
</HTML>

    Така горната рамка е по цялата дължина на прозореца на браузъра и има ширина 100 пиксела, а долната е разделена на две вертинални части, съответно на 20 и 80 процента от ширината на прозореца.   Ако искате можете да разделите страницата първо вертикално на две, като втората рамка я разделяте допълнително на две хоризонтални рамки:

<HTML>
<HEAD>
    <TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,*" >
    <FRAME NAME="first" NORESIZE>
        <FRAMESET ROWS="20%,80%">
            <FRAME NAME="second" NORESIZE>
            <FRAME NAME="third" NORESIZE>
        </FRAMESET>
</FRAMESET>
</HTML>

Сега нека направим една наистина работеща страница с рамки. Нека страницата да бъде от две рамки. Първата да се казва "menu" и да съдържа хиперлинкове до известни български сайтове. Втората рамка с име "main" ще бъде празна, като линковете от първата ще се показват във втората. За целта първо трябва да направим html документа който да се показва в първата рамка :

<HTML>
<HEAD>
    <TITLE>menu</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg">search.bg</A><BR>
<A HREF="http://www.dir.bg">dir.bg</A><BR>
<A HREF="http://www.gyuvetc.bg">гювеч.бг</A>
</BODY>
</HTML>

   Запазете този файл като menu.html. Неговата функция е да ни препраща към сайтовете при кликване върху надписите search.bg , dir.bg и гювеч.бг . Този html документ ще се визуализира в лявата рамка. Дясната рамка първоначално ще я оставим празна. Нека сега да направим html документа който да раздели страницата на рамки :

<HTML>
<HEAD>
    <TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="100,*" BORDER="0">
    <FRAME NAME="menu" SRC="menu.html" TARGET="main">
    <FRAME NAME="main">
</FRAMESET>
</HTML>

   Този html документ го запазете като frame.html. Чрез него разделяме страницата на две рамки вертикално. Едната е широка 100 пиксела, а втората заема останалата част от прозореца на браузъра. В първата рамка сме задали да се покаже файлът menu.html който направихме за тази цел по-горе. На тази рамка сме дали името "menu". Новото тук е атрибута <TARGET> на елемента <FRAME>. този атрибут показва на браузъра в коя точно рамка да се отварят хиперлинковете, които съдържа страницата в тази рамка. В този случай на втората рамка сме дали име "main" и атрибута <TARGET> от първата рамка сочи именно към втората.
    Понеже сме забранили да се показва ръба на рамките (BORDER="0"), тази страница ще изглежда сякаш няма рамки. Когато кликнете върху някой от хиперлинковете обаче, в дясната част на страницата(т.е. във втората рамка) ще се отваря съответния сайт.
    Ако страницата която се отваря в рамката е по-голяма от размера на самата рамка, браузъра по подразбиране показва хоризонтален или вертикален плъзгач(scrollbar) с помощта на който можете да разглеждате цялата страница. Този плъзгач излиза в дязната или долната част от рамката, или и в двете в зависимост от големината на страницата. Вие можете да определите дали този плъзгач да се показва или не с атрибута SCROLLING на елемента <FRAME>. Този атрибут от своя страна има три параметъра. SCROLLING="yes" задължава рамката винаги да показва плъзгачите, независимо дали са нужни или не. SCROLLING="no" забранява показването им във всички случаи. Тази забрана обаче би била много неудобна ако страницата е по голяма от рамката, защото няма да можете да я видите цялата. SCROLLING="auto" е стойността по подразбиране. С параметър "auto" плъзгачите се показват само когато има нужда от тях. Сега нека направим една страница с две рамки. И в двете да се показва сайта на сърч.бг, само че в първата плъзгачите да са забранени, а във втората да се показват задължително.

<HTML>
<HEAD>
    <TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
    <FRAME NAME="search1" SRC="http://www.search.bg" SCROLLING="no">
    <FRAME NAME="search2" SRC="http://www.search.bg" SCROLLING="yes">
</FRAMESET>
</HTML>

Tattoo Beauty Кликни и види ги опциите

Сениор

Tetovirana Sexy Ubavica

Регистриран: 10.Август.2006
Статус: Офлајн
Поени: 4549

Опции за коментарот

Цитирај Tattoo Beauty

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 13:08

Ако сакаш тема за html отвори си немам ништо против ,оваа тема доволно јасно објаснив што бара!!!!!!!!!!!!!!!!!!!!

Изменето од SeXY - 11.Април.2007 во 13:12

Skin-Artists.com

TattooPassion

NRGMKD

Сениор

THE EXTERMINATOR

Регистриран: 18.Ноември.2005
Статус: Офлајн
Поени: 7512

Опции за коментарот

Цитирај NRGMKD

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 14:09

SeXY полека малку..... Човекот не мисли ништо лошо...Ќе отвориме тема за html и ќе ги префрлиме постовите таму...Без нервози. ОК? Wink

The purpose of war is not to die for your country but to make the other bastard die for his !!! - General George S. Patton - Commander of the III US Army Corps.

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 21:22

урок:10 МЕЛОДИИ

     Езика HTML ви позволява да слагате музикален фон на страницата си. За целта трябва да използвате някои широко използвани музикални формати, като .mid и .wav. Тук за първи път ще се сблъскате с разликата в поддръжката на HTML от страна на Netscape Navigator и Internet Explorer.

    Нека започнем с поддръжката от страна на Internet Explorer. За да включите този файл като музикален фон в Internet Explorer трябва да използвате елемента <BGSOUND> в главата <HEAD>. Като атрибут на <BGSOUND> за указване на пътя до музикалния файл се използва SRC .

<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND SRC="http://www.search.bg/music.mid" LOOP="-1">
</HEAD>
<BODY>
</BODY>
</HTML>

    Разбира се, ако файла се намира във вашата директория на сървъра не е нужно да указвате целия път, а само да напишете <BGSOUND SRC="music.mid" LOOP="-1">. Атрибута LOOP задава броя на повторенията на мелодията. Когато   LOOP="-1" тогава мелодията започва отново, веднага след като свърши. Ако искате да се повтори два пъти например и после да спре, трябва да зададете LOOP="2". Netscape Navigator не разпознава елемента <BGSOUND>.

    Възпроизвеждането на звук от Netscape Navigator става с елемента <EMBED>, разположен в тялото <BODY>. Всъщтност <EMBED> показва едно меню за управление на звука. То изглежда ето така :

    <EMBED> е елемент за визуализация на мултимедия. С негова помощ можете освен музика да сложите и видео на страницата си, например някой .avi файл. Разбира се трябва да се съобразите с големината на файла, защото никой няма да чака 5-6 минути например да се отвори вашата страница, ако сте прикачили голям .avi файл. Ето как се ползва елемента <EMBED> за закачане на midi файла като музикален фон :

<HTML>
<HEAD>
<TITLE>embed</TITLE>
</HEAD>
<BODY>
<EMBED SRC="music.mid" WIDTH="128" HEIGHT="128" LOOP="true">
</BODY>
</HTML>

    Както виждате, пътя до файла и тук се указва с атрибута SRC . Атрибутите WIDTH и HEIGHT задават ширината и височината на панела за контрол на звука в пиксели. Ако искате панела да се вижда е добре задължително да задавате стойности на атрибутите WIDTH и HEIGHT. Ако пропуснете да ги зададете браузъра може да покаже нещо, което няма да ви хареса. Атрибута LOOP може да има две стойности - true и false. Когато стойността е true, мелодията започва отново веднага след като свърши, докато при false се просвирва само веднаж и спира. Ако зададете числова стойност на LOOP, мелодията се просвирва толкова пъти, колкото е числото, например LOOP="3" ще изсвири мелодията три пъти и ще спре.
    Менюто за управление на звука може да не се визуализира. Това става с атрибута HIDDEN. Той има 2 стойности - true и false. При true панела остава скрит а при false се визуализира. Когато създавате музикален фон, разбира се трябва да използвате стойност true.
    Елемента <EMBED> се разпознава и от Internet Explorer и от Netscape Navigator, но двата браузъра работят с различни атрибути. Например Internet Explorer вместо LOOP използва атрибута PLAYCOUNT за повторение на изпълнението. Netscape Navigator от своя страна позволява да контролирате силата на звука с атрибута VOLUME. Internet Explorer не разпознава атрибута VOLUME. Така че стигнахме до извода, че за да добавите музикален фон към своята страница трябва да използвате и двата метода, и <EMBED>, и <BGSOUND>. Ето как би изглеждала една готова страница с музикален фон :

<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND SRC="http://www.search.bg/music.mid" LOOP="-1">
</HEAD>
<BODY>
<EMBED SRC="http://www.search.bg/music.mid" HIDDEN="true" LOOP="true">
</BODY>
</HTML>

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот

Благодарам(0)

Одговор

Испратена: 11.Април.2007 во 21:27

урок:11 META елементи

    В главата на HTML документа HEAD освен заглавието на web страницата може да се поставя информация, която се използва от търсещите машини. Това става с помощта на МЕТА таговете. Синтаксиса на МЕТА елемента е следния :

<META NAME="keywords" VALUE="..стойности...>

<META> тагът няма съответния затварящ елемент </МЕТА>. Нека направим сега една страница, като използваме МЕТА тагове :

<HTML>
<HEAD>
    <TITLE> META tags </TITLE>
<META NAME="author" VALUE="Peter Svetoslavov">
<META NAME="description" VALUE="страница, съдържаща МЕТА елемент">
<META NAME="keywords" VALUE="html, meta, tag, dokument">
</HEAD>
<BODY>
</BODY>
</HTML>

   Атрибута NAME определя типа на информацията за страницата, а VALUE нейната стойност.
В примера NAME="author" VALUE="Peter Svetoslavov" показва на търсачката по МЕТА характеристики че автора на страницата е Петър Светославов.

NAME="description" задава описанието на страницата. Винаги се старайте описанието да бъде кратко и ясно.

NAME="keywords" задава ключови думи при търсенето. След VALUE трябва да изпишете всички ключови думи, характерни за страницата ви, като внимавате да не се повтарят. Старайте се да обхванете всичко. Така страницата ви ще бъде по-лесно откриваема за търсачките.

МЕТА таговете могат да извършват и действия, които не са свързани със съдържанието на страницата. Ето някои от тях :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
Този МЕТА елемент зарежда предварително кодовата таблица на символите, в случая кирилица. Изписвайте този ред винаги, когато страницата ви е на кирилица. В противен случай някой браузър може да покаже маймунски символи.

<META HTTP-EQUIV="Content-Language" CONTENT="bg"> - указва че съдържанието на страницата е на български език.

<META HTTP-EQUIV="refresh" CONTENT="5"> - презарежда страницата през определен период от време, в случая 5 секунди.

<META HTTP-EQUIV="refresh" CONTENT="5;URL=http://www.search.bg" > - пренасочва към друга страница след определен период от време, в случая след 5 секунди ви пренасочва към www.search.bg

<META HTTP-EQUIV="expires" CONTENT="friday", 21 July 2000, 15:23:22 GMT"> - показва, че съдържанието на страницата след тази дата и час вече не е актуално и забранява четенето от кеша на диска.

Изменето од trafik - 11.Април.2007 во 21:31

trafik

Група

ТатароТурко-Монгол

Регистриран: 10.Декември.2006
Локација: Bulgaria
Статус: Офлајн
Поени: 0

Опции за коментарот