<commit_before><!DOCTYPE html>
<html lang="en">
<head>
	<title>Введение в HTML и CSS</title>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles/screen-16x10.css">
	<link rel="stylesheet" href="styles/theme.css">
	<link rel="stylesheet" href="styles/style.css">
</head>
<body class="shower list">
	<header class="caption">
		<h1>Введение в HTML и CSS</h1>
		<p><a href=""><NAME></a>, EPAM Systems</p>
	</header>
	<section class="slide white" id="cover">
		<img src="pictures/logo.png" alt="" class="cover">
		<h2>Введение в HTML и CSS</h2>
	</section>
	<section class="slide">
		<h2>Инструменты</h2>
		<ul lang="ru">
			<li class="next">Текстовые редакторы и IDE</li>
			<li class="next">Инструменты разработчика в браузерах</li>
			<li class="next">Adobe Photoshop для работы с макетами дизайна</li>
		</ul>
	</section>
	<section class="slide">
		<h2>Текстовые редакторы и IDE</h2>
		<ul lang="ru">
			<li><a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a></li>
			<li><a href="http://brackets.io/" target="_blank">Brackets</a></li>
			<li><a href="https://atom.io/" target="_blank">Atom</a></li>
			<li><a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a></li>
		</ul>
	</section>
	<section class="slide">
        <p><strong>IDE</strong> <i>(англ. Integrated development environment)</i> — интегрированная среда разработки, включает в себя:
            текстовый редактор, компилятор и/или интерпретатор, средства автоматизации сборки, отладчик, средства для интеграции с системами контроля версий и т.д.</p>
        <ul lang="ru">
            <li><a href="https://www.jetbrains.com/webstorm/" target="_blank"><strong>WebStorm</strong></a>, бесплатная лицензия <a href="https://www.jetbrains.com/student/" target="_blank">для студентов и преподавателей</a> и
                <a href="https://www.jetbrains.com/buy/classroom/?product=webstorm" target="_blank">для оснащения учебных классов</a></li>
        </ul>
	</section>
	<section class="slide">
		<h2>Инструменты разработчика в браузерах</h2>
        <ul lang="ru">
            <li><a href="https://developer.chrome.com/devtools" target="_blank">Chrome DevTools</a></li>
            <li><a href="https://developer.mozilla.org/en/docs/Tools" target="_blank">Firefox Developer Tools</a></li>
            <li><a href="https://dev.windows.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/" target="_blank">Microsoft Edge Developer Tools</a></li>
        </ul>
        <p>Запускаются в браузере по нажатию на <mark>F12</mark></p>
	</section>
	<section class="slide">
		<h2>Adobe Photoshop</h2>
		<p>Фронтэнд разработчику необходимы знания Photoshop на уровне работы с макетами дизайна, в основном это <i>работа со слоями и манипулирование текстом</i>.</p>
        <p><a href="https://docs.google.com/document/d/1z28AGlCm2irowVAp5quLSC0nkFo9VIJDhVEfxXGQAM8/edit" target="_blank">Уроки</a></p>
	</section>
	<section class="slide">
		<h2>Источники информации</h2>
		<ul lang="ru">
			<li>Спецификация</li>
            <li>Книги</li>
            <li>Конференции</li>
            <li>MDN</li>
            <li>Блоги</li>
            <li>Twitter</li>
		</ul>
	</section>
	<section class="slide">
		<h2>Структура HTML-документа</h2>
	</section>
	<section class="slide">
		<h2>Семантика HTML-документа</h2>
	</section>
	<section class="slide">
		<h2>Основные теги</h2>
	</section>
	<section class="slide">
		<h2>Виды CSS-селекторов</h2>
	</section>
	<section class="slide">
		<h2>Единицы измерения в CSS</h2>
	</section>
	<section class="slide">
		<h2>Основные CSS-свойства</h2>
	</section>
	<section class="slide">
		<h2>Инлайновый контекст</h2><commit_msg>html document structure<commit_after><!DOCTYPE html>
<html lang="ru">
<head>
	<title>Введение в HTML и CSS</title>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles/screen-16x10.css">
	<link rel="stylesheet" href="styles/theme.css">
	<link rel="stylesheet" href="styles/style.css">
</head>
<body class="shower list">
	<header class="caption">
		<h1>Введение в HTML и CSS</h1>
		<p><a href=""><NAME></a>, EPAM Systems</p>
	</header>
	<section class="slide white" id="cover">
		<img src="pictures/logo.png" alt="" class="cover">
		<h2>Введение в HTML и CSS</h2>
	</section>
	<section class="slide">
		<h2 class="shout">Инструменты</h2>
	</section>
	<section class="slide">
		<h2>Текстовые редакторы и IDE</h2>
		<ul lang="ru">
			<li><a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a></li>
			<li><a href="http://brackets.io/" target="_blank">Brackets</a></li>
			<li><a href="https://atom.io/" target="_blank">Atom</a></li>
			<li><a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a></li>
		</ul>
	</section>
	<section class="slide">
        <p><strong>IDE</strong> <i>(англ. Integrated development environment)</i> — интегрированная среда разработки, включает в себя:
            текстовый редактор, компилятор и/или интерпретатор, средства автоматизации сборки, отладчик, средства для интеграции с системами контроля версий и т.д.</p>
        <ul lang="ru">
            <li><a href="https://www.jetbrains.com/webstorm/" target="_blank"><strong>WebStorm</strong></a>, бесплатная лицензия <a href="https://www.jetbrains.com/student/" target="_blank">для студентов и преподавателей</a> и
                <a href="https://www.jetbrains.com/buy/classroom/?product=webstorm" target="_blank">для оснащения учебных классов</a></li>
        </ul>
	</section>
	<section class="slide">
		<h2>Инструменты разработчика в браузерах</h2>
        <ul lang="ru">
            <li><a href="https://developer.chrome.com/devtools" target="_blank">Chrome DevTools</a></li>
            <li><a href="https://developer.mozilla.org/en/docs/Tools" target="_blank">Firefox Developer Tools</a></li>
            <li><a href="https://dev.windows.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/" target="_blank">Microsoft Edge Developer Tools</a></li>
        </ul>
        <p>Запускаются в браузере по нажатию на <mark>F12</mark></p>
	</section>
	<section class="slide">
		<h2>Adobe Photoshop</h2>
		<p>Фронтэнд разработчику необходимы знания Photoshop на уровне работы с макетами дизайна, в основном это <i>работа со слоями и манипулирование текстом</i>.</p>
        <p><a href="https://docs.google.com/document/d/1z28AGlCm2irowVAp5quLSC0nkFo9VIJDhVEfxXGQAM8/edit" target="_blank">Уроки</a></p>
	</section>
	<section class="slide">
		<h2>Источники информации</h2>
		<ul lang="ru">
			<li>Спецификации <a href="https://www.w3.org/" target="_blank">W3C</a>: <a href="https://www.w3.org/TR/#tr_HTML">HTML</a>, <a href="https://www.w3.org/TR/#tr_CSS">CSS</a></li>
            <li><a href="https://developer.mozilla.org/ru/">MDN</a></li>
            <li>Книги: <a href="http://shop.oreilly.com/category/browse-subjects/web-development/html-css.do" target="_blank">O'Reilly</a></li>
            <li>Конференции:
                <a href="http://www.youtube.com/user/wstdays" target="_blank">Веб-стандарты</a>,
                <a href="https://vimeo.com/channels/cssday" target="_blank">CSS Day</a>,
                <a href="https://vimeo.com/fronteers" target="_blank">Fronteers</a>
            </li>
            <li>Блоги:
                <a href="http://habrahabr.ru/posts/frontend/" target="_blank">Habrahabr</a>,
                <a href="https://css-tricks.com/" target="_blank">CSS-TRICKS</a>,
                <a href="https://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a>,
                <a href="http://alistapart.com/" target="_blank">A LIST APART</a>
            </li>
		</ul>
	</section>
    <section class="slide">
        <h2 class="shout">HTML</h2>
    </section>
	<section class="slide">
		<h2>Структура HTML-документа</h2>
        <pre>
            <code>&lt;!DOCTYPE html&gt;</code>
            <code>&lt;html lang="ru"&gt;</code>
			<code>    &lt;head&gt;</code>
			<code>        &lt;title&gt;Название документа&lt;/title&gt;</code>
			<code>    &lt;/head&gt;</code>
            <code>    &lt;body&gt;&lt;/body&gt;</code>
            <code>&lt;/html&gt;</code>
		</pre>
	</section>
    <section class="slide">
        <h2>Структура HTML-документа</h2>
        <pre>
            <code><mark>&lt;!DOCTYPE html&gt;</mark></code>
            <code>&lt;html lang="ru"&gt;</code>
			<code>    &lt;head&gt;</code>
			<code>        &lt;title&gt;Название документа&lt;/title&gt;</code>
			<code>    &lt;/head&gt;</code>
            <code>    &lt;body&gt;&lt;/body&gt;</code>
            <code>&lt;/html&gt;</code>
		</pre>
    </section>
    <section class="slide">
        <h2>Структура HTML-документа</h2>
        <pre>
            <code>&lt;!DOCTYPE html&gt;</code>
            <code><mark>&lt;html lang="ru"&gt;</mark></code>
			<code>    &lt;head&gt;</code>
			<code>        &lt;title&gt;Название документа&lt;/title&gt;</code>
			<code>    &lt;/head&gt;</code>
            <code>    &lt;body&gt;&lt;/body&gt;</code>
            <code><mark>&lt;/html&gt;</mark></code>
		</pre>
    </section>
    <section class="slide">
        <h2>Структура HTML-документа</h2>
        <pre>
            <code>&lt;!DOCTYPE html&gt;</code>
            <code>&lt;html lang="ru"&gt;</code>
			<code>    <mark>&lt;head&gt;</mark></code>
			<code>        &lt;title&gt;Название документа&lt;/title&gt;</code>
			<code>    <mark>&lt;/head&gt;</mark></code>
            <code>    &lt;body&gt;&lt;/body&gt;</code>
            <code>&lt;/html&gt;</code>
		</pre>
    </section>
    <section class="slide">
        <h2>Структура HTML-документа</h2>
        <pre>
            <code>&lt;!DOCTYPE html&gt;</code>
            <code>&lt;html lang="ru"&gt;</code>
			<code>    &lt;head&gt;</code>
			<code>        <mark>&lt;title&gt;Название документа&lt;/title&gt;</mark></code>
			<code>    &lt;/head&gt;</code>
            <code>    &lt;body&gt;&lt;/body&gt;</code>
            <code>&lt;/html&gt;</code>
		</pre>
    </section>
    <section class="slide">
        <h2>Структура HTML-документа</h2>
        <pre>
            <code>&lt;!DOCTYPE html&gt;</code>
            <code>&lt;html lang="ru"&gt;</code>
			<code>    &lt;head&gt;</code>
			<code>        &lt;title&gt;Название документа&lt;/title&gt;</code>
			<code>    &lt;/head&gt;</code>
            <code>    <mark>&lt;body&gt;&lt;/body&gt;</mark></code>
            <code>&lt;/html&gt;</code>
		</pre>
    </section>
    <section class="slide">
        <h2>DOCTYPE</h2>
        <p>Это инструкция, которая говорит браузеру, с использованием какой версии <mark>HTML</mark> написан данный документ.
            <mark>&lt;!DOCTYPE&gt;</mark> должнен быть объявлен в первой строке документа, до тега <mark>&lt;html&gt;</mark>.
        </p>
    </section>
    <section class="slide">
        <h2>HEAD</h2>
        <p>Контейнер для метаданных. Следующие теги описывают метаданные:</p>
        <ul lang="ru">
            <li>&lt;title&gt;</li>
            <li>&lt;style&gt;</li>
            <li>&lt;meta&gt;</li>
            <li>&lt;link&gt;</li>
            <li>&lt;script&gt;</li>
            <li>&lt;base&gt;</li>
        </ul>
    </section>
    <section class="slide">
        <h2><a href="http://www.w3schools.com/tags/ref_byfunc.asp" target="_blank">Основные теги</a></h2>
    </section>
	<section class="slide">
		<h2>Семантика HTML-документа</h2>
	</section>
	<section class="slide">
		<h2>Виды CSS-селекторов</h2>
	</section>
	<section class="slide">
		<h2>Единицы измерения в CSS</h2>
	</section>
	<section class="slide">
		<h2>Основные CSS-свойства</h2>
	</section>
	<section class="slide">
		<h2>Инлайновый контекст</h2>
{'fraction_non_alphanumeric': 0.2016728624535316, 'fraction_numerical': 0.009547144305508617, 'mean_word_length': 3.3106336489439183, 'pattern_counts': {'":': 0, '<': 505, '<?xml version=': 0, '>': 505, 'https://': 26, 'lorem ipsum': 0, 'www.': 14, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1308557', 'n_tokens_mistral': 4739, 'n_tokens_neox': 4762, 'n_words': 735}