В конце 1980-х годов британский ученый-компьютерщик Тим Бернерс-Ли разработал основные компоненты Всемирной паутины. Будучи сотрудником Европейской организации ядерных исследований (CERN), он сначала посвятил себя внутреннему проекту, который должен был обеспечить межстрановой обмен информацией между лабораториями CERN, расположенными частично во Франции и частично в Швейцарии. В качестве основы для планируемой сетевой инфраструктуры Бернерс-Ли использовал гипертекст — текстовую форму, передаваемую с помощью перекрестных ссылок (гиперссылок) и написанную с использованием языка разметки. Он был одним из разработчиков этого языка разметки, известного как Hypertext Markup Language (HTML).
Вместе со многими другими компонентами, такими как протокол передачи данных HTTP, URL, браузеры и веб-серверы, HTML до сих пор является основой глобальной цифровой сети. Это означает, что для разработчиков изучение этого веб-языка является обязательным. Чтобы помочь вам познакомиться с принципами работы языка разметки и облегчить начало работы, мы обобщили самые важные принципы и советы для начинающих в этом учебнике по HTML.
- Что такое HTML?
- Какие программы нужны для написания HTML-кода?
- Простые текстовые редакторы
- HTML-редакторы
- Создание первых HTML-страниц
- HTML: основы структуры текста
- Определение абзацев с помощью тега <p>.
- Размещение заголовков: тег <h>
- Подчеркивание отрывков и слов с помощью курсива или полужирного начертания: <i>, <em>, <b> и <strong>
- Создание списков: адаптированные списки с помощью тегов <ul>, <ol> и <li>.
- Представление структурированных данных с помощью таблиц: <table>, <tr> и <td>
- Базовая структура HTML: это основная структура веб-страниц
- Как интегрировать изображения, фотографии и графику на веб-страницы
- Связывание страниц и контента — важная роль гиперссылок
- Внутренние ссылки: как связать отдельные страницы вашего веб-сайта
- Внешние ссылки: как ссылаться на содержимое других сайтов
- На старте — как разместить свою HTML-страницу в Интернете
- CSS и JavaScript — почему HTML — это только начало
Что такое HTML?
HTML — это один из машиночитаемых языков, также известных как «компьютерные языки», которые обеспечивают взаимодействие между компьютерами и людьми. Он позволяет определять и структурировать типичные элементы текстовых документов, такие как заголовки, абзацы текста, списки, таблицы или графика, выделяя их соответствующим образом. Визуальное представление может быть достигнуто с помощью любого веб-браузера, который интерпретирует строки кода и поэтому знает, как должны отображаться отдельные элементы. Кроме того, HTML-код может содержать данные в виде метаинформации, например, об авторе. Как язык разметки, HTML в настоящее время используется в основном только в своей описательной функции, а дизайн определяется с помощью языков таблиц стилей, таких как CSS (Cascading Style Sheets). В начале веб-эры было вполне обычным делом вносить визуальные изменения с помощью HTML.
HTML развился из ныне в значительной степени исчезнувшего метаязыка SGML (Standard Generalized Markup Language), признанного стандарта ISO (8879:1986). Та же основная нотация элементов SGML присутствует и в HTML. Они обычно обозначаются парой тегов, состоящей из начального тега <> и конечного тега </>. Для некоторых элементов конечный тег не требуется; кроме того, существуют некоторые пустые элементы, такие как перевод строки <br>. В дополнение к тегам, следующие особенности HTML напоминают эти примеры:
- Объявление типа документа: информация об используемой версии HTML, например <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
- Использование символьных сущностей: использование сущностей для повторяющихся единиц, например, < für «<» или & для «&».
- Разметка комментариев: комментарии добавляются в HTML в соответствии с шаблоном <!—Comment—>.
- Атрибуты: дополнительные свойства тегов в соответствии с шаблоном <tag attribute=»value»>.
Какие программы нужны для написания HTML-кода?
В начале нашего курса HTML возникает вопрос: какое программное обеспечение лучше всего подходит для написания HTML-кода? Общего ответа на него не существует. С одной стороны, требований к программе так мало, что достаточно простого текстового редактора (есть в каждой операционной системе). С другой стороны, специальные HTML-приложения предлагают явные упрощения в написании кода. Насколько подходят различные варианты для изучения HTML?
Простые текстовые редакторы
Для того чтобы писать чистый HTML-код, вам не нужно сложное программное обеспечение. Простой редактор, например, редактор для Windows, также известный как Notepad, или эквивалент для Mac, TextEdit (в режиме обычного текста), являются достаточными базовыми вариантами. У вас не будет возможности изменить расположение текста, но это в любом случае задача форматирования HTML. Теоретически вы также можете использовать программы обработки текстов, такие как Microsoft Word или OpenOffice Writer, но вы не получите дополнительных возможностей, которые могут помочь при изучении HTML. В некоторых случаях лишние функции даже замедляют процесс обучения, поэтому вы на правильном пути, если используете простой текстовый редактор для изучения основ HTML. Такие редакторы предустановлены в каждой стандартной операционной системе.
HTML-редакторы
Помимо простых редакторов и сложных программ текстовых процессоров, существуют также специальные редакторы, оказывающие помощь: например, эти приложения подчеркивают синтаксические акценты и дают отличный обзор написанного кода. Кроме того, обнаруживаются любые синтаксические ошибки, если они есть. Еще одной стандартной функцией является функция автозавершения, которая предоставляет предложения по расширению или завершению кода при написании HTML-тегов. Эта функция также способна автоматически завершать конечные теги. Многие HTML-редакторы имеют функцию предварительного просмотра, которая позволяет вам в любое время проверить предварительные результаты ваших строк кода, просто нажав на кнопку. Очень рекомендуемым редактором для пользователей Windows является бесплатный, лицензированный GPL Notepad ++. Бесплатным решением для операционных систем Unix является Vim.
Есть еще один вариант, который имеет свой собственный шарм и интегрирован почти во все наборы для создания сайтов и системы управления контентом. Это HTML-редакторы с реальным представлением изображений, более известные как WYSIWYG-редакторы. Аббревиатура расшифровывается как основная идея этих программ «Что видишь, то и получаешь». Эти редакторы были разработаны специально для создания HTML-кода, и для их использования не требуется особых знаний языка разметки. Как и в текстовом редакторе, вы можете структурировать свой текст с помощью готовых кнопок меню, не размещая на странице ни одного HTML-тега. Редактор WYSIWYG генерирует их в фоновом режиме, одновременно, что имеет свои несомненные преимущества. Для изучения HTML такие редакторы, как BlueGriffon, не очень подходят — даже если вы можете просматривать сгенерированный код в любое время.
Создание первых HTML-страниц
На первом этапе изучения HTML вы создадите простую страницу, которую можно отобразить в браузере. Однако это еще не действительная HTML-страница, созданная в соответствии с определенными стандартами, а скорее чисто тестовая страница. Для создания этой страницы, а также других примеров HTML в этом учебнике, мы решили использовать редактор Notepad++, упомянутый ранее. Если вы используете другую программу, процедура может немного отличаться от приведенной ниже.
Сначала откройте редактор и сохраните новый файл под именем test. В качестве формата файла выберите ‘Hypertext Markup Language File’, чтобы в дальнейшем браузер знал, что это HTML-страница. Если вы используете простой редактор, возможно, вам придется выбрать тип фильма ‘Все файлы’ (кодировка: UTF-8) и задать HTML-метку непосредственно в поле ‘Имя файла’, сохранив файл под именем test.html.
Теперь сгенерированный файл должен отображаться значком вашего веб-браузера. Двойным щелчком мыши вы можете открыть страницу, но поскольку все содержимое отсутствует, вы увидите только белую страницу. Поэтому на следующем этапе добавьте небольшой пример текста «Это моя первая веб-страница!», сохраните документ и снова откройте файл test.html. Результат должен выглядеть примерно так:
HTML: основы структуры текста
Ваш первый веб-сайт может быть успешно создан — даже если вы еще не использовали язык разметки HTML. Однако, если вы вставите структурированный текст с заголовками и абзацами таким же образом, вы обнаружите, что без тегов далеко не уедете. Форматирование, которое вы добавили, например, с помощью текстового редактора, исчезает при просмотре в браузере: разрывы автоматически удаляются, пробелы группируются вместе и т.д. Решение состоит в том, чтобы обозначить различные текстовые модули как таковые с помощью соответствующих структурных элементов — другими словами, сделать шаг в мир HTML.
Определение абзацев с помощью тега <p>.
Чтобы обозначить абзацы, вам понадобится тег <p>. Тег start обозначает начало абзаца, а тег end — конец абзаца. Текст помещается между этими двумя маркерами. Во всех версиях HTML (кроме XHTML) закрывающий тег необязателен, но при изучении HTML его включение является хорошей практикой. Вы можете напрямую проверить точность определений абзаца на вновь созданной тестовой странице, добавив еще один участок текста и пометив их оба с помощью этого тега:
<p>This is my first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>Примечание: ручной параграф предназначен только для наглядности. Вы также можете написать оба элемента <p> в одну строку.
Размещение заголовков: тег <h>
Для того чтобы правильно структурировать текстовые разделы вашего сайта, важно использовать заголовки. В HTML у вас есть не только общая возможность обозначать их, но и задавать четкую иерархию для всех заголовков, которые вы хотите использовать. Можно использовать теги <h1> — <h6>, причем <h1> является основным заголовком сайта. Вы должны использовать этот тег только один раз на странице, в отличие от <h2> и других тегов заголовков. Важно соблюдать правильный иерархический порядок и не перескакивать между различными уровнями, чтобы и читатели, и поисковые системы могли понять структуру текста по заголовкам. В качестве примера на нашей тестовой странице мы добавим основной заголовок и первый подзаголовок:
<h1>Main heading: my first webpage</h1>
<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>
Подчеркивание отрывков и слов с помощью курсива или полужирного начертания: <i>, <em>, <b> и <strong>
Одной из важнейших основ HTML является возможность определенным образом выделять отдельные фрагменты текста. Таким образом, вы можете убедиться, что читатель сосредоточится на том, чего вы от него хотите, а значит, он сконцентрируется на наиболее важных элементах. Например, вы можете использовать теги <i> и <em>, чтобы выделить курсивом и подчеркнуть фразы, технические выражения или мысли. Однако курсив, как правило, замедляет процесс чтения, поэтому использовать этот тег следует осторожно. Более важными являются элементы <b> и <strong>, которые делают слова и отрывки текста жирными. Элемент <b> следует использовать для контента, который вы хотите намеренно обратить внимание пользователя. В отличие от него, тег <strong> показывает, какие слова важны для элементов контента, и показывает браузерам, как отображать слова или разделы.
Чтобы проиллюстрировать теги, мы немного расширим наш HTML-код:
<h1>Main heading: <i>my first webpage</i></h1>
<p>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>
Создание списков: адаптированные списки с помощью тегов <ul>, <ol> и <li>.
Списки полезны не только при совершении покупок: при оформлении текстов они могут пригодиться, чтобы разгрузить отдельные абзацы и тем самым оптимизировать восприятие читателя. С помощью HTML вы можете создавать как неупорядоченные, так и упорядоченные списки для своего веб-проекта. Используйте тег <ul> для создания неупорядоченных списков и <ol> для создания упорядоченных списков. Отдельные пункты списка можно определить с помощью тега <li>, который работает только в сочетании с одним из двух типов списков. Проверьте, как работают списки HTML, используя следующий код:
<ul>
<li>first unordered-list item</li>
<li>second unordered-list item</li>
<li>third unordered-list item</li>
</ul>Результат должен выглядеть примерно так:
Если вы хотите превратить свой список в нумерованный, просто поменяйте местами тег list type:
<ol>
<li>first ordered-list item</li>
<li>second ordered-list item </li>
<li>third ordered-list item </li>
</ol>Цифры появятся в представлении браузера вместо маркированных точек:
Представление структурированных данных с помощью таблиц: <table>, <tr> и <td>
В течение многих лет было принято использовать таблицы HTML не только для практичного представления сложных данных, но и для структурирования всего макета веб-страницы или текста, состоящего из нескольких колонок. Однако с развитием CSS эта дополнительная визуальная роль все больше отходит на второй план, а это значит, что сегодня таблицы используются для своей основной функции — для обработки данных. Каждая таблица состоит как минимум из трех компонентов:
- <table>: тег <table> start или end определяет начало или конец HTML-таблицы. Браузер не может многого сделать с этой разметкой, так как тег не показывает ни количество строк, ни количество столбцов.
- <tr>: используйте элемент <tr> (‘table row’) для добавления строки в таблицу. Количество не ограничено.
- <td>: только после добавления столбцов вы завершили базовую структуру таблицы. Тег <td> («данные таблицы») логически подчинен тегу <tr>, поскольку в одной строке должны быть созданы одна или несколько ячеек данных. Содержимое поля данных находится между открывающим <td> и закрывающим </td> элементом.
Для того чтобы понять несколько сложную структуру, мы сейчас создадим простую HTML-таблицу, состоящую всего из одной строки и двух столбцов:
<table>
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>Предварительный просмотр сгенерированного HTML-кода создает впечатление, что, возможно, произошла ошибка и таблица работает не так, как планировалось. Два столбца не были определены, и таблица вообще не выглядит как таблица. Однако этому есть простое объяснение: по умолчанию ячейки таблицы HTML не имеют визуальных границ. Для определения этой типичной таблицы необходимо расширить тег <table> с помощью атрибута border, включив в него значение 1:
<table border="1">
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>Если вы снова откроете HTML-документ в браузере, вы увидите более привычный макет таблицы.
Примечание: HTML5 больше не поддерживает атрибут border (за границу ячейки теперь отвечает только CSS).
HTML предлагает возможность выделения заголовков столбцов. Для этого необходимо заключить соответствующий столбец в тег <thead> и заменить маркировку <td> отдельных ячеек данных тегами <th>. Чтобы создать пример таблицы с четырьмя строками и тремя столбцами, включая заголовок, используйте следующий HTML-код:
<table border="1">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Базовая структура HTML: это основная структура веб-страниц
Этот раздел нашего учебника по HTML посвящен общей структуре веб-сайта. Документы HTML содержат не только текст, ссылки и другое интегрированное содержимое, такое как изображения и видео, но и вышеупомянутую метаинформацию, которая сообщает браузеру, а также поисковым машинам, как они должны читать страницы. Когда посетитель заходит на веб-страницу, он не видит многих из этих дополнительных сведений, только некоторые в строке заголовка окна браузера, на вкладке, в истории или в качестве заголовка для записей поисковых систем.
Сведение кода к минимуму, но при этом включение всех необходимых компонентов означает, что HTML-страница будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Here you can find all information about the HTML basic framework">
<title>Learn HTML: The basic framework</title>
</head>
<body>
</body>
</html>Таким образом, файл состоит из трех областей DOCTYPE, head и body, причем первый компонент, который является определением типа документа, должен быть единственным перед тегом <html>. Именно здесь вы сообщаете интерпретирующим приложениям, какой стандарт вы использовали при создании документа — в данном случае HTML5. Каждый браузер распознает этот тип документа; кроме того, он позволяет использовать как текущий HTML5, так и более старые коды HTML, поэтому его следует использовать по умолчанию, особенно при изучении HTML.
В следующем разделе <head> запишите данные заголовка вашего HTML-файла. Сюда входят, например, кодировка символов, которую будет использовать браузер (meta charset), мета-описание (meta name=»description») и название веб-страницы (title), которое появляется в заголовке браузера. Кроме того, вы можете сделать бесчисленное множество других мета-заявлений, даже информация, включенная в наш пример, является необязательной, но рекомендуется оставить ее для хорошей оценки поисковой системой. Исключением является информация <title>, которая, помимо определения типа документа, является единственным обязательным элементом HTML-страницы. В заголовок впоследствии можно добавить ссылку на ваш CSS-файл, который структурировал дизайн сайта. Раздел <body> содержит все то, что должно быть отображено пользователю в его браузере.
Примечание: теги для основной структуры HTML являются необязательными и теоретически могут быть опущены. В этом случае браузер автоматически создает теги <html>, <head> и <body> и присваивает им соответствующие элементы. Однако обычно принято писать эту информацию самостоятельно. Кроме того, разбивка облегчает чтение документа, что особенно полезно для новичков в HTML.
Как интегрировать изображения, фотографии и графику на веб-страницы
Тексты, бесспорно, являются самой важной частью общих HTML-страниц. Однако визуальные стимулы в виде изображений, фотографий или графики оказывают большое влияние на восприятие пользователя, поэтому они так же незаменимы для успешного присутствия в Интернете. Следующие три формата поддерживаются всеми браузерами:
- JPG: для фотографий или фотоподобной графики с сильным контрастом и разнообразием цветов обычно используется формат JPG. Изображения JPG поддерживают 16 миллионов цветов и сильно сжимают файлы, хотя это может привести к некоторой потере качества.
- PNG: графику и логотипы лучше всего сохранять в формате PNG, который может отображать от 256 (PNG8) до 16,7 миллионов цветов (PNG24). В отличие от JPG, PNG сжимается без снижения качества, но при этом файл получается больше.
- GIF: Файлы GIF могут отображать только 256 цветов, но они все равно необходимы в веб-разработках, поскольку их можно использовать для отображения небольшой анимации, навигационных элементов или простой графики.
Независимо от формата, вы можете включить изображение с помощью тега <img> (изображение) в нужную веб-страницу. При этом необходимо указать место хранения этого изображения, иначе браузер не сможет его найти и, соответственно, отобразить. Для этого нужен атрибут src (источник) и относительное имя пути к файлу изображения. Просто создайте подпапку с именем «Images» в папке проекта вашего сайта (которая также содержит HTML-документ) и храните в ней все необходимые изображения. Файл нашего примера HTML-учебника имеет имя graphic1.png и находится в папке с названием ‘Images’. Код, используемый для интеграции этой графики, выглядит следующим образом:
<img src="images/graphic1.png" />Однако существуют и другие атрибуты для изображений, которые рекомендуется использовать. Вы можете указать ширину и высоту изображения. Эти значения позволяют браузеру поместить на страницу заполнитель соответствующего размера, пока изображение полностью не загрузится. Он также может одновременно отображать дополнительный контент в окне браузера без завершения процесса загрузки файла изображения, что, в свою очередь, ускоряет общее время загрузки сайта. С другой стороны, существует атрибут alt, который можно использовать для определения альтернативного текста для изображения. Вы должны включить его в свой базовый репертуар HTML по целому ряду причин, поскольку он…
- Способствует доступности страницы, предлагая альтернативу пользователям с ослабленным зрением или когда страница не загружается.
- Помогает поисковым системам классифицировать изображения, а также считается дополнительным контентом.
- Указаны в спецификации HTML.
Чтобы расширить эти атрибуты, HTML-код выглядит примерно так:
<img src="images/graphic1.png" width="960" height="274" alt="Learn HTML: this is how the embedded sample graphic 'click here' appears:" />Примечание: используемые здесь значения ширины (960) и высоты (274) — это исходные размеры графического образца. Браузер автоматически вычисляет размер в пикселях.
Связывание страниц и контента — важная роль гиперссылок
Гиперссылки, более известные под аббревиатурой «ссылки», являются основной причиной несравненного успеха Интернета. Без этих электронных ссылок, которые ведут пользователя на другой сайт или побуждают его совершить какое-либо действие, например, загрузить продукт, такая сеть, как Интернет, была бы невозможна. Существует три типа ссылок:
- Внутренние ссылки: внутренние ссылки используются для структурирования всего сайта и ориентирования посетителей. Существуют различные структуры, которые вы можете использовать. Например, при линейной структуре пользователь проходит определенный путь от страницы к странице. В то время как в древовидной структуре пользователь переходит с главной страницы на различные подчиненные страницы. Вы также можете разместить внутренние ссылки в пределах одной страницы, которые позволяют пользователю переходить непосредственно с нижней части страницы на верхнюю.
- Внешние ссылки: внешние ссылки — это ссылки, которые ведут пользователя на различные веб-проекты. Вы используете этот тип ссылок, чтобы предложить своим посетителям дополнительную ценность, направляя их на другой сайт. Однако вам следует убедиться, что вы не размещаете слишком много ссылок на странице, а также убедиться, что контент, на который вы ссылаетесь, заслуживает доверия. В противном случае вы можете быть наказаны поисковой системой.
- Другие ссылки: не все ссылки ведут на HTML-документы. В зависимости от цели ссылки, нажатие на ссылку может также вызвать загрузку, открыть почтовый клиент или активировать программу просмотра PDF-файлов.
Внутренние ссылки: как связать отдельные страницы вашего веб-сайта
Хотя на более позднем этапе изучения HTML вам, скорее всего, придется проектировать и разрабатывать сложную структуру ссылок для вашего веб-представительства, в данном курсе мы покажем вам, как установить внутреннюю связь между двумя страницами. В дополнение к уже созданному вами файлу test.html вам понадобится еще один HTML-документ. Обязательно дайте этому второму файлу другое имя, например targetpage.html, и убедитесь, что его можно найти в том же каталоге, что и тестовую страницу.
Для создания ссылки необходим HTML-тег <a> (anchor), который служит только для того, чтобы показать, что используется ссылка. По этой причине он не может быть самостоятельным и нуждается в атрибуте href (гипертекстовая ссылка) для указания места назначения ссылки. Текст ссылки, который браузер отображает синим цветом и по умолчанию подчеркнут, должен быть написан между открывающим и закрывающим тегами <a>. Разместите первую внутреннюю ссылку, добавив следующую строку кода в файл test.html:
<a href="targetpage.html">Jump to target page</a>Если вы правильно настроили ссылку, то при нажатии на нее должна открыться пустая страница, поскольку targetpage.html еще не обработан. По этой причине в следующем шаге мы добавим новую внутреннюю ссылку на этот документ, которая при нажатии на нее будет возвращать вас на исходную страницу:
<a href="test.html">Back to previous page</a>
Примечание: если страница, на которую вы хотите дать ссылку, находится не в главном каталоге, просто введите соответствующий путь к подкаталогу, например, subdirectory/targetpage.html. Вы можете вернуться, используя <a href=»https://www.ionos.com/digitalguide../test.html»>.
Внешние ссылки: как ссылаться на содержимое других сайтов
Если вы хотите добавить внешнюю ссылку на свою страницу, вам не требуется тег, отличный от того, который используется при внутренней ссылке, и вам не нужно знать каталог, в котором сохранена страница. Для ссылок на сторонний контент требуется только полный URL — он содержит всю необходимую информацию. Поскольку содержание ссылки находится не на вашем собственном веб-сервере, вы не можете повлиять на то, как работает внешняя ссылка, поэтому рекомендуется регулярно проверять ее. Старайтесь составлять информативный якорный текст, поскольку бессмысленные вставки типа «здесь» не дают посетителю никакой информации о том, куда ведет ссылка. Попробуйте использовать следующий код при внешнем размещении ссылок, который создает ссылку на наш Цифровой справочник:
<p>HTML tutorial and numerous guides on the topic of websites, hosting, and much more at
<a href=" https://www.ionos.com/digitalguide ">IONOS Digital Guide</a>
</p>Когда вы размещаете внешние ссылки, вы уводите посетителей от своего собственного веб-проекта. Теоретически, они могут вернуться обратно с помощью кнопки «назад», но многие люди не знают, что у них есть такая возможность. Существует способ сделать так, чтобы новая страница автоматически открывалась в отдельной вкладке, что означает, что им не придется покидать ваш сайт. Атрибут target описывает, где должен быть открыт связанный документ. С помощью значения _blank вы указываете, что хотите, чтобы страница открывалась в новом окне или вкладке. Код ссылки выглядит следующим образом:
<a href="https://www.ionos.com/digitalguide" target="_blank">IONOS Digital Guide</a>На старте — как разместить свою HTML-страницу в Интернете
Примеры страниц, которые вы создали в учебнике HTML, могут быть открыты на вашем компьютере в обычном режиме. Однако если вы отправите URL-адреса соответствующих страниц другим людям, чтобы показать им результаты, они не смогут многого сделать. Это происходит потому, что HTML-документы и любые встроенные изображения и т.д. хранятся только локально на вашем компьютере и поэтому не могут быть отправлены запрашивающим браузерам. Чтобы любой желающий мог принять участие в вашем творении, вы должны сначала зарегистрировать свой веб-проект в Интернете и найти подходящую хостинговую структуру.
Первый шаг — найти подходящий домен (веб-адрес) для вашего веб-проекта и зарегистрировать его. Вы можете зарегистрировать домен у любого интернет-провайдера — в IONOS мы предлагаем множество вариантов регистрации доменов. Второй шаг — это создание соответствующей базы для вашего веб-проекта: установка и настройка собственного веб-сервера или аренда его у хостинг-провайдера. Если вы начинающий HTML-специалист, мы рекомендуем последний вариант: вам не придется заниматься выбором, настройкой и обслуживанием серверного программного обеспечения. Вы просто выбираете нужный пакет веб-пространства, который предоставляет вам необходимое место для хранения документов вашего проекта.
На последнем этапе вам нужно загрузить свои страницы на арендованное веб-пространство. Для этого обычно требуется программа FTP. С помощью этой клиентской программы вы можете обмениваться данными с FTP-сервером провайдера, используя протокол передачи файлов. В следующем руководстве мы предлагаем вам несколько отличных программ. Подробные инструкции и регистрационные данные для доступа к FTP-серверу можно получить непосредственно у соответствующего хостинг-провайдера.
Примечание: при загрузке на FTP-сервер структура каталогов сохраняется, поэтому стоит с самого начала позаботиться о структурировании.
CSS и JavaScript — почему HTML — это только начало
По ходу учебника мы несколько раз подчеркивали, что хотя HTML является основой любого сайта, задача проектирования с учетом состояния современной веб-разработки — это практически совершенно другой язык: в том числе, какие цвета имеют отдельные элементы, макет страницы, или какой шрифт и размер используются для текстовых отрывков, заголовков и других текстовых элементов. Все эти моменты можно определить с помощью языка таблиц стилей — каскадных таблиц стилей (CSS). Строгое разделение содержания и дизайна значительно облегчает анализ и сопровождение крупных веб-проектов. После изучения HTML рекомендуется ознакомиться с CSS, чтобы вы могли придать своим HTML-страницам желаемый вид.
Один из компонентов современных веб-сайтов, который еще не был упомянут, — это JavaScript. С помощью этого языка сценариев вы можете расширить свои HTML-страницы динамическими элементами. Динамические элементы позволяют посетителям взаимодействовать с вашими страницами и представлены в виде галерей изображений, динамических навигационных меню или загрузки внешних данных. Как для JavaScript, так и для CSS вы найдете множество готовых к использованию фрагментов кода, которые можно интегрировать непосредственно в документы (CSS и JavaScript), не прибегая к написанию собственных сценариев. Однако перед этим вы должны иметь базовое понимание этих двух веб-языков, чтобы правильно использовать эти строки кода и уметь устранять проблемы в случае их возникновения.