Вы когда-нибудь мечтали создать сайт? Если ваш ответ да, то вам повезло, потому что сегодня вы создадите свой самый первый веб-сайт, и единственные требования: текстовый редактор, веб-браузер и это руководство.
Так что читайте внимательно, и я обещаю вам: вы сможете поставить галочку «создать веб-сайт» в своем списке дел всего за 30 минут.
Вы узнаете, как создать базовый HTML-документ и как отобразить его в браузере.
Что такое HTML и как работают веб-сайты?
Каждый веб-сайт в Интернете состоит из HTML.
Каждый раз, когда вы вводите URL-адрес в адресную строку браузера. Браузер отправляет запрос веб-серверу, связанному с этим URL-адресом.
Веб-сервер отвечает HTML-документом, который отображается в браузере после получения ответа от сервера.
HTML — это язык разметки. Это означает, что это не настоящий язык программирования. Он используется для определения базовой структуры веб-сайта, чтобы браузер знал, как ее отображать.
Языком программирования браузеров является Javascript, который можно использовать для добавления динамических функций на ваш сайт.
Javascript не должен быть здесь темой, потому что он выходит за рамки этого поста.
Итак, давайте сосредоточимся на HTML и начнем.
Откройте текстовый редактор
Первое, что вам нужно сделать, чтобы написать свой первый веб-сайт с помощью HTML, — это открыть текстовый редактор.
Следующие редакторы поставляются с вашей операционной системой, вам не нужно ничего устанавливать, чтобы начать работу.
- Windows — нажмите клавишу Windows и введите «Редактор».
- macOS — откройте Spotlight CMD+Пробел и введите «TextEdit».
Теперь вы готовы начать вводить свои самые первые строки HTML.
Создайте свой первый HTML-документ
Говорить дешево! Итак, давайте прямо сейчас приступим к написанию HTML.
В открытом текстовом редакторе введите следующий код.
<!DOCTYPE html> <html> ... </html>
Теперь сохраните HTML-документ на свой компьютер, нажав кнопку «Сохранить» в редакторе. Назовите файл, например, «hello.html».
Поздравляем, вы успешно создали свой первый сайт. Честно говоря, это только самая основная форма веб-сайта, но все начинают с малого.
Итак, позвольте мне объяснить код.
Первый оператор <!DOCTYPE html> сообщает браузеру, что этот документ является html-документом.
Следующий фрагмент кода — <html>, это основной тег HTML-документа.
Соответствующий ему закрывающий тег — </html>, закрывающий тег можно определить по символу «/».
Все, что находится между открывающим и закрывающим тегом <html>, является содержимым вашего веб-сайта, поэтому все тексты, изображения и другие элементы, которые вы хотите отобразить, будут размещены там.
Добавьте заголовок на свой первый HTML-сайт
Документы HTML основаны на тегах, поэтому каждый элемент или узел, который вы хотите добавить, состоит из открывающего и закрывающего тега.
Позвольте мне продемонстрировать это, добавив заголовок на наш веб-сайт.
<!DOCTYPE html>
<html>
<head>
<title>My Very First Website</title>
</head>
</html>
Мы добавили тег <head> в HTML-документ, содержащий метаинформацию о вашем веб-сайте, которая не отображается непосредственно в виде контента.
Например, вы можете определить заголовок, который будет отображаться на вкладке браузера.
Текст между открывающим и закрывающим тегом <title> используется в качестве заголовка вашего веб-сайта.
Как видите, теги HTML-документа составляют иерархическую древовидную структуру.
Элемент <title> является потомком элемента <head>, а сам элемент <head> является потомком элемента <html>.
Вы используете отступ, чтобы сделать эту иерархию узлов HTML очевидной.
Добавьте приветственное сообщение на сайт
Теперь мы настроили наш базовый HTML-документ и добавили заголовок, пришло время добавить контент на наш веб-сайт.
Давайте начнем с создания приветственного сообщения для ваших посетителей.
Добавьте следующий код под закрывающим тегом </head>.
<body> <p>Welcome to my very first Website! :)</p> </body>
Теперь мы добавили на сайт элемент <body>, все, что находится между открывающим и закрывающим тегом <body>, является контентом вашего сайта.
Чтобы добавить приветственное сообщение, мы добавляем элемент <p>, содержащий текстовое сообщение, которое мы хотим показать посетителям вашего сайта.
<p> означает «абзац» и является одним из основных тегов для отображения текста с помощью HTML.
Сохраните и откройте веб-сайт в браузере
Пришло время пожинать плоды нашей тяжелой работы, открыв веб-сайт в браузере.
- Сохраните ваш HTML-файл
- Откройте браузер
- Перетащите html-файл в браузер
- Полюбуйтесь своим первым сайтом!
Добавьте больше отличного контента на свой сайт
Теперь мы создали основы вашего HTML-документа. Позвольте мне быстро подвести итог тому, что мы сделали до сих пор:
- Добавлен тег
<html>для определения HTML-документа. - Определен тег
<head>, который обычно используется для добавления метаинформации в документы HTML. - Создан тег
<title>для определения названия веб-сайта, отображаемого на вкладке браузера. - Добавлено приветственное сообщение на
<body>нашего сайта
Теперь мы хотим добавить еще больше контента в раздел <body>.
Добавьте заголовок на свой сайт
Начнем с заголовка.
Вставьте следующий код над тегом <p>.
<h1>My first Website</h2>
Заголовки в HTML пронумерованы, заголовок с меньшим номером означает, что он более заметен на всей странице.
Заголовок <h1> должен встречаться только один раз на каждой HTML-странице, потому что это основной заголовок.
Кроме того, заголовки упорядочены, что означает, что заголовок <h2> должен быть размещен на втором уровне в иерархии заголовков сразу после заголовка <h1>, заголовки <h3> должны быть на третьем уровне и так далее.
Посмотрите этот пример, чтобы все стало ясно:
h<h1>Main Heading</h1> ... <h2>Hello World</h2> ... <h3>The weather is great today</h3>\n... <h4>The sun is shining</h4> ... <h3>The weather will be rainy tomorrow</h3> ... <h2>Next H2 Heading</h2> ...
Добавьте изображения на свой сайт
В эпоху Instagram веб-сайту нужны изображения, поэтому позвольте мне показать вам, как добавить изображение на ваш веб-сайт с помощью HTML.
Это очень просто!
<img src="path/to/your/image.png" />
Вам просто нужно добавить тег <img> в раздел <body>.
Вы заметили, что тег <img> не имеет закрывающего тега?
Если узел не имеет дочерних элементов, таких как другие узлы HTML или ожидаемые внутри него теги, закрывающий тег является необязательным, вы можете использовать косую черту «/» сразу после закрывающей скобки открывающего тега.
Есть еще одна вещь, которая отличается от других тегов, которые вы знаете до сих пор.
Я говорю об атрибуте src, который используется для определения пути к файлу изображения, которое должно отображаться.
Атрибуты HTML используются для настройки внешнего вида элементов HTML. Существует множество различных атрибутов, некоторые из которых являются общими для всех элементов HTML, а другие специфичны для элемента HTML.
Атрибут src не действует, например, при использовании с элементом <p>.
Но вы можете попробовать изменить цвет текста вашего элемента <p> на синий, используя color="blue" в открывающем теге так же, как атрибут src используется для изображения.
Как опубликовать свой сайт в Интернете
Веб-сайт, который вы только что создали, в настоящее время доступен только локально на вашем компьютере.
Вы можете опубликовать его в Интернете, чтобы показать его своим друзьям. Для этого вы должны разместить свой веб-сайт.
Есть много хороших провайдеров веб-хостинга. Не хочу рекламировать какие-то конкретные, поэтому не привожу их здесь.
Просто спросите у своей любимой поисковой системы что-то вроде: «Хороший и дешевый веб-хостинг».
Попробуйте сравнить предложения и выбрать то, что вам нравится. Для простого веб-сайта, такого как тот, который вы только что создали, нет необходимости слишком беспокоиться о возможностях веб-хостинга. Сделайте цену основным решающим фактором.
