Coding for Future in Lutsk. JavaScript. Part 7
Download as PPT, PDF0 likes127 views
HTML. Основи.
Coding for Future in Lutsk. JavaScript. Part 7
- 2. Теги, атрибути і елементи Базова структура HTML-документу включає в себе теги, які огортають вміст і надають йому зміст. Приклад: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Перша веб-сторінка</title> </head> <body> <h1>Заголовок сторінки</h1> <p>Текст абзаца (параграфа)</p> </body> </html>
- 3. Коментарі: <!-- "Закоментований" текст --> (Ctrl + / у Sublime Text) Вкладення елементів: <div><h1>Заголовок, вкладений у блок DIV</h1></div> Атрибути: <tag attribute="value">Hi!</tag>
- 4. Дещо про форматування тексту <p>Текст в абзаці</p> <br> або <br /> - розрив рядка. <strong>Жирний текст</strong> <b>Жирний текст</b> <em>Курсив</em> <i>Курсив</i>
- 5. Заголовки <h1>Заголовок першого рівня</h1> <h2>Заголовок другого рівня</h2> <h3>Заголовок третього рівня</h3> <h4>Заголовок четвертого рівня</h4> <h5>Заголовок п’ятого рівня</h5> <h6>Заголовок шостого рівня</h6>
- 6. Спеціальні символи < Знак «менше» > > Знак «більше» < " Подвійні лапки " & Амперсанд & Нерозривный пробіл
- 7. Списки Маркований список <ul> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul> Нумерований список <ol> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ol>
- 8. Посилання <a href="<адреса>">текст посилання</a> Приклади: <a href="http://htmldog.com/">HTML Dog</a> <a href=https://www.google.com.ua/>Google</a> <a href="//facebook.com/">Facebook</a> <a href="summer/june/1.html">1 червня</a> <a href="../../spring/march/21.html">21 березня</a> <a href="/path/">Посилання відносно кореня сайту</a>
- 9. Якорі <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Вгору</a></p> З іншої сторінки: <p><a href="page.html#top">Верх іншої сторінки</a></p>
- 10. Зображення <img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog"> <img src="images/picture.jpg" width="200%" alt="Cool picture" title="Текст підказки">
- 11. Форми <form action="processingscript.php" method="post"> </form> action – вказує, куди мають надсилатись дані форми. method – вказує, як будуть надсилатись дані форми: •method="get" (по замовчуванню) – дані відсилаються відкрито, у адресний рядок браузера (після ?); •method="post" – інформація безпосередньо не видима.
- 12. Однорядкове текстове поле <form action="handler.php"> <p><strong>Ім'я користувача</strong></p> <p><input maxlength="25" size="40" value="Пишіть тут" name="username"></p> </form>
- 13. Поле для пароля <input type="password" maxlength="25" size="40" name="password"> “Прапорець” checkbox <form action="handler.php"> <p>Що Ви вивчаєте?</p> <p><input type="checkbox" name="a" value="html" checked> HTML</p> <p><input type="checkbox" name="a" value="css"> CSS</p> <p><input type="checkbox" name="a" value="javajcript" checked> JavaScript</p> <p><input type="checkbox" name="a" value="java"> Java</p> <p><input type="submit" value="Надіслати"></p> </form>
- 14. Перемикач radio <form action="handler.php"> <p>Ваша стать</p> <p><input type="radio" name="sex" value="male"> Чоловіча</p> <p><input type="radio" name="sex" value="female"> Жіноча</p> <p><input type="radio" name="sex" value="none" checked> Не знаю</p> <p><input type="submit" value="Надіслати"></p> </form> Багаторядковий текст <textarea name="comment">Коментар</textarea>
- 15. Кнопки <form> <p><button>Кнопка з текстом</button> <button> <img src="images/image.gif" alt=""> Кнопка з малюнком </button></p> <p><input type="submit" value="Надіслати"></p> </form>