Пример создания html страницы в блокноте. Основные коды html

HTML страница и ее структура, определяемая основными тегами

Посмотрим, как выглядит самая обычная интернет-страница изнутри.

Структура HTML по большому счету лежит в основе каждой web - страницы.
Сегодня существует несколько типов HTML документов. Каждому типу документа соответствует его собственная HTML структура (подробности внизу страницы).
Правильная начальная структура HTML является залогом кросс-браузерности сайта .

В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он.

Пример структуры документа:

Рассмотрим HTML теги, определяющие структуру страницы

- обязательные, определяют HTML документ.
- определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
- определяют основной заголовок web - страницы.
- обязательные, определяют видимую часть документа.
- определяют заголовок 3-го уровня.
- определяют параграф. Смотрите урок HTML параграфы

Структура HTML документа | Пишем код страницы

Последовательность действий следующая:

1. Пишeм в Блокноте код HTML страницы:

4. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html . Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O - удерживаем Ctrl и после этого жмем латинскую букву O .

Д ля дальнейшего изучения материала необходимо следующее:
Вы просто обязаны иметь у себя на компьютере несколько различных браузеров. Качаем бесплатно Mozilla Firefox , Opera и продолжаем наш урок.

Открываем index.html при помощи Firefox. В ранних версиях этого браузера вы бы не смогли прочитать написанный вами текст, так отображались бы непонятные символы. Устраняется данная некорректность простым включением в HTML код двух тегов с набором атрибутов, которые также являются обязательными.

Правильная структура HTML 4.01

Такой должна быть начальная структура HTML страницы :

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

Самостоятельно добавьте параграфы, заголовок и посмотрите, что вышло. Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки в Mozilla Firefox или кнопки в Internet Explorer, или F5, чтобы изменения вступали в силу.

У вас все получилось? - Значит вы были внимательны и все сделали правильно.

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

Описание html тегов из примера

1. - эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

... Заголовочные теги ... ... Тело страницы ...

2. - между этими тегами заключается весь видимый контент страницы.

4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег </p> <p>Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body> ).</p> <p>5. <center></center> - эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p> <p>6. <h1></h1> - это один из класса тегов заголовочных тегов <h1>..<h6> , обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".</p> Примечание <p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p> <p>При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1> , а дальше могут идти уже <h2> , <h3> и т.д. Главное, чтобы не было сначала <h2> , потом <h1> , потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2> , <h3> и т.п. может быть много.</p> <p>7. <br/> - это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p> <p>8. <span><img src='https://i1.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy> </span> - это одиночный тег, который выводит изображение.</p> <ul><li>src - обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение). <br><u>Примечание </u>: <ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li> <li>Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .</li> </ul></li> <li>alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li> </ul><p>9. <font></font> - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p> <p>Примечание: - аналогичный тег.</p> <p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p> <p>10. - выделить жирным. Все, что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong> .</p> <p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p> <p>И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент. </p><p>Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы». </p><h2>Как работает HTML-код?</h2>HTML-код представляет собой набор коротких тегов, с содержащимися в них элементами страницы. Весь этот код хранится в файле с расширением.html или.htm. При открытии такого файла в браузере код интерпретируется им, а в окне программы выдается страница в готовом виде. Зная язык <a href="/windows-7-xp/pochemu-vazhno-znat-yazyk-razmetki-giperteksta-html-yazyk/">разметки HTML</a>, создать <a href="/windows-8/odnoklassniki-socialnaya-set-moya-stranica-voiti-bez-chto-est-na-lichnoi/">собственную страницу</a> может практически любой человек.<h2>Какие бывают теги?</h2>Теги представляют собой отдельные конструкции внутри HTML-кода. Это обычный текст заключенный внутрь угловых скобок «». Теги вы можете увидеть в HTML-коде практически любой страницы. Сами по себе теги на страницах не отображаются, на них выводится конкретный элемент, который закодирован с помощью тегов. Например, если на странице присутствует картинка, значит ее HTML код содержит в себе тег img.<h2>Ограничения HTML</h2>Несмотря на то что HTML код позволяет построить довольно качественную гипертекстовую страницу, он имеет свои ограничения. Страницы, содержащие исключительно такой код являются статичными, т.е. в них отсутствует динамика, специальные эффекты и другие возможности. Но они могут быть привнесены с помощью других языков, например Java Script. Подавляющее большинство современных сайтов создаются с использованием дополнительных языков, которые делают их более живыми и интерактивными. <p>Наверняка вы сталкивались с таким понятием как HTML-код. Слышали от знакомых, видели в меню своего браузера и т. п. Но что же это такое? Давайте попробуем выяснить, что это за код и из каких элементов он состоит.</p><h2>Основные сведения</h2><p>Начнем с определения. HTML-код - разметка любой веб-страницы, которая выполнена с помощью языка HTML.</p><p>Данный код состоит из тэгов, благодаря которым браузер определяет, как выглядит та или иная страница. Структура его делится на две части: head - заголовок документа, в котором прописывается название страницы, а также информация о самом документе, и body - тело документа, в котором задаются параметры страницы.</p><p>Для того чтобы создать более-менее приличную веб-страницу, написанную с нуля, следует изучить тэги, используемые данным языком, их параметры, а также знать коды <a href="/tv/kak-smenit-cvet-fona-v-html-cvet-fona/">цветов HTML</a>.</p><h2>Тэги</h2><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/19591/439839.jpg' height="700" width="606" loading=lazy></p><p>Тэг - элемент языка HTML. С его помощью можно задавать шрифт, цвет, размер текста, вставлять в него таблицы и картинки, форматировать, создавать заголовки, ссылки, а также раскрашивать страницу.</p><p>Тэги всегда заключены в угловые скобки - <>, и именно это отличает их от основного текста, который и выводится на страницу при просмотре. Бывают они двух видов - парные и одиночные.</p><p>Парные состоят из открывающего тэга и закрывающего, при этом в последнем после левой угловой скобки стоит прямой сленш. Например: <b>текст</b>.</p><p>Между двумя тэгами находится текст, таблица, картинка или иной элемент, который и отображается на веб-странице.</p><p>Одиночные же состоят из одного тэга и не содержат в себе прямого слеша. Например: <hr>.</p><p>Тэги могут иметь параметры, задать которые можно, используя <a href="/windows-7-xp/chto-proverit-pri-pokupke-telefona-minimalnye-trebovaniya-k-processoru/">специальные коды</a> для HTML.</p><p>Также отметим, что для большинства символов: собачки, скобок, больше или равно, меньше или равно и многих других - существует специальная таблица, в которой прописаны коды данных знаков. Этот код начинается с амперсанта, после которого может идти либо буквенное мнемоническое его обозначение, либо же знак решетки с трехзначным кодом символа. В конце обязательно ставится точка с запятой.</p><h2>Основные тэги</h2><p>Мы разобрались, теперь попытаемся перечислить основные тэги, которые могут быть полезные если не при создании собственных веб-страниц, то хотя бы при оформлении текстов.</p><ul><li>< body> - содержит основные параметры документа, такие как ссылок, поля и прочие;</li><li>< p> - обозначает абзац;</li><li>< b> - выделяет текст жирным;</li><li>< i> - курсив;</li><li>< u> - подчеркивает текст;</li><li>< s> - перечеркивает текст;</li><li>< sup> - задает текст как верхний индекс;</li><li>< sub> - нижний индекс;</li><li>< font> - задает парамерты шрифта: размер, шрифт, цвет;</li><li>< div> - с его помощью вы можете выровнять ваш текст;</li><li>< h>- тэг заголовков;</li><li>< a> - с его помощью задаются ссылки;</li><li>< table> - помогает вставить в документ таблицы, с ним связаны тэги < tr> (строка) и < td> (ячейка).</li> </ul><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/19591/439836.jpg' width="100%" loading=lazy></p><p>Одиночные:</p><ul><li><br> - одиночный, переносит текст, следующий после него, на <a href="/program/odnoklassniki-novaya-registraciya-vhod-kak-sozdat-stranicu-v-odnoklassnikah-registraciya-novoi-str/">новую страницу</a>;</li><li><hr> - с его помощью можно вставить в текст горизонтальную черту.</li> </ul><p>Стоит отметить, что тэги обычно прописываются с <a href="/gadgets/kak-naiti-vhozhdeniya-stroki-v-1s-novye-funkcii-raboty-so-strokami/">новой строки</a>. Делается это для удобства не только самого верстальщика, но и тех, кто будет просматривать коды в HTML.</p><h2>Параметры тэгов</h2><p>Мы уже рассмотрели с вами основные тэги, которые вам желательно знать. Конечно, мы перечислили далеко не все, но даже этого минимума может хватить для создания своих первых веб-страниц.</p><p>Но мало знать одни тэги, нужно еще изучить параметры, которые можно задать. В данной статье мы сделаем лишь их <a href="/internet/kratkii-obzor-github-i-nachalo-raboty-s-nim/">краткий обзор</a>, опишем наиболее часто употребляемые. Увидеть их вы сможете, открыв любой HTML-код.</p><p>Не будем также и расписывать, для какого тэга данный параметр подходит, так как многие из них используются в большинстве команд веб-разметки:</p><ul><li>face - задает вид шрифта;</li><li>size - задает размер;</li><li>color - задает цвет;</li><li>align - выравнивание;</li><li>name - имя;</li><li>href - с помощью <a href="/windows-10/rezultaty-poiska-po-forma-vybora-konstruktor-shemy-komponovki/">данного параметра</a> задается адрес ссылки;</li><li>alt - альтернативный текст;</li><li>width - ширина;</li><li>height - высота;</li><li>background - фоновый рисунок;</li><li>bgcolor - фон.</li> </ul><p>Это далеко не все параметры, мы перечислили лишь наиболее употребляемые и известные.</p><p>После параметра ставится знак равенства, а затем в кавычках прописывается его значение. Советуем вам при разработке сайтов и страниц использовать специальные учебники или пособия, дабы не только знать основные параметры, но и правильно их задавать.</p><h2>Таблица цветов</h2><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/19591/439841.jpg' width="100%" loading=lazy></p><p>Итак, с основными тэгами и их параметрами мы разобрались, теперь давайте рассмотрим коды цветов HTML. Именно с их помощью можно задавать окраску текста, страницы или же отдельных ее элементов.</p><p>Начинающим веб-мастерам следует знать, что есть специальные таблицы цветов, в которых даются коды каждого оттенка. Есть всего 16 базовых цветов, которые можно задавать не только с помощью таблицы, но и просто указывая их название на <a href="/windows-7-xp/britanskie-radiostancii-onlain-radio-dlya-izucheniya-angliiskogo-yazyka-catch/">английском языке</a>. Также к ним можно добавлять слова светло- и темно-, задавая нужный оттенок.</p><p>Также есть которая насчитывает 216 всевозможных оттеков.</p><p>Отметим, что пользоваться таблицами намного удобнее. В них дается <a href="/windows-10/shestnadcaterichnyi-kod-programmirovanie-na-assemblere-dlya/">шестнадцатеричный код</a> цвета. При этом вы сразу же можете увидеть данный оттенок. Каждый код начинается со знака решетки, за ним следует три пары знаков, характеризирующих интенсивность красного, зеленого и синего.</p><p>Данный код достаточно скопировать и подставить в параметры нужного вам тэга.</p><h2>Как посмотреть код страницы</h2><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/19591/439842.jpg' width="100%" loading=lazy></p><p>Если вы заинтересовались созданием веб-страниц, то вам наверняка будет интересно посмотреть HTML-код сайта, который вам нравится, или же того, который вы посещаете довольно часто.</p><p>Но как это сделать? Есть два способа, довольно простых и понятных. Первый - открыть нужную вам страницу и нажать сочетание <a href="/tips/zakrytie-vseh-okon-windows-kombinaciya-klavish-znaki-prepinaniya-s-kirillicei/">клавиш Ctrl</a>+U. В новом окне появится исходный код страницы, который вы сможете посмотреть и изучить.</p><p>Второй способ - нажать <a href="/different/pochemu-perestala-rabotat-levaya-knopka-myshi-chto-delat-esli-ne/">левую кнопку</a> мышки и выбрать в пункт «<a href="/security/ishodnyi-kod-brauzera-rassmatrivaem-vopros-o-tom-kak/">Исходный код</a>». Но все же рекомендуем вам воспользоваться первым способом, так как применение горячих клавиш намного проще и удобнее.</p><p>Отметим, что, читая код, вы также сможете просматривать комментарии к нему, прописываемые в тэге «Комментарий», который выглядит так: <! >. При этом сам комментарий пишется после <a href="/program/na-otpravlennom-soobshchenii-vosklicatelnyi-znak-podrobno-o-tom-chto/">восклицательного знака</a>. В браузере он не отображается. А пишется, в основном, для того, чтобы другие программисты и веб-дизайнеры смогли понять, что за блок информации находится ниже, зачем был указан тот или иной кусочек кода.</p><h2><b>Выводы </b></h2><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/19591/439834.jpg' width="100%" loading=lazy></p><p>Писать коды на HTML не так сложно, как может показаться на первый взгляд. Особенно если вы непритязательны и хотите создавать простенькие сайты, электронные учебники на <a href="/windows-7-xp/osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke-osnovy-html-dlya/">основе HTML</a> и т. п. Изучение основных тэгов и принципа разметки не займет много времени. Вам хватит даже пары дней, чтобы начать создавать собственные проекты.</p><p>Отметим, что если вы решили изучать <a href="/different/sql-operatory-zaprosov-k-dannym-strukturirovannyi-yazyk-zaprosov-sql/">данный язык</a> разметки, то будьте внимательны. Большинство проблем возникает именно из-за невнимательности: незакрытые парные тэги, неправильно прописанные параметры, опечатки - все это грозит обернуться ошибкой, которую вы можете достаточно долго искать. Но в целом изучать HTML-разметку страниц довольно интересно.</p> <p>Придумано множество языков, но <a href="/program/yazyk-html-dlya-nachinayushchih-osnovy-yazyka-web-programmirovaniya-html/">язык HTML</a> принадлежит к числу особенных и самых восстребованных. С ним связано множество других ключевых начинаний в программировании. Многое становится доступным, когда в сознании разработчика присутствует знание языка разметки - HyperText Markup Language (HTML).</p><p>В сущности, в HTML нет ничего сложного, и через несколько минут любой, самый далекий от программирования и интернета человек, выполнит создание HTML-страницы в блокноте. Пример, заслуживающий внимания, простота, действительно, доступная каждому.</p><h2>Общее описание</h2><p>Файл HTML - это одна страница сайта, хотя с этим можно поспорить, но то, что один файл составляет одну страницу, для начала понятно.</p><p>Файл HTML начинается с заголовка DOCTYPE, в котором указано, что тип <a href="/windows-7-xp/kak-vosstanovit-uteryannye-faily-na-kompyutere-kak-vernut/">данного файла</a> - HTML. Все элементы страницы (теги) указываются в угловых скобках. Каждая пара («<» и «>») включает в себя один тег HTML. Обычно <a href="/configuring-wi-fi/izmenenie-razmera-shrifta-v-html-kak-sdelat-krasivyi-shrift-v-html/">теги HTML</a> парные, то есть на каждый «tag» есть «/tag». Оба заключаются в угловые скобки. Есть теги одиночные, из них самый популярный «br/» - переход на следующую строку.</p><p>Самый большой тег в файле - это сам HTML, в который входят всего два тега: HEAD и BODY. В первом делаются различные описания, указываются ссылки на другие нужные странице файлы, могут присутствовать <a href="/dll-files/gotovye-skripty-php-poisk-windows-organizaciya-poiska-po-veb-stranice-na/">скрипты PHP</a> и JavaScript. Во втором записывается контент страницы. Также в виде тегов и скриптов.</p><h2>Простая HTML-страница</h2><p>Пример создания такой страницы указан ниже в статье. Рассмотрим его внимательно.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/41493/1725996.jpg' width="100%" loading=lazy></p><h2>Раздел HEAD</h2><p>Основное назначение - <a href="/configuring-wi-fi/tarifnyi-plan-vip-mts-opisanie-obshchie-pravila-dlya-vseh-opcii/">общее описание</a> страницы и общих скриптов, хотя последнее - достаточно относительное понятие. Обычно здесь придают существенное значение только двум вещам:</p><ul><li><a href="/dll-files/kak-bystro-utochnit-chastotnost-zaprosov-v-wordstat-chto-takoe/">ключевые слова</a> и описание страницы;</li><li>ссылки на другие файлы (*.css и *.js).</li> </ul><p>Для отображения контента страницы содержимое данного раздела имеет лишь косвенное значение, поскольку указывает: где-то в других файлах есть правила CSS для тегов и скрипты других языков.</p><p>HTML-страница имеет который отображается, когда посетитель подводит мышку к вкладке, где страничка открыта. Это <a href="/security/kak-vaifai-vliyaet-na-zdorove-cheloveka-wi-fi-neskolko-vazhnyh/">важный момент</a>, поскольку делает страницу существенно более презентабельной, проще сказать, подписанной читабельным текстом.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/41493/1726112.jpg' width="100%" loading=lazy></p><p>META-теги имеют важное значение в интернет-программировании вообще, но когда требуется создание HTML-страницы в блокноте, пример нежелательно загромождать лишними конструкциями.</p><p>Если к скриптам следует подходить, когда знания об HTML укрепятся, то на <a href="/security/chto-takoe-kaskadnaya-tablica-stilei-dobavlenie-stilei-ili-kak-podklyuchit/">каскадные таблицы</a> стилей следует обратить внимание незамедлительно. В файлах CSS приводятся, в частности, правила оформления тегов HTML.</p><h2>Раздел BODY</h2><p>Собственно, пример <a href="/tips/sozdanie-web-stranicy-s-pomoshchyu-html-primery-sozdaem-veb-stranicu-i-razmeshchaem-ee/">страницы HTML</a> - это и есть раздел BODY. Именно здесь содержится вся информация, весь контент страницы сайта. Вся информация представляется в виде тегов и скриптов, например вставки JavaScript-кода или кусочков PHP-программ.</p><p>Важно понимать, что пример <a href="/windows-10/fon-veb-stranicy-v-html-fonovaya-kartinka/">веб-страницы HTML</a> в браузере и тот же пример в <a href="/tv/kakie-programmy-nazyvayutsya-tekstovymi-redaktorami-tekstovye-redaktory-dlya/">текстовом редакторе</a>, в частности notepad, это далеко не одно и тоже. В первом случае мы имеем готовый HTML-текст, в котором все скрипты исполнены. Например, PHP отработал свою часть и сформировал вместо своего кода в нужных местах <a href="/tv/doctype-dlya-chego-i-kak-on-ustroen-znachenie-tega-doctype-zachem-on-nuzhen-i-kakoi/">нужные теги</a>. JavaScript тоже выполнил свою миссию, хотя о нем еще предстоит отдельный разговор.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/41493/1726114.jpg' width="100%" loading=lazy></p><p>HTML - это теги, а не скрипты. В конечном счете в браузере отображается только контент страницы, только ее теги. Никакого PHP-кода там нет.</p><p>JavaScript находится на особом положении, его забота - обслуживать страницу не только в момент загрузки (перегрузки), но и в моменты, когда страница находится в браузере посетителя, а тот изучает ее.</p><p>Простой пример (только раздел BODY) указан ниже.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/41493/1726008.jpg' height="510" width="470" loading=lazy></p><p>А в браузере посетителя он выглядит так, как показано далее.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/41493/1726009.jpg' height="442" width="395" loading=lazy></p><p>В коде не было указано, как должны выглядеть элементы, которые вывел браузер. Все видимое оформление находится в правилах CSS. В данном случае в файле Mcss/scPhpWordRW.css, на который была ссылка (см. самый первый пример страницы HTML).</p><p>В отличие от HTML, <a href="/configuring-wi-fi/kak-nastroit-vordpress-temu-pod-sebya-modificikaciya-css-temy-authentic-klassnyi-wp/">тема CSS</a> более простая, там весьма доступные правила и их количество невелико, когда пример создания HTML-страницы не требует ничего, кроме notepad. Все очень доступно для моментального освоения:</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/41493/1726012.jpg' width="100%" loading=lazy></p><p>Здесь показано, как просто описан тег scLogo_vDoc, причем это описание таково, что в нормальном состоянии тег отображает картинку vDoc-logo.png, а когда над ним находится мышка - отображается vDoc-logo-h.png.</p><h2>Структура описаний HTML</h2><p>Язык не предполагает како-либо структуры и понятие синтаксиса здесь весьма относительное. Здесь нет переменных, но есть масса возможностей. Принципиальная основа гипертекста в том, что существует элемент (тег) который обязательно имеет имя.</p><p>Имя, в случае парного тега, составляется из собственно имени (tagName) и угловых скобок («<» + tagName +«>»), если речь идет о начале тега, и «</» + tagName + «>», если записывается его конец.</p><p>Пример страницы HTML с описанием атрибутов расположен ниже в тексте.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/41493/1726027.jpg' width="100%" loading=lazy></p><p>Тег может иметь атрибуты, тогда они помещаются через пробел после имени тега до закрывающей угловой скобки «>». Атрибуты, если они есть у тега, записываются только в его начале. Содержанием тега считается то, что находится между началом тега и его концом.</p><p>HTML позволяет описывать блочные и <a href="/dll-files/vyravnivanie-strochnyh-elementov-css-centriruem-div-po-nizhnei-granice-stranicy/">строчные элементы</a>. Первые занимают определенную область в окне браузера, могут позиционироваться абсолютно, то есть в нужном месте области отображения HTML-страницы, и иметь конкретный размер.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/41493/1726116.jpg' width="100%" loading=lazy></p><p>Строчные элементы в общем случае отображаются одним потоком, то есть так, как были указаны в файле страницы, так и выводятся на экран. На отображение общего потока можно влиять, когда происходит загрузка страницы. На размещение, видимость и другие свойства блочных элементов можно влиять в любое время посредством JavaScript-кода.</p><p>Помимо простых элементов, HTML предлагает описывать таблицы и формы. Эти элементы очень востребованы в «повседневном сайтостроении».</p><h2>Описание таблицы: теги TABLE, TR, TD</h2><p>При помощи тега TABLE можно создать таблицу, указать некоторое количество рядов TR и в каждом ряду какое-то количество ячеек TD. В отличе от привычной табличной организации, вследствие особенностей HTML-разметки, табличная организация ограничивается данной декларацией, потому если разработчик желает иметь прямоугольную таблицу, в которой количество колонок по всем рядам одинаково, то он должен за этим следить самостоятельно.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/41493/1726118.jpg' width="100%" loading=lazy></p><p>Принципиальная позиция HTML: делать все, что указано, но ничего из того, что не понято. В некоторых случаях не столь важно количество колонок в каждой строке таблицы, но, если нужно выполнить объединение ячеек по вертикали или по горизонтали, придется посчитать все очень внимательно.</p><p>Пример страницы HTML с описанием простой таблицы наглядно показан в статье.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/41493/1726056.jpg' width="100%" loading=lazy></p><p>Здесь показана таблица размером три ряда на три колонки, причем в первом ряду вместо тега TD был использован тег TH - заголовок колонки. Особенного отличия эти два тега не имеют, но использовать первый вполне можно, чтобы отличить первый ряд таблицы, да и в CSS к TH можно прикрепить собственный стиль, что выгодно отличает его от остальных TD.</p><h2>Описание формы: теги FORM, INPUT</h2><p>Формы - это самая востребованная часть HTML-тегов. При помощи форм можно передавать информацию. Собственно, сама страница - это вывод информации, а вот форма - ее ввод.</p><p>Пример страницы HTML с описанием простой формы:</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/41493/1726069.jpg' width="100%" loading=lazy></p><p>Вариантов использования форм гораздо больше, но основные возможности таковы. Можно указать поля ввода, назначить им нужно оформление и обработчики для анализа вводимых пользователем данных. Можно указать скрытые поля и передавать со страницы фоновую информацию. Можно обозначить кнопки передачи информации, нажатие на которые инициирует процесс передачи сведений.</p><h2>Использование HTML</h2><p>Знать язык гипертекста - работы по любой специализации в области интернет-программирования, но если необходимо писать программы на PHP или JavaScript, то знать HTML + CSS нужно в совершенстве.</p><p>Язык PHP был обозначен в предыдущем примере. PHP работает на сервере, потому страница с этой формой улетела с сервера в браузер с заполненными полями. В частности, функция TestOnBlur, упомянутая в теге INPUT (обработчик события onblur), получила все параметры в виде текстовых полей.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/41493/1726122.jpg' width="100%" loading=lazy></p><p>В браузере работает JavaScript, и, чтобы правильно сработала кнопка отправки данных обратно на сервер, то есть конструкция: onclick=jQuery("#to").val("cart"), необходимо иметь представление не только о том, что такое jQuery, но и что такое #to, val, cart. Если более точно, необходимо знать основные теги HTML и <a href="/different/1s-predpriyatie-dopolnitelnye-moduli-pravila-sozdaniya-obshchih-modulei/">общие правила</a> применения к ним стилей CSS.</p><p>Этого вполне достаточно, чтобы быстро поднять свою квалификацию по любой специализации в области интернет-программирования.</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> </div> <div class="clear"></div> </div> </article> <div class="clear"></div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="widget-top"> <h4></h4> <div class="stripe-line"></div> </div> <div class="search-block-large widget"> <form method="get" action="/"> <button class="search-button" type="submit" value="Поиск"><i class="fa fa-search"></i></button> <input type="text" id="s" name="s" value="Поиск" onfocus="if (this.value == 'Поиск') { this.value = '';} " onblur="if (this.value == '') { this.value = 'Поиск';} " /> </form> </div> <div id="text-html-widget-22" class="text-html-box" style="text-align:center;"> </div> <div id="text-html-widget-21" class="text-html-box" style="text-align:center;"> <div id="rotaban_252588" class="rbrocks rotaban_9d0893f37def4380b5f6cdcfa4127be7"></div> </div> <div class="widget" id="tabbed-widget"> <div class="widget-container"> <div class="widget-top"> <ul class="tabs posts-taps"> <li class="tabs"><a href="#tab2">Новые</a></li> <li class="tabs"><a href="#tab1">Популярные</a></li> <li class="tabs"><a href="#tab3">Обсуждаемые</a></li> </ul> </div> <div id="tab2" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail"> <a href="/dll-files/planshety-samsung-samsung-galaxy-tab-otzyvy-o-planshete-instrukcii-obzor-samsung-galaxy/" rel="bookmark"><img width="110" height="75" src="/uploads/f29af3e328c0da364af82d035a63a386.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Samsung Galaxy Tab: отзывы о планшете, инструкции" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/dll-files/planshety-samsung-samsung-galaxy-tab-otzyvy-o-planshete-instrukcii-obzor-samsung-galaxy/">Samsung Galaxy Tab: отзывы о планшете, инструкции</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-05-24 15:44:08</span> </li> <li> <div class="post-thumbnail"> <a href="/dll-files/lg-q6-obzor-nedorogoi-kopii-flagmana-sravnenie-s-g6-stoit-li-pokupat-pochemu/" rel="bookmark"><img width="110" height="75" src="/uploads/0dda273240dc28ab18f4289a646a5e06.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="LG Q6 — обзор недорогой копии флагмана, сравнение с G6" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/dll-files/lg-q6-obzor-nedorogoi-kopii-flagmana-sravnenie-s-g6-stoit-li-pokupat-pochemu/">LG Q6 — обзор недорогой копии флагмана, сравнение с G6</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-05-11 21:19:58</span> </li> <li> <div class="post-thumbnail"> <a href="/configuring-wi-fi/kak-sdelat-filtr-v-excel-po-stolbcam-rasshirennyi-filtr-v-ms/" rel="bookmark"><img width="110" height="75" src="/uploads/d7d16366242c88e175e23e590b7a5fff.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Расширенный фильтр в MS EXCEL" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/configuring-wi-fi/kak-sdelat-filtr-v-excel-po-stolbcam-rasshirennyi-filtr-v-ms/">Расширенный фильтр в MS EXCEL</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> <li> <div class="post-thumbnail"> <a href="/different/kak-sdelat-filtr-v-excel-po-stolbcam-kak-v-excel-sdelat-filtr-na-kazhdyi/" rel="bookmark"><img width="110" height="75" src="/uploads/e8e86c7d58ebdcb8eab5f12dc011c88d.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Как в excel сделать фильтр на каждый столбец?" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/different/kak-sdelat-filtr-v-excel-po-stolbcam-kak-v-excel-sdelat-filtr-na-kazhdyi/">Как в excel сделать фильтр на каждый столбец?</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> <li> <div class="post-thumbnail"> <a href="/windows-7-xp/kak-sdelat-normalnuyu-tablicu-v-vorde-izmenenie-vneshnego-vida/" rel="bookmark"><img width="110" height="75" src="/uploads/4375c46e8ba611fceefcad512e7f0c05.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Как сделать нормальную таблицу в ворде" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-7-xp/kak-sdelat-normalnuyu-tablicu-v-vorde-izmenenie-vneshnego-vida/">Как сделать нормальную таблицу в ворде</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> </ul> </div> <div id="tab1" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail"> <a href="/tv/sozdat-glavnuyu-knopochnuyu-formu-pozvolyayushchuyu-otkryt-iz-nee-po-nazhatiyu-na/" title="Изменение элементов в кнопочной форме" rel="bookmark"><img width="110" height="75" src="/uploads/908da9dbda5f53d757768cd4a1733d07.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Изменение элементов в кнопочной форме" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/tv/sozdat-glavnuyu-knopochnuyu-formu-pozvolyayushchuyu-otkryt-iz-nee-po-nazhatiyu-na/">Изменение элементов в кнопочной форме</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-10/ispolnenie-ciklicheskih-algoritmov-na-baze-sistemy-kumir/" title="Исполнение циклических алгоритмов на базе системы "кумир"" rel="bookmark"><img width="110" height="75" src="/uploads/c35d8e0e24b932fcdc704e03a059b2ab.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Исполнение циклических алгоритмов на базе системы "кумир"" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-10/ispolnenie-ciklicheskih-algoritmov-na-baze-sistemy-kumir/">Исполнение циклических алгоритмов на базе системы "кумир"</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/program/ispolnitel-robot-prostye-komandy-cikly-i-usloviya-v-yazyke/" title="Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах" rel="bookmark"><img width="110" height="75" src="/uploads/a2076f48121ce4c15cf18f1bdb75dd7a.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/program/ispolnitel-robot-prostye-komandy-cikly-i-usloviya-v-yazyke/">Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-7-xp/cikly-s-usloviem-v-kumire-vetvlenie-v-yazyke-kumir-kumir-prostye-i/" title="Ветвление в языке кумир Кумир простые и составные условия" rel="bookmark"><img width="110" height="75" src="/uploads/483767e216279de0c95a497a1853e9f9.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Ветвление в языке кумир Кумир простые и составные условия" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-7-xp/cikly-s-usloviem-v-kumire-vetvlenie-v-yazyke-kumir-kumir-prostye-i/">Ветвление в языке кумир Кумир простые и составные условия</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-10/raspechatat-deleniya-ot-1-do-10-delenie-video-zolotaya-arifmetika/" title="Распечатать деления от 1 до 10" rel="bookmark"><img width="110" height="75" src="/uploads/8b3da587c8054658296956355bea3a52.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Распечатать деления от 1 до 10" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-10/raspechatat-deleniya-ot-1-do-10-delenie-video-zolotaya-arifmetika/">Распечатать деления от 1 до 10</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> </ul> </div> <div id="tab3" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Что лучше продавать через Инстаграм?' src='/uploads/a5e3f9793d62cd83899c30c290371103.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/program/kakie-tovary-otlichno-prodayutsya-cherez-instagram-prinosya/"> Что лучше продавать через Инстаграм? </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Маркетинг на страже экологии: примеры удачного партнерства брендов ради спасения окружающего мира' src='/uploads/5da7b5416b0c04007713b53197c9236c.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/tips/marketing-na-strazhe-ekologii-primery-udachnogo-partnerstva-brendov-radi/"> Маркетинг на страже экологии: примеры удачного партнерства брендов ради спасения окружающего мира </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Высококонтрастные темы оформления Windows' src='/uploads/c382b30421c5cf16bbad9d5312e961db.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/different/kak-otklyuchit-kontrastnyi-rezhim-v-windows-7-vysokokontrastnye-temy-oformleniya/"> Высококонтрастные темы оформления Windows </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Узнать какой порт usb 3.0. Как узнать, какой USB? USB и его версии' src='/uploads/9fdd1103e4a7335197228b8e2c527542.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/different/uznat-kakoi-port-usb-3-0-kak-uznat-kakoi-usb-usb-i-ego-versii/"> Узнать какой порт usb 3.0. Как узнать, какой USB? USB и его версии </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Несколько вариантов выключения компьютера под управлением Windows8 Как полностью выключить windows 8' src='/uploads/604da02db788c6365d223426da4224a8.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/dll-files/kak-nastroit-vyklyuchenie-kompyutera-neskolko-variantov-vyklyucheniya/"> Несколько вариантов выключения компьютера под управлением Windows8 Как полностью выключить windows 8 </a> </li> </ul> </div> </div> </div> <div id="ai_widget-5" class="widget ai_widget"> <div class='code-block code-block-14' style='margin: 8px auto; text-align: center; clear: both;'> <div style="text-align:center;"> <div id="quvosa1" style="height:500px;width:300px;" align="center"></div> </div> </div> </div> </div> </div> </aside> <div class="clear"></div> </div> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignleft"> © Copyright 2024, pcwe.ru - Портал о персональных компьютерах. </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Пролистать наверх"></div> <div id="fb-root"></div> <div class="essb_links essb_counters essb_counter_modern_bottom essb_displayed_sidebar essb_share essb_template_default-retina essb_112975927 essb_button_animation13 print-no" id="essb_displayed_sidebar_112975927" data-essb-postid="2015" data-essb-position="sidebar" data-essb-button-style="button" data-essb-template="default-retina" data-essb-counter-pos="bottom" data-essb-url="/" data-essb-twitter-url="/" data-essb-instance="112975927"> </div> <div align="center"> </div> <link rel='stylesheet' id='wp-subscribe-css' href='/wp-content/plugins/wp-subscribe-pro/assets/css/wp-subscribe-form.css' type='text/css' media='all' /> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/rating-form/assets/js/front.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "0", "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://pcwe.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "true", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "1", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "true", "lang_no_results": "\u041d\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432", "lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430" }; /* ]]> */ </script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/search.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/wp-subscribe-pro/assets/js/wp-subscribe-form.js'></script> <div class="dgd_overlay"></div> <link rel="stylesheet" id="essb-cct-style" href="/assets/styles1.css" type="text/css" media="all" /> </body> </html>