Что представляет собой документ написанный на языке html

Что такое HTML язык и с чем его едят..

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре — это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые «знают» стандартные команды html языка, и «пережевывая» их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер — составитель документа.

Теперь о командах — их называют дескрипторами, но чаще — тегами.

Вернемся к нашей первой страничке.. итак мы написали:

Привет мир.

Меня зовут Карлсон, это моя первая страничка!

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

Так что же мы написали? и как это читает браузер?

— начало документа.. опять работы привалило..
— смотрим словарик английского переводим «голова» …в голове моей опилки не беда!! . здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
— «название» значит.. это в шапке окна нужно написать его название:
Моя первая страничка — опять чайник тренируется..
— все название закончилось.. можно идти дальше..
— ага и в голове кроме названия больше никаких вздорных мыслей не держим..
— «тело» документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир. — как мило! Достали уже.
— переносим текст на следующую строчку.. я даже догадываюсь что в ней будет.
Меня зовут (здесь Ваше имя), это моя первая страничка! — ну да так и есть.. ничего пооригинальнее придумать не могут..
— что всё что ли? Больше ничего не отображать?
— ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег то обязательно должен быть и закрывающий

Хотя есть и исключения как например у нас тег — он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой «Меня зовут..» и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку «обновить»)

2) Все документы должны иметь вот такой шаблон кода:

— начало документа
— начало головы
— закрытие головы
— начало тела
— закрытие тела
— конец документа

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

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

Если писать, например, так:

То получится белиберда, которая в голове не укладывается, «большой» уже закрыт, а из него «торчит» «маленький», который заперт в «среднем», а «содержание» рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

Полезные советы:

При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

При написании кода советую придерживаться «хорошей манере письма», то есть писать теги «лесенкой» по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:

Привет мир.

Меня зовут Карлсон, это моя первая страничка!

Значительно легче, чем так:

Привет мир.

Меня зовут Карлсон, это моя первая страничка!

И уж тем более чем вот так:

Привет мир.
Меня зовут Карлсон, это моя первая страничка!

Хоть это и дело привычки.. всё же лучше привыкнуть писать «разборчиво».

Тема 4. Язык гипертекстовой разметки документов html

Язык HTML (язык гипертекстовой разметки) является основой создания Web-страниц, хранящихся в отдельных файлах (документах), поэтому Web-страницы можно называть и HTML-документами. Множество взаимосвязанных между собой таких HTML-документов образуют Web-сайт. Разместив такой Web-сайт на одном компьютере, настроенном как сервер, он становится доступным для просмотра на других компьютерах, находящихся с компьютером-сервером в одной сети. По такому принципу и реализован просмотр информации на различных сайтах в Интернет. Документ, написанный на языке HTML, представляет собой текст, в который вставлены инструкции по обработке, называемые тэгами. Тэги помогают программе просмотра разобраться, каким шрифтом и как должен быть отформатирован на экране текст с заголовком, где в тексте должны быть вставлены рисунки и таблицы и многие другие элементы, позволяющих качественно оформить HTML-документ. С помощью тэгов формируются связи с другими Web-сайтами и ресурсами Интернета. Текст с тэгами называется исходным кодом. Просмотреть готовый документ, написанный на языке HTML, можно в программах просмотра (Microsoft Internet Explorer, Netscape Navigator и т. д.), называемых браузерами. Там мы уже не увидим исходного кода, а увидим готовый отформатированный документ с текстом, со вставленными рисунками, таблицами и т. д. Браузер Microsoft Internet Explorer, с которым мы будем работать, входит в состав операционной системы WINDOWS. Основная задача браузера – по запросу пользователя найти требуемый документ в сети и без искажений отобразить его. Сначала браузер анализирует инструкции, написанные на языке HTML, а затем, пользуясь этими инструкциями, отображает информацию, находящуюся на Web-странице. Отсюда вывод – для создания собственных качественных Web-страниц необходимо знание языка HTML. Существует множество редакторов Web-страниц. Однако, при создании HTML-кода эти редакторы в некоторых случаях вставляют избыточный код, а иногда просто не удается добиться именно того результата, который необходим. Поэтому для лучшего понимания и освоения языка HTML, при создании Web-страниц мы будем пользоваться обычным текстовым редактором БЛОКНОТ, также входящим в состав операционной системы WINDOWS.

4.1. Структура html-документа

Тэги – это определенные последовательности символов, заключенные между знаками “<” и “>”. Символ “<” обозначает начало тэга, а символ “>” – конец тэга. Большинство тэгов парные и второй тэг прекращает действие первого. Наименования тэгов могут быть написаны в любом регистре как заглавными символами, так и строчными. Все, что заключено между тэгами “” и “” является HTML-документом. Любой HTML-документ состоит из двух частей. Первая часть – заголовок, который находится между тэгами “” и “”. Вторая часть – тело документа, располагаемое между тэгами “” и ””. Таким образом, структура любого HTML-документа выгладит следующим образом: Заголовок документаТело документа В заголовок может входить тэг “Тело документа Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого документа, поэтому он должен быть кратким и отображать его суть Тело документа, заключенное между тэгами “” и ””, в простейшем случае представляет собой обыкновенный текст. В листинге 1.1 представлен первый простейший HTML-документ. Обычно HTML-документ заключен между парными тэгами html Листинг 1.1 При сохранении листинга 1.1, созданного в текстовом редакторе БЛОКНОТ, нужно предлагаемое расширение файла txt изменить на htm или html. Если дважды щелкнуть левой клавишей мыши по такому файлу, то он автоматически раскроется в браузере и буде иметь вид, представленный на рисунке 47. Рисунок 47. Результат просмотра в браузере файла, приведенного в листинге 1.1. Один из парных тэгов без косой черты называется стартовым. Такие тэги могут иметь параметры (атрибуты), которые уточняют правила отображения содержимого, расположенного между стартовым тэгом и закрывающим тэгом (с косой чертой). Чаще всего параметр представляет собой пару “наименование параметра=значение”. Рассмотрим простой пример. Параметр “bgcolor” в тэге “”позволяет задавать цвет фона, на котором буде отображаться содержимое HTML-документа. Например, если мы хотим использовать зеленый фон, то необходимо применить следующую конструкцию: Все текстовые значения параметров обычно заключаются в двойные или одинарные кавычки. Ниже приведены остальные параметры, используемые в тэге “”.

• Параметр “background” дает возможность использовать в качестве фона какое-либо графическое изображение. В качестве значения данного параметра в кавычках нужно указать путь к файлу с изображением.
• Параметр “text” задает цвет шрифта, которым будет отображаться текстовое содержимое HTML-документа.
• Параметр “link” позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое HTML-документа.
• Параметр “vlink” задает цвет гиперссылок, которые пользователь уже просматривал в текущем сеансе работы.
• Параметр “alink” определяет, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.

HTML

HTML (HyperText Markup Language, язык гипертекстовой разметки) — стандартный язык разметки документов в Интернете. На Фэндоме редакторы могут использовать как HTML, так и викиразметку. Несмотря на то, что последнюю применять предпочтительнее, она так или иначе преобразуется в HTML парсером.

Важно отметить, что при использовании HTML на Фэндоме нет необходимости использовать некоторые теги ( html , head и body ), поскольку они добавляются MediaWiki автоматически.

• 1 Использование
• 2 Описание
• 3 Характеристика
  • 3.1 Теги
    • 3.1.1 Атрибуты

    Использование [ ]

    Рассматривая HTML, стоит выделить два уровня его использования:

    • На всей странице — если просмотреть исходный код любой страницы на Фэндоме с помощью инструментов разработчика, то можно увидеть, что она использует HTML. В данном случае можно найти ранее написанные теги html, head и другие, однако для обычных пользователей они практически не представляют никакого интереса.
    • В редакторах — при изменении страниц можно использовать HTML для модификации отображения содержимого (данная возможность используется почти на каждом проекте).

    Описание [ ]

    Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Изначально HTML являлся приложением SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки) и при этом был проще его, а также позволял использовать гипертекст, то есть ссылки.

    Со временем HTML приобретал новые возможности (поддержка мультимедийных элементов, форм и т.д.), в итоге став практически стандартом для создания web-страниц. Этому способствовала и относительно невысокая сложность языка, и его активное продвижение. На данный момент актуальной версией HTML является HTML5, который применяется на Фэндоме.

    Характеристика [ ]

    HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. HTML достаточно «спокойно» относится к неправильному использованию разметки. Например, если в тексте есть два открывающих тега и лишь один закрывающий, это не приведёт к тому, что документ не будет отображаться (но, скорее всего, внешний вид страницы будет не таким, каким был задуман).

    Как уже было сказано ранее, актуальной версией языка является HTML5 (англ. HyperText Markup Language, version 5). Его разработка которого началась ещё в 2004 году, а его публикация была произведена 28 октября 2014 года. Целью разработки HTML5 является улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости и удобочитаемости кода для человека.

    В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы , и , а также возможность использования SVG и математических формул. Кроме того появились теги для формирования структуры страницы — , , , и т. д. Одновременно с этим и были признаны устаревшими (это означает, что стоит отказаться от их использования, так как поддержка этих элементов может быть прекращена в любой момент).

    Отдельного внимания заслуживает связь HTML и CSS, так как эти две технологии связаны между собой. Изменение дизайна страниц практически невозможно без применения CSS: даже простейшее изменение цвета требует добавления некоторого стиля.

    Теги [ ]

    Теги (также Дескрипторы) — важный элемент разметки при редактировании, придаёт словам или предложениям определённые особенности. Общий синтаксис написания тегов следующий:

    Как видно из примеров, существуют два вида тегов: одиночные и парные. Одиночный тег используется самостоятельно, а парный чаще всего служит для включения внутрь себя текста (в том числе и других тегов). Также при использовании тегов важно соблюдать следующие правила:

    • Если вы используете теги внутри тегов, то их следует правильно закрывать: содержимое одного тега не должно «пересекаться» с другим. Например, конструкция
      _{Тут текст.}

      написана правильно и не вызовет ошибок.

    • Не забывайте закрывать все теги (в этом особенно помогает подсветка в классическом исходном коде);
    • Все атрибуты нужно помещать в двойные (желательно) или одинарные кавычки;
    • Теги можно писать как прописными, так и строчными буквами. Тем не менее рекомендуется задавать их строчными буквами и не использовать разные варианты написания в рамках одной страницы;
    • Между атрибутами можно добавлять переносы строк, однако это не рекомендуется;
    • Использование неизвестных или недоступных на Фэндоме тегов приведёт к тому, что они будут показаны как обычный текст.

    Атрибуты [ ]

    В HTML используется большое количество атрибутов, которые изменяют свойства элементов. В целом их можно вынести в три основные группы:

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

    Также существует несколько глобальных атрибутов, которые используются вместе с CSS:

    • style — позволяет задать стиль для элемента непосредственно на странице;
    • class — задает класс элемента (в дальнейшем можно изменить оформление на страницах MediaWiki);
    • id — по своему принципу похож на class, но задаёт элементу уникальный идентификатор.

    Доступные теги [ ]

    Ниже приведёт список всех тегов, которые доступны во время редактирования статей.

    Среди них наиболее часто используемыми (и при этом не имеющих аналогов в викиразметке) являются следующие теги:

    • — является универсальным блочным элементом и предназначен для группирования элементов страницы с целью изменения вида содержимого через стили. Как и при использовании других блочных элементов, содержимое тега всегда начинается с новой строки, после него также добавляется перенос строки (если не изменить это поведение с помощью CSS, что не рекомендуется делать).
    • — предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Менее универсален, чем .
    • — несмотря на то, что тег считается устаревшим, его использование пока что является наиболее простым способом разместить текст по центру страницы. В качестве замены рекомендуется производить выравнивание с помощью CSS.
    • — данный элемент служит для переноса строк, при этом не добавляя отступ между строками. Часто используется для форматирования страниц.
    • — используется для отображения строк текста как фрагментов кода. Обычно браузеры отображают содержимое тега как моноширинный текст.
    • — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
    • — данный элемент используется для выделения цитат на странице. Текст внутри тега отображается как выровненный блок с отступами.
    • — использование комментариев в исходном коде страницы помогает выделить те места, которые необходимо изменить. Для обычных пользователей они не будут видны.

    Сравнение с викиразметкой [ ]

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

    ---

    удобнее указать нужный класс, чем для его аналога в викиразметке).

    Ниже приведены примеры фрагментов текста в html и викиразметке:

    * Элементы
    * Маркированного
    * Списка

    # Элементы
    # Нумерованного
    # Списка

    Заголовок

    колонка 1	колонка 2

    Также каждому заголовку раздела соответствует свой тег для = Заголовка с одним тире =, для == Заголовка с двумя == и т.д. вплоть до .

    Языки разметки и программирования
    Основные	HTML • Викиразметка (Теги)
    Специализированные	CSS • JavaScript • Lua • Разметка фильтра злоупотреблений
    Для работы с ботами	C Sharp/ Go • Microsoft .NET • PHP • Python • См. также: устройство и технология википроектов и участников

    Программный код HTML: описание и особенности

    

    HTML – стандартизированный язык разметки. С его помощью можно создавать веб-страницы и приложения для браузеров. Данный язык программирования пользуется спросом как у новичков, так и у более опытных разработчиков. Он является ключевым при написании сайтов и интернет-магазинов.

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

    Ключевые понятия: CSS и HTML

    Веб разработка обычно включает в себя использование не только HTML. Она предусматривает навыки работы с CSS. Данные понятия являются ключевыми в изучаемой теме:

    1. HTML – это HyperText Markup Language или язык разметки гипертекста. Он отвечает за формирование структуры содержимого и его смысл, определяя контент на странице: заголовки, абзацы, картинки.
    2. CSS – Cascading Style Sheets или каскадные таблицы стилей. Язык презентаций, который сформирован для оформления внешнего вида контента. Это «язык стилей».

    HTML и CSS не являются конкурирующими в плане создания website. Данные языки выступают самостоятельными и независимыми друг от друга. Обычно они используются в сочетании. HTML представляет содержимое, а CSS отвечает за непосредственное оформление.

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

    Основы гипертекстового языка

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

    Создавать такие документы можно в обычном «Блокноте» Windows или при помощи специализированных текстовых редакторов: Visual Studio Code, Notepad++ и так далее.

    HTML-документ обладает определенной структурой. Она включает в себя:

    • дерево элементов кода;
    • текст.

    Далее предстоит изучить структуру и особенности HTML-документа. Независимо от того, какой будет веб программа, ее «внутренний состав» будет опираться на определенный шаблон. Зная его, пользователь сможет достаточно быстро создать свое первое приложение на языке гипертекстовой разметки.

    Терминология языка

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

    1. Элемент. Это объект, который указывает на правила и принципы определения структуры и содержимого компонентов на странице. Некоторые из них могут включать в свой состав несколько уровней подзаголовков, абзацев. Задается при помощи угловых скобок. Внутри них пишется имя элемента.
    2. Тег. Тег – элемент, используемый для форматирования содержимого документа. Заключается тег в угловые скобки. Может быть открывающим и закрывающим. Первый вид тега помечается как <>, второй – как .
    3. Атрибуты. Это свойства, применяемые для предоставления дополнительных данных о компонентах и тегах. Самым распространенным тегом является ID. С его помощью на веб-странице осуществляется идентификация элементов. Определяется атрибут в открывающем теге после имени компонента. Состоит из «названия» и присваиваемого значения.
    4. Открывающий тег – показывается, где начинается элемент.
    5. Закрывающий тег – образовывается путем добавления к записи знака «слеш». Он ставится перед именем элемента в программном коде. Между открывающими и закрывающими тегами располагается содержимое.
    6. Контент – содержимое объекта программного кода. То, что находится между тегами.

    Парсинг в HTML начинается до того, как веб страница будет полностью загружена в браузер. Интернет-обозреватель обрабатывает HTML-документ последовательно, с самого начала. Параллельно осуществляется обработка CSS и соотношение таблиц стилей с элементами on pages.

    

    Выше – пример элемента a с атрибутом href.

    Компоненты структуры

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

    Могут встречаться иные элементы структуры. Они делают исходный код of page более совершенным и функциональным. Далее различные элементы и теги будут изучены подробнее. Эта информация поможет создавать различные интернет-страницы и веб-приложения.

    

    Выше – пример простейшей разметки HTML-документа. Это наглядный пример того, как выглядит исходный код в виде тегов и компонентов. Обязательные составляющие – это body и head.

    !Doctype – тег, отвечающий за объявления типа документа. Он всегда размещается в самом верху (начале) HTML. Сообщает браузерам о том, какая версия языка гипертекстовой разметки будет использоваться. Эта информация отвечает за корректность отображения проекта.

    Отношения и связи

    Общий вид HTML и компоненты, которые обязательно содержит соответствующий файл, уже были кратко рассмотрены. Далее необходимо каждый объект кода изучить более детально. Перед этим рекомендуется запомнить особенности отношений и связей. Они устанавливаются между множественными вложенными компонентами. Выделяются следующие основные «родственные связи»:

    1. Предок – элемент, который хранит в себе другие элементы. В предложенном ранее примере можно увидеть, что им выступает тег < html >. < Body >является предком для h1, span, nav, p, li li и так далее.
    2. Потомок – тег, который расположен в пределах одного или более типов элементов.
    3. Родительский элемент – элемент, который связан с другими компонентами более низкого уровня. В структурном дереве он расположен выше. Предложенный ранее пример в качестве «родителя» устанавливает html для head и body, а p – исключительно для span.
    4. Дочерний элемент – компонент, который подчинен непосредственно другому, элементу более высокого уровня.
    5. Сестринский компонент – тег, который имеет общего «родителя». Это теги одного и того же уровня.

    Теперь элементы HTML, а также стандартный синтаксис и структура документа для будущей веб-страницы более понятны. Каждый ранее представленный тег будет изучен более подробно.

    Компонент HTML

    HTML – тег, который выступает в качестве корневого. Все остальные теги располагаются внутри него. Имеет открывающий и закрывающий теги в своем составе. Все, что расположено за пределами < HTML >браузером в качестве части HTML-кода восприниматься не будет.

    Может быть глобальные атрибуты и параметр manifest. С его помощью можно указать путь к документу кэша манифеста.

    Head

    Структурная единица head – это техническая информация о странице. Здесь содержатся такие данные как:

    • ключевые слова для поисковых машин;
    • кодировка;
    • описание;
    • заголовок и так далее.

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

    Head поддерживает работу только с глобальными атрибутами.

    Title

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

    Длина такого заголовка не может быть более 60 символов. Текст обычно включает в себя предельно полное описание содержимого веб-проекта. Работает с глобальными атрибутами.

    Meta

    При написании сайта на HTML5 можно включить в синтаксис Head тег meta. Он не является обязательным. С его помощью удается создавать описания содержимого сайта, а также ключевые слова для поисковых машин. Здесь же прописывается автор (создатель) исходного кода и иные свойства метаданных.

    Head может включать в себя несколько meta. Связано это с тем, что каждый такой компонент в зависимости от задействованных атрибутов несут в себе ту или иную основную информацию «для поисковиков»:

    meta name=»description» content=»Описание содержимого страницы»

    Meta поддерживает следующие атрибуты:

    

    Может работать с глобальными атрибутами.

    Style

    Создать исходный код на HTML5 не слишком трудно, если познакомиться с его основными компонентами. В виде необязательной составляющей в head выступает style. Этот объект отвечает непосредственно за стили. Они написаны на CSS.

    Общий исходный код может включать в себя сразу несколько style. Соответствующий объект может включать в себя описание особенностей форматирования всей веб-страницы или только ее части.

    

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

    Link

    Link – это необязательная структурная единица. Она позволяет создать стиль для исходного файла. Выступает аналогом CSS. Созданные при помощи link объекты могут быть записаны в отдельный документ с расширением .css.

    Подключается link несколькими способами:

    • операция может быть проведена при помощи директивы @import url;
    • через тег link.

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

    Script

    Стандартный исходный код, написанный кратко и сжато, может не включать в свой состав script. Этот объект является необязательным. С его помощью в HTML5 начинается подключение дополнительных сценариев.

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

    Значение атрибута	Описание/ содержание / принимаемые системой значения
    Charset	Кодировка символов в тексте
    @sync	Ссылка на то, что сценарий будет работать асинхронно с остальной частью веб-страницы.
    Defer	Интерпретация сценариев откладывается до тех пор, пока отображение на пользовательском устройстве не будет завершено.
    Scr	Операция, которая указывает на месторасположение файла со сценарием. Значением атрибута выступает URL-адрес документа, включающего в себя JavaScript-приложение.
    Type	Используется для того, чтобы объявить используемый язык сценария.
    Nonce	Операция, обеспечивающая безопасность. Блокирует внедрение межсайтового скриптинга. Устанавливает правила и принципы использования встроенных скриптов. Для этого используются nonce-значения и хэши.
    Crossorigin	Отвечает за использование CORS при загрузке внешних скриптов. Может быть:anonymous – перед непосредственной загрузкой скрипта в кроссдоменный запрос браузер будет автоматически добавлять origin без передачи параметров доступа;use-credentials – добавляет заголовок origin с указанием параметров доступа.

    Выше – таблица, которая поможет с формированием тела script. Новичкам с соответствующим объектом обычно работать не приходится.

    Body

    Сделав Head, каждый разработчик должен приступить к формированию «тела» исходного кода. Соответствующий тег имеет обозначение body. Здесь начнется обработка введенной информации системой для отображения «картинки» в браузере.

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

    Атрибут	Значение или описание
    Onafterprint	Событие, которое срабатывает после отправки страницы на печать или после того, как окно печати будет закрыто.
    Onfromprint	Срабатывает перед тем, как отправить страницу на печать.
    Onunload	Начинает работать, если сайт не загрузился по тем или иным причинам. Активируется при закрытии браузерного окна.
    Onpageshow	Активируется при переходе клиента на сайт или после реализации onload.
    Onpagehide	Срабатывает, если клиент закрывает страницу через навигацию, кликнув по специальной кнопке или обновив сервис, заполнив электронную форму.
    Online	Возобновление соединения с интернетом.
    Onoffline	Прерывание интернета.
    Onhashchange	Активируется при изменении hash-части URL.
    Onbeforeunload	Активируется, если клиент перешел на другую страницу или кликнул по «Закрыть окно». Дает возможность отобразить сообщение в диалоговом окне подтверждения. Уточняет, действительно ли клиент хочет закрыть текущий веб-сервис.

    Выше – список атрибутов упомянутого компонента, с которыми можно повстречаться при разработке программного кода.

    Выбор редактора

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

    Формирование файлов .html допускается в любом текстовом редакторе. Наиболее распространенными выступают:

    1. «Блокнот». Это стандартная служба Windows. В ней «просто пишется текст». Dtd html 4 и другие фрагменты кода никак не выделяются.
    2. Notepad++. Более совершенная, «обновленная» версия «Блокнота». Профессиональный инструмент, который поддерживает подсветку синтаксиса. Рекомендован всем новичкам.
    3. Sublime Text. Профессиональный редактор текста. Один из лучших для разработки. Выделяет doctype html public и другие синтаксические конструкции языка гипертекста. Имеет автодополнение и самостоятельно расставляет отступы. Рекомендован более уверенным в себе разработчикам.

    Новичкам рекомендуется начинать разработку в «Блокноте» или Notepad++. Лучше разобраться с HTML и CSS помогут дистанционные компьютерные курсы.

    Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus !

    Читать:

    как установить сервисы гугл плей на мейзу