Здравствуйте Уважаемые читатели моего блога! Сделаем мы с Вами html сайт, он будет простенький но тут самое главное понять суть, а далее дело тренировки и вашей фантазии.
И так кратное введение…
Писать код мы будем на языке гипертекстовой разметки HTML. С помощью html-тегов мы сверстаем с Вами страничку.
Что нам понадобится для написания своей странички.
- Браузер (Я использую Opera) Вы можете выбрать Google Chrome или Firefox
- Текстовый редактор — Visual Studio Code
- немного терпения и желания
Шаг первый
На рабочем столе создаем папку и назовем ее к примеру «Первый сайт».
Шаг второй
Щелкаем правой кнопкой мыши по папке и выбираем в контекстном меню «Открыть с помощью CODE»
Шаг третий
Запускается наш текстовый редактор, ваше рабочее окно должно выглядеть примерно вот так, почему примерно? просто все зависит от темы оформления, у кого то она черная
Шаг Четвертый
Создаем свой файл под название «Index.html» — вводим название файла и жмем Enter
Шаг пятый
Создаем свой файл под название «Index.html» — вводим название файла и жмем Enter
Вот так должно у Вас получиться.
Шаг шестой
Для того чтобы нам быстро развернуть служебные теги html, мы воспользуемся встроенным плагином Emmet — для ее вызова нужно нажать shift+1+ tab или !+ tab и развернется вот такая конструкция
Шаг Седьмой
Эту страницу уже можно запустить но откроется белая пустая страница. Для того чтобы на ней что то было давайте добавим текст — Моя первая страница! добавлять мы будем с помощью заголовка первого уровня — H1
Код мы будем писать между тегом <body>Тут будет наш код с текстом</body>
Шаг восьмой
Запускаем просмотр нашей страницы! Правой кнопкой мыши кликаем на файл index.html и в контекстном меню выбираем Open with live server
Готово! Откроется локальная страница в браузере
Как я уже писал ранее, да это не полноценный сайт и на нем совсем нет стилей, но эту страницу уже можно выгрузить на сервер. Для того чтобы сайт заиграл красками на него нужно добавить стили — Сокращенно Css (Cascading Style Sheets)
Как добавить стили на страницу можно прочитать тут
