Андроид. Windows. Антивирусы. Гаджеты. Железо. Игры. Интернет. Операционные системы. Программы.

Web страница документ html представляет. Создание документов в HTML. Что все-таки представляет собой язык HTML

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

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.

Элементы

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с

до

) и абзацев (определены как

); в список можно включить элементы ,

, , и и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,

.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,

.

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег и закрывающий тег . Что находится между этими двумя тегами будет содержимым ссылки.

Так, теги ссылок будут выглядеть примерно так:

...

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , , и .

Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.

Внутри элемент определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.

Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:

Привет, мир!

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body> .</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html> , <head> и <body> , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с <a href="/editors/delaem-krasivye-taby-vkladki-s-pomoshchyu-css-i-jquery-delaem-krasivye-taby.html">помощью CSS</a>. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... } </p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам <span><p>P { color: ...; font-size: ...; } </p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p >И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.</p><p>P { color: orange; font-size: 16px; } </p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с <a href="/gadgets/huawei-p9-lite-mini---tehnicheskie-harakteristiki-bluetooth---eto-standart-bezopasnogo.html">различными типами</a> селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.</p><p>Div { ... } </p><p> <div>...</div> <div>...</div> </p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы <div> и <span><p>Awesome { ... } </p><p> <div class="awesome">...</div> </p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .</p><p> #shayhowe { ... } </p><p> <div id="shayhowe">...</div> </p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый <a href="/gadgets/konverter-vord-v-open-ofis-onlain-kak-otkryt-fail-odt-platnye-tekstovye.html">текстовый файл</a> с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На <a href="/ios/spisok-samyh-proizvoditelnyh-smartfonov-samyi-moshchnyi-telefon-v-mire-na.html">данный момент</a> наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как <a href="/operating-systems/otklyuchenie-push-uvedomlenii-v-google-chrome-kak-otklyuchit-vsplyvayushchie-uvedomleniya.html">Google Chrome</a> отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает <a href="/windows-7/oshibka-scenariya-v-1s-8-3-na-etoi-stranice-proizoshla-oshibka.html">Internet Explorer</a>. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает <a href="/there-are-some-advice/interesnye-akkaunty-instagram-na-kotorye-stoit-podpisatsya-kazhdoi.html">единый стиль</a> для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все <a href="/windows-7/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak.html">разные браузеры</a> станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим <a href="/game/kak-sdelat-nevidimuyu-papku-skrytye-faily-i-papki-etap-i-sozdaem-novuyu.html">новую папку</a> с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим <a href="/program/podklyuchenie-k-mediaseti-youtube-po-novym-pravilam-zapuskaem-prosmotr-failov-po.html">новый файл</a> с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p> /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head> , сразу после элемента <title> .</li><li>Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet .</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

  • Разница между HTML и CSS.
  • Знакомство с элементами HTML, тегами и атрибутами.
  • Настройка структуры вашей первой веб-страницы.
  • Знакомство с селекторами CSS, свойствами и значениями.
  • Работа с селекторами CSS.
  • Указатель на CSS из HTML.
  • Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

  • Common HTML terms via Scripting Master
  • CSS Terms & Definitions via Impressive Webs
  • CSS Tools: Reset CSS via Eric Meyer
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер). Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка). Существуют три основных способа создания Web-страниц (или документов HTML): 1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Технология этого способа создания Web-страницы такова: В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer. 2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. 3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат. Рассмотрим основные понятия языка HTML. 1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. 2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: . Конечный тег всегда снабжается косой чертой: . 3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. 4. Фрейм - область гипертекстового документа со своими полосами прокрутки. 5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы. 6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей. 7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании). Рассмотрим общую структуру типичного простейшего документа HTML: Комментарий Название документа Здесь расположен текст самого документа HTML. Просмотр простейшего документа HTML Дадим пояснения указанным тегам документа HTML. или - Комментарий к документу. Он игнорируется броузером. Комментарий не является обязательным и может отсутствовать. - идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML. - идентификатор заголовка окна просмотра. <META> - этот непарный тег применяется для указания подробной информации о документе. <BODY> - идентификатор HTML-команд документа для просмотра. Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организации документа. Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой буквы, так и с большой. <u>Рассмотрим теги форматирования текстового потока: </u> <P>Идентификатор конца абзаца. <BR> - идентификатор перевода строки. <HR> - идентификатор изображения горизонтальной линии. Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой. <PRE>Установка равноширинного шрифта. В конце нужен тег </PRE>. Рассмотрим парные теги форматирования заголовков и подзаголовков документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки будут выведены большими буквыми, причем размер букв у тега <H1> будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д. Рассмотрим парные теги форматирования символов текста: <B> - идентификатор полужирного шрифта. <strong> - идентификатор выделенного шрифта. <i> - идентификатор курсива. <U> - идентификатор подчеркивания. <s> - идентификатор перечеркивания. <tt> - идентификатор равноширинного шрифта (телетайпного или курьера). <big> - задает увеличенный размер шрифта. <small> - задает уменьшенный размер шрифта. <CENTER> - задает центрирование текста. <sub> - задает нижний индекс. Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub> <sup> - задает верхний индекс. Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2 Просмотр примера с тегами форматирования текстового потока. <u>Рассмотрим теги форматирования абзацев: </u> <p align=left>Выравнивание текста в абзаце по левому краю. <p align=right>Выравнивание текста в абзаце по правому краю. <p align=center>Выравнивание текста в абзаце по центру. <p align=justify>Полное выравнивание по обоим краям экрана. align - атрибут выравнивания. <u>Рассмотрим теги списков. </u> Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Броузер автоматически генерирует номера для каждого пункта в списке. <OL> - идентификатор упорядоченного списка. В конце </OL>. Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка). <UL> - идентификатор неупорядоченного списка. В конце </UL>. Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом <LI>, а элементы в списках определений <DL> тегами <DT> для термина и <DD> для значения термина. <LI> - идентификатор элемента в упорядоченном и неупорядоченном списке. Конечный тег </LI> может быть опущен. Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний. <DL> - идентификатор списка определений. В конце </DL>. <DT> - идентификатор термина в списке определений. <DD> - идентификатор значений термина в списке определений. Списки определений имеют вид: <DL> <DT> название термина 1 <DD> определение термина 1 <DD> другое определение термина 1 ..... </DL> Применение тегов списков изложено в Примерах 4 и 5. Просмотр примера с тегами списков. <u>Некоторые важнейшие <a href="/gadgets/2-kak-pravilno-propisat-html-tegi-v-svoih-temah-wordpress-ch-2.html">теги HTML</a> </u> <BODY bgcolor="teal" text="aqua" link="red"> - задает цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link). Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки. <BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web- странице в файле back.jpg. <BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла. <font color="yellow" size=5> - задает цвет символов текста (атрибут color) и их размер (атрибут size). В конце нужен тег </font>. <hr color="lime"> - задает цвет горизонтальной линии. <hr color="red" size=3 width=220 align=center> - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо). <img src='/antivirus/web-stranica-dokument-html-predstavlyaet-sozdanie-dokumentov-v-html.html' loading=lazy> - вставка графического изображения в виде файла lycos.gif. Есть и анимационные gif-файлы. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp. <p>Web-страница - это специально отформатированный документ, который может включать текст, графику, гиперсвязи, аудиоряд, анимацию, видеоряд.</p> <p>Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном веб-сервере, образуют веб-сайт.</p> <p>Веб-с айт (от англ. <i>website </i>: <i>web </i> - «паутина, сеть» и <i>site </i> - «место», буквально «место, сегмент, часть в сети») - совокупность <a href="/editors/povtornaya-otpravka-transportnogo-konteinera-s-id-informaciya-o-poryadke.html">электронных документов</a> (файлов) частного лица или организации в <a href="/internet/56-organizaciya-kollektivnoi-deyatelnosti-v-kompyuternyh-setyah-kompyuternye.html">компьютерной сети</a>, объединённая под одним адресом (доменным именем или IP-адресом).</p> <p><u>Все сайты в совокупности составляют </u><a href="/network/realnyi-ezhednevnyi-zarabotok-v-internete-rabota-cherez.html">Всемирную паутину</a><u>, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое - базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол </u>HTTP<u>. </u></p> <p>Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.</p> <p>Программа, демонстрирующая веб-страницу, называется веб-браузер.</p> <p>Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.</p> <p>HTML позволяет:</p> <p>· форматировать текст;</p> <p>· включать в документ изображения, мультимедиа;</p> <p>· с помощью этого языка создаются гипертекстовые ссылки на другие Web-страницы.</p> <p>HTML используется для создания информационного содержимого файла и для определения структуры и формата Web-страниц. Так как HTML-файлы являются обычными текстовыми файлами, такой файл может быть практически отправлен на любой компьютер.</p> <p>Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение «Блокнот».</p> <p>Обычно файл Веб-страницы имеет расширение.html или.htm.</p> <p>Кроме того, существует много технологий, в которых основные действия по созданию сайтов уже автоматизированы, остается лишь внести изменения в соответствии со своей тематикой.</p> <p>Для того, чтобы просмотреть HTML-страницу, достаточно просто ввести ее URL-адрес в строке адреса Web-браузера, а затем следовать по гиперссылкам. Но именно в этом и заключается основная проблема - как узнать адрес страницы? Чаще всего бывает так, что известно то, что необходимо найти, но неизвестно где именно искать. Для решения этой проблемы существуют специальные поисковые системы. С точки зрения пользователя, <a href="/there-are-some-advice/osnovnye-principy-raboty-poiskovyh-sistem-kak-rabotayut-poiskovye-sistemy.html">поисковая система</a> - это обычный сайт на <a href="/network/kak-pridumat-oformlenie-kanala-na-youtube-kak-gramotno-oformit.html">главной странице</a> которого находятся разбитые по рубрикам («Спорт», «Бизнес», «Компьютеры» и т.п.) ссылки на другие сайты. Кроме того, поисковая система позволяет пользователю ввести несколько <a href="/game/s-chego-nachinaetsya-seo-optimizaciya-issledovanie-klyuchevyh-slov.html">ключевых слов</a> и возвращает ссылки на страницы, содержащие эти ключевые слова.</p> <p>Веб - сайт</p> <p>Веб-сайт (англ. Website, от web - паутина и site - "место") - в компьютерной сети объединённая под одним адресом совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.</p> <p>Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый <a href="/game/luchshaya-sreda-programmirovaniya-c-razrabotka-programmnogo.html">программный комплекс</a> для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только технически.</p> <p>В большинстве случаев в Интернете одному веб-сайту соответствует одно доменное имя. Именно по <a href="/windows-7/domen-kiev-ua-kakaya-strana-domen-chto-eto-takoe-i-kak-ustroena-domennaya.html">доменным именам</a> сайты идентифицируются в <a href="/windows-10/vybor-sposoba-podklyucheniya-k-globalnoi-seti-internet-globalnaya.html">глобальной сети</a>. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить <a href="/android/kak-poluchit-raznye-vidy-platnyh-stikerov-v-vk-besplatno-kak.html">разные виды</a> предоставляемых услуг (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Гугла на <a href="/operating-systems/chem-otlichayutsya-raznye-redakcii-windows-yazyk-ili-versiya-windows.html">разных языках</a>, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для <a href="/smarttv/obzory-i-reiting-luchshih-besplatnyh-hostingov-vse-hostingi-i-servery.html">бесплатных хостингов</a>. Для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/.</p> <p>Создать качественную web-страницу непросто, для этого нужны не только навыки дизайнера для красивого и стильного оформления, но и опыт программирования. Сложность и объем программ, требуемых для создания того или иного сайта, зависят от множества факторов, таких как структура, цель, функциональность, обеспечение надежности и система защиты сайта от информационных атак со стороны информации-«прилипалы» (спам, мусор) и вирусов.</p> <p>Web-технология (технология гипертекста) позволила связать всю совокупность опубликованных в Интернете документов в <a href="/operating-systems/informacionnaya-sistema-obektovyi-uchet-uchet-municipalnyh-informacionnyh.html">единую систему</a> - WWW. Гипертекстовый документ содержит гиперссылки. Их обычно выделяют цветом и подчеркиванием. Гиперссылки позво­ляют пользователю немедленно перейти к нужному документу, неза­висимо от места его физического расположения. Это существенно облегчает поиск информации в Интернете.</p> <p>Использование гипертекстовой разбивки текстового документа в современных <a href="/antivirus/isu---informacionnaya-sistema-upravleniya-predpriyatiem.html">информационных системах</a> во многом связано с тем, что гипертекст дает возможность создавать механизм нелинейного просмотра информации. В таких системах данные представляются не в виде непрерывного потока <a href="/internet/opredelenie-vremeni-zapisi-faila-teoriya-kodirovanie-i-obrabotka-zvukovoi.html">текстовой информации</a>, а набором взаи­мосвязанных компонентов, переход по которым осуществляется с по­мощью гиперссылок.</p> <p>Если говорить о <b>создании документов HTML </b>, то можно представить себе два способа их формирования.</p> <p>Первый состоит в разметке существующего (или создаваемого) документа вручную. При этом автор или редактор добавляет в документ теги раз­метки. Эту работу можно выполнять в текстовом редакторе или <a href="/program/programmy-redaktory-html-html-reader-besplatnyi-html-redaktor-kak-proverit-html-fail.html">редакторе HTML</a>, имеющем специальные элементы управления для упрощения ввода тегов. В обоих этих случаях работа ведется средствами языка HTML, и человек, выполняющий эту работу, должен знать и уметь применять этот язык.</p> <p>Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматри­вать как «разметку», добавляемую в форматируемый документ. Однако для исполь­зования <a href="/operating-systems/otkrytyi-urok-sozdanie-i-formatirovanie-tablic-uchitelskie.html">текстового процессора</a> не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ авто­матически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (вайсевег) (от английского What You See Is What You Get (воч ю си ис воч ю гат) - Что видите, то и получаете).</p> <p>Они позволяют создавать целые web-узлы (порталы) и используют все <a href="/network/novye-napravleniya-razvitiya-mikroelektroniki-rol.html">современные технологии</a>. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe: www.adobe.com.</p> <br><br><p>Первый способ позволяет создавать более универсальные, более качественные и более разнообразные документы. Второй способ проще освоить, так как он не тре­бует знания языка HTML. Однако в этом случае используются средства формати­рования вместо средств описания, что может иногда приводить к нежелательным последствиям.</p> <p>Итак, для создания web-страниц вам понадобится текстовый или web- редактор. Надо отметить, что все web-редакторы обязательно содержат и текстовый редактор, web-редакторов сейчас существует большое количество, но самыми мощными признаны три:</p> <p>1. Macromedia Dreamweaver (макромедиа дримвиваф);</p> <p>2. Allaire HomeSite (аллер хом сайт);</p> <p>3. Microsoft FrontPage (майкрософт фонт пейдж).</p> <p>Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe (эдоби): www.adobe.com. С помощью браузера следует зайти на указанный сайт в раздел Down­loads/Trial Downloads и выбрать Macromedia, HomeSite.</p> <p>Можно воспользоваться русской версией FrontPage Express из локализованного Internet Explorer - это сокращенный вариант FrontPage, но очень удобен для начала. На русском языке также известен web-редактор Visual Workshop (http://www.snkey.net/ download /products /index.html).</p> <p>Современные сервисы в Интернете предлагают готовые конструк­торы сайтов. Рассмотрим их на примере конструктора сайтов «Мой сайт» (www.narod.yandex.ru). С его помощью можно получить место под свой сайт (<a href="/internet/knopka-glavnaya-stranica-kak-izmenit-domashnyuyu-stranicu-v-google-chrome.html">домашнюю страницу</a>) и за 5 мин создать свой web-сайт с картинками, фотографиями и пр.</p> <p>Процесс конструирования сайта включает в себя три этапа:</p> <p>1. вход в конструктор сайта;</p> <p>2. регистрация, назначение имени сайта;</p> <p>3. конструирование сайта с использованием заготовок.</p> <p>Для создания рукотворного сайта, единственного в своем роде, требуются иные web-инструменты.</p> <p>Помимо HTML и конструкторов сайтов можно пользоваться и другими средствами программирования web-страниц. Одним из средств программирования сайтов является CGI (си джи ай) (Common Gateway, комон гейтвай).</p> <p>Принцип CGI прост и есте­ственен: программа на стороне сервера принимает некие данные, обрабатывает их и выдает ответ в виде web-страницы. Это очень частое явление на сегодняшний день, и порой даже не подозреваешь, что имеешь дело не с обычной страницей, а с результатом работы CGI-скрипта (кода). Область использования CGI широка, а цели разнообразны. Язык программирования, на котором пишется скрипт, должен быть гибким и в то же время мощным, так как предстоит не только постоянная работа с файлами, но и с БД, ОС и web-сервером. Самыми подходящими языками для CGI-программирования явля­ются Си (C++) и Perl. Последний наиболее часто используется для этих целей из-за своей простоты, надежности и широты возмож­ностей.</p> <p>Язык Си по праву считается универсальным и нашел свое место в среде CGI. Его применение естественно в родной стихии - Unix, на основе которой в большинстве случаев и строится web-узел.</p> <p>Для CGI-программирования используется также язык C++, который подразумевает создание и уничтожение неких объектов, реализуемых через классы, - по сути пользовательских типов данных. Естественно создать, например, класс Guestbook или DataBaseEntry, который со­держал бы необходимые переменные и функции. Стоит заметить, что почти все новые языки программирования (Java, JavaScript, Perl) со­держат конструкции, схожие с конструкциями Си или же являющие­ся их <a href="/windows-10/tochnaya-kopiya-samsung-galaxy-s7-taivan-gde-proizvodyat-i-sobirayut-samsung-galaxy.html">точными копиями</a>. Поэтому рекомендуется сначала изучить именно этот фундаментальный язык.</p> <p>Язык Perl уникален. Во-первых, в нем отсутствуют типы данных, что благоприятно воздействует на написание CGI-скриптов. Во- вторых, очень много конструкций взято из Си. Надо отметить, что в Perl часто используются <a href="/android/sed-poisk-po-regulyarnomu-vyrazheniyu-potokovyi-redaktor-sed.html">регулярные выражения</a>, похожие на те, что применяются в сценариях Unix Shell. Имеется удобный <a href="/windows-10/cikl-php-foreach-dva-sposoba-ego-ispolzovaniya-o-tonkostyah-raboty-foreach-v-php.html">цикл foreach</a> и красивые, по сути, модификаторы выражений. Perl рас­полагает стандартной библиотекой, в которой есть функции поиска, работы с web-сервером, графикой и т.п. Из этого можно сделать вывод, что для программиста, знакомого с Unix, не составит труда изучить Perl. Для написания такой программы достаточно уметь работать с файлами из Perl и, немного, с переменными окружения web-сервера.</p> <p>Процесс создания Web-документов сродни программированию и так же подвер­жен ошибкам. Независимо от того, каким способом создается документ, следует регулярно проверять его соответствие замыслу, просматривая его в различных браузерах. Для художественной оценки получающейся страницы следует обратиться к независимому мнению.</p> <p>Вопросы для самоконтроля:</p> <p>1. Что означает понятие HTML-документ?</p> <p>2. Каковы преимущества этого вида документа?</p> <p>3. Что означает понятие «тэг»?</p> <p>4. Какие разновидности тэгов существуют?</p> <p>5. Что входит в состав объектов управления тэгами?</p> <br><p>www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm</p> <p>http://dvo.sut.ru/libr/ite/i280levc/index.htm Ю.П. Левчук, Е.П. Охинченко, А.Д. Сотников, Т.А. Фоменко ИНФОРМАТИКА Часть 2 ИНТЕРНЕТ-ТЕХНОЛОГИИ </p> <br><p><b>1. Web-страница (документ HTML) представляет собой: </b></p> <p>а) текстовый файл с расширением.txt или.doc;</p> <p>б) <b>текстовый файл с расширением.htm или.html; </b></p> <p>в) двоичный файл с расширением.com или.exe;</p> <p>г) графический файл с расширением.gif или.jpg.</p> <p><b>2. Для просмотра Web-страниц в Интернете используются программы: </b></p> <p>а) Microsoft Word или Word Pad;</p> <p>б) <a href="/editors/maikrosoft-aksess-kak-rabotat-access-eto-chto-takoe-sozdanie.html">Microsoft Access</a> или Microsoft Works;</p> <p>в) Internet Explorer или NetScape Navigator;</p> <p>г) HTMLPad или Front Page.</p> <p><b>3. Тег – это: </b></p> <p><b>а) инструкция браузеру, указывающая способ отображения текста </b>;</p> <p>б) текст, в котором используются спецсимволы;</p> <p>в) указатель на другой файл или объект;</p> <p>г) фрагмент программы, включённой в состав web-страницы.</p> <p><b>4. Гипертекст – это: </b></p> <p>а) текст очень <a href="/editors/pravilnii-razmer-dlya-bolshoi-ramki-v-vorde-kolontituly-v.html">большого размера</a></p> <p>б) текст, в котором используется шрифт большого размера</p> <p><b>Цель работы: </b>знакомство студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физиче­скими и логическими стилями, приобретение навыков созда­ния простейших статических Web-документов.</p><p>На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер Internet Explorer - как инструмент контроля за сделанным.</p><p><b>Теоретические сведения </b></p><p><b>Основные понятия </b></p><p><i>Гипертекст </i> - информационная структура, позволяющая устанавли­вать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от од­ного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (ги­перссылки). Выделение слова свидетельствует о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделен­ным словом, рассматривается более подробно. Отдельный документ, выполненный в формате HTML, называется:</p><p>HTML-документом;</p><p>Web-документом;</p><p>Web-страницей.</p><p>Такие страницы, как правило, имеют формат НТМ или HTML.</p><p>Группа Web-страниц, принадлежащих одному автору или одному ИЭДВ телю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL - <i>a </i><i>д </i><i>p </i><i>е </i><i>c </i> в Интер­нете.</p><p><i>Фрейм (</i><i>Frame </i><i>) </i> - термин, имеющий два значения. Первое значение область документа со своими полосами прокрутки. Второе - 0ДНН0Ч ное изображение в анимационном графическом файле (кадр).</p><p><i>Апплет (</i><i>Applet </i><i>) </i> - программа, передаваемая на компьютер клиенте В ви­де отдельного файла и запускаемая при просмотре Web-страницы.</p><p><i>Скрипт (</i><i>Script </i><i>) </i>, или сценарий, - программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер lnternet Explorer в определенных ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.</p><p><i>CGI </i><i> (</i><i>Common </i><i> </i><i>Gateway </i><i> </i><i>Interface </i><i>) </i> - общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Без таких программ невозможно создание интерактивных Web-страниц.</p><p><i>Браузер (</i><i>Browser </i><i>) </i> - программа для просмотра Web-страниц.</p><p><i>Элемент </i>- конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов. Например:</p><p><Начало элемента> Содержание элемента, данные, которые форматирует элемент </Конец элемента></p><p><i>Тег </i> (по-английски tag - метка, дескриптор, ярлык) - начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки < >, а конечный тег всегда снабжается косой чертой. Текст, не находящийся между такими скобками (< >), виден весь при просмотре в браузере. Например:</p><p><Начальный тег> Содержание элемента, данные, которые</p><p>форматирует элемент </Конечный тег></p><p><Р> Этот текст будет расположен в отдельном абзаце </Р></p><p>Любая Web-страница представляет собой набор элементов. Один из основных принципов HTML - возможность вложения одного элемента в другой.</p><p><i>Атрибут </i> - параметр или свойство элемента. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. Если цемент содержит текст, то атрибуты могут задавать цвет и размер шрифта, выравнивание текстового абзаца и т.п. Если элемент содержит рисунок, то атрибуты могут задавать размер рисунка, наличие и размер рамки вокруг рисунка и пр.</p><p><Р align="center"> Этот текст будет выравнен по центру экрана</p><p>В этом примере опять встречается тег, определяющий начало и конец абзаца. Однако в начальном теге находится атрибут align, который задает выравнивание текста по центру экрана.</p><p>Обратите внимание:</p><p>Любая <a href="/internet/kak-otklyuchit-no-kak-otklyuchit-platnye-uslugi-na-nomerah-bilain.html">полезная информация</a> должна находиться между началь­ным и конечным тегами, указывающими ее формат;</p><p>Все атрибуты располагаются в начальном теге;</p><p>Для удобства работы начальный тег вы можете писать с про­писной (заглавной) буквы (Р), а конечный - со строчной (ма­ленькой) буквы (/р), хотя это и не обязательно;</p><p>Не для всех элементов требуется ставить конечный (закрыва­ющий) тег;</p><p>Написание каждого нового элемента начинайте с <a href="/internet/kak-v-vk-pereiti-na-novuyu-stroku-kak-pereiti-na-novuyu-stroku.html">новой строки</a>. Вложенные элементы выделяйте отступом (табуляцией). Это опять-таки не обязательно, но значительно облегчит вашу работу.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <p style="text-align: center;"></p> <p> <div style="text-align: center; margin: 3px 0;"> </div> <div style="text-align: center; margin: 1px 0 5px;"> </div> </p><span class="adplacer_pro_adblock_end_post_content" style="display: none;width: 0;height: 0;"></span> </article> <div class="post-meta"> <div class="post-share"> <div class="post-share__title">Поделиться с друзьями:</div> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div> </div> </div> <div class="title">Похожие публикации</div> <div class="yarpp-related"> <ul class="related-items"> <style> </style> <style> #perelink-horizontal{ vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 230px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img{ width:230px; height:150px; margin-bottom:10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="/antivirus/ugadai-kakie-dva-emodzi-oboznachayut-etot-stiker-kak-uznat-chto.html"> <img src="/uploads/8f2c4eb06dfa6c73f1867b0b812e38c5.jpg" height="150" width="230" loading=lazy> <span>Как узнать, что означает тот или иной смайл Emoji</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/antivirus/neprezentabelnyi-html-signup-php-forma-v-vashem-layout-php-v-html.html"> <img src="/uploads/2bab7d58341140e8c13f4d7aa253cdf1.jpg" height="150" width="230" loading=lazy> <span>Непрезентабельный html signup php</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/android/kak-rabotaet-portativnaya-versiya-skype-portativnyi-skaip-dlya-windows.html"> <img src="/uploads/63d9e2bdfa5b2c68af05397edc5766ba.jpg" height="150" width="230" loading=lazy> <span>Портативный скайп для Windows Как правильно установить портативную версию скайпа</span> </a> </div> </div> </ul> </div> <div class="yarpp-related"> <ul class="related-items"> <li><img src="/uploads/92b97e76e63da98ca1068e7c46785aca.jpg" / loading=lazy> <a href="/windows-7/televidenie-bez-reklamy-podklyuchit-podklyuchit-cifrovoe-televidenie.html" target="_blank" rel="nofollow noopener noreferrer">Подключить цифровое телевидение</a></li> <li><img src="/uploads/024985b9c186057701dc57c8fab751ef.jpg" / loading=lazy> <a href="/network/kontroller-zaryada-li-ion-na-mcp73833-kontroller-razryada-proverka.html" target="_blank" rel="nofollow noopener noreferrer">Контроллер разряда Проверка платы контроллера заряда li ion аккумулятора</a></li> <li><img src="/uploads/5b77fec43294a9ab05121e495a0e0f91.jpg" / loading=lazy> <a href="/smartphones/profilirovanie-php-prilozhenii-s-pomoshchyu-phpstorm-i-xdebug-profilirovanie-php7-koda-s.html" target="_blank" rel="nofollow noopener noreferrer">Профилирование PHP7 кода с использованием xhprof Оптимизация кода на основании данных профайлинга</a></li> </ul> </div> </main> <aside class="sidebar"> <div class="search-form ya-site-form ya-site-form_inited_no" onclick="return { 'bg': 'transparent', 'publicname': '\u041f\u043e\u0438\u0441\u043a \u043f\u043e maylohack.ru', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': '/search', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2265323', 'logo': 'rb', 'websearch': false, 'type': 2} "> <form action="/search" method="get" target="_self"> <input type="hidden" name="searchid" value="2265323"> <input type="hidden" name="l10n" value="ru"> <input type="hidden" name="reqenc" value=""> <input type="text" name="text" placeholder="Поиск по сайту:" class="search-form__field" value=""> <input type="submit" value="" class="search-form__button"> </form> </div> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://maylohack.ru/antivirus/web-stranica-dokument-html-predstavlyaet-sozdanie-dokumentov-v-html.html" target="_blank" class="vk">ВКонтакте</a> <a href="https://www.twitter.com/share?url=https://maylohack.ru/antivirus/web-stranica-dokument-html-predstavlyaet-sozdanie-dokumentov-v-html.html" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> <nav class="sidebar-menu section"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/internet/">Интернет</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/program/">Программы</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/game/">Игры</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows-7/">Windows 7</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/gadgets/">Гаджеты</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows-10/">Windows 10</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/android/">Android</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/iron/">Железо</a> </li> </ul></nav> <div class="section section-question"> <div class="title"><a href="/">Новые статьи</a></div> <ul class="section-question__posts"> <li> <a href="/gadgets/mvno-postavili-na-potok-kak-virtualnye-operatory-ubyut-otrasl-mvno.html">MVNO – виртуальные операторы связи Сколько стоит виртуальный оператор и регион</a> </li> <li> <a href="/internet/kakie-professii-sushchestvuyut-v-seti-internet-kak-rabotat-udal-nno-lichnyi-opyt.html">Какие профессии существуют в сети интернет?</a> </li> <li> <a href="/iron/konvertirovat-iz-pdf-v-ipd-konvertiruem-pdf-v-jpg-kak-sohranit-neskolko-stranic.html">Конвертировать из пдф в ипд</a> </li> <li> <a href="/android/globalnaya-ezhenedelnaya-proshivka-kak-otlichit-globalnuyu-versiyu-proshivki.html">Как отличить глобальную версию прошивки от китайской на Xiaomi</a> </li> <li> <a href="/windows-7/kak-vosstanovit-sistemu-s-pomoshchyu-acronis-true-image-vosstanavlivaem-zhestkii-disk-acronis.html">Восстанавливаем жесткий диск Acronis true image как восстановить образ диска</a> </li> <li> <a href="/smartphones/klassifikaciya-ustroistv-dolgovremennogo-hraneniya-informacii.html">Подробная характеристика устройств долговременного хранения информации</a> </li> </ul> </div> <div class="section-posts-box section"> <div class="title">Популярные статьи</div> <div class="section-video section-posts"> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/ecb179a0c817208e187bcc315394450c.jpg" width="199" height="150" alt="Прошивка телефонов Lumia оригинальным ПО" / loading=lazy> <a href="/smartphones/kak-proshit-nokiya-lyumiya-610-proshivka-telefonov-lumia-originalnym-po-kak.html" class="section-posts__item-title">Прошивка телефонов Lumia оригинальным ПО</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/03106d3591e57886bf270e7f83634bb0.jpg" width="199" height="150" alt="Прошивка или перепрошивка смартфона Asus Zenfone" / loading=lazy> <a href="/game/proshivka-ili-pereproshivka-smartfona-asus-zenfone-kak-proshit.html" class="section-posts__item-title">Прошивка или перепрошивка смартфона Asus Zenfone</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/99d392debae8d67cc7a8ed54d8d7bd72.jpg" width="199" height="150" alt="О возврате товаров и гарантиях торговой площадки Amazon" / loading=lazy> <a href="/ios/vozvrat-deneg-na-amazone-posle-polucheniya-tovara-o-vozvrate-tovarov-i.html" class="section-posts__item-title">О возврате товаров и гарантиях торговой площадки Amazon</a> </div> </div> </div> <div class="section-posts-box section"> <div class="title"><a href="/">Выбор редакции</a></div> <div class="section-video section-posts"> <div class="section-posts__item"> <img src="/uploads/362ff1981884db3a2b1a2d238e97a8c0.jpg" width="199" height="150" alt="Вход почта рамблер Как изменить пароль от e-mail" / loading=lazy> <a href="/windows-7/rambler-pochta-vhod-nastroika-rabota-s-vhodyashchimi-i-ee-mesto.html" class="section-posts__item-title section-title_video">Вход почта рамблер Как изменить пароль от e-mail</a> </div> <div class="section-posts__item"> <img src="/uploads/cf8bdf9021186377df5550797ee391c3.jpg" width="199" height="150" alt="Как удалить историю в аське?" / loading=lazy> <a href="/there-are-some-advice/kak-udalit-istoriyu-v-novoi-aske-kak-udalit-istoriyu-v-aske.html" class="section-posts__item-title section-title_video">Как удалить историю в аське?</a> </div> <div class="section-posts__item"> <img src="/uploads/e8afe88607c624a0f164e4e98729d812.jpg" width="199" height="150" alt="Teaser вход. Teaser. bz – тизерная площадка нового поколения. Заработок на заданиях" / loading=lazy> <a href="/internet/teaser-vhod-teaser-bz-tizernaya-ploshchadka-novogo-pokoleniya-zarabotok-na.html" class="section-posts__item-title section-title_video">Teaser вход. Teaser. bz – тизерная площадка нового поколения. Заработок на заданиях</a> </div> </div> </div> </aside> </div> <footer class="footer"> <div class="wrap"> <div class="logo logo_footer" style="background:none;"> <div class="logo__copy">Все права защищены, 2024</div> </div> <nav class="footer-navid"> <ul> <li class="menu-item type-post_type object-page "><a href="">О сайте</a></li> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://maylohack.ru/antivirus/web-stranica-dokument-html-predstavlyaet-sozdanie-dokumentov-v-html.html" target="_blank" class="vk">ВКонтакте</a> <a href="https://www.twitter.com/share?url=https://maylohack.ru/antivirus/web-stranica-dokument-html-predstavlyaet-sozdanie-dokumentov-v-html.html" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> </div> </footer> <script>var adsplacerProAdblockMessage = { "message":"<div class=\"adb-def\">\r\n <div>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 AdBlock?<\/div>\r\n <div>\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/div>\r\n \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u043c\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432 \u0432\u0430\u0439\u0442\u043b\u0438\u0441\u0442 \u0432\u0430\u0448\u0435\u0433\u043e AdBlock \u043f\u043b\u0430\u0433\u0438\u043d\u0430\r\n<\/div>"} </script><script>var adsplacerProAdblockFirstOnly = 0</script><script>var adsplacerProVersion = "2.5.7"</script><script>if(!AdsplacerProReadCookie('adsplacerProReferrer')){ document.cookie = "adsplacerProReferrer=" + document.referrer + "; path=/; expires=" + (new Date(new Date().getTime() + 60 * 60 * 24 * 1000)).toUTCString(); } </script><script>var adsplacerProPostId = "1848"</script><script>var CookieDate = new Date;CookieDate.setDate(391);document.cookie = 'adsplacerProDontShowAdsIds=' + JSON.stringify(adsplacerProFirstTime) + '; expires=' + CookieDate.toGMTString( ) + '; path=/';</script><script>var adsplacerProAdblockExtendMessages = []</script><script type='text/javascript' src='https://maylohack.ru/wp-content/plugins/adsplacer_pro/assets/js/jquery.adsplacer.adblock.js?ver=2.5.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://maylohack.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://maylohack.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 150, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['custom_html-2'] } ; </script> <script type='text/javascript' src='https://maylohack.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> </div> </body> </html>