Как создать простой сайт html: Как создать простой HTML сайт в блокноте

Настройте веб-сервер Raspberry Pi и легко создайте веб-страницу HTML

Введение

У вас есть Raspberry Pi и вы хотите запустить веб-сервер дома? Но вы можете подумать, что делать после запуска веб-сервера на Raspberry Pi. В этом блоге мы шаг за шагом проведем вас по настройке веб-сервера дома с помощью Raspberry Pi за пару минут, а также поможем вам изучить основы HTML-кодирования, и в конечном итоге у вас будет свой собственный веб-сайт на Интернет!

Что такое веб-сервер?

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

Как вы можете посещать веб-сайты через браузер?

Когда вы введите URL-адрес в браузере, этот URL-адрес преобразуется в IP-адрес, и браузер отправляет это как HTTP-запрос через Интернет, пока не достигнет Интернета. сервер, связанный с запрошенным IP-адресом. Когда он попал в сеть сервер, HTTP-сервер принимает этот запрос и находит документ, который пользователь запросил. После этого он отправляет запрошенную веб-страницу обратно в браузер через HTTP.

Преимущества создания веб-сервера на Raspberry Pi

Есть несколько преимуществ использования Raspberry Pi для создания веб-сервера.

• Экономичный потому что общие расходы на хостинг дорогие
• Runs очень малой мощности и поэтому экономит электроэнергию
• Может быть настроенным как портативное устройство

Кроме того, если вы хотите разместить свой веб-сайт на Raspberry Pi, вы можете использовать любой Raspberry Pi по вашему выбору. Даже Raspberry Pi Zero может разместить веб-сервер!

Создание веб-сервера Apache на Raspberry Pi

Существуют различные типы веб-серверов, но мы будем использовать веб-сервер Apache, который является одним из самых известных веб-серверов, которые можно настроить на Raspberry Pi. Apache может доставлять HTML-файлы по протоколам HTTP и HTTPS, а также поддерживает дополнительные модули, такие как PHP, где он может доставлять динамический контент. Но в этом руководстве мы настроим Apache для доставки статических HTML-страниц, потому что так проще начать работу.

Необходимые материалы

Настройка веб-сервера Apache на Raspberry Pi — несложный процесс. Мы начнем с перечисления того, что вам нужно для этой установки:

• 1 x Raspberry Pi
• 1 x Кабель USB Type-C с адаптером питания
• 1 x Алюминиевый корпус Argon ONE Raspberry Pi 4 (дополнительно)
• 1 x Micro -SD-карта с картридером

Обратите внимание, что мы использовали алюминиевый корпус Argon ONE Raspberry Pi 4, потому что после того, как вы настроите веб-сервер Apache на своем Raspberry Pi, вы оставите его включенным все время. Таким образом, этот чехол может помочь обеспечить лучшее охлаждение, в то время как Raspberry Pi нагревается от непрерывного использования. С другой стороны, это также очень стильный алюминиевый корпус для Raspberry Pi!

Алюминиевый корпус Argon ONE Raspberry Pi 4

Настройка Raspberry Pi для первоначальной загрузки

При покупке Raspberry Pi, на нем не установлена ​​операционная система из коробки. Так, вам нужно записать операционную систему на карту micro-SD, а затем загрузить Raspberry Pi с этой карты.

Шаг 1

Во-первых, мы должны загрузить операционную систему на базе Linux. Raspberry Pi поддерживает различные дистрибутивы Linux, такие как Ubuntu, но в этом руководстве мы будем использовать официальную ОС от Raspberry Pi Foundation, то есть ОС Raspberry Pi. Загрузите его здесь, выбрав версию «с настольным компьютером и рекомендуемым программным обеспечением».

Шаг 2

Затем вам нужно загрузить программное обеспечение под названием «balenaEtcher», которое используется для записи загруженного выше образа и загрузки Raspberry Pi с карты Micro-SD. Щелкните здесь, чтобы загрузить последнюю версию этого программного обеспечения.

Шаг 3

Затем вставьте карту micro-SD в слот для карт micro-SD на ПК с помощью адаптера для карт micro-SD на SD. Вы также можете использовать USB-кардридер Micro-SD.

Этап 4

После этого откройте программу «balenaEtcher». Затем укажите местоположение загруженного изображения, выберите подключенную карту micro-SD и нажмите «flash». Для завершения этого процесса потребуется несколько минут.

Шаг 5

Теперь мы настроим Raspberry Pi для автоматического подключения к беспроводной сети, чтобы мы могли с ней общаться.

Однако, если у вас есть дисплей HDMI, клавиатура и мышь, вы можете пропустить этот шаг, подключить их к Raspberry Pi и перейти к шагу 9.0053 « Установка веб-сервера Apache »

Также, если у вас есть Seeeduino XIAO, вы можете следовать приведенному здесь руководству, чтобы настроить связь между Raspberry Pi и ПК и перейти к «Установка веб-сервера Apache»

Шаг 6

Перейдите в корневую папку Raspberry Pi с вашего ПК и создайте файл с именем «wpa_supplicant. conf». Затем скопируйте в этот файл следующие коды и добавьте в поля «WiFi-имя» и «WiFi-пароль» свой домашний логин и пароль от Wi-Fi

 страна=США
ctrl_interface=DIR=/var/run/wpa_supplicant ГРУППА=netdev
update_config=1
 
сеть = {
ssid="имя WiFi"
psk="WiFi-пароль"
key_mgmt = WPA-PSK
приоритет=1
}
 

Примечание:
Имя и пароль Wi-Fi должны совпадать с вашим локальным Wi-Fi, к которому подключен ваш компьютер (убедитесь, что ваш компьютер и Raspberry Pi находятся в одной локальной сети).

Шаг 7

Создайте пустой файл с именем «ssh» в этом каталоге

Шаг 8

Затем извлеките карту micro-SD из ПК и вставьте ее в Raspberry Pi.

Шаг 9

Включите питание Raspberry Pi через USB-кабель Type-C и адаптер питания

Шаг 10

Теперь мы загрузим Putty, SSH-клиент, который мы будем использовать для связи с Raspberry Pi. Нажмите здесь, чтобы загрузить.

Шаг 11

Открытая замазка и установите имя хоста как «raspberrypi.local» и порт как «22». Затем нажмите «Открыть».

Клиент Putty

Установка веб-сервера Apache

Шаг 1

Прежде всего, обязательно обновите список пакетов на Raspberry Pi, введя следующие команды.

 sudo apt-получить обновление
sudo apt-get upgrade 

Шаг 2

Затем установите Пакет Apache2, введя следующую команду

 sudo apt install apache2 -y 

Вот и все! Только два шага, и у вас есть веб-сервер Apache, работающий на вашем Raspberry Pi!

Для подтверждения независимо от того, работает этот веб-сервер или нет, введите следующую команду.

 статус sudo service apache2 

Теперь по порядку чтобы убедиться, что Apache работает, вы можете ввести IP-адрес вашего Raspberry Pi в веб-браузере, и вам будет представлена ​​​​простая веб-страница в виде следует.

Однако, если вы не знаете IP-адрес вашего Raspberry Pi, вы можете узнать его, введя команду ниже в терминале вашего Raspberry Pi.

имя хоста -I

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

Настройка HTML-страницы для редактирования

По умолчанию веб-страница, как показано выше, представляет собой просто файл HTML в файловой системе Raspberry. Пи. Мы создадим наш собственный файл HTML и создадим нашу собственную веб-страницу.

Шаг 1

Во-первых, давайте найдем расположение этого HTML-файла на Raspberry Pi. Введите в терминал следующую команду:

 cd /var/www/html 

Шаг 2

Затем введите следующая команда для вывода списка всех файлов в этом каталоге

 ls -al 

Вам будут представлены все файлы, доступные в этом каталоге, а файл index.html принадлежит пользователю root.

Поэтому, чтобы отредактировать этот файл, вам нужно сменить его владельца на свое собственное имя пользователя. Здесь мы выберем имя пользователя Raspberry Pi по умолчанию — «pi».

 sudo chown pi: index.html 

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

Создание первой HTML-страницы

Сейчас мы сосредоточиться на обучении вас основам HTML.

Прежде всего, откройте файл index.html, введя команду ниже, и удалите все содержимое внутри, чтобы начать с новой страницы.

 sudo nano index.html 

Редактор GNU nano

Теги HTML

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

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

Например Тег может сделать текст жирным. Поэтому, если у вас есть свой контент:

 Это мой новый веб-сайт 

Слово «новый» будет выделен жирным шрифтом. Обратите внимание, что открывающий тег имеет <>, а закрывающий тег имеет

Основной формат HTML-документа

Общий Документ HTML имеет следующий формат

 

   <голова>
   
   <тело>
   

 

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

: Этот тег обеспечивает что содержимое внутри будет иметь необходимые характеристики HTML. Этот имеет закрывающий тег

.

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

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

 <голова>
   <мета-кодировка="utf-8">
 

Кроме того, вы можете иметь тег заголовка внутри тега заголовка. Этот тег устанавливает заголовок вашей веб-страницы и имеет закрывающий тег.

 <голова>
   <мета-кодировка="utf-8">
   
 

: Этот тег содержит основное содержимое веб-страницы. Когда вы открываете веб-страницу, все, что вы видите, обычно включается в теги body. Он имеет закрывающий тег

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

Теги заголовков

Эти теги обычно используются для заголовков и подзаголовков страницы. Существует шесть различных тегов заголовков, соответствующих размеру и приоритету заголовков и субтитров. Они варьируются от

до

, а размер постепенно уменьшается от h2 до h6.

Также нужен закрывающий тег

 
    
Заголовок
 
    
Подзаголовок
 
    
Подзаголовок
 
    
Подзаголовок
 
    
Подзаголовок
 
    
Подзаголовок
 
 

Вы можете сохранить файл, нажав Ctrl + X и нажмите Y, когда будет предложено в команде, как. Затем перезагрузите страницу в браузере, чтобы увидеть изменения.

Теги абзаца

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

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

.

 
Это первый абзац
Это второй абзац
Это третий абзац
 

Перезагрузить браузер чтобы увидеть изменения

Теги разрыва строки

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

 Это предложение прервется здесь 
 и начнется с нового 

Перезагрузите браузер чтобы увидеть изменения

Теги для добавления стилей к вашему тексту

Есть некоторые теги, которые полезны для изменения внешнего вида текста.

: Делает текст полужирным

: Делает текст курсивом

: Это подчеркивает текст

: 90 054 Этот тег используется, чтобы подчеркнуть что-то и отображается курсивом

: Этот тег используется для выделения важного текста и отображается жирным шрифтом

 Это полужирный текст

Это текст курсивом

Это подчеркнутый текст

Это выделенный текст

Это важный текст
 

Перезагрузить браузер чтобы увидеть изменения

Горизонтальный тег правила

Эти теги используются для создания горизонтальной разметки на веб-странице слева направо. Это пустой элемент и имеет тег

---

.

 Это предложение
<час>
Это отдельное предложение 

Перезагрузите браузер, чтобы увидеть изменения

Добавление изображений на веб-страницу

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

Например, давайте добавим изображение Seeeduino XIAO

 
Это изображение Seeeduiono XIAO
 

Перезагрузите браузер чтобы увидеть изменения

Также вы можете скачать изображение и поместить в каталог /var/www/html .

Затем вы можете ввести следующее в свой файл index.html, заменив «Имя вашего изображения» на имя вашего изображения, за которым следует расширение изображения.

Добавление гиперссылок в текст

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

 текст 

Пример

 Нажмите здесь, чтобы проверить веб-сайт Seeed Studio 

Перезагрузите браузер чтобы увидеть изменения

Создание списка

Есть два типа списков, которые можно создать в HTML

• Заказанный Список
• Неупорядоченный Список

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

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

  Давайте рассмотрим пример для неупорядоченного списка и упорядоченного списка

   
  
     
  красный
     
  синий
     
  зеленый
     
  фиолетовый
     
  желтый
  
  <ол>
     
  красный
     
  синий
     
  зеленый
     
  фиолетовый
     
  желтый
  

Перезагрузить браузер чтобы увидеть изменения

Вы также можете вложить списки, чтобы поместить список в список следующим образом

 

   
красный
<ул>
темно-красный
светло-красный

   
   
синий
   
зеленый
   
фиолетовый
   
желтый
 

Перезагрузите браузер чтобы увидеть изменения

Создание таблицы

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

Чтобы построить таблицы используйте тег

. Все содержимое таблицы будет находиться внутри открывающий тег и закрывающий тег.

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

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

Давайте создадим простую таблицу, используя теги, которые мы изучили выше.

 <таблица>
   
      Артикул
      Название продукта
      Цена
   
   
      102010328
      Сееэдуино СЯО
      $4,90
   
 

Перезагрузите браузер, чтобы увидеть изменения

Заключение

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