HTML
HTML е акроним от Hyper Text Markup Language - в свободен превод "тагов език за хипер текст".
HTML е език за създаване на Интернет страници.
HTML документите са по същество текстови файлове и могат да бъдат създавани и редактирани с обикновен текстов редактор като Notepad++. За по-голямо удобство са създадени текстови редактори като Notepad++.
Може да изтеглите Notepad++ от тук - https://notepad-plus-plus.org/downloads/
Тагове
<html> </html> указват началото и края на уеб страницата.
<head> </head> записва се информация за страницата.
<title> </title> името на страницата, което се появява в заглавния ред на браузъра.
<body> </body> задават видимата част от сайта, която ще бъде показана на екрана.
<h1> </h1> представя текст, който ще бъде показан като заглавие.
Заглавията могат да бъдат от <h1> до <h6> като колкото е по-голямо числото, толкова по-малък е размерът на заглавието. Но на практика се използват таговете от <h1> до <h3>.
<p> </p> представя текст, който ще бъде показан като параграф. Всеки нов параграф се извежда на нов ред.
<br /> таг за празен ред. Този таг няма затварящ таг, ето защо в него се поставя наклонена черта.
Тагове за форматиране на текст:
<b> </b> - текстът се удебелява (bold)
<i> </i> - наклон на дясно (italic)
<u> </u> - подчертаване на текста (underline)
Мета тагове:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - указва на браузъра азбуката, на която е написана страницата
Тагове за изображения в HTML <img src="snimka.jpg" />
Атрибути на img тага:
src="address file" - където "address file" е пътя до директорията (считан от настоящата директория), където се намира изображението и самото му име. Не забравяйте да укажете точно адреса на изображението, ако то се намира в папка, различна от настоящата - тази на html документа. src е задължителен атрибут.
width = "широчина" - размер на снимката (широчина)
height = "височина" - размер на снимката (височина)
<img src="image.jpg" width=”100” height=”50” />
align="left" - подравняване на снимката спрямо текста
<img src="img.jpeg" align="left" /> - подравнява изображението вляво спрямо текста.
align = top bottom middle left right - Подравнява изображението по горната линия на текста, долната или в средата. Вляво или вдясно на страницата.
alt="tekst" - aлтернативен текст
<img src="image.jpg" alt="text" /> - задава какъв текст да се появи, ако не се вижда изображението.
hspace, vspace - определяне на свoбoдно място около графиката
<img src="image.jpg" hspace=”10” vspace=”10” /> - задава в брой пиксели свободното място около графиката по вертикалата и хоризонталата на снимката..
Рамка около графиката - border
<img src="image.jpg" border="2" />
Задава в брой пиксели ширина на рамка около графиката. Това е полезно когато изображението е връзка.
За да не бъде оградено от стандартната синя рамка, се слага border=”0”.
Пример:
<img src="bonboni.jpg" width="500" height="334" alt="Шоколадови бонбони" align="left" hspace="40" vspace="10" />
Таг за хипервръзка към сайт:
<a href="https://it-lessons.weebly.com/"> Връзка към it-lessons.weebly.com </a>
Таг за хипервръзка към страница в сайта:
<a href="page1.html" target="blanc">Връзка към страница page1.html от началната страница</a>
Неподреден списък
Неподреден е списъка, в който елементите не са номерирани чрез арабски цифри, римски цифри или букви. Тагът за такъв списък е ul:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>
Възможните стойности са три атрибута:
disc (запълнен кръг като този, който е по подразбиране)
circle (незапълнен кръг)
square (запълнен квадрат).
Пример за неподреден списък с незапълнени кръгчета: <ul type="circle">
Линкове с цветови комбинации:
https://www.computerhope.com/htmcolor.htm
http://html-color-codes.info/
Атрибут за фон на страницата
<body bgcolor="#ffebcd" >
Атрибути на тага FONT:
color (цвят на шрифта)
Задаването на цвят на текста става като се присвои някаква стойност на атрибута color="цвят".
Пример:
<font color="blue">Това е син текст</font>
<font color="green">Това е зелен текст</font>
Таг за хипервръзка към сайт
<a href="https://it-lessons.weebly.com/">връзка към it-lessons.weebly.com</a>
Таг за хипервръзка към сайт
<a href="page1.html">Връзка към страница page1.html от началната страница</a>
Таг за таблици
<table> </table>
Атрибути на table
width - задава широчината на таблицата, обикновено това става в пиксели, но може да бъде и в проценти.
height - задава височината на таблицата
<table width="700" height="700">
<table width="100%" height="50%">
align - хоризонтално подравняване на таблицата: left, right, center
<table align="left" >
cellspacing - добавя пространство между клетките в таблицата без да променя размера на таблиците в пиксели
<table cellspacing="10" border="1">
cellpadding – добавя пространство вътре в самата клетка - между бордера на клетката и текста в нея
<table cellpading="10" border="1">
bgcolor – цвят на фона на цялата таблица.
<table bgcolor="#000000" border="1">
<table bgcolor="black" border="1">
background – изображение за фона на таблицата
<table background=”picture1.jpg” border="1">
Таг за ред в таблица
<tr>
Атрибути на тага <tr>
bgcolor - цвят на фона на реда
<tr bgcolor="#ffebcd" >
Пример:
<tr bgcolor="#CEECF5">
<td> Математика </td>
<td> Български език </td>
<td> История </td>
<td> Философия </td>
</tr>
HTML формуляри
<form>
Име: <br/>
<input type="text" name="familia" /><br/>
Фамилия:<br/>
<input type="text" name="familia" /><br/>
</form>
Многоредови текстови полета
За разлика от едноредовите, многоредовите полета дават възможност за въвеждане на по-дълъг текст, като например коментар или съобщение.
Задават се с двойката тагове <textarea> и </textarea> и могат да бъдат произволно избран от вас брой редове (rows) и колони (cols):
<p> Моля, въведете вашите коментари </p>
<textarea name="coment" rows="5" cols="40"> </textarea>
Радио бутони
Чрез радио бутоните се избира един от няколко възможни отговора. Полето "name" за всички възможни избори трябва да има една и съща стойност.
Ето един често срещан пример:
<p> Желаете ли да получавате новини от нашия сайт?</p>
<input type="radio" name="news" value="Yes"/> Да <br/>
<input type="radio" name="news" value="No"/> Не <br/>
Множествен избор: кутийки с отметки
Когато искате потребителите да изберат една или повече от няколко възможности, използвайте кутийки с отметки.
Те се задават с type="checkbox" и също като радиобутоните трябва да имат едно и също име, зададено като name, но различни стойности, указани с value:
<p> В какъв профил ще продължите средното си образование?</p>
<input type="checkbox" name="profil" value="language"/>Чужди езици: <br/>
<input type="checkbox" name="profil" value="predpriemachestvo"/> Предприемачески <br/>
Пример за най-обща структура:
<html>
<head>
<title> Рецепти </title>
</head>
<body>
<p> Бисквитени бонбони </p>
</body>
</html>
Тест_1_HTML, Тест_2_HTML, Тест_3_HTML
|
|