Основи html. Сергій Жуков
Post on 15-Jun-2015
89 Views
Preview:
TRANSCRIPT
Serhii ZhukovJunior Marketing Manager
Основи HTML
Що таке 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)
Основна структура HTML сторінок
HTML сторінки створюються за допомогою гегів. Тег - елемент мови розмітки.
<html><head>
<title>Назва сторінки</title></head><body>
Контент</body>
</html>
Корисні теги<h> - Заголовок<p> - Абзац<b> - Жирний шрифт<i> - Курсив<u> - Підкрелений шрифт<a> - Посилання<ol> - Нумерований список<ul> - Ненумерований список<br> - Перехід на новий рядок<img> - Картинка<table> - Таблиця
Заголовок
<h1>Заголовок 1</h1><h2>Заголовок 2</h2><h3>Заголовок 3</h3><h4>Заголовок 4</h4><h5>Заголовок 5</h5><h6>Заголовок 6</h6>
Абзац
<p>text</p><p>text 1</p><p>text 2</p><p>text 3</p>
texttext 1text 2text 3
Жирний шрифт
<b>word in bold</b> - фізичний тег
Цей тег використовують лише для вигляду
<strong>word in bold</strong> - логічний тег
Це тег використовують для SEO
Курсив
<i>word in italics</i> - фізичний тег
Цей тег використовують лише для вигляду
<em>word in italics</em> - логічний тег
Це тег використовують для SEO
Підкреслення
<u>underlined text</u>
Цей тег використовують лише для вигляду
Вважається, що логічною парою тега <u> є тег, який слугує для формування посиланя <a>1
1 - http://stackoverflow.com/questions/525168/why-is-u-evil-while-strong-and-em-is-not
Посилання
Просте посилання<a href="www.file2cart.com">www.file2cart.com</a>
Анкор посилання<a href="www.file2cart.com">The Best Service</a>
УВАГА! Слідкуйте за лапками:
" - правильно “ - неправильно
target=_blank - відкрити в новій вкладці
Нумерований список
<ol><li>text</li><li>text1</li><li>text2</li></ol>
ol - ordered list
li - list element
Маркований список
<ul><li>text</li><li>text1</li><li>text2</li></ul>
ul - unordered list
li - list element
Перехід на новий рядок
text<br />text1<br />text3
texttext1text3
За новими правилами тег <br> потрібно закривати <br />
Картинка
<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" - відступ право \ ліво (в пікселях)
<img src="http://magneticone.prostoprint.com/static/products/thumb-948c871e9e858458cb56a0c356e706fb.png" align="left" alt="image" border="1" height="250" vspace="30">
Таблиця<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>
ДЯКУЮ ЗА УВАГУ!
top related