Download - Създаване на уеб страници
![Page 1: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/1.jpg)
Създаване на уеб страници
HTML
![Page 2: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/2.jpg)
Съдържание
• Що е HTML?• Основни <тагове>• Свойства на таговете• HTML форма• HTML таблици• Валидиране на HTML
![Page 3: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/3.jpg)
Що е HTML?
• Hypertext markup language• чрез него казваме какви елементи ще
имаме в дадена уеб страница• файл с разширение .html – отваря се с
браузър (Chrome, Mozilla, Internet Explorer)
![Page 4: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/4.jpg)
Тагове
• <div> Main menu </div>
Отварящ таг Затварящ таг
![Page 5: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/5.jpg)
Какво ни е необходимо• Текстов редактор
– Notepad– Notepad++ (поддържа оцветяване за по-лесно
ориентиране в кода)
![Page 6: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/6.jpg)
Основни тагове
• <html> </html>• <head> помощни тагове </head>• <body> съдържание на уеб
страницата</body>
![Page 7: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/7.jpg)
Основни тагове – видове текст• <h1> заглавен текст </h1>• <h2> подзаглавие </h2>• ...• <h6> леко уголемен текст </h6>• нормален текст
![Page 8: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/8.jpg)
Основни тагове - блокове• <div> блок </div>: минава на нов ред• <span> блок </span>: остава на същия
ред• <p> параграф </p>
![Page 9: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/9.jpg)
Основни тагове - списък<ul>• <li> елемент 1 </li>• <li> елемент 2 </li>• <li> ... </li>• <li> елемент n </li></ul>Unordered list
![Page 10: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/10.jpg)
Основни тагове – номериран списък
<ol>1. <li> елемент 1 </li>2. <li> елемент 2 </li>3. <li> ... </li>4. <li> елемент n </li></ol>Ordered list
![Page 11: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/11.jpg)
Основни тагове - линк• <a href=“линк”> текст </a> текст• <a href=http://vratsasoftware.com>
натиснете тук </a>
![Page 12: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/12.jpg)
Основни тагове - картинка• <img src=“файл” />
<img src=“c:/desktop/pic1.jpg” /><a href=“link.com”>
<img src=“http://somelink.com” /></a>
![Page 13: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/13.jpg)
Основни тагове – заглавие (title)
<head><title> HTML head Elements </title>
</head>
![Page 14: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/14.jpg)
Други тагове
• нов ред <br />• <!-- коментар --> (не се показва)
![Page 15: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/15.jpg)
Тагове
![Page 16: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/16.jpg)
Свойства
• Определят поведението на таговете
• <body bgcolor=“blue”> … </body>• <div style=“text-align:center; color:red”> …
</div>• <a href=“…” target=“_blank”> … </a>• <img src=“…” height=“100” width=“100”/>
![Page 17: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/17.jpg)
Задача
• Да се направи уеб сайт (свободна тема):• С поне 2 страници, които имат връзка
помежду си• Да има заглавие (title & heading)• Да се използват картинки и списък• Да има фон на сайта (различен от бял)• Да има блок, който е с различен цвят текст• За помощ - http://vschool.info/olympics/
![Page 18: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/18.jpg)
HTML Таблици<table border=“1”>
<tr><td> колона 1.1 </td><td> колона 1.2 </td>
</tr><tr>
<td> колона 2.1 </td><td> колона 2.2 </td>
</tr>
</table>
Ред
Колона
Колона 1.1 Колона 1.2
Колона 2.1 Колона 2.2
![Page 19: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/19.jpg)
Таблици - colspan<table border=“1”>
<tr>
<td> колона 1.1 </td>
<td colspan=“2”> колона 1.2/1.3 </td>
</tr>
<tr>
<td> колона 2.1 </td>
<td> колона 2.2 </td>
<td> колона 2.3 </td>
</tr>
</table>
Колона 1.1
Колони 1.2 / 1.3
Колона 2.1
Колона 2.2
Колона 2.3
![Page 20: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/20.jpg)
Таблици - rowspan<tr>
<td> колона 1.1 </td>
<td > колона 1.2 </td>
</tr>
<tr>
<td rowspan=“2”> колона 2.1 </td>
<td> колона 2.2 </td>
</tr>
<tr>
<td> колона 2.1 </td>
<td> колона 2.2 </td>
</tr>
Колона 1.1 Колона 1.2
Колони 2.1/3.1
Колона 2.2
Колона 3.2
![Page 21: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/21.jpg)
Таблица - свойства
• <table border=“3”>
<table>• height=“120” <tr>• width=“120” <td>
![Page 22: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/22.jpg)
HTML валидация
• Автоматизирана проверка дали нашият HTML код е добре написан
• http://validator.w3.org/• Валидацията зависи от типа DOCTYPE
![Page 23: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/23.jpg)
Видове валидации1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• HTML5 <!DOCTYPE html>
![Page 24: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/24.jpg)
Задачи
![Page 26: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/26.jpg)
Форма - Текстово поле
<input type=“text” name=“username”>
![Page 27: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/27.jpg)
Форма – Радио бутон
<input type="radio" name="city" value="sofia"> Sofia <br />
<input type="radio" name="city" value="sofia"> Paris
![Page 28: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/28.jpg)
Форма – Отметка (checkbox)
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<input type="checkbox" name="vehicle" value="Car">I have a car <br />
<input type="checkbox" name="vehicle" value="Plane">I have a plane
![Page 29: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/29.jpg)
Форма – Падащо меню (select)
<select name="cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option><option value="bmw">BMW</option><option value=“vw"> Volskwagen</option>
</select>
![Page 30: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/30.jpg)
Форма - бутон
<input type="submit" value="Send" />
![Page 31: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/31.jpg)
Задачи
![Page 32: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/32.jpg)
<questions>
</questions>
![Page 33: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/33.jpg)
Още по темата
• http://www.w3schools.com/• https://www.codeschool.com/
![Page 34: Създаване на уеб страници](https://reader030.vdocuments.net/reader030/viewer/2022033016/568134c6550346895d9beb12/html5/thumbnails/34.jpg)
Домашно
Да се направи HTML сайт на тема по избор (личен уеб сайт / на любим отбор / група). Сайтът да включва:– Поне 3 страници– Поне 2 картинки– Поне 1 таблица– Линкове– Поне 1 форма– (заб.) На този етап сайтът няма да изглежда добре!