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

В този урок ще дам разяснения за:

• таговете, които трябва да се използват при създаване на таблици;
• някои тагове, които се използват за форматиране;
• кои тагове в кои могат да се влагат (или поне някои от основните изисквания по въпроса).

Преди години беше много модерно сайтовете да се правят с табличен интерфейс.

Да, обаче това е крайно неправилно!

Никога не правете сайт по този начин!

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

Помислете си за какви нужди използвате таблици в живота си. Бихте ли използвали Excel за правене на сайтове?

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

Таблици

Първо, една таблица се създава посредством <table> тага (table в случая се превежда като “таблица”, а не като “маса”).

Тъй като сама по себе си структурата на една таблица не е от най-простите неща, този таг не съдържа директно информацията в себе си, а съдържа други тагове, които вече да представят информацията.

Подобно е на таговете за списъци, които обясних в предния урок — <ul> и <ol>. Те могат да съдържат само <li> тагове вътре в себе си. При таблиците обаче е едно ниво по-трудно, защото в <table> първо вкарваме редове посредством <tr> (table row — табличен ред). В редовете пък вкарваме клетки, използвайки <td> (table data — таблична информация).

В училище ни учеха: “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>

<th> и <thead>

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

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

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

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

<tfoot>

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

<table>
	<thead>
		<tr>
			<th> </th>
			<th>Понеделник</th>
			<th>Вторник</th>
			<th>Сряда</th>
			<th>Четвъртък</th>
			<th>Петък</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<th> </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.

Форматиране

<font>

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

Съществуват обаче други два тага, чиито форматирания по подразбиране не е проблем да се използват, но отново не трябва да разчитаме на техния формат, а на идеята, която стои зад тях.

<strong> и <em>

Тагът <strong> (силен / подсилен) прави текста удебелен, а тагът <em> (emphasis — наблагяне) прави текста в курсив.

Въпреки, че тези стилове могат да бъдат презаписани посредством CSS, няма нищо лошо, а дори и е окуражавано когато имате текст, който трябва да изглежда по такъв начин, да използвате тези тагове.

В по-стари версии на HTML за bold се използваше тагът <b>, а за italic — <i>. Тези тагове обаче вече не са валидни и макар и не бива да ги използвате.

Преди съществуваше и таг <u> за underline (подчертан текст), но вече няма таг, който сам по себе си да върши тая работа, а това трябва да се прави с CSS.

За целта можете да използвате <span> таг, който да обозначи част от текст, който е предназначен да бъде подчертан. След това вече в комбинация от класове и CSS (за които ще говорим друг път) можете да направите така, че този текст да бъде подчертан. В случая важното е тагът <span>, който сам по себе си не придава никакъв по-особен външен вид или каквото и да било друго, а просто служи за обозначаване на част от текста, който вече може чрез CSS да се направи да изглежда по различен начин.

<br />

Съществува още един основен таг, който няма да пропусна в този урок, който всъщност се използва (или би трябвало да се използва) доста рядко. Това е тагът <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> и други.

Вътрешни (inline) елементи

Вътрешните тагове са такива, които просто си седят редом с останалите в съдържанието, в чиито контекст се намират.

Такива тагове са <a>, <strong>, <em>, <span>.

Някои тагове не спадат нито към едните, нито към другите, а се характеризират частично с белези и на блокови и на вътрешни елементи, като например <img /> и <li>, но за тях ще говорим някой друг път — когато стигнем и до CSS.

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

Всичко в block; inline в inline

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

Особености при параграфи и линкове (в HTML 5)

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