1 / 34

Създаване на уеб страници

HTML. Създаване на уеб страници. Съдържание. Що е HTML? Основни <тагове> Свойства на таговете HTML форма HTML таблици Валидиране на HTML. Що е HTML?. Hypertext markup language чрез него казваме какви елементи ще имаме в дадена уеб страница

gabriel-albert
Télécharger la présentation

Създаване на уеб страници

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Създаване на уеб страници

  2. Съдържание • Що е HTML? • Основни <тагове> • Свойства на таговете • HTML форма • HTML таблици • Валидиране на HTML

  3. Що е HTML? • Hypertext markup language • чрез него казваме какви елементи ще имаме в дадена уеб страница • файл с разширение .html – отваря се с браузър (Chrome, Mozilla, Internet Explorer)

  4. Тагове • <div> Main menu </div> Затварящ таг Отварящ таг

  5. Какво ни е необходимо • Текстов редактор • Notepad • Notepad++ (поддържа оцветяване за по-лесно ориентиране в кода)

  6. Основни тагове • <html> </html> • <head> помощни тагове </head> • <body> съдържание на уеб страницата</body>

  7. Основни тагове – видове текст • <h1> заглавен текст </h1> • <h2> подзаглавие </h2> • ... • <h6> леко уголемен текст </h6> • нормален текст

  8. Основни тагове - блокове • <div> блок </div>: минава на нов ред • <span> блок </span>: остава на същия ред • <p> параграф </p>

  9. Основни тагове - списък <ul> • <li> елемент 1 </li> • <li> елемент 2 </li> • <li> ... </li> • <li> елемент n </li> </ul> Unordered list

  10. Основни тагове – номериран списък <ol> • <li> елемент 1 </li> • <li> елемент 2 </li> • <li> ... </li> • <li> елемент n </li> </ol> Ordered list

  11. Основни тагове - линк • <a href=“линк”> текст </a>текст • <a href=http://vratsasoftware.com> натиснете тук </a>

  12. Основни тагове - картинка • <imgsrc=“файл”/> <imgsrc=“c:/desktop/pic1.jpg” /> <a href=“link.com”> <imgsrc=“http://somelink.com” /> </a>

  13. Основнитагове – заглавие (title) <head> <title> HTML head Elements </title> </head>

  14. Други тагове • нов ред <br /> • <!-- коментар --> (не се показва)

  15. Тагове

  16. Свойства • Определят поведението на таговете • <body bgcolor=“blue”> … </body> • <div style=“text-align:center; color:red”> … </div> • <a href=“…” target=“_blank”> … </a> • <imgsrc=“…” height=“100” width=“100”/>

  17. Задача • Да се направи уеб сайт (свободна тема): • С поне 2 страници, които имат връзка помежду си • Да има заглавие (title & heading) • Да се използват картинки и списък • Да има фон на сайта (различен от бял) • Да има блок, който е с различен цвят текст • За помощ - http://vschool.info/olympics/

  18. 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> Ред Колона

  19. Таблици - 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>

  20. Таблици - rowspan <tr> • <td> колона 1.1 </td> • <td > колона 1.2 </td> </tr> <tr> <tdrowspan=“2”> колона 2.1 </td> <td> колона 2.2 </td> </tr> • <tr> • <td> колона 2.1 </td> • <td> колона 2.2 </td> • </tr>

  21. Таблица - свойства • <table border=“3”> <table> • height=“120” <tr> • width=“120” <td>

  22. HTML валидация • Автоматизирана проверка дали нашият HTML код е добре написан • http://validator.w3.org/ • Валидацията зависи от типа DOCTYPE

  23. Видове валидации • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • HTML5  <!DOCTYPE html>

  24. Задачи

  25. HTML - форми <form action=“mailto:user@abv.bg” method=“post” enctype=“text/plain”> … </form>

  26. Форма - Текстово поле <input type=“text” name=“username”>

  27. Форма – Радио бутон <input type="radio" name="city" value="sofia"> Sofia <br /> <input type="radio" name="city" value="sofia"> Paris

  28. Форма – Отметка (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

  29. Форма – Падащо меню (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>

  30. Форма - бутон <input type="submit" value="Send" />

  31. Задачи

  32. <questions> </questions>

  33. Още по темата • http://www.w3schools.com/ • https://www.codeschool.com/

  34. Домашно Да се направи HTML сайт на тема по избор (личен уеб сайт / на любим отбор / група). Сайтът да включва: • Поне 3 страници • Поне 2 картинки • Поне 1 таблица • Линкове • Поне 1 форма • (заб.) На този етап сайтът няма да изглежда добре!

More Related