API tools faq
paste
Advertisement
deyanivanov966

First Steps HTML5 Lections - ШАБЛОН

deyanivanov966
Apr 8th, 2021 (edited)
258
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html> <!--Декларатор, показващ версията на html-->
  2. <html lang="bg"> <!--Отварящ таг-начало на html документа-->
  3. <head> <!--НАЧАЛО НА ПЪРВА ОСНОВНА СЕКЦИЯ-съдържа метаданни и информация за страницата-->
  4.     <meta charset="utf-8" /> <!--ДЕФИНИЦИЯ НА КОДИРАНЕТО - Начало на мета информацията за страницата(невидими)-->
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--За изглед на различни устройства-->
  7.     <meta name="description" content="Пълно описание на страницата / сайта" />
  8.     <meta name="author" content="Автор на страницата" />
  9.     <meta name="keywords" content="Ключови думи, разделени със запетая" />
  10.     <meta name="Document-state" content="Static" /> <!--Статичен/Динамичен-обновяващ се сайт-->
  11.     <title>Заглавие на сайта | Страница от сайта</title> <!--ЗАГЛАВИЕ(появява се в търсачките и най-отгоре в браузъла) - Край на мета информацията за страницата(невидими)-->
  12. </head> <!--КРАЙ НА ПЪРВА ОСНОВНА СЕКЦИЯ-->
  13. <body> <!--НАЧАЛО НА ВТОРА ОСНОВНА СЕКЦИЯ-тялото на страницата с основно съдържание, което се показва в браузъра-->
  14. <header> <!--Начало на горната постоянна част на страницата(БЛОКОВ ЕЛЕМЕНТ-САМОСТОЯТЕЛЕН ПРАВОЪГЪЛНИК ЗАПОЧВАЩ И ЗАВЪРШВАЩ НА НОВ РЕД)-->
  15.     <h1>Заглавие на сайта</h1> <!--Висше първостепенно заглавие от 6(блоков елемент)-->
  16.     <nav> <!--Начало на навигация на сайта(блоков елемент)-->
  17.         <ul> <!--Начало на неномериран списък(блоков елемент)-->
  18.             <li><a href="#home" title="Начало">Начало</a></li> <!--елемент от списъка с прикачена хиперлинк връзка(блоков елемент)-->
  19.             <li><a href="about" title="За мен">За мен</a></li>
  20.             <li><a href="contacts" title="Контакти">Контакти</a></li>
  21.         </ul> <!--Край на неномериран списък-->
  22.     </nav><!--Край на навигация-->
  23. </header> <!--Край на горната постоянна част на страницата-->
  24. <div> <!--Начало на средната част на страницата(блоков елемент)-->
  25.     <section> <!--Секции от средната част на страницата(блоков елемент)-->
  26.         <a name="home"><h2>Начало</h2></a> <!--(<a)-хиперлинк връзка, инлайн елемент-->
  27.            <audio src="Keri.mp3" autoplay controls loop muted preload="auto"></audio> <!--Вмъкване на аудио файл с атрибути/настройки-->
  28.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a enim ut risus semper mattis vel pretium massa. Vestibulum ac consectetur urna, ac cursus tortor. Morbi eu condimentum arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut suscipit egestas purus eget vulputate. Aenean cursus quam a accumsan facilisis. Duis neque nisi, euismod ut scelerisque eu, elementum in nunc.</p>
  29.            <audio controls> <!--Създаване на списък от аудио файлове с различен формат-->
  30.                <source src="Keri.mp3" type="audio/mpeg">
  31.                <source src="Keri.ogg" type="audio/ogg">
  32.                Вашият браузър не поддържа аудио елемента.
  33.            </audio>
  34.         <p>Ut venenatis tincidunt felis vitae pulvinar. Sed porta nisi ut ante ultrices, non bibendum risus vulputate. In quis volutpat augue. Nullam a dignissim nunc. Integer vitae feugiat velit. Nunc sodales turpis sit amet leo laoreet suscipit. Phasellus dolor augue, tempus bibendum dignissim ut, convallis at ex. Suspendisse potenti. Aenean mattis nulla at posuere auctor.</p>
  35.     </section>
  36.     <section>
  37.         <a name="about"><h2>За мен</h2></a>
  38.            <figure> <!--Вмъкване на снимка със заглавие-->
  39.                <img src="smile.jpg" alt="Усмивка" width="30%"> <!--Вмъкване на снимка-->
  40.                <figcaption align="left" style="color:green">Море и усмивки</figcaption> <!--Вмъкване на заглавието на снимката, с позиция и цвят-->
  41.            </figure>
  42.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a enim ut risus semper mattis vel pretium massa. Vestibulum ac consectetur urna, ac cursus tortor. Morbi eu condimentum arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut suscipit egestas purus eget vulputate. Aenean cursus quam a accumsan facilisis. Duis neque nisi, euismod ut scelerisque eu, elementum in nunc.</p>
  43.         <p>Ut venenatis tincidunt felis vitae pulvinar. Sed porta nisi ut ante ultrices, non bibendum risus vulputate. In quis volutpat augue. Nullam a dignissim nunc. Integer vitae feugiat velit. Nunc sodales turpis sit amet leo laoreet suscipit. Phasellus dolor augue, tempus bibendum dignissim ut, convallis at ex. Suspendisse potenti. Aenean mattis nulla at posuere auctor.</p>
  44.     </section>
  45.     <section>
  46.         <a name="contacts"><h2>Контакти</h2></a>
  47.            <video src="KeriV.mp4" autoplay controls preload="auto" poster="smile.jpg"></video> <!--Вмъкване на видео файл с атрибути/настройки-->
  48.         <p>Здрасти аз съм <mark>Иван, приятно ми е!</mark></p> <!--Маркиране на част от текст-->
  49.            <video width="400" controls>
  50.                <source src="KeriV.mp4" type="video/mp4">
  51.                Вашият браузър не поддържа видео елемента.
  52.            </video>
  53.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a enim ut risus semper mattis vel pretium massa. Vestibulum ac consectetur urna, ac cursus tortor. Morbi eu condimentum arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut suscipit egestas purus eget vulputate. Aenean cursus quam a accumsan facilisis. Duis neque nisi, euismod ut scelerisque eu, elementum in nunc.</p>
  54.         <iframe width="560" height="315" src="https://www.youtube.com/embed/fpoIxKkJ1G4?start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <!--Вмъкване на хиперлинк видео връзка от YOUTUBE-->
  55.         <p><a href="https://www.youtube.com/watch?v=fpoIxKkJ1G4">Видео материал</a></p> <!--Хиперлинк за текстова връзка към друга страница, ОТВАРЯЩ СЕ В СЪЩАТА СТРАНИЦА-->
  56.         <p><a href="https://www.youtube.com/watch?v=fpoIxKkJ1G4" target="_blank">Видео материал</a></p> <!--Хиперлинк за текстова връзка към друга страница, ОТВАРЯЩ СЕ В НОВА СТРАНИЦА-->
  57.         <p><a href="mailto:deyanivanov966@gmail.com">E-mail за кореспонденция</a></p> <!--Хиперлинк към имейл-->
  58.         <p><a href="smile.jpg" download>Изтегли</a></p> <!--Хиперлинк към файл-->
  59.         <p><a title="Парижки университет" href="https://ue-varna.bg/"><img src="paris.jpg" width="600"></a></p> <!--Графичен хиперлинк-от снимка водеща към сайт-->
  60.            <img src="rome.jpg" width="1000" alt="Рим" usemap="#Карта"> <!--Начало Хиперлинк чрез КАРТА-->
  61.            <map name="Карта">
  62.            <area shape="rect" coords="100,5,580,40" href="https://lipsum.com/" alt="Сайт">
  63.            </map> <!--Край Хиперлинк чрез КАРТА-->
  64.         <p>Ut venenatis tincidunt felis vitae pulvinar. Sed porta nisi ut ante ultrices, non bibendum risus vulputate. In quis volutpat augue. Nullam a dignissim nunc. Integer vitae feugiat velit. Nunc sodales turpis sit amet leo laoreet suscipit. Phasellus dolor augue, tempus bibendum dignissim ut, convallis at ex. Suspendisse potenti. Aenean mattis nulla at posuere auctor.</p>
  65.     </section>
  66.     <section> <!--Нова секция на средната част на страницата-->
  67.         <header>
  68.             <h3>HTML таблица</h3>
  69.             <table> <!--Вмъкване на таблица-->
  70.                 <th> <!--Заглавен 1ви ред -->
  71.                     <td>Име</td> <!--Елементи на заглавен ред-->
  72.                     <td>Адрес</td>
  73.                 </th>
  74.                 <tr> <!--Елементи от 2ри ред-->
  75.                     <td>Иван</td>
  76.                     <td colspan="2">Варна</td> <!--Обединяване на 2ра и 3та клетка-->
  77.                 </tr>
  78.                 <tr> <!--Елементи от 3ти ред-->
  79.                     <td>Стоян</td>
  80.                     <td>Габрово</td>
  81.                     <td>10</td>
  82.                 </tr>
  83.                 <tr> <!--Елементи от 4ти ред-->
  84.                     <td>Атанас</td>
  85.                     <td>Търново</td>
  86.                     <td>20</td>
  87.                 </tr>
  88.             </table>
  89.         </header>
  90.     </section>
  91. </div> <!--Край на средната част на страницата-->
  92. <footer> <!--Начало на долната постоянна част на страницата(блоков елемент)-->
  93.     &copy; 2021 | Автор на страницата
  94. </footer> <!--Край на долната постоянна част на страницата-->
  95. </body> <!--КРАЙ НА ВТОРА ОСНОВНА СЕКЦИЯ-тялото на страницата-->
  96. </html> <!--Затварящ таг-край на html документа-->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!