3.29M

Категория:

Интернет

Похожие презентации:

Введение в язык разметки HTML

HTML - Hyper Text Markup Language язык гипертекстовой разметки

Основы языка HTML: тэги, атрибуты тэгов, комментарии

Основы HTML и CSS. Введение и основные понятия

HTML. Язык описания Web-страниц

Web-страницы. Язык HTML

Язык HTML

HTML. Описание. Основные тэги

1. HTML 

HTML
BOOT CAMP
ОБУХОВ 2016

2. В предыдущие серии

В ПРЕДЫДУЩИЕ
СЕРИИ
•Что такое HTML.
Описание
Основные тэги
Пример HTML страницы
Создаем HTML страницу

3. HTML ?

HTML – язык разметки веб страниц

4. Версия HTML

ВЕРСИЯ HTML
Последняя версия HTML – HTML 5

5. А что такое ТэГ?

А ЧТО ТАКОЕ ТЭГ?
Тэг – базовый элемент HTML разметки

6. Тэги бывают 2 видов

ТЭГИ БЫВАЮТ 2
ВИДОВ
• Парные
• Одинарные (пустые)

7. Основные тэги

ОСНОВНЫЕ ТЭГИ
• <html>
• <header>
• <head>
• <nav>
• <body>
• <section>
• <div>
• <aside>
• <h1> - <h?>
• <p>
• <a>
• <table>, <tr>, ??, ??
• 
• <article>
• <footer>
• <address>

8. Домашние задание (home work)

ДОМАШНИЕ ЗАДАНИЕ
(HOME WORK)
• Что такое <!DOCTYPE> ?
• Как правильно укзать <!DOCTYPE> ?
• Что такое парные и одиночные тэги?
• Тэг <img>
• Как сделать список?
• Что такое атрибуты?
• Что такое inline стили?
• Как проверить HTML код на валидность?

9. Повторим

ПОВТОРИМ
DOCTYPE – тэг который обозначает тип документа
В HTML5 правильно указывать так:
<!DOCTYPE html>

10. Повторим

ПОВТОРИМ
ПАРНЫЕ
ПУСТЫЕ
<html> </html>
<img />
<body></body>
<br />
<div></div>
<hr />
<h1></h1>
<meta />
<header></header>
<br></br>
<p></p>

11. <img />

12. Списки

СПИСКИ
• <ol>
• <ul>
• <li>
• <dl>
• <dt>
• <dd>

13. Списки

СПИСКИ
1. Сходить в магазин
2. Заплатить за комуналку
3. Убрать квартиру
Audi
- хороший автомобиль
ВАЗ
- автомобиль
Поехать в Италию
Прыгнуть с парашутом
Купить новый Iphone

14. Атрибуты

АТРИБУТЫ
Атрибут – предоставляет дополнительную информацию
о тэги.
<img src="somePic.png" alt=“Some pic" />
<a href="http://www.w3schools.com">This is a link</a>
<p title="About W3Schools">

15. Универсальные

УНИВЕРСАЛЬНЫЕ
• style
• id
• lang
• class
• title

16. События

СОБЫТИЯ
• onclick
• onchange
• onsubmit

17. Уникальные

УНИКАЛЬНЫЕ
<img src="somePic.png" alt=“Some pic" />
<video src="movie.ogg" controls>
Ваш браузер не поддерживает видео
</video>

18. Inline стили

INLINE СТИЛИ
<body style=“color:red;”>
<body style=“color:red; background-color:#000;”>
<body style=“color:red; background-image: url(images/bg.jpg);”>

19. Путь (path)

ПУТЬ (PATH)
• Если в одной и той
же папке (на одном
уровне)
имяФайла.png
• Если внутри папки,
которая с нами на
том же уровне
имяПапки/имяФайла.png
• Если выше
../имяФайла.png
• Бывает и так
../имяПапки/имяФайла.png

20. https://validator.w3.org/

HTTPS://VALIDATOR.W3.ORG/

21. https://validator.w3.org/

HTTPS://VALIDATOR.W3.ORG/

22. https://validator.w3.org/

HTTPS://VALIDATOR.W3.ORG/

23. Немного нового

НЕМНОГО НОВОГО
1. Тэг <meta>
2. Тэги <i>, <b>, <small>, <mark>, <del>

24. <META>

<META>
В этом тэги мы указываем дополнительную информацию,
например, ключевые слова или автора.
<meta name="keywords" content=“HTML5" />
<meta name="author" content="Bidenko Igor" />

25. Тэги <i>, <b>, <small>, <mark>, <del>

ТЭГИ <I>, <B>, <SMALL>,
<MARK>, <DEL>
Это тэги для форматирования текста.

26. Тэги <i>, <b>, <small>, <mark>, <del>

ТЭГИ <I>, <B>, <SMALL>,
<MARK>, <DEL>

27. Есть и другие тэги

ЕСТЬ И ДРУГИЕ ТЭГИ
• <sub>
• <sup>
• <ins>
• <strong>
• <em>

28. Как правильно писать (Styling)

КАК ПРАВИЛЬНО
ПИСАТЬ (STYLING)
1. Всегда указывайте DOCTYPE.
2. Пишите тэги с маленькой буквы: <p>, а не <P>
3. Не пишите как попало: <P> TEXT </p>
4. Закрывайте все тэги: <p> TEXT </p>, а не <p> TEXT
5. Закрывайте одиночные тэги: <br />, а не <br>
6. Пишите атрибуты с маленькой буквы. <div id=“myId”>,
а не <div Id=“myId”>, или <div ID=“myId”>
7. Значения атрибута должно быть внутри кавычек.
<div id=“myId”>, а не <div id=myId>
8. Не увлекайтесь пробелами. <div id=“myId”> лучше
чем <div id = “myId”>

29. Создаем страницу

СОЗДАЕМ СТРАНИЦУ

30. Создаем страницу

СОЗДАЕМ СТРАНИЦУ
1. Названия сайта
2. Навигация
3. Лого

31. Создаем страницу

СОЗДАЕМ СТРАНИЦУ
1. Добавляем основную секцию
2. Добавляем саб-секцию

32. Создаем страницу

СОЗДАЕМ СТРАНИЦУ
1. Ставим картинку как фон
2. Меняем цвет текста
3. Делаем основной и доп. Секциям белый фон

33. HOME WORK!

ТЕОРИЯ
ПРАКТИКА
• Блочные и
строчные
элементы
• Сделать 2
колонки на сайте
(правую и левую)
• Позиционирован
ие элементов на
странице
• Расставить
элементы как на
картинке
• Атрибуты

34. 35. HOmE Work!

HOME WORK!
Результаты выкладывайте в группу в ВК!

English Русский Правила