Основи Html. Сергій Жуков

253 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
253
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Основи Html. Сергій Жуков

  1. 1. Основи HTML Serhii Zhukov Junior Marketing Manager
  2. 2. Що таке HTML та його версії HTML - (HyperText Markup Language) - стандартна мова розмітки документів в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML. Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді. Версії: HTML (1992) HTML 2.0 (1995) HTML 4.0 (1997) HTML (1993) HTML 3.0 (failed) HTML 4.01 (1999) HTML + (1993) HTML 3.2 (1997) HTML 5 (2008)
  3. 3. Основна структура HTML сторінок HTML сторінки створюються за допомогою гегів. Тег - елемент мови розмітки. <html> <head> <title>Назва сторінки</title> </head> <body> Контент </body> </html>
  4. 4. Корисні теги <h> - Заголовок <p> - Абзац <b> - Жирний шрифт <i> - Курсив <u> - Підкрелений шрифт <a> - Посилання <ol> - Нумерований список <ul> - Ненумерований список <br> - Перехід на новий рядок <img> - Картинка <table> - Таблиця
  5. 5. Заголовок <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>
  6. 6. Абзац <p>text</p> <p>text 1</p> <p>text 2</p> <p>text 3</p> text text 1 text 2 text 3
  7. 7. Жирний шрифт <b>word in bold</b> - фізичний тег Цей тег використовують лише для вигляду <strong>word in bold</strong> - логічний тег Це тег використовують для SEO
  8. 8. Курсив <i>word in italics</i> - фізичний тег Цей тег використовують лише для вигляду <em>word in italics</em> - логічний тег Це тег використовують для SEO
  9. 9. Підкреслення <u>underlined text</u> Цей тег використовують лише для вигляду Вважається, що логічною парою тега <u> є тег, який слугує для формування посиланя <a> 1 1 - http://stackoverflow.com/questions/525168/why-is-u-evil-while-strong-and-em-is-not
  10. 10. Посилання Просте посилання <a href="www.file2cart.com">www.file2cart.com</a> Анкор посилання <a href="www.file2cart.com">The Best Service</a> УВАГА! Слідкуйте за лапками: " - правильно “ - неправильно target=_blank - відкрити в новій вкладці
  11. 11. Нумерований список <ol> <li>text</li> <li>text1</li> <li>text2</li> </ol> ol - ordered list li - list element
  12. 12. Маркований список <ul> <li>text</li> <li>text1</li> <li>text2</li> </ul> ul - unordered list li - list element
  13. 13. Перехід на новий рядок text<br /> text1<br /> text3 text text1 text3 За новими правилами тег <br> потрібно закривати <br />
  14. 14. Картинка <img src="/images/picture.jpg"> <img src="http://www.1.com/images/picture.jpg"> align="right/left" - вирівнювання на правому/лівому краю alt="image" - текст при наведенні мишки border="0/1" - межа (в пікселях) height="20" - висота (в пікселях %) width="20" - ширина (в пікселях %) vspace="5" - відступ верх низ (в пікселях) hspace="5" - відступ право ліво (в пікселях)
  15. 15. <img src="http://magneticone.prostoprint.com/static/products/thumb948c871e9e858458cb56a0c356e706fb.png" align="left" alt="image" border=" 1" height="250" vspace="30">
  16. 16. Таблиця <table border="1"> <tr> <th>Pet</th> <th>Name</th> </tr> <tr> <td>Dog</td> <td>Jack</td> </tr> <tr> <td>Cat</td> <td align="center">Jill</td> </tr> </table>
  17. 17. ДЯКУЮ ЗА УВАГУ!

×