SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
Основи HTML
Serhii Zhukov
Junior Marketing Manager
Що таке 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>
text
text 1
text 2
text 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
text
text1
text3
За новими правилами тег <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/thumb948c871e9e858458cb56a0c356e706fb.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>
ДЯКУЮ ЗА УВАГУ!

Weitere ähnliche Inhalte

Ähnlich wie Основи Html. Сергій Жуков (14)

Presentation # 24. hypertext markup language concept
Presentation # 24.  hypertext markup language conceptPresentation # 24.  hypertext markup language concept
Presentation # 24. hypertext markup language concept
 
57,23.pdf
57,23.pdf57,23.pdf
57,23.pdf
 
Html перші кроки
Html перші крокиHtml перші кроки
Html перші кроки
 
5
55
5
 
Html мова розмітки гіпертекстового документу
Html  мова розмітки гіпертекстового документуHtml  мова розмітки гіпертекстового документу
Html мова розмітки гіпертекстового документу
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Html
HtmlHtml
Html
 
Coding for Future in Lutsk. JavaScript. Part 7
Coding for Future in Lutsk. JavaScript. Part 7Coding for Future in Lutsk. JavaScript. Part 7
Coding for Future in Lutsk. JavaScript. Part 7
 
основні теги мови Html
основні теги мови Htmlосновні теги мови Html
основні теги мови Html
 
3
33
3
 
Html1
Html1Html1
Html1
 
HTML- частина 1
HTML- частина 1HTML- частина 1
HTML- частина 1
 
3
33
3
 
Тема 12 - Ініціатива відкритих форматів. XML та метадані.
Тема 12 - Ініціатива відкритих форматів. XML та метадані.Тема 12 - Ініціатива відкритих форматів. XML та метадані.
Тема 12 - Ініціатива відкритих форматів. XML та метадані.
 

Mehr von HRdepartment

Юзабіліті в сучасному дизайні. Сергій Ганжа
Юзабіліті в сучасному дизайні. Сергій ГанжаЮзабіліті в сучасному дизайні. Сергій Ганжа
Юзабіліті в сучасному дизайні. Сергій ГанжаHRdepartment
 
Чому юзабіліті. Мар'яна Онисько
Чому юзабіліті.  Мар'яна ОниськоЧому юзабіліті.  Мар'яна Онисько
Чому юзабіліті. Мар'яна ОниськоHRdepartment
 
Тренінг дизайн. Максим Орловський
Тренінг дизайн. Максим ОрловськийТренінг дизайн. Максим Орловський
Тренінг дизайн. Максим ОрловськийHRdepartment
 
Cтрах кращий друг і підступний ворог. Cергій Кутузов
Cтрах  кращий друг і підступний ворог. Cергій КутузовCтрах  кращий друг і підступний ворог. Cергій Кутузов
Cтрах кращий друг і підступний ворог. Cергій КутузовHRdepartment
 
Секрети англ. копірайтингу. Марічка Балук
Секрети англ. копірайтингу. Марічка БалукСекрети англ. копірайтингу. Марічка Балук
Секрети англ. копірайтингу. Марічка БалукHRdepartment
 
Самомотивація. Сергій Кутузов
Самомотивація. Сергій КутузовСамомотивація. Сергій Кутузов
Самомотивація. Сергій КутузовHRdepartment
 
Проект Api2cart. Петро Комар
Проект Api2cart. Петро КомарПроект Api2cart. Петро Комар
Проект Api2cart. Петро КомарHRdepartment
 
Прийняття рішень. Анатолій Денис
Прийняття рішень. Анатолій ДенисПрийняття рішень. Анатолій Денис
Прийняття рішень. Анатолій ДенисHRdepartment
 
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна Онисько
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна ОниськоОстанні офіційні оновлення алгоритму Google (літо 2012). Мар'яна Онисько
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна ОниськоHRdepartment
 
Основи письмових комунікацій. Сергій Кутузов
Основи письмових комунікацій. Сергій КутузовОснови письмових комунікацій. Сергій Кутузов
Основи письмових комунікацій. Сергій КутузовHRdepartment
 
Новий Контейнер міграції С2С. Віктор Твердун
Новий Контейнер міграції С2С. Віктор Твердун Новий Контейнер міграції С2С. Віктор Твердун
Новий Контейнер міграції С2С. Віктор Твердун HRdepartment
 
Маркетингова стратегія 8 з 10 Юра Стах
Маркетингова стратегія 8 з 10 Юра СтахМаркетингова стратегія 8 з 10 Юра Стах
Маркетингова стратегія 8 з 10 Юра СтахHRdepartment
 
Маркетингова Стратегія 8 з 10. Юра Стах
Маркетингова Стратегія 8 з 10. Юра СтахМаркетингова Стратегія 8 з 10. Юра Стах
Маркетингова Стратегія 8 з 10. Юра СтахHRdepartment
 
Контентна стратегія просування іт продукту. Галя Єфимчук
Контентна стратегія просування іт продукту. Галя ЄфимчукКонтентна стратегія просування іт продукту. Галя Єфимчук
Контентна стратегія просування іт продукту. Галя ЄфимчукHRdepartment
 
Вебинар по Yaware. Оля Трофімова
Вебинар по Yaware. Оля ТрофімоваВебинар по Yaware. Оля Трофімова
Вебинар по Yaware. Оля ТрофімоваHRdepartment
 
Веб аналітика типові задачі та методи вирішень. Мар'яна Онисько
Веб аналітика  типові задачі та методи вирішень. Мар'яна ОниськоВеб аналітика  типові задачі та методи вирішень. Мар'яна Онисько
Веб аналітика типові задачі та методи вирішень. Мар'яна ОниськоHRdepartment
 
Архітектура типових рішень з використанням Api2cart Юрій Кріль
Архітектура типових рішень з використанням Api2cart Юрій КрільАрхітектура типових рішень з використанням Api2cart Юрій Кріль
Архітектура типових рішень з використанням Api2cart Юрій КрільHRdepartment
 
Social media marketing. Галя Вільчинська
Social media  marketing. Галя ВільчинськаSocial media  marketing. Галя Вільчинська
Social media marketing. Галя ВільчинськаHRdepartment
 
SMM - Dima Lazarchuk
SMM - Dima LazarchukSMM - Dima Lazarchuk
SMM - Dima LazarchukHRdepartment
 
Php unit. Y. Muzychushun
Php unit. Y. MuzychushunPhp unit. Y. Muzychushun
Php unit. Y. MuzychushunHRdepartment
 

Mehr von HRdepartment (20)

Юзабіліті в сучасному дизайні. Сергій Ганжа
Юзабіліті в сучасному дизайні. Сергій ГанжаЮзабіліті в сучасному дизайні. Сергій Ганжа
Юзабіліті в сучасному дизайні. Сергій Ганжа
 
Чому юзабіліті. Мар'яна Онисько
Чому юзабіліті.  Мар'яна ОниськоЧому юзабіліті.  Мар'яна Онисько
Чому юзабіліті. Мар'яна Онисько
 
Тренінг дизайн. Максим Орловський
Тренінг дизайн. Максим ОрловськийТренінг дизайн. Максим Орловський
Тренінг дизайн. Максим Орловський
 
Cтрах кращий друг і підступний ворог. Cергій Кутузов
Cтрах  кращий друг і підступний ворог. Cергій КутузовCтрах  кращий друг і підступний ворог. Cергій Кутузов
Cтрах кращий друг і підступний ворог. Cергій Кутузов
 
Секрети англ. копірайтингу. Марічка Балук
Секрети англ. копірайтингу. Марічка БалукСекрети англ. копірайтингу. Марічка Балук
Секрети англ. копірайтингу. Марічка Балук
 
Самомотивація. Сергій Кутузов
Самомотивація. Сергій КутузовСамомотивація. Сергій Кутузов
Самомотивація. Сергій Кутузов
 
Проект Api2cart. Петро Комар
Проект Api2cart. Петро КомарПроект Api2cart. Петро Комар
Проект Api2cart. Петро Комар
 
Прийняття рішень. Анатолій Денис
Прийняття рішень. Анатолій ДенисПрийняття рішень. Анатолій Денис
Прийняття рішень. Анатолій Денис
 
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна Онисько
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна ОниськоОстанні офіційні оновлення алгоритму Google (літо 2012). Мар'яна Онисько
Останні офіційні оновлення алгоритму Google (літо 2012). Мар'яна Онисько
 
Основи письмових комунікацій. Сергій Кутузов
Основи письмових комунікацій. Сергій КутузовОснови письмових комунікацій. Сергій Кутузов
Основи письмових комунікацій. Сергій Кутузов
 
Новий Контейнер міграції С2С. Віктор Твердун
Новий Контейнер міграції С2С. Віктор Твердун Новий Контейнер міграції С2С. Віктор Твердун
Новий Контейнер міграції С2С. Віктор Твердун
 
Маркетингова стратегія 8 з 10 Юра Стах
Маркетингова стратегія 8 з 10 Юра СтахМаркетингова стратегія 8 з 10 Юра Стах
Маркетингова стратегія 8 з 10 Юра Стах
 
Маркетингова Стратегія 8 з 10. Юра Стах
Маркетингова Стратегія 8 з 10. Юра СтахМаркетингова Стратегія 8 з 10. Юра Стах
Маркетингова Стратегія 8 з 10. Юра Стах
 
Контентна стратегія просування іт продукту. Галя Єфимчук
Контентна стратегія просування іт продукту. Галя ЄфимчукКонтентна стратегія просування іт продукту. Галя Єфимчук
Контентна стратегія просування іт продукту. Галя Єфимчук
 
Вебинар по Yaware. Оля Трофімова
Вебинар по Yaware. Оля ТрофімоваВебинар по Yaware. Оля Трофімова
Вебинар по Yaware. Оля Трофімова
 
Веб аналітика типові задачі та методи вирішень. Мар'яна Онисько
Веб аналітика  типові задачі та методи вирішень. Мар'яна ОниськоВеб аналітика  типові задачі та методи вирішень. Мар'яна Онисько
Веб аналітика типові задачі та методи вирішень. Мар'яна Онисько
 
Архітектура типових рішень з використанням Api2cart Юрій Кріль
Архітектура типових рішень з використанням Api2cart Юрій КрільАрхітектура типових рішень з використанням Api2cart Юрій Кріль
Архітектура типових рішень з використанням Api2cart Юрій Кріль
 
Social media marketing. Галя Вільчинська
Social media  marketing. Галя ВільчинськаSocial media  marketing. Галя Вільчинська
Social media marketing. Галя Вільчинська
 
SMM - Dima Lazarchuk
SMM - Dima LazarchukSMM - Dima Lazarchuk
SMM - Dima Lazarchuk
 
Php unit. Y. Muzychushun
Php unit. Y. MuzychushunPhp unit. Y. Muzychushun
Php unit. Y. Muzychushun
 

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