Как да? HTML/CSS: Линкове, Таблици, Изображения

Disrespect трудност:

видян: 18492

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

като в миналият урок който беше с обикновен бял цвят. Също така ще ви покажа някой екстри за

линковете и изображенията. Нека започнем с таблиците!

1. Ще започнем с фона, който ще трябва да изпишем ето така " <table style="background-color:

#66CC99 / Аз ще използвам ето този цвят, но Вие освен код може да използвате и име на Английски,

например " Blue, Purple, Green / ;">

2. След това изписваме познатият таг " <tr> " който бяхме споменали в предишният урок за какви

служи и накрая завършва с " </tr> ".

3. Ето че сега ще трябва да напишем заглавията на Таблиците, който стават с ето този таг " <th> " и

завършват на "</th> ". Аз ще напиша моето заглавие ето така " <th>Заглавие 1 </th> и второто

заглавие <th>Заглавие 2</th>. След този таг, ще трябва да напишем пак тага " </tr> ". След този таг ще

трябва да отворим още един " <tr> и да го затворим с </tr> " но това ще го обясня по долу!

4. Ето че вече ще трябва да оправим и текста под заглавията като за начало да напишем пак " <tr> ",

след това трябва да започнем с таг който ще изпишем с този код " <td> " и се завърши с " </td> ". Аз

ето така ще го направя " <td>Това е моята първа таблица с фон</td> и още едно <td>Това е моята

втора таблица с фон</td> ". След като сме готови, може да го затворим пак с този таг който Ви

споменах по горе " </tr> " и под него с този таг " </table> " .

Ето това е кода " ( <table style="background-color: #66CC99 ;">
<tr>
<th>Заглавие 1 </th><th>Заглавие 2</th>
</tr>
<tr>
<td>Това е моята първа таблица с фон</td><td>Това е моята втора таблица с фон</td>
</tr>
</table> " ). - Демо : http://www.prikachi.com/images/647/5263647m.png

Ето че в този урок, ще ви покажа как може да промените нормалният Windows цвят на линковете,

който не е никак хубав. Като за начало ще започна с това как стават линковете с HTML и след това как

да ги стилизирате с CSS.

1. Всеки един линк става ето така <a href="линка">Disrespect</a>, след като го натиснете той ви

препраща към страницата към която води, но в същият прозорец!

2. С този код ще може да Ви препрати в друг прозорец, а не в същият както обесних в 1-ва точка! Кода

е следният <a href="линка" target="_blank">Disrespect</a>.

3. Ето че дойде време да Ви покажа как може да смените и цвета на линка, това става чрез CSS и

HTML, всеки казва че е по лесно чрез CSS но аз ще Ви покажа и двата начина! Първият начин е

следният <a style="color: #404040 / * Цвета който желаете * /" href="Линк" >Disrespect</a> - Ето така трябва да се е получило http://www.prikachi.com/images/662/5263662m.png ако е така, значи нямате грешки!

4. Ето че сега ще Ви покажа как може да стане и с CSS. Ако имате CSS файл на вашият сайт, не тряба да пишете следният таг " <style type="text/css"> - това е за да може да покаже CSS файловете. " под него пишем следният таг "
a:link {
COLOR: #0000FF; / * Цвета на линка * /
}
a:visited {
COLOR: #800080; / * След като е натиснато на него * /
}
a:hover {
COLOR: #FF0000; / * Посоченият * /
}
a:active {
COLOR: #00FF00; / * Активираният * /

след това ще трябва да напишете и </style> за да се получи, ако нямате CSS файл, но ако имате просто го поставете в Styles.css !

Ето че за край, ще ви покажа няколко кода за Изображения.

1. Като за начало може да започнем ето така " <img src="Линка или ако имате папка за изображения images/name.png"> !

2. Това става и по още един начин : <img src="Пак линка към изображението" alt="Тук може да опишете вашето изображение, например ' I love summer' " />

3. С този код Вие ще може да изберете Ширина и височината на изображението, например ако е 1000х700 а на Вас ви трябва 600х300 с този код може да стане! Ето го и него : <img src="Линк към изображението" alt="Описание" width="200 / * Ширина * / " height="400 / * Височина * /" />

Е, това е от мен! Надявам се съм Ви помогнал очаквайте още уроци от мен! :)

Сподели |

Как да? HTML/CSS: Линкове, Таблици, Изображения

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