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