Zvukobook.ru - Первый аудиокнижный | Html и css учебник: лучшие учебники для начинающих и продвинутых

Содержание

Основные элементы | Учебник HTML | Учебник HTML

В этой главе Вы частично научитесь использовать теги в примерах.

В следующих главах Вы узнаете о них более подробно.

HTML Документ

Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается с <html> и заканчивается </html>.

Видимая часть HTML документа находится между <body> и </body>.

Пример

<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>

</body>
</html>

Редактор кода »

Декларация <!DOCTYPE>

Декларация <!DOCTYPE> представляет тип документа и помогает браузерам корректно отображать веб страницы.

Она должна появиться только один раз, в верхней части страницы (перед HTML тегами).

Декларация <!DOCTYPE> не чувствительно к регистру.

Декларация <!DOCTYPE>

для HTML5:

HTML Заголовки

HTML заголовки определены тегами <h2> до <h6>.

<h2> определяет наиболее важный заголовок. <h6> определяет наименее важная заголовок:

Пример

<h2>Это заголовок 1</h2>
<h3>Это заголовок 2</h3>
<h4>Это заголовок 3</h4>
<h5>Это заголовок 4</h5>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>

Редактор кода »

HTML Параграфы

HTML параграфы определяются тегом <p>:

HTML Ссылки

HTML ссылки определяются тегом <a>:

Назначение ссылки указана в атрибуте

href.

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.

HTML Изображения

HTML изображения определяются с помощью тега <img>.

Исходный файл src, альтернативный текст alt, ширина и высота указана в качестве атрибутов width и height:

Как просмотреть исходный код HTML?

Вы когда-нибудь видели веб страницу и задавались вопросом: «Эх! Как им это удалось?»

Просмотр исходного кода HTML:

Щелкните правой кнопкой мыши на HTML странице и выберите «Просмотр источника страницы» (в Chrome) или «Просмотр источника» (в Edge), или аналогично в других браузерах. Откроется окно, содержащее исходный HTML код страницы.

Проверка HTML элемента:

Щелкните правой кнопкой мыши на элементе (или пустой области) и выберите «Проверить» или «Проверьте элемент», чтобы увидеть, из чего состоят элементы (вы увидите как HTML, так и CSS). Вы также можете редактировать HTML или CSS на лету в открывшейся панели элементы или стили.

Учебник HTML — Учебник CSS

Учебник CSS

Введение.

Эта книга поможет Вам начать работать с CSS всего через пару часов. Она объясняет всё очень доходчиво и научит Вас этой сложной технологии.

Каскадные таблицы стилей Cascading Style Sheets (CSS) это инструмент для редактирования и изменения вида ваших web-сайтов. Оно поможет сэкономить много времени и предоставит Вам совершенно новые возможности в разработке web-сайтов. CSS совершенно необходим каждому, кто сталкивается с web-дизайном.

Использование CSS требует знания основ HTML. Если вы не знаете HTML, то начните с Учебника HTML, прежде чем перейти к CSS.

Изучение CSS увлекает. Читая этот учебник, выделяйте некоторое количество времени для проведения экспериментов с изученным в каждом уроке материалом.

Он не претендует на полноту — это лишь базовый курс, который содержит минимально необходимые знания, описывает синтаксис и основные приёмы.

Какие программы нужно иметь?

Вам понадобится бесплатный и простой текстовый редактор.

Например программа Notepad для Windows или Gedit для Linux.

Простой текстовый редактор идеально подходит для изучения HTML и CSS, поскольку он не изменяет вводимый вами код. Так вы быстро будете обучаться, а ошибки будут только вашими, а не программными.

С этим учебником можно использовать любой браузер.

Всё что Вам необходимо, это браузер и простой текстовый редактор.

Перед Вами представлены 15 уроков:

— Урок 1: Что такое CSS

— Урок 2: Как работает CSS

— Урок 3: Цвет и фон

— Урок 4: Шрифты

— Урок 5: Текст

— Урок 6: Ссылки

— Урок 7: Идентификация и группирование элементов

— Урок 8: Группирование элементов

— Урок 9: Боксовая модель

— Урок 10: Поля и заполнение

— Урок 11: Рамки

— Урок 12: Высота и ширина

— Урок 13: Всплывающие элементы

— Урок 14: Позиционирование элементов

— Урок 15: Слои

— Заключение

Какие книги читать для изучения CSS3/HTML5/JS с нуля? — Хабр Q&A

Хочу заметить, что возможности более ранних версий HTML4 и CSS2, были включены в версии HTML5 и CSS3. Хотя и есть некоторые изменения, авторы книг обычно об этом упоминают.
На первых четырех этапах изучения, необходимо проделывать тоже, что и автор (установка текстового редактора, написание тегов, стилей и тд) и париться о чем-то более сложном не стоит.
Мой алгоритм изучения, имеет следующий порядок:
1) Прочесть книгу Мэтью Макдональда «Веб-разработка. Исчерпывающее руководство» 4 издание. По данной книге можно получить общее представление о HTML, CSS, JavaScript и других интересных моментах как, публикация/продвижение/монетизаци сайта, привлечение посетителей и ведение блога.

2) Посмотреть бесплатные курсы HTML4 и CSS2 Евгения Попова (курсам почти 10 лет, но они все еще актуальны, ибо все что в них рассматривается, используется на практике):
— курс по HTML
— курс по CSS

3) Теперь можно перейти к более детальному рассмотрению HTML5 и CSS3. И начать изучение я рекомендую именно с CSS3, так как большая часть возможностей HTML5 с уклоном на JavaScript. На этом этапе рекомендую книгу Дэвида Макфарланда «Новая большая книга CSS». В сети можно встретить книгу с названием «Большая книга CSS» от того же автора, но это предыдущее издание, нужна именно та, которая идет с припиской «Новая». Кроме основных возможностей CSS, книга познакомит с адаптивной версткой и препроцессором Sass/SCSS.

В данной книге рассматривается три способа верстки:
— с использованием float + margin
— более современный — Flexbox CSS
— модульная верстка, на примере сетки Skeleton (хотя способы верстки с использованием сетки Bootstrap и СSS Grid в книге не рассматриваются, принцип работы у них одинаков)

4) Теперь можно переходить к HTML5. К прочтению рекомендую следующие книги:
— Мэтью Мак-Дональд «HTML5. Недостающее руководство»

— Шмитт, Симпсон «HTML5. Рецепты программирования»
Данные книги познакомят не только с изменениями в синтаксисе и семантике HTML5, но с новыми возможностями:
— формы 2.0
— добавление HTML5 аудио/видео
— работа с canvas
— геолокация
— добавление в разметку микроданных
— использование ARIA
— локальное хранилище (sessionStorage)
— автономные приложения (appcache)
— Веб-сокеты (WebSoket)
— и тд

5) Теперь у нас есть общее представление о тегах, стилях, текстовых редакторах, о том как это работает и взаимосвязано между собой, что можно, а что нельзя делать. Пора приступать к практике. Нужно сверстать хотя бы 2-3 страницы из готовых макетов. Теперь по порядку, что нужно сделать:

а) Установить текстовый редактор и настроить его под себя (Notepad++, Sublime Text, Atom, Brackets и тд). На первых этапах подойдет Notepad++, в дальнейшем стоит перейти на что-то более функциональное. Так же рекомендую установить плагин Emmet для Notepad++ и ознакомиться как он работает.
б) Установить основные браузеры, для тестирования верстки (с IE по начало можно не заморачиваться)
в) Установить графический редактор, для открытия готовых макетов (Photoshop, Figma, Avocode, Sketch). На первых порах использовать Photoshop.
г) На первых порах сделать простенькую заготовку для верстки (структуру папок, где будут размещаться стили картинки, скрипты и один файл index.html). В дальнейшем стоит обратить внимание на HTML5 Boilerplate, ну а дальше на Gulp и Webpack
д) Скачать готовые бесплатные psd-макеты
г) Сверстать макеты тремя разными способами:
— float+ margin
— flexbox
— bootstrap или CSS Grid
е) Ну а теперь находим свежий видеоурок на Youtube, где автор верстает тем или иным способом, смотрим и повторяем. В качестве справочников использовать сайты:
— htmlbook.ru
— webref.ru
— caniuse.com

6) В дальнейшем по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки комфортным, в этом случае нужно смотреть в сторону:
— gulp, webpack
— IDE для разработки, н-р, WebStorm
— препроцессоры HTML (HAML, Pug), препроцессоры CSS (Sass, Less, Stylus)

— git
— именование классов CSS
— среды для тестирования
— тд

7) Переходим к JavaScript. Книг конечно много, но я выделю следующие.
Книги на начальном этапе:
— Дэвид Макфарланд «JavaScript и jQuery. Исчерпывающее руководство»
— Фримен Эрик, Робсон Элизабет «Изучаем программирование на JavaScript»
Книги для углубленного изучения:
— Онлайн учебник, в том году обновилась информация
— Дэвид Флэнаган «JavaScript. Подробное руководство»
— Хавербеке Марейн «Выразительный JavaScript. Современное веб-программирование»

8) Переходим на практику, как и в случае с HTML и CSS. Как вариант можно добавить динамичности в сверстанные страницы. Написать простенькую игру, н-р, змейка. Или же найти сайт с задачками, необязательно по JavaScript. Как вариант можно воспользоваться сайтом CodeWars

9) Так же как и в случае с HTML и CSS, по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки/разработки комфортным, в этом случае нужно смотреть в сторону:
— библиотек (jquery, backbone.js и тд)
— фреймворков (React, Vue, Angular)
— Coffeescript, TypeScript
— средства тестирования (н-р: Mocha JS)
— средства документирования (н-р: JSDoc)
— средства проверки кода (н-р: JSLint)
— и тд

Учебник HTML

HTML расшифровывается как Hyper Text Markup Language, т.е. язык гипертекстовой разметки — основной строительный блок веб-страниц, используется для создания и визуального представления веб-станиц.

Язык HTML добавляет разметку в обычный текст. Гипертекст содержит различные ссылки благодаря которым веб-страницы связываются между собой. С помощью HTML каждый может создавать как статические так и динимические сайты. HTML является языком, описывающим структуру и семантику содержимого веб-документа. Содержимое веб-страницы размечается с помощью тегов, представляющих HTML-элементы. Примерами таких элементов являются <html>, <img>, <div> и так далее. Эти элементы формируют строительные блоки для любого веб-сайта.

HTML был изобретён в 1991 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и изначально предназначался для обмена документами между учёными различных университетов. Своим изобретением Тим Бёрнс-Ли заложил основы современной сети Internet.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого — почти каждый год выходит новая версия HTML. Версия «HTML 2.0» была первым стандартом HTML спецификации, которая была опубликована в 1995 году. HTML 4.01 является основной версией HTML, которая была опубликована в конце 1999 года, и широко используется в настоящее время. Сегодня наиболее популярной становится версия HTML-5, которая является расширением HTML 4.01, и опубликована в 2012 году.

HTML-документ или веб-страница — это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в угловые скобки <имя тэга>). Веб-страницу можно набрать как в обычном текстовом редакторе (Блокнот, WordPad, Word и т.д.), так и в специализированном, с подсветкой кода (Notepad++, Sublime Text идр.). Документы HTML хранятся в виде файлов с расширением .htm или .html.

Онлайн-примеры в каждом уроке

В процессе изложения материала в каждом уроке будут приводиться примеры, которые помогут вам детально разобраться в каждом коде и, благодаря практике, наслаждаться обучением. С помощью нашего онлайн-редактора HTML, вы можете отредактировать HTML-документ, а затем нажмите в редакторе оранжевую кнопку «Выполнить», которая расположена над левым окном редактора, чтобы увидеть результат. Если вы пользуетесь специализированным HTML-редактором, то, вы можете скопировать пример и посмотреть результаты своего труда в браузере, установленном на вашем компьютере.

Пример HTML:

Попробуй сам
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Заголовок страницы</title> </head> <body> <h2>Это заголовок</h2> <p>Это параграф.</p> </body> </html>

Кликни по кнопке «Попробуй сам» и посмотри как это работает.

Онлайн-примеры HTML

В учебнике HTML для вас подготовлено более 100 онлайн-примеров, благодаря которым вы легко освоите язык разметки. Лучше один раз увидеть, чем сто раз услышать! Теория плюс практика — залог вашего успеха в освоении HTML.

С помощью онлайн-редактора вы сможете редактировать и анализировать каждый пример в учебнике HTML.

Перейти к онлайн- примерам HTML

Справочник HTML

В справочнике вы найдете полную информацию по любым тегам, атрибутам, событиям, ссылкам, кодам цветов, изображениям и много чего еще.

Перейти к справочнику HTML

HTML Введение | Учебник HTML

HTML — это стандартный язык разметки для создания Веб страниц.

Что такое HTML?

HTML расшифровывается как Гипертекстовый Язык Разметки

HTML — код описывает структуру веб страниц с помощью разметки

HTML — элементы являются строительными блоками страниц HTML

HTML — элементы представляют теги

HTML — теги содержат, «Заголовок», «Параграф», «Таблицы» и т.д.

Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы

HTML Простой документ

Пример

HTML пример
<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>
</body>
</html>
Редактор кода »
Объяснение примера

<!DOCTYPE html> — декларация, определяет документ HTML5

<html> — элемент, является корневым элементом HTML страницы

<head> — элемент, содержит метаинформацию о документе

<title> — элемент, задает заголовок документа

<body> — элемент, содержит видимый контент страницы

<h2> — элемент, определяет большой заголовок

<p> — элемент, определяет параграф

Что такое HTML элемент?

HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:

<tagname>Контент находится здесь…</tagname>

HTML элемент это все от начального тега до конечного тега:

<h2>Мой первый заголовок</h2>

<p>Мой первый параграф.</p>

Начальный тег Содержимое элемента Конечный тег
<h2> Мой первый заголовок </h2>
<p> Мой первый параграф. </p>
<br> нет нет

Примечание: Некоторые HTML элементы не имеют содержимого (например, элемент <br> ). Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега!

Веб Браузеры

Цель веб-браузеров (Chrome, IE, Firefox, Safari) — чтения HTML документов и их отображения.

Браузер не отображает HTML теги, он использует их, чтобы определить, как отобразить документ:

HTML Структура страницы

Ниже представлена визуализация структуры страницы HTML:
<html> <head>
<title>Заголовок страницы</title>
</head> <body>
<h2>Это заголовок</h2>

<p>Это параграф.</p>

<p>Это еще один параграф.</p>
</body> </html>
Примечание: Содержание находящаяся внутри <body> (в белой секции выше), будет отображаться в браузере.

HTML история

С первых дней существования Всемирной паутины существовало множество версий HTML:

Этот учебник соответствует последнему стандарту HTML 5.

Введение в HTML

HTML — это стандартный язык разметки для создания веб-страниц.

Что такое HTML?

HTML означает язык гипертекстовой разметки

HTML — стандартный язык разметки для создания веб-страниц

HTML описывает структуру веб-страницы

HTML состоит из серии элементов

HTML-элементы сообщают браузеру, как отображать контент

HTML-элементов помечают фрагменты контента, такие как «это заголовок», «это это абзац «,» это ссылка «и т. д.

Простой HTML-документ

Пример

Заголовок страницы

Мой первый заголовок

Мой первый абзац.

Попробуй сам »
Объяснение примера

Объявление определяет что этот документ является документом HTML5

Элемент является корневым элементом HTML стр.

Элемент содержит метаинформацию о HTML-страница

Элемент </code> определяет заголовок для HTML-страница (которая отображается в строке заголовка браузера или на вкладке страницы) </li> <li> Элемент <code> <body> </code> определяет тело документа и является контейнером для всего видимого содержимого, например заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.</li> <li> Элемент <code> <h2> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3> Что такое элемент HTML? </h3> <p> Элемент HTML определяется начальным тегом, некоторым содержимым и конечным тегом: </p> <p> <tagname> Здесь идет контент … </tagname> </p> <p> HTML <strong> элемент </strong> — это все, от начального тега до конечного тега: </p> <p> <h2> Мой Первый заголовок </h2> </p> <p> <p> Мой первый абзац.</p> </p> <table> <tr> <th> Начальный тег </th> <th> Содержание элемента </th> <th> Концевая метка </th> </tr> <tr> <td> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D1%8F_%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> </td> <td> Моя первая заголовок </td> <td> <span class="ez-toc-section-end"></span></h2> </td> </tr> <tr> <td> <p> </td> <td> Мой первый абзац. </td> <td> </p> </td> </tr> <tr> <td> <br> </td> <td> <em> нет </em> </td> <td> <em> нет </em> </td> </tr> </table> <p> <strong> Примечание. </strong> Некоторые элементы HTML не имеют содержимого (например, <br> элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега! </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%92%D0%B5%D0%B1%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D1%8B"></span> Веб-браузеры <span class="ez-toc-section-end"></span></h3> <p> Назначение веб-браузера (Chrome, Edge, Firefox, Safari) — читать HTML-документы и отображать их. правильно. </p> <p> Браузер не отображает теги HTML, но использует их для определения способа отображения документа: </p> <p> </p> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Структура HTML-страницы <span class="ez-toc-section-end"></span></h3> <p> Ниже представлена визуализация структуры HTML-страницы: </p> <p> <title> Заголовок страницы Это заголовок Это абзац. Это еще один абзац. Примечание: Только содержимое внутри раздела (белая область выше) будет отображаться в браузере. История HTML С первых дней существования всемирной паутины было много версий HTML: Это руководство соответствует последнему стандарту HTML5. . Руководство по стилям HTML и правила кодирования Последовательный, чистый и аккуратный HTML-код помогает другим людям читать и понимать ваш код. Вот несколько рекомендаций и советов по созданию хорошего HTML-кода. Всегда объявлять тип документа Всегда указывайте тип документа как первую строку в вашем документе. Правильный тип документа для HTML: Использовать имена элементов в нижнем регистре HTML позволяет смешивать прописные и строчные буквы в именах элементов. Однако мы рекомендуем использовать имена элементов в нижнем регистре, потому что: Смешение прописных и строчных имен выглядит плохо Разработчики обычно используют строчные имена Строчные буквы выглядят чище В нижнем регистре писать легче Хорошо: Это абзац. Плохо: <ТЕЛО> Это абзац. Закрыть все элементы HTML В HTML нет необходимости закрывать все элементы (например, элемент ). Однако мы настоятельно рекомендуем закрыть все элементы HTML, например: Хорошо: Это абзац. Это абзац. Плохо: Это абзац. Это абзац. Использовать имена атрибутов в нижнем регистре HTML позволяет смешивать прописные и строчные буквы в именах атрибутов. Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, потому что: Смешение прописных и строчных имен выглядит плохо Разработчики обычно используют строчные имена Средство для чистки строчных букв В нижнем регистре писать легче Хорошо: Посетите наше руководство по HTML Плохо: Посетите наше руководство по HTML Всегда указывать значения атрибутов HTML допускает значения атрибутов без кавычек. Однако мы рекомендуем указывать значения атрибутов в кавычках, потому что: Разработчики обычно указывают значения атрибутов Цитированные значения легче читать НЕОБХОДИМО использовать кавычки, если значение содержит пробелы Хорошо: <таблица > Плохо: Очень плохо: Это не сработает, потому что значение содержит пробелы: Всегда указывать высоту, ширину и высоту для изображений Всегда указывайте для изображений атрибут alt .Этот атрибут важен, если изображение по какой-то причине не может отображаться. Также всегда определяйте ширину и высота изображений. Это уменьшает мерцание, потому что браузер может зарезервировать место для изображение перед загрузкой. Хорошо: Плохо: Пробелы и знаки равенства HTML допускает пробелы вокруг знаков равенства.Но без пробела легче читать и группирует объекты лучше вместе. Хорошо: Плохо: <ссылка rel = "stylesheet" href = "styles.css"> Избегайте длинных строк кода При использовании редактора HTML НЕ удобно прокручивать вправо и влево для чтения кода HTML. Старайтесь избегать слишком длинных строк кода. Пустые строки и отступы Не добавляйте пустые строки, пробелы или отступы без причины. Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода. Для удобства чтения добавьте два пробела отступа. Не используйте клавишу табуляции. Хорошо: Знаменитые города Токио Токио — столица Японии, центр Большого Токио, и самый густонаселенный мегаполис в мире. Это резиденция правительства Японии и Императорский дворец, и дом японской императорской семьи. Плохо: Знаменитые города Токио Токио — столица Японии, центр Большого Токио, и самый густонаселенный мегаполис в мире. Это резиденция правительства Японии и Императорский дворец, и дом японской императорской семьи. Хорошая таблица Пример: Имя Описание A Описание A B Описание Б Хороший список Пример: Лондон Париж Токио Никогда не пропускайте элемент <span class="ez-toc-section-end"></span></h3> <p> Элемент <code> <title> </code> обязателен в HTML.</p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации. (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка при включении страниц в результаты поиска. </p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное </li> <li> отображает заголовок страницы в результатах поисковой системы </li> </ul> <p> Итак, постарайтесь сделать заголовок максимально точным и содержательным: </p> <p> <title> HTML Руководство по стилю и правила кодирования Пропуск и ? HTML-страница будет проверяться без и теги: Пример Заголовок страницы Это заголовок Это абзац. Попробуй сам » Однако мы настоятельно рекомендуем всегда добавлять и тегов! Отсутствие может привести к ошибкам в старых браузерах. Без и может также привести к сбою программного обеспечения DOM и XML. Отсутствует ? Тег HTML также может опускаться. Браузеры добавят все элементы перед к значению по умолчанию элемент. Пример Заголовок страницы Это заголовок Это абзац. Попробуй сам » Однако мы рекомендуем использовать тег . Закрыть пустые элементы HTML? В HTML закрывать пустые элементы необязательно. Разрешено: <мета charset = "utf-8"> Также разрешено: Если вы ожидаете, что программное обеспечение XML / XHTML получит доступ к вашей странице, сохраните закрывающая косая черта (/), потому что это требуется в XML и XHTML. Добавить атрибут lang Вы всегда должны включать атрибут lang внутри тега , чтобы объявить язык веб-страницы. Это предназначено для помощи поисковым системам и браузерам. Пример Заголовок страницы Это заголовок Это абзац. Попробуй сам » Метаданные Чтобы обеспечить правильную интерпретацию и правильную индексацию поисковой системой, как язык, так и кодировку символов следует определить как можно раньше в документе HTML: Заголовок страницы Настройка области просмотра Область просмотра — это видимая пользователем область веб-страницы.Это зависит от устройства — на мобильном телефоне он будет меньше, чем на экране компьютера. Вы должны включить следующий элемент на все свои веб-страницы: Это дает браузеру инструкции о том, как для управления размерами и масштабированием страницы. Часть width = device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства). Часть initial-scale = 1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра : Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, вы можете щелкнуть две ссылки ниже, чтобы увидеть разницу. Комментарии HTML Короткие комментарии следует писать в одну строку, например: Комментарии, занимающие более одной строки, следует записывать так: Это пример длинного комментария.Это пример длинного комментария. Это пример длинного комментария. Это пример с длинным комментарием. -> Длинные комментарии легче заметить, если они имеют отступ с двумя пробелами. Использование таблиц стилей Используйте простой синтаксис для связи с таблицами стилей ( тип атрибут не нужен): Короткие правила CSS можно записать в сжатом виде, например: п.intro {font-family: Verdana; font-size: 16em;} Длинные правила CSS должны быть записаны в несколько строк: корпус { background-color: светло-серый; Семейство шрифтов : «Arial Черный «, Helvetica, без засечек; размер шрифта: 16em; цвет: черный; } Разместите открывающую скобу на той же линии, что и селектор Используйте один пробел перед открывающей скобкой Используйте два пробела для отступа Используйте точку с запятой после каждой пары «свойство-значение», включая последний Используйте кавычки вокруг значений, только если значение содержит пробелы Поместите закрывающую скобку на новую строку без пробелов в начале Загрузка JavaScript в HTML Используйте простой синтаксис для загрузки внешних скриптов ( тип атрибут не нужен):

Начальный тег	Содержимое элемента	Конечный тег
<h2>	Мой первый заголовок	</h2>
<p>	Мой первый параграф.	</p>
<br>	нет	нет