Помогни ни да направим Uroci.net по - богат! Добави урок

Как да си направите първия сайт

uBaH4y   трудност:    видян: 97413



СПИСЪЦИ

Езика HTML ви дава възможност да използвате три вида списъци - подредени, неподредени и списъци с обяснения. Подредените списъци са номерирани. Неподредените списъци използват вместо номерация, някакъв символ (например точка). Списъците с обяснения не използват символ или цифра пред текста. Вместо това поставят обяснителен текст след всеки елемент от списъка.
Подреден списък можете да създадете с елемента <OL> и съответно затварящия </OL>. Елементите на списъка се задават с елемента <LI>, който може да се използва като двойка елементи или като единичен елемент. Нека направим един такъв списък:

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


Въпреки, че не сме задали да се показват номера 1. 2. 3., те се добавят автоматично в списъка. Ако изкате списъка да се показва с римски вместо с арабски цифри, трябва да добавите атрибут TYPE на елемента <OL>. Атрибута TYPE показва какви символи да се визуализират преди елементите на списъка. Стойностите на атрибута TYPE за подредените списъци са:
TYPE=1 - за списъци, номерирани с арабски цифри
TYPE=a - за списъци, номерирани с малки латински букви
TYPE=A - за списъци, номерирани с големи латински букви
TYPE=i - за списъци, номерирани с малко римски цифри
TYPE=I - за списъци, номерирани с големи римски цифри
Така че ако искате вместо

1. захар
2. яйца
3. сода каустик за тъщата

на екрана да се вижда

I. захар
II. яйца
III. сода каустик за тъщата

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

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


При неподредените списъци също можете да използвате атрибута TYPE. Валидните стойности за него са disk(диск), square(квадрат) и circle(кръг).
Списъците с обяснения се създават с двойката елементи <DL></DL>. Елементите на списъка се задават с <DT>, а обяснението към него с <DD>:

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


Ако желаете, можете да влагате един в друг списъци от един вид или от различни видове. например:

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

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

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


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


ХОРИЗОНТАЛНИ ЛИНИИ

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

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

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


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

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


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

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


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

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



Страници: «1 2 3 4 5 »

Сподели урока:



Коментари (20)

DarkManX на 01.12 2006 в 13:33ч.
Тва е полезно.
tishomircho на 14.12 2006 в 11:58ч.
полезна информацийка.
uBaH4y на 06.01 2007 в 18:46ч.
Мдам Много полезно добро е за конкурса
azerot на 06.01 2007 в 21:27ч.
това е остаряла информация и плюс това е преписана
petarstoev на 10.01 2007 в 21:15ч.
ае Вие няма ли да спрете с тва е ти ли си автора на оригинала за някой нее стара ...
charmed на 30.01 2007 в 21:27ч.
А, как се прави така, че да се оразмерава сайта в зависимост от резолюцията на екрана на потребителя? В смисъл ако е с по голяма да се овеличават снимките, кекстовете, ... или обратно ако е с по ниска. Май е с таблците, но не разбрах как. Мерси предварително
palq4o на 25.02 2007 в 01:01ч.
Мерси за урока!
VeNuM® на 12.05 2007 в 16:40ч.
Защо не ми стават песните и линковете?
Моля ви помгнете!
jorkata_95 на 12.06 2007 в 22:56ч.
А като няправя този сайт как мога да го публикувам в интернет или той сам се публикува?
jorkata_95 на 13.06 2007 в 17:02ч.
как?
kikolo1 на 09.04 2008 в 13:17ч.
за да се публикува сайта е нужна FTP програма.
linkolin на 17.04 2008 в 18:13ч.
ами аз имам малък проблем:губи ми се нещо в началото!тва за цветовете каде да го напиша в нов нотепад или в промяната на първия ми сайт??? плс пишете! ;)
krasimircho на 19.07 2008 в 16:11ч.
А БЕ АЗ НИЩО НЕ РАЗБРАХ! АЗ СЪМ НАПРАВИЛ САЙТА, НО НА ПАРЧЕТА КАК ДА ГО СЪЕДИНЯ?
rufi на 26.07 2008 в 09:27ч.
В моя Ноутпад българския език излиза,,като точици ,,,
pafel4y на 17.08 2008 в 17:19ч.
rufi ми смени си стилът на шрифтът :) напрмиер на Arial или пък на Comic Sans MS аз поне и на двата съм бил и си става всичко :)
krimunal на 24.10 2008 в 11:44ч.
плс кажете ми как да се суедини саита и да стане едно и как да се качи пишете моля ви !!!
zarov2 на 10.12 2008 в 22:46ч.
много е зле....
с 2 думи нямам думи :Д
езикът не става хипер линковете също .. както и снимките (и снимки с хиперлинкове)
вече горе долу се научих как става но не от тук!
това което научих от тук е че трябва да има / и това е сичко...
wowmanqk96 на 08.07 2009 в 13:56ч.
ако може и да направим един сайт с рег система с сичко ъплоад до 1 гб ше е супер аз ако знаех ше хвана напиша една тема :) ама нз аре плс направете една тема
charmed на 16.08 2009 в 17:16ч.
Значи в този урок има 2 основни грешки, а именно: Пропуснати са мета таговете без който надписи на кирилица ще стават нечетливи и това тук не е HTML, а XHTML който не се чете от всички браузъри за това и на доста хора не им работят работите. От хипер линка махнете x от xsrc и ще ми работи както и на други места има излишно x което прави таговете безполезни в доста от случайте.
pufi на 02.10 2009 в 11:11ч.
добре де...нищо не става....как да го разширя на това което пише...егати скапания урок

Регистрирайте се, за да добавите коментар


Калдейта Ком ЕООД - © 2003-. Всички права запазени.
Препоръчваме: IT Новини