Основи Html. Сергій Жуков
- 1. Основи HTML Serhii Zhukov Junior Marketing Manager
- 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. Основна структура HTML сторінок HTML сторінки створюються за допомогою гегів. Тег - елемент мови розмітки. <html> <head> <title>Назва сторінки</title> </head> <body> Контент </body> </html>
- 4. Корисні теги <h> - Заголовок <p> - Абзац <b> - Жирний шрифт <i> - Курсив <u> - Підкрелений шрифт <a> - Посилання <ol> - Нумерований список <ul> - Ненумерований список <br> - Перехід на новий рядок <img> - Картинка <table> - Таблиця
- 5. Заголовок <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>
- 6. Абзац <p>text</p> <p>text 1</p> <p>text 2</p> <p>text 3</p> text text 1 text 2 text 3
- 7. Жирний шрифт <b>word in bold</b> - фізичний тег Цей тег використовують лише для вигляду <strong>word in bold</strong> - логічний тег Це тег використовують для SEO
- 8. Курсив <i>word in italics</i> - фізичний тег Цей тег використовують лише для вигляду <em>word in italics</em> - логічний тег Це тег використовують для SEO
- 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. Посилання Просте посилання <a href="www.file2cart.com">www.file2cart.com</a> Анкор посилання <a href="www.file2cart.com">The Best Service</a> УВАГА! Слідкуйте за лапками: " - правильно “ - неправильно target=_blank - відкрити в новій вкладці
- 11. Нумерований список <ol> <li>text</li> <li>text1</li> <li>text2</li> </ol> ol - ordered list li - list element
- 12. Маркований список <ul> <li>text</li> <li>text1</li> <li>text2</li> </ul> ul - unordered list li - list element
- 13. Перехід на новий рядок text<br /> text1<br /> text3 text text1 text3 За новими правилами тег <br> потрібно закривати <br />
- 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. <img src="http://magneticone.prostoprint.com/static/products/thumb948c871e9e858458cb56a0c356e706fb.png" align="left" alt="image" border=" 1" height="250" vspace="30">
- 17. ДЯКУЮ ЗА УВАГУ!