Таблици в HTML - упражнение

 

Таблици в HTML

  1.Основни тагове

Таблиците в HTML-документа са разположени между двата основни тага <table> и </table>.

Между тези два тага се изписват:

- таговете за табличен ред - <tr> и </tr> 
- таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>

За да има таблицата видими очертания трябва в тага table да се добави атрибута border и да му се зададе някаква стойност, например 1.

-таг за заглавие на таблицата - <th> и </th> . Всеки текст разположен между таговете <th> и </th> се показва в центъра на клетката и удебелен.

- таговете <thead> </thead>, <tfoot> </tfoot> и 
<tbody> </tbody> позволяват групиране на редовете на таблицата.

Една таблица може да съдържа горна част (head), долна част (foot) и средна част или тяло (body). Ако в тялото (средната част) на таблицата е поместена много информация, уеб-дизайнера ще "загуби от поглед" горната и долната част на таблицата. За удобство и прегледност в текстовия редактор, където се пише HTML-кода, чрез таговете <thead>, <tfoot> и <tbody> горната и долната част на таблицата могат да се групират непосредствено една под друга, а "тялото", т.е. средната част на таблицата да се изпише най-отдолу. В браузъра горната част на таблицата ще се показва най-горе, средната част - по средата и долната част - най-долу.

2.Атрибути на тага <table>

border="цифрова стойност" задава рамка на таблицата в пиксели

bordercolor="цвят" задава цвят на рамката

bgcolor="цвят" задава цвят на фона на таблицата

background="изображение" задава изображение като фон

align="left, center или right" задава позициониране на таблицата вляво, в центъра или вдясно

width="цифрова стойност или процент" задава дължина на таблицата в пиксели или в процент от свободното пространство

cellpadding="цифрова стойност или процент" задава разстоянито между съдържанието на клетката и стените и в пиксели или процент

cellspacing="цифрова стойност или процент" задава разстоянито в пиксели или процент между отделните клетки

frame="една от стойностите: lhs, rhs, vsides, above, below, hsides, void, box, border", където

lhs премахва горната, долната и дясната рамка на таблицата
rhs премахва горната, долната и лявата рамка на таблицата
vsides премахва горната и долната рамка на таблицата
above премахва страничните и долната рамка на таблицата
below премахва страничните и горната рамка на таблицата
hsides премахва страничните рамки на таблицата
void премахва външните рамки на таблицата
box и border показват всички рамки (същия ефект е по подразбиране)

!!! За да се ползва трибута frame трябва на атрибута border  да е зададена стойност различна от 0.

В горния пример е създадена таблица без външни рамки чрез използване на стойността void в атрибута frame.

Забележка: атрибутите "align" и "bgcolor" на тага <table> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат.

3.Атрибути на тага <tr>

align="left, center или right" позиционира съдържанието на реда вляво, в центъра или вдясно

valign="top, middle или bottom" позиционира съдържанието на реда горе, в средата или долу

bgcolor="цвят" задава цвят на фона на реда

bordercolor="цвят" задава цвят на рамката (задължително е в такъв случай стойността border на таблицата да бъде различна от 0)

Забележка: атрибута "bgcolor" на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.

4.Атрибути на тага <td>

align="left, center или right" позиционира съдържанието на колона вляво, в центъра или вдясно

valign="top, middle или bottom" позиционира съдържанието на колона горе, в средата или долу

bgcolor="цвят" задава цвят на фона на колоната

background="изображение" задава изображение като фон на клетката

colspan="цифрова стойност" определя колко колони обхваща една клетка

rowspan="цифрова стойност" определя колко реда обхваща една клетка

width="цифрова стойност или процент" задава ширина на клетката в пиксели или процент от възможното пространство

height="цифрова стойност" задава височина на клетката в пиксели

Забележка: атрибутите "bgcolor", "height" и "width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат. 

Горния пример е за таблица центрирана в браузера, с ширина 80%, височина 300 пиксела, с рамка 1 пиксел, жълт фон, разстояние от съдържанието до рамката 2 пиксела, разстояние между клетките 2 пиксела, с 2 странични колони, обхващащи по 3 реда и по един горен и долен ред, обхващащи по 3 колони.

Проект

 Създайте следната форма чрез HTML:

Формуляри падащи менюта, многоредово поле и бутоните SUBMIT и RESET

  Друг тип формуляри са бутоните SUBMIT и RESET. 

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

     Бутона RESET  изчиства полето, в случай че сте въвели нещо в него, а бутона SUBMIT потвърждава въведената информация. В случая при натискане на бутона SUBMIT няма да има ефект. Опитайте! Въведете нещо в полето и натиснете бутоните! Ето как изглежда HTML кода на горния пример :

<HTML
<HEAD>
<TITLE>submit and reset</TITLE>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="T1" SIZE="20">
<INPUT TYPE="submit" VALUE="Submit" NAME="B1">
<INPUT TYPE="reset" VALUE="Reset" NAME="B2">
</FORM>
</BODY>
</HTML>

   SUBMIT бутон се създава с атрибута TYPE="submit". Атрибута VALUE="Submit" задава какъв да бъде надписа на бутона. Можете да го промените по свое желание. За бутона RESET се ползва атрибута TYPE="reset". Останалите атрибути на RESET действат  аналогично с тези на SUBMIT.

---------------------------------------------------------------------------------------------------------------------------

   Можете да създадете формуляр във вид на многоредово поле с елемента <TEXTAREA>. Размера на полето се задава с атрибутите COLS и ROWS. COLS показва колко символа да е широко полето, в случая 30, а ROWS от колко реда да се състои, в случая 3. 

<HTML

<HEAD>

<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM >
<TEXTAREA ROWS="3" NAME="S1" COLS="30">textarea</TEXTAREA>
</FORM>
</BODY>
</HTML>

    Когато използвате елемента <TEXTAREA>, не се използва елемент <INPUT>. Текстът, който се намира между  <TEXTAREA> и </TEXTAREA>,  се показва по подразбиране в полето. Ако пропуснете текста полето ще се покаже празно.

 Последния тип формуляри, който ще ви покажа са падащите менюта. Такъв вид формуляри се създават с елемента <SELECT>. Вижте : 

  избор 1 избор 2 избор 3 

    Кликнете с мишката върху стрелката надолу и ще се покаже меню с 3 избора, избор 1, избор 2 и избор 3. Стойностите, които да се показват в менюто се задават с елемента <OPTION>. Вижте HTML кода на горния пример :

   Атрибута SIZE на елемента <SELECT> задава броя на редовете, които да се показват в менюто. Когато SIZE="1", тогава се наблюдава т.нар. падащо меню. Ако зададете стойност по-голяма от 1, тогава вече ще се показва вертикална превъртаща лента. Вижте горното меню, само че със стойност SIZE="5" :

 Избор 1 Избор 2 Избор 3 Избор 4 Избор 5 Избор 6 Избор 7 Избор 8 

задача:

Формуляри кутии с отметки и радиобутони

 2. Друг тип формуляри са кутиите с отметки.

Те се задават със стойността checkbox на атрибута type.

Кутиите с отметки служат за избор на една или няколко възможности едновременно. Ако кликнете в кутията, отметката се появява. Ако кликнете повторно отметката изчезва. Можете да правите отметки в повече от една кутия. По подразбиране кутиите с отметки се показват празни.

3. Формуляри – радиобутони

    Подобни на кутиите с отметки са радиобутоните. Разликата е, че при радиобутоните може да бъде отметнат само един бутон. Когато изберете друг бутон, отметката в предишния изчезва. Особеното при радиобутоните е, че всички трябва да носят едно и също име, в случая NAME="R1". Радиобутон се създава с атрибута TYPE="radio".

Задача 2: Да се създаде форма, за избор на дисциплините, които изучават студенти през първи семестър:

Задача 3: Създайте следния формуляр с радиобутони:

Формуляри - текстово поле

   Освен за показване на информация WEB страниците могат да служат и за събиране на информация от потребителя. Това става с така наречените формуляри. За съжаление езика HTML не ви позволява да управлявате информацията във формулярите, а само да ги разполагате на страницата си. Двойката елементи за разполагане на формуляри е <FORM></FORM>. Между тази двойка елементи могат да се разполагат неограничен брой формуляри. Всеки един формуляр се разполага с единичния елемент <INPUT>. Този елемент трябва задължително да съдържа двата атрибута NAME и TYPE. Атрибута NAME задава името на формуляра а TYPE видът му. Нека разгледаме различните стойности на TYPE.

<HTML>
<HEAD>
    < TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form1" TYPE="text">
</FORM>
</BODY>
</HTML>

Този HTML документ ще покаже на екрана следното текстово поле: 

Такъв тип едноредово текстово поле се задава със стойността на атрибута TYPE="text". Вие можете да променяте дължината на полето с атрибута SIZE. Ако пропуснете SIZE се показва поле с дължина 20 символа. По подразбиране полето се показва празно, но вие можете да  зададете някаква начална стойност на полето. Това става с атрибута VALUE. Нека направим едно текстово поле с дължина 50 символа и надпис в него "това поле съдържа текст и има дължина от 50 символа".

<HTML>
<HEAD>
    < TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form2" TYPE="text" SIZE="40" VALUE="това поле съдържа текст и има дължина от 40 символа">
</FORM>
</BODY>
</HTML>

Понеже текста който се показва е по-дълъг от 40 символа, последните няколко символа се скриват. Ако кликнете върху полето можете да местите видимата част на текста наляво и надясно с помощта на стрелките за движение от клавиатурата. Също така можете да напишете свой текст в полето. Ако текста който пишете е по дълъг от дължината на полето, той автоматично започва да се скролира наляво и разкрива новонаписаните символи. Опитайте! Можете да ограничите дължината на изписвания текст с атрибута MAXLENGHT. Например с MAXLENGHT="40" ограничавате надписа до 40 символа.

Друг параметър на атрибута TYPE е password. Той действа по същия начин като text, с изключение на това, че в полето не се показва самия текст, който въвеждате, а звездички.

<HTML>
<HEAD>
    < TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form3" TYPE="password">
</FORM>
</BODY>
</HTML>

Напишете нещо в това поле и ще видите как всеки символ се заменя със звездичка. Това е особено полезно, когато текста е някаква парола и не трябва да се вижда от хората около вас.

Задача 1: Да се създаде формуляр с 3 полета за въвеждане на текст, всяко с дължина 45 знака, с ограничение за вписване до 40 знака, като първото поле е предназначено за името на клиента, второто - за имейла на клиента и третото - за уеб-адреса на клиента.
Ако желаете да въведете във формуляра текстово поле, в което да не може да се пише, трябва да добавите в тага <input> атрибута readonly със стойност самия атрибут (readonly="readonly").

Препратки в HTML.Текст за упражнения

    Препратка към част от страницата. За да се осъществи този тип препратки, е нужно :

·                                             Първо - да се окаже цел (целта е наименовано място в дадена web страница).Това става чрез атрибута name="стойност" като стойността е някакъв текст. Например:

<а name="sudurjanie" >Съдържание</a>

·                                             Ако искаме да окажем цел на заглавие , просто дописваме атрибута id="стойност" в тага <h>...</h>. Например :

<h2 id="zaglavie">Заглавие</h2>

·                                             Второ - да се окаже друга препратка, която да превърти до дадената цел. Това става чрез атрибута href="стойност" като стойността e "#име на целта" . Например :

<а href="#sudurjanie">Препратка,водеща към Съдържанието</a>

Сняг - Атанас Далчев

Над тези стръмни стрехи от желязо

и тези булеварди от асфалт

поне един път няма ли да слезе

снегът от небесата като бял

и лъчезарен ангел? Аз не вярвам.

Във този черен като въглен град

ще бъде зимата наверно черна,

незнайни – ангелите и снегът.

И ако слезе някога, без жал

жестоки ще го стъпкат със обувките си

стражарите и проститутките,

ще му почерни белите пера

димът на гарите и на комините. . .

Бял сняг ще има само във градините,

където са играели деца.

1929 Атанас Далчев

Радой Ралин - Завръщане

Ти се връщаш сломен и стареещ

след години пак в родния град.

Продължава ли той да живее

от предишната вяра съгрят?

Пак дали той красиво загасва

оня залез зад синия рид,

притаил във рубинена ласка

на града възрожденския вид?

Пак дали са тъй тесни и криви

всички улици с бял калдъръм,

за да могат така да отбиват

на каруците тежкия ритъм?

Пак дали в тези къщи старинни,

увенчани от тежки асми,

има тъжни, добри домакини

и свенливи работни моми?

И за теб ли стои запазен

един дом със старинен уют?

Наемателят нов ли погази

на бащите красивия труд?

С твойте близки отдавна си скъсал.

По-добре се не срещай със тях!

Ще почувстваш фалшиво гласа си

и на спомена бързия крах.

И защо ще се връщаш тогава?

Пъден бил ли си? Кой ти е крив?

И сърцето така заболява,

че от болката ставаш щастлив.

Радой Ралин - Мечтател

Залезът настойнически зад мене върви

и ми подиграва привичките.

Сякаш го слушам как сладко мълви:

"Колко си смешен мечтател, мой миличък!"

Аз си подсвирквам безгрижно с уста

и дори го не чувам.

Бързам за някакъв краен квартал

и разсъждавам развълнувано:

Аз не желая живот застоял,

нито спокойно огнище.

Вечно бих искал

да крача през локви и кал

и да нямам със себе си нищо.

Нека гърдите ми реже с трион

завистливата кашлица.

Нека дъжд и листа

върху мен да се ронят;

аз ще крача, ще крача.

Ако имам нещо скъпо в света,

това са непознатите улици...

Аз вървя, аз вървя, аз вървя

и вятъра нещо одумвам.

О, не желая да живея сто години,

да си имам къща, старица и внучета.

Нека млад, нека двайсетгодишен загина,

но бъдещето да предвкуся.

И така безпричинно да умра,

като крача, покосен да се стрепна,

с усмивка, предизвикана от радост

и притиснати весело клепки.

Тогава

моят приятел -

недоволникът вятър -

ще изфучи от тъга.

А старият залез, мъдър и притворен,

нека наставнически пак си говори

върху трупа ми млад и силен:

"Колко бе смешен мечтател, мой миличък!"

Пейо Яворов - ДВЕ ХУБАВИ ОЧИ

Две хубави очи. Душата на дете

в две хубави очи; - музика - лъчи.

Не искат и не обещават те. . .

Душата ми се моли,

дете,

душата ми се моли!Страсти и неволи

ще хвърлят утре върху тях

булото на срам и грях.

Булото на срам и грях -

не ще го хвърлят върху тях

страсти и неволи.

Душата ми се моли,

дете,

душата ми се моли. . .

Не искат и не обещават те! -

Две хубави очи. Музика, лъчи

в две хубави очи. Душата на дете.

Обесването на Васил Левски

О, майко моя, родино мила,

защо тъй жално, тъй милно плачеш?

Гарване, и ти, птицо проклета,

на чий гроб там тъй грозно грачеш ?

Ох, зная, зная, ти плачеш, майко,

затуй, че ти си черна робиня,

затуй, че твоят свещен глас, майко,

е глас без помощ, глас във пустиня.

Плачи! Там близо край град София

стърчи, аз видях, черно бесило,

и твой един син, Българийо,

виси на него със страшна сила.

Гарванът грачи грозно, зловещо,

псета и вълци вият в полята,

старци се молят богу горещо,

жените плачат, пищят децата.

Зимата пее свойта зла песен,

вихрове гонят тръни в полето,

и студ, и мраз, и плач без надежда

навяват на теб скръб на сърцето.

Никола Вапцаров - Прощално

На жена ми

Понякога ще идвам във съня ти

като нечакан и неискан гостенин.

Не ме оставяй ти отвън на пътя –

вратите не залоствай.

Ще влезна тихо. Кротко ще приседна,

ще вперя поглед в мрака да те видя.

Когато се наситя да те гледам –

ще те целуна и ще си отида.

Никола Вапцаров - ВЯРА

Ето - аз дишам,

работя,

живея

и стихове пиша

(тъй както умея).

С живота под вежди

се гледаме строго

и боря се с него,

доколкото мога.

С живота сме в разпра,

но ти не разбирай,

че мразя живота.

Напротив, напротив! -

Дори да умирам,

живота със грубите

лапи челични

аз пак ще обичам!

Аз пак ще обичам!

Да кажем, сега ми окачат

въжето

и питат:

"Как, искаш ли час да живееш?"

Веднага ще кресна:

"Свалете!

Свалете!

По-скоро свалете

въжето, злодеи!"

За него - Живота -

направил бих всичко. -

Летял бих

със пробна машина в небето,

бих влезнал във взривна

ракета, самичък,

бих търсил

в простора

далечна

планета.

Но все пак ще чувствам

приятния гъдел,

да гледам как

горе

небето синее.

Все пак ще чувствам

приятния гъдел,

че още живея,

че още ще бъда.

Но ето, да кажем,

вий вземете, колко? -

пшеничено зърно

от моята вера,

бих ревнал тогава,

бих ревнал от болка

като ранена

в сърцето пантера.

Какво ще остане

от мене тогава? -

Миг след грабежа

ще бъда разнищен.

И още по-ясно,

и още по-право -

миг след грабежа

ще бъда аз нищо.

Може би искате

да я сразите

моята вяра

във дните честити,

моята вяра,

че утре ще бъде

живота по-хубав,

живота по-мъдър?

А как ще щурмувате, моля?

С куршуми?

Не! Неуместно!

Ресто! - Не струва! -

Тя е бронирана

здраво в гърдите

и бронебойни патрони

за нея

няма открити!

Няма открити!

БЪЛГАРСКИЯТ ЕЗИК

Език свещен на моите деди

език на мъки, стонове вековни,

език на тая, дето ни роди

за радост не - за ядове отровни.

Език прекрасен, кой те не руга

и кой те пощади от хули гадки?

Вслушал ли се е някой досега

в мелодьята на твойте звуци сладки?

Разбра ли някой колко хубост, мощ

се крий в речта ти гъвкава, звънлива -

от руйни тонове какъв разкош,

какъв размах и изразитост жива?

Не, ти падна под общия позор,

охулен, опетнен със думи кални:

и чуждите, и нашите, във хор,

отрекоха те, о, език страдални!

Не си можал да въплътиш във теб

създаньята на творческата мисъл!

И не за песен геният ти слеп -

за груб брътвеж те само бил орисал!

Тъй слушам сe, откак съм на света!

Сe туй ругателство ужасно, модно,

сe тоя отзив, низка клевета,

що слетя всичко мило нам и родно.

Ох, аз ще взема черния ти срам

и той ще стане мойто вдъхновенье,

и в светли звукове ще те предам

на бъдещото бодро поколенье;

ох, аз ще те обриша от калта

и в твоя чистий бляск ще те покажа,

и с удара на твойта красота

аз хулниците твои ще накажа.