Понедельник , 23 мая 2022
Бизнес-Новости
Разное / Как создать сайт в html: Как создать сайт с нуля при помощи HTML

Как создать сайт в html: Как создать сайт с нуля при помощи HTML

Содержание

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

Хотите сделать быстрый сайт с нуля, без CMS и конструктора. В этом нет ничего сложного, ведь по факту HTML не является языком программирования, и код можно освоить всего за пару дней. Мы подготовили пошаговую инструкцию для чайников, как создать HTML-сайт в блокноте.

Видеокурс «Арбитраж трафика: с нуля до первой прибыли»

Создаем простой сайт в блокноте: основные HTML-теги

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

Как создать HMTL-сайт в блокноте

Мы не будем обучать вас синтаксису языка. Покажем лишь один из способов, как сделать простой web-ресурс в блокноте.

Этап 1: создаем страницу

Ниже подробно по шагам.

  • Открываем стандартный блокнот для Windows. 
  • Щелкаем на «Файл» и выбираем «Сохранить как».
  • Изменяем кодировку на UTF-8 и даем название файлу. После названия ставим точку и вписываем html.
  • Сохраняем файл.

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

А вот так отображается страница в браузере.

Вас может заинтересовать — заработок на создании сайтов на Тильде.

Этап 2: делаем разметку

Пока наш сайт пустой, и там ничего нет. Поэтому начинаем редактировать файл. Вносим туда разметку.

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

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

Этап 3: добавляем стили CSS

Веб-площадка в том виде, котором представлена — выглядит не очень. Поэтому придаем элементам стилистику, добавляя шрифты, фон, отступы и т. д. Заменяем код в нашем файле на этот.

С помощью тега <style> мы задали фон (background), ширину страницы (900 px), отступы, цвет заголовка и т. д. Теперь в браузере наш ресурс выглядит на порядок лучше.

Как создать блоки сайта в html 

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

Блоки состоят из 4-х свойств:

  • контент — главный элемент блочной верстки;
  • padding — поля вокруг контента, отвечающие за отступы между контентом и внутренним краем границ;
  • border — задают границы блока;
  • margin — отступы от внешнего края рамки до границ страницы.

Для примера создадим 2 блока. Вписываем в блокнот этот код.

В браузере он будет отображаться вот так.

Чтобы придать нормальный внешний вид, надо использовать CSS. Один из вариантов — подключить отдельный файл с этими стилями. 

Для этого открываем новый блокнот, вписываем туда стили и сохраняем с названием style.css.

А в первый файл после закрывающего тега </title> добавляем ссылку на этот файл в таком виде — <link rel=»stylesheet» href=»style.css»>.

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

Таким образом, мы создали 2 блока и вывели их через стили CSS. Ниже на картинке приведены свойства и значения css-кода. Можете вставлять свои значения и менять внешний вид блоков.

Как создать шапку сайта в html

Прежде нужно найти какое-то изображение. Ниже мы покажем пример создания шапки из одной картинки. Вставляем в наш файл блокнота, после <body> такой вот код.

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

Как создать подвал сайта в html

Этим же методом удастся создать подвал сайта. Добавляем в наш код такие строки, сразу перед закрывающимся тегом </body>.

И вот у нас получился еще и подвал.

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

Как создать многостраничный сайт 

Как видим, одностраничный сайт-визитка создается легко и просто — практически у всех это сразу получается за 1-2 минуты. А вот когда нужно сверстать многостраничник, многие разводят руками. Однако и здесь нет ничего сложного. Просто нужно научиться связывать страницы между собой ссылками. 

Например, вот как создается многостраничный сайт.

  1. Через блокнот создаете несколько страниц, и каждой присваиваете уникальное название.
  2. Связываете все страницы между собой ссылками. Линки нужно поместить в html код каждой страницы через <a href=название страницы</a>. Например, в странице 1 будут ссылки на все остальные страницы. Также в странице 2 будут линки на все другие страницы, включая страницу 1 и т. д. 

Для примера сверстаем сайт из 2-х страниц.

  • Создаем первую страницу в блокноте. Называем ее galaxy-01.html. В <title> и <h2> прописываем Galaxy A.
  • Создаем вторую страницу в блокноте. Называем ее galaxy-02. Название title и h2 — Galaxy Z.
  • Добавляем в файл galaxy-01.html перед закрывающимся </body> строчку <a href=»galaxy-02.html»> Galaxy Z</a>.
  • Добавляем в файл galaxy-02.html перед закрывающимся </body> строчку <a href=»galaxy-01.html»>Galaxy A</a>.

Все — теперь эти наши две страницы связаны между собой. Переходим на galaxy-01.html и внизу страницы видим ссылку.

Если кликнем на нее, то перейдем на страницу galaxy-02.html. Также ссылка проставлена на второй странице, но она ведет уже на первую страницу.

Как создать полноценный сайт в одном файле

Теперь мы понимаем, как создавать простой сайт через блокнот. Ниже мы покажем вариант полноценного структурированного адаптивного лендинга, где все включено: шапка, блоки, меню, подвал. Стили тоже все прописаны в одном файле. Можете использовать этот шаблон для верстки своего сайта, вам останется лишь заполнить его контентом. Открываете блокнот и вписываете туда этот код.

Вот как будет выглядеть сайт.

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

Как подключить сайт к хостингу

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

Ниже подробно о том, как разместить html-сайт на хостинге:

  • покупаете домен;
  • связываете его с DNS-серверами выбранного хостера;
  • через панель управления хостинга создаете новый сайт — название должно совпадать с именем домена;
  • загружаете html-файлы в директорию.

Как создать базу данных для сайта

База данных — это место для упорядоченного хранения информации в электронном виде в компьютерной системе. Управляется БД системой СУБД. Если вы все же решите создать БД, то сделать это можно несколькими способами. Один из вариантов — использование утилиты PhpMyAdmin.

Что делаете конкретно:

  • открываете раздел «Базы данных»;
  • добавляете новую базу, вписав уникальное название;
  • создаете нового пользователя для БД;
  • редактируете привилегии и права доступа.

Остается связать БД с web-ресурсом. Это происходит автоматически на этапе установки движка. Например, в WordPress надо указать название БД и имя пользователя, а также предоставить пароль для доступа к базе.

Зачем создавать простые сайты на HTML, когда есть CMS? 

Простые web-page, написанные на чистом HTML — отличное решение для одностраничных лендингов или небольших сайтов. Вот лишь несколько причин.

  1. Такие сайты маловесны, понятны и просты. Поэтому они обеспечивают моментальную скорость загрузки — работают намного быстрее, чем ресурсы на любом CMS.
  2. Создавать их можно своими руками, без навыков программирования. А это экономия средств, если поставить на бесплатный или дешевый хостинг с минимальными параметрами.
  3. На таких ресурсах нет «мусорного» кода, который добавляют большинство CMS систем.
  4. HTML-сайты невозможно взломать, так как в них отсутствуют «дырки» движка или модулей.
  5. Можно быстро делать MFA-сайты чисто для заработка на контекстной рекламе.

Напротив, сайты на CMS или конструкторах из-за сложного кода, необходимости подключения к сторонней базе данных, а также необходимости подключения тяжелых плагинов и файлов CSS — всегда медленно грузятся. 

Что касается недостатков площадок на HTML.

  1. Нет возможности удобно вести блок и наполнять его регулярно контентом, так как html-сайт статичный. Для обновления информации придется каждый раз открывать файл и вносить туда изменения. Например, если нужно вставить новое меню, то на ресурсе с множеством страниц придется редактировать каждую из них.
  2. Сложно будет расширять функционал площадки. Надо будет изменять код или вставлять новые теги. 
  3. Не будет обратной связи с пользователями. Если вам нужна интерактивность — чат, заказ звонков, корзина и т. п, то без CMS уже не обойтись. Подробнее о том, как создать сайт самостоятельно с помощью различных движков.

Заключение

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

Язык HTML | создай свой сайт

Язык HTML — основа для создания web-сайта.

Зачем, спросите вы, для создания сайта знать язык HTML, стили CSS, язык JavaScript? Ведь есть HTML-редакторы,CMS-платформы с помощью которых можно создавать неплохие сайты без глубоких знаний языка HTML, стилей CSS, языка JavaScript. Но если вы хотите создать классный сайт, востребованный пользователями — вам необходимо, хотя бы немного, изучить язык HTML. Здесь как раз действует правило 20/80. Знание 20% языка html позволяет сделать 80% работы по созданию сайта.

Рано или поздно каждый пользователь Internet начинает подумывать о создании собственного Web-сайта. Собственные Web-сайты есть у отдельных пользователей и целых компаний, у писателей и артистов. А чем вы хуже, почему бы и вам не занять свою нишу в Интернете, к тому же имея свой сайт можно неплохо зарабатывать.

Правда, если у вас есть капитал, можно не утруждать себя изучением языка html. Сейчас, имея деньги, можно купить всё, в том числе и готовый сайт. В этом можно убедиться, набрав в браузере запрос «Купить сайт».

Ну что, проверили, как вам цены? Наверное пропало желание что-то покупать, а появилось желание изучать язык HTML. Ведь сразу задаешь себе вопрос «Почему кто-то может создать сайт, а я что не смогу, что у меня не такая голова или руки не оттуда растут». Задело самолюбие? Тогда не будем зря терять время. Если вы наткнулись на этот сайт, значит вы на правильном пути.

Язык HTML от а до я

Начнем из создания своей первой web-странички и дойдем до создания интерактивных web-страниц, что лежит в основе создания современных web-сайтов.

Изучим основные принципы создания web-страниц, структурирование и оформление текста.

Освоим внедрение в web-страницы графических изображений и мультимедийных данных.

Научимся создавать таблицы и средства навигации по сайту и по Интернету.

Изучим язык CSS(стили css), на котором пишутся таблицы стилей, содержащие набор правил (стилей), описывающих оформление самой web-страницы и отдельных ее фрагментов.

А так же изучим язык Javascript — язык web-программирования, применяемый для создания поведения web-страниц (набора правил, определяющих, как Web-страница будет реагировать на действия пользователя).

Разберемся с парочкой уроков HTML для начинающих, а так же и с уроками CSS. Уроки выложены в вполне доступной для понимания форме.

Изучим теги  html, применяемые в web-программировании.

Так давайте же вместе начнем изучать язык HTML.

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

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

В блокноте легко создать сайт с самым простым оформлением. Сайты с красивым и сложным дизайном лучше делать в других сервисах.

Страница с текстом без форматирования

Шаг 1. Откройте блокнот. Можно использовать любой текстовый редактор. Мы возьмем стандартный блокнот в Windows. Нажмите ПускСтандартныеБлокнот. Либо наберите в поиске слово «Блокнот» и откройте приложение.

Блокнот в главном меню Windows 10

Блокнот в поиске Windows 10

Открытый блокнот

Шаг 2. Вставьте в блокнот код сайта. Скопируйте приведенный ниже текст и вставьте в блокнот. Это базовая структура HTML-документа.

Блокнот с кодом HTML-страницы

Шаг 3. Сохраните в формате HTML. В блокноте нажмите ФайлСохранить как. В открывшемся окне в поле название введите index.html.

Шаг 4. Откройте сохранённый файл. Просто дважды щелкните на иконку сохранённого документа. Сайт откроется в браузере, который установлен по умолчанию. Готово!

Новый сайт в браузере Microsoft Edge

Шаг 5. Отредактируйте шаблон. Снова откройте файл в блокноте и внесите нужные изменения. Используйте для этого базовые HTML-теги, они приведены ниже. Когда закончите, сохраните изменения: нажмите Ctrl+S или ФайлСохранить. После этого обновите страницу в браузере.

Слева код сайта в блокноте, справа — вид в браузере

Шаг 6. Простой сайт в блокноте создан! Чтобы он стал доступен всем людям в интернете, загрузите его на хостинг.

Базовые HTML-теги

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

У этого языка есть свои слова — теги. Они задают оформление. Выглядят, как одна или несколько латинских букв, заключенных в треугольные скобки. Например, <i> — тег для оформления текста курсивом.

Теги бывают открывающие и закрывающие:
<i> — открывающий тег,
</i> — закрывающий тег.

Чтобы применить оформление к тексту, текст нужно «обернуть» в тег. Вот так: <i>этот текст будет курсивом </i>.

Как создать простую веб страницу в Блокноте

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 163 554.

Из этой статьи вы узнаете, как создать простую веб-страницу в Блокноте (на компьютере с Windows). В качестве языка программирования будет использован HTML.

  • Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
  • Например, чтобы назвать файл веб-страницы «hello», введите hello.html .
  • Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
  • Используйте теги от <h3></h3> до <h6></h6>, чтобы создать заголовки меньшего размера.
  • После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
  • Если вы хотите продолжить редактировать HTML-документ, вернитесь в Блокнот и внесите необходимые изменения, не забывая регулярно сохранять их.
  • В HTML-документе с помощью CSS можно изменить цвет фона веб-страницы или изменить цвет шрифта.

Дополнительные статьи

Об этой статье

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества. Количество просмотров этой статьи: 163 554.

Создание Сайта HTML в Блокноте: (100)% Руководство

Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!

Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.

Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML

Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.

Создание сайта HTML в блокноте &#8211; Ваша первая страница в блокноте!

Windows

Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «Пуск» и выполнить поиск «Блокнот». Я буду делать это в Windows 10, которую не так давно приобрел и установил. Кстати, и Вам советую!

Mac

Откройте TextEdit и убедитесь, что для текстового редактора задан обычный текст, для этого выберите «Настройки»> «Новый документ»> «Выбрать обычный текст». Затем убедитесь, что отметили «Отображать HTML-файл как HTML-код» и «Отображать RTF-файл как RTF-код» в разделе «Открыть и сохранить».

Затем скопируйте и вставьте следующий код в редактор:

<h2>Мой первый заголовок</h2>

Сохранение файла HTML

Сохраните файл как «index.html» с расширением HTML. Это очень важно, если Вы не добавите .html в конец имени, это не сработает.

Примечание. Несмотря на то, что .html предпочтительнее, Вы также можете использовать .htm без буквы &#8220;L&#8221;.

Установите кодировку UTF-8, которая является предпочтительной для файлов HTML. Кодировка ANSI предназначена только для символов США и Западной Европы.

Открытие HTML-файла в браузере

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

ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.

Просмотр HTML-файла в браузере

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

Обратите внимание на путь к файлу в

файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html

Это полный путь к файлу на вашем компьютере

Центрирование текста

Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст

Перейдите в созданный html-файл и добавьте теги <center> </center> к «Моему первому заголовку», например, так: <center> <h2> Мой первый заголовок </h2> </center>

Удалите <p> Мой первый абзац. </p> на данный момент.

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

Текст заголовка должен теперь быть сосредоточен в середине веб &#8211; страницы.

Добавление видео с YouTube на Ваш сайт

Чтобы добавить видео YouTube на свой сайт: Перейдите на Youtube и найдите видео, которое хотите добавить на свой сайт.

«Щелкните правой кнопкой мыши» на видео и «Скопируйте код для вставки».

Вставка кода для вставки видео в блокнот

Вставьте код для вставки в Блокнот

Код для встраивания будет выглядеть примерно так:

<iframe width = &#8220;854&#8221; height = &#8220;480&#8221; src = &#8220;https://www.youtube.com/embed/0tWSpXrkOp4&#8221; frameborder = &#8220;0&#8221; allowfullscreen> </iframe>

Вы можете изменить ширину и высоту по своему усмотрению. Просто измените эти цифры в коде и оставьте все остальное без изменений. В этом примере мы будем использовать width = &#8220;427&#8221; и height = &#8220;240&#8221;. Вы можете установить для себя все, что Вы хотите.

Сосредоточьте видео, поместив тег <center> </center> вокруг кода вставки, скопированного с YouTube.

Кроме того, давайте изменим заголовок между тегами <h2> Мой первый заголовок </h2> на «Мой первый сайт в блокноте».

Добавление ссылки на другую страницу

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

Добавьте следующий код на свой веб-сайт прямо под видео:

<a href=&#8221;http://www.google.com&#8221;>Перейдите в Google</a>.

Обратите внимание, как ссылка центрируется с помощью тегов center. Также обратите внимание на тег <br> непосредственно перед центральным тегом &#8211; это добавляет разрыв строки между видео и ссылкой.

Теперь Вы должны увидеть ссылку под видео, которая идет в Google, если Вы нажмете на нее.

Вы можете создавать ссылки, которые идут на любую страницу, которую Вы хотите. Просто измените то, что в атрибуте href.

Если Вы хотите открыть ссылку в новом окне, когда кто-то нажимает на нее, добавьте следующий атрибут в тег ссылки: <a href=&#8221;https://www.google.com&#8221; target=&#8221;_blank&#8221; >Перейти к Google</a>

Создание 2-й страницы для вашего сайта

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

Создайте новый HTML-файл и добавьте к нему приведенный ниже код. Сохраните это и назовите это page2.html

В итоге должно получиться вот так:

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

Ссылки на Page2 с вашей главной страницы

Теперь, когда мы создали Page2, давайте изменим ссылку на первой странице, чтобы она ссылалась на page2.html.

Откройте «index.html» и измените URL, который ссылается на Google, чтобы вместо него перейти на страницу 2:

Вы находитесь на странице 2 вашего сайта

Если Вы успешно создали свою ссылку, Вы должны перейти на страницу page.html, нажав на ссылку под видео. Если по какой-то причине ваша ссылка не работает, вернитесь на несколько шагов назад и снова следуйте инструкциям. Знание того, как добавить ссылки / URL-адреса на Ваш сайт, очень полезно. Ведь в интернете это просто большая коллекция ссылок, проиндексированных Google.

Добавление классных стилей с помощью CSS

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

Скопируйте и вставьте следующий код в верхней части страницы index.html чуть ниже тега <body>. При вставке не перезаписывайте другой код.

<head>
<style media=&#8221;screen&#8221; type=&#8221;text/css&#8221;>
a <
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
>
</style>
</head>

В основном этот фрагмент кода говорит браузеру добавить цвет фона и высоту к ссылке, которую мы сделали ранее. Мы также сделали углы немного округленными, добавив радиус границы 10px. Есть много бесплатных онлайн-учебников, где Вы можете узнать больше о CSS, чтобы Ваш сайт выглядел действительно красиво.

Добавление эффекта наведения на кнопку

Последнее, что мы собираемся сделать, это добавить эффект наведения на кнопку. Эффект при наведении заставит кнопку меняться в цвете, когда Вы наводите курсор мыши.

Добавьте следующий код чуть выше закрывающего тега </style>:

a:hover <
background-color: #005170;
>

И при наведении на кнопку ссылки ее цвет будет изменяться:

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

Ваш веб-сайт должен теперь выглядеть как пример на картинке. Должен быть заголовок с именем вверху, видео посередине и кнопка внизу. Когда Вы наводите курсор мыши на кнопку, цвет должен измениться на темно-синий. Если Ваш веб-сайт выглядит неправильно, возможно, в коде есть ошибки. Пожалуйста, вернитесь на несколько шагов и попробуйте снова. Важно понять основы, прежде чем перейти к следующему шагу, где мы покажем, как разместить свой веб-сайт в Интернете, чтобы каждый мог получить к нему доступ.

Создание сайта HTML в блокноте &#8211; Сделай свой сайт Живым!

Чтобы мир мог видеть Ваш сайт, его необходимо загрузить на веб-сервер, который постоянно подключен к Интернету 24/7. Теперь мы не рекомендуем настраивать собственный сервер. Гораздо проще платить 3 или 5 долларов в месяц профессиональному провайдеру веб-хостинга, который сделает это за Вас. Я рекомендую использовать McHost и подписаться на тарифный план на год или более для запуска вашего сайта и получения БЕСПЛАТНОГО доменного имени и множество дополнительных бонусов. Этот сайт размещен на McHost, и нам это нравится. Они быстрые, безопасные и имеют отличное обслуживание клиентов.

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

ᐅ Создание HTML сайта в Москве — YouDo

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

Многие пользователи считают ХТМЛ устаревшим, но у этого языка есть ряд преимуществ, которые делают его уникальным:

  • Из-за отсутствия баз данных Mysql и файла конфигурации, сайт HTML практически невозможно взломать
  • HTML сайты загружаются намного быстрее по сравнению с CMS сайтами
  • При поиске HTML страницы находятся на более высоких позициях
  • Экономия трафика на хостинге
  • Все мета теги прописываются лично веб-мастером
  • Нет необходимости создавать резервную копию сайта

Особенности языка HTML

Конечно, некоторые функции недоступны на статическом HTML сайте. Например, сложные корпоративные сайты или интернет-магазины подразумевают частое внесение изменений, что довольно сложно сделать на ХТМЛ. Поэтому нередко используется CMS система, но даже в этом случае будет необходимо знание HTML и CSS. Разработка сайта на HTML гарантирует то, что страницы будут интерпретироваться различными интернет-проводниками и без проблем отображаться на любом браузере. Данный язык также позволяет:

  • Подстроить представление страниц под условия каждого браузера
  • Выполнять профессиональною SEO оптимизацию сайта
  • Создавать простые игры и интерактивные стартовые страницы
  • Выполнять создание сайтов через HTML, используя только блокнот
  • HTML5 позволяет воспроизводить аудио и видео файлы без подключения вспомогательных расширений

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

Как выбрать программиста

Учитывая огромное количество IT компаний доступных в любом городе России, можно довольно быстро найти специалиста готового создать простой или сложный сайт в HTML. Трудность состоит в том, чтобы найти действительно профессионального разработчика. В этом случае, вам поможет он-лайн биржа YouDo.com. На данном ресурсе вы найдете только высококлассных специалистов, которые предлагают такие услуги как:

  • Разработка сайтов на HTML и CSS
  • Изготовление сайтов под ключ
  • Разработка дизайна сайта
  • Продвижение сайта в поисковых системах
  • Обновление ПО
  • Модернизация сайта

Кроме того, стоимость услуг мастеров зарегистрированных на YouDo.com, приятно удивит вас. Ознакомьтесь с полным перечнем услуг и цен на нашем сайте.

Как сделать сайт?

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

Что такое сайт?

Сайт — это набор файлов. Эти файлы хранятся на сервере (это особый компьютер). Как только вы открываете браузер (Chrome, Firefox, Safari и т.п.) и переходите по ссылке, то вы скачиваете html файл с сервера. Затем браузер обрабатывает этот файл и показывает вам страницу сайта.

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

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

Что такое хостинг?

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

Серверы хостинга имеют бесперебойное электропитание (с дизельными генераторами на улице на всякий случай) и несколько интернет провайдеров. Дублирующие меры необходимы для бесперебойного доступа к сайту даже в случае чрезвычайного происшествия. Для размещения своего сайта можно использовать и свой домашний компьютер, но он должен быть включен 24/7 и иметь постоянный доступ к высокоскоростному интернету, чтобы сайт работал без перебоев. А так же иметь квалифицированную техническую поддержку для настройки серверного программного обеспечения. Ещё желательно иметь не простой компьютер, а корпоративного уровня с высокой отказоустойчивостью, в котором все системы продублированы. Такой компьютер стоит дорого, поэтому выгоднее заказать услуги хостинга у хостинговой компании.

Если у вас ещё нет хостинга, то стоит начать заказывать его уже сейчас. С рабочим хостингом и доменом вникнуть в тему гораздо проще. «Виртуальный хостинг» — это то, что надо для начала работы.

Что такое домен?

Домен — это имя сайта. К примеру, «mousedc.ru» или «yandex.ru». Чтобы соединить сервер, на котором хранятся данные сайта и доменное имя, надо в настройках домена написать ip адрес сервера. Не переживайте насчёт этого действия, если закажите хостинг у нас — сотрудники техподдержки помогут советом и делом. Не бойтесь писать нам, решим все проблемы.

Домен оформляется либо на частное лицо, либо на юридическое с указанием данных документов. Нельзя купить домен просто указав адрес электронной почты. К примеру, если необходимо зарегистрировать домен на частное лицо, то нужно указать паспортные данные владельца домена. Паспортные данные не будут видны никому в интернете. Но без них невозможно купить домен. Аналогично для юридических лиц — необходимо указать данные регистрационных документов.

Какие сайты бывают?

Бывают «статичные» и «динамичные» сайты. Это не общепринятое обозначение, но оно поможет понять как работают сайты. Поэтому будем использовать это название далее в статье.

Статичные сайты — это сайты, которые состоят только из HTML файлов (страниц сайта). Один HTML файл — это одна страница сайта. Все эти файлы находятся на сервере. HTML файлы не могут изменяться самостоятельно. Только администратор сервера может изменить их. Поэтому назовём статичными сайты, которые построены на HTML файлах.

Если хотите сделать сайт самостоятельно и не знаете с чего начать, то рекомендуем онакомиться с нашими обучающими статьями по HTML. Внутреннее содержание тих таких сайтов выгладят как HTML файлы, разложенные по папкам. К примеру, вот структура сайта будет у сайта с двумя страницами: титульной (главной) страницей и страницей «о компании»: — здесь:
  • mousedc.ru — это так называемая «корневая» папка сайта
  • about.html — это файл страницы «о компании»
  • index.html — это файл титульной страница сайта
Рассмотрим страницу «о компании» подробнее. Если захотите увидеть страницу сайта «о компании», то надо открыть страницу «mousedc.ru/about.html». Обратите внимание не слеш «/», он ставится по логике файлов и папок. Если бы страница «about.html» находилась в какой-то подпапке, то путь был бы длиннее. К примеру: — в таком случае, чтобы открыть страницу about.html, надо набрать в адресной строке браузера «mousedc.ru/folder/about.html».

Теперь обратим внимание на титульную страницу сайта, файл которой называется «index.html». В интернете принято называть титульную страницу как index.html. Эта страница так часто используется, что принято по умолчанию проверять а не запрашивается ли она. К примеру, если вы перейдёте по ссылке «mousedc.ru», то скачаете и откроете именно файл index.html. Эта же страница будет ещё и по адресу «mousedc.ru/index.html». Поэтому прибавлять к адресу «/index.html» нет необходимости.

Как загрузить HTML файлы на сервер?

Чтобы загрузить файлы на сервер, используется либо панель администратора на хостинге, либо специальные программы. Зайдите в личный кабинет пользователя на хостинге и найдите раздел управления файлами. Там есть возможность загрузить файл на сервер. Если возникнут вопросы — обязательно напишите нам в техподдержку. Мы всё расскажем и научим. Вы можете прочитать подробнее про программу для загрузки файлов на сервер «FileZilla» в статье «Загрузка файлов на сайт с помощью FileZilla». Рекомендуем использовать эту программу для дальнейшей работы с сайтом при загрузке/выгрузки файлов с сервера.

И рекомендуем ознакомиться со статьями, описывающими редакторы файлов, у которых есть возможность изменять файлы на удалённом сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»

Если вы уже начали загружать html файлы на сервер, то догадались, что сайты из статичных файлов довольно громоздки. К примеру, если вам надо загрузить новую страницу сайта, то вы скопируете старую страницу и чуть-чуть измените её содержание (контент), не трогая визуальное оформление остальных частей страницы. Этот способ будет действовать до тех пор, пока не появится необходимость изменять и загружать по 10 файлов в день. В этот момент надо задуматься над программированием и связью с базой данных.

Программирование сайтов

Существуют языки программирования, которые позволяют модифицировать страницу «на лету», во время запроса. Это сильно упрощает жизнь тем, кто создаёт сайты. Представьте, что на сервере вместо «index.html» лежит файл «index.php». Расширение «.php» означает, что этот файл может быть обработан языком программирования. И в зависимости от переданных параметров выдать страницы с разным содержанием.

Таким параметром для динамичных сайтов является строка запроса. К примеру, если зайдёте на новостной сайт через запрос:

mousedc.ru/index.php?novost=1

или

mousedc.ru/index.php?novost=2

То страница сайта выдаст новость под номером 1 или 2, потому что в запросе (в адресной строке) указан параметр «novost» со значением равным «1» и «2». Всё, что находится после знака вопроса «?» в строке запроса, является параметром (параметров может быть несколько).

Обратите внимание, что в двух примерах запрос идёт на один и тот же файл «mousedc.ru/index.php». Именно в этом состоит сила динамичных сайтов: один файл может выдавать совершенно разный результат в зависимости от передаваемых параметров и от того, как запрограммировать его. Если Вы заинтересовались темой программирования, то рекомендуем ознакомиться с разделом наших обучающий статей по программированию на PHP.

База данных

Как вы уже заметили из предыдущего параграфа, новость под номером 1 и новость под номером 2 должны откуда-то браться. Для хранения подобных вещей люди придумали «базы данных». Если утрировать, то общение с базой происходит примерно так:
Страница сайта: Эй, база данных, дай мне новость с номером 2!
База данных: Вот тебе весь текст новости, которая сохранёна под номером 2.
Это упрощённый пример работы базы данных и взаимодействия. Если Вы заинтересовались темой программирования с обращениями к базе данных, то рекомендуем ознакомиться с разделом наших обучающий статей по базам данных и MySQL. Там можно найти базовую информацию и примеры того, как большинство сайтов взаимодействуют с базой данных.

Система управления контентом

Чтобы не учить язык программирования PHP и не программировать взаимодействие с базой данных, а просто сделать свой сайт, люди начали разрабатывать CMS (Content Management System — системы управления контентом).

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

Одна из самых популярных и простых систем для новичков — это WordPress. Эта система позволяет человеку без знаний создать личный блог. Владелец блога может ничего не понимать в программировании, но сможет установить и настроить систему, писать статьи и размещать фотографии. Чтобы установить WordPress на сервер, закачайте архив с системой на сервер, распакуйте и перейдите по адресу своего сайта. Затем следуйте инструкциям по установке. Иногда даже WordPress можно установить в специальном меню хостинга — он сам скачается и распакуется.

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

С чего начать создание сайта?

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

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

Добавление страниц на ваш сайт—ArcGIS Enterprise Sites

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

Подсказка:
Добавьте страницы, чтобы организовать материалы сайта по разделам или темам. Это позволит сохранить загрузку и производительность вашего сайта и даст посетителям сайта возможность изучать содержание в своем собственном темпе.

Ключевой рабочий процесс

Создание страницы

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

  1. Откройте сайт в режиме редактирования.
  2. На боковой панели щелкните кнопку страниц .
  3. Щелкните Новая страница, введите имя страницы и щелкните Далее.

    Указанное имя также используется для автоматического создания URL-адреса страницы. Пробелы заменяются дефисами, а все специальные символы удаляются. Все URL-адреса страниц начинаются с /pages/. О редактировании URL-адреса см. Редактирование URL-адреса страницы.

  4. Щелкните Сохранить.
  5. Элемент Site Page добавлен на портал и автоматически опубликован для группы основной команды сайта. Более подробно о том, кто может видеть и редактировать страницу, см. Публикация страниц.

Открытие страницы в режиме редактирования

Чтобы отредактировать страницу, выполните следующие действия.

Из окна браузера

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

  1. Откройте URL страницы в новом окне браузера и щелкните Войти на глобальной панели навигации сайта.
  2. Щелкните кнопку редактирования , чтобы открыть редактор сайтов.

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

Из Sites

Если глобальная навигация отключена для сайта, вы можете открыть сайт в приложении Sites:

  1. Войдите в Sites.
  2. На странице Обзор щелкните Управлять в карточке Cайты.
  3. Щелкните на странице сайта, чтобы открыть редактор сайта.
  4. Нажмите кнопку и выберите страницу из списка страниц сайта.

Из портала ArcGIS Enterprise

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

  1. Войдите в ArcGIS Enterprise.
  2. Найдите элемент сайта Страница сайта в разделе Ресурсы.
  3. Щелкните элемент, чтобы открыть Информацию об элементе и щелкните Настроить приложение.

Добавление существующей страницы

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

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

  1. Откройте сайт в режиме редактирования.
  2. На боковой панели щелкните кнопку страниц .
  3. Щелкните Страница ссылок, щелкните на имени страницы и укажите Выбрать.
  4. Дополнительно, обновите slug страницы.
  5. Щелкните Страница ссылок.

    Для просмотра страницы щелкните на ее имени на боковой панели в списке ниже Главной.

Включение краткой информации о странице

Краткая информация о странице появляется в результатх поиска и при публикации ссылки на страницу в социальных сетях.

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

  1. Откройте сайт в режиме редактирования.
  2. Щелкните кнопку страниц .
  3. В списке страниц на боковой панели щелкните страницу, которую хотите редактировать.
  4. Щелкните Информация о странице.
  5. Введите сводку в поле Краткая информация страницы.
  6. Щелкните Сохранить.

Редактирование URL-адреса страницы

Текст в конце URL-адреса страницы называется «описательная часть (slug)». Его можно изменить, чтобы он соответствовал существующим стандартам вашей организации. Полный URL-адрес страницы будет в следующем формате: https://webadaptorhost/webadaptorname/apps/sites/#/your-site-name/pages/your-new-page. Будьте внимательны, так как обновление URL может привести к повреждению ссылок, если использовалась предыдущая ссылка.

  1. Откройте сайт в режиме редактирования.
  2. Щелкните кнопку страниц .
  3. В списке страниц щелкните страницу, которую хотите редактировать.
  4. Щелкните Информация о странице.
  5. Введите описательную часть (слаг) в поле Описательная часть страницы.
  6. Щелкните Сохранить и опубликуйте ваши изменения.

Добавление ресурсов на страницу

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

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

Однако вы не можете редактировать верхний или нижний колонтитул страницы,так как они унаследованы от сайта страницы.

  1. На боковой панели щелкните кнопку страниц в правом верхнем углу.
  2. В списке страниц щелкните страницу, которую хотите редактировать.
  3. В редакторе страниц перетащите карточку строки в компоновку страницы, чтобы начать оформление страницы.
    Подсказка:
    Определенные карточки, включая карточку галерея, автоматически заполняются применимыми элементами, опубликованными в группе ресурсов или группе основной команды сайта (библиотеке ресурсов). Если вы хотите добавить дополнительные элементы на страницу, используйте выборку вручную, если карточка ее поддерживает, или добавьте элемент или группу при помощи библиотеки ресурсов сайта. Однако обратите внимание, что только элементы, опубликованные в библиотеке ресурсов сайта, можно обнаружить в результатах поиска на сайте.
  4. Проверьте, что ресурсы, отображенные на сайте, доступны для соответствующей аудитории. Более подробно см. раздел Настройка элементов управления общим доступом.
  5. Щелкните Вид для предварительного просмотра страницы.
  6. Щелкните Сохранить и опубликовать.

Публикация страниц

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

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

Добавление ссылок меню

Добавьте ссылки на страницу с сайта или других страниц при помощи ссылок меню или HTML.

Использование ссылок меню

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

Используйте HTML

Чтобы создать гиперссылку на страницу используйте синтаксис HTML <a>. Использование в теге <a> относительного, а не абсолютного пути, предотвратит полное обновление страницы при щелчке по этой ссылке.

  1. Добавьте текстовую карту или откройте существующую карту на макете страницы и щёлкните Вид кода на панели инструментов.
  2. Вставьте тег <a> там, где должна быть ссылка.
  3. Вставьте слаг для страницы, которую вы хотите добавить, между атрибутом href=»» вашего тега <a>, например, <a href=»#/mysite/pages/target-page»>Visit the linked page</a>.
  4. Щелкните Сохранить на панели навигации редактирования, чтобы подтвердить изменения, и щелкните Просмотреть, чтобы протестировать новую ссылку.
  5. Подсказка:

    Для того, чтобы эта ссылка была открыта в новой вкладке, добавьте target=»_blank» сразу после своего атрибута href в теге <a>.

Окончательное удаление страницы

Если вы хотите совсем удалить страницу, щелкните кнопку удаления . Элемент Site Page будет окончательно удален из ArcGIS Enterprise и всех других групп, для которых он был опубликован.


Отзыв по этому разделу?

Основы JavaScript — Изучение веб-разработки

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:

  • Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
  • Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
  • Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

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

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

  1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем main.js. Сохраните его в вашей папке scripts.
  2. Далее перейдите в ваш index.html файл и введите следующий элемент на новой строке прямо перед закрывающим тегом </body>:
    <script src="scripts/main.js"></script>
  3.  В основном этот код выполняет ту же работу, что и элемент <link> для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).
  4. Теперь добавьте следующий код в файл main.js:
    var myHeading = document.querySelector('h2');
    myHeading.textContent = 'Hello world!';
  5. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:

Примечание: Причиной, по которой мы поставили элемент <script> в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.

Что произошло?

Итак, ваш заголовок текста был изменён на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector(), захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) «Hello world!».

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

Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let, за которым следует любое имя, которым вы захотите её назвать:

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

Примечание: JavaScript чувствителен к регистру — myVariable отличается от переменной myvariable. Если у вас возникают проблемы в вашем коде, проверьте регистр!

Примечание: Для получения более подробной информации о разнице между var и let, смотрите:  Разница между var и let.

После объявления переменной вы можете присвоить ей значение:

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

Вы можете получить значение, просто вызвав переменную по имени:

После установки значения переменной  вы можете изменить его позже:

var myVariable = 'Bob';
myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

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

Комментарии

Комментарии — это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:

Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:

Операторы

operator (en-US) — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

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

Примечание: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите "35" + "25" в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25, то получите правильный результат.

Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция if ... else. Например:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

Выражение внутри if ( ... ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else.

Функции

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

  1. var myVariable = document.querySelector('h2');

Эти функции, document.querySelector и alert, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — (), скорее всего, это функция. Функции часто принимают аргументы — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.

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

Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика (en-US), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем <html> элемент и устанавливаем ему обработчик свойства onclick (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

document.querySelector('html').onclick = function() {};

эквивалентно

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Просто так короче.

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

Добавление смены изображения

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

  1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
  2. Сохраните изображение в вашу папку images.
  3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
  4. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Сохраните все файлы и загрузите index.html в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

Итак, мы сохраняем ссылку на наш элемент <img> в переменной myImage. Далее, мы создаём этой переменной обработчик события onclick с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

  1. Мы получаем значение из атрибута src изображения.
  2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
    1. Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента <image>.
    2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src, возвращаясь к первоначальному пути изображения, каким он был изначально.

Добавление персонального приветственного сообщения

Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

  1. В index.html, добавьте следующую строку перед элементом <script>:
    <button>Change user</button>
  2. В main.js, добавьте следующий код в конец файла, точно так, как написано — он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h2');
  3. Теперь добавьте следующую функцию для установки персонализированного приветствия — она ничего не будет делать, но мы будем использовать её позже:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Эта функция содержит функцию prompt() (en-US), которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием 'name', и устанавливаем это значение в переменную myName, которая содержит имя введённое пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
  4. Затем добавьте блок if ... else — мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте name. Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName().
  5. Наконец, установите обработчик события onclick на кнопку. При нажатии кнопки запускается функция setUserName(). Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
    myButton.onclick = function() {
      setUserName();
    }
    

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

Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

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

Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу изучение JavaScript.

Основы HTML — Изучите веб-разработку

HTML ( H yper T ext M arkup L язык) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в виде набора абзацев, списка маркированных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам общее представление о HTML и его функциях.

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

.
 Мой кот очень сварливый
 

Если бы мы хотели, чтобы строка стояла отдельно, мы могли бы указать, что это абзац, заключив его в теги абзаца:

  

Мой кот очень сварливый

Структура элемента HTML

Давайте рассмотрим этот элемент абзаца немного подробнее.

Основные части нашего элемента следующие:

  1. Открывающий тег: Состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие угловые скобки . Это указывает, где элемент начинается или начинает действовать — в данном случае, где начинается абзац.
  2. Закрывающий тег: Это то же самое, что и открывающий тег, за исключением того, что он включает косую черту перед именем элемента.Здесь указывается, где заканчивается элемент — в данном случае там, где заканчивается абзац. Отсутствие закрывающего тега является одной из стандартных ошибок новичков и может привести к странным результатам.
  3. Содержимое: Это содержимое элемента, в данном случае это просто текст.
  4. Элемент: Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.

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

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

Атрибут всегда должен иметь следующее:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута заключено в открывающие и закрывающие кавычки.

Примечание. Значения простых атрибутов, которые не содержат пробелов ASCII (или любых символов " ' ` = < > ) могут оставаться без кавычек, но рекомендуется не заключать их в кавычки. заключайте в кавычки все значения атрибутов, так как это делает код более последовательным и понятным.

Вложенные элементы

Вы также можете помещать элементы внутрь других элементов — это называется вложением . Если бы мы хотели указать, что наша кошка очень сварливая, мы могли бы обернуть слово «очень» в элемент , что означает, что слово должно быть сильно выделено:

  

Мой кот очень сварлив.

Однако вам необходимо убедиться, что ваши элементы правильно вложены.В приведенном выше примере мы сначала открыли элемент

, затем элемент ; поэтому мы должны сначала закрыть элемент , затем элемент

. Следующее неверно:

  

Мой кот очень сварливый.

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

Пустые элементы

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

.
  Мое тестовое изображение
  

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

Анатомия HTML-документа

Это обобщает основы отдельных элементов HTML, но сами по себе они неудобны. Теперь мы рассмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте вернемся к коду, который мы поместили в наш пример index.html (с которым мы впервые познакомились в статье Работа с файлами):

  

  <голова>
    <мета-кодировка="utf-8">
    Моя тестовая страница
  
  <тело>
    Мое тестовое изображение
  

  

Здесь у нас есть следующее:

  • — тип документа. Это необходимая преамбула. В глубине веков, когда HTML был молод (около 1991/92), типы документов должны были служить ссылками на набор правил, которым HTML-страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие действия. полезные вещи. Однако в наши дни они мало что делают и в основном просто необходимы, чтобы убедиться, что ваш документ ведет себя правильно.Это все, что вам нужно знать на данный момент.
  • — элемент . Этот элемент охватывает весь контент на всей странице и иногда называется корневым элементом.
  • — элемент . Этот элемент действует как контейнер для всего материала, который вы хотите включить в HTML-страницу, который не является содержимым, которое вы показываете зрителям вашей страницы. Это включает в себя такие вещи, как ключевые слова и описание страницы, которые вы хотите отображать в результатах поиска, CSS для стилизации нашего контента, объявления наборов символов и многое другое.
  • — этот элемент задает набор символов, который должен использовать ваш документ, равный UTF-8, который включает в себя большинство символов подавляющего большинства письменных языков. По сути, теперь он может обрабатывать любой текстовый контент, который вы можете на него поместить. Нет причин не устанавливать это, и это может помочь избежать некоторых проблем в дальнейшем.
  • — элемент </code>. Это устанавливает заголовок вашей страницы, который отображается на вкладке браузера, в которую загружается страница.Он также используется для описания страницы, когда вы добавляете ее в закладки/избранное. </li> <li> <code> <body></body> </code> — элемент <code> <body> </code>. Он содержит <em> весь </em> контент, который вы хотите показывать веб-пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, воспроизводимые звуковые дорожки или что-то еще. </li> </ul> <p> Обратим внимание снова на элемент <code> <img> </code>: </p> <pre> <code> <img src="images/firefox-icon.png" alt="Мое тестовое изображение"> </code> </pre> <p> Как мы уже говорили ранее, он вставляет изображение на нашу страницу в том месте, где оно появляется. Он делает это через атрибут <code> src </code> (источник), который содержит путь к нашему файлу изображения. </p> <p> Мы также добавили атрибут <code> alt </code> (альтернативный). В этом атрибуте вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам: </p> <ol> <li> Они слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы зачитывать им замещающий текст.</li> <li> Что-то пошло не так, из-за чего изображение не отображается. Например, попробуйте намеренно изменить путь внутри атрибута <code> src </code>, чтобы сделать его неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения: </li> </ol> <p> </p> <p> Ключевые слова для замещающего текста: "описательный текст". Замещающий текст, который вы пишете, должен предоставить читателю достаточно информации, чтобы получить представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совсем не годится.Гораздо лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю». </p> <p> Попробуйте придумать лучший замещающий текст для изображения. </p> <p> В этом разделе рассматриваются некоторые основные элементы HTML, которые вы будете использовать для разметки текста. </p> <h4><span class="ez-toc-section" id="i-48"> Заголовки </span></h4> <p> Элементы заголовков позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как книга имеет основное название, заголовки глав и подзаголовки, HTML-документ тоже может.HTML содержит 6 уровней заголовков, <h2><span class="ez-toc-section" id="i-49"> - </span></h2><h6><span class="ez-toc-section" id="_3_4">, хотя обычно вы будете использовать максимум от 3 до 4: </span></h6> </p> <pre> <code> <h2><span class="ez-toc-section" id="i-50">Мой основной заголовок</span></h2> <h3><span class="ez-toc-section" id="i-51">Мой заголовок верхнего уровня</span></h3> <h4><span class="ez-toc-section" id="i-52">Мой подзаголовок</span></h4> <h5><span class="ez-toc-section" id="i-53">Мой подподзаголовок</span></h5> </code> </pre> <p> <strong> Примечание: </strong> Все в HTML между <code> <!-- </code> и <code> --> </code> является <strong> HTML-комментарием </strong> . Браузер игнорирует комментарии при отображении кода. Другими словами, на странице их не видно — только в коде.HTML-комментарии позволяют вам писать полезные заметки о вашем коде или логике. </p> <p> Теперь попробуйте добавить подходящий заголовок на HTML-страницу прямо над элементом <code> <img> </code>. </p> <p> <strong> Примечание: </strong> Вы увидите, что ваш уровень заголовка 1 имеет неявный стиль. Не используйте элементы заголовков, чтобы сделать текст больше или жирнее, потому что они используются для доступности и других причин, таких как SEO. Постарайтесь создать осмысленную последовательность заголовков на своих страницах, не пропуская уровни.</p> <h4><span class="ez-toc-section" id="i-54"> Абзацы </span></h4> <p> Как объяснялось выше, элементы <code> <p> </code> предназначены для содержания абзацев текста; вы будете часто использовать их при разметке обычного текстового контента: </p> <pre> <code> <p>Это один абзац</p> </code> </pre> <p> Добавьте свой образец текста (он должен быть из <em> Как будет выглядеть ваш сайт? </em> ) в один или несколько абзацев, разместив их непосредственно под вашим <code> элементом <img> </code>. </p> <h4><span class="ez-toc-section" id="i-55"> Списки </span></h4> <p> Большая часть веб-контента состоит из списков, и в HTML есть специальные элементы для них.Списки разметки всегда состоят как минимум из 2-х элементов. Наиболее распространенными типами списков являются упорядоченные и неупорядоченные списки: </p> <ol> <li> <strong> Неупорядоченные списки </strong> предназначены для списков, в которых порядок элементов не имеет значения, например для списка покупок. Они заключены в элемент <code> <ul> </code>. </li> <li> <strong> Упорядоченные списки </strong> предназначены для списков, где порядок элементов имеет значение, например, рецепт. Они заключены в элемент <code> <ol> </code>. </li> </ol> <p> Каждый элемент в списках помещается в элемент <code> <li> </code> (элемент списка).</p> <p> Например, если мы хотим превратить часть следующего фрагмента абзаца в список </p> <pre> <code> <p>В Mozilla мы представляем собой глобальное сообщество технологов, мыслителей и строителей, работающих вместе... </p> </code> </pre> <p> Мы можем изменить разметку на эту </p> <pre> <code> <p>В Mozilla мы являемся глобальным сообществом</p> <ул> <li>технологи</li> <li>мыслители</li> <li>строители</li> </ul> <p>работаем вместе... </p> </code> </pre> <p> Попробуйте добавить упорядоченный или неупорядоченный список на страницу примера. </p> <p> Ссылки очень важны — именно они делают сеть сетью! Чтобы добавить ссылку, нам нужно использовать простой элемент — <code> <a> </code> — «а» является краткой формой для «якоря». Чтобы превратить текст абзаца в ссылку, выполните следующие действия: </p> <ol> <li> Выберите текст. Мы выбрали текст «Манифест Mozilla». </li> <li> Поместите текст в элемент <code> <a> </code>, как показано ниже: </li> <li> Присвойте элементу <code> <a> </code> атрибут <code> href </code>, как показано ниже: <pre> <code> <a href="">Манифест Mozilla</a> </code> </pre> </li> <li> Заполните значение этого атрибута веб-адресом, на который должна быть ссылка: <pre> <code> <a href="https://www.mozilla.org/en-US/about/manifesto/">Манифест Mozilla</a> </code> </pre> </li> </ol> <p> Вы можете получить неожиданные результаты, если пропустите часть <code> https:// </code> или <code> http:// </code>, называемую протоколом <em> </em>, в начале веб-адреса. После создания ссылки щелкните по ней, чтобы убедиться, что она отправляет вас туда, куда вы хотели. </p> <p> <strong> Примечание: </strong> <code> href </code> поначалу может показаться довольно неясным выбором имени атрибута. Если вам трудно его запомнить, помните, что это означает <em> <strong> h </strong> ypertext <strong> ref </strong> erence </em> .</p> <p> Добавьте ссылку на свою страницу сейчас, если вы еще этого не сделали. </p> <p> Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, похожую на приведенную ниже (вы также можете просмотреть ее здесь): </p> <p> </p> <p> Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub. </p> <p> Здесь мы только поверхностно коснулись HTML. Чтобы узнать больше, перейдите к нашей теме Learning HTML. </p> <h2><span class="ez-toc-section" id="_-_9"> Создайте и закодируйте свой первый веб-сайт за 9 простых шагов </span></h2> <p> Изучение того, как начать программировать веб-сайт, может быть сложной задачей.Если вы не знакомы с языками кодирования, это еще сложнее. Но научиться кодировать веб-сайт легко с правильным руководством. </p> <p> В этом руководстве мы рассмотрим простой дизайн веб-сайта для начинающих с помощью шаблона веб-страницы HTML. Это самый простой способ закодировать веб-сайт. Это процесс, который сэкономит ваше время в долгосрочной перспективе, позволяя создать профессионально разработанный веб-сайт для ваших посетителей! </p> Черный мужчина перед экраном компьютера кодирует мобильное приложение, веб-разработку, компьютерное программирование (Фото из Envato Elements) <p> В этом руководстве по коду веб-дизайна мы будем использовать шаблон из Envato Elements.Если вы хотите просмотреть другие варианты шаблонов веб-дизайна, просмотрите коллекцию шаблонов кода веб-дизайна Envato Elements. Вы найдете профессиональные, отзывчивые варианты, которые готовы настроить для вашего следующего проекта. </p> <h3><span class="ez-toc-section" id="i-56"> Прежде чем мы начнем наш веб-дизайн Код </span></h3> <p> Вероятно, вам не терпится узнать, как начать программировать веб-сайт. Но просмотр кода может быть пугающим, если вы новичок. Итак, прежде чем мы углубимся, давайте взглянем на некоторые полезные термины, которые нужно знать, чтобы вы могли понять изменения, которые вы вносите на следующих этапах кодирования веб-сайта.</p> <ul> <li> <strong> HTML </strong> : Язык гипертекстовой разметки — это язык, который организует веб-страницы. Здесь добавляются такие вещи, как текст и ссылки. В этом уроке мы будем работать с HTML. </li> <li> <strong> Теги </strong> : Теги — это то, как код работает в HTML. Они пишутся между угловыми скобками. Один тег открывается (например,  <code> <title> </code> ), а другой закрывается (например,  <code> ). Текстовое содержимое размещается между открывающим и закрывающим тегами.
  • PHP : серверный язык сценариев, который в основном используется для создания веб-приложений.Вы увидите, что он используется для сбора данных. Почти все контактные формы работают с файлом PHP.
  • Комментарии : Комментарии — это примечания, оставленные автором кода. Они ничего не меняют на странице, но позволяют увидеть, что должен делать код.

Что нам понадобится

Если вы хотите следовать этому простому руководству по коду веб-дизайна, вам понадобится несколько вещей:

У вас есть все необходимое? Тогда давайте начнем!

1.Изменить заголовок и заголовок

В этом руководстве мы работаем с файлом index-onepage-personal.html . Это простой дизайн веб-сайта для начинающих. Откройте его в Sublime Text и браузере после распаковки папки Okno ZIP. Sublime Text позволит вам редактировать HTML-код для дизайна веб-сайта, а ваш браузер позволит вам видеть изменения в режиме реального времени.

В Sublime Text найдите тег title под комментарием title. При этом изменяется имя, отображаемое на вкладке или в окне страницы.В простом HTML-коде веб-сайта это будет выглядеть так:

.
 
Okno — идеальный многоцелевой HTML5-шаблон 

Замените текст на название вашего сайта. Поскольку это персональный шаблон одностраничного сайта, скорее всего, это будет ваше собственное имя. Сохраните файл в Sublime Text и обновите страницу в браузере. Вы увидите изменения на вкладке вверху окна:

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

 

Хорошо
Хорошо
 

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

Поместите копии своего логотипа в папку img , расположенную внутри папки assets . Измените имена файлов в коде дизайна веб-сайта ( logo-light.png  и  logo-dark.png ), чтобы они соответствовали именам файлов вашего логотипа.

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

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

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

 
<дел>
<ул>
  • Начать
  • Услуги
  • Навыки
  • Опыт
  • Отзывы
  • Работает
  • Контакт
  • Сохраните простой HTML-код веб-сайта для этого проекта веб-дизайна и обновите страницу, чтобы увидеть изменения.

    2. Обновите свою личную информацию

    Теперь пора приступить к редактированию вашей информации в коде веб-дизайна.

    Давайте посмотрим на раздел, начинающийся с комментария Section/Home . Что здесь можно изменить? Мы можем заменить фоновое изображение и аватар. Вы также сможете добавить свое имя, должность, область знаний и другую информацию.

    Начнем со смены изображений. Вы можете редактировать фоновое фото из bg-image div и аватар из тега img внутри контейнера v-center div .В отличие от изменения текста, вам потребуется внести изменения в сам тег img через исходный атрибут. Атрибут src сообщает веб-странице, где можно найти фотографию.

    Если мы посмотрим на атрибут src для фоновой фотографии, мы увидим, где найти изображение. В Finder или проводнике перейдите к assets > img > photos , чтобы самостоятельно найти файл изображения.

    Чтобы изменить фоновое изображение в простом HTML-коде вашего веб-сайта, подготовьте замену JPG с точными размерами исходного файла.Дайте вашей фотографии простое имя и поместите ее в папку photos  . Теперь измените имя в атрибуте src и сохраните.

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

    Смена аватара - тот же процесс. Поместите снимок головы в папку avatar внутри папки img .Замените avatar01 названием вашей фотографии. Сохраните простой HTML-код веб-сайта для этого проекта веб-дизайна в Sublime Text и обновите браузер, чтобы увидеть, как он выглядит сейчас.

    Изменить имя и биографию

    Редактирование вашего имени и биографии выполняется в несколько простых шагов. Найдите тег h2 в col-md-9 div и добавьте свое имя. В строке ниже введите название своей должности.

      

    Майк Ли

    Профессиональный интерфейсный разработчик

    Под комментарием Section / Home есть три списка описаний.Они определяются тегом dl . Здесь вы можете кратко добавить дополнительную профессиональную информацию. Как вы можете видеть в браузере, поля по умолчанию: Специальность , Дата рождения , Предыдущая компания , Годы опыта и Текущая компания . Если вы хотите поделиться этой информацией, отредактируйте теги dd в каждом dl . Если вы хотите изменить весь этот раздел, вам нужно изменить теги dt в каждом теге dl .

     <дел>
    <дл>
    
    Специализация
    Внешняя разработка
    Многолетний опыт
    6+

    Внесли изменения? Сохраните файл HTML-кода простого дизайна веб-сайта, обновите страницу и просмотрите свои изменения.

    Обратите внимание, что посетители могут загрузить ваше резюме или резюме, нажав кнопку.Чтобы настроить это, мы сначала создадим папку под названием cv в папке assets . Затем мы поместим наше резюме в эту новую папку.

    Теперь давайте посмотрим на HTML и выясним, как заставить это работать. Перейдите к строке Download CV в образце кода для дизайна веб-сайта:  

      

    Мы собираемся заменить # в атрибуте href на assets/cv/name-of-cv-file.расширение . Чтобы сделать резюме загружаемым, добавьте атрибут download после атрибута href . Строка в вашем HTML-коде для дизайна веб-сайта теперь должна выглядеть так: 

    .
      

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

    3. Раздел услуг

    Давайте добавим услуги, которые мы предлагаем, в наш HTML-код для дизайна веб-сайта. Если вы изменили название этого раздела или любых других разделов на шаге 1, вы все равно можете следовать остальной части руководства. Просто меняйте тег h6 на каждом шаге.

    Измените имя первой службы с помощью тега Mobile Apps h5 . Это может быть любая услуга, которую вы предлагаете. В следующей строке дайте краткое описание вашей услуги в теге p .Сохраните файл кода дизайна сайта и посмотрите изменения в своем браузере.

    Похоже, мы можем столкнуться с проблемой. Если вы изменили название службы, значок мобильного приложения больше не совпадает. Это не проблема. Okno использует значки Themify. Это бесплатные веб-иконки для личного и коммерческого использования.

    Найдите соответствующий значок по ссылке Themify выше. Добавьте название атрибута значка в тег i . В этом примере я буду использовать значок ti-shortcode .Посмотрим, как это выглядит сейчас:

    Так лучше. Повторите этот процесс для остальных ваших служб, чтобы отредактировать строки Desktop Apps , Graphic Design , HTML/CSS Development и AngularJS строк примера кода для дизайна веб-сайта.

    4. Добавьте свои навыки

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

    Вы можете изменить навыки, которые должны показывать посетителям. Названия этих навыков находятся в теге strong под комментарием Section/Skills .

    Насколько хорошо вы владеете этим навыком? Чтобы показать это на вашем сайте, нам нужно вернуться к индикатору выполнения div . В теге div мы собираемся отредактировать атрибут aria-valuenow , а также атрибут style .Эти значения будут использовать одно и то же число для представления вашего уровня навыков из 100. Если вы хотите поставить 97 из 100, внесите это изменение в оба атрибута. Ваши изменения должны соответствовать приведенному ниже коду.

     <дел>
    <дел>
    
    97%
    Adobe Photoshop

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

    5. Образование и опыт работы

    Это раздел нашего кода веб-дизайна, который позволяет нам добавлять образование и опыт работы.

    Мы отредактируем три тега внутри event class div . Первая строка позволяет нам редактировать дату, следующая строка предназначена для названия вашего образования или опыта работы, а последняя строка — для местоположения. Поэтому, если бы я хотел поделиться своим трехмесячным курсом по ракетостроению в НАСА, я бы отредактировал код, чтобы он выглядел так:

    .
     <дел>
    <дел>15.02.2004 - 15.05.2004
    Курс по ракетостроению
    НАСА

    Вы можете повторить эти шаги для двух других тегов event class div .

    6. Отзывы 90 373

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

    Этот раздел начинается с комментария Section / Testimonials . Эти цитаты имеют особое форматирование, которое мы собираемся оставить как есть. Все, что нам нужно сделать, это отредактировать текст в теге div . Если у вас есть точная цитата, которую вы хотите использовать, добавьте ее сюда. Используйте тег strong , чтобы выделить части отзыва жирным шрифтом.

    Если у вас есть фотография человека, дающего отзыв, добавьте его к тегам img в этом разделе отзывов.Если нет, не стесняйтесь удалить эту строку кода. Следующие две строки кода позволяют завершить отзыв именем человека и его должностью.

     <дел>
    <дел>
    <дел>
    Эти руководства отличны. Я так многому научился. Я не могу дождаться, чтобы попробовать больше!
    
    <дел> аватар автора-отзыва Марк Джонсон Пользователь Envato Tuts+

    Повторите эти шаги в примере кода для дизайна веб-сайта, чтобы закончить этот раздел.

    7. Медиа

    У вас есть фотографии ваших работ, которыми вы хотели бы поделиться? На этом этапе вы можете подготовить их для своего простого HTML-кода веб-сайта.

    Прежде чем мы начнем, важно отметить, что для этого раздела важно получить точные размеры ваших фотографий. Каждая фотография должна быть ровно 640x563. Используйте Adobe Photoshop для изменения размера изображений. Если у вас нет программы, вы можете использовать бесплатный веб-сайт, такой как Pixlr или Photopea.

    Как только ваши фотографии будут готовы, давайте посмотрим, как мы можем добавить их на наш веб-сайт.Найдите комментарий Section / Works , затем теги img под комментариями Media Item . Мы можем изменить нашу фотографию с помощью знакомой строки кода. Если мы прочитаем эту строку, то увидим, что наши фотографии должны находиться в папке works  , которая находится в папке  img . Нам также нужно будет изменить имя файла, чтобы наш веб-сайт знал, какую фотографию использовать.

     Гранд-Рапидс зимой 

    Вносим эти изменения и сохраняем.Обновите браузер, чтобы увидеть свою фотографию.

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

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

     <дел>
    <дел>
    <дел>
    <а href="#">
     
    Городские пейзажи
    Фотография
    большие пороги зимой

    Если эта работа доступна для просмотра в Интернете, мы можем дать ссылку на нее. В теге a под комментарием Media Item замените # в атрибуте href ссылкой на веб-страницу с вашим проектом.Попробуйте связать с Google, чтобы увидеть, как это работает.

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

    8. Обратитесь в раздел

    .

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

    Начнем с добавления вашей фотографии в тег img под комментарием Section / Content .Это следует тому же процессу, о котором мы говорили во втором шаге этого руководства по коду веб-дизайна.

    В теге address под комментарием Section / Content мы добавим наш адрес, номер телефона и адрес электронной почты. Не стесняйтесь изменять тип контактной информации, которой вы делитесь, редактируя теги strong  .

     <дел>
    аватар envato
    <адрес>
    Адрес:
    A795 Фолсом-авеню, офис 600
    Сан-Франциско, Калифорния 94107

    Телефон:
    +48 221 909 99

    Электронная почта:
    ваш.имя@example.com

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

     <дел>
    <форма>
    <дел>
    <дел>
    
    
    <дел>
    
    
    
    <дел>
    
    
    <дел>
    <дел>
    
     

    Но будет ли работать наша контактная форма? Еще нет! Нам нужно очень быстро отредактировать наш файл PHP.В Finder или File Explorer перейдите к assets  >  php в папке Okno. Затем откройте файл contact-form.php в Sublime Text.

    В этом файле вы увидите следующую строку кода:

     $emailTo = '[email protected]'; 

    Замените пример электронной почты своим собственным адресом электронной почты и сохраните файл кода веб-дизайна. Теперь, когда посетитель заполнит контактную форму, вы получите электронное письмо с сообщением о том, что он сказал.

    9.Изменить нижний колонтитул

    Это последний из наших шагов по кодированию веб-сайта. Нижний колонтитул этого одностраничного веб-сайта содержит авторские права создателей веб-шаблона Okno и три ссылки. Вы можете полностью удалить нижний колонтитул, удалить некоторые элементы или отредактировать ссылки. Если вы хотите отредактировать ссылки, я расскажу вам, как это сделать.

    Под комментарием нижнего колонтитула примера кода для дизайна веб-сайта вы найдете следующий элемент списка:

     
  • Зарегистрироваться
  • В атрибуте href замените символ # ссылкой на веб-сайт, которым вы хотите поделиться.Это изменение позволит посетителям перейти на этот веб-сайт, нажав Зарегистрироваться . Вы можете изменить этот текст на что угодно. Повторите этот процесс для следующих двух элементов списка.

    Готово!

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

    Найдите потрясающие HTML-шаблоны веб-страниц от Envato Elements

    Если вам понравился веб-шаблон, который мы использовали в этом уроке, вы можете найти еще больше разнообразия на Envato Elements.Для вас есть множество современных вариантов, и вы сможете редактировать их так же легко, как Okno. Вот лишь несколько вариантов, которые вы можете попробовать, которые можно найти на Envato Elements.

    1. AppStorm: шаблон запуска приложения

    Вот идеальный HTML-шаблон веб-страницы для технологического стартапа. AppStorm разработан с учетом продвижения программного обеспечения. Макет невероятно современный и функциональный, а также созданный для мобильных устройств. Выберите один из трех различных дизайнов домашней страницы и параметры настройки для идеального внешнего вида.AppStorm — это самый простой способ создать веб-сайт для вашего нового приложения или продукта SaaS.

    2. Jadusona: шаблон Bootstrap4 для интернет-магазина детских товаров

    Jadusona — это минималистичный и простой в использовании веб-сайт электронной коммерции. У вас будет множество демонстраций страниц, которые можно использовать для демонстрации товаров для детей и младенцев. Подготовьте свой интернет-магазин детских товаров благодаря функциям Jadusona, таким как:

    Попробуйте Jadusona, если вы искали примеры веб-дизайна для начинающих, чтобы создать свой веб-сайт.

    3. Эрика: портфолио, резюме и HTML-шаблон резюме

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

    4. Модаз | Минималистичный HTML-шаблон электронной коммерции

    Если вы запускаете сайт электронной коммерции, вы хотите, чтобы ваши продукты были звездой шоу.С HTML-шаблоном электронной коммерции Modaz это возможно. Минималистичный дизайн привлекает внимание к фотографиям вашего продукта и страницам с товарами. Выберите один из 11 вариантов домашней страницы и настройте внутренние страницы, чтобы завершить свой веб-сайт. Чистый код делает Modaz одним из самых простых способов кодирования веб-сайта.

    5. Эмили: HTML-шаблон личного блога

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

    Найдите еще больше HTML-шаблонов веб-страниц

    Если вы все еще не знаете, с чего начать кодирование веб-сайта, лучше всего начать с вариантов. Шаблоны веб-дизайна, представленные выше, являются одними из лучших примеров веб-дизайна для начинающих, которые вы можете найти в Интернете сегодня. Если вы хотите взглянуть на премиум-варианты с чистым кодом, ознакомьтесь с этими статьями от команды Envato Tuts+.

    Узнайте больше о коде с помощью Envato Tuts+

    Независимо от того, новичок вы или уже имеете опыт работы с кодом, всегда есть чему поучиться. Если вы хотите найти видеоуроки и руководства , которые помогут вам в этом, загляните на канал Envato Tuts+ на YouTube. Доступны сотни видеоуроков, в том числе по коду. Просто посмотрите наш плейлист с видеоруководством по коду. Вот что вы можете найти: 

    На веб-сайте Envato Tuts+ также доступны письменные руководства и курсы.Ниже приведены некоторые из них, с которых вы можете начать.

    Продолжайте исследовать мир кода!

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

    Помните, что вы можете найти больше полезных шаблонов веб-дизайна от Envato Elements с вашей подпиской. ThemeForest предлагает еще больше HTML-шаблонов веб-страниц, которые вы можете приобрести без членства.

    Если вы заинтересованы в разработке других веб-страниц, вы можете найти больше руководств на нашем сайте и на канале YouTube.

    Часть 1: Ваш первый сайт | Учебник по HTML и CSS

    Давайте приступим и создадим нашу первую веб-страницу.

    Для веб-разработки вам понадобятся две программы: редактор для создания файлов для веб-сайта и браузер (например, Edge, Firefox, Safari или Chrome) для просмотра и тестирования вашего веб-сайта.

    Редактор

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

    В настоящее время среди многих редакторов мне больше всего нравится Visual Studio Code (бесплатно). Вы можете использовать редактор по своему выбору, но я буду иногда ссылаться на некоторые функции Visual Studio Code (VS Code). Хорошими альтернативами являются Atom или Brackets.

    Установите редактор. Если вы не знаете, какой из них, пока используйте Visual Studio Code.

    Расширения редактора

    Пока мы работаем над этим, мы сделаем расширение для VS Code, которое даст суперспособности нашему редактору: Live Server.

    1. Откройте код Visual Studio.

    2. Откройте меню «Расширения».

    3. Введите «Live Server» в поле поиска и установите расширение.

    4. Перезагрузите код Visual Studio, чтобы активировать расширение.

    Браузер

    Разумеется, наш веб-сайт должен работать во всех основных браузерах (Edge, Firefox, Chrome и Safari).Однако для веб-разработки я рекомендую вам использовать Chrome. Chrome включает в себя очень полезные инструменты для разработчиков, которыми вы будете часто пользоваться.

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

    Создание HTML-документа

    Имея редактор и браузер, давайте создадим первый HTML-документ для нашего веб-сайта.

    1. Создайте папку на своем компьютере для своего проекта. Назовите папку Portfolio (или как хотите).

    2. Открытый код VS.

    3. Откройте меню Файл и выберите Открыть папку… . Найдите созданную папку и откройте ее.

    4. Щелкните правой кнопкой мыши под папкой и выберите Новый файл . Назовите файл index.html .

    5. Теперь у вас есть пустой текстовый файл с именем index.html .

    Почему index.html?

    Вероятно, вы могли предположить, что имя index.html имеет особое значение. Если вызывается адрес веб-сайта, например https://code.makery.ch , файл index.html автоматически отображается первым, который в данном случае https://code.makery.ch/index. .html . Для нас наша первая index.html станет нашей домашней страницей.

    Просмотр и обновление

    Теперь вы можете заполнить документ содержимым. Введите следующие строки в свой HTML.

    Для просмотра страницы мы будем использовать расширение Live Server , которое мы установили выше.Щелкните правой кнопкой мыши файл index.html (файл под папкой «Портфолио», а не файл выше в разделе «Открыть редакторы»). Затем нажмите Открыть с Live Server . Окно браузера должно открыться и показать ваш первый веб-сайт. Теперь всякий раз, когда вы сохраняете какие-либо изменения, они автоматически обновляются действующим сервером.

    Если страница не открывается в предпочитаемом вами браузере : Измените настройки на своем компьютере, чтобы сделать другой браузер стандартным браузером.В качестве альтернативы вы можете скопировать адрес (например, http://127.0.0.1:5500/index.html ) из одного браузера и вставить его в другой.

    Если страница не обновляется после изменений: Сохраните все ваши файлы в редакторе, а затем - в браузере - обновите с помощью F5 или cmd+r .

    Поздравляем! Вы только что создали свой первый сайт!

    Отступ

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

    Совет 1: Используйте клавиши Shift+Tab для перемещения отступа влево.

    Совет 2: Вы можете сделать отступ сразу для нескольких строк, если выберете их и нажмете Tab или Shift+Tab .

    Совет 3 (автоматически): Щелкните правой кнопкой мыши где-нибудь в коде программы и выберите Формат документа .

    HTML-элементы

    Теги

    В приведенном выше примере вы уже видели типичные символы HTML с угловыми скобками. Они называются тегами .

    Элементы HTML обычно (но не всегда) состоят из двух тегов, одного открывающего и одного закрывающего. В нашем примере — это открывающий тег, а с косой чертой — закрывающий тег.

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

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

    Атрибуты

    Атрибуты объявляют дополнительную информацию для элемента. Атрибуты являются частью открывающего тега элемента и всегда имеют имя и значение .

    В качестве примера давайте посмотрим на элемент HTML для ссылки. Это, пожалуй, один из самых важных элементов — чем был бы Интернет без ссылок?

    Приведенный выше элемент включает атрибут href (сокращение от «гипертекстовая ссылка») со значением https://code.makery.ch . Браузер знает, что он должен показывать ссылку как Мой сайт.

    Базовая структура HTML-страницы

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

    Структура HTML
    
      <голова>
        <мета-кодировка="utf-8">
        Веб-портфолио Марко
      
      <тело>
         

    Веб-портфолио Марко

    Напишите все, что хотите рассказать миру.

    Пояснения