Меню

Първи стъпки в правене на сайтове

Влез Излез

Някои основни тагове в HTML – част 2

Урок номер три от поредицата, който може да се счита е за пряко продължение (затова и „част 2“) на този за някои основни тагове. В този урок ще дам разяснения за таговете, които трябва да се използват при създаване на таблици, някои тагове, който се използват за форматиране и ще обясня кои тагове в кои могат да се влагат (или поне някои от основните изисквания по въпроса).

Преди години беше много модерно сайтовете да се правят с табличен интерфейс. Със сигурност и сами можете да си придставите как би изглеждал моят сайт направен с таблица – картинката в header-а ще бъде в една клетка, навигацията под нея ще бъде в нов ред, който ще има толкова клетки колкото са бутоните в навигацията, а съдържанието надолу ще бъде в трети ред, който ще има само две клетки – едната за основното съдържание, а другата – за страничната лента. Да, обаче това е крайно неправилно! Никога те правете сайт по този начин! Таблиците трябва да се използват само и единствено за структуриране на данни, които могат да се сравняват помежду си. Помислете си за какви нужди използвате таблици в живота си и дали бихте използвали Excel или друг подобен софтуер за правене на сайтове (естествено, че не бихте).

След като вече съм обяснил как трябва и не трябва да използвате таблиците, може би е време да напиша и как точно можете да ги използвате. Първо, една таблица се създава посредством <table> тага (table в случая не се превежда като „маса“, а като „таблица“). Тъй като сама по себе си структурата на една таблица не е от най-простите неща, този таг не съдържа директно информацията в себе си, а съдържа други тагове, които вече да представят информацията. Подобно на таговете за списъци, в които обясних в предния урок – <ul> и <ol>, който могат да съдържат само <li> тагови вътре в себе си. При таблиците обаче е едно ниво по-трудно, защото в <table> първо вкарваме редове посредством <tr> (table row – табличен ред), а в редовете вкарваме клетки, използвайки <td> (table data – таблична информация). Ако изпитвате проблеми да запомните кое от двете (tr и td) е за ред и кое за клетка, опитайте да използвате следната тънкост, която на мене преди години ми каза учител, който водеше СИП по HTML в училище: „Запомнете – R като Ред – от там TR – ред“.

Ето как изглежда структурата на една проста таблица с три реда и три колони:

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Съществуват и едни други тагове за клетки подобни на <td> – <th> (table heading – таблично заглавие). Използват се на същото място (в редовете), като разликата е, че по подразбиране стила на тези клетки е текстът в тях да е удебелен, но по-важното е, че показват структурираност на таблицата. Ако например разгледаме таблица, в която сме въвели някаква сенмична програма, в първия ред може би няма да въведем събития за определен час, а просто име на дните. Нещо тако тази таблица:

Понеделник Вторник Сряда Четвъртък Петък
9:00 лекция РРСК лекция по АТ лабораторно упражнение по ОЕОК лекция по АТ лекция по ТВС
11:00 лабораторно упражнение по ТВС лекция по ТВС лекция по РРСК лабораторно упражнеие по АТ лекция по ОЕОК
13:00 лекция по ОЕОК лабораторно упражнение по ОЕОК лекция по РРСК лекция по АТ лабораторно упражнение по АТ

Въпреки, че не е задължително е препоръчително да отделяме съдържанието на таблица според следните групи: <thead>, <tbody> и <tfoot>. В примера с предната таблица, дните от седмицата може да са в <thead>, а същинската информация – в <tbody>. Тези тагове се поставят в <table> тага, а в тях се поместват редовете. В нашия случай нямаме <tfoot>, но бихме могли да добавим дните отново. Няма ограничения да използваме таговете в този ред, но трябва да се знае, че винаги съдържанието от <thead> ще излезе най-горе, а <tfoot> – най-долу, така че следният код:

<table>
	<thead>
		<tr>
			<th>&nbsp;</th>
			<th>Понеделник</th>
			<th>Вторник</th>
			<th>Сряда</th>
			<th>Четвъртък</th>
			<th>Петък</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>&nbsp;</th>
			<th>Понеделник</th>
			<th>Вторник</th>
			<th>Сряда</th>
			<th>Четвъртък</th>
			<th>Петък</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>9:00</td>
			<td>лекция РРСК</td>
			<td>лекция по АТ</td>
			<td>лабораторно упражнение по ОЕОК</td>
			<td>лекция по АТ</td>
			<td>лекция по ТВС</td>
		</tr>
		<tr>
			<td>11:00</td>
			<td>лабораторно упражнение по ТВС</td>
			<td>лекция по ТВС</td>
			<td>лекция по РРСК</td>
			<td>лабораторно упражнеие по АТ</td>
			<td>лекция по ОЕОК</td>
		</tr>
		<tr>
			<td>13:00</td>
			<td>лекция по ОЕОК</td>
			<td>лабораторно упражнение по ОЕОК</td>
			<td>лекция по РРСК</td>
			<td>лекция по АТ</td>
			<td>лабораторно упражнение по АТ</td>
		</tr>
	</tbody>
</table>

ще доведе до следния изход:

Понеделник Вторник Сряда Четвъртък Петък
Понеделник Вторник Сряда Четвъртък Петък
9:00 лекция РРСК лекция по АТ лабораторно упражнение по ОЕОК лекция по АТ лекция по ТВС
11:00 лабораторно упражнение по ТВС лекция по ТВС лекция по РРСК лабораторно упражнеие по АТ лекция по ОЕОК
13:00 лекция по ОЕОК лабораторно упражнение по ОЕОК лекция по РРСК лекция по АТ лабораторно упражнение по АТ

Въпреки, че <tfoot> е преди <tbody>, съдържанието на този таг пак са най-долу.

След като вече сме изяснили някои основни неща за таблиците, нека продължим и с някои тагове, които се използват за форматиране на текста в HTML. Това, на което трябва да се наблегне преди да продължим е, че сам по себе си HTML не трябва да се използва за форматиране и въпреки, че има таг <font> е много лоша практика той да се използва, така че дори не смятам да давам разяснения за него. Съществуват обаче други два тага, чиито форматирания по подразбиране не е проблем да се използват, но отново не трябва да разчитаме на техния формат, а на идеята, която стои зад тях.

Тагът <strong> (силно) прави текста удебелен, а тагът тагът <em> (emphasis – наблагяне) прави текста в курсив. Въпреки, че тези стилове могат да бъдат презаписани посредством CSS, няма нищо лошо, а дори и е укоражавано когато имате текст, който трябва да изглежда по такъв начин, да използвате тези тагове.

В по-стари версии на HTML за bold се използваше тагът <b>, а за italic – <i>, но тези тагове вече не са валидни и макар и да е по-лесно да се използват поради факта, че се състоят от по една буква, не бива да ги използвате. Преди съществуваше и таг <u> за underline (подчертан текст), но вече няма таг, който сам по себе си да върши тая работа, а това трябва да се прави с CSS. За целта можете да използвате <span> таг, който да обозначи част от текст, който е предназначен да бъде подчертан. След това вече в комбинация от класове и CSS (за които щу говорим друг път) можете да направите така, че този текст да бъде подчертан. В случая важното е тагът <span>, който сам по себе си не придава никакъв по-особен външен вид или каквото и да било друго, а просто служи за обозначаване на част от текста, който вече може чрез CSS да се направи да изглежда по различен начин.

Съществува още един основен таг, който няма да пропусна в този урок, който всъщност се изполва (или би трябвало да се използва) доста рядко. Това е тагът <br />, който разделя текста на нов ред. Ако просто пишете HTML и в текста в някой параграф оставите нов ред – когато разглеждате страницата текстът ще си продължи направо. Това е така, защото browser-ите четат HTML така, че независимо какво празно място имате (интервал, два, три, празен ред, два, три или повече) те ще оставят само един интервал когато разглеждате страницата. И добре, че е така, защото иначе няма да можем да форматираме HTML-а си така, че вложените тагове да са по-навътре – не и без това да си личи накрая в изхода. Ако искате да добавите нов ред – трябва да използвате <br />. Използва се рядко обаче, защото в повечето случаи реално ще имате нужда от нов абзац (<p>), вместо нов ред.

След като представих някои основни тагове в този урок (и в двете му части) е редно да обясня и някои изисквания относно това кои тагове можем да влагаме в други. Вече казахме за <ul>, <ol>, <li>, <table>, <tbody>, <thead>, <tfoot>, <tr>, <td> и <th> и за техните по-особени изисквания. Има обаче едно друго основно правило, което важи за всички. Преди да го обясним обаче трябва да да се кажат няколко думи за блокови (block) и вътрешни (inline) елементи. Блоковите елементи са тези, които по подразбиране заемат цялото им предоставено място (за широчина). От тук следва и, че всеки блоков елемент се разполага на нов ред. Такива тагове са <div>, <p>, <ul>, <ol>, <blockquote>, <h1> – <h6> и други. Вътрешните тагове са такива, които просто си седят редом с останалите в съдържанието, в чиито контекст се намират. Такива тагове са <a>, <strong>, <em>, <span>. Някои тагове не спадат нито към едните, нито към другите, а се характеризират частично с белези и на блокови и на вътрешни елементи, като например <img /> и <li>, но за тях ще говорим някой друг път – когато стигнем и до CSS.

След като вече знаете кои тагове са блокови и кои вотрешни, трябва да знаете, че по подразбиране е забранено единствено да вкарвате блокови елементи във вътрешни. С други деми – блоковите елементи могат да съдържат всичко и вътрешните елементи могат да се съдържат във всичко. Не можем обаче да имаме <h1> в <a> таг, тъй като <h1> е блоков елемент, а <a> – вътрешен. В подобен случай може би просто трябва да си направим сметка дали няма да ни свърши същата работа да вложим <a> в <h1>.

Съществуват и изключения, като това, че в <p> не можем да имаме други блокови елементи, въпреки, че сам по себе си <p> тагът е блоков, а в HTML5 всъщност е позволено конкретно в <a> таг да имаме всичко друга (така, че примерът с <h1> в <a>, който дадох преди малко всъщност не е 100% уместен, а дажи само в случай на по-стари версии на HTML, но винаги е добре да третираме <a> тагът като останалите inline тагове).

Вашият коментар

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax