Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Ключевые понятия - CSS и HTML</a></li>

2 <li><a>Основная терминология HTML</a></li>

3 <li><a>Структура HTML-документа</a><ul><li><a>Самозакрывающиеся теги</a></li>

4 </ul></li>

5 <li><a>Создание страницы</a><ul><li><a>Выбор текстового редактора</a></li>

6 <li><a>Что такое index</a></li>

7 <li><a>Первая страница</a><ul><li><a>Компонент head</a></li>

8 <li><a>Абзацы и заголовки</a></li>

9 <li><a>Теги br</a></li>

10 <li><a>Что такое pre и hr</a></li>

11 </ul></li>

12 </ul></li>

13 </ul><p>Программирование веб-страниц требует от разработчика определенных познаний в области работы с гипертекстом. Наиболее распространенным языком скриптов является HTML (HyperText Markup Language, что в переводе значит "язык гипертекстовой разметки"). Браузеры получают HTML-документы от серверов при помощи протоколов HTTP/HTTPS, после чего производится интерпретация кода в интерфейс. Это все то, что отображается в браузере на дисплее устройства, если открыта та или иная веб-страница.</p>

14 <p>Далее предстоит поближе познакомиться с процедурой создания сайта на HTML. Представленная в статье информация больше ориентирована на новичков, которые еще не знакомы со скриптами, тегами и другими основами веб-разработки.</p>

15 <h2>Ключевые понятия - CSS и HTML</h2>

16 <p>Создать web страницу можно на HTML. Это язык, который задает структуру содержимого и его смысл, определяя контент (заголовки, абзацы, изображения и так далее). В процессе веб программирования может пригодиться CSS (Cascading Style Sheets) - каскадные таблицы стилей. Такое название получил язык презентаций. Он был создан специально для оформления внешнего вида контента. Примеры - использование цветов и шрифтов.</p>

17 <p>HTML и CSS независимы друг от друга. Это своеобразные дополнения. HTML-код всегда представляет содержимое, CSS - отвечать за внешнее оформление web страниц. Чтобы сделать качественную веб-страницу, нужно знать оба этих языка.</p>

18 <p>Теперь можно изучить несколько ключевых определений. Они помогут создать первую веб-страницу на рассматриваемом языке:</p>

19 <ol><li>Элемент. Это то, что указывает на принципы определения структуры и содержимого объектов на веб-странице. Некоторые из них могут включать в себя несколько уровней заголовков. Идентифицируются элементы при помощи угловых скобок, внутри которого задаются их имена.</li>

20 <li>Тег. Тег - наиболее распространенный компонент. Используется для форматирования содержимого документа. Заключаются в угловые скобки. В основном для работы с тегами необходимо использовать соответствующие открывающие и закрывающие теги. Первые помечаются как <>, вторые - как </>.</li>

21 <li>Атрибут. Выступает в качестве свойства, применяемого для предоставления дополнительной информации о компоненте или теге. Наиболее распространенный атрибут - это id. Он позволяет идентифицировать элемент на странице. Определяется данный объект языка в открывающем теге после имени компонента. Включает в себя "название" и значение.</li>

22 </ol><p>Запись < a href = “http://site.com”> Site Show </a> - это компонент <а> с атрибутом href. Выше можно увидеть пример описания программного кода будущей веб-страницы. Она будет формироваться на основании подобных конструкций.</p>

23 <h2>Структура HTML-документа</h2>

24 <p>Для формирования собственной web страницы достаточно поверхностных знаний HTML, а также CSS. Без второго языка тоже можно сделать страничку, но она будет выглядеть примитивно. Перед началом разработки необходимо познакомиться со структурой HTML-документа.</p>

25 <p>Такой файл представляет собой простой текстовый документ, сохраненный со "специальным" расширением. Оно называется .html. Для того чтобы сделать web страницу, необходимо подобрать текстовый редактор "под себя".</p>

26 <p>Все HTML-документы состоят из разных компонентов, но имеют примерно одинаковую структуру. Она включает в себя обязательные элементы и декларации:</p>

27 <ul><li>< !Doctype html >;</li>

28 <li>< html >;</li>

29 <li>< head >;</li>

30 <li>< body >.</li>

31 </ul><p>Этих тегов хватит для создания простейшего веб сайта. Разработчику необходимо об этих тегах запомнить следующее:</p>

32 <ol><li>!Doctype - это объявление типа документа. Тег, размещаемый всегда в самом начале HTML-документа. Он сообщает браузерам о том, какая версия языка применяется.</li>

33 <li>Внутри тега <html> компонент <head> будет определять верхнюю часть документа, включая всевозможные метаданные (сопроводительную информацию о web page). Информация из head не будет отображена непосредственно в браузере на странице. Вместо этого он может поддерживать название документа. Оно отобразится в строке заголовка окна браузера, различные ссылки на внешние файлы и иные полезные метаданные.</li>

34 <li>Body - тег, применяемый для формирования "тела" веб страницы. Внутри него находится основной текст документа.</li>

35 </ol><p>Выше - пример создания элементарной веб-странице на рассматриваемом ЯП. Этот код наглядно объясняет структуру HTML-документов.</p>

36 <h3>Самозакрывающиеся теги</h3>

37 <p>Когда программист решил написать собственную веб-страницу на HTML, ему необходимо помнить, что все теги должны открываться и закрываться. Пример - заголовки h1, h2, …, hn.</p>

38 <p>Некоторые теги в рассматриваемом языке являются самозакрывающимися. Для них не требуется указывать закрывающий компонент. Типичными тегами соответствующего вида являются?</p>

39 <ul><li>br;</li>

40 <li>embled;</li>

41 <li>img;</li>

42 <li>hr;</li>

43 <li>link;</li>

44 <li>param;</li>

45 <li>input;</li>

46 <li>wbr;</li>

47 <li>source.</li>

48 </ul><p>Такие элементы делают исходный код более красивым, компактным и читабельным. Самозакрывающиеся компоненты сводят к минимуму вероятность ошибок при запуске готового программного обеспечения.</p>

49 <h2>Создание страницы</h2>

50 <p>Вся ранее предложенная информация - это помощь новичкам, которая пригодится при веб-разработке. Далее предстоит написать собственную страничку на HTML. Предложенные алгоритмы объяснят пошагово, как создается веб-сайт на рассматриваемом языке.</p>

51 <p>Чтобы создался исходный файл с расширением .html, потребуется:</p>

52 <ul><li>текстовый редактор;</li>

53 <li>подготовленный исходный код;</li>

54 <li>браузер.</li>

55 </ul><p>Остальные моменты зависят от конкретного проекта. Перечисленных компонентов будет достаточно для реализации элементарной страницы в Интернете.</p>

56 <h3>Выбор текстового редактора</h3>

57 <p>Один из самых важных этапов - это выбор текстового редактора. От соответствующего момента зависит организация всего процесса разработки. Вот наиболее распространенные варианты редакторов текста:</p>

58 <ol><li>"Блокнот". Стандартная и элементарная программа Windows. Не имеет никаких дополнительных инструментов.</li>

59 <li>Notepad++. Представляет собой более продвинутую и совершенную версию службы "Блокнот". Отличительной его чертой является подсветка HTML-синтаксиса. Данный текстовый редактор является одним из лучших, особенно для новичков.</li>

60 <li>Sublime Text. Кроме подсветки имеет множество встроенных опций. Пример - автодополнение, самостоятельные отступы. Выделяется функциями автоматического закрывание тегов. Больше подходит тем, кто уже имел дело с рассматриваемом языком.</li>

61 </ol><p>Далее работа будет опираться на Notepad++. Предварительная подготовка требует от разработчика создания документа index.html. В нем будет осуществляться дальнейшая работа.</p>

62 <h3>Что такое index</h3>

63 <p>Лист index.html - это важный компонент. Все страницы в Сети обычно указываются кратко, без лишних файлов в самом конце. В этом случае браузер будет самостоятельно заходить в папку сайта и определять файл, необходимый для демонстрации. Если index отсутствует, интернет-обозреватель покажет список всех файлов, лежащих внутри.</p>

64 <p>Index - это традиционное название документа, который используется в виде индекса для каталога веб-сайта.</p>

65 <h3>Первая страница</h3>

66 <p>Ниже - пример простейшего сайта на рассматриваемом языке:</p>

67 <p>Если обработать соответствующий код, на экране в браузере появится такая картина:</p>

68 <p>Чтобы задать подпись вкладки вместо "Название страницы" потребуется указать его имя. Для этого используется title. Далее каждый компонент кода будет изучен более подробно.</p>

69 <h4><em>Компонент head</em></h4>

70 <p>"Голова" документа включает в себя информацию для:</p>

71 <ul><li>поисковых роботов;</li>

72 <li>браузерных счетчиков.</li>

73 </ul><p>Она поддерживает служебные данные, а также разнообразные ключевые слова. Кроме title пользователь ничего из написанного здесь не увидит.</p>

74 <p>Особое внимание необходимо уделить meta. Этот компонент указывает на кодировку, в которой будет интерпретироваться исходный документ.</p>

75 <p>Каждый вкладываемый документ рекомендуется писать с отступом (при помощи tab или табуляции). Этот прием помогает формировать более понятную, четкую и читабельную структуру исходного документа. Если отступы не ставить, то браузер информацию поймет. Разработчику без них будет проблематично разобраться в исходном коде проекта.</p>

76 <h4><em>Абзацы и заголовки</em></h4>

77 <p>Каждый сайт имеет различные заголовки и абзацы. Они помечаются в коде особым образом:</p>

78 <ol><li>H1 - заголовок первого уровня. Выделяется браузером жирным шрифтом 24 пункта. Это главный заголовок на странице. Обычно он отражает название веб-портала. С его помощью поисковые роботы проводят идентификацию проекта.</li>

79 <li>H2…Hn. - заголовки второго уровня и так далее до n-уровня. Заголовок второго уровня обычно меньше - 16 пунктов. Так помечаются основные крупные разделы сайта.</li>

80 <li>P - абзацы. Браузер будет автоматически добавлять расстояние между абзацами. Каждый из них пишется на новой строчке.</li>

81 </ol><p>Выше - наглядный пример работы с соответствующими компонентами.</p>

82 <h4><em>Теги br</em></h4>

83 <p>Это разрывы. Они указывают на факт переноса информации на новую строку. Такие элементы выступают в качестве одиночного. Они не требуют от разработчика закрытия, а также ничего не содержат.</p>

84 <h4><em>Что такое pre и hr</em></h4>

85 <p>Так помечается предварительное форматирование текста. Обычно для этого используется Coutier.</p>

86 <p>Hr указывает на разрыв. Он не является парным, поэтом не требует закрытия. Применяется для разделения нескольких разных по смыслу текстов. Иногда служит помощником визуального оформления странички.</p>

87 <p>Теперь понятно, как создать веб-страницу HTML.<a>Здесь</a>можно увидеть еще один наглядный пример процесса. Лучше и быстрее разобраться с освоением темы помогут специализированные дистанционные курсы. На них с нуля научат составлять веб-сайты на HTML и применять CSS-стили.</p>

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