Страница html код: Введение в HTML | htmlbook.ru
Содержание
Структура html страницы.
Урок 4.
Теперь Вы знаете, что такое теги и сейчас самое время разобраться в структуре html страницы. На рисунке ниже изображен html код в котором нет текста, есть только три тега. Это тег <html>, <head> и <body>. Все эти три тега должны обязательно закрываться.
Именно эти три тега и составляют структуру html страницы. Они должны обязательно присутствовать в каждом html документе. Это железное правило.
Разберем значение каждого из этих тегов.
Тег <html> является контейнером для всего содержимого страницы. Другими словами, весь код страницы находиться между открывающимся <html> и закрывающимся </html>.
В тег <head> заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег <title> </title>. О нем мы поговорим в конце этого урока.
Тег <body> — это основное тело нашего документа. Все, что находится между тегами <body> и </body> будет выводиться браузером на экран монитора.
Вся суть структуры html страницы в этом рисунке:
Тег <title>
Тег <title> закрывающийся, внутри него указывается название страницы. Данный тег является обязательным для каждой страницы. Он должен находиться строго между <head> и </head>.
Давайте вернемся к странице которую мы создавали на 3-ем уроке. В коде между <title> и </title> написано «Мой первый сайт» это значит, что наша страница имеет название «Мой первый сайт».
Содержимое тега <title> отображается на экране, а именно в окне браузера, обратите внимание на рисунок:
В первую очередь содержание данного тега имеет значение для поисковиков (Яндекс, Гугл и др.). Поисковые роботы считывают содержание тега <title> для того чтобы понимать о чем ваша страница.
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ
Как посмотреть код страницы сайта
- Горячие клавиши <Ctrl>+<Shift>+<C>
- Горячие клавиши <Ctrl>+<U>
- Как txt перевести в html
- Как написать код текстом на HTML странице
Я предпочитаю браузер Mozilla Firefox, именно с него сделанные скриншоты будут показаны ниже. В других браузерах есть похожие инструменты преимущественно с теми же горячими клавишами клавиатуры (см. комментарии ниже).
Горячие клавиши
<Ctrl>+<Shift>+<C> или <F12>
Задача: скопировать изображение паучка.
- Навести курсором мышки на интересующий элемент.
- Нажать правую кнопку мышки — «Исследовать элемент».
- Открывается такой вот помощник для разработчиков. Теперь остаётся только нажать на ссылку адреса background
Если щёлкнуть на серые треугольнички, то можно посмотреть вложенные элементы. Путь от предка к родителю показан голубыми стрелками. Есть эффективный поиск тегов и их количества. Я также часто открываю вкладки «Вычислено» и «Блоковая модель». Да и возможности других вкладок и иконок занимательны.
Горячие клавиши
<Ctrl>+<U>
Как открыть полный исходный код страницы
- Нажать сочетание горячих клавиш, озвученных выше, либо, наведя на пустое место сайта и не выделяя какого-либо элемента, вызвать контекстное меню — «Исходный код страницы».
- Ввести в адресную
view-source:URL_интересующей_страницы
Пример:
view-source:http://shpargalkablog.ru/2014/05/see-html.html
Как искать информацию в исходном коде:
<Ctrl>+<F>
Горячими клавишами <Ctrl>+<F> выводится поле поиска, куда можно ввести любой текст.
Как открыть часть HTML сайта
- Выделить интересующий элемент.
- Нажать правую кнопку мышки — «Исходный код выделенного элемента».
Самое интересное, что я использую все эти методы анализа страницы, а не только <Ctrl>+<Shift>+<C>.
Серверные скрипты, такие как PHP, увидеть не удастся.
Путешествуя по просторам Всемирной паутины, вы смогли заметить, как различаются между собой оформление и возможности веб-страниц. Но не каждый из вас знает, что все это разнообразие реализовано на основе языка HTML.
Все что вы видите на странице – текст, рисунки, таблицы и другие элементы, формирующие смысловое наполнение веб-страницы, именуемое контентом, создаются при помощи языка разметки HTML. Кликните правой кнопкой мыши по любой веб-странице, и в выпавшем меню выберите пункт «просмотр HTML кода» или «Исходный код» – появится текстовой редактор с непонятными, вам символами и значками – это и есть HTML-код страницы.
Описание Web-страницы на языке HTML представляет собой набор инструкций, интерпретируемый программой-браузером.
Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags). Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера.
Согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Интернет. Таким образом, файл на языке HTML приобретает облик Web-документа только тогда, когда он интерпретируется браузером.
Однако, в стандартном языке HTML есть один существенный недостаток. Например, для того чтобы описать разметку абзацев в контенте и их оформление, необходимо описывать эти свойства для каждого абзаца, даже если на одной страничке находится 10 или 20 абзацев. А, представьте, что на сайте может быть 100 страниц . В итоге нужно двадцать или двести раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла.
А какая головная боль для программистов! Для облегчения жизни бедным веб-мастерам, были придуманы Cascading Style Sheets(CSS) — каскадные таблицы стилей.
CSS действует другим, более удобным и экономичным способом. Для оформления абзацев в контенте сайта один раз прописывается код или стиль оформления. Этот код или описание стиля, сохраняется в отдельном файле. Далее нужно только при помощи HTML разметить текст на абзацы, а уж CSS позаботится об их оформлении. Код уменьшается в десятки и сотни раз.
Размещение описания стилей в отдельном файле очень удобно, особенно если на сайте больше одной страницы. Например, чтобы изменить оформление всех абзацев на сайте, достаточно изменить код в таблице стилей.
CSS совместно с HTML, позволяют творить чудеса, и все благодаря разделению труда по созданию веб-страниц. Разметка элементов страниц производится на основе HTML, а визуальное оформление элементам придается при помощи таблиц CSS
Таблицы стилей CSS — попытка отделить детали дизайна странички от ее структуры и содержания.
Пока это для вас китайская грамота. А я не буду строить из себя гуру и писать очередной самоучитель «Что такое HTML и CSS». Подобной информации вы найдете в интернете целый вагон, плюс к этому множество изданных учебников. Захотите углубиться в тему – флаг вам в руки. Не бойтесь, HTML и CSS весьма просты, и освоить их может любой чайник. Но торопиться с этим пока не стоит.
По собственному опыту знаю, что лучше не перегружать мозг чайника излишней информацией, иначе он, т.е. мозг, вскипит раньше времени. Не верьте умникам на различных сайтах, которые утверждают, что создание сайта необходимо начинать с изучения HTML и CSS . У меня для вас хорошая новость – вам не придется писать самим HTML-код, потому что умные люди придумали CMS.
|
Как научиться читать код сайта и зачем это нужно, если вы не программист
Зачем понимать исходный код
Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.
Зная, как устроен исходный код, вы сможете:
- Больше понимать в SEO-продвижении.
Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.
Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.
- Анализировать сайты конкурентов на более глубоком уровне.
Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.
- Составлять грамотные ТЗ для разработчика самостоятельно.
Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.
- Лучше понимать программистов.
Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.
- Экономить, самостоятельно внося изменения в сайт.
Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.
Что такое исходный код сайта
Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.
Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.
Как посмотреть код любого сайта
Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.
Код вызывается одной из комбинаций:
- комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:
Входной и выходной HTML-код на страницах OneNote — Microsoft Graph
-
- Чтение занимает 12 мин
В этой статье
HTML-код, определяющий содержимое и структуру страницы при создании или обновлении страницы OneNote, называется входным HTML-кодом.The HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.
HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом.The HTML that’s returned when you get page content is called output HTML. Выходной HTML-код не совпадает со входным.Output HTML won’t be the same as input HTML.
API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS.The OneNote APIs in Microsoft Graph preserve the semantic content and basic structure of the input HTML, but convert it to a set of supported HTML elements and CSS properties. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.The APIs also add custom attributes that support OneNote features.
В этой статье описываются основные элементы и атрибуты входного и выходного HTML-кода.This article describes the principal elements and attributes of input and output HTML. Разбираться во входном HTML-коде полезно при создании и обновлении содержимого страницы, а в выходном — при анализе возвращаемого содержимого страницы.It can be helpful to understand input HTML when you’re creating or updating page content, and output HTML when you’re parsing returned page content.
Элемент bodybody element
HTML-содержимое в тексте страницы представляет ее содержимое и структуру, в том числе ресурсы изображений и файлов.The HTML content in the page body represents the page content and structure, including image and file resources. Входной и выходной HTML-код для элемента body может содержать перечисленные ниже атрибуты.The body element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| data-absolute-enableddata-absolute-enabled | Указывает, поддерживают ли во входном тексте элементы с абсолютным положением.Indicates whether the input body supports absolute positioned elements. |
| stylestyle | Свойства CSS style для основного текста.The CSS style properties of the body. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы.In the output HTML, input settings might be returned inline on appropriate child elements. В настоящее время цвет фона не поддерживается для элемента body.Background color is not currently supported for the body element. |
Выходные атрибутыOutput attributes
| Выходной атрибутOutput attribute | ОписаниеDescription |
|---|---|
| data-absolute-enableddata-absolute-enabled | Указывает, поддерживаются ли в тексте элементы с абсолютным положением.Indicates whether the body supports absolute positioned elements. В выходном HTML-коде всегда задано значение true.Always true in output HTML. |
| stylestyle | Свойства font-family и font-size основного текста.The font-family and font-size properties of the body. |
Элементы divdiv elements
Элементы div содержат текст, изображения и другой контент.Div elements contain text, images, and other content. Входной и выходной HTML-код для элемента div может содержать перечисленные ниже атрибуты.A div element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| data-iddata-id | Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content. |
| data-render-fallbackdata-render-fallback | Резервное действие в случае ошибки извлечения: render (по умолчанию) или noneThe fallback action if the extraction fails: render (default) or none |
| data-render-methoddata-render-method | Выполняемый метод извлечения, напримерThe extraction method to perform, for example:extract.businesscard или extract.recipeextract.businesscard or extract.recipe |
| data-render-srcdata-render-src | Источник контента для извлечения.The content source for the extraction. |
| stylestyle | Свойства положения, размера, шрифта и цвета для элемента div:The position, size, font, and color properties for the div:
|
API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div.The OneNote APIs in Microsoft Graph wrap all body content in at least one div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:The API creates a default div (attributed with data-id="_default") to contain the body content if:
Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false.The input body element’s data-absolute-enabled attribute is omitted or set to false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.In this case, all body content is put in the default div.
Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементы div, img или object без абсолютного положения.The input body element’s data-absolute-enabled attribute is true, but the input HTML contains direct children that aren’t absolute positioned div, img, or object elements. В этом случае непосредственные дочерние элементы div, img или object без абсолютного положения помещаются в элементы div по умолчанию.In this case, direct children that aren’t absolute positioned div, img, or object elements are put in the default div.
Выходные атрибутыOutput attributes
Вспомогательные разделителиNon-contributing divs
Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель.When a div element in the input HTML does not contribute to the page structure or carry information that OneNote uses, the API moves the div’s content into the parent or default div. Этот процесс показан в приведенных ниже примерах.This is illustrated in the following examples.
Входной HTML-кодInput HTML
Содержит вспомогательный вложенный разделитель.Contains a non-contributing, nested div.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<p>Some text</p>
<div>
<p>More text inside a div that doesn't define page structure</p>
</div>
</div>
</body>
</html>
Выходной HTML-кодOutput HTML
Примечание. Содержимое разделителя было перемещено в родительский разделитель, а вложенные теги
<div>удалены.Note: The div’s content was moved to the parent div and the nested<div>tags have been removed. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример:<div data-id="keep-me">).The div would have been preserved if it defined any semantic information, such as a data-id (example:<div data-id="keep-me">).
<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Page Title</title>
</head>
<body data-absolute-enabled="true">
<div data-id="_default">
<p>Some text</p>
<p>More text inside a nested div</p>
</div>
</body>
</html>
Элементы imgimg elements
Для представления изображений на страницах OneNote используются элементы img.Images on OneNote pages are represented by img elements. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.An img element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| altalt | Предоставленный замещающий текст для изображения.The supplied alt text for the image. |
| data-iddata-id | Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content. |
| data-render-srcdata-render-src | Должно было задано значение data-render-src или src.Either data-render-src or src is required. Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote:The webpage to render as a bit-mapped image on the OneNote page: — — Этот метод удобно использовать, если веб-страница слишком сложна для достоверного отображения в OneNote или для использования страницы необходимы учетные данные.This method is useful when the webpage is more complex than the OneNote page can faithfully render, or when the page requires login credentials. |
| data-tagdata-tag | Тег заметки для элемента.A note tag on the element. |
| stylestyle | Свойства положения и размера изображения: position (только absolute), left, top, width и height.The position and size properties for the image: position (absolute only), left, top, width, and height. Размер можно задать для любого изображения.Size can be set on any image. Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут Пример: В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.In the output HTML, the image size is returned separately in width and height attributes. |
| srcsrc | Должно было задано значение src или data-render-src.Either src or data-render-src is required. Изображение, отображаемое на странице OneNote:The image to render on the OneNote page: — — |
| width, heightwidth, height | Ширина и высота изображения в пикселях, но без обозначения px.The width or height of the image, in pixels but without the px. Пример: width="400"Example: width="400" |
Примечание. API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном HTML-коде.Note: The OneNote APIs automatically detect the input image type, and return it as the data-fullres-src-type in the output HTML. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.The API also returns the image type of the optimized image in data-src-type.
Выходные атрибутыOutput attributes
| Выходной атрибутOutput attribute | ОписаниеDescription |
|---|---|
| altalt | Предоставленный замещающий текст для изображения.The supplied alt text for the image. |
| data-iddata-id | Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content. |
| data-indexdata-index | Положение изображения. Для поддержки разделения изображений.The position of the image. For split image support. |
| data-fullres-srcdata-fullres-src | Конечная точка версии изображения, которая была изначально внедрена на странице.The endpoint for the version of the image resource that was originally embedded in the page. |
| data-fullres-src-typedata-fullres-src-type | Тип мультимедиа для ресурса data-fullres-src, например image/png или image/jpeg.The media type of the data-fullres-src resource, for example: image/png or image/jpeg. |
| data-optionsdata-options | Тип источника: printout для PDF-файлов или splitimage для всех остальных. Применяется только к разделенным изображениям, созданным с помощью атрибута data-render-src.The source type: printout for PDF files or splitimage for all others. Applies only to split images created with the data-render-src attribute. |
| data-render-original-srcdata-render-original-src | Исходный URL-адрес источника изображения, если исходное изображение находится в общедоступной части Интернета и создано с использованием атрибута data-render-src.The original source URL of the image, if the source image is from the public internet and was created with the data-render-src attribute. |
| data-src-typedata-src-type | Тип мультимедиа для ресурса src, например image/png или image/jpeg.The media type of the src resource, for example: image/png or image/jpeg. |
| data-tagdata-tag | Тег заметки для элемента.A note tag on the element. |
| idid | Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page’s content endpoint when the includeIDs=true query option is used.Используется для обновления содержимого страницы.Used to update page content. |
| srcsrc | Конечная точка версии изображения, оптимизированного для веб-браузеров, а также мобильных телефонов и планшетов.The endpoint for the version of the image resource that has been optimized for web browsers and mobile and tablet form factors. |
| stylestyle | Свойства позиции изображения.The position properties of the image. |
| width, heightwidth, height | Ширина или высота изображения в пикселях.The width or height of the image, in pixels. |
Примеры выходного HTML-кода для изображенийOutput HTML examples for images
Выходные элементы img содержат конечные точки для ресурсов файлов изображений и типа изображения, как показано ниже.Output img elements contain endpoints for image file resources and the image type, as shown below. Вы можете отправлять отдельные запросы GET к конечным точкам ресурсов изображений, чтобы получать их двоичное содержимое.You can make separate GET requests to image resource endpoints to retrieve their binary contents.
<img
src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"
data-src-type="image/png"
data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"
data-fullres-src-type="image/png" ... />
В приведенных ниже примерах показаны сведения, которые может содержать элемент img в выходном HTML-коде.The following examples show the information an img element might contain in the output HTML.
Изображение с ресурсами высокого разрешения для ИнтернетаImage with web-ready and high resolution resources
<img
src="{web-ready-image-resource-url}/$value"
data-src-type="image/{type}"
data-fullres-src="{high-resolution-image-resource-url}/$value"
data-fullres-src-type="image/{type}"
[data-render-original-src="{original-source-url-or-named-part}"]
[data-id="{image-id}"]
[alt="supplied alt text"]
[width="345"] [height="180"]
[style="..."] />
Изображение, созданное с использованием атрибута
data-render-srcImage created by using the data-render-src attribute
<img
src="{web-ready-image-resource-url}/$value"
data-src-type="image/{type}"
data-fullres-src="{high-resolution-image-resource-url}/$value"
data-fullres-src-type="image/{type}"
data-render-original-src="{original-source-url-or-named-part}"
[data-id="{image-id}"]
[data-index="{index-of-split-image}"]
[data-options="{printout-or-splitimage}"]
[alt="supplied alt text"]
[width="1024"] [height="1900"]
[style="..."] />
Разделенные изображенияSplit images
Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки.Images that are created using the data-render-src attribute (from a webpage URL or a named part) might be split into multiple component images for performance and rendering reasons. Всем компонентам изображения назначается одно и то же значение data-id.Component images are all assigned the same data-id value. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.Each component image has a zero-based data-index attribute that defines the original vertical layout.
Разделенное изображение с тремя компонентамиSplit image with three component images
<div data-id="multi-component-image">
<img
src="{image-resource0-url}/$value"
data-src-type="image/{type}"
data-fullres-src="{image-resource0-url}/$value"
data-fullres-src-type="image/{type}"
data-index="0"
data-render-original-src="{original-source-url-or-named-part}"
data-id="{same-image-id}" ... />
<img
src="{image-resource1-url}/$value"
data-src-type="image/{type}"
data-fullres-src="{image-resource1-url}/$value"
data-fullres-src-type="image/{type}"
data-index="1"
data-render-original-src="{original-source-url-or-named-part}"
data-id="{same-image-id}" ... />
<img
src="{image-resource2-url}/$value"
data-src-type="image/{type}"
data-fullres-src="{image-resource2-url}/$value"
data-fullres-src-type="image/{type}"
data-index="2"
data-render-original-src=""{original-source-url-or-named-part}"
data-id="{same-image-id}" ... />
</div>
Так как пользователи могут перемещать изображения на странице, индексы могут возвращаться в измененном порядке.Because users can move the images on the page, the returned indexes might be out of order. Сортировка должна выполняться сверху вниз, а затем слева направо (если возникнут конфликты при вертикальной сортировке).Ordering should be in top to bottom y-order, and then left to right x-order if there are y-order conflicts.
Элементы iframeiframe elements
Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.OneNote pages can contain embedded videos represented by iframe elements.
Примечание. Вы также можете вложить видеофайл с помощью элемента object.Note: You can also attach a video file using an object element.
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| data-original-srcdata-original-src | Обязательный.Required. URL-адрес источника видео.The URL of the video source. См. список поддерживаемых источников видео.See the list of supported video sources. Пример: |
| width, heightwidth, height | Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: width=300Example: width=300 |
Выходные атрибутыOutput attributes
| Выходной атрибутOutput attribute | ОписаниеDescription |
|---|---|
| data-original-srcdata-original-src | URL-адрес источника видео.The URL of the video source. |
| srcsrc | Ссылка на видео, внедренное в страницу OneNote.A link to the video that is embedded in the OneNote page. |
| width, heightwidth, height | Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: |
Пример выходного HTML-кода для видеоOutput HTML example for videos
Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже.Output iframe elements contain endpoints that link to the source page and video, as shown.
<iframe
data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
src="https://www.youtube.com/embed/3Ztr44aKmQ8?feature=oembed&autoplay=true" />
Элементы objectobject elements
Страницы OneNote могут содержать вложения, представленные элементами object.OneNote pages can contain file attachments represented by object elements. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.An object element can contain the following attributes in the input and output HTML.
Примечание. API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src.Note: The OneNote APIs can also render file content as images in a page when the file is sent as an image and uses the data-render-src attribute.
Пример:<img data-render-src="name:part-name" ... />Example:<img data-render-src="name:part-name" ... />
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| datadata | Обязательный.Required. Имя части, которая представляет файл в составном запросе.The name of the part that represents the file in the multipart request. |
| data-attachmentdata-attachment | Обязательный параметр. Имя файла.Required. The file name. |
| data-iddata-id | Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content. |
| stylestyle | Свойства положения и размера объекта: position (только absolute), left, top и width.The position and size properties for the object: position (absolute only), left, top, and width. Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут Пример: |
| typetype | Обязательный.Required. Стандартный тип файла мультимедиа.The standard media file type. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла.Known file types display the icon associated with the file type on the OneNote page. Для файлов неизвестных типов отображается универсальный значок файла.Unknown file types display a generic file icon. |
Выходные атрибутыOutput attributes
Пример выходных данных HTML для объектовOutput HTML example for objects
Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже.Output object elements contain endpoints that link to the file resources in the page, as shown. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.You can make separate GET requests to file resource endpoints to retrieve their binary contents.
<object
data="https://graph.microsoft.com/v1.0/me/onenote/resources/{file-id}/$value"
data-attachment="fileName.pdf"
type="application/pdf"
[style="..."] />
Абзацы и заголовкиParagraphs and headings
Входной и выходной HTML-код для абзацев, заголовков и других текстовых контейнеров может содержать перечисленные ниже атрибуты.Paragraphs, headings, and other text containers can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Выходные атрибутыOutput attributes
В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей в текстовых контейнерах, и возвращаемый выходной HTML-код.The following examples show input HTML that uses different ways to define styles on text containers and the output HTML that’s returned.
Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.Input HTML with styles defined using inline character styles, in the start tag, and within a span element.
<h2>Heading <i>One</i> text</h2>
<p>Some text</p>
<p>Some <span >more</span> text</p>
Выходной HTML-код со стилем знака
<i> и параметрами шрифта в начальном теге <p>, возвращаемыми в виде встроенных стилей CSS в элементах span.Output HTML with the <i> character style and the font settings in the <p> start tag returned as inline CSS styles on span elements.
<h2>Heading <span>One</span> text</h2>
<p><span>Some text</span></p>
<p>Some <span>more</span> text</p>
СпискиLists
Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li.Lists are represented as ol or ul elements that contain list items represented as li elements.
Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.Lists and list items can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Выходные атрибутыOutput attributes
Стили списковList styles
API OneNote в Microsoft Graph поддерживают следующие стили списков:The OneNote APIs in Microsoft Graph support the following list styles:
| Упорядоченный списокOrdered list | Неупорядоченный списокUnordered list |
|---|---|
| nonenone | nonenone |
| decimal (по умолчанию)decimal (default) | |
| disc (по умолчанию)disc (default) | |
| lower-alphalower-alpha | |
| circlecircle | |
| lower-romanlower-roman |
squaresquare |
|
upper-alphaupper-alpha | |
| upper-romanupper-roman | |
Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li.You can apply global styles for a list on the ol or ul element in the input HTML, but styles are returned on the li elements.
Однородный стиль спискаHomogenous list style
В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.This example shows input HTML that sets the list style type on the ol element and CSS styles on individual list items.
<ol>
<li>Jacksonville</li>
<li>Orlando</li>
<li>Naples</li>
</ol>
Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.
<ol>
<li><span>Jacksonville</span></li>
<li><span>Orlando</span></li>
<li><span>Naples</span></li>
</ol>
Переменные стили списковVariable list styles
В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li.This example shows input HTML that sets different list style types on the li elements.
<ul>
<li>square style</li>
<li>circle style</li>
<li>disc style (default)</li>
</ul>
Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.
<ul>
<li><span>square style</span></li>
<li><span>circle style</span></li>
<li><span>disc style (default)</span></li>
</ul>
таблицы;Tables
Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы.Tables are represented as table elements that can contain tr and td elements. Nested tables are supported.
Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты.Tables can contain the following attributes in the input and output HTML. API OneNote не поддерживают атрибуты rowspan и colspan.The OneNote APIs do not support rowspan or colspan attributes.
Входные атрибутыInput attributes
| Входной атрибутInput attribute | ОписаниеDescription |
|---|---|
| data-iddata-id | Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content. |
| stylestyle | Свойства CSS style для элемента, а также:The CSS style properties of the element, and also: — width.- width. Поддерживается в элементах table и td как количество пикселей или процент от ширины страницы.Supported by table and td as pixels or percentage of page width. Пример: |
| границаborder | Складывает границы с таблицей указанной шириныAdds border to table with specified width |
| ширинаwidth | Ширина таблицыWidth of the table |
| bgcolorbgcolor | Цвет фона таблицыThe background color of the table |
Примечание: Использование свойства граница в стиле атрибута таблицы не поддерживается в ввода html.Note: The use of the border property in the style attribute of a table is not supported in input html.
Выходные атрибутыOutput attributes
В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей для таблиц, и возвращаемый выходной HTML-код.The following examples show input HTML that uses different ways to define styles on tables and the output HTML that’s returned.
Входной HTML-код с необязательными параметрами на разных уровнях.Input HTML with optional settings at different levels
<table border="1";; bgcolor = "green">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
</table>
Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.Output HTML with CSS styles returned inline on the td elements
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
</table>
СтилиStyles
API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span.OneNote APIs in Microsoft Graph support the following inline CSS style properties for elements in the page body, such as body, div, p, li, and span.
| СвойствоProperty | ПримерExample |
|---|---|
| background-colorbackground-color | style="background-color:#66cc66" (по умолчанию задан белый цвет)style="background-color:#66cc66" (defaults to white)Поддерживаются как шестнадцатеричный формат, так и именованные цвета.Both hexadecimal format and named colors are supported. |
| colorcolor | style="color:#ffffff" (по умолчанию задан черный цвет)style="color:#ffffff" (defaults to black) |
| font-familyfont-family | style="font-family:Courier" (по умолчанию задан шрифт Calibri)style="font-family:Courier" (defaults to Calibri) |
| font-sizefont-size | style="font-size:10pt" (по умолчанию задан размер 11 точек)style="font-size:10pt" (defaults to 11pt)API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt.The APIs accept font size in pt or px, but converts px to pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.Decimal values are rounded to the nearest n.0pt or n.5pt. |
| font-stylefont-style | style="font-style:italic" (обычный или только курсив)style="font-style:italic" (normal or italic only) |
| font-weightfont-weight | style="font-weight:bold" (обычный или только полужирный)style="font-weight:bold" (normal or bold only) |
| strike-throughstrike-through | style="text-decoration:line-through" |
| text-aligntext-align | style="text-align:center" (только для блочных элементов)style="text-align:center" (for block elements only) |
| text-decorationtext-decoration | style="text-decoration:underline" (без оформления или только подчеркивание)style="text-decoration:underline" (none or underline only) |
Кроме того, поддерживаются следующие встроенные стили знаков:The following inline character styles are also supported:
Пример входного и выходного HTML-кодаInput and output HTML example
На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph.The following image shows a simple page that was created with Microsoft Graph.
Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.This is the input HTML sent in the message body to create the page.
<html lang="en-US">
<head>
<title>Sample Study Notes</title>
<meta name="created" content="2015-01-01T01:01"/>
</head>
<body>
<h2>Aurora Borealis</h2>
<p>Dancing lights in the sky. Also called <i>Northern Lights</i>. Caused by solar radiation.</p>
<br />
<p><b>Intersting facts</b></p>
<table>
<tr>
<td>Neil Armstrong</td>
<td>Commander</td>
</tr>
<tr>
<td>Buzz Aldrin</td>
<td>LM Pilot</td>
</tr>
<tr>
<td>Michael Collins</td>
<td>Command Module Pilot</td>
</tr>
</table>
<img alt="Apollo 11 commemorative stamp." src="https://upload.wikimedia.org/wikipedia/commons/a/a4/First_Man_on_Moon_1969_Issue-10c.jpg" />
<p>References:</p>
<p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
<p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
</body>
</html>
Ниже показан выходной HTML-код, который Microsoft Graph возвращает при получении содержимого страницы.This is the output HTML that Microsoft Graph returns when you get page content.
Примечание. При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.Note: When you create a page or get page metadata, the API returns the content endpoint URL of the page in the contentUrl property.
<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Sample Study Notes</title>
</head>
<body data-absolute-enabled="true">
<div data-id="_default">
<h2>American History 101: Moon Landing</h2>
<p>First moon landing - July 20, 1969 with Apollo 11 (Eagle)</p>
<br />
<p><span>Apollo 11 Astronauts</span></p>
<table>
<tr>
<td>Neil Armstrong</td>
<td>Commander</td>
</tr>
<tr>
<td>Buzz Aldrin</td>
<td>LM Pilot</td>
</tr>
<tr>
<td>Michael Collins</td>
<td>Command Module Pilot</td>
</tr>
</table>
<br />
<img alt="Apollo 11 commemorative stamp." src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value"
data-src-type="image/jpeg" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-fullres-src-type="image/jpeg" />
<p>References:</p>
<p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
<p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
</div>
</body>
</html>
См. такжеSee also
Просмотр исходного кода веб-страницы HTML, CSS, JavaScript в Google Chrome »WebNots
Учиться весело, а изучение понравившейся веб-страницы в Интернете должно приносить больше удовольствия. Вы когда-нибудь были поражены элементом на веб-странице и хотели узнать, как он был создан? Для этого не нужно искать книги по HTML или CSS !!! Современные браузеры, такие как Chrome, предлагают очень простые и перспективные инструменты для анализа веб-страниц. Это практический навык, очень необходимый для анализа анатомии веб-страницы. Хотя основная цель этих инструментов — устранение неполадок, их можно также использовать для понимания того, как эксперты проектируют свой контент, чтобы вы могли изучить концепции. В этой статье давайте обсудим пошаговую иллюстрацию просмотра исходного кода HTML веб-страницы с помощью веб-браузера Google Chrome.
Просмотр исходного кода веб-страницы HTML, CSS, JavaScript в Google Chrome
В этой статье мы рассмотрим следующие темы:
- Различные компоненты веб-страницы
- Просмотр исходного кода HTML, встроенного и внутреннего CSS
- Просмотр внешних таблиц стилей на веб-странице
- Ярлык Chrome для просмотра исходного кода страницы
- Использование инструментов разработчика
- Получение мобильного CSS
- Нахождение красивого печатного вида миниатюрного CSS и JavaScript
- Редактирование веб-страницы онлайн
Давайте обсудим каждую тему подробно в следующих разделах.
1. Компоненты веб-страницы
Веб-страница в целом состоит из следующих частей:
- Содержимое страницы — текст, изображения, видео и т. Д., Размеченные с помощью HTML.
- Выравнивание и внешний вид — обычно контролируется с помощью CSS.
- Скрипты — запускают действие на стороне клиента или сервера.
CSS можно использовать на веб-странице тремя разными способами:
- Встроенные стили — влияют на внешний вид отдельного элемента.
- Внутренние стили — затрагивают все элементы на странице.
- Внешние таблицы стилей — влияют на все элементы на веб-сайте.
Вы можете узнать, как порядок стилей CSS повлияет на внешний вид веб-страницы. Скрипты также можно использовать по-разному, как и CSS. Исходный код веб-страницы содержит все эти компоненты, и вы можете просматривать их по-разному.
2. Просмотр стилей HTML, встроенных и внутренних стилей CSS
Чтобы просмотреть содержимое HTML, встроенные и внутренние стили веб-страницы, откройте веб-страницу в браузере Chrome. Щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть исходный код страницы» вариант, как показано на картинке ниже:
Просмотр исходного кода страницы в Google Chrome
Если вы щелкните правой кнопкой мыши внутри iframe, браузеры отобразят «Просмотреть источник кадра» вариант вместо «Просмотреть исходный код страницы«
Это откроет новое окно, в котором будет показано размеченное HTML-содержимое и стили каждого элемента, используемого на этой веб-странице. Некоторые сайты покажут вам довольно четкое представление исходного кода, но большинство последних сайтов будут отображать исходный код без разрывов строк и пробелов. Это уменьшенная и сжатая версия исходного кода, в настоящее время почти все веб-сайты используют этот формат для уменьшения размера и повышения скорости загрузки страницы.
Как вы можете видеть на скриншоте ниже, Chrome показывает весь исходный код в одну строку без разрывов и пробелов.
Минифицированный исходный код, просматриваемый в Chrome
3. Просмотр внешних таблиц стилей
Самый популярный и рекомендуемый способ использования CSS — связать внешние таблицы стилей с содержимым HTML. Чтобы узнать, какие внешние таблицы стилей используются на веб-странице, поищите теги «ссылки» в исходном коде. Щелкните ссылки, заканчивающиеся на «.css», чтобы увидеть все элементы стиля, определенные в таблице стилей.
Ссылки на таблицу стилей в источнике страницы
Веб-сайт может использовать внешние таблицы стилей в другом формате. В большинстве случаев файлы CSS заканчиваются номером версии или дополнительным текстом, например «.css? Ver1.3». Иногда уменьшенная версия файла CSS с расширением «.min.css» также может использоваться для быстрой загрузки страницы.
Хотя ссылки отображаются в исходном коде как относительные, при нажатии на них открывается исходная таблица стилей с абсолютным URL-адресом (полный URL-адрес с именем домена).
4. Ярлык Chrome для просмотра исходного кода страницы.
Вы можете просмотреть исходный код любой страницы прямо из адресной строки браузера Chrome, добавив префикс «просмотреть источник:» на любой URL-адрес страницы. Таким образом, вы даже можете просмотреть исходный код защищенных правой кнопкой мыши страниц.
view-source:webpage URL
Введенный URL-адрес будет автоматически перенаправлен для получения контента, если на странице есть правильное перенаправление 301. Например, ввод «view-source: yoursite.com» может быть автоматически перенаправлен на «view-source: https: //www.yoursite.com».
5. Просмотр исходного кода с помощью инструментов разработчика
Вышеописанный метод предоставит исходный код HTML / CSS без ссылки на отдельный элемент, присутствующий на веб-странице. С помощью представления исходного кода CSS сложно определить стили, используемые для любого конкретного элемента.
Подобно другим браузерам, Google Chrome предлагает инструменты разработчика для доступа к коду CSS, связанному с любым конкретным элементом на веб-странице. Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите «Проверить элемент» или «Осмотреть», Чтобы открыть консоль разработчика в нижней части веб-страницы, как показано на рисунке ниже. Вы также можете открыть консоль разработчика из пути в меню «Настройки> Дополнительные инструменты> Инструменты разработчика«.
Инструменты разработчика в Google Chrome для просмотра исходного кода страницы
- Щелкните элемент правой кнопкой мыши и выберите «Осмотреть» вариант.
- Просмотрите HTML и встроенные стили в «Элементы» таб.
- Посмотреть внешние стили под «Стили» раздел.
- Нажми на «Мобильный» значок, чтобы просмотреть сайт на мобильных устройствах и проверить соответствующий исходный HTML / CSS для мобильного контента.
Консоль разделена на две части, в каждой из которых доступны различные вкладки. В левой части отображается HTML-содержимое страницы под «Элементы» вкладка, а правая часть показывает CSS под «Стили» таб. При нажатии на любую ссылку CSS откроется таблица стилей в левой части под «Источники» таб.
Чтобы просмотреть CSS-код любого конкретного элемента, выберите «Стрелку» в верхнем левом углу (найдите линзу внизу на платформе Windows) консоли и щелкните любой элемент, который будет выделен при наведении курсора мыши. Это автоматически покажет CSS-код, связанный с выбранным элементом.
6. Просмотр мобильного CSS
Поскольку стили для элементов на настольных компьютерах и мобильных устройствах могут различаться, консоль разработчика предлагает возможность переключать отображение на большинстве популярных устройств, таких как iPhone, iPad, Samsung Galaxy и Google Nexus. После выбора необходимого устройства из раскрывающегося списка отображаются соответствующие коды CSS, доступные на этой странице для этого устройства.
Просмотр мобильного CSS в Chrome
- Нажмите кнопку панели инструментов устройства переключения.
- Выберите устройство в раскрывающемся списке или нажмите «редактировать»Возможность добавить собственное устройство, недоступное в списке по умолчанию. Вы можете проверить размер выбранного устройства.
- Увеличьте или уменьшите процент, чтобы настроить отображение браузера.
- Нажми на «Повернуть»Для переключения между портретным и альбомным режимами.
- Проверьте предварительный просмотр вашего выбора. Щелкните правой кнопкой мыши элемент, для которого вы хотите просмотреть мобильный источник, и щелкните значок «Осмотреть»Вариант.
- Измените элемент, чтобы просмотреть источник. При наведении указателя мыши на HTML-код соответствующий элемент будет выделен на панели предварительного просмотра браузера.
- Найдите исходный код CSS выбранного элемента. Мобильный CSS должен начинаться с «@СМИПравило. Если нет «@СМИ», Тогда общий CSS будет применяться и на мобильных устройствах.
7. Красивый вид для печати миниатюрных файлов CSS и JavaScript
В настоящее время на веб-сайтах принято использовать уменьшенные версии файлов CSS и JavaScript. Это удалит ненужные комментарии, пробелы, разрывы строк и сделает файл .min.css или .min.js. Также механизм кеширования, используемый на веб-сайте, выполняет аналогичное удаление пространства. Хотя все это сделано для повышения скорости страницы, это делает CSS и скрипты нечитаемыми для тех, кто ищет исходный код страницы. Chrome решает эту проблему, предлагая «Довольно Принт». Нажав на «Довольно Принт»Восстановит уменьшенные файлы до удобочитаемой версии, чтобы вы могли легко ее просмотреть.
Вот пример того, как минифицированный скрипт выглядит в консоли разработчика. Просмотрите связанную таблицу стилей или скрипт в разделе «Источники”Таб. Нажмите на двойные браслеты {}.
Включить опцию Pretty Print Format в Chrome
Вы увидите красивый вид сценария для печати, как показано ниже:
Просмотр CSS и скриптов в красивом виде для печати
Некоторые веб-страницы не позволяют щелкнуть правой кнопкой мыши, чтобы избежать копирования содержимого, в этом случае вы можете получить доступ к источнику страницы с помощью пункта меню консоли разработчика в Chrome.
8. Изменение в реальном времени и предварительный просмотр изменений в Интернете
Самым большим преимуществом консоли разработчика Chrome является возможность поиграть на странице в реальном времени и предварительно просмотреть изменения прямо в браузере. Вы можете напрямую изменить или добавить стиль CSS в консоли разработчика, чтобы увидеть эффект на действующей странице. Например, вы можете изменить «font-size» элемента «body» и увидеть, как изменение размера шрифта выровнено соответствующим образом. Это очень полезный вариант, который экономит много времени, не влияя на реальный пользовательский опыт, в противном случае вам может потребоваться изменить на действующем сайте на итерационной основе, чтобы найти подходящий стиль.
Также палитра цветов — одна из любимых веб-разработчиков. Вы можете изменить цвета элементов онлайн и мгновенно просмотреть. Вы можете скопировать цветовые коды RGB или HEX и использовать в своем дизайне как профессионал.
Изменение живых цветов на веб-страницах
Щелкните правой кнопкой мыши элемент HTML и отредактируйте его напрямую, используя параметр «Редактировать как HTML», чтобы добавить или удалить контент в Интернете.
Редактировать исходный код HTML прямо в Chrome
Узнайте больше о том, как просмотреть структуру HTTP-ответа в консоли разработчика Chrome.
Заключительные слова
Мы надеемся, что эта статья помогла вам понять, как просматривать исходный код в Chrome. Помните, что просмотр исходного кода — это очень типичное действие, и любой пользователь может это сделать. Но использование консоли разработчика требует от вас много времени на обучение. Также Chrome обновляет функции в каждой версии, что делает процесс обучения непрерывным. Но это должно быть очень интересно и увлекательно для понимания и устранения проблем с концепциями веб-дизайна.
что это такое, где его найти и как посмотреть
Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Исходный код сайта – это совокупность HTML-разметки, CSS стилей и скриптов JavaScript, которые браузер получает от веб-сервера.
Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA
Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.
Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они программную часть. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.
Исходный код страницы – это набор данных, включающий в себя:
- html-разметку;
- стилевую таблицу или ссылку на файл css;
- программы, написанные на JavaScript или ссылки на файлы с кодом.
Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.
Зачем нам может понадобиться изучать исходный код
Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:
- Увидеть мета-теги своего или чужого сайта для их анализа.
- Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в различных системах, определенных скриптов и прочего.
- Узнать параметры элементов: размеры, цвета, шрифты.
- Найти путь к фотографиям и другим элементам, располагающимся на странице.
- Изучить ссылки со страницы.
- Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в отдельные файлы стили, скрипты, невалидный код.
Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.
Как посмотреть исходный код сайта
Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на примере Google Chrome.
Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.
Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.
Как найти исходный код страницы сайта
Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.
В разделе дополнительных инструментов выбираем «Инструменты разработчика».
Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.
Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.
Их можно сохранить. Для этого нажимаем правую кнопку мыши (ПКМ) и выбираем «Save».
Во вкладке «Security» доступна проверка сертификата сайта.
Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.
Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.
Как посмотреть мета-теги
Каждый html-документ включает в себя теги структуры. Вот некоторые из них:
- Html – весь документ.
- Head – раздел служебных заголовков.
- Title – заголовок страницы (отображается на вкладке).
- Body – тело документа.
- h2-H6 – заголовки текста страницы.
- Article – статья.
- Section – раздел.
- Menu – меню.
- Div – блок.
- Span – строка.
- P – абзац.
- Table – таблица.
Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.
Их содержимое другим способом узнать невозможно.
Обратим внимание на тег Link. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».
В новой вкладке откроется указанный файл, который можно просмотреть или сохранить.
Как посмотреть исходный код страницы для отладки скрипта
В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки кода JavaScript можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.
Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».
Как посмотреть код конкретного элемента
Для больших страниц с большим количеством элементов сложно найти нужный код во всей разметке. В таком случае следует воспользоваться специальной командой контекстного меню. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».
Откроется то же окно, но с фокусировкой на выбранном объекте.
Резюме
Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь удобными инструментами разработчика, вы сможете проводить отладку своих собственных html-документов.
Просмотр кода ресурсов в интернете позволит вам учиться не только на собственном опыте, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.
HTML-редакторов
Простой текстовый редактор — это все, что вам нужно для изучения HTML.
Изучение HTML с помощью Блокнота или TextEdit
Веб-страницы можно создавать и изменять с помощью профессиональных редакторов HTML.
Однако для изучения HTML мы рекомендуем простой текстовый редактор, например Блокнот (ПК) или TextEdit (Mac).
Мы верим в то, что использование простого текстового редактора — хороший способ изучить HTML.
Выполните следующие действия, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.
Шаг 1. Откройте Блокнот (ПК)
Windows 8 или новее:
Откройте начальный экран (символ окна в левом нижнем углу экрана). Тип Блокнот .
Windows 7 или более ранняя версия:
Открыть Старт >
Программы> Аксессуары> Блокнот
Шаг 1. Откройте TextEdit (Mac)
Откройте Finder> Приложения> TextEdit
Также измените некоторые настройки, чтобы приложение
правильно сохранять файлы.В настройках > Формат>
выберите «Обычный текст»
Затем в разделе «Открыть и сохранить» установите флажок «Отображать файлы HTML как HTML-код вместо форматированного текста».
Затем откройте новый документ для размещения кода.
Шаг 2. Напишите HTML
Напишите или скопируйте следующий HTML-код в Блокнот:
Мой первый заголовок
Мой первый абзац.