Embed Size (px)
DESCRIPTION
HTML. Създаване на уеб страници. Съдържание. Що е HTML? Основни Свойства на таговете HTML форма HTML таблици Валидиране на HTML. Що е HTML?. Hypertext markup language чрез него казваме какви елементи ще имаме в дадена уеб страница - PowerPoint PPT Presentation
Citation preview
Създаване на уеб страници
HTML
Съдържание
• Що е HTML?• Основни <тагове>• Свойства на таговете• HTML форма• HTML таблици• Валидиране на HTML
Що е HTML?
• Hypertext markup language• чрез него казваме какви елементи ще
имаме в дадена уеб страница• файл с разширение .html – отваря се с
браузър (Chrome, Mozilla, Internet Explorer)
Тагове
• <div> Main menu </div>
Отварящ таг Затварящ таг
Какво ни е необходимо• Текстов редактор
– Notepad– Notepad++ (поддържа оцветяване за по-лесно
ориентиране в кода)
Основни тагове
• <html> </html>• <head> помощни тагове </head>• <body> съдържание на уеб
страницата</body>
Основни тагове – видове текст• <h1> заглавен текст </h1>• <h2> подзаглавие </h2>• ...• <h6> леко уголемен текст </h6>• нормален текст
Основни тагове - блокове• <div> блок </div>: минава на нов ред• <span> блок </span>: остава на същия
ред• <p> параграф </p>
Основни тагове - списък<ul>• <li> елемент 1 </li>• <li> елемент 2 </li>• <li> ... </li>• <li> елемент n </li></ul>Unordered list
Основни тагове – номериран списък
<ol>1. <li> елемент 1 </li>2. <li> елемент 2 </li>3. <li> ... </li>4. <li> елемент n </li></ol>Ordered list
Основни тагове - линк• <a href=“линк”> текст </a> текст• <a href=http://vratsasoftware.com>
натиснете тук </a>
Основни тагове - картинка• <img src=“файл” />
<img src=“c:/desktop/pic1.jpg” /><a href=“link.com”>
<img src=“http://somelink.com” /></a>
Основни тагове – заглавие (title)
<head><title> HTML head Elements </title>
</head>
Други тагове
• нов ред <br />• <!-- коментар --> (не се показва)
Тагове
Свойства
• Определят поведението на таговете
• <body bgcolor=“blue”> … </body>• <div style=“text-align:center; color:red”> …
</div>• <a href=“…” target=“_blank”> … </a>• <img src=“…” height=“100” width=“100”/>
Задача
• Да се направи уеб сайт (свободна тема):• С поне 2 страници, които имат връзка
помежду си• Да има заглавие (title & heading)• Да се използват картинки и списък• Да има фон на сайта (различен от бял)• Да има блок, който е с различен цвят текст• За помощ - http://vschool.info/olympics/
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
Таблици - 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
Таблици - 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
Таблица - свойства
• <table border=“3”>
<table>• height=“120” <tr>• width=“120” <td>
HTML валидация
• Автоматизирана проверка дали нашият HTML код е добре написан
• http://validator.w3.org/• Валидацията зависи от типа DOCTYPE
Видове валидации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>
Задачи
Форма - Текстово поле
<input type=“text” name=“username”>
Форма – Радио бутон
<input type="radio" name="city" value="sofia"> Sofia <br />
<input type="radio" name="city" value="sofia"> Paris
Форма – Отметка (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
Форма – Падащо меню (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>
Форма - бутон
<input type="submit" value="Send" />
Задачи
<questions>
</questions>
Още по темата
• http://www.w3schools.com/• https://www.codeschool.com/
Домашно
Да се направи HTML сайт на тема по избор (личен уеб сайт / на любим отбор / група). Сайтът да включва:– Поне 3 страници– Поне 2 картинки– Поне 1 таблица– Линкове– Поне 1 форма– (заб.) На този етап сайтът няма да изглежда добре!
